fix(core): hide stale panes when switching docks in popup mode (#475)

Author: SaKaNa-Y

packages/core/src/client/webcomponents/components/dock/DockPanel.vue

@@ -6,7 +6,7 @@ import type { DockLayout } from './dock-layout'
 import { useElementBounding, useWindowSize } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue'
 import { getEntryGroup } from '../../state/dock-settings'
-import { useIframePanes } from '../../utils/useIframePanes'
+import { getEntryPaneKey, useIframePanes } from '../../utils/useIframePanes'
 import ViewEntry from '../views/ViewEntry.vue'
 import { DEFAULT_DOCK_LAYOUT, resolveDockAnchor } from './dock-layout'
 import { openDockContextMenu } from './DockContextMenu'
@@ -36,7 +36,7 @@ const mousePosition = reactive({ x: 0, y: 0 })
 
 const dockPanel = useTemplateRef<HTMLDivElement>('dockPanel')
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
-const panes = useIframePanes(viewsContainer, context.panel)
+const panes = useIframePanes(viewsContainer, context.panel, () => getEntryPaneKey(selected.value))
 
 function openContextMenu(e: MouseEvent) {
   if (!dockPanel.value)

packages/core/src/client/webcomponents/components/dock/DockStandalone.vue

@@ -2,7 +2,7 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed, useTemplateRef, watch } from 'vue'
 import { getEntryGroup } from '../../state/dock-settings'
-import { useIframePanes } from '../../utils/useIframePanes'
+import { getEntryPaneKey, useIframePanes } from '../../utils/useIframePanes'
 import { useIsRpcTrusted } from '../../utils/useIsRpcTrusted'
 import CommandPalette from '../command-palette/CommandPalette.vue'
 import Confirm from '../display/Confirm.vue'
@@ -20,7 +20,7 @@ const props = defineProps<{
 
 const context = props.context
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
-const panes = useIframePanes(viewsContainer, context.panel)
+const panes = useIframePanes(viewsContainer, context.panel, () => getEntryPaneKey(context.docks.selected))
 
 const isRpcTrusted = useIsRpcTrusted(context, (isTrusted) => {
   if (!isTrusted) {

packages/core/src/client/webcomponents/utils/useIframePanes.ts

@@ -1,9 +1,16 @@
+import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksPanelContext } from '@vitejs/devtools-kit/client'
 import type { IframePanes } from 'iframe-pane'
 import type { ShallowRef } from 'vue'
 import { createIframePanes } from 'iframe-pane'
 import { markRaw, onScopeDispose, shallowRef, watch } from 'vue'
 
+export function getEntryPaneKey(entry: DevToolsDockEntry | null | undefined): string | null {
+  if (!entry)
+    return null
+  return entry.type === 'iframe' ? (entry.frameId ?? entry.id) : entry.id
+}
+
 /**
  * Own an {@link IframePanes} manager for a dock shell, parking its persistent
  * iframe/element panes in the given overlay container.
@@ -18,6 +25,7 @@ import { markRaw, onScopeDispose, shallowRef, watch } from 'vue'
 export function useIframePanes(
   container: Readonly<ShallowRef<HTMLElement | undefined | null>>,
   panel?: DocksPanelContext,
+  getActiveKey?: () => string | null,
 ): Readonly<ShallowRef<IframePanes | undefined>> {
   const panes = shallowRef<IframePanes>()
 
@@ -32,6 +40,19 @@ export function useIframePanes(
     { immediate: true, flush: 'post' },
   )
 
+  if (getActiveKey) {
+    watch(
+      getActiveKey,
+      (activeKey) => {
+        panes.value?.list().forEach((pane) => {
+          if (pane.id !== activeKey)
+            pane.hide()
+        })
+      },
+      { flush: 'post' },
+    )
+  }
+
   if (panel) {
     // A panel move changes its box position without resizing the target, so the
     // shared ResizeObserver/scroll listeners never fire — re-sync explicitly.