From 8acab1dda8d80509589bc2398ffa08ee3653e0ca Mon Sep 17 00:00:00 2001
From: arlo <webfansplz@gmail.com>
Date: Tue, 1 Oct 2024 22:52:55 +0800
Subject: [PATCH] chore: update

---
 .../applet/src/components/timeline/index.vue  |   7 +
 packages/client/src/pages/timeline.vue        |  26 +++-
 packages/devtools-kit/src/core/app/index.ts   |   1 +
 .../src/core/plugin/components.ts             |  42 +-----
 .../devtools-kit/src/core/timeline/index.ts   | 127 ++++++++++++++++++
 .../devtools-kit/src/core/timeline/perf.ts    |  97 +++++++++++++
 packages/devtools-kit/src/ctx/state.ts        |   2 +
 packages/devtools-kit/src/hook/index.ts       |  18 +++
 packages/devtools-kit/src/types/app.ts        |   1 +
 packages/devtools-kit/src/types/hook.ts       |   4 +
 10 files changed, 283 insertions(+), 42 deletions(-)
 create mode 100644 packages/devtools-kit/src/core/timeline/index.ts
 create mode 100644 packages/devtools-kit/src/core/timeline/perf.ts

diff --git a/packages/applet/src/components/timeline/index.vue b/packages/applet/src/components/timeline/index.vue
index 7d9889f2f..09f30b29f 100644
--- a/packages/applet/src/components/timeline/index.vue
+++ b/packages/applet/src/components/timeline/index.vue
@@ -95,6 +95,13 @@ rpc.functions.on(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEvent
 onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
 })
+
+defineExpose({
+  clear() {
+    eventList.value = []
+    groupList.value.clear()
+  },
+})
 </script>
 
 <template>
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 33c135f5a..4abfc25e1 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -6,6 +6,8 @@ import {
 } from '@vue/devtools-core'
 import { Pane, Splitpanes } from 'splitpanes'
 
+const timelineRef = ref()
+
 // responsive layout
 const splitpanesRef = ref<HTMLDivElement>()
 const splitpanesReady = ref(false)
