feat(core): add dock context menu support to the webcomponents client (#179)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: elecmonkey

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

@@ -0,0 +1,88 @@
+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'
+
+// @unocss-include
+
+interface DockMenuItem {
+  label: string
+  icon: string
+  action: () => void
+  visible: boolean
+}
+
+function renderMenuItem(item: DockMenuItem) {
+  return h('button', {
+    class: 'flex items-center gap-2 px3 py1.5 rounded hover:bg-active transition text-left',
+    onClick: item.action,
+  }, [
+    h('div', { class: `${item.icon} text-base op60` }),
+    h('span', item.label),
+  ])
+}
+
+function hideDock(context: DocksContext, entry: DevToolsDockEntry) {
+  const settingsStore = context.docks.settings
+  const id = entry.id
+  settingsStore.mutate((state) => {
+    if (!state.docksHidden.includes(id))
+      state.docksHidden = [...state.docksHidden, id]
+  })
+  if (context.docks.selected?.id === id)
+    context.docks.switchEntry(null)
+  setDockContextMenu(null)
+}
+
+function refreshDock(context: DocksContext, entry: DevToolsDockEntry) {
+  const state = context.docks.getStateById(entry.id)
+  const iframe = state?.domElements.iframe
+  if (!iframe) {
+    setDockContextMenu(null)
+    return
+  }
+  const src = iframe.src
+  iframe.src = ''
+  iframe.src = src
+  setDockContextMenu(null)
+}
+
+function canHide(context: DocksContext, entry: DevToolsDockEntry) {
+  return context.docks.entries.some(item => item.id === entry.id)
+}
+
+function canRefresh(entry: DevToolsDockEntry) {
+  return entry.type === 'iframe'
+}
+
+export function openDockContextMenu(options: {
+  context: DocksContext
+  entry: DevToolsDockEntry
+  el: HTMLElement
+  gap?: number
+}) {
+  const { context, entry, el, gap = 6 } = options
+  const items: DockMenuItem[] = [
+    {
+      label: 'Hide',
+      icon: 'i-ph-eye-slash-duotone',
+      action: () => hideDock(context, entry),
+      visible: canHide(context, entry),
+    },
+    {
+      label: 'Refresh',
+      icon: 'i-ph-arrow-clockwise-duotone',
+      action: () => refreshDock(context, entry),
+      visible: canRefresh(entry),
+    },
+  ].filter(item => item.visible)
+
+  if (items.length === 0)
+    return
+
+  setDockContextMenu({
+    el,
+    gap,
+    content: () => h('div', { class: 'flex flex-col text-sm min-w-36 mx--1' }, items.map(renderMenuItem)),
+  })
+}

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

@@ -29,6 +29,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
   <template v-for="dock of entries" :key="dock.id">
     <DockEntry
       v-if="!dock.isHidden"
+      :context="context"
       :dock
       :is-selected="selected?.id === dock.id"
       :is-dimmed="selected ? (selected.id !== dock.id) : false"

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

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { DevToolsDockEntryBase } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 import { setFloatingTooltip } from '../state/floating-tooltip'
+import { openDockContextMenu } from './DockContextMenu'
 import DockIcon from './DockIcon.vue'
 
 const props = withDefaults(
   defineProps<{
+    context: DocksContext
     dock: DevToolsDockEntryBase
     isSelected?: boolean
     isDimmed?: boolean
@@ -38,6 +41,24 @@ function clearTitle() {
   setFloatingTooltip(null)
 }
 
+function openContextMenu(e: MouseEvent) {
+  if (!button.value)
+    return
+  if (props.dock.id === 'overflow')
+    return
+  e.preventDefault()
+  clearTitle()
+  const entry = props.context.docks.entries.find(item => item.id === props.dock.id)
+  if (!entry)
+    return
+  openDockContextMenu({
+    context: props.context,
+    entry,
+    el: button.value,
+    gap: 6,
+  })
+}
+
 useEventListener('pointerdown', () => {
   if (!props.tooltip)
     return
@@ -51,6 +72,7 @@ useEventListener('pointerdown', () => {
     class="relative group vite-devtools-dock-entry"
     @pointerenter="updateTooltip"
     @pointerleave="clearTitle"
+    @contextmenu="openContextMenu"
   >
     <button
       ref="button"

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

@@ -75,6 +75,7 @@ function hideOverflowPanel() {
 <template>
   <div ref="overflowButton">
     <DockEntry
+      :context="context"
       :dock="{
         id: 'overflow',
         title: 'Overflow',

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

@@ -5,6 +5,7 @@ import type { CSSProperties } from 'vue'
 import { useElementBounding, useWindowSize } from '@vueuse/core'
 import { computed, markRaw, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue'
 import { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
+import { openDockContextMenu } from './DockContextMenu'
 import DockPanelResizer from './DockPanelResizer.vue'
 import ViewEntry from './ViewEntry.vue'
 
@@ -30,6 +31,21 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
 }
 
+function openContextMenu(e: MouseEvent) {
+  if (!dockPanel.value)
+    return
+  const entry = selected.value
+  if (!entry)
+    return
+  e.preventDefault()
+  openDockContextMenu({
+    context,
+    entry,
+    el: dockPanel.value,
+    gap: 6,
+  })
+}
+
 const anchorPos = computed(() => {
   const halfWidth = (props.dockEl?.clientWidth || 0) / 2
   const halfHeight = (props.dockEl?.clientHeight || 0) / 2
@@ -165,6 +181,7 @@ onMounted(() => {
     ref="dockPanel"
     class="bg-glass:75 rounded-lg border border-base shadow overflow-hidden"
     :style="panelStyle"
+    @contextmenu="openContextMenu"
   >
     <DockPanelResizer :panel="context.panel" />
     <ViewEntry

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

@@ -1,12 +1,22 @@
 <script setup lang="ts">
-import { setDocksOverflowPanel, useDocksOverflowPanel, useFloatingTooltip } from '../state/floating-tooltip'
+import { useEventListener } from '@vueuse/core'
+import { setDockContextMenu, setDocksOverflowPanel, useDockContextMenu, useDocksOverflowPanel, useFloatingTooltip } from '../state/floating-tooltip'
 import FloatingPopover from './FloatingPopover'
 
 const tooltip = useFloatingTooltip()
 const docksOverflowPanel = useDocksOverflowPanel()
+const dockContextMenu = useDockContextMenu()
+
+useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+  if (e.key !== 'Escape')
+    return
+  if (dockContextMenu.value)
+    setDockContextMenu(null)
+})
 </script>
 
 <template>
+  <FloatingPopover :item="dockContextMenu" @dismiss="() => setDockContextMenu(null)" />
   <FloatingPopover :item="docksOverflowPanel" @dismiss="() => setDocksOverflowPanel(null)" />
   <FloatingPopover :item="tooltip" />
 </template>

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

@@ -6,7 +6,7 @@ import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
 import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { BUILTIN_ENTRIES } from '../constants'
 import { docksGroupByCategories } from './dock-settings'
-import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, useDocksEntries } from './docks'
+import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, sharedStateToRef, useDocksEntries } from './docks'
 import { executeSetupScript } from './setup-script'
 
 let _docksContext: DocksContext | undefined
@@ -95,8 +95,9 @@ export async function createDocksContext(
 
   // Get settings store and create computed grouped entries
   const settingsStore = markRaw(await getSettingsStore())
+  const settings = sharedStateToRef(settingsStore)
   const groupedEntries = computed(() => {
-    return docksGroupByCategories(dockEntries.value, settingsStore.value())
+    return docksGroupByCategories(dockEntries.value, settings.value)
   })
 
   _docksContext = reactive({

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

@@ -9,6 +9,7 @@ export interface FloatingPopoverProps {
 
 const tooltip = shallowRef<FloatingPopoverProps | null>(null)
 const docksOverflowPanel = shallowRef<FloatingPopoverProps | null>(null)
+const dockContextMenu = shallowRef<FloatingPopoverProps | null>(null)
 
 export function setFloatingTooltip(info: FloatingPopoverProps | null) {
   tooltip.value = info
@@ -25,3 +26,11 @@ export function setDocksOverflowPanel(info: FloatingPopoverProps | null) {
 export function useDocksOverflowPanel() {
   return docksOverflowPanel
 }
+
+export function setDockContextMenu(info: FloatingPopoverProps | null) {
+  dockContextMenu.value = info
+}
+
+export function useDockContextMenu() {
+  return dockContextMenu
+}