fix(timeline): correct time diff between Date.now & performance.now

Akryum · Akryum · commit e4592596d437 · 2022-03-14T15:37:22.000+01:00
diff --git a/packages/api/src/time.ts b/packages/api/src/time.ts
@@ -1,7 +1,7 @@
 let supported: boolean
 let perf: Performance
 
-function isSupported () {
+export function isPerformanceSupported () {
   if (supported !== undefined) {
     return supported
   }
@@ -15,5 +15,5 @@ function isSupported () {
 }
 
 export function now () {
-  return isSupported() ? perf.now() : Date.now()
+  return isPerformanceSupported() ? perf.now() : Date.now()
 }
diff --git a/packages/app-backend-core/src/timeline-marker.ts b/packages/app-backend-core/src/timeline-marker.ts
@@ -1,6 +1,7 @@
 import { BackendContext, TimelineMarker } from '@vue-devtools/app-backend-api'
 import { BridgeEvents } from '@vue-devtools/shared-utils'
-import { TimelineMarkerOptions } from '@vue/devtools-api'
+import { isPerformanceSupported, TimelineMarkerOptions } from '@vue/devtools-api'
+import { dateThreshold, perfTimeDiff } from './timeline'
 
 export async function addTimelineMarker (options: TimelineMarkerOptions, ctx: BackendContext) {
   if (!ctx.currentAppRecord) {
@@ -31,11 +32,15 @@ export async function sendTimelineMarkers (ctx: BackendContext) {
 }
 
 async function serializeMarker (marker: TimelineMarker) {
+  let time = marker.time
+  if (isPerformanceSupported() && time < dateThreshold) {
+    time += perfTimeDiff
+  }
   return {
     id: marker.id,
     appId: marker.appRecord?.id,
     all: marker.all,
-    time: Math.round(marker.time * 1000),
+    time: Math.round(time * 1000),
     label: marker.label,
     color: marker.color,
   }
diff --git a/packages/app-backend-core/src/timeline.ts b/packages/app-backend-core/src/timeline.ts
@@ -1,6 +1,6 @@
 import { BackendContext, AppRecord } from '@vue-devtools/app-backend-api'
 import { BridgeEvents, HookEvents, stringify, SharedData } from '@vue-devtools/shared-utils'
-import { App, ID, TimelineEventOptions, WithId, now } from '@vue/devtools-api'
+import { App, ID, TimelineEventOptions, WithId, now, isPerformanceSupported } from '@vue/devtools-api'
 import { hook } from './global-hook'
 import { getAppRecord, getAppRecordId } from './app'
 import { builtinLayers } from './timeline-builtins'
@@ -156,10 +156,18 @@ export async function addTimelineEvent (options: TimelineEventOptions, app: App,
   }
 }
 
+const initialTime = Date.now()
+export const dateThreshold = initialTime - 1_000_000
+export const perfTimeDiff = initialTime - now()
+
 function mapTimelineEvent (eventData: TimelineEventOptions & WithId) {
+  let time = eventData.event.time
+  if (isPerformanceSupported() && time < dateThreshold) {
+    time += perfTimeDiff
+  }
   return {
     id: eventData.id,
-    time: Math.round(eventData.event.time * 1000),
+    time: Math.round(time * 1000),
     logType: eventData.event.logType,
     groupId: eventData.event.groupId,
     title: eventData.event.title,
diff --git a/packages/app-frontend/src/features/timeline/composable/events.ts b/packages/app-frontend/src/features/timeline/composable/events.ts
@@ -83,7 +83,7 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
   }
 
   // Min time
-  if (minTime.value > event.time) {
+  if (minTime.value === -1_000_000 || minTime.value > event.time) {
     const stick = minTime.value === startTime.value
     minTime.value = event.time - 100_000
     if (stick) {
diff --git a/packages/app-frontend/src/features/timeline/composable/reset.ts b/packages/app-frontend/src/features/timeline/composable/reset.ts
@@ -53,10 +53,8 @@ export function resetTimeline (sync = true) {
 
 export function resetTime () {
   const now = 0
-  startTime.value = now - 1_000_000
-  endTime.value = now
-  minTime.value = now - 1_000_000
-  maxTime.value = now
+  minTime.value = startTime.value = now - 1_000_000
+  maxTime.value = endTime.value = now
 }
 
 export function onTimelineReset (cb: ResetCb) {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`let supported: boolean`
`2`	`2`	`let perf: Performance`
`3`	`3`
`4`		`-function isSupported () {`
	`4`	`+export function isPerformanceSupported () {`
`5`	`5`	`if (supported !== undefined) {`
`6`	`6`	`return supported`
`7`	`7`	`}`
`@@ -15,5 +15,5 @@ function isSupported () {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`export function now () {`
`18`		`- return isSupported() ? perf.now() : Date.now()`
	`18`	`+ return isPerformanceSupported() ? perf.now() : Date.now()`
`19`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -83,7 +83,7 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay`
`83`	`83`	`}`
`84`	`84`
`85`	`85`	`// Min time`
`86`		`- if (minTime.value > event.time) {`
	`86`	`+ if (minTime.value === -1_000_000 \|\| minTime.value > event.time) {`
`87`	`87`	`const stick = minTime.value === startTime.value`
`88`	`88`	`minTime.value = event.time - 100_000`
`89`	`89`	`if (stick) {`