perf: reduce initial performance overhead (#595)

Author: webfansplz

packages/chrome-extension/src/devtools-background.ts

@@ -23,8 +23,11 @@ function createPanelOnVueDetected() {
         'icons/128.png',
         'pages/devtools-panel.html',
         (panel) => {
-          panel.onShown.addListener((window) => {
-
+          panel.onShown.addListener(() => {
+            chrome.devtools.inspectedWindow.eval(`window.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__({ chrome: true })`)
+          })
+          panel.onHidden.addListener(() => {
+            chrome.devtools.inspectedWindow.eval(`window.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__({ chrome: false })`)
           })
         },
       )

packages/client/src/App.vue

@@ -118,6 +118,13 @@ onUnmounted(() => {
   rpc.value.toggleClientConnected(false)
   rpc.functions.off(DevToolsMessagingEvents.ACTIVE_APP_UNMOUNTED, onActiveAppUnmounted)
 })
+
+function toggleDevToolsClientVisible(params: { visible: boolean, host: string }) {
+  const { host, visible } = params
+  rpc.value.updateDevToolsClientDetected({
+    [host]: visible,
+  })
+}
 </script>
 
 <template>
@@ -129,7 +136,7 @@ onUnmounted(() => {
       :class="isUtilityView ? 'flex' : sidebarExpanded ? 'grid grid-cols-[250px_1fr]' : 'grid grid-cols-[50px_1fr]'"
       h-full h-screen of-hidden font-sans bg-base
     >
-      <SideNav v-if="!isUtilityView" of-x-hidden of-y-auto />
+      <SideNav v-if="!isUtilityView" of-x-hidden of-y-auto @toggle-devtools-client-visible="toggleDevToolsClientVisible" />
       <Splitpanes
         h-full of-hidden
         @resize="splitScreenSize = $event.map((v) => v.size)"

packages/client/src/components/common/SideNav.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { VueDropdown } from '@vue/devtools-ui'
 
+const emit = defineEmits(['toggleDevtoolsClientVisible'])
 const showDocking = ref(false)
 const showMoreTabs = ref(false)
 const panel = ref()
 const buttonDocking = ref<HTMLButtonElement>()
 const buttonMoreTabs = ref<HTMLButtonElement>()
 const sidebarExpanded = computed(() => devtoolsClientState.value.expandSidebar)
 const sidebarScrollable = computed(() => devtoolsClientState.value.scrollableSidebar)
-
 const { enabledTabs, flattenedTabs } = useAllTabs()
 
 const ITEM_HEIGHT = 45
@@ -50,6 +50,17 @@ useResizeObserver(containerRef, () => {
   // This is a hack to force the dropdown to reposition itself
   dropdownDistance.value = dropdownDistance.value === 6 ? 6.01 : 6
 })
+
+const hostEnv = useHostEnv()
+useIntersectionObserver(
+  containerRef,
+  ([{ isIntersecting }]) => {
+    emit('toggleDevtoolsClientVisible', {
+      visible: isIntersecting,
+      host: hostEnv,
+    })
+  },
+)
 </script>
 
 <template>

packages/core/src/rpc/global.ts

@@ -1,4 +1,4 @@
-import { DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected } from '@vue/devtools-kit'
+import { DevToolsContextHookKeys, DevToolsMessagingHookKeys, devtools, devtoolsRouter, devtoolsRouterInfo, getActiveInspectors, getInspector, getInspectorActions, getInspectorInfo, getInspectorNodeActions, getRpcClient, getRpcServer, stringify, toggleClientConnected, updateDevToolsClientDetected } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 import type { DevToolsV6PluginAPIHookKeys, DevToolsV6PluginAPIHookPayloads, OpenInEditorOptions } from '@vue/devtools-kit'
 
@@ -148,6 +148,9 @@ export const functions = {
   unhighlight() {
     devtools.ctx.hooks.callHook(DevToolsContextHookKeys.COMPONENT_UNHIGHLIGHT)
   },
+  updateDevToolsClientDetected(params: Record<string, boolean>) {
+    updateDevToolsClientDetected(params)
+  },
   // listen to devtools server events
   initDevToolsServerListener() {
     const rpcServer = getRpcServer<RPCFunctions>()

packages/devtools-kit/src/core/devtools-client/detected.ts

@@ -0,0 +1,14 @@
+import { target } from '@vue/devtools-shared'
+import { devtoolsState } from '../../ctx/state'
+import { toggleHighPerfMode } from '../high-perf-mode'
+
+export function updateDevToolsClientDetected(params: Record<string, boolean>) {
+  devtoolsState.devtoolsClientDetected = {
+    ...devtoolsState.devtoolsClientDetected,
+    ...params,
+  }
+  const devtoolsClientVisible = Object.values(devtoolsState.devtoolsClientDetected).some(Boolean)
+  toggleHighPerfMode(!devtoolsClientVisible)
+}
+
+target.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__ ??= updateDevToolsClientDetected

packages/devtools-kit/src/ctx/state.ts

@@ -15,6 +15,9 @@ export interface DevToolsState {
   tabs: CustomTab[]
   commands: CustomCommand[]
   highPerfModeEnabled: boolean
+  devtoolsClientDetected: {
+    [key: string]: boolean
+  }
 }
 
 global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ ??= []
@@ -33,7 +36,8 @@ function initStateFactory() {
     activeAppRecordId: '',
     tabs: [],
     commands: [],
-    highPerfModeEnabled: false,
+    highPerfModeEnabled: true,
+    devtoolsClientDetected: {},
   }
 }
 global[STATE_KEY] ??= initStateFactory()

packages/devtools-kit/src/hook/index.ts

@@ -2,6 +2,7 @@ import { target } from '@vue/devtools-shared'
 import type { HookKeys, Hookable } from 'hookable'
 import { createHooks } from 'hookable'
 import { DevToolsEvent, DevToolsHook, DevToolsHooks, VueHooks } from '../types'
+import { devtoolsState } from '../ctx'
 
 export { VueHooks } from '../types'
 
@@ -87,7 +88,7 @@ export function subscribeDevToolsHook() {
 
   // component added hook
   hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_ADDED]>(DevToolsHooks.COMPONENT_ADDED, async (app, uid, parentUid, component) => {
-    if (app?._instance?.type?.devtools?.hide)
+    if (app?._instance?.type?.devtools?.hide || devtoolsState.highPerfModeEnabled)
       return
 
     if (!app || (typeof uid !== 'number' && !uid) || !component)
@@ -98,15 +99,15 @@ export function subscribeDevToolsHook() {
 
   // component updated hook
   hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]>(DevToolsHooks.COMPONENT_UPDATED, (app, uid, parentUid, component) => {
-    if (!app || (typeof uid !== 'number' && !uid) || !component)
+    if (!app || (typeof uid !== 'number' && !uid) || !component || devtoolsState.highPerfModeEnabled)
       return
 
     devtoolsHooks.callHook(DevToolsHooks.COMPONENT_UPDATED, app, uid, parentUid, component)
   })
 
   // component removed hook
   hook.on<DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]>(DevToolsHooks.COMPONENT_REMOVED, async (app, uid, parentUid, component) => {
-    if (!app || (typeof uid !== 'number' && !uid) || !component)
+    if (!app || (typeof uid !== 'number' && !uid) || !component || devtoolsState.highPerfModeEnabled)
       return
 
     devtoolsHooks.callHook(DevToolsHooks.COMPONENT_REMOVED, app, uid, parentUid, component)

packages/devtools-kit/src/index.ts

@@ -19,6 +19,7 @@ export { parse, stringify } from './shared'
 export { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from './core/component/state/format'
 export { UNDEFINED, INFINITY, NAN, NEGATIVE_INFINITY } from './core/component/state/constants'
 export { isPlainObject } from './core/component/state/is'
+export { updateDevToolsClientDetected } from './core/devtools-client/detected'
 
 export const devtools = {
   hook,

packages/firefox-extension/src/devtools-background.ts

@@ -23,8 +23,11 @@ function createPanelOnVueDetected() {
         'icons/128.png',
         'devtools-panel.html',
         (panel) => {
-          panel.onShown.addListener((window) => {
-
+          panel.onShown.addListener(() => {
+            chrome.devtools.inspectedWindow.eval(`window.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__({ chrome: true })`)
+          })
+          panel.onHidden.addListener(() => {
+            chrome.devtools.inspectedWindow.eval(`window.__VUE_DEVTOOLS_UPDATE_CLIENT_DETECTED__({ chrome: false })`)
           })
         },
       )