chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/models/trace/handlers/ExtensionTraceDataHandler.ts

@@ -8,15 +8,20 @@ import * as Types from '../types/types.js';
 import type {HandlerName} from './types.js';
 import {data as userTimingsData} from './UserTimingsHandler.js';
 
-const extensionFlameChartEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
+const extensionTrackEntries: Types.Extensions.SyntheticExtensionTrackEntry[] = [];
 const extensionTrackData: Types.Extensions.ExtensionTrackData[] = [];
 const extensionMarkers: Types.Extensions.SyntheticExtensionMarker[] = [];
 const entryToNode: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode> = new Map();
+const timeStampByName: Map<string, Types.Events.ConsoleTimeStamp> = new Map();
+
+const syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[] = [];
 
 export interface ExtensionTraceData {
   extensionTrackData: readonly Types.Extensions.ExtensionTrackData[];
   extensionMarkers: readonly Types.Extensions.SyntheticExtensionMarker[];
+  // TODO(andoli): Can we augment Renderer's entryToNode instead? To avoid the split of TimelineUIUtils's getEventSelfTime()?
   entryToNode: Map<Types.Events.Event, Helpers.TreeHelpers.TraceEntryNode>;
+  syntheticConsoleEntriesForTimingsTrack: Types.Events.SyntheticConsoleTimeStamp[];
 }
 
 export function handleEvent(_event: Types.Events.Event): void {
@@ -24,10 +29,12 @@ export function handleEvent(_event: Types.Events.Event): void {
 }
 
 export function reset(): void {
-  extensionFlameChartEntries.length = 0;
+  extensionTrackEntries.length = 0;
+  syntheticConsoleEntriesForTimingsTrack.length = 0;
   extensionTrackData.length = 0;
   extensionMarkers.length = 0;
   entryToNode.clear();
+  timeStampByName.clear();
 }
 
 export async function finalize(): Promise<void> {
@@ -39,14 +46,130 @@ function createExtensionFlameChartEntries(): void {
   const marks: readonly Types.Events.PerformanceMark[] = userTimingsData().performanceMarks;
   const mergedRawExtensionEvents = Helpers.Trace.mergeEventsInOrder(pairedMeasures, marks);
 
-  extractExtensionEntries(mergedRawExtensionEvents);
-  Helpers.Extensions.buildTrackDataFromExtensionEntries(extensionFlameChartEntries, extensionTrackData, entryToNode);
+  extractPerformanceAPIExtensionEntries(mergedRawExtensionEvents);
+  extractConsoleAPIExtensionEntries();
+  // extensionTrackEntries is filled by the above two calls.
+  Helpers.Trace.sortTraceEventsInPlace(extensionTrackEntries);
+  Helpers.Extensions.buildTrackDataFromExtensionEntries(extensionTrackEntries, extensionTrackData, entryToNode);
 }
 
-export function extractExtensionEntries(timings: (Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark)[]):
-    void {
+/**
+ * Extracts extension entries from console.timeStamp events.
+ *
+ * Entries are built by pairing `console.timeStamp` events based on
+ * their names. When a `console.timeStamp` event includes a `start`
+ * argument (and optionally an `end` argument), it attempts to find
+ * previously recorded `console.timeStamp` events with names matching
+ * the `start` and `end` values. These matching events are then used to
+ * determine the start and end times of the new entry.
+ *
+ * If a `console.timeStamp` event includes data for a custom track
+ * (specified by the `track` argument), an extension track entry is
+ * created and added to the `extensionTrackEntries` array. These entries
+ * are used to visualize custom tracks in the Performance panel.
+ *
+ * If a `console.timeStamp` event includes data for a custom track
+ * (specified by the `track` argument), an extension track entry is
+ * created and added to the `extensionTrackEntries` array. These entries
+ * are used to visualize custom tracks in the Performance panel.
+ *
+ * If a `console.timeStamp` event does not specify a custom track but
+ * includes a start and/or end time (referencing other
+ * `console.timeStamp` names), a synthetic console time stamp entry is
+ * created and added to the `syntheticConsoleEntriesForTimingsTrack`
+ * array. These entries are displayed in the "Timings" track.
+ */
+export function extractConsoleAPIExtensionEntries(): void {
+  const consoleTimeStamps: readonly Types.Events.ConsoleTimeStamp[] = userTimingsData().timestampEvents;
+  for (const currentTimeStamp of consoleTimeStamps) {
+    if (!currentTimeStamp.args.data) {
+      continue;
+    }
+    const timeStampName = String(currentTimeStamp.args.data.name);
+    timeStampByName.set(timeStampName, currentTimeStamp);
+    const extensionData = extensionDataInConsoleTimeStamp(currentTimeStamp);
+    const startName = currentTimeStamp.args.data.start;
+    const endName = currentTimeStamp.args.data.end;
+    if (!extensionData && !startName && !endName) {
+      continue;
+    }
+    const startTimeStamp = startName ? timeStampByName.get(String(startName)) : undefined;
+    const endTimeStamp = endName ? timeStampByName.get(String(endName)) : undefined;
+    if (endTimeStamp && !startTimeStamp) {
+      // Invalid data
+      continue;
+    }
+    const entryStartTime = startTimeStamp?.ts ?? currentTimeStamp.ts;
+    const entryEndTime = endTimeStamp?.ts ?? currentTimeStamp.ts;
+    if (extensionData) {
+      const unregisteredExtensionEntry: Omit<Types.Extensions.SyntheticExtensionTrackEntry, '_tag'> = {
+        ...currentTimeStamp,
+        name: timeStampName,
+        cat: 'devtools.extension',
+        args: extensionData,
+        rawSourceEvent: currentTimeStamp,
+        dur: Types.Timing.Micro(entryEndTime - entryStartTime),
+        ts: entryStartTime,
+      };
+      const extensionEntry =
+          Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager()
+              .registerSyntheticEvent<Types.Extensions.SyntheticExtensionTrackEntry>(unregisteredExtensionEntry);
+      extensionTrackEntries.push(extensionEntry);
+      continue;
+    }
+    // If no extension data is found in the entry (no custom track name
+    // was passed), but the entry has a duration. we still save it here
+    // to be added in the timings track. Note that timings w/o duration
+    // and extension data are already handled by the UserTimingsHandler.
+    const unregisteredSyntheticTimeStamp: Omit<Types.Events.SyntheticConsoleTimeStamp, '_tag'> = {
+      ...currentTimeStamp,
+      name: timeStampName,
+      cat: 'disabled-by-default-v8.inspector',
+      ph: Types.Events.Phase.COMPLETE,
+      ts: entryStartTime,
+      dur: Types.Timing.Micro(entryEndTime - entryStartTime),
+      rawSourceEvent: currentTimeStamp
+    };
+    const syntheticTimeStamp =
+        Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager()
+            .registerSyntheticEvent<Types.Events.SyntheticConsoleTimeStamp>(unregisteredSyntheticTimeStamp);
+    syntheticConsoleEntriesForTimingsTrack.push(syntheticTimeStamp);
+  }
+}
+
+/**
+ * Extracts extension entries from Performance API events (marks and
+ * measures).
+ * It specifically looks for events that contain extension-specific data
+ * within their `detail` property.
+ *
+ * If an event's `detail` property can be parsed as a JSON object and
+ * contains a `devtools` field with a valid extension payload, a
+ * synthetic extension entry is created. The type of extension entry
+ * created depends on the payload:
+ *
+ * - If the payload conforms to `ExtensionPayloadMarker`, a
+ *   `SyntheticExtensionMarker` is created and added to the
+ *   `extensionMarkers` array. These markers represent single points in
+ *   time.
+ * - If the payload conforms to `ExtensionPayloadTrackEntry`, a
+ *   `SyntheticExtensionTrackEntry` is created and added to the
+ *   `extensionTrackEntries` array. These entries represent events with
+ *   a duration and are displayed on custom tracks in the Performance
+ *   panel.
+ *
+ * **Note:** Only events with a `detail` property that contains valid
+ * extension data are processed. Other `performance.mark` and
+ * `performance.measure` events are ignored.
+ *
+ * @param timings An array of `SyntheticUserTimingPair` or
+ *                `PerformanceMark` events, typically obtained from the
+ *                `UserTimingsHandler`.
+ */
+export function extractPerformanceAPIExtensionEntries(
+    timings: (Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark)[]): void {
   for (const timing of timings) {
-    const extensionPayload = extensionDataInTiming(timing);
+    const extensionPayload = extensionDataInPerformanceTiming(timing);
     if (!extensionPayload) {
       // Not an extension user timing.
       continue;
@@ -54,11 +177,12 @@ export function extractExtensionEntries(timings: (Types.Events.SyntheticUserTimi
 
     const extensionSyntheticEntry = {
       name: timing.name,
-      ph: Types.Events.Phase.COMPLETE,
+      ph: Types.Extensions.isExtensionPayloadMarker(extensionPayload) ? Types.Events.Phase.INSTANT :
+                                                                        Types.Events.Phase.COMPLETE,
       pid: timing.pid,
       tid: timing.tid,
       ts: timing.ts,
-      dur: timing.dur as Types.Timing.MicroSeconds,
+      dur: timing.dur as Types.Timing.Micro,
       cat: 'devtools.extension',
       args: extensionPayload,
       rawSourceEvent: Types.Events.isSyntheticUserTiming(timing) ? timing.rawSourceEvent : timing,
@@ -78,14 +202,15 @@ export function extractExtensionEntries(timings: (Types.Events.SyntheticUserTimi
           Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager()
               .registerSyntheticEvent<Types.Extensions.SyntheticExtensionTrackEntry>(
                   extensionSyntheticEntry as Omit<Types.Extensions.SyntheticExtensionTrackEntry, '_tag'>);
-      extensionFlameChartEntries.push(extensionTrackEntry);
+      extensionTrackEntries.push(extensionTrackEntry);
       continue;
     }
   }
 }
 
-export function extensionDataInTiming(timing: Types.Events.SyntheticUserTimingPair|
-                                      Types.Events.PerformanceMark): Types.Extensions.ExtensionDataPayload|null {
+export function extensionDataInPerformanceTiming(
+    timing: Types.Events.SyntheticUserTimingPair|Types.Events.PerformanceMark): Types.Extensions.ExtensionDataPayload|
+    null {
   const timingDetail =
       Types.Events.isPerformanceMark(timing) ? timing.args.data?.detail : timing.args.data.beginEvent.args.detail;
   if (!timingDetail) {
@@ -106,18 +231,58 @@ export function extensionDataInTiming(timing: Types.Events.SyntheticUserTimingPa
       return null;
     }
     return detailObj.devtools;
-  } catch (e) {
+  } catch {
     // No need to worry about this error, just discard this event and don't
     // treat it as having any useful information for the purposes of extensions
     return null;
   }
 }
+/**
+ * Extracts extension data from a `console.timeStamp` event.
+ *
+ * Checks if a `console.timeStamp` event contains data intended for
+ * creating a custom track entry in the DevTools Performance panel. It
+ * specifically looks for a `track` argument within the event's data.
+ *
+ * If a `track` argument is present (and not an empty string), the
+ * function constructs an `ExtensionTrackEntryPayload` object containing
+ * the track name, an optional color, an optional track group. This
+ * payload is then used to create a `SyntheticExtensionTrackEntry`.
+ *
+ * **Note:** The `color` argument is optional and its type is validated
+ * against a predefined palette (see
+ * `ExtensionUI::extensionEntryColor`).
+ *
+ * @param timeStamp The `ConsoleTimeStamp` event to extract data from.
+ * @return An `ExtensionTrackEntryPayload` object if the event contains
+ *         valid extension data for a track entry, or `null` otherwise.
+ */
+export function extensionDataInConsoleTimeStamp(timeStamp: Types.Events.ConsoleTimeStamp):
+    Types.Extensions.ExtensionTrackEntryPayload|null {
+  if (!timeStamp.args.data) {
+    return null;
+  }
+  const trackName = timeStamp.args.data.track;
+  if (trackName === '' || trackName === undefined) {
+    return null;
+  }
+  return {
+    // the color is defaulted to primary if it's value isn't one from
+    // the defined palette (see ExtensionUI::extensionEntryColor) so
+    // we don't need to check the value is valid here.
+    color: String(timeStamp.args.data.color) as Types.Extensions.ExtensionTrackEntryPayload['color'],
+    track: String(trackName),
+    dataType: 'track-entry',
+    trackGroup: timeStamp.args.data.trackGroup !== undefined ? String(timeStamp.args.data.trackGroup) : undefined
+  };
+}
 
 export function data(): ExtensionTraceData {
   return {
     entryToNode,
-    extensionTrackData: [...extensionTrackData],
-    extensionMarkers: [...extensionMarkers],
+    extensionTrackData,
+    extensionMarkers,
+    syntheticConsoleEntriesForTimingsTrack,
   };
 }
 

package/front_end/models/trace/handlers/FlowsHandler.ts

@@ -26,12 +26,12 @@ import * as Types from '../types/types.js';
 // there are any corresponding flow phase events at all).
 const flowDataByGroupToken = new Map<string, number>();
 
-type EventFlowData = {
-  flows: Set<number>,
-  bindingParsed: boolean,
-};
+interface EventFlowData {
+  flows: Set<number>;
+  bindingParsed: boolean;
+}
 type FlowBindingTuple =
-    Map<Types.Timing.MicroSeconds, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;
+    Map<Types.Timing.Micro, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;
 
 // Given a trace event's flow binding tuple (timestamp, process id,
 // thread id and category) we determine if there is any flow data bound
@@ -45,7 +45,7 @@ type FlowBindingTuple =
 // performance.
 const boundFlowData: FlowBindingTuple = new Map();
 
-const flowsById = new Map<number, Map<Types.Timing.MicroSeconds, Types.Events.Event>>();
+const flowsById = new Map<number, Map<Types.Timing.Micro, Types.Events.Event>>();
 const flowEvents: Types.Events.FlowEvent[] = [];
 const nonFlowEvents: Types.Events.Event[] = [];
 let flows: Types.Events.Event[][] = [];
@@ -79,7 +79,7 @@ function processNonFlowEvent(event: Types.Events.Event): void {
   }
   for (const flowId of flows) {
     const flow = Platform.MapUtilities.getWithDefault(
-        flowsById, flowId, () => new Map<Types.Timing.MicroSeconds, Types.Events.Event>());
+        flowsById, flowId, () => new Map<Types.Timing.Micro, Types.Events.Event>());
     flow.set(event.ts, event);
   }
   flowDataForEvent.bindingParsed = true;
@@ -132,9 +132,8 @@ type MapValueType<T extends Map<unknown, unknown>> = NonNullable<ReturnType<T['g
  * binding tuple (made of its ts, pid, tid and cat).
  */
 function addFlowIdToEventBinding(event: Types.Events.Event, flowId: number): void {
-  const flowsByPid =
-      Platform.MapUtilities.getWithDefault<Types.Timing.MicroSeconds, MapValueType<typeof boundFlowData>>(
-          boundFlowData, event.ts, () => new Map());
+  const flowsByPid = Platform.MapUtilities.getWithDefault<Types.Timing.Micro, MapValueType<typeof boundFlowData>>(
+      boundFlowData, event.ts, () => new Map());
   const flowsByTid = Platform.MapUtilities.getWithDefault<Types.Events.ProcessID, MapValueType<typeof flowsByPid>>(
       flowsByPid, event.pid, () => new Map());
   const flowsByCat = Platform.MapUtilities.getWithDefault<Types.Events.ThreadID, MapValueType<typeof flowsByTid>>(

package/front_end/models/trace/handlers/FramesHandler.test.ts

@@ -90,8 +90,8 @@ describeWithMockConnection('FramesHandler', () => {
     const parsedFrames = Trace.Handlers.ModelHandlers.Frames.data().frames;
     assert.lengthOf(parsedFrames, 18);
 
-    const startTime = Trace.Types.Timing.MicroSeconds(parsedFrames[0].startTime);
-    const endTime = Trace.Types.Timing.MicroSeconds(parsedFrames[3].endTime);
+    const startTime = Trace.Types.Timing.Micro(parsedFrames[0].startTime);
+    const endTime = Trace.Types.Timing.Micro(parsedFrames[3].endTime);
     const framesWithinWindow = Trace.Handlers.ModelHandlers.Frames.framesWithinWindow(parsedFrames, startTime, endTime);
     assert.deepEqual(framesWithinWindow, [
       parsedFrames[0],
@@ -112,9 +112,9 @@ describe('FramesHandler', () => {
 
   it('visualizes zero frames when no BeginFrame in queue matches DrawFrame', () => {
     const beginFrameQueue = new Trace.Handlers.ModelHandlers.Frames.TimelineFrameBeginFrameQueue();
-    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.MicroSeconds(1000000), false, false);
-    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.MicroSeconds(1000016), false, false);
-    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.MicroSeconds(1000032), false, false);
+    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.Micro(1000000), false, false);
+    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.Micro(1000016), false, false);
+    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.Micro(1000032), false, false);
     const framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(103);
 
     assert.isEmpty(framesToVisualize);
@@ -122,11 +122,10 @@ describe('FramesHandler', () => {
 
   it('ignores BeginFrames without corresponding DrawFrames', () => {
     const beginFrameQueue = new Trace.Handlers.ModelHandlers.Frames.TimelineFrameBeginFrameQueue();
-    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.MicroSeconds(1000000), false, false);
-    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.MicroSeconds(1000016), false, false);
-    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.MicroSeconds(1000032), false, false);
-    beginFrameQueue.addFrameIfNotExists(
-        103, Trace.Types.Timing.MicroSeconds(Trace.Types.Timing.MicroSeconds(1000048)), false, false);
+    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.Micro(1000000), false, false);
+    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.Micro(1000016), false, false);
+    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.Micro(1000032), false, false);
+    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.Micro(Trace.Types.Timing.Micro(1000048)), false, false);
 
     const framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(102);
 
@@ -136,18 +135,18 @@ describe('FramesHandler', () => {
     assert.lengthOf(framesToVisualize, 1);
     assert.isFalse(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 102);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000032));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000032));
   });
 
   it('visualizes dropped BeginFrames before a presented frame', () => {
     const beginFrameQueue = new Trace.Handlers.ModelHandlers.Frames.TimelineFrameBeginFrameQueue();
-    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.MicroSeconds(1000000), false, false);
-    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.MicroSeconds(1000016), true, false);
-    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.MicroSeconds(1000032), false, false);
-    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.MicroSeconds(1000048), true, false);
-    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.MicroSeconds(1000064), false, false);
-    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.MicroSeconds(1000080), false, false);
-    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.MicroSeconds(1000096), false, false);
+    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.Micro(1000000), false, false);
+    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.Micro(1000016), true, false);
+    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.Micro(1000032), false, false);
+    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.Micro(1000048), true, false);
+    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.Micro(1000064), false, false);
+    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.Micro(1000080), false, false);
+    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.Micro(1000096), false, false);
 
     const framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(105);
 
