feat: toggle timeline recording

Author: Akryum

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

@@ -1,10 +1,13 @@
 import type { BackendContext, TimelineMarker } from '@vue-devtools/app-backend-api'
-import { BridgeEvents } from '@vue-devtools/shared-utils'
+import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
 import type { TimelineMarkerOptions } from '@vue/devtools-api'
 import { isPerformanceSupported } from '@vue/devtools-api'
 import { dateThreshold, perfTimeDiff } from './timeline'
 
 export async function addTimelineMarker(options: TimelineMarkerOptions, ctx: BackendContext) {
+  if (!SharedData.timelineRecording) {
+    return
+  }
   if (!ctx.currentAppRecord) {
     options.all = true
   }
@@ -20,6 +23,9 @@ export async function addTimelineMarker(options: TimelineMarkerOptions, ctx: Bac
 }
 
 export async function sendTimelineMarkers(ctx: BackendContext) {
+  if (!SharedData.timelineRecording) {
+    return
+  }
   if (!ctx.currentAppRecord) {
     return
   }

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

@@ -138,6 +138,9 @@ export async function sendTimelineLayers(ctx: BackendContext) {
 }
 
 export async function addTimelineEvent(options: TimelineEventOptions, app: App, ctx: BackendContext) {
+  if (!SharedData.timelineRecording) {
+    return
+  }
   const appId = app ? getAppRecordId(app) : null
   const isAllApps = options.all || !app || appId == null
 
@@ -195,6 +198,9 @@ export async function clearTimeline(ctx: BackendContext) {
 }
 
 export async function sendTimelineEventData(id: ID, ctx: BackendContext) {
+  if (!SharedData.timelineRecording) {
+    return
+  }
   let data = null
   const eventData = ctx.timelineEventMap.get(id)
   if (eventData) {
@@ -224,6 +230,9 @@ export function removeLayersForApp(app: App, ctx: BackendContext) {
 }
 
 export function sendTimelineLayerEvents(appId: string, layerId: string, ctx: BackendContext) {
+  if (!SharedData.timelineRecording) {
+    return
+  }
   const app = ctx.appRecords.find(ar => ar.id === appId)?.options.app
   if (!app) {
     return

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

@@ -415,6 +415,18 @@ export default defineComponent({
               </div>
             </VueDropdown>
 
+            <VueButton
+              v-tooltip="$shared.timelineRecording ? 'Stop recording' : 'Start recording'"
+              class="icon-button flat"
+              :class="{
+                'recording-btn': $shared.timelineRecording,
+              }"
+              icon-left="fiber_manual_record"
+              @click="$shared.timelineRecording = !$shared.timelineRecording"
+            >
+              <div v-if="$shared.timelineRecording" class="absolute inset-2.5 rounded-full recording-shadow" />
+            </VueButton>
+
             <VueButton
               v-tooltip="'Clear all timelines'"
               class="icon-button flat"
@@ -424,6 +436,10 @@ export default defineComponent({
 
             <div class="flex-1" />
 
+            <div v-if="!$shared.timelineRecording" class="text-gray-500 dark:text-gray-400 text-xs px-2">
+              Not recording
+            </div>
+
             <VueDropdown
               placement="bottom-end"
             >
@@ -595,4 +611,18 @@ export default defineComponent({
     @apply w-3.5 h-3.5 mr-0 left-0 right-0 !important;
   }
 }
+
+.recording-btn {
+  :deep(.vue-ui-icon) {
+    @apply animate-pulse duration-1000;
+
+    svg {
+      fill: theme('colors.red.500') !important;
+    }
+  }
+}
+
+.recording-shadow {
+  box-shadow: theme('colors.red.500') 0 0 8px;
+}
 </style>

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

@@ -22,6 +22,7 @@ const internalSharedData = {
   vuexAutoload: false,
   vuexGroupGettersByModule: true,
   showMenuScrollTip: true,
+  timelineRecording: false,
   timelineTimeGrid: true,
   timelineScreenshots: false,
   menuStepScrolling: isMac,
@@ -49,6 +50,7 @@ const persisted = [
   'vuexGroupGettersByModule',
   'timeFormat',
   'showMenuScrollTip',
+  'timelineRecording',
   'timelineTimeGrid',
   'timelineScreenshots',
   'menuStepScrolling',