From 096518727b7bf6b1a49db68897fec822d8dbae09 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Tue, 12 Dec 2023 22:42:46 +0800
Subject: [PATCH 1/8] feat: scrollable sidebar

---
 .vscode/settings.json                         |  2 +-
 packages/client/src/assets/styles/main.css    | 29 ++++++++--
 .../client/src/components/common/SideNav.vue  | 53 ++++++++++++++++---
 packages/client/src/composables/state-tab.ts  | 34 ++++++++++++
 packages/client/src/composables/state.ts      |  2 +
 packages/client/src/pages/settings.vue        |  8 +++
 6 files changed, 118 insertions(+), 10 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e4ef8a10..81bd766e 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
   "eslint.experimental.useFlatConfig": true,
   "prettier.enable": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
+    "source.fixAll": "explicit"
   },
   "editor.formatOnSave": false,
   // Silent the stylistic rules in you IDE, but still auto fix them
diff --git a/packages/client/src/assets/styles/main.css b/packages/client/src/assets/styles/main.css
index 427bc954..f975578a 100644
--- a/packages/client/src/assets/styles/main.css
+++ b/packages/client/src/assets/styles/main.css
@@ -114,9 +114,32 @@ body::-webkit-scrollbar {
   background: #8885;
 }
 
-.no-scrollbar {
-  /* Support Firefox */
-  scrollbar-width: none
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar:horizontal {
+  height: 6px;
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--c-border);
+  border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #8881;
+  transition: background 0.2s ease;
+  border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #8885;
 }
 
 .no-scrollbar::-webkit-scrollbar {
diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index 7c45bef9..ef80a4fb 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -5,17 +5,32 @@ const showDocking = ref(false)
 const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
-const buttonMoreTabs = ref<HTMLButtonElement>()
+const Tabs = ref<HTMLButtonElement>()
 const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
-const sidebarScrollable = ref(false)
+const sidebarScrollable = computed(() => devtoolsClientState.value.scrollableSidebar)
 
-const { enabledTabs } = useAllTabs()
+const { enabledTabs, flattenedTabs } = useAllTabs()
+
+const ITEM_HEIGHT = 45
+const { height: windowHeight } = useWindowSize()
+const containerCapacity = computed(() => {
+  const containerHeight = windowHeight.value - 130
+  return Math.max(0, Math.floor(containerHeight / ITEM_HEIGHT))
+})
+const inlineTabs = computed(() => flattenedTabs.value.slice(0, containerCapacity.value))
+const overflowTabs = computed(() => flattenedTabs.value.slice(containerCapacity.value))
+const categorizedInlineTabs = getCategorizedTabs(inlineTabs, enabledTabs)
+const categorizedOverflowTabs = getCategorizedTabs(overflowTabs, enabledTabs)
+
+const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded.value)
+  ? enabledTabs.value
+  : categorizedInlineTabs.value)
 </script>
 
 <template>
   <div
-    border="r base" flex="~ col"
-    z-100 h-full items-start of-hidden bg-base
+    border="r base" flex="~ col items-start"
+    z-100 h-full of-hidden bg-base
   >
     <div
       sticky top-0 z-1 w-full p1 bg-base border="b base"
@@ -50,7 +65,7 @@ const { enabledTabs } = useAllTabs()
       flex="~ auto col gap-0.5 items-center" w-full p1 class="no-scrollbar"
       :class="sidebarExpanded ? '' : 'of-x-hidden of-y-auto'"
     >
-      <template v-for="[name, tabs], idx of enabledTabs" :key="name">
+      <template v-for="[name, tabs], idx of displayedTabs" :key="name">
         <!-- if is not the first nonempty list, render the top divider -->
         <div v-if="idx" my1 h-1px w-full border="b base" />
         <SideNavItem
@@ -67,6 +82,32 @@ const { enabledTabs } = useAllTabs()
       :flex="`~ items-center gap-1 ${sidebarExpanded ? '' : 'none col'}`"
       border="t base" sticky bottom-0 w-full p1 bg-base
     >
+      <VueDropdown
+        v-if="overflowTabs.length && !sidebarScrollable && !sidebarExpanded" placement="left-end"
+        :distance="6"
+      >
+        <button
+          flex="~"
+          hover="bg-active" relative
+          h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
+          exact-active-class="!text-primary bg-active"
+        >
+          <TabIcon
+            text-xl
+            icon="i-carbon-overflow-menu-vertical" title="More tabs" :show-title="false"
+          />
+          <div
+            absolute bottom-0 right-0 h-4 w-4 rounded-full text-9px
+            flex="~ items-center justify-center"
+            border="~ base"
+          >
+            <span translate-y-0.5px>{{ overflowTabs.length }}</span>
+          </div>
+        </button>
+        <template #popper>
+          <TabsGrid :categories="categorizedOverflowTabs" max-w-80 target="main" />
+        </template>
+      </VueDropdown>
       <SideNavItem
         :minimized="!sidebarExpanded"
         :tab="{
diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
index c91ea485..310b5ec0 100644
--- a/packages/client/src/composables/state-tab.ts
+++ b/packages/client/src/composables/state-tab.ts
@@ -1,4 +1,5 @@
 import { useDevToolsBridgeRpc, useDevToolsState } from '@vue-devtools-next/core'
+import type { MaybeRef } from 'vue'
 import type { CustomTab } from 'vue-devtools-kit'
 import type { ModuleBuiltinTab } from '~/types/tab'
 
@@ -97,3 +98,36 @@ export function useAllTabs() {
 
   return { categorizedTabs, flattenedTabs, enabledTabs }
 }
+
+export function getCategorizedTabs(flattenTabs: MaybeRef<(CustomTab | ModuleBuiltinTab)[]>, enabledTabs: MaybeRef<CategorizedTabs>) {
+  return computed<CategorizedTabs>(() => {
+    const categories: CategorizedTabs = []
+    const pinnedTabs = devtoolsClientState.value.tabSettings.pinnedTabs
+    const tabs = toValue(enabledTabs).reduce<{ tab: CategorizedTab, category: CategorizedCategory }[]>((prev, [{ name: cateName, hidden }, tabs]) => {
+      tabs.forEach((tab) => {
+        if (toValue(flattenTabs).some(i => i.name === tab.name)) {
+          const category = pinnedTabs.includes(tab.name) ? 'pinned' : (cateName || 'app')
+          prev.push({
+            tab,
+            category: {
+              name: category,
+              hidden,
+            },
+          })
+        }
+      })
+      return prev
+    }, [])
+    tabs.forEach(({ tab, category }) => {
+      const cates = categories.find(([{ name }]) => name === category.name)
+      if (!cates)
+        categories.push([category, [tab]])
+      else
+        cates[1].push(tab)
+    })
+    const pinned = categories.find(([{ name }]) => name === 'pinned')
+    if (pinned)
+      pinned.sort((a, b) => pinnedTabs.indexOf(a[0].name) - pinnedTabs.indexOf(b[0].name))
+    return categories
+  })
+}
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index f7ef4e9b..7a701295 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -8,6 +8,7 @@ export const devtoolsClientState: RemovableRef<{
   graphSettings: GraphSettings
   tabSettings: TabSettings
   expandSidebar: boolean
+  scrollableSidebar: boolean
   splitScreen: {
     enabled: boolean
     view: string
@@ -32,6 +33,7 @@ export const devtoolsClientState: RemovableRef<{
     size: [50, 50],
   },
   expandSidebar: false,
+  scrollableSidebar: true,
 }, { mergeDefaults: true })
 
 export function clearDevtoolsClientState() {
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 62baafa1..85952b43 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -15,6 +15,10 @@ const expandSidebar = computed({
   get: () => devtoolsClientState.value.expandSidebar,
   set: v => (devtoolsClientState.value.expandSidebar = v),
 })
+const scrollableSidebar = computed({
+  get: () => devtoolsClientState.value.scrollableSidebar,
+  set: v => (devtoolsClientState.value.scrollableSidebar = v),
+})
 
 function toggleTab(name: string, v: boolean) {
   if (v)
@@ -148,6 +152,10 @@ async function clearOptions() {
             <VueCheckbox v-model="expandSidebar" />
             <span op75>Expand Sidebar</span>
           </div>
+          <div class="flex items-center gap2 text-sm">
+            <VueCheckbox v-model="scrollableSidebar" />
+            <span op75>Scrollable Sidebar</span>
+          </div>
         </VueCard>
         <h3 mt2 text-lg>
           Debug

From 84f1d55d5c28c5f32ba6d03a19c621c0dad880de Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Tue, 12 Dec 2023 22:56:39 +0800
Subject: [PATCH 2/8] chore: update

---
 packages/client/src/App.vue                      |  3 ++-
 .../client/src/components/common/SideNav.vue     | 16 +++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 3c1446a6..9833aec8 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -58,12 +58,13 @@ const splitScreenSize = computed({
     >
       <SideNav v-if="!isUtilityView" of-x-hidden of-y-auto />
       <Splitpanes
+        h-full of-hidden
         @resize="splitScreenSize = $event.map((v) => v.size)"
       >
         <Pane h-full class="of-auto!" min-size="10" :size="splitScreenSize[0]">
           <RouterView />
         </Pane>
-        <Pane v-if="!isUtilityView && splitScreenEnabled && isSplitScreenAvailable" h-full class="of-auto!" :size="splitScreenSize[1]">
+        <Pane v-if="!isUtilityView && splitScreenEnabled && isSplitScreenAvailable" relative h-full class="of-auto!" :size="splitScreenSize[1]">
           <SplitScreen />
         </Pane>
       </Splitpanes>
diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index ef80a4fb..f9728383 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -5,6 +5,7 @@ const showDocking = ref(false)
 const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
+const buttonMoreTabs = ref<HTMLButtonElement>()
 const Tabs = ref<HTMLButtonElement>()
 const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = computed(() => devtoolsClientState.value.scrollableSidebar)
@@ -25,6 +26,19 @@ const categorizedOverflowTabs = getCategorizedTabs(overflowTabs, enabledTabs)
 const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded.value)
   ? enabledTabs.value
   : categorizedInlineTabs.value)
+
+onClickOutside(
+  panel,
+  (e) => {
+    if (buttonDocking.value && e.composedPath().includes(buttonDocking.value))
+      return
+    if (buttonMoreTabs.value && e.composedPath().includes(buttonMoreTabs.value))
+      return
+    showDocking.value = false
+    showMoreTabs.value = false
+  },
+  { detectIframe: true },
+)
 </script>
 
 <template>
@@ -87,7 +101,7 @@ const displayedTabs = computed(() => (sidebarScrollable.value || sidebarExpanded
         :distance="6"
       >
         <button
-          flex="~"
+          ref="buttonMoreTabs" flex="~"
           hover="bg-active" relative
           h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
           exact-active-class="!text-primary bg-active"

From 4f8eed43002b9fa4e1259c29c2e8afe2ff2274da Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Tue, 12 Dec 2023 23:44:44 +0800
Subject: [PATCH 3/8] feat: add minimizePanelInactive time

---
 packages/client/src/App.vue                  |  9 +++
 packages/client/src/composables/state.ts     |  8 +++
 packages/client/src/pages/settings.vue       | 61 ++++++++++++++++----
 packages/overlay/src/App.vue                 |  7 ++-
 packages/overlay/src/components/FrameBox.vue |  8 +++
 packages/ui/src/components/Select.vue        |  9 ++-
 6 files changed, 90 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 9833aec8..0325a190 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -19,6 +19,11 @@ const bridge = useDevToolsBridge()
 const isUtilityView = computed(() => route.path.startsWith('/__') || route.path === '/')
 const sidebarExpanded = computed(() => clientState.value.expandSidebar)
 
+watchEffect(() => {
+  const scale = devtoolsClientState.value.scale
+  document.body.style.fontSize = `${scale * 15}px`
+})
+
 watch(connected, (v) => {
   if (v) {
     router.replace(clientState.value.isFirstVisit ? '/' : clientState.value.route)
@@ -38,6 +43,10 @@ useEventListener('keydown', (e) => {
     bridge.value.emit('toggle-panel')
 })
 
+watchEffect(() => {
+  bridge.value.emit('update-minimize-panel-inactive', devtoolsClientState.value.minimizePanelInteractive)
+})
+
 const splitScreenEnabled = computed(() => clientState.value.splitScreen.enabled)
 const isSplitScreenAvailable = splitScreenAvailable
 const splitScreenSize = computed({
diff --git a/packages/client/src/composables/state.ts b/packages/client/src/composables/state.ts
index 7a701295..18073e50 100644
--- a/packages/client/src/composables/state.ts
+++ b/packages/client/src/composables/state.ts
@@ -14,6 +14,10 @@ export const devtoolsClientState: RemovableRef<{
     view: string
     size: [number, number]
   }
+  scale: number
+  interactionCloseOnOutsideClick: boolean
+  showPanel: boolean
+  minimizePanelInteractive: number
 }> = useLocalStorage('__VUE_DEVTOOLS_CLIENT_STATE__', {
   isFirstVisit: true,
   route: '/',
@@ -34,6 +38,10 @@ export const devtoolsClientState: RemovableRef<{
   },
   expandSidebar: false,
   scrollableSidebar: true,
+  scale: 1,
+  interactionCloseOnOutsideClick: false,
+  showPanel: true,
+  minimizePanelInteractive: 5000,
 }, { mergeDefaults: true })
 
 export function clearDevtoolsClientState() {
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 85952b43..a2ac48c3 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { VueButton, VueCard, VueCheckbox, VueConfirm, VueDarkToggle, VueSwitch } from '@vue-devtools-next/ui'
+import { VueButton, VueCard, VueCheckbox, VueConfirm, VueDarkToggle, VueSelect, VueSwitch } from '@vue-devtools-next/ui'
 import { isInChromePanel } from '@vue-devtools-next/shared'
 
 // #region view mode
@@ -10,16 +10,28 @@ const { toggle: toggleViewMode } = useToggleViewMode()
 
 const { categorizedTabs: categories } = useAllTabs()
 
-const { hiddenTabCategories, hiddenTabs, pinnedTabs } = toRefs(devtoolsClientState.value.tabSettings)
-const expandSidebar = computed({
-  get: () => devtoolsClientState.value.expandSidebar,
-  set: v => (devtoolsClientState.value.expandSidebar = v),
-})
-const scrollableSidebar = computed({
-  get: () => devtoolsClientState.value.scrollableSidebar,
-  set: v => (devtoolsClientState.value.scrollableSidebar = v),
-})
+const { scale, interactionCloseOnOutsideClick, showPanel, minimizePanelInteractive, expandSidebar, scrollableSidebar } = toRefs(devtoolsClientState.value)
+
+// #region settings
+const scaleOptions = [
+  ['Tiny', 12 / 15],
+  ['Small', 14 / 15],
+  ['Normal', 1],
+  ['Large', 16 / 15],
+  ['Huge', 18 / 15],
+]
+const MinimizeInactiveOptions = [
+  ['Always', 0],
+  ['1s', 1000],
+  ['2s', 2000],
+  ['5s', 5000],
+  ['10s', 10000],
+  ['Never', -1],
+]
+// #endregion
 
+// #region tabs
+const { hiddenTabCategories, hiddenTabs, pinnedTabs } = toRefs(devtoolsClientState.value.tabSettings)
 function toggleTab(name: string, v: boolean) {
   if (v)
     hiddenTabs.value = hiddenTabs.value.filter(i => i !== name)
@@ -55,6 +67,7 @@ function pinMove(name: string, delta: number) {
   newPinnedTabs.splice(newIndex, 0, name)
   pinnedTabs.value = newPinnedTabs
 }
+// #endregion
 
 const clearOptionsConfirmState = ref(false)
 async function clearOptions() {
@@ -147,6 +160,12 @@ async function clearOptions() {
               Switch to Overlay Mode
             </VueButton>
           </div>
+          <!-- TODO: need rewrite client/(UI package) to rem based -->
+          <!-- <div mx--2 my1 h-1px border="b base" op75 />
+          <p>UI Scale</p>
+          <div>
+            <VueSelect v-model="scale" :options="scaleOptions.map(([label, value]) => ({ label, value }))" />
+          </div> -->
           <div mx--2 my1 h-1px border="b base" op75 />
           <div class="flex items-center gap2 text-sm">
             <VueCheckbox v-model="expandSidebar" />
@@ -157,6 +176,28 @@ async function clearOptions() {
             <span op75>Scrollable Sidebar</span>
           </div>
         </VueCard>
+
+        <h3 mt2 text-lg>
+          Features
+        </h3>
+        <VueCard p4 flex="~ col gap-2">
+          <div class="flex items-center gap2 text-sm">
+            <VueCheckbox v-model="interactionCloseOnOutsideClick" />
+            <span op75>Close DevTools when clicking outside</span>
+          </div>
+          <div class="flex items-center gap2 text-sm">
+            <VueCheckbox v-model="showPanel" />
+            <span op75>Always show the floating panel</span>
+          </div>
+
+          <div mx--2 my1 h-1px border="b base" op75 />
+
+          <p>Minimize floating panel on inactive</p>
+          <div>
+            <VueSelect v-model="minimizePanelInteractive" :options="MinimizeInactiveOptions.map(([label, value]) => ({ label, value }))" />
+          </div>
+        </VueCard>
+
         <h3 mt2 text-lg>
           Debug
         </h3>
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index c51613fe..aa4226ca 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -36,6 +36,7 @@ target.__VUE_DEVTOOLS_TOGGLE_OVERLAY__ = (visible: boolean) => {
   overlayVisible.value = visible
 }
 
+const minimizedPanelInteractive = ref(0)
 function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout = 200): Promise<void> | void {
   return new Promise((resolve) => {
     iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
@@ -68,6 +69,10 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
     })
 
     bridge.on('toggle-panel', togglePanelVisible)
+
+    bridge.on('update-minimize-panel-inactive', (v: number) => {
+      minimizedPanelInteractive.value = v
+    })
   })
 }
 
@@ -141,7 +146,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
       :style="iframeStyle" :is-dragging="isDragging" :client="{
         close: closePanel,
         getIFrame: getIframe,
-      }" :view-mode="panelState.viewMode"
+      }" :view-mode="panelState.viewMode" :minimized-panel-interactive="minimizedPanelInteractive"
     />
   </div>
 </template>
diff --git a/packages/overlay/src/components/FrameBox.vue b/packages/overlay/src/components/FrameBox.vue
index 69729138..a01b73fb 100644
--- a/packages/overlay/src/components/FrameBox.vue
+++ b/packages/overlay/src/components/FrameBox.vue
@@ -17,12 +17,20 @@ const props = defineProps<{
     // } | undefined
   }
   viewMode: 'xs' | 'default' | 'fullscreen'
+
+  minimizedPanelInteractive: number
 }>()
 
 const { state, updateState } = useFrameState()
 const container = ref<HTMLElement>()
 const isResizing = ref<false | { top?: boolean, left?: boolean, right?: boolean, bottom?: boolean }>(false)
 
+watchEffect(() => {
+  updateState({
+    minimizePanelInactive: props.minimizedPanelInteractive,
+  })
+})
+
 watchEffect(() => {
   if (!container.value)
     return
diff --git a/packages/ui/src/components/Select.vue b/packages/ui/src/components/Select.vue
index 41760143..06612cb2 100644
--- a/packages/ui/src/components/Select.vue
+++ b/packages/ui/src/components/Select.vue
@@ -10,10 +10,12 @@ const props = withDefaults(defineProps<{
   placeholder?: string
   autoClose?: boolean
   disabled?: boolean
+  labelRenderer?: (label: V) => string
 }>(), {
   placeholder: 'Select...',
   autoClose: true,
   disabled: false,
+  labelRenderer: (label: V) => String(label),
 })
 
 const emit = defineEmits<{
@@ -24,10 +26,15 @@ const value = computed({
   get: () => props.modelValue,
   set: v => emit('update:modelValue', v),
 })
+
+const label = computed(() => {
+  const option = props.options.find(i => i.value === value.value)
+  return option?.label ? props.labelRenderer(option.label) : props.placeholder
+})
 </script>
 
 <template>
-  <VueDropdown :label="placeholder" :disabled="disabled">
+  <VueDropdown :label="label" :disabled="disabled">
     <template #popper>
       <div class="m1 flex flex-col min-w-140px w-auto">
         <VueButton

From 7a97953edf6f27bf2ff657ae9b0558995142e42f Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Wed, 13 Dec 2023 00:30:26 +0800
Subject: [PATCH 4/8] feat: prefer show floating panel

---
 packages/client/src/App.vue                  |  6 ++++++
 packages/overlay/src/App.vue                 | 20 +++++++++++---------
 packages/overlay/src/components/FrameBox.vue | 14 ++++++++------
 packages/overlay/src/composables/state.ts    |  2 ++
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 0325a190..4f54cdd7 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -46,6 +46,12 @@ useEventListener('keydown', (e) => {
 watchEffect(() => {
   bridge.value.emit('update-minimize-panel-inactive', devtoolsClientState.value.minimizePanelInteractive)
 })
+watchEffect(() => {
+  bridge.value.emit('update-close-on-click-outside', devtoolsClientState.value.interactionCloseOnOutsideClick)
+})
+watchEffect(() => {
+  bridge.value.emit('update-show-floating-panel', devtoolsClientState.value.showPanel)
+})
 
 const splitScreenEnabled = computed(() => clientState.value.splitScreen.enabled)
 const isSplitScreenAvailable = splitScreenAvailable
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index aa4226ca..e9ee0417 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, shallowRef } from 'vue'
 import { useColorMode } from '@vueuse/core'
 import { Bridge, getDevToolsClientUrl, prepareInjection } from '@vue-devtools-next/core'
 import { target } from '@vue-devtools-next/shared'
 import { devtools } from 'vue-devtools-kit'
-import { useIframe, usePanelVisible, usePosition } from '~/composables'
+import { useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'
 import Frame from '~/components/FrameBox.vue'
 
@@ -36,11 +36,12 @@ target.__VUE_DEVTOOLS_TOGGLE_OVERLAY__ = (visible: boolean) => {
   overlayVisible.value = visible
 }
 
-const minimizedPanelInteractive = ref(0)
+const bridgeRef = shallowRef<InstanceType<typeof Bridge>>()
+const { updateState, state } = useFrameState()
 function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout = 200): Promise<void> | void {
   return new Promise((resolve) => {
     iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
-    const bridge = new Bridge({
+    const bridge = bridgeRef.value = new Bridge({
       tracker(fn) {
         if (!overlayVisible.value)
           return
@@ -69,9 +70,10 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
     })
 
     bridge.on('toggle-panel', togglePanelVisible)
-
-    bridge.on('update-minimize-panel-inactive', (v: number) => {
-      minimizedPanelInteractive.value = v
+    bridge.on('update-show-floating-panel', (v) => {
+      updateState({
+        preferShowFloatingPanel: v,
+      })
     })
   })
 }
@@ -98,7 +100,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 
 <template>
   <div
-    v-show="overlayVisible"
+    v-show="state.preferShowFloatingPanel ? overlayVisible : panelVisible"
     class="vue-devtools__anchor" :style="[anchorStyle, cssVars]" :class="{
       'vue-devtools__anchor--vertical': isVertical,
       'vue-devtools__anchor--hide': isHidden,
@@ -146,7 +148,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
       :style="iframeStyle" :is-dragging="isDragging" :client="{
         close: closePanel,
         getIFrame: getIframe,
-      }" :view-mode="panelState.viewMode" :minimized-panel-interactive="minimizedPanelInteractive"
+      }" :view-mode="panelState.viewMode" :bridge="bridgeRef"
     />
   </div>
 </template>
diff --git a/packages/overlay/src/components/FrameBox.vue b/packages/overlay/src/components/FrameBox.vue
index a01b73fb..5ec0f8ce 100644
--- a/packages/overlay/src/components/FrameBox.vue
+++ b/packages/overlay/src/components/FrameBox.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, watchOnce } from '@vueuse/core'
 
+import type { Bridge } from '@vue-devtools-next/core'
 import { useFrameState } from '~/composables'
 import { PANEL_MAX, PANEL_MIN } from '~/constants'
 
@@ -18,17 +19,18 @@ const props = defineProps<{
   }
   viewMode: 'xs' | 'default' | 'fullscreen'
 
-  minimizedPanelInteractive: number
+  bridge?: InstanceType<typeof Bridge>
 }>()
 
 const { state, updateState } = useFrameState()
 const container = ref<HTMLElement>()
 const isResizing = ref<false | { top?: boolean, left?: boolean, right?: boolean, bottom?: boolean }>(false)
 
-watchEffect(() => {
-  updateState({
-    minimizePanelInactive: props.minimizedPanelInteractive,
-  })
+watchOnce(() => props.bridge, (bridge) => {
+  if (!bridge)
+    return
+  bridge.on('update-minimize-panel-inactive', v => updateState({ minimizePanelInactive: v }))
+  bridge.on('update-close-on-click-outside', v => updateState({ closeOnOutsideClick: v }))
 })
 
 watchEffect(() => {
diff --git a/packages/overlay/src/composables/state.ts b/packages/overlay/src/composables/state.ts
index 6b645a11..439a6fb8 100644
--- a/packages/overlay/src/composables/state.ts
+++ b/packages/overlay/src/composables/state.ts
@@ -13,6 +13,7 @@ interface DevToolsFrameState {
   isFirstVisit: boolean
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
+  preferShowFloatingPanel: boolean
 }
 
 export interface UseFrameStateReturn {
@@ -31,6 +32,7 @@ const state = useLocalStorage<DevToolsFrameState>('__vue-devtools-frame-state__'
   isFirstVisit: true,
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
+  preferShowFloatingPanel: true,
 })
 
 export function useFrameState(): UseFrameStateReturn {

From c8b444f93237d0326e4438aee0c4ed2f46c92641 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 15 Dec 2023 19:08:08 +0800
Subject: [PATCH 5/8] refactor(overlay): useBridge should be composable

---
 packages/client/src/pages/settings.vue       |  2 +-
 packages/overlay/src/App.vue                 | 10 +++++-----
 packages/overlay/src/components/FrameBox.vue | 10 +++-------
 packages/overlay/src/composables/bridge.ts   | 19 +++++++++++++++++++
 packages/overlay/src/composables/index.ts    |  1 +
 5 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 packages/overlay/src/composables/bridge.ts

diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 95b42a4d..9d527f1b 100644
--- a/packages/client/src/pages/settings.vue
+++ b/packages/client/src/pages/settings.vue
@@ -200,7 +200,7 @@ const minimizePanelInteractiveLabel = computed(() => {
 
           <p>Minimize floating panel on inactive</p>
           <div>
-            <VueSelect v-model="minimizePanelInteractive" :options="minimizePanelInteractiveOptions" :placeholder="minimizePanelInteractiveLabel" />
+            <VueSelect v-model="minimizePanelInteractive" :button-props="{ outlined: true }" :options="minimizePanelInteractiveOptions" :placeholder="minimizePanelInteractiveLabel" />
           </div>
         </VueCard>
 
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index 7547c31e..c5951305 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, shallowRef } from 'vue'
+import { computed, ref } from 'vue'
 import { useColorMode } from '@vueuse/core'
 import { Bridge, getDevToolsClientUrl, prepareInjection } from '@vue-devtools-next/core'
 import { target } from '@vue-devtools-next/shared'
 import { devtools } from 'vue-devtools-kit'
-import { useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
+import { registerBridge, useFrameState, useIframe, usePanelVisible, usePosition } from '~/composables'
 import { checkIsSafari } from '~/utils'
 import Frame from '~/components/FrameBox.vue'
 
@@ -36,12 +36,11 @@ target.__VUE_DEVTOOLS_TOGGLE_OVERLAY__ = (visible: boolean) => {
   overlayVisible.value = visible
 }
 
-const bridgeRef = shallowRef<InstanceType<typeof Bridge>>()
 const { updateState, state } = useFrameState()
 function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout = 200): Promise<void> | void {
   return new Promise((resolve) => {
     iframe?.contentWindow?.postMessage('__VUE_DEVTOOLS_CREATE_CLIENT__', '*')
-    const bridge = bridgeRef.value = new Bridge({
+    const bridge = new Bridge({
       tracker(fn) {
         if (!overlayVisible.value)
           return
@@ -63,6 +62,7 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
     })
 
     prepareInjection(bridge)
+    registerBridge(bridge)
 
     window.addEventListener('message', (data) => {
       if (data.data === '__VUE_DEVTOOLS_CLIENT_READY__')
@@ -148,7 +148,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
       :style="iframeStyle" :is-dragging="isDragging" :client="{
         close: closePanel,
         getIFrame: getIframe,
-      }" :view-mode="panelState.viewMode" :bridge="bridgeRef"
+      }" :view-mode="panelState.viewMode"
     />
   </div>
 </template>
diff --git a/packages/overlay/src/components/FrameBox.vue b/packages/overlay/src/components/FrameBox.vue
index 5ec0f8ce..bbf7b156 100644
--- a/packages/overlay/src/components/FrameBox.vue
+++ b/packages/overlay/src/components/FrameBox.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue'
-import { useEventListener, watchOnce } from '@vueuse/core'
+import { useEventListener } from '@vueuse/core'
 
-import type { Bridge } from '@vue-devtools-next/core'
-import { useFrameState } from '~/composables'
+import { useFrameState, waitBridgeReady } from '~/composables'
 import { PANEL_MAX, PANEL_MIN } from '~/constants'
 
 const props = defineProps<{
@@ -19,16 +18,13 @@ const props = defineProps<{
   }
   viewMode: 'xs' | 'default' | 'fullscreen'
 
-  bridge?: InstanceType<typeof Bridge>
 }>()
 
 const { state, updateState } = useFrameState()
 const container = ref<HTMLElement>()
 const isResizing = ref<false | { top?: boolean, left?: boolean, right?: boolean, bottom?: boolean }>(false)
 
-watchOnce(() => props.bridge, (bridge) => {
-  if (!bridge)
-    return
+waitBridgeReady().then((bridge) => {
   bridge.on('update-minimize-panel-inactive', v => updateState({ minimizePanelInactive: v }))
   bridge.on('update-close-on-click-outside', v => updateState({ closeOnOutsideClick: v }))
 })
diff --git a/packages/overlay/src/composables/bridge.ts b/packages/overlay/src/composables/bridge.ts
new file mode 100644
index 00000000..0ff3f196
--- /dev/null
+++ b/packages/overlay/src/composables/bridge.ts
@@ -0,0 +1,19 @@
+import type { Bridge } from '@vue-devtools-next/core'
+import { shallowRef, watchEffect } from 'vue'
+
+type BridgeTye = InstanceType<typeof Bridge>
+
+const bridgeRef = shallowRef<BridgeTye | null>(null)
+
+export function registerBridge(bridge: InstanceType<typeof Bridge>) {
+  bridgeRef.value = bridge
+}
+
+export function waitBridgeReady() {
+  return new Promise<BridgeTye>((resolve) => {
+    watchEffect(() => {
+      if (bridgeRef.value)
+        resolve(bridgeRef.value)
+    })
+  })
+}
diff --git a/packages/overlay/src/composables/index.ts b/packages/overlay/src/composables/index.ts
index fca38411..2876232a 100644
--- a/packages/overlay/src/composables/index.ts
+++ b/packages/overlay/src/composables/index.ts
@@ -2,3 +2,4 @@ export * from './position'
 export * from './iframe'
 export * from './panel'
 export * from './state'
+export * from './bridge'

From f7573df195343e08549f0f72a8bc0b014d14fc7d Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 15 Dec 2023 19:17:02 +0800
Subject: [PATCH 6/8] refactor: combine multiple events to one

---
 packages/client/src/App.vue                  | 12 +++++-------
 packages/overlay/src/App.vue                 |  5 -----
 packages/overlay/src/components/FrameBox.vue | 10 ++++++++--
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/App.vue b/packages/client/src/App.vue
index 4f54cdd7..b77b0fa9 100644
--- a/packages/client/src/App.vue
+++ b/packages/client/src/App.vue
@@ -44,13 +44,11 @@ useEventListener('keydown', (e) => {
 })
 
 watchEffect(() => {
-  bridge.value.emit('update-minimize-panel-inactive', devtoolsClientState.value.minimizePanelInteractive)
-})
-watchEffect(() => {
-  bridge.value.emit('update-close-on-click-outside', devtoolsClientState.value.interactionCloseOnOutsideClick)
-})
-watchEffect(() => {
-  bridge.value.emit('update-show-floating-panel', devtoolsClientState.value.showPanel)
+  bridge.value.emit('update-client-state', {
+    minimizePanelInteractive: devtoolsClientState.value.minimizePanelInteractive,
+    closeOnOutsideClick: devtoolsClientState.value.interactionCloseOnOutsideClick,
+    showFloatingPanel: devtoolsClientState.value.showPanel,
+  })
 })
 
 const splitScreenEnabled = computed(() => clientState.value.splitScreen.enabled)
diff --git a/packages/overlay/src/App.vue b/packages/overlay/src/App.vue
index c5951305..e7ea60bb 100644
--- a/packages/overlay/src/App.vue
+++ b/packages/overlay/src/App.vue
@@ -70,11 +70,6 @@ function waitForClientInjection(iframe: HTMLIFrameElement, retry = 50, timeout =
     })
 
     bridge.on('toggle-panel', togglePanelVisible)
-    bridge.on('update-show-floating-panel', (v) => {
-      updateState({
-        preferShowFloatingPanel: v,
-      })
-    })
   })
 }
 
diff --git a/packages/overlay/src/components/FrameBox.vue b/packages/overlay/src/components/FrameBox.vue
index bbf7b156..e3a73256 100644
--- a/packages/overlay/src/components/FrameBox.vue
+++ b/packages/overlay/src/components/FrameBox.vue
@@ -25,8 +25,14 @@ const container = ref<HTMLElement>()
 const isResizing = ref<false | { top?: boolean, left?: boolean, right?: boolean, bottom?: boolean }>(false)
 
 waitBridgeReady().then((bridge) => {
-  bridge.on('update-minimize-panel-inactive', v => updateState({ minimizePanelInactive: v }))
-  bridge.on('update-close-on-click-outside', v => updateState({ closeOnOutsideClick: v }))
+  // @TODO: add type
+  bridge.on('update-client-state', (v) => {
+    updateState({
+      minimizePanelInactive: v.minimizePanelInteractive,
+      closeOnOutsideClick: v.closeOnOutsideClick,
+      preferShowFloatingPanel: v.showFloatingPanel,
+    })
+  })
 })
 
 watchEffect(() => {

From 73c1ad21aeec00b4ca53681ff9bddbc6ba216137 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 15 Dec 2023 19:18:21 +0800
Subject: [PATCH 7/8] chore: remove unused variable

---
 packages/client/src/components/common/SideNav.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/client/src/components/common/SideNav.vue b/packages/client/src/components/common/SideNav.vue
index f9728383..70735b03 100644
--- a/packages/client/src/components/common/SideNav.vue
+++ b/packages/client/src/components/common/SideNav.vue
@@ -6,7 +6,6 @@ const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
 const buttonMoreTabs = ref<HTMLButtonElement>()
-const Tabs = ref<HTMLButtonElement>()
 const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = computed(() => devtoolsClientState.value.scrollableSidebar)
 

From ca8f2d5206ed7587a4abbbc6190faf8a1af70112 Mon Sep 17 00:00:00 2001
From: alexzhang1030 <1642114555@qq.com>
Date: Fri, 15 Dec 2023 21:25:35 +0800
Subject: [PATCH 8/8] fix: edge case

---
 packages/overlay/src/composables/bridge.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/overlay/src/composables/bridge.ts b/packages/overlay/src/composables/bridge.ts
index 0ff3f196..33fea3b7 100644
--- a/packages/overlay/src/composables/bridge.ts
+++ b/packages/overlay/src/composables/bridge.ts
@@ -11,6 +11,8 @@ export function registerBridge(bridge: InstanceType<typeof Bridge>) {
 
 export function waitBridgeReady() {
   return new Promise<BridgeTye>((resolve) => {
+    if (bridgeRef.value)
+      resolve(bridgeRef.value)
     watchEffect(() => {
       if (bridgeRef.value)
         resolve(bridgeRef.value)