dsh-x-core 0.1.21 → 0.1.23

package/public/internal-tabs.js

@@ -9,16 +9,10 @@
   const send = (message) => window.ipc?.postMessage(typeof message === 'string' ? message : JSON.stringify(message))
   const closeIcon = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true"><path d="m7 7 10 10M7 17 17 7"/></svg>'
   const items = new Map()
-  const indicator = document.createElement('div')
-  indicator.className = 'internal-tab-indicator'
-  indicator.setAttribute('aria-hidden', 'true')
-  list.prepend(indicator)
   let lastHeight = 0
   let selected = ''
   let presentation = 0
   let submittedPresentation = 0
-  let indicatorFrame = 0
-  let instantFrame = 0
   let nextRequest = Date.now()
   let pendingSelection = null
   let presentationFrame = 0
@@ -29,7 +23,7 @@
   let suppressedClick = null
   const moves = new Map()
   const reducedMotion = () => root.classList.contains('reduce-motion') || matchMedia('(prefers-reduced-motion: reduce)').matches
-  const tabNodes = () => [...list.children].filter((item) => item !== indicator)
+  const tabNodes = () => [...list.children]
   const order = () => tabNodes().map((item) => item.dataset.id)
   const glide = (item, from) => {
     moves.get(item)?.cancel()
@@ -39,21 +33,28 @@
     moves.set(item, animation)
     animation.finished.catch(() => {}).then(() => { if (moves.get(item) === animation) moves.delete(item) })
   }
