feat(timeline): support higher time resolution

docs/plugin/api-reference.md

@@ -500,6 +500,14 @@ api.selectInspectorNode('test-inspector', 'some-node-id')
 
 ## Timeline
 
+### now
+
+Returns the current time with the maximum available precision.
+
+```js
+api.now()
+```
+
 ### addTimelineLayer
 
 Register a new timeline layer with this method. The options are:
@@ -539,7 +547,7 @@ Example:
 api.addTimelineEvent({
   layerId: 'test-layer',
   event: {
-    time: Date.now(),
+    time: api.now(),
     data: {
       info: 'window.keyup',
       key: event.key

docs/plugin/plugins-guide.md

@@ -1012,7 +1012,7 @@ window.addEventListener('click', event => {
   api.addTimelineEvent({
     layerId: timelineLayerId,
     event: {
-      time: Date.now(),
+      time: api.now(),
       data: {
         mouseX: event.clientX,
         mouseY: event.clientY
@@ -1046,7 +1046,7 @@ const groupId = 'group-1'
 devtoolsApi.addTimelineEvent({
   layerId: timelineLayerId,
   event: {
-    time: Date.now(),
+    time: api.now(),
     data: {
       label: 'group test'
     },
@@ -1058,7 +1058,7 @@ devtoolsApi.addTimelineEvent({
 devtoolsApi.addTimelineEvent({
   layerId: timelineLayerId,
   event: {
-    time: Date.now() + 10,
+    time: api.now() + 10,
     data: {
       label: 'group test (event 2)',
     },
@@ -1070,7 +1070,7 @@ devtoolsApi.addTimelineEvent({
 devtoolsApi.addTimelineEvent({
   layerId: timelineLayerId,
   event: {
-    time: Date.now() + 20,
+    time: api.now() + 20,
     data: {
       label: 'group test (event 3)',
     },
@@ -1182,7 +1182,7 @@ export function setupDevtools (app, data) {
       devtoolsApi.addTimelineEvent({
         layerId: timelineLayerId,
         event: {
-          time: Date.now(),
+          time: api.now(),
           data: {
             label
           },
@@ -1196,7 +1196,7 @@ export function setupDevtools (app, data) {
         devtoolsApi.addTimelineEvent({
           layerId: timelineLayerId,
           event: {
-            time: Date.now(),
+            time: api.now(),
             data: {
               label,
               done: true

packages/api/src/api/api.ts

@@ -19,6 +19,7 @@ export interface DevtoolsPluginApi<TSettings> {
   highlightElement (instance: ComponentInstance): void
   unhighlightElement (): void
   getSettings (pluginId?: string): TSettings
+  now (): number
   /**
    * @private Not implemented yet
    */

packages/app-backend-api/src/api.ts

@@ -27,6 +27,7 @@ import { BackendContext } from './backend-context'
 import { Plugin } from './plugin'
 import { DevtoolsBackend } from './backend'
 import { AppRecord } from './app-record'
+import { now } from './time.js'
 
 const pluginOn: DevtoolsHookable[] = []
 
@@ -244,6 +245,10 @@ export class DevtoolsApi {
       set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state)),
     })
   }
+
+  now () {
+    return now()
+  }
 }
 
 export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPluginApi<TSettings> {
@@ -354,6 +359,10 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
     setPluginSettings(pluginId ?? this.plugin.descriptor.id, value)
   }
 
+  now () {
+    return now()
+  }
+
   private get enabled () {
     return hasPluginPermission(this.plugin.descriptor.id, PluginPermission.ENABLED)
   }

packages/app-backend-api/src/index.ts

@@ -5,3 +5,4 @@ export * from './backend-context'
 export * from './global-hook'
 export * from './hooks'
 export * from './plugin'
+export * from './time'

packages/app-backend-api/src/time.ts

@@ -0,0 +1,19 @@
+let supported: boolean
+let perf: Performance
+
+function isSupported () {
+  if (supported !== undefined) {
+    return supported
+  }
+  if (typeof window !== 'undefined' && window.performance) {
+    supported = true
+    perf = window.performance
+  } else {
+    supported = false
+  }
+  return supported
+}
+
+export function now () {
+  return isSupported() ? perf.now() : Date.now()
+}

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

@@ -4,6 +4,7 @@ import {
   Plugin,
   BuiltinBackendFeature,
   AppRecord,
+  now,
 } from '@vue-devtools/app-backend-api'
 import {
   Bridge,
@@ -332,7 +333,7 @@ async function connect () {
   try {
     await addTimelineMarker({
       id: 'vue-devtools-init-backend',
-      time: Date.now(),
+      time: now(),
       label: 'Vue Devtools connected',
       color: 0x41B883,
       all: true,

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

@@ -21,6 +21,7 @@ export async function performanceMarkStart (
     const groupId = ctx.perfUniqueGroupId++
     const groupKey = `${uid}-${type}`
     appRecord.perfGroupIds.set(groupKey, { groupId, time })
+    console.log(time)
     await addTimelineEvent({
       layerId: 'performance',
       event: {

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

@@ -35,7 +35,7 @@ async function serializeMarker (marker: TimelineMarker) {
     id: marker.id,
     appId: marker.appRecord?.id,
     all: marker.all,
-    time: marker.time,
+    time: Math.round(marker.time * 1000),
     label: marker.label,
     color: marker.color,
   }

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

@@ -1,4 +1,4 @@
-import { BackendContext, AppRecord } from '@vue-devtools/app-backend-api'
+import { BackendContext, AppRecord, now } from '@vue-devtools/app-backend-api'
 import { BridgeEvents, HookEvents, stringify, SharedData } from '@vue-devtools/shared-utils'
 import { App, ID, TimelineEventOptions, WithId } from '@vue/devtools-api'
 import { hook } from './global-hook'
@@ -27,7 +27,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
       await addTimelineEvent({
         layerId: 'mouse',
         event: {
-          time: Date.now(),
+          time: now(),
           data: {
             type: eventType,
             x: event.clientX,
@@ -48,7 +48,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
       await addTimelineEvent({
         layerId: 'keyboard',
         event: {
-          time: Date.now(),
+          time: now(),
           data: {
             type: eventType,
             key: event.key,
@@ -77,7 +77,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
       await addTimelineEvent({
         layerId: 'component-event',
         event: {
-          time: Date.now(),
+          time: now(),
           data: {
             component: {
               _custom: {
@@ -159,7 +159,7 @@ export async function addTimelineEvent (options: TimelineEventOptions, app: App,
 function mapTimelineEvent (eventData: TimelineEventOptions & WithId) {
   return {
     id: eventData.id,
-    time: eventData.event.time,
+    time: Math.round(eventData.event.time * 1000),
     logType: eventData.event.logType,
     groupId: eventData.event.groupId,
     title: eventData.event.title,

packages/app-backend-vue3/src/components/data.ts

@@ -1,6 +1,6 @@
 import { BackendContext } from '@vue-devtools/app-backend-api'
 import { getInstanceName, getUniqueComponentId } from './util'
-import { camelize, StateEditor, SharedData, formattedValue } from '@vue-devtools/shared-utils'
+import { camelize, StateEditor, SharedData } from '@vue-devtools/shared-utils'
 import { ComponentInstance, CustomState, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
 import { returnError } from '../util'
 

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

@@ -118,7 +118,7 @@ export default defineComponent({
 
     const { cursorTime } = useCursor()
 
-    const formattedCursorTime = computed(() => cursorTime.value ? formatTime(cursorTime.value, 'ms') : null)
+    const formattedCursorTime = computed(() => cursorTime.value ? formatTime(cursorTime.value / 1000, 'ms') : null)
 
     // Screenshots
 

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

@@ -17,7 +17,7 @@ export default defineComponent({
   },
 
   setup (props) {
-    const time = computed(() => formatTime(props.event.time))
+    const time = computed(() => formatTime(props.event.time / 1000))
 
     const {
       inspectedEvent,

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

@@ -42,7 +42,7 @@ delete Renderer.__plugins.interaction
 
 const LAYER_SIZE = 16
 const GROUP_SIZE = 6
-const MIN_CAMERA_SIZE = 10
+const MIN_CAMERA_SIZE = 0.001
 
 // Micro tasks (higher = later)
 const taskPriority = {
@@ -959,10 +959,10 @@ export default defineComponent({
             if (event.subtitle) {
               text.push(event.subtitle)
             }
-            text.push(formatTime(event.time, 'ms'))
+            text.push(formatTime(event.time / 1000, 'ms'))
 
             if (event.group) {
-              text.push(`Group: ${event.group.nonReactiveDuration}ms (${event.group.events.length} event${event.group.events.length > 1 ? 's' : ''})`)
+              text.push(`Group: ${event.group.nonReactiveDuration / 1000}ms (${event.group.events.length} event${event.group.events.length > 1 ? 's' : ''})`)
             }
 
             if (event?.container) {
@@ -973,7 +973,7 @@ export default defineComponent({
             const marker = getMarkerAtPosition(mouseEvent.globalX)
             if (marker) {
               text.push(marker.label)
-              text.push(formatTime(marker.time, 'ms'))
+              text.push(formatTime(marker.time / 1000, 'ms'))
               text.push('(marker)')
             }
           }

packages/app-frontend/src/features/timeline/composable/events.ts

@@ -22,7 +22,7 @@ import { addGroupAroundPosition } from './layers'
 import { EventGroup } from '.'
 import { addNonReactiveProperties } from '@front/util/reactivity'
 
-const AUTOSCROLL_DURATION = 10000
+const AUTOSCROLL_DURATION = 10_000_000
 
 type AddEventCb = (event: TimelineEvent) => void
 
@@ -85,14 +85,14 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
   // Min time
   if (minTime.value > event.time) {
     const stick = minTime.value === startTime.value
-    minTime.value = event.time - 100
+    minTime.value = event.time - 100_000
     if (stick) {
       startTime.value = minTime.value
     }
   }
 
   // Update scrollbar
-  const scrollTime = event.time + 100
+  const scrollTime = event.time + 100_000
   if (scrollTime > maxTime.value) {
     if (endTime.value === maxTime.value) {
       if (startTime.value !== minTime.value) {
@@ -134,7 +134,7 @@ export function useInspectedEvent () {
   return {
     inspectedEvent,
     inspectedEventState: computed(() => inspectedEventData.value),
-    time: computed(() => formatTime(inspectedEvent.value.time, 'ms')),
+    time: computed(() => formatTime(inspectedEvent.value.time / 1000, 'ms')),
     loading: computed(() => inspectedEventPendingId.value != null),
   }
 }

packages/app-frontend/src/features/timeline/composable/layers.ts

@@ -124,8 +124,8 @@ export async function fetchLayers () {
 
 export function getGroupsAroundPosition (layer: Layer, startPosition: number, endPosition: number): EventGroup[] {
   const result = new Set<EventGroup>()
-  let key = Math.round(startPosition / 100)
-  const endKey = Math.round(endPosition / 100)
+  let key = Math.round(startPosition / 100_000)
+  const endKey = Math.round(endPosition / 100_000)
   while (key <= endKey) {
     const groups = layer.groupPositionCache[key]
     if (groups) {
@@ -139,8 +139,8 @@ export function getGroupsAroundPosition (layer: Layer, startPosition: number, en
 }
 
 export function addGroupAroundPosition (layer: Layer, group: EventGroup, newPosition: number) {
-  let key = Math.round(group.lastEvent.time / 100)
-  const endKey = Math.round(newPosition / 100)
+  let key = Math.round(group.lastEvent.time / 100_000)
+  const endKey = Math.round(newPosition / 100_000)
 
   while (key <= endKey) {
     let list = layer.groupPositionCache[key]

packages/app-frontend/src/features/timeline/composable/reset.ts

@@ -52,10 +52,10 @@ export function resetTimeline (sync = true) {
 }
 
 export function resetTime () {
-  const now = Date.now()
-  startTime.value = now - 1000
+  const now = 0
+  startTime.value = now - 1_000_000
   endTime.value = now
-  minTime.value = now - 1000
+  minTime.value = now - 1_000_000
   maxTime.value = now
 }
 

packages/app-frontend/src/features/timeline/composable/screenshot.ts

@@ -8,7 +8,7 @@ let nextScreenshotId = 0
 export async function takeScreenshot (event: TimelineEvent) {
   if (!SharedData.timelineScreenshots || event.layer.skipScreenshots) return
 
-  const time = Math.round(event.time / 100) * 100
+  const time = Math.round(event.time / 100_000) * 100_000
 
   const lastScreenshot = screenshots.value[screenshots.value.length - 1]
 

packages/shell-dev-vue3/src/devtools-plugin/index.js

@@ -151,7 +151,7 @@ export default {
       api.addTimelineEvent({
         layerId: 'test-layer',
         event: {
-          time: Date.now(),
+          time: api.now(),
           title: 'Early event',
           data: {},
         },
@@ -310,7 +310,7 @@ export default {
       devtoolsApi && devtoolsApi.addTimelineEvent({
         layerId: 'test-layer',
         event: {
-          time: Date.now(),
+          time: devtoolsApi.now(),
           data: {
             info: 'window.mouseup',
             x: event.clientX,
@@ -325,7 +325,7 @@ export default {
       devtoolsApi && devtoolsApi.addTimelineEvent({
         layerId: 'test-layer',
         event: {
-          time: Date.now(),
+          time: devtoolsApi.now(),
           data: {
             info: 'window.keyup',
             key: event.key,