feat: add tooltips to edge buttons and dock mode setting

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

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

@@ -2,7 +2,7 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
 import { computed, h, markRaw, useTemplateRef } from 'vue'
-import { setEdgePositionDropdown, useEdgePositionDropdown } from '../state/floating-tooltip'
+import { setEdgePositionDropdown, setFloatingTooltip, useEdgePositionDropdown } from '../state/floating-tooltip'
 import { PersistedDomViewsManager } from '../utils/PersistedDomViewsManager'
 import { openDockContextMenu } from './DockContextMenu'
 import DockEntriesWithCategories from './DockEntriesWithCategories.vue'
@@ -47,8 +47,18 @@ function switchPosition(pos: 'top' | 'right' | 'bottom' | 'left') {
 }
 
 const positionButton = useTemplateRef<HTMLButtonElement>('positionButton')
+const floatButton = useTemplateRef<HTMLButtonElement>('floatButton')
 const edgePositionDropdown = useEdgePositionDropdown()
 
+function showTooltip(el: HTMLElement | null, text: string) {
+  if (!el)
+    return
+  setFloatingTooltip({ content: text, el })
+}
+function hideTooltip() {
+  setFloatingTooltip(null)
+}
+
 function togglePositionDropdown() {
   if (!positionButton.value)
     return
@@ -204,14 +214,19 @@ const contentClass = computed(() => {
         <button
           ref="positionButton"
           class="p1.5 rounded hover:bg-active transition op75 hover:op100"
-          title="Switch edge position"
+          @pointerenter="showTooltip(positionButton, 'Edge position')"
+          @pointerleave="hideTooltip"
+          @pointerdown="hideTooltip"
           @click="togglePositionDropdown"
         >
           <div :class="positionIcons[store.position]" class="w-4.5 h-4.5" />
         </button>
         <button
+          ref="floatButton"
           class="p1.5 rounded hover:bg-active transition op50 hover:op100"
-          title="Switch to float mode"
+          @pointerenter="showTooltip(floatButton, 'Float mode')"
+          @pointerleave="hideTooltip"
+          @pointerdown="hideTooltip"
           @click="switchToFloat"
         >
           <div class="i-ph-cards-three-duotone w-4.5 h-4.5" />

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

@@ -5,6 +5,7 @@ import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
 import { computed } from 'vue'
 import { docksGroupByCategories } from '../state/dock-settings'
 import { sharedStateToRef } from '../state/docks'
+import { isDockPopupSupported, requestDockPopupOpen } from '../state/popup'
 import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
@@ -14,6 +15,30 @@ const props = defineProps<{
 
 const settingsStore = props.context.docks.settings
 const settings = sharedStateToRef(settingsStore)
+const panelStore = props.context.panel.store
+const isEmbedded = props.context.clientType === 'embedded'
+
+const dockModeOptions = computed(() => {
+  const options = [
+    { value: 'float', label: 'Float', icon: 'i-ph-cards-three-duotone' },
+    { value: 'edge', label: 'Edge', icon: 'i-ph-square-half-bottom-duotone' },
+  ]
+  if (isDockPopupSupported()) {
+    options.push({ value: 'popup', label: 'Popup', icon: 'i-ph-arrow-square-out-duotone' })
+  }
+  return options
+})
+
+const currentDockMode = computed(() => panelStore.mode)
+
+function setDockMode(mode: string) {
+  if (mode === 'popup') {
+    requestDockPopupOpen(props.context)
+  }
+  else {
+    panelStore.mode = mode as 'float' | 'edge'
+  }
+}
 
 const categories = computed(() => {
   return docksGroupByCategories(props.context.docks.entries, settingsStore.value(), { includeHidden: true })
@@ -146,7 +171,29 @@ function resetSettings() {
             Appearance
           </h2>
 
-          <div class="flex flex-col gap-3">
+          <div class="flex flex-col gap-4">
+            <!-- Dock mode -->
+            <div v-if="isEmbedded" class="flex flex-col gap-2">
+              <div class="flex flex-col">
+                <span class="text-sm">Dock mode</span>
+                <span class="text-xs op50">How the DevTools panel is displayed</span>
+              </div>
+              <div class="flex items-center gap-1 bg-gray/10 rounded-lg p1 w-fit">
+                <button
+                  v-for="option of dockModeOptions"
+                  :key="option.value"
+                  class="flex items-center gap-1.5 px3 py1.5 rounded-md text-sm transition-all"
+                  :class="currentDockMode === option.value
+                    ? 'bg-base shadow text-primary font-medium'
+                    : 'op60 hover:op100 hover:bg-gray/10'"
+                  @click="setDockMode(option.value)"
+                >
+                  <div :class="option.icon" class="w-4 h-4" />
+                  {{ option.label }}
+                </button>
+              </div>
+            </div>
+
             <!-- Show iframe address bar toggle -->
             <label class="flex items-center gap-3 cursor-pointer group">
               <button