@@ -158,27 +157,27 @@ describe('FramesHandler', () => {
 
     assert.isTrue(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 101);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000016));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000016));
 
     assert.isTrue(framesToVisualize[1].isDropped);
     assert.strictEqual(framesToVisualize[1].seqId, 103);
-    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.MicroSeconds(1000048));
+    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.Micro(1000048));
 
     assert.isFalse(framesToVisualize[2].isDropped);
     assert.strictEqual(framesToVisualize[2].seqId, 105);
-    assert.strictEqual(framesToVisualize[2].startTime, Trace.Types.Timing.MicroSeconds(1000080));
+    assert.strictEqual(framesToVisualize[2].startTime, Trace.Types.Timing.Micro(1000080));
   });
 
   it('changes dropped status of specified frames via setDropped()', () => {
     const beginFrameQueue = new Trace.Handlers.ModelHandlers.Frames.TimelineFrameBeginFrameQueue();
-    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.MicroSeconds(1000000), false, false);
+    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.Micro(1000000), false, false);
     beginFrameQueue.setDropped(100, true);
-    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.MicroSeconds(1000016), true, false);
-    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.MicroSeconds(1000032), false, false);
-    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.MicroSeconds(1000048), true, false);
-    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.MicroSeconds(1000064), false, false);
-    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.MicroSeconds(1000080), false, false);
-    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.MicroSeconds(1000096), true, false);
+    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.Micro(1000016), true, false);
+    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.Micro(1000032), false, false);
+    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.Micro(1000048), true, false);
+    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.Micro(1000064), false, false);
+    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.Micro(1000080), false, false);
+    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.Micro(1000096), true, false);
     beginFrameQueue.setDropped(101, false);
 
     const framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(105);