@@ -32,20 +34,38 @@ watchEffect(() => {
 
 function toggleApp(id: string) {
   rpc.value.toggleApp(id).then(() => {
+    clearTimelineEvents()
   })
 }
 
 // #endregion
 
-const activeTimelineLayer = 'component-event'
+const activeTimelineLayer = ref('component-event')
 const timelineLayers = [
+  {
+    label: 'Mouse',
+    id: 'mouse',
+  },
+  {
+    label: 'Keyboard',
+    id: 'keyboard',
+  },
   {
     label: 'Component events',
     id: 'component-event',
   },
+  {
+    label: 'Performance',
+    id: 'performance',
+  },
 ]
 
-function toggleTimelineLayer(id: string) {
+function clearTimelineEvents() {
+  timelineRef.value?.clear()
+}
+
+function toggleTimelineLayer() {
+  clearTimelineEvents()
 }
 </script>
 
@@ -66,7 +86,7 @@ function toggleTimelineLayer(id: string) {
       </Pane>
       <Pane relative h-full size="65">
         <div class="h-full flex flex-col p2">
-          <Timeline :layer-ids="['component-event']" :header-visible="false" doc-link="" />
+          <Timeline ref="timelineRef" :layer-ids="[activeTimelineLayer]" :header-visible="false" doc-link="" />
         </div>
       </Pane>
     </Splitpanes>
diff --git a/packages/devtools-kit/src/core/app/index.ts b/packages/devtools-kit/src/core/app/index.ts
index c8cb93373..9678ecaba 100644
--- a/packages/devtools-kit/src/core/app/index.ts
+++ b/packages/devtools-kit/src/core/app/index.ts
@@ -57,6 +57,7 @@ export function createAppRecord(app: VueAppInstance['appContext']['app']): AppRe
       id,
       name,
       instanceMap: new Map(),
+      perfGroupIds: new Map(),
       rootInstance,
     }
 
diff --git a/packages/devtools-kit/src/core/plugin/components.ts b/packages/devtools-kit/src/core/plugin/components.ts
index e6d5090b7..ab6b3dc0d 100644
--- a/packages/devtools-kit/src/core/plugin/components.ts
+++ b/packages/devtools-kit/src/core/plugin/components.ts
@@ -3,13 +3,13 @@ import { debounce } from 'perfect-debounce'
 import { getInstanceState } from '../../core/component/state'
 import { editState } from '../../core/component/state/editor'
 import { ComponentWalker } from '../../core/component/tree/walker'
-import { getAppRecord, getComponentId, getComponentInstance, getInstanceName } from '../../core/component/utils'
+import { getAppRecord, getComponentId, getComponentInstance } from '../../core/component/utils'
 import { activeAppRecord, devtoolsContext, devtoolsState, DevToolsV6PluginAPIHookKeys } from '../../ctx'
 import { hook } from '../../hook'
+import { setupBuiltinTimelineLayers } from '../timeline'
 import { exposeInstanceToWindow } from '../vm'
 
 const INSPECTOR_ID = 'components'
-const COMPONENT_EVENT_LAYER_ID = 'component-event'
 
 export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, PluginSetupFunction] {
   const descriptor: PluginDescriptor = {
@@ -25,11 +25,7 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
       treeFilterPlaceholder: 'Search components',
     })
 
-    api.addTimelineLayer({
-      id: COMPONENT_EVENT_LAYER_ID,
-      label: 'Component events',
-      color: 0x4FC08D,
-    })
+    setupBuiltinTimelineLayers(api)
 
     api.on.getInspectorTree(async (payload) => {
       if (payload.app === app && payload.inspectorId === INSPECTOR_ID) {
@@ -89,38 +85,6 @@ export function createComponentsDevToolsPlugin(app: App): [PluginDescriptor, Plu
       api.sendInspectorState(INSPECTOR_ID)
     }, 120)
 
-    hook.on.componentEmit(async (app, instance, event, params) => {
-      const appRecord = await getAppRecord(app)
-
-      if (!appRecord)
-        return
-
-      const componentId = `${appRecord.id}:${instance.uid}`
-      const componentName = getInstanceName(instance) || 'Unknown Component'
-
-      api.addTimelineEvent({
-        layerId: COMPONENT_EVENT_LAYER_ID,
-        event: {
-          time: Date.now(),
-          data: {
-            component: {
-              _custom: {
-                type: 'component-definition',
-                display: componentName,
-              },
-            },
-            event,
-            params,
-          },
-          title: event,
-          subtitle: `by ${componentName}`,
-          meta: {
-            componentId,
-          },
-        },
-      })
-    })
-
     const componentAddedCleanup = hook.on.componentAdded(async (app, uid, parentUid, component) => {
       if (devtoolsState.highPerfModeEnabled)
         return
diff --git a/packages/devtools-kit/src/core/timeline/index.ts b/packages/devtools-kit/src/core/timeline/index.ts
new file mode 100644
index 000000000..66ba594e4
--- /dev/null
+++ b/packages/devtools-kit/src/core/timeline/index.ts
@@ -0,0 +1,127 @@
+import type { DevToolsV6PluginAPI } from '../../api/v6'
+import { isBrowser } from '@vue/devtools-shared'
+import { getAppRecord, getInstanceName } from '../../core/component/utils'
+import { hook } from '../../hook'
+import { PERFORMANCE_EVENT_LAYER_ID, performanceMarkEnd, performanceMarkStart } from './perf'
+
+const COMPONENT_EVENT_LAYER_ID = 'component-event'
+
+export function setupBuiltinTimelineLayers(api: DevToolsV6PluginAPI) {
+  if (!isBrowser)
+    return
+
+  // Mouse events timeline layer
+
+  api.addTimelineLayer({
+    id: 'mouse',
+    label: 'Mouse',
+    color: 0xA451AF,
+  })
+
+  ;(['mousedown', 'mouseup', 'click', 'dblclick'] as const).forEach((eventType) => {
+    window.addEventListener(eventType, async (event: MouseEvent) => {
+      await api.addTimelineEvent({
+        layerId: 'mouse',
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            x: event.clientX,
+            y: event.clientY,
+          },
+          title: eventType,
+        },
+      })
+    }, {
+      capture: true,
+      passive: true,
+    })
+  })
+
+  // Keyboard events timeline layer
+
+  api.addTimelineLayer({
+    id: 'keyboard',
+    label: 'Keyboard',
+    color: 0x8151AF,
+  })
+
+  ;(['keyup', 'keydown', 'keypress'] as const).forEach((eventType) => {
+    window.addEventListener(eventType, async (event: KeyboardEvent) => {
+      await api.addTimelineEvent({
+        layerId: 'keyboard',
+        event: {
+          time: Date.now(),
+          data: {
+            type: eventType,
+            key: event.key,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            metaKey: event.metaKey,
+          },
+          title: event.key,
+        },
+      })
+    }, {
+      capture: true,
+      passive: true,
+    })
+  })
+
+  // Component events timeline layer
+
+  api.addTimelineLayer({
+    id: COMPONENT_EVENT_LAYER_ID,
+    label: 'Component events',
+    color: 0x4FC08D,
+  })
+
+  hook.on.componentEmit(async (app, instance, event, params) => {
+    const appRecord = await getAppRecord(app)
+
+    if (!appRecord)
+      return
+
+    const componentId = `${appRecord.id}:${instance.uid}`
+    const componentName = getInstanceName(instance) || 'Unknown Component'
+
+    api.addTimelineEvent({
+      layerId: COMPONENT_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: {
+            _custom: {
+              type: 'component-definition',
+              display: componentName,
+            },
+          },
+          event,
+          params,
+        },
+        title: event,
+        subtitle: `by ${componentName}`,
+        meta: {
+          componentId,
+        },
+      },
+    })
+  })
+
+  // Performance timeline layer
+
+  api.addTimelineLayer({
+    id: 'performance',
+    label: PERFORMANCE_EVENT_LAYER_ID,
+    color: 0x41B86A,
+  })
+
+  hook.on.perfStart((app, uid, vm, type, time) => {
+    performanceMarkStart(api, app, uid, vm, type, time)
+  })
+
+  hook.on.perfEnd((app, uid, vm, type, time) => {
+    performanceMarkEnd(api, app, uid, vm, type, time)
+  })
+}
diff --git a/packages/devtools-kit/src/core/timeline/perf.ts b/packages/devtools-kit/src/core/timeline/perf.ts
new file mode 100644
index 000000000..8b863d802
--- /dev/null
+++ b/packages/devtools-kit/src/core/timeline/perf.ts
@@ -0,0 +1,97 @@
+import type { App } from 'vue'
+import type { DevToolsV6PluginAPI } from '../../api/v6'
+import type { VueAppInstance } from '../../types'
+import { getAppRecord, getInstanceName } from '../../core/component/utils'
+import { devtoolsState } from '../../ctx/state'
+
+type HookAppInstance = App & VueAppInstance
+const markEndQueue = new Map<string, {
+  app: App
+  uid: number
+  instance: HookAppInstance
+  type: string
+  time: number
+}>()
+export const PERFORMANCE_EVENT_LAYER_ID = 'performance'
+
+export async function performanceMarkStart(api: DevToolsV6PluginAPI, app: App, uid: number, vm: HookAppInstance, type: string, time: number) {
+  const appRecord = await getAppRecord(app)
+  if (!appRecord) {
+    return
+  }
+  const componentName = getInstanceName(vm) || 'Unknown Component'
+  const groupId = devtoolsState.perfUniqueGroupId++
+  const groupKey = `${uid}-${type}`
+  appRecord.perfGroupIds.set(groupKey, { groupId, time })
+  await api.addTimelineEvent({
+    layerId: PERFORMANCE_EVENT_LAYER_ID,
+    event: {
+      time: Date.now(),
+      data: {
+        component: componentName,
+        type,
+        measure: 'start',
+      },
+      title: componentName,
+      subtitle: type,
+      groupId,
+    },
+  })
+  if (markEndQueue.has(groupKey)) {
+    const {
+      app,
+      uid,
+      instance,
+      type,
+      time,
+    } = markEndQueue.get(groupKey)!
+    markEndQueue.delete(groupKey)
+    await performanceMarkEnd(
+      api,
+      app,
+      uid,
+      instance,
+      type,
+      time,
+    )
+  }
+}
+
+export function performanceMarkEnd(api: DevToolsV6PluginAPI, app: App, uid: number, vm: HookAppInstance, type: string, time: number) {
+  const appRecord = getAppRecord(app)
+  if (!appRecord)
+    return
+
+  const componentName = getInstanceName(vm) || 'Unknown Component'
+  const groupKey = `${uid}-${type}`
+  const groupInfo = appRecord.perfGroupIds.get(groupKey)
+  if (groupInfo) {
+    const groupId = groupInfo.groupId
+    const startTime = groupInfo.time
+    const duration = time - startTime
+    api.addTimelineEvent({
+      layerId: PERFORMANCE_EVENT_LAYER_ID,
+      event: {
+        time: Date.now(),
+        data: {
+          component: componentName,
+          type,
+          measure: 'end',
+          duration: {
+            _custom: {
+              type: 'Duration',
+              value: duration,
+              display: `${duration} ms`,
+            },
+          },
+        },
+        title: componentName,
+        subtitle: type,
+        groupId,
+      },
+    })
+  }
+  else {
+    markEndQueue.set(groupKey, { app, uid, instance: vm, type, time })
+  }
+}
diff --git a/packages/devtools-kit/src/ctx/state.ts b/packages/devtools-kit/src/ctx/state.ts
index c5356a735..dfb20a6cb 100644
--- a/packages/devtools-kit/src/ctx/state.ts
+++ b/packages/devtools-kit/src/ctx/state.ts
@@ -18,6 +18,7 @@ export interface DevToolsState {
   devtoolsClientDetected: {
     [key: string]: boolean
   }
+  perfUniqueGroupId: number
 }
 
 global.__VUE_DEVTOOLS_KIT_APP_RECORDS__ ??= []
@@ -38,6 +39,7 @@ function initStateFactory() {
     commands: [],
     highPerfModeEnabled: true,
     devtoolsClientDetected: {},
+    perfUniqueGroupId: 0,
   }
 }
 global[STATE_KEY] ??= initStateFactory()
diff --git a/packages/devtools-kit/src/hook/index.ts b/packages/devtools-kit/src/hook/index.ts
index ccf081315..c5695edac 100644
--- a/packages/devtools-kit/src/hook/index.ts
+++ b/packages/devtools-kit/src/hook/index.ts
@@ -33,6 +33,12 @@ const on: VueHooks['on'] = {
   setupDevtoolsPlugin(fn) {
     devtoolsHooks.hook(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, fn)
   },
+  perfStart(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_START, fn)
+  },
+  perfEnd(fn) {
+    return devtoolsHooks.hook(DevToolsHooks.PERFORMANCE_END, fn)
+  },
 }
 
 export function createDevToolsHook(): DevToolsHook {
@@ -122,6 +128,18 @@ export function subscribeDevToolsHook() {
     devtoolsHooks.callHook(DevToolsHooks.COMPONENT_EMIT, app, instance, event, params)
   })
 
