feat(timeline): allow disable component events, closes #1545

Author: Akryum

packages/app-backend-core/src/timeline.ts

@@ -1,6 +1,7 @@
 import { BackendContext } from '@vue-devtools/app-backend-api'
 import { BridgeEvents, HookEvents, stringify } from '@vue-devtools/shared-utils'
-import { App, ID, TimelineEventOptions, TimelineLayerOptions, WithId } from '@vue/devtools-api'
+import SharedData from '@vue-devtools/shared-utils/lib/shared-data'
+import { App, ID, TimelineEventOptions, WithId } from '@vue/devtools-api'
 import { hook } from './global-hook'
 import { getAppRecord, getAppRecordId } from './app'
 import { builtinLayers } from './timeline-builtins'
@@ -68,6 +69,8 @@ function setupBuiltinLayers (ctx: BackendContext) {
 
   hook.on(HookEvents.COMPONENT_EMIT, async (app, instance, event, params) => {
     try {
+      if (!SharedData.componentEventsEnabled) return
+
       const appRecord = await getAppRecord(app, ctx)
       const componentId = `${appRecord.id}:${instance.uid}`
       const componentDisplay = (await ctx.api.getComponentName(instance)) || '<i>Unknown Component</i>'

packages/app-frontend/src/features/timeline/LayerItem.vue

@@ -93,7 +93,10 @@ export default defineComponent({
           <span
             class="truncate text-sm"
             :class="{
-              'opacity-50': layer.id === 'performance' && !$shared.performanceMonitoringEnabled,
+              'opacity-50': (
+                layer.id === 'component-event' && !$shared.componentEventsEnabled ||
+                layer.id === 'performance' && !$shared.performanceMonitoringEnabled
+              ),
             }"
             :style="{
               'color': selected ? `#${color}` : undefined
@@ -108,6 +111,17 @@ export default defineComponent({
         </div>
 
         <div class="flex items-center space-x-1">
+          <VueButton
+            v-if="hover && layer.id === 'component-event'"
+            class="text-xs px-1 py-0 h-5 hover:opacity-80"
+            :style="{
+              backgroundColor: `#${color}28`,
+            }"
+            @click.stop="$shared.componentEventsEnabled = !$shared.componentEventsEnabled"
+          >
+            {{ $shared.componentEventsEnabled ? 'Disable' : 'Enable' }}
+          </VueButton>
+
           <VueButton
             v-if="hover && layer.id === 'performance'"
             class="text-xs px-1 py-0 h-5 hover:opacity-80"

packages/shared-utils/src/shared-data.ts

@@ -13,6 +13,7 @@ const internalSharedData = {
   cacheVuexSnapshotsEvery: 50,
   cacheVuexSnapshotsLimit: 10,
   snapshotLoading: false,
+  componentEventsEnabled: true,
   performanceMonitoringEnabled: true,
   editableProps: false,
   logDetected: true,
@@ -42,7 +43,8 @@ const persisted = [
   'timelineScreenshots',
   'menuStepScrolling',
   'pluginPermissions',
-  'performanceMonitoringEnabled'
+  'performanceMonitoringEnabled',
+  'componentEventsEnabled'
 ]
 
 const storageVersion = '6.0.0-alpha.1'