pinokiod 7.3.10 → 7.3.12

package/server/public/tab-link-popover.css

@@ -1,42 +1,124 @@
 .tab-link-popover {
   position: fixed;
   display: none;
-  flex-direction: column;
-  gap: 4px;
-  padding: 8px 0;
-  border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.12);
-  background: rgba(255, 255, 255, 0.97);
-  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);
   z-index: 9999;
+  box-sizing: border-box;
   min-width: 240px;
   max-width: 420px;
-  backdrop-filter: blur(6px);
-}
-body.dark .tab-link-popover {
-  border-color: rgba(255, 255, 255, 0.08);
-  background: rgba(17, 24, 39, 0.95);
-  box-shadow: 0 12px 36px -12px rgba(15, 23, 42, 0.55);
+  color: var(--pinokio-sidebar-tab-active-color, rgba(15, 23, 42, 0.9));
 }
 .tab-link-popover.visible {
+  display: block;
+}
+.tab-link-popover--modal {
+  inset: 0;
+  z-index: 10000060;
+  min-width: 0;
+  max-width: none;
+  padding: 16px;
+}
+.tab-link-popover--modal.visible {
+  display: grid;
+  place-items: center;
+}
+body.tab-link-popover-open {
+  overflow: hidden;
+}
+.tab-link-popover .tab-link-popover-backdrop {
+  display: none;
+}
+.tab-link-popover--modal .tab-link-popover-backdrop {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  appearance: none;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  background: rgba(15, 23, 42, 0.28);
+  cursor: default;
+}
+body.dark .tab-link-popover--modal .tab-link-popover-backdrop {
+  background: rgba(0, 0, 0, 0.44);
+}
+.tab-link-popover .tab-link-popover-surface {
+  position: relative;
+  width: 100%;
+  min-width: inherit;
+  max-width: inherit;
+  max-height: calc(100vh - 24px);
   display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  padding: 8px 0;
+  border-radius: 8px;
+  border: 1px solid var(--pinokio-sidebar-tabbar-border, rgba(15, 23, 42, 0.08));
+  background: var(--pinokio-sidebar-tabbar-bg, rgba(255, 255, 255, 0.98));
+  color: inherit;
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+}
+body.dark .tab-link-popover .tab-link-popover-surface {
+  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
+}
+.tab-link-popover--modal .tab-link-popover-surface {
+  width: min(460px, calc(100vw - 32px));
+  min-width: 0;
+  max-width: 460px;
+  max-height: calc(100dvh - 32px);
+  padding-bottom: 10px;
 }
 .tab-link-popover .tab-link-popover-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 10px 6px 14px;
+}
+.tab-link-popover--anchored .tab-link-popover-header {
+  grid-template-columns: minmax(0, 1fr);
+  padding-right: 14px;
+}
+.tab-link-popover .tab-link-popover-title {
+  min-width: 0;
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 10px 14px 6px;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.05em;
   text-transform: uppercase;
-  color: rgba(15, 23, 42, 0.55);
+  color: var(--pinokio-sidebar-action-muted, rgba(15, 23, 42, 0.55));
 }
