feat: implement panel popup

packages/core/src/client/standalone/App.vue

@@ -1,81 +1,20 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import { markRaw, ref, useTemplateRef, watch } from 'vue'
-import DockEntriesWithCategories from '../webcomponents/components/DockEntriesWithCategories.vue'
-import FloatingElements from '../webcomponents/components/FloatingElements.vue'
-import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
-import ViewBuiltinClientAuthNotice from '../webcomponents/components/ViewBuiltinClientAuthNotice.vue'
-import ViewEntry from '../webcomponents/components/ViewEntry.vue'
+import DockStandalone from '../webcomponents/components/DockStandalone.vue'
 import { createDocksContext } from '../webcomponents/state/context'
-import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
 
 const rpc = await getDevToolsRpcClient()
 
 // eslint-disable-next-line no-console
 console.log('[VITE DEVTOOLS] RPC', rpc)
 
-const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
-const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
-
 const context: DocksContext = await createDocksContext(
   'standalone',
   rpc,
 )
-
-const isRpcTrusted = ref(context.rpc.isTrusted)
-context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
-  isRpcTrusted.value = isTrusted
-})
-
-watch(
-  () => context.docks.entries,
-  () => {
-    context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
-  },
-  { immediate: true },
-)
-
-function switchEntry(id: string | undefined) {
-  if (id) {
-    context.docks.switchEntry(id)
-  }
-}
 </script>
 
 <template>
-  <div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
-    <ViewBuiltinClientAuthNotice :context="context" />
-  </div>
-  <div v-else class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
-    <div class="border-r border-base flex flex-col">
-      <div class="p2 border-b border-base flex">
-        <VitePlus class="w-7 h-7 ma" />
-      </div>
-      <div class="transition duration-200 p2">
-        <DockEntriesWithCategories
-          :context="context"
-          :groups="context.docks.groupedEntries"
-          :is-vertical="false"
-          :selected="context.docks.selected"
-          @select="(e) => switchEntry(e?.id)"
-        >
-          <template #separator>
-            <div class="border-base border-b w-full my-2" />
-          </template>
-        </DockEntriesWithCategories>
-      </div>
-    </div>
-    <div>
-      <div id="vite-devtools-views-container" ref="viewsContainer" class="pointer-events-auto" />
-      <ViewEntry
-        v-if="context.docks.selected && viewsContainer"
-        :key="context.docks.selected.id"
-        :entry="context.docks.selected"
-        :context
-        :persisted-doms="persistedDoms"
-      />
-    </div>
-  </div>
-  <FloatingElements />
+  <DockStandalone :context />
 </template>

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

