Skip to content

Commit

Permalink
feat: toggle timeline recording
Browse files Browse the repository at this point in the history
  • Loading branch information
Akryum committed Feb 5, 2024
1 parent db49152 commit bf5db9e
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 1 deletion.
8 changes: 7 additions & 1 deletion packages/app-backend-core/src/timeline-marker.ts
Original file line number Diff line number Diff line change
@@ -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
}
Expand All @@ -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
}
Expand Down
9 changes: 9 additions & 0 deletions packages/app-backend-core/src/timeline.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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
Expand Down
30 changes: 30 additions & 0 deletions packages/app-frontend/src/features/timeline/Timeline.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
>
Expand Down Expand Up @@ -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>
2 changes: 2 additions & 0 deletions packages/shared-utils/src/shared-data.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ const internalSharedData = {
vuexAutoload: false,
vuexGroupGettersByModule: true,
showMenuScrollTip: true,
timelineRecording: false,
timelineTimeGrid: true,
timelineScreenshots: false,
menuStepScrolling: isMac,
Expand Down Expand Up @@ -49,6 +50,7 @@ const persisted = [
'vuexGroupGettersByModule',
'timeFormat',
'showMenuScrollTip',
'timelineRecording',
'timelineTimeGrid',
'timelineScreenshots',
'menuStepScrolling',
Expand Down

0 comments on commit bf5db9e

Please sign in to comment.