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

Author: Akryum

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()
 }

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,
   }

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,

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) {

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) {