perf(kit): enable plugin timeline on-demand

Author: webfansplz

packages/applet/src/components/timeline/index.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { CustomInspectorState, TimelineEventOptions } from '@vue/devtools-kit'
-import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
+import { DevToolsMessagingEvents, rpc, useDevToolsState } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
+import { vTooltip, VueIcIcon } from '@vue/devtools-ui'
 
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, onUnmounted, ref } from 'vue'
@@ -14,6 +15,7 @@ import EventList from './EventList.vue'
 
 const props = withDefaults(defineProps<{
   layerIds: string[]
+  pluginId: string
   docLink: string
   githubRepoLink?: string
   headerVisible?: boolean
@@ -29,7 +31,10 @@ expandedStateNodes.value = ['0', '1']
 const eventList = ref<TimelineEventOptions['event'][]>([])
 const groupList = ref<Map<string | number | undefined, TimelineEventOptions['event'][]>>(new Map())
 const selectedEventIndex = ref(0)
+const devtoolsState = useDevToolsState()
+const recordingState = computed(() => devtoolsState.timelineLayersState.value?.[props.pluginId])
 const selectedEventInfo = computed(() => eventList.value[selectedEventIndex.value] ?? null)
+const recordingTooltip = computed(() => recordingState.value ? 'Stop recording' : 'Start recording')
 // event info
 const normalizedEventInfo = computed(() => {
   const info: CustomInspectorState[] = []
@@ -96,19 +101,28 @@ onUnmounted(() => {
   rpc.functions.off(DevToolsMessagingEvents.TIMELINE_EVENT_UPDATED, onTimelineEventUpdated)
 })
 
+function clear() {
+  eventList.value = []
+  groupList.value.clear()
+}
+
 defineExpose({
-  clear() {
-    eventList.value = []
-    groupList.value.clear()
-  },
+  clear,
 })
+
+function toggleRecordingState() {
+  rpc.value.updateTimelineLayersState({
+    [props.pluginId]: !recordingState.value,
+  })
+}
 </script>
 
 <template>
-  <div class="h-full flex flex-col">
+  <div class="relative h-full flex flex-col">
     <DevToolsHeader v-if="headerVisible" :doc-link="docLink" :github-repo-link="githubRepoLink">
       <Navbar />
     </DevToolsHeader>
+
     <template v-if="eventList.length">
       <div class="flex-1 overflow-hidden">
         <Splitpanes class="h-full">
@@ -128,5 +142,36 @@ defineExpose({
     <Empty v-else class="flex-1">
       No events
     </Empty>
+
+    <div class="absolute right-3 top-12 flex items-center justify-end b-1 border-base rounded-1 b-solid px2 py1">
+      <div class="flex items-center gap-2 px-1">
+        <div v-tooltip.bottom-end="{ content: recordingTooltip }" class="flex items-center gap1" @click="toggleRecordingState">
+          <span v-if="recordingState" class="recording recording-btn bg-[#ef4444]" />
+          <span v-else class="recording-btn bg-black op70 dark:(bg-white) hover:op100" />
+        </div>
+        <div v-tooltip.bottom-end="{ content: 'Clear all timelines' }" class="flex items-center gap1" @click="clear">
+          <VueIcIcon name="baseline-delete" cursor-pointer text-xl op70 hover:op100 />
+        </div>
+        <div v-tooltip.bottom-end="{ content: '<p style=\'width: 285px\'>Timeline events can cause significant performance overhead in large applications, so we recommend enabling it only when needed and on-demand. </p>', html: true }" class="flex items-center gap1">
+          <VueIcIcon name="baseline-tips-and-updates" cursor-pointer text-xl op70 hover:op100 />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+.recording-btn {
+  --at-apply: w-3.5 h-3.5 inline-flex cursor-pointer rounded-50%;
+}
+.recording {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  transition-duration: 1s;
+  box-shadow: #ef4444 0 0 8px;
+}
+</style>

packages/applet/src/modules/custom-inspector/components/timeline/Index.vue

@@ -6,5 +6,5 @@ const state = useCustomInspectorState()
 </script>
 
 <template>
-  <Timeline :layer-ids="state.timelineLayerIds!" :doc-link="state.homepage!" />
+  <Timeline :layer-ids="state.timelineLayerIds!" :doc-link="state.homepage!" :plugin-id="state.pluginId" />
 </template>

packages/applet/src/modules/pinia/components/timeline/Index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import Timeline from '~/components/timeline/index.vue'
 
+const pluginDescriptorId = 'dev.esm.pinia'
 const LAYER_IDS = ['pinia:mutations']
 </script>
 
 <template>
-  <Timeline :layer-ids="LAYER_IDS" doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia" />
+  <Timeline :layer-ids="LAYER_IDS" doc-link="https://pinia.vuejs.org/" :plugin-id="pluginDescriptorId" github-repo-link="https://github.com/vuejs/pinia" />
 </template>

packages/applet/src/modules/router/components/timeline/Index.vue

@@ -2,9 +2,10 @@
 import Timeline from '~/components/timeline/index.vue'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 
+const pluginDescriptorId = 'org.vuejs.router'
 const state = useCustomInspectorState()
 </script>
 
 <template>
-  <Timeline :layer-ids="state.timelineLayerIds!" doc-link="https://router.vuejs.org/" github-repo-link="https://github.com/vuejs/router" />
+  <Timeline :layer-ids="state.timelineLayerIds!" doc-link="https://router.vuejs.org/" :plugin-id="pluginDescriptorId" github-repo-link="https://github.com/vuejs/router" />
 </template>

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

@@ -335,6 +335,8 @@ export function createDevToolsCtxHooks() {
 
   // add timeline event
   hooks.hook(DevToolsContextHookKeys.TIMELINE_EVENT_ADDED, ({ options, plugin }) => {
+    if (devtoolsState.highPerfModeEnabled || !devtoolsState.timelineLayersState?.[plugin.descriptor.id])
+      return
     // @ts-expect-error hookable
     hooks.callHookWith(async (callbacks) => {
       await Promise.all(callbacks.map(cb => cb(options)))

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

@@ -18,6 +18,7 @@ export const devtoolsTimelineLayers = new Proxy<DevToolsKitTimelineLayer[]>(targ
 })
 
 export function addTimelineLayer(options: TimelineLayerOptions, descriptor: PluginDescriptor) {
+  devtoolsState.timelineLayersState[descriptor.id] = false
   devtoolsTimelineLayers.push({
     ...options,
     descriptorId: descriptor.id,