-  const arrange = (ids, animate = false) => {
+  /** 新标签淡入并轻微放大到原尺寸。用独立的 scale 属性，不和 glide 的 translateX 抢 transform。 */
+  const enter = (item) => {
+    if (reducedMotion()) return
+    item.animate([{ opacity: 0, scale: '0.94' }, { opacity: 1, scale: '1' }], { duration: 180, easing: 'cubic-bezier(.2, .8, .2, 1)' })
+  }
+  const arrange = (ids, animate = false, snapshot = null) => {
     const current = order()
     const desired = [...ids.filter((id) => items.has(id)), ...current.filter((id) => !ids.includes(id))]
     // 原生回执和标题轮询经常不改变顺序，不能因此提前结束正在播放的让位动画。
-    if (desired.join('\0') === current.join('\0')) { positionIndicator(); return }
+    if (desired.join('\0') === current.join('\0')) return
     const focus = list.contains(document.activeElement) ? document.activeElement : null
-    const before = new Map(tabNodes().map((item) => [item, item.getBoundingClientRect().left]))
+    // snapshot 是调用方在删掉节点之前量好的位置（关标签时用），拿不到才现量。
+    const before = snapshot || new Map(tabNodes().map((item) => [item, item.getBoundingClientRect().left]))
     for (const animation of moves.values()) animation.cancel()
     moves.clear()
-    let previous = indicator
+    let previous = null
     // 只移动节点，保留点击焦点；拖动期间新出现的标签继续排在末尾。
     for (const id of desired) {
       const item = items.get(id)
       if (!item) continue
-      if (previous.nextSibling !== item) previous.after(item)
+      if (!previous) list.append(item)
+      else if (previous.nextSibling !== item) previous.after(item)
       previous = item
     }
     if (focus?.isConnected && document.activeElement !== focus) focus.focus({ preventScroll: true })
@@ -62,34 +63,13 @@
     if (animate) for (const item of tabNodes()) {
       if (item !== drag?.item && before.has(item)) glide(item, before.get(item) - item.getBoundingClientRect().left)
     }
-    positionIndicator()
   }
   const commitOrder = () => {
     pendingOrder = { ids: order(), request: ++nextRequest }
     send({ action: 'reorder', ...pendingOrder })
   }
 
-  const positionIndicator = ({ instant = false } = {}) => {
-    const item = items.get(selected)
-    if (!item || area.hidden) { indicator.classList.remove('visible'); return }
-    const first = instant || !indicator.classList.contains('visible')
-    cancelAnimationFrame(instantFrame)
-    if (first) indicator.classList.add('instant')
-    else indicator.classList.remove('instant')
-    indicator.style.width = `${item.offsetWidth}px`
-    indicator.style.transform = `translate3d(${item.offsetLeft + (drag?.item === item ? drag.offset || 0 : 0)}px, ${item.offsetTop}px, 0)`
-    indicator.classList.add('visible')
-    if (first) {
-      void indicator.offsetWidth
-      instantFrame = requestAnimationFrame(() => indicator.classList.remove('instant'))
-    }
-  }
-  const scheduleIndicator = () => {
-    cancelAnimationFrame(indicatorFrame)
-    indicatorFrame = requestAnimationFrame(() => positionIndicator({ instant: true }))
-  }
   const selectVisual = (id) => {
-    cancelAnimationFrame(indicatorFrame)
     const changed = id !== selected
     selected = id
     for (const [key, item] of items) {
@@ -97,7 +77,6 @@
       item.querySelector('.internal-tab-label').setAttribute('aria-selected', String(key === id))
     }
     if (changed) items.get(id)?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
-    positionIndicator()
   }
   const selectTab = (id) => {
     // 点击即开始滑动，不等待跨 WebView 的回传；请求编号防止快速连点被旧状态拉回。
@@ -129,7 +108,6 @@
     if (ids.join('\0') !== order().join('\0')) arrange(ids, true)
     drag.offset = left - item.offsetLeft
     item.style.transform = `translateX(${drag.offset}px)`
-    positionIndicator({ instant: true })
   }
   const scrollDrag = () => {
     if (!drag?.started) return
@@ -154,7 +132,6 @@
         glide(ended.item, ended.offset)
         if (order().join('\0') !== ended.original.join('\0')) commitOrder()
       }
-      positionIndicator()
     }
   }
   list.addEventListener('pointerdown', (event) => {
@@ -210,7 +187,15 @@
     const active = String(state.active || '')
     const en = state.lang === 'en'
     root.classList.toggle('internal-tabs', enabled)
+    // 顶栏形态由「有没有标签」决定：一个标签都没有时还是原来那条高顶栏，浏览器式扁条只在真有标签时出现。
+    root.classList.toggle('has-tabs', enabled && (state.tabs || []).length > 0)
     root.classList.toggle('internal-dsh-active', enabled && !!active)
+    // 选中标签的底色跟选中那块页面走（外壳采样来的）：同色才看不出接缝，采样不到就退回主题色。
+    if (state.surface) root.style.setProperty('--tab-surface', state.surface)
+    else root.style.removeProperty('--tab-surface')
+    // 标签上的字跟着采到的底色走（亮底给深字）：外壳算好放在 state.ink 里
+    if (state.ink) root.style.setProperty('--tab-ink', state.ink)
+    else root.style.removeProperty('--tab-ink')
     area.hidden = !enabled
     // 隐藏的管理内容不能被键盘 Tab 聚焦；顶部设置、Star 与窗口控制仍保留原来的交互。
     const main = document.querySelector('main')
@@ -225,13 +210,18 @@
     if (drag && (!enabled || !ids.has(drag.item.dataset.id))) finishDrag(true)
     if (pendingOrder && state.orderRequest === pendingOrder.request) pendingOrder = null
     if (pendingSelection && (state.request === pendingSelection.request || (pendingSelection.id && !ids.has(pendingSelection.id)))) pendingSelection = null
-    for (const [id, item] of items) {
-      if (!ids.has(id)) { item.remove(); items.delete(id) }
+    // 关标签：先量一遍现在的位置，删掉节点后让剩下的从老位置滑过去，别硬跳一格。
+    const closing = [...items].filter(([id]) => !ids.has(id))
+    const closingBefore = closing.length ? new Map(tabNodes().map((item) => [item, item.getBoundingClientRect().left])) : null
+    for (const [id, item] of closing) {
+      item.remove()
+      items.delete(id)
     }
     const localOrder = drag || pendingOrder ? order() : null
     for (const tab of state.tabs || []) {
       let item = items.get(tab.id)
-      if (!item) {
+      const created = !item
+      if (created) {
         item = document.createElement('div')
         item.className = 'internal-tab'
         item.dataset.id = tab.id
@@ -245,6 +235,8 @@
       }
       // 复用节点让选中态连续过渡，也保留键盘焦点；后台标题变化不能重建整排标签。
       if (!item.parentNode) list.append(item)
+      // 入场动画要等节点进了文档再起，否则（未挂载的元素不动画）什么都看不到。
+      if (created) enter(item)
       item.classList.toggle('stopped', !!tab.stopped)
       const label = item.querySelector('.internal-tab-label')
       label.title = [tab.title, tab.pageTitle].filter(Boolean).join(' — ')
@@ -254,7 +246,7 @@
       close.title = en ? 'Close tab' : '关闭标签'
       close.setAttribute('aria-label', close.title)
     }
-    arrange(localOrder || (state.tabs || []).map((tab) => tab.id))
+    arrange(localOrder || (state.tabs || []).map((tab) => tab.id), !!closingBefore, closingBefore)
     if (drag?.started) moveDrag()
     selectVisual(pendingSelection?.id ?? active)
     reportHeight()
@@ -285,7 +277,19 @@
   document.getElementById('settingsEntry')?.addEventListener('click', () => {
     if (root.classList.contains('internal-dsh-active')) selectTab('')
   }, true)
-  new ResizeObserver(() => { reportHeight(); scheduleIndicator() }).observe(header)
+  new ResizeObserver(reportHeight).observe(header)
+
+  /**
+   * 标签中心的 x（给外壳采「这张标签正下方」的底色用）：视图和管理页同宽同原点，
+   * 所以 DOM 坐标就是页面里的坐标。拿不到（刚建、已关）返回 0，外壳那边退回左上角。
+   */
+  window.launcherTabCenterX = (id) => {
+    const item = items.get(id)
+    if (!item) return 0
+    const box = item.getBoundingClientRect()
+    return Math.round(box.left + box.width / 2)
+  }
+
   // 原生标签页叠在管理页之上，管理页的弹窗（.ask）会被它盖住、遮罩却挡住了标签栏，弹窗就关不掉了。
   // 有弹窗开着就让外壳先收起标签页，关完再放回；初值为 null，保证页面重载后先把真实状态同步一次。
   let overlay = null