feat: move popup to context menu (#207)

Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -4,7 +4,6 @@ import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { BUILTIN_ENTRY_CLIENT_AUTH_NOTICE } from '../constants'
 import { docksSplitGroupsWithCapacity } from '../state/dock-settings'
-import { filterPopupDockEntry, isDockPopupEntryVisible } from '../state/popup'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import DockOverflowButton from './DockOverflowButton.vue'
 import BracketLeft from './icons/BracketLeft.vue'
@@ -75,12 +74,7 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
-const isPopupEntryVisible = computed(() => isDockPopupEntryVisible(context.clientType))
-const groupedEntries = computed(() => {
-  if (isPopupEntryVisible.value)
-    return context.docks.groupedEntries
-  return filterPopupDockEntry(context.docks.groupedEntries)
-})
+const groupedEntries = computed(() => context.docks.groupedEntries)
 
 const splitEntries = computed(() => {
   return docksSplitGroupsWithCapacity(groupedEntries.value, 5)

packages/core/src/client/webcomponents/components/Dock.vue

@@ -2,6 +2,7 @@ import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { h } from 'vue'
 import { setDockContextMenu } from '../state/floating-tooltip'
+import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../state/popup'
 
 // @unocss-include
 
@@ -77,6 +78,15 @@ export function openDockContextMenu(options: {
       action: () => refreshDock(context, entry),
       visible: canRefresh(entry),
     },
+    {
+      label: 'Popup',
+      icon: 'i-ph-arrow-square-out-duotone',
+      action: () => {
+        setDockContextMenu(null)
+        requestDockPopupOpen(context)
+      },
+      visible: isDockPopupSupported() && !useIsDockPopupOpen().value && context.clientType === 'embedded',
+    },
   ].filter(item => item.visible)
 
   if (items.length === 0)

packages/core/src/client/webcomponents/components/DockContextMenu.ts

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { computed, markRaw, ref, useTemplateRef, watch } from 'vue'
-import { filterPopupDockEntry, isDockPopupEntryVisible } from '../state/popup'
 import { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
 import FloatingElements from './FloatingElements.vue'
@@ -31,12 +30,7 @@ watch(
   { immediate: true },
 )
 
-const groupedEntries = computed(() => {
-  if (isDockPopupEntryVisible('standalone'))
-    return context.docks.groupedEntries
-
-  return filterPopupDockEntry(context.docks.groupedEntries)
-})
+const groupedEntries = computed(() => context.docks.groupedEntries)
 
 function switchEntry(id: string | undefined) {
   if (id) {

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

@@ -16,7 +16,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
 </script>
 
 <template>
-  <FloatingPopover :item="dockContextMenu" @dismiss="() => setDockContextMenu(null)" />
   <FloatingPopover :item="docksOverflowPanel" @dismiss="() => setDocksOverflowPanel(null)" />
+  <FloatingPopover :item="dockContextMenu" @dismiss="() => setDockContextMenu(null)" />
   <FloatingPopover :item="tooltip" />
 </template>

packages/core/src/client/webcomponents/components/FloatingElements.vue

@@ -1,7 +1,7 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { setDocksOverflowPanel, useDocksOverflowPanel } from '../floating-tooltip'
-import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
+import { closeDockPopup, isDockPopupSupported, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
 
 const {
   DockStandaloneElementMock,
@@ -49,6 +49,9 @@ function createMockContext(
         inactiveTimeout: 3_000,
       },
     },
+    docks: {
+      switchEntry: vi.fn(),
+    },
   } as unknown as DocksContext
 }
 
@@ -145,49 +148,11 @@ describe('dock popup state', () => {
 
   it('returns null when the API is unavailable', async () => {
     expect(isDockPopupSupported()).toBe(false)
-    expect(isDockPopupEntryVisible('embedded')).toBe(false)
     const popup = await openDockPopup(createMockContext())
     expect(popup).toBeNull()
     expect(useIsDockPopupOpen().value).toBe(false)
   })
 
-  it('hides popup entry when popup is already open', async () => {
-    const popup = createMockPopupWindow()
-    const requestWindow = vi.fn().mockResolvedValue(popup)
-    ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow }
-
-    expect(isDockPopupEntryVisible('embedded')).toBe(true)
-    await openDockPopup(createMockContext())
-    expect(isDockPopupEntryVisible('embedded')).toBe(false)
-  })
-
-  it('hides popup entry when running inside popup window', () => {
-    ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow: vi.fn() }
-
-    expect(isDockPopupEntryVisible('standalone')).toBe(false)
-  })
-
-  it('filters popup entry from grouped entries', () => {
-    const groups = [
-      ['~builtin', [
-        { type: '~builtin', id: '~popup', title: 'Popup', icon: 'test' },
-        { type: '~builtin', id: '~settings', title: 'Settings', icon: 'test' },
-      ]],
-      ['default', [
-        { type: 'iframe', id: 'app', title: 'App', icon: 'test', url: 'http://example.com' },
-      ]],
-    ] as const as Parameters<typeof filterPopupDockEntry>[0]
-
-    expect(filterPopupDockEntry(groups)).toEqual([
-      ['~builtin', [
-        { type: '~builtin', id: '~settings', title: 'Settings', icon: 'test' },
-      ]],
-      ['default', [
-        { type: 'iframe', id: 'app', title: 'App', icon: 'test', url: 'http://example.com' },
-      ]],
-    ])
-  })
-
   it('opens popup window and mounts standalone frame', async () => {
     const popup = createMockPopupWindow()
     const requestWindow = vi.fn().mockResolvedValue(popup)
@@ -240,32 +205,36 @@ describe('dock popup state', () => {
     expect(popup.focus).toHaveBeenCalledTimes(1)
   })
 
-  it('clears popup state when popup is closed', async () => {
+  it('clears popup state and closes panel when popup is closed', async () => {
     const popup = createMockPopupWindow()
     const requestWindow = vi.fn().mockResolvedValue(popup)
     ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow }
 
-    await openDockPopup(createMockContext())
+    const context = createMockContext()
+    await openDockPopup(context)
     expect(useIsDockPopupOpen().value).toBe(true)
 
     popup.dispatchEvent(new Event('pagehide'))
 
     expect(dockElementRemoveMock).toHaveBeenCalledTimes(1)
     expect(useIsDockPopupOpen().value).toBe(false)
     expect(useDockPopupWindow().value).toBeNull()
+    expect(context.docks.switchEntry).toHaveBeenCalledWith(null)
   })
 
-  it('closes popup window via closeDockPopup', async () => {
+  it('closes popup window and panel via closeDockPopup', async () => {
     const popup = createMockPopupWindow()
     const requestWindow = vi.fn().mockResolvedValue(popup)
     ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow }
 
-    await openDockPopup(createMockContext())
+    const context = createMockContext()
+    await openDockPopup(context)
     closeDockPopup()
 
     expect(dockElementRemoveMock).toHaveBeenCalledTimes(1)
     expect(popup.close).toHaveBeenCalledTimes(1)
     expect(useIsDockPopupOpen().value).toBe(false)
     expect(useDockPopupWindow().value).toBeNull()
+    expect(context.docks.switchEntry).toHaveBeenCalledWith(null)
   })
 })

packages/core/src/client/webcomponents/state/__tests__/popup.test.ts

@@ -8,7 +8,7 @@ import { BUILTIN_ENTRIES } from '../constants'
 import { docksGroupByCategories } from './dock-settings'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, sharedStateToRef, useDocksEntries } from './docks'
 import { createClientLogsClient } from './logs-client'
-import { registerMainFrameDockActionHandler, requestDockPopupOpen, triggerMainFrameDockAction } from './popup'
+import { registerMainFrameDockActionHandler, triggerMainFrameDockAction } from './popup'
 import { executeSetupScript } from './setup-script'
 
 const docksContextByRpc = new WeakMap<DevToolsRpcClient, DocksContext>()
@@ -56,10 +56,6 @@ export async function createDocksContext(
       panelStore.value.open = true
       return true
     }
-    if (id === '~popup') {
-      requestDockPopupOpen(docksContext)
-      return true
-    }
     const entry = dockEntries.value.find(e => e.id === id)
     if (!entry)
       return false

packages/core/src/client/webcomponents/state/context.ts

@@ -1,4 +1,3 @@
-import type { DevToolsDockEntriesGrouped, DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
 import { shallowRef } from 'vue'
@@ -18,7 +17,6 @@ const PANEL_MIN_SIZE = 20
 const PANEL_MAX_SIZE = 100
 const POPUP_MIN_WIDTH = 320
 const POPUP_MIN_HEIGHT = 240
-const POPUP_DOCK_ID = '~popup'
 const MAIN_FRAME_ACTION_HANDLER_KEY = '__VITE_DEVTOOLS_TRIGGER_DOCK_ACTION__'
 
 const popupWindow = shallowRef<Window | null>(null)
@@ -27,6 +25,7 @@ const popupEvents = createEventEmitter<DockPopupEvents>()
 let detachPopupListeners: (() => void) | undefined
 let detachColorModeSync: (() => void) | undefined
 let popupDockElement: (HTMLElement & { remove: () => void }) | undefined
+let popupContext: DocksContext | undefined
 let loadDockStandalone: () => Promise<new (props: { context: DocksContext }) => HTMLElement> = async () => {
   return await import('../components/DockStandalone').then(m => m.DockStandalone)
 }
@@ -136,6 +135,9 @@ function clearPopupState() {
   unmountPopupElement()
   popupWindow.value = null
   isPopupOpen.value = false
+  const ctx = popupContext
+  popupContext = undefined
+  ctx?.docks.switchEntry(null)
 }
 
 function clamp(value: number, min: number, max: number) {
@@ -226,18 +228,6 @@ export async function triggerMainFrameDockAction(
   }
 }
 
-export function isDockPopupEntryVisible(clientType: 'embedded' | 'standalone'): boolean {
-  return isDockPopupSupported() && !isPopupOpen.value && clientType !== 'standalone'
-}
-
-export function filterPopupDockEntry(
-  groups: DevToolsDockEntriesGrouped,
-): DevToolsDockEntriesGrouped {
-  return groups
-    .map(([category, entries]) => [category, entries.filter(entry => entry.id !== POPUP_DOCK_ID)] as [string, DevToolsDockEntry[]])
-    .filter(([, entries]) => entries.length > 0)
-}
-
 export function useDockPopupWindow() {
   return popupWindow as Readonly<typeof popupWindow>
 }
@@ -304,6 +294,7 @@ export async function openDockPopup(context: DocksContext): Promise<Window | nul
       popup.removeEventListener('pagehide', onPageHide)
     }
 
+    popupContext = context
     popupWindow.value = popup
     isPopupOpen.value = true
     return popup

packages/core/src/client/webcomponents/state/popup.ts

@@ -6,12 +6,12 @@ describe('devToolsDockHost', () => {
   const mockContext = {} as DevToolsNodeContext
 
   describe('builtin entries', () => {
-    it('includes popup in builtin docks', () => {
+    it('does not include popup in builtin docks', () => {
       const host = new DevToolsDockHost(mockContext)
       const builtinEntries = host.values().filter(entry => entry.type === '~builtin')
       const builtinIds = builtinEntries.map(entry => entry.id)
 
-      expect(builtinIds).toContain('~popup')
+      expect(builtinIds).not.toContain('~popup')
     })
   })
 

packages/core/src/node/__tests__/host-docks.test.ts

@@ -53,13 +53,6 @@ export class DevToolsDockHost implements DevToolsDockHostType {
           return size > 0 ? String(size) : undefined
         },
       },
-      {
-        type: '~builtin',
-        id: '~popup',
-        title: 'Popup',
-        category: '~builtin',
-        icon: 'ph:arrow-square-out-duotone',
-      },
       {
         type: '~builtin',
         id: '~settings',