@@ -190,26 +189,26 @@ describe('FramesHandler', () => {
 
     assert.isTrue(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 100);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000000));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000000));
 
     assert.isTrue(framesToVisualize[1].isDropped);
     assert.strictEqual(framesToVisualize[1].seqId, 103);
-    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.MicroSeconds(1000048));
+    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.Micro(1000048));
 
     assert.isFalse(framesToVisualize[2].isDropped);
     assert.strictEqual(framesToVisualize[2].seqId, 105);
-    assert.strictEqual(framesToVisualize[2].startTime, Trace.Types.Timing.MicroSeconds(1000080));
+    assert.strictEqual(framesToVisualize[2].startTime, Trace.Types.Timing.Micro(1000080));
   });
 
   it('pops processed frames out of the queue', () => {
     const beginFrameQueue = new Trace.Handlers.ModelHandlers.Frames.TimelineFrameBeginFrameQueue();
-    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.MicroSeconds(1000000), true, false);
-    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.MicroSeconds(1000016), false, false);
-    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.MicroSeconds(1000032), false, false);
-    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.MicroSeconds(1000048), true, false);
-    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.MicroSeconds(1000064), false, false);
-    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.MicroSeconds(1000080), true, false);
-    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.MicroSeconds(1000096), true, false);
+    beginFrameQueue.addFrameIfNotExists(100, Trace.Types.Timing.Micro(1000000), true, false);
+    beginFrameQueue.addFrameIfNotExists(101, Trace.Types.Timing.Micro(1000016), false, false);
+    beginFrameQueue.addFrameIfNotExists(102, Trace.Types.Timing.Micro(1000032), false, false);
+    beginFrameQueue.addFrameIfNotExists(103, Trace.Types.Timing.Micro(1000048), true, false);
+    beginFrameQueue.addFrameIfNotExists(104, Trace.Types.Timing.Micro(1000064), false, false);
+    beginFrameQueue.addFrameIfNotExists(105, Trace.Types.Timing.Micro(1000080), true, false);
+    beginFrameQueue.addFrameIfNotExists(106, Trace.Types.Timing.Micro(1000096), true, false);
 
     // Pop frame 100, 101 (not visualized) and 102 from queue.
     let framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(102);