+  hook.on<DevToolsEvent[DevToolsHooks.PERFORMANCE_START]>(DevToolsHooks.PERFORMANCE_START, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_START, app, uid, vm, type, time)
+  })
+
+  hook.on<DevToolsEvent[DevToolsHooks.PERFORMANCE_END]>(DevToolsHooks.PERFORMANCE_END, (app, uid, vm, type, time) => {
+    if (!app || devtoolsState.highPerfModeEnabled)
+      return
+    devtoolsHooks.callHook(DevToolsHooks.PERFORMANCE_END, app, uid, vm, type, time)
+  })
+
   // devtools plugin setup
   hook.on<DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]>(DevToolsHooks.SETUP_DEVTOOLS_PLUGIN, (pluginDescriptor, setupFn, options) => {
     if (options?.target === 'legacy')
diff --git a/packages/devtools-kit/src/types/app.ts b/packages/devtools-kit/src/types/app.ts
index 49acaa193..236753655 100644
--- a/packages/devtools-kit/src/types/app.ts
+++ b/packages/devtools-kit/src/types/app.ts
@@ -50,6 +50,7 @@ export interface AppRecord {
   version?: string
   types?: Record<string, string | symbol>
   instanceMap: Map<string, VueAppInstance>
+  perfGroupIds: Map<string, { groupId: number, time: number }>
   rootInstance: VueAppInstance
   routerId?: string
 }
diff --git a/packages/devtools-kit/src/types/hook.ts b/packages/devtools-kit/src/types/hook.ts
index 07ff40627..1075ecc83 100644
--- a/packages/devtools-kit/src/types/hook.ts
+++ b/packages/devtools-kit/src/types/hook.ts
@@ -30,6 +30,8 @@ export interface DevToolsEvent {
   [DevToolsHooks.COMPONENT_UPDATED]: DevToolsEvent['component:added']
   [DevToolsHooks.COMPONENT_REMOVED]: DevToolsEvent['component:added']
   [DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction, options?: { target?: string }) => void
+  [DevToolsHooks.PERFORMANCE_START]: (app: App, uid: number, vm: HookAppInstance, type: string, time: number) => void
+  [DevToolsHooks.PERFORMANCE_END]: (app: App, uid: number, vm: HookAppInstance, type: string, time: number) => void
 }
 
 export interface DevToolsHook {
@@ -56,6 +58,8 @@ export interface VueHooks {
     componentUpdated: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_UPDATED]) => () => void
     componentRemoved: (fn: DevToolsEvent[DevToolsHooks.COMPONENT_REMOVED]) => () => void
     setupDevtoolsPlugin: (fn: DevToolsEvent[DevToolsHooks.SETUP_DEVTOOLS_PLUGIN]) => void
+    perfStart: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_START]) => void
+    perfEnd: (fn: DevToolsEvent[DevToolsHooks.PERFORMANCE_END]) => void
   }
   setupDevToolsPlugin: (pluginDescriptor: PluginDescriptor, setupFn: PluginSetupFunction) => void
 }