fix(devtools): improve ui

Author: antfu

package.json

@@ -8,6 +8,9 @@
     "build:debug": "NUXT_DEBUG_BUILD=true pnpm -r run build",
     "watch": "pnpm -r run watch",
     "dev": "pnpm -C packages/devtools-vite run dev",
+    "play:devtools": "pnpm -C packages/devtools run play",
+    "play:devtools:standalone": "pnpm -C packages/devtools run play:standalone",
+    "play:ui": "pnpm -C packages/devtools-vite run dev",
     "prepare": "npx simple-git-hooks && pnpm -C packages/devtools-vite run dev:prepare",
     "lint": "pnpm -C packages/devtools-vite run dev:prepare && eslint .",
     "test": "vitest",

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

@@ -225,6 +225,7 @@ onMounted(() => {
     ref="anchorEl"
     :style="[anchorStyle]"
     :class="{
+      'vite-devtools-horizontal': !isVertical,
       'vite-devtools-vertical': isVertical,
       'vite-devtools-minimized': isMinimized,
     }"

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

@@ -24,25 +24,32 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
 
 <template>
   <div
-    class="flex items-center w-full h-full justify-center transition-opacity duration-300"
+    class="vite-devtools-dock-entries flex items-center w-full h-full justify-center transition-opacity duration-300"
   >
-    <button
+    <div
       v-for="dock of entries"
       :key="dock.id"
-      :title="dock.title"
-      :class="[
-        isVertical ? 'rotate-270' : '',
-        selected ? selected.id !== dock.id ? 'op50 saturate-0' : 'scale-120' : '',
-      ]"
-      class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300"
-      @click="toggleDockEntry(dock)"
+      class="relative group vite-devtools-dock-entry"
     >
-      <img
-        :src="dock.icon"
-        :alt="dock.title"
-        class="w-5 h-5 select-none"
-        draggable="false"
+      <button
+        :title="dock.title"
+        :class="[
+          isVertical ? 'rotate-270' : '',
+          selected ? selected.id !== dock.id ? 'op50 saturate-0' : 'scale-120' : '',
+        ]"
+        class="flex items-center justify-center p1.5 rounded-xl hover:bg-[#8881] hover:scale-120 transition-all duration-300 relative"
+        @click="toggleDockEntry(dock)"
       >
-    </button>
+        <img
+          :src="dock.icon"
+          :alt="dock.title"
+          class="w-5 h-5 select-none"
+          draggable="false"
+        >
+      </button>
+      <div class="vite-devtools-dock-label text-xs group-hover:opacity-100 opacity-0 transition-opacity duration-300 w-max bg-glass border border-base z-10 rounded px2 absolute p1">
+        {{ dock.title }}
+      </div>
+    </div>
   </div>
 </template>

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

@@ -184,6 +184,11 @@ onMounted(() => {
       :is-resizing="isResizing"
       :entry="entry"
       :iframes="iframes"
+      :iframe-style="{
+        border: '1px solid #8885',
+        borderRadius: '0.5rem',
+        zIndex: '2147483645',
+      }"
       rounded
     />
     <div

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { CSSProperties } from 'vue'
 import type { DevToolsDockState } from './DockProps'
 import type { IframeManager } from './IframeManager'
 import ViewIframe from './ViewIframe.vue'
@@ -10,6 +11,7 @@ defineProps<{
   isResizing: boolean
   entry: DevToolsDockEntry
   iframes: IframeManager
+  iframeStyle?: CSSProperties
 }>()
 </script>
 
@@ -21,6 +23,7 @@ defineProps<{
     :is-resizing="isResizing"
     :entry="entry"
     :iframes="iframes"
+    :iframe-style="iframeStyle"
   />
   <div v-else>
     Unknown entry: {{ entry }}

packages/devtools/src/client/webcomponents/components/ViewEntry.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
+import type { CSSProperties } from 'vue'
 import type { DevToolsDockState } from './DockProps'
 import type { IframeManager } from './IframeManager'
 import { nextTick, onMounted, onUnmounted, useTemplateRef, watch, watchEffect } from 'vue'
@@ -10,17 +11,16 @@ const props = defineProps<{
   isResizing: boolean
   entry: DevToolsViewIframe
   iframes: IframeManager
+  iframeStyle?: CSSProperties
 }>()
 
 const viewFrame = useTemplateRef<HTMLDivElement>('viewFrame')
 
 onMounted(() => {
   const holder = props.iframes.getIframeHolder(props.entry.id)
-  holder.iframe.style.border = '1px solid #8885'
-  holder.iframe.style.borderRadius = '0.5rem'
   holder.iframe.style.boxShadow = 'none'
   holder.iframe.style.outline = 'none'
-  holder.iframe.style.zIndex = '2147483645'
+  Object.assign(holder.iframe.style, props.iframeStyle)
 
   if (!holder.iframe.src)
     holder.iframe.src = props.entry.url
@@ -42,6 +42,7 @@ onMounted(() => {
     () => {
       holder.iframe.style.pointerEvents = (props.isDragging || props.isResizing) ? 'none' : 'auto'
     },
+    { flush: 'sync' },
   )
 })
 

packages/devtools/src/client/webcomponents/components/ViewIframe.vue

@@ -69,3 +69,12 @@
     --uno: hidden;
   }
 }
+
+.vite-devtools-dock-label {
+  --uno: translate-x--1/2 bottom--7 left-1/2;
+}
+
+.vite-devtools-vertical .vite-devtools-dock-label {
+  --uno: rotate-270 bottom--10;
+}
+

packages/devtools/src/client/webcomponents/style.css

@@ -93,10 +93,11 @@ cli
     })
 
     const app = createApp()
-    app.use('/__vite_devtools__', h3.handler)
     app.use('/', eventHandler(async (event) => {
-      return sendRedirect(event, '/__vite_devtools__/')
+      if (event.node.req.url === '/')
+        return sendRedirect(event, '/__vite_devtools__/')
     }))
+    app.use('/__vite_devtools__', h3.handler)
 
     const server = createServer(toNodeListener(app))