@@ -218,11 +217,11 @@ describe('FramesHandler', () => {
 
     assert.isTrue(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 100);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000000));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000000));
 
     assert.isFalse(framesToVisualize[1].isDropped);
     assert.strictEqual(framesToVisualize[1].seqId, 102);
-    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.MicroSeconds(1000032));
+    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.Micro(1000032));
 
     // Pop frame 103, 104 (not visualized) and 105 from queue
     framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(105);
@@ -231,11 +230,11 @@ describe('FramesHandler', () => {
 
     assert.isTrue(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 103);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000048));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000048));
 
     assert.isTrue(framesToVisualize[1].isDropped);
     assert.strictEqual(framesToVisualize[1].seqId, 105);
-    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.MicroSeconds(1000080));
+    assert.strictEqual(framesToVisualize[1].startTime, Trace.Types.Timing.Micro(1000080));
 
     // Pop frame 106 from queue
     framesToVisualize = beginFrameQueue.processPendingBeginFramesOnDrawFrame(106);
@@ -244,6 +243,6 @@ describe('FramesHandler', () => {
 
     assert.isTrue(framesToVisualize[0].isDropped);
     assert.strictEqual(framesToVisualize[0].seqId, 106);
-    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.MicroSeconds(1000096));
+    assert.strictEqual(framesToVisualize[0].startTime, Trace.Types.Timing.Micro(1000096));
   });
 });

