Skip to content

Commit 32b4611

Browse files
AkryumAkryum
committed
feat(timeline): support higher time resolution
1 parent ccbd562 commit 32b4611

File tree

19 files changed

+76
-36
lines changed

19 files changed

+76
-36
lines changed

‎docs/plugin/api-reference.md

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,6 +500,14 @@ api.selectInspectorNode('test-inspector', 'some-node-id')
500500

501501
## Timeline
502502

503+
### now
504+
505+
Returns the current time with the maximum available precision.
506+
507+
```js
508+
api.now()
509+
```
510+
503511
### addTimelineLayer
504512

505513
Register a new timeline layer with this method. The options are:
@@ -539,7 +547,7 @@ Example:
539547
api.addTimelineEvent({
540548
layerId: 'test-layer',
541549
event: {
542-
time: Date.now(),
550+
time: api.now(),
543551
data: {
544552
info: 'window.keyup',
545553
key: event.key

‎docs/plugin/plugins-guide.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1012,7 +1012,7 @@ window.addEventListener('click', event => {
10121012
api.addTimelineEvent({
10131013
layerId: timelineLayerId,
10141014
event: {
1015-
time: Date.now(),
1015+
time: api.now(),
10161016
data: {
10171017
mouseX: event.clientX,
10181018
mouseY: event.clientY
@@ -1046,7 +1046,7 @@ const groupId = 'group-1'
10461046
devtoolsApi.addTimelineEvent({
10471047
layerId: timelineLayerId,
10481048
event: {
1049-
time: Date.now(),
1049+
time: api.now(),
10501050
data: {
10511051
label: 'group test'
10521052
},
@@ -1058,7 +1058,7 @@ devtoolsApi.addTimelineEvent({
10581058
devtoolsApi.addTimelineEvent({
10591059
layerId: timelineLayerId,
10601060
event: {
1061-
time: Date.now() + 10,
1061+
time: api.now() + 10,
10621062
data: {
10631063
label: 'group test (event 2)',
10641064
},
@@ -1070,7 +1070,7 @@ devtoolsApi.addTimelineEvent({
10701070
devtoolsApi.addTimelineEvent({
10711071
layerId: timelineLayerId,
10721072
event: {
1073-
time: Date.now() + 20,
1073+
time: api.now() + 20,
10741074
data: {
10751075
label: 'group test (event 3)',
10761076
},
@@ -1182,7 +1182,7 @@ export function setupDevtools (app, data) {
11821182
devtoolsApi.addTimelineEvent({
11831183
layerId: timelineLayerId,
11841184
event: {
1185-
time: Date.now(),
1185+
time: api.now(),
11861186
data: {
11871187
label
11881188
},
@@ -1196,7 +1196,7 @@ export function setupDevtools (app, data) {
11961196
devtoolsApi.addTimelineEvent({
11971197
layerId: timelineLayerId,
11981198
event: {
1199-
time: Date.now(),
1199+
time: api.now(),
12001200
data: {
12011201
label,
12021202
done: true

‎packages/api/src/api/api.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface DevtoolsPluginApi<TSettings> {
1919
highlightElement (instance: ComponentInstance): void
2020
unhighlightElement (): void
2121
getSettings (pluginId?: string): TSettings
22+
now (): number
2223
/**
2324
* @private Not implemented yet
2425
*/

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { BackendContext } from './backend-context'
2727
import { Plugin } from './plugin'
2828
import { DevtoolsBackend } from './backend'
2929
import { AppRecord } from './app-record'
30+
import { now } from './time.js'
3031

3132
const pluginOn: DevtoolsHookable[] = []
3233

@@ -244,6 +245,10 @@ export class DevtoolsApi {
244245
set: (object, path = arrayPath, value = state.value, cb?) => this.stateEditor.set(object, path, value, cb || this.stateEditor.createDefaultSetCallback(state)),
245246
})
246247
}
248+
249+
now () {
250+
return now()
251+
}
247252
}
248253

249254
export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPluginApi<TSettings> {
@@ -354,6 +359,10 @@ export class DevtoolsPluginApiInstance<TSettings = any> implements DevtoolsPlugi
354359
setPluginSettings(pluginId ?? this.plugin.descriptor.id, value)
355360
}
356361

362+
now () {
363+
return now()
364+
}
365+
357366
private get enabled () {
358367
return hasPluginPermission(this.plugin.descriptor.id, PluginPermission.ENABLED)
359368
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export * from './backend-context'
55
export * from './global-hook'
66
export * from './hooks'
77
export * from './plugin'
8+
export * from './time'

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
let supported: boolean
2+
let perf: Performance
3+
4+
function isSupported () {
5+
if (supported !== undefined) {
6+
return supported
7+
}
8+
if (typeof window !== 'undefined' && window.performance) {
9+
supported = true
10+
perf = window.performance
11+
} else {
12+
supported = false
13+
}
14+
return supported
15+
}
16+
17+
export function now () {
18+
return isSupported() ? perf.now() : Date.now()
19+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
Plugin,
55
BuiltinBackendFeature,
66
AppRecord,
7+
now,
78
} from '@vue-devtools/app-backend-api'
89
import {
910
Bridge,
@@ -332,7 +333,7 @@ async function connect () {
332333
try {
333334
await addTimelineMarker({
334335
id: 'vue-devtools-init-backend',
335-
time: Date.now(),
336+
time: now(),
336337
label: 'Vue Devtools connected',
337338
color: 0x41B883,
338339
all: true,

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export async function performanceMarkStart (
2121
const groupId = ctx.perfUniqueGroupId++
2222
const groupKey = `${uid}-${type}`
2323
appRecord.perfGroupIds.set(groupKey, { groupId, time })
24+
console.log(time)
2425
await addTimelineEvent({
2526
layerId: 'performance',
2627
event: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ async function serializeMarker (marker: TimelineMarker) {
3535
id: marker.id,
3636
appId: marker.appRecord?.id,
3737
all: marker.all,
38-
time: marker.time,
38+
time: Math.round(marker.time * 1000),
3939
label: marker.label,
4040
color: marker.color,
4141
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { BackendContext, AppRecord } from '@vue-devtools/app-backend-api'
1+
import { BackendContext, AppRecord, now } from '@vue-devtools/app-backend-api'
22
import { BridgeEvents, HookEvents, stringify, SharedData } from '@vue-devtools/shared-utils'
33
import { App, ID, TimelineEventOptions, WithId } from '@vue/devtools-api'
44
import { hook } from './global-hook'
@@ -27,7 +27,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
2727
await addTimelineEvent({
2828
layerId: 'mouse',
2929
event: {
30-
time: Date.now(),
30+
time: now(),
3131
data: {
3232
type: eventType,
3333
x: event.clientX,
@@ -48,7 +48,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
4848
await addTimelineEvent({
4949
layerId: 'keyboard',
5050
event: {
51-
time: Date.now(),
51+
time: now(),
5252
data: {
5353
type: eventType,
5454
key: event.key,
@@ -77,7 +77,7 @@ function setupBuiltinLayers (ctx: BackendContext) {
7777
await addTimelineEvent({
7878
layerId: 'component-event',
7979
event: {
80-
time: Date.now(),
80+
time: now(),
8181
data: {
8282
component: {
8383
_custom: {
@@ -159,7 +159,7 @@ export async function addTimelineEvent (options: TimelineEventOptions, app: App,
159159
function mapTimelineEvent (eventData: TimelineEventOptions & WithId) {
160160
return {
161161
id: eventData.id,
162-
time: eventData.event.time,
162+
time: Math.round(eventData.event.time * 1000),
163163
logType: eventData.event.logType,
164164
groupId: eventData.event.groupId,
165165
title: eventData.event.title,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { BackendContext } from '@vue-devtools/app-backend-api'
22
import { getInstanceName, getUniqueComponentId } from './util'
3-
import { camelize, StateEditor, SharedData, formattedValue } from '@vue-devtools/shared-utils'
3+
import { camelize, StateEditor, SharedData } from '@vue-devtools/shared-utils'
44
import { ComponentInstance, CustomState, HookPayloads, Hooks, InspectedComponentData } from '@vue/devtools-api'
55
import { returnError } from '../util'
66

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default defineComponent({
118118
119119
const { cursorTime } = useCursor()
120120
121-
const formattedCursorTime = computed(() => cursorTime.value ? formatTime(cursorTime.value, 'ms') : null)
121+
const formattedCursorTime = computed(() => cursorTime.value ? formatTime(cursorTime.value / 1000, 'ms') : null)
122122
123123
// Screenshots
124124

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default defineComponent({
1717
},
1818
1919
setup (props) {
20-
const time = computed(() => formatTime(props.event.time))
20+
const time = computed(() => formatTime(props.event.time / 1000))
2121
2222
const {
2323
inspectedEvent,

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ delete Renderer.__plugins.interaction
4242
4343
const LAYER_SIZE = 16
4444
const GROUP_SIZE = 6
45-
const MIN_CAMERA_SIZE = 10
45+
const MIN_CAMERA_SIZE = 0.001
4646
4747
// Micro tasks (higher = later)
4848
const taskPriority = {
@@ -959,10 +959,10 @@ export default defineComponent({
959959
if (event.subtitle) {
960960
text.push(event.subtitle)
961961
}
962-
text.push(formatTime(event.time, 'ms'))
962+
text.push(formatTime(event.time / 1000, 'ms'))
963963
964964
if (event.group) {
965-
text.push(`Group: ${event.group.nonReactiveDuration}ms (${event.group.events.length} event${event.group.events.length > 1 ? 's' : ''})`)
965+
text.push(`Group: ${event.group.nonReactiveDuration / 1000}ms (${event.group.events.length} event${event.group.events.length > 1 ? 's' : ''})`)
966966
}
967967
968968
if (event?.container) {
@@ -973,7 +973,7 @@ export default defineComponent({
973973
const marker = getMarkerAtPosition(mouseEvent.globalX)
974974
if (marker) {
975975
text.push(marker.label)
976-
text.push(formatTime(marker.time, 'ms'))
976+
text.push(formatTime(marker.time / 1000, 'ms'))
977977
text.push('(marker)')
978978
}
979979
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { addGroupAroundPosition } from './layers'
2222
import { EventGroup } from '.'
2323
import { addNonReactiveProperties } from '@front/util/reactivity'
2424

25-
const AUTOSCROLL_DURATION = 10000
25+
const AUTOSCROLL_DURATION = 10_000_000
2626

2727
type AddEventCb = (event: TimelineEvent) => void
2828

@@ -85,14 +85,14 @@ export function addEvent (appId: string, eventOptions: TimelineEvent, layer: Lay
8585
// Min time
8686
if (minTime.value > event.time) {
8787
const stick = minTime.value === startTime.value
88-
minTime.value = event.time - 100
88+
minTime.value = event.time - 100_000
8989
if (stick) {
9090
startTime.value = minTime.value
9191
}
9292
}
9393

9494
// Update scrollbar
95-
const scrollTime = event.time + 100
95+
const scrollTime = event.time + 100_000
9696
if (scrollTime > maxTime.value) {
9797
if (endTime.value === maxTime.value) {
9898
if (startTime.value !== minTime.value) {
@@ -134,7 +134,7 @@ export function useInspectedEvent () {
134134
return {
135135
inspectedEvent,
136136
inspectedEventState: computed(() => inspectedEventData.value),
137-
time: computed(() => formatTime(inspectedEvent.value.time, 'ms')),
137+
time: computed(() => formatTime(inspectedEvent.value.time / 1000, 'ms')),
138138
loading: computed(() => inspectedEventPendingId.value != null),
139139
}
140140
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,8 @@ export async function fetchLayers () {
124124

125125
export function getGroupsAroundPosition (layer: Layer, startPosition: number, endPosition: number): EventGroup[] {
126126
const result = new Set<EventGroup>()
127-
let key = Math.round(startPosition / 100)
128-
const endKey = Math.round(endPosition / 100)
127+
let key = Math.round(startPosition / 100_000)
128+
const endKey = Math.round(endPosition / 100_000)
129129
while (key <= endKey) {
130130
const groups = layer.groupPositionCache[key]
131131
if (groups) {
@@ -139,8 +139,8 @@ export function getGroupsAroundPosition (layer: Layer, startPosition: number, en
139139
}
140140

141141
export function addGroupAroundPosition (layer: Layer, group: EventGroup, newPosition: number) {
142-
let key = Math.round(group.lastEvent.time / 100)
143-
const endKey = Math.round(newPosition / 100)
142+
let key = Math.round(group.lastEvent.time / 100_000)
143+
const endKey = Math.round(newPosition / 100_000)
144144

145145
while (key <= endKey) {
146146
let list = layer.groupPositionCache[key]

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export function resetTimeline (sync = true) {
5252
}
5353

5454
export function resetTime () {
55-
const now = Date.now()
56-
startTime.value = now - 1000
55+
const now = 0
56+
startTime.value = now - 1_000_000
5757
endTime.value = now
58-
minTime.value = now - 1000
58+
minTime.value = now - 1_000_000
5959
maxTime.value = now
6060
}
6161

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ let nextScreenshotId = 0
88
export async function takeScreenshot (event: TimelineEvent) {
99
if (!SharedData.timelineScreenshots || event.layer.skipScreenshots) return
1010

11-
const time = Math.round(event.time / 100) * 100
11+
const time = Math.round(event.time / 100_000) * 100_000
1212

1313
const lastScreenshot = screenshots.value[screenshots.value.length - 1]
1414

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export default {
151151
api.addTimelineEvent({
152152
layerId: 'test-layer',
153153
event: {
154-
time: Date.now(),
154+
time: api.now(),
155155
title: 'Early event',
156156
data: {},
157157
},
@@ -310,7 +310,7 @@ export default {
310310
devtoolsApi && devtoolsApi.addTimelineEvent({
311311
layerId: 'test-layer',
312312
event: {
313-
time: Date.now(),
313+
time: devtoolsApi.now(),
314314
data: {
315315
info: 'window.mouseup',
316316
x: event.clientX,
@@ -325,7 +325,7 @@ export default {
325325
devtoolsApi && devtoolsApi.addTimelineEvent({
326326
layerId: 'test-layer',
327327
event: {
328-
time: Date.now(),
328+
time: devtoolsApi.now(),
329329
data: {
330330
info: 'window.keyup',
331331
key: event.key,

0 commit comments

Comments
 (0)