-.tab-link-popover .tab-link-popover-header i {
+.tab-link-popover .tab-link-popover-title-icon i {
   font-size: 12px;
 }
-body.dark .tab-link-popover .tab-link-popover-header {
-  color: rgba(226, 232, 240, 0.7);
+.tab-link-popover .tab-link-popover-close {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  appearance: none;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--pinokio-sidebar-icon-muted, rgba(31, 41, 55, 0.58));
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+.tab-link-popover--anchored .tab-link-popover-close {
+  display: none;
+}
+.tab-link-popover .tab-link-popover-close:hover,
+.tab-link-popover .tab-link-popover-close:focus-visible {
+  background: var(--pinokio-sidebar-tab-hover, rgba(15, 23, 42, 0.06));
+  color: var(--pinokio-sidebar-icon-active, rgba(17, 24, 39, 0.84));
+  outline: none;
 }
 .tab-link-popover .tab-link-popover-item {
   width: 100%;
@@ -115,6 +197,20 @@ body.dark .tab-link-popover .tab-link-popover-item--action .value {
   flex: 0 0 auto;
   margin-left: auto;
 }
+.tab-link-popover--modal .tab-link-popover-item.qr-inline {
+  align-items: center;
+  gap: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.tab-link-popover--modal .tab-link-popover-item.qr-inline .qr {
+  width: 148px;
+  height: 148px;
+  padding: 8px;
+  border-radius: 6px;
+  background: #ffffff;
+  box-sizing: border-box;
+}
 .tab-link-popover .tab-link-popover-item:hover,
 .tab-link-popover .tab-link-popover-item:focus-visible {
   background: rgba(15, 23, 42, 0.06);
@@ -201,6 +297,54 @@ body.dark .tab-link-popover .tab-link-popover-footer:hover,
 body.dark .tab-link-popover .tab-link-popover-footer:focus-visible {
   background: rgba(147, 197, 253, 0.35);
 }
+@media only screen and (max-width: 600px) {
+  .tab-link-popover--modal {
+    padding: 0;
+  }
+  .tab-link-popover--modal .tab-link-popover-backdrop {
+    background: transparent;
+  }
+  .tab-link-popover--modal .tab-link-popover-surface {
+    width: 100vw;
+    min-width: 0;
+    max-width: none;
+    min-height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    border-left: 0;
+    border-right: 0;
+    box-shadow: none;
+  }
+  .tab-link-popover--modal .tab-link-popover-header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 12px 12px 8px 16px;
+    background: var(--pinokio-sidebar-tabbar-bg, rgba(255, 255, 255, 0.98));
+  }
+  .tab-link-popover--modal .tab-link-popover-item {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+  .tab-link-popover--modal .tab-link-popover-item--action {
+    min-height: 44px;
+  }
+  .tab-link-popover--modal .tab-link-popover-item.qr-inline {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    justify-items: start;
+    gap: 10px;
+  }
+  .tab-link-popover--modal .tab-link-popover-item.qr-inline .qr {
+    width: min(220px, 64vw);
+    height: min(220px, 64vw);
+    margin: 6px auto 0;
+  }
+  .tab-link-popover--modal .tab-link-popover-section {
+    padding-right: 16px;
+    padding-left: 16px;
+  }
+}
 .appcanvas > aside .menu-container .tab-link-popover-host {
   display: flex;
   align-items: center;

package/server/public/tab-link-popover.js

@@ -11,8 +11,12 @@
   let tabLinkRouterHttpsActive = null
   let tabLinkPeerInfoPromise = null
   let tabLinkPeerInfoExpiry = 0
+  let tabLinkPopoverMode = "anchored"
+  let tabLinkReturnFocusEl = null
   const TAB_LINK_TRIGGER_CLASS = "tab-link-popover-trigger"
   const TAB_LINK_TRIGGER_HOST_CLASS = "tab-link-popover-host"
+  const TAB_LINK_POPOVER_SURFACE_CLASS = "tab-link-popover-surface"
+  const TAB_LINK_POPOVER_TITLE_ID = `${TAB_LINK_POPOVER_ID}-title`
 
   const shouldAttachTabLinkTrigger = (link) => {
     if (!link || !link.classList || !link.classList.contains("frame-link")) {
@@ -126,11 +130,105 @@
     return { available: false, enabled: true }
   }
 
+  const getTabLinkPopoverSurface = (popover) => {
+    if (!popover || typeof popover.querySelector !== "function") {
+      return null
+    }
+    return popover.querySelector(`.${TAB_LINK_POPOVER_SURFACE_CLASS}`)
+  }
+
+  const getTabLinkFocusables = (root) => {
+    if (!root || typeof root.querySelectorAll !== "function") {
+      return []
+    }
+    return Array.from(root.querySelectorAll([
+      'a[href]',
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(','))).filter((element) => {
+      if (!(element instanceof HTMLElement)) {
+        return false
+      }
+      if (element.hidden || element.getAttribute("aria-hidden") === "true") {
+        return false
+      }
+      const rect = element.getBoundingClientRect()
+      return rect.width > 0 || rect.height > 0
+    })
+  }
+
+  const resetTabLinkPopoverContent = (popover, mode) => {
+    if (!popover) {
+      return null
+    }
+    tabLinkPopoverMode = mode === "modal" ? "modal" : "anchored"
+    popover.classList.toggle("tab-link-popover--modal", tabLinkPopoverMode === "modal")
+    popover.classList.toggle("tab-link-popover--anchored", tabLinkPopoverMode !== "modal")
+    popover.setAttribute("data-mode", tabLinkPopoverMode)
+    popover.removeAttribute("aria-labelledby")
+    popover.removeAttribute("aria-modal")
+    popover.removeAttribute("role")
+    const surface = getTabLinkPopoverSurface(popover)
+    if (surface) {
+      surface.innerHTML = ""
+      surface.removeAttribute("aria-labelledby")
+      surface.removeAttribute("aria-modal")
+      surface.removeAttribute("role")
+      surface.removeAttribute("tabindex")
+      if (tabLinkPopoverMode === "modal") {
+        surface.setAttribute("role", "dialog")
+        surface.setAttribute("aria-modal", "true")
+        surface.setAttribute("aria-labelledby", TAB_LINK_POPOVER_TITLE_ID)
+        surface.setAttribute("tabindex", "-1")
+      }
+    }
+    return surface
+  }
+
+  const createTabLinkPopoverHeader = (title = "Tab actions") => {
+    const header = document.createElement("div")
+    header.className = "tab-link-popover-header"
+
+    const heading = document.createElement("div")
+    heading.className = "tab-link-popover-title"
+    heading.id = TAB_LINK_POPOVER_TITLE_ID
+
+    const icon = document.createElement("span")
+    icon.className = "tab-link-popover-title-icon"
+    icon.innerHTML = '<i class="fa-solid fa-ellipsis" aria-hidden="true"></i>'
+
+    const text = document.createElement("span")
+    text.textContent = title
+    heading.append(icon, text)
+
+    const close = document.createElement("button")
+    close.type = "button"
+    close.className = "tab-link-popover-close"
+    close.setAttribute("data-tab-link-popover-close", "")
+    close.setAttribute("aria-label", "Close tab actions")
+    close.innerHTML = '<i class="fa-solid fa-xmark" aria-hidden="true"></i>'
+
+    header.append(heading, close)
+    return header
+  }
+
   const ensureTabLinkPopoverEl = () => {
     if (!tabLinkPopoverEl) {
       tabLinkPopoverEl = document.createElement("div")
       tabLinkPopoverEl.id = TAB_LINK_POPOVER_ID
-      tabLinkPopoverEl.className = "tab-link-popover"
+      tabLinkPopoverEl.className = "tab-link-popover tab-link-popover--anchored"
+      const backdrop = document.createElement("button")
+      backdrop.type = "button"
+      backdrop.className = "tab-link-popover-backdrop"
+      backdrop.setAttribute("data-tab-link-popover-close", "")
+      backdrop.setAttribute("aria-label", "Close tab actions")
+      backdrop.tabIndex = -1
+      const surface = document.createElement("div")
+      surface.className = TAB_LINK_POPOVER_SURFACE_CLASS
+      tabLinkPopoverEl.append(backdrop, surface)
       tabLinkPopoverEl.addEventListener("mouseenter", () => {
         if (tabLinkHideTimer) {
           clearTimeout(tabLinkHideTimer)
@@ -143,6 +241,13 @@
         }
       })
       tabLinkPopoverEl.addEventListener("click", (event) => {
+        const closeControl = event.target.closest("[data-tab-link-popover-close]")
+        if (closeControl && tabLinkPopoverEl.contains(closeControl)) {
+          event.preventDefault()
+          event.stopPropagation()
+          hideTabLinkPopover({ immediate: true })
+          return
+        }
         const item = event.target.closest(".tab-link-popover-item")
         if (!item) {
           return
@@ -1348,14 +1453,52 @@
     if (!popover || !link) {
       return
     }
+    const surface = getTabLinkPopoverSurface(popover)
+    if (tabLinkPopoverMode === "modal") {
+      popover.style.minWidth = ""
+      popover.style.left = ""
+      popover.style.top = ""
+      popover.style.maxHeight = ""
+      popover.style.overflowY = ""
+      if (surface) {
+        surface.style.maxHeight = ""
+        surface.style.overflowY = ""
+      }
+      popover.style.display = ""
+      popover.style.visibility = ""
+      popover.classList.add("visible")
+      if (document.body) {
+        document.body.classList.add("tab-link-popover-open")
+      }
+      window.requestAnimationFrame(() => {
+        if (!popover.classList.contains("visible")) {
+          return
+        }
+        const close = popover.querySelector(".tab-link-popover-close")
+        if (close && typeof close.focus === "function") {
+          close.focus()
+        } else if (surface && typeof surface.focus === "function") {
+          surface.focus()
+        }
+      })
+      return
+    }
+
+    if (document.body) {
+      document.body.classList.remove("tab-link-popover-open")
+    }
     const rect = link.getBoundingClientRect()
     const minWidth = Math.max(rect.width, 260)
     popover.style.minWidth = `${Math.round(minWidth)}px`
-    popover.style.display = "flex"
+    popover.style.display = ""
     popover.classList.add("visible")
     popover.style.visibility = "hidden"
     popover.style.maxHeight = ""
     popover.style.overflowY = ""
+    if (surface) {
+      surface.style.maxHeight = ""
+      surface.style.overflowY = ""
+    }
     const popoverWidth = popover.offsetWidth
     let popoverHeight = popover.offsetHeight
     const viewportPadding = 12
@@ -1380,8 +1523,13 @@
 
       const availableHeight = Math.max(0, window.innerHeight - viewportPadding * 2)
       if (availableHeight > 0 && popoverHeight > availableHeight) {
-        popover.style.maxHeight = `${Math.round(availableHeight)}px`
-        popover.style.overflowY = "auto"
+        if (surface) {
+          surface.style.maxHeight = `${Math.round(availableHeight)}px`
+          surface.style.overflowY = "auto"
+        } else {
+          popover.style.maxHeight = `${Math.round(availableHeight)}px`
+          popover.style.overflowY = "auto"
+        }
         popoverHeight = Math.min(availableHeight, popover.offsetHeight)
       }
 
@@ -1404,8 +1552,13 @@
 
       const availableBelow = Math.max(0, window.innerHeight - viewportPadding - top)
       if (availableBelow > 0 && popoverHeight > availableBelow) {
-        popover.style.maxHeight = `${Math.round(availableBelow)}px`
-        popover.style.overflowY = "auto"
+        if (surface) {
+          surface.style.maxHeight = `${Math.round(availableBelow)}px`
+          surface.style.overflowY = "auto"
+        } else {
+          popover.style.maxHeight = `${Math.round(availableBelow)}px`
+          popover.style.overflowY = "auto"
+        }
         popoverHeight = Math.min(availableBelow, popover.offsetHeight)
       }
     }
@@ -1417,14 +1570,27 @@
 
   const hideTabLinkPopover = ({ immediate = false } = {}) => {
     const applyHide = () => {
+      const returnFocusEl = tabLinkPopoverMode === "modal" ? tabLinkReturnFocusEl : null
       if (tabLinkPopoverEl) {
         tabLinkPopoverEl.classList.remove("visible")
         tabLinkPopoverEl.style.display = "none"
       }
+      if (document.body) {
+        document.body.classList.remove("tab-link-popover-open")
+      }
       tabLinkActiveLink = null
       tabLinkPendingLink = null
       tabLinkHideTimer = null
       tabLinkCloseOnMouseLeave = false
+      tabLinkPopoverMode = "anchored"
+      tabLinkReturnFocusEl = null
+      if (returnFocusEl && typeof returnFocusEl.focus === "function" && document.contains(returnFocusEl)) {
+        window.requestAnimationFrame(() => {
+          try {
+            returnFocusEl.focus()
+          } catch (_) {}
+        })
+      }
     }
 
     if (tabLinkHideTimer) {
@@ -1454,6 +1620,10 @@
     const restrictToBase = options && options.restrictToBase === true
     const forceCanonicalQr = options && options.forceCanonicalQr === true
     tabLinkCloseOnMouseLeave = options && options.closeOnMouseLeave === true
+    const presentationMode = tabLinkCloseOnMouseLeave ? "anchored" : "modal"
+    tabLinkReturnFocusEl = presentationMode === "modal"
+      ? ((link && link.querySelector && link.querySelector(`.${TAB_LINK_TRIGGER_CLASS}`)) || link)
+      : null
     let sameOrigin = false
     let canonicalBase = canonicalizeUrl(effectiveHref)
     if (canonicalBase && isHttpUrl(canonicalBase)) {
@@ -1515,10 +1685,11 @@
     // Show lightweight loading popover immediately while mapping fetch runs
     try {
       const pop = ensureTabLinkPopoverEl()
-      pop.innerHTML = ''
-      const header = document.createElement('div')
-      header.className = 'tab-link-popover-header'
-      header.innerHTML = `<i class="fa-solid fa-ellipsis"></i><span>Tab actions</span>`
+      const surface = resetTabLinkPopoverContent(pop, presentationMode)
+      if (!surface) {
+        throw new Error("Missing tab link popover surface")
+      }
+      const header = createTabLinkPopoverHeader("Tab actions")
       const item = document.createElement('div')
       item.className = 'tab-link-popover-item tab-link-popover-item--action'
       const icon = document.createElement('span')
@@ -1534,7 +1705,7 @@
       value.textContent = 'Preparing actions'
       copy.append(label, value)
       item.append(icon, copy)
-      pop.append(header, item)
+      surface.append(header, item)
       positionTabLinkPopover(pop, link)
     } catch (_) {}
 
@@ -1708,12 +1879,14 @@
     }
 
     const popover = ensureTabLinkPopoverEl()
-    popover.innerHTML = ""
+    const popoverSurface = resetTabLinkPopoverContent(popover, presentationMode)
+    if (!popoverSurface) {
+      hideTabLinkPopover({ immediate: true })
+      return
+    }
 
-    const header = document.createElement("div")
-    header.className = "tab-link-popover-header"
-    header.innerHTML = `<i class="fa-solid fa-ellipsis"></i><span>Tab actions</span>`
-    popover.appendChild(header)
+    const header = createTabLinkPopoverHeader("Tab actions")
+    popoverSurface.appendChild(header)
 
     actionItems.forEach((actionItem) => {
       const item = document.createElement("button")
@@ -1745,20 +1918,20 @@
       }
       copy.append(labelSpan, valueSpan)
       item.append(icon, copy)
-      popover.appendChild(item)
+      popoverSurface.appendChild(item)
     })
 
     if (actionItems.length > 0 && routeEntries.length > 0) {
       const divider = document.createElement("div")
       divider.className = "tab-link-popover-divider"
-      popover.appendChild(divider)
+      popoverSurface.appendChild(divider)
     }
 
     if (routeEntries.length > 0) {
       const section = document.createElement("div")
       section.className = "tab-link-popover-section"
       section.textContent = "Browser routes"
-      popover.appendChild(section)
+      popoverSurface.appendChild(section)
     }
 
     routeEntries.forEach((entry) => {
@@ -1790,7 +1963,7 @@
         item.className = "tab-link-popover-item"
         item.append(labelSpan, valueSpan)
       }
-      popover.appendChild(item)
+      popoverSurface.appendChild(item)
     })
 
     const hasHttpsEntry = Array.isArray(entries) && entries.some((entry) => entry && entry.type === "https")
@@ -1812,7 +1985,7 @@
       footerValue.textContent = "Click to activate"
 
       footerButton.append(footerLabel, footerValue)
-      popover.appendChild(footerButton)
+      popoverSurface.appendChild(footerButton)
     }
 
     if (actionItems.length === 0 && routeEntries.length === 0 && !(tabLinkRouterHttpsActive === false && !hasHttpsEntry)) {
@@ -1922,10 +2095,45 @@
     hideTabLinkPopover({ immediate: true })
   }
 
+  const handleGlobalKeydown = (event) => {
+    if (!tabLinkPopoverEl || !tabLinkPopoverEl.classList.contains("visible")) {
+      return
+    }
+    if (event.key === "Escape") {
+      event.preventDefault()
+      hideTabLinkPopover({ immediate: true })
+      return
+    }
+    if (event.key !== "Tab" || tabLinkPopoverMode !== "modal") {
+      return
+    }
+    const surface = getTabLinkPopoverSurface(tabLinkPopoverEl)
+    const focusables = getTabLinkFocusables(surface)
+    if (focusables.length === 0) {
+      event.preventDefault()
+      if (surface && typeof surface.focus === "function") {
+        surface.focus()
+      }
+      return
+    }
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
   window.addEventListener("scroll", (event) => {
     if (!tabLinkPopoverEl || !tabLinkPopoverEl.classList.contains("visible")) {
       return
     }
+    if (tabLinkPopoverMode === "modal") {
+      return
+    }
     if (event && event.target && tabLinkPopoverEl.contains(event.target)) {
       return
     }
@@ -1939,6 +2147,7 @@
   })
 
   document.addEventListener("mousedown", handleGlobalPointer, true)
+  document.addEventListener("keydown", handleGlobalKeydown, true)
   try {
     document.addEventListener("touchstart", handleGlobalPointer, { passive: true, capture: true })
   } catch (_) {