package/front_end/models/trace/handlers/FramesHandler.ts

@@ -102,7 +102,7 @@ export class TimelineFrameModel {
   #framePendingCommit: PendingFrame|null = null;
   #lastBeginFrame: number|null = null;
   #lastNeedsBeginFrame: number|null = null;
-  #lastTaskBeginTime: Types.Timing.MicroSeconds|null = null;
+  #lastTaskBeginTime: Types.Timing.Micro|null = null;
   #layerTreeId: number|null = null;
   #activeProcessId: Types.Events.ProcessID|null = null;
   #activeThreadId: Types.Events.ThreadID|null = null;
@@ -137,7 +137,7 @@ export class TimelineFrameModel {
     return this.#frames;
   }
 
-  #handleBeginFrame(startTime: Types.Timing.MicroSeconds, seqId: number): void {
+  #handleBeginFrame(startTime: Types.Timing.Micro, seqId: number): void {
     if (!this.#lastFrame) {
       this.#startFrame(startTime, seqId);
     }
@@ -146,7 +146,7 @@ export class TimelineFrameModel {
     this.#beginFrameQueue.addFrameIfNotExists(seqId, startTime, false, false);
   }
 
-  #handleDroppedFrame(startTime: Types.Timing.MicroSeconds, seqId: number, isPartial: boolean): void {
+  #handleDroppedFrame(startTime: Types.Timing.Micro, seqId: number, isPartial: boolean): void {
     if (!this.#lastFrame) {
       this.#startFrame(startTime, seqId);
     }
@@ -159,7 +159,7 @@ export class TimelineFrameModel {
     this.#beginFrameQueue.setPartial(seqId, isPartial);
   }
 
-  #handleDrawFrame(startTime: Types.Timing.MicroSeconds, seqId: number): void {
+  #handleDrawFrame(startTime: Types.Timing.Micro, seqId: number): void {
     if (!this.#lastFrame) {
       this.#startFrame(startTime, seqId);
       return;
@@ -231,21 +231,21 @@ export class TimelineFrameModel {
     this.#lastLayerTree = layerTree;
   }
 
-  #handleNeedFrameChanged(startTime: Types.Timing.MicroSeconds, needsBeginFrame: boolean): void {
+  #handleNeedFrameChanged(startTime: Types.Timing.Micro, needsBeginFrame: boolean): void {
     if (needsBeginFrame) {
       this.#lastNeedsBeginFrame = startTime;
     }
   }
 
-  #startFrame(startTime: Types.Timing.MicroSeconds, seqId: number): void {
+  #startFrame(startTime: Types.Timing.Micro, seqId: number): void {
     if (this.#lastFrame) {
       this.#flushFrame(this.#lastFrame, startTime);
     }
     this.#lastFrame =
-        new TimelineFrame(seqId, startTime, Types.Timing.MicroSeconds(startTime - metaHandlerData().traceBounds.min));
+        new TimelineFrame(seqId, startTime, Types.Timing.Micro(startTime - metaHandlerData().traceBounds.min));
   }
 