@@ -4,6 +4,7 @@ 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'
@@ -74,8 +75,19 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
+const isPopupEntryVisible = computed(() => isDockPopupEntryVisible())
+const groupedEntries = computed(() => {
+  if (isPopupEntryVisible.value)
+    return context.docks.groupedEntries
+  return filterPopupDockEntry(context.docks.groupedEntries)
+})
+
 const splitedEntries = computed(() => {
-  return docksSplitGroupsWithCapacity(context.docks.groupedEntries, 5)
+  return docksSplitGroupsWithCapacity(groupedEntries.value, 5)
+})
+
+const selectedEntry = computed(() => {
+  return context.docks.selected
 })
 
 onMounted(async () => {
@@ -320,7 +332,7 @@ onMounted(() => {
             :context="context"
             :groups="splitedEntries.visible"
             :is-vertical="context.panel.isVertical"
-            :selected="context.docks.selected"
+            :selected="selectedEntry"
             @select="(e) => context.docks.switchEntry(e?.id)"
           />
 
@@ -330,7 +342,7 @@ onMounted(() => {
               :context="context"
               :is-vertical="context.panel.isVertical"
               :groups="splitedEntries.overflow"
-              :selected="context.docks.selected"
+              :selected="selectedEntry"
               @select="(e) => context.docks.switchEntry(e?.id)"
             />
           </template>

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

@@ -1,16 +1,24 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
+import { onUnmounted } from 'vue'
+import { closeDockPopup, useIsDockPopupOpen } from '../state/popup'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingElements from './FloatingElements.vue'
 
 defineProps<{
   context: DocksContext
 }>()
+
+const isDockPopupOpen = useIsDockPopupOpen()
+
+onUnmounted(() => {
+  closeDockPopup()
+})
 </script>
 
 <template>
-  <Dock :context>
+  <Dock v-if="!isDockPopupOpen" :context>
     <template #default="{ dockEl, panelMargins, selected }">
       <DockPanel
         :context
@@ -20,5 +28,5 @@ defineProps<{
       />
     </template>
   </Dock>
-  <FloatingElements />
+  <FloatingElements v-if="!isDockPopupOpen" />
 </template>

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

@@ -36,7 +36,7 @@ function showOverflowPanel() {
   isOverflowPanelVisible.value = true
   setDocksOverflowPanel({
     content: () => h('div', {
-      class: 'flex gap-0 flex-wrap max-w-200px',
+      class: 'flex gap-0 flex-wrap max-w-220px',
     }, [
       h(DockEntriesWithCategories, {
         context: props.context,

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

@@ -0,0 +1,27 @@
+import type { DocksContext } from '@vitejs/devtools-kit/client'
+import type { VueElementConstructor } from 'vue'
+import { defineCustomElement } from 'vue'
+import css from '../.generated/css'
+import Component from './DockStandalone.vue'
+
+const forcedColorModeCss = `
+:host([data-vite-devtools-color-mode='dark']) {
+  color-scheme: dark;
+}
+:host([data-vite-devtools-color-mode='light']) {
+  color-scheme: light;
+}
+`
+
+export const DockStandalone = defineCustomElement(
+  Component,
+  {
+    shadowRoot: true,
+    styles: [css, forcedColorModeCss],
+  },
+) as VueElementConstructor<{
+  context: DocksContext
+}>
+
+if (!customElements.get('vite-devtools-dock-standalone'))
+  customElements.define('vite-devtools-dock-standalone', DockStandalone)

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

@@ -0,0 +1,82 @@
+<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'
+import VitePlus from './icons/VitePlus.vue'
+import ViewBuiltinClientAuthNotice from './ViewBuiltinClientAuthNotice.vue'
+import ViewEntry from './ViewEntry.vue'
+
+const props = defineProps<{
+  context: DocksContext
+}>()
+
+const context = props.context
+const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
+const persistedDoms = markRaw(new PersistedDomViewsManager(viewsContainer))
+
+const isRpcTrusted = ref(context.rpc.isTrusted)
+context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
+  isRpcTrusted.value = isTrusted
+})
+
+watch(
+  () => context.docks.entries,
+  () => {
+    context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
+  },
+  { immediate: true },
+)
+
+const groupedEntries = computed(() => {
+  if (isDockPopupEntryVisible())
+    return context.docks.groupedEntries
+
+  return filterPopupDockEntry(context.docks.groupedEntries)
+})
+
+function switchEntry(id: string | undefined) {
+  if (id) {
+    context.docks.switchEntry(id)
+  }
+}
+</script>
+
+<template>
+  <div v-if="!isRpcTrusted" class="h-screen w-screen of-hidden">
+    <ViewBuiltinClientAuthNotice :context="context" />
+  </div>
+  <div v-else class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
+    <div class="border-r border-base flex flex-col">
+      <div class="p2 border-b border-base flex">
+        <VitePlus class="w-7 h-7 ma" />
+      </div>
+      <div class="transition duration-200 p2">
+        <DockEntriesWithCategories
+          :context="context"
+          :groups="groupedEntries"
+          :is-vertical="false"
+          :selected="context.docks.selected"
+          @select="(e) => switchEntry(e?.id)"
+        >
+          <template #separator>
+            <div class="border-base border-b w-full my-2" />
+          </template>
+        </DockEntriesWithCategories>
+      </div>
+    </div>
+    <div>
+      <div id="vite-devtools-views-container" ref="viewsContainer" class="pointer-events-auto" />
+      <ViewEntry
+        v-if="context.docks.selected && viewsContainer"
+        :key="context.docks.selected.id"
+        :entry="context.docks.selected"
+        :context
+        :persisted-doms="persistedDoms"
+      />
+    </div>
+  </div>
+  <FloatingElements />
+</template>