-  #flushFrame(frame: TimelineFrame, endTime: Types.Timing.MicroSeconds): void {
+  #flushFrame(frame: TimelineFrame, endTime: Types.Timing.Micro): void {
     frame.setLayerTree(this.#lastLayerTree);
     frame.setEndTime(endTime);
     if (this.#lastLayerTree) {
@@ -278,7 +278,7 @@ export class TimelineFrameModel {
       events: readonly Types.Events.Event[], threadData: {
         pid: Types.Events.ProcessID,
         tid: Types.Events.ThreadID,
-        startTime: Types.Timing.MicroSeconds,
+        startTime: Types.Timing.Micro,
       }[],
       mainFrameId: string): void {
     let j = 0;
@@ -387,15 +387,15 @@ class TimelineFrame implements Types.Events.LegacyTimelineFrame {
   cat = 'devtools.legacy_frame';
   name = 'frame';
   ph = Types.Events.Phase.COMPLETE;
-  ts: Types.Timing.MicroSeconds;
+  ts: Types.Timing.Micro;
   pid = Types.Events.ProcessID(-1);
   tid = Types.Events.ThreadID(-1);
 
   index: number = -1;
-  startTime: Types.Timing.MicroSeconds;
-  startTimeOffset: Types.Timing.MicroSeconds;
-  endTime: Types.Timing.MicroSeconds;
-  duration: Types.Timing.MicroSeconds;
+  startTime: Types.Timing.Micro;
+  startTimeOffset: Types.Timing.Micro;
+  endTime: Types.Timing.Micro;
+  duration: Types.Timing.Micro;
   idle: boolean;
   dropped: boolean;
   isPartial: boolean;
@@ -404,13 +404,13 @@ class TimelineFrame implements Types.Events.LegacyTimelineFrame {
   mainFrameId: number|undefined;
   readonly seqId: number;
 
-  constructor(seqId: number, startTime: Types.Timing.MicroSeconds, startTimeOffset: Types.Timing.MicroSeconds) {
+  constructor(seqId: number, startTime: Types.Timing.Micro, startTimeOffset: Types.Timing.Micro) {
     this.seqId = seqId;
     this.startTime = startTime;
     this.ts = startTime;
     this.startTimeOffset = startTimeOffset;
     this.endTime = this.startTime;
-    this.duration = Types.Timing.MicroSeconds(0);
+    this.duration = Types.Timing.Micro(0);
     this.idle = false;
     this.dropped = false;
     this.isPartial = false;
@@ -423,9 +423,9 @@ class TimelineFrame implements Types.Events.LegacyTimelineFrame {
     this.index = i;
   }
 
-  setEndTime(endTime: Types.Timing.MicroSeconds): void {
+  setEndTime(endTime: Types.Timing.Micro): void {
     this.endTime = endTime;
-    this.duration = Types.Timing.MicroSeconds(this.endTime - this.startTime);
+    this.duration = Types.Timing.Micro(this.endTime - this.startTime);
   }
 
   setLayerTree(layerTree: Types.Events.LegacyFrameLayerTreeData|null): void {
@@ -436,7 +436,7 @@ class TimelineFrame implements Types.Events.LegacyTimelineFrame {
    * Fake the `dur` field to meet the expected value given that we pretend
    * these TimelineFrame classes are trace events across the codebase.
    */
-  get dur(): Types.Timing.MicroSeconds {
+  get dur(): Types.Timing.Micro {
     return this.duration;
   }
 }
@@ -479,10 +479,10 @@ export class PendingFrame {
 // The parameters of an impl-side BeginFrame.
 class BeginFrameInfo {
   seqId: number;
-  startTime: Types.Timing.MicroSeconds;
+  startTime: Types.Timing.Micro;
   isDropped: boolean;
   isPartial: boolean;
-  constructor(seqId: number, startTime: Types.Timing.MicroSeconds, isDropped: boolean, isPartial: boolean) {
+  constructor(seqId: number, startTime: Types.Timing.Micro, isDropped: boolean, isPartial: boolean) {
     this.seqId = seqId;
     this.startTime = startTime;
     this.isDropped = isDropped;
@@ -503,8 +503,7 @@ export class TimelineFrameBeginFrameQueue {
   } = {};
 
   // Add a BeginFrame to the queue, if it does not already exit.
-  addFrameIfNotExists(seqId: number, startTime: Types.Timing.MicroSeconds, isDropped: boolean, isPartial: boolean):
-      void {
+  addFrameIfNotExists(seqId: number, startTime: Types.Timing.Micro, isDropped: boolean, isPartial: boolean): void {
     if (!(seqId in this.mapFrames)) {
       this.mapFrames[seqId] = new BeginFrameInfo(seqId, startTime, isDropped, isPartial);
       this.queueFrames.push(seqId);
@@ -556,8 +555,8 @@ export class TimelineFrameBeginFrameQueue {
 }
 
 export function framesWithinWindow(
-    frames: readonly Types.Events.LegacyTimelineFrame[], startTime: Types.Timing.MicroSeconds,
-    endTime: Types.Timing.MicroSeconds): Types.Events.LegacyTimelineFrame[] {
+    frames: readonly Types.Events.LegacyTimelineFrame[], startTime: Types.Timing.Micro,
+    endTime: Types.Timing.Micro): Types.Events.LegacyTimelineFrame[] {
   const firstFrame = Platform.ArrayUtilities.lowerBound(frames, startTime || 0, (time, frame) => time - frame.endTime);
   const lastFrame =
       Platform.ArrayUtilities.lowerBound(frames, endTime || Infinity, (time, frame) => time - frame.startTime);