chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

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

@@ -30,14 +30,6 @@ const eventToInitiatorMap = new Map<Types.Events.Event, Types.Events.Event>();
 // multiple events, hence why the value for this map is an array.
 const initiatorToEventsMap = new Map<Types.Events.Event, Types.Events.Event[]>();
 
-// Note: we are keeping the parsing of the following async JS schedulers
-// for backwards compatibility only. They are targeted to be removed
-// completely by M134. See more details at crbug.com/383974422
-// TODO(andoli): remove manual parsing of async JS schedulers.
-const requestAnimationFrameEventsById: Map<number, Types.Events.RequestAnimationFrame> = new Map();
-const timerInstallEventsById: Map<number, Types.Events.TimerInstall> = new Map();
-const requestIdleCallbackEventsById: Map<number, Types.Events.RequestIdleCallback> = new Map();
-
 const webSocketCreateEventsById: Map<number, Types.Events.WebSocketCreate> = new Map();
 const schedulePostTaskCallbackEventsById: Map<number, Types.Events.SchedulePostTaskCallback> = new Map();
 
@@ -45,11 +37,8 @@ export function reset(): void {
   lastScheduleStyleRecalcByFrame.clear();
   lastInvalidationEventForFrame.clear();
   lastUpdateLayoutTreeByFrame.clear();
-  timerInstallEventsById.clear();
   eventToInitiatorMap.clear();
   initiatorToEventsMap.clear();
-  requestAnimationFrameEventsById.clear();
-  requestIdleCallbackEventsById.clear();
   webSocketCreateEventsById.clear();
   schedulePostTaskCallbackEventsById.clear();
 }
@@ -128,36 +117,6 @@ export function handleEvent(event: Types.Events.Event): void {
     }
     // Now clear the last invalidation for the frame: the last invalidation has been linked to a Layout event, so it cannot be the initiator for any future layouts.
     lastInvalidationEventForFrame.delete(event.args.beginData.frame);
-  } else if (Types.Events.isRequestAnimationFrame(event)) {
-    requestAnimationFrameEventsById.set(event.args.data.id, event);
-  } else if (Types.Events.isFireAnimationFrame(event)) {
-    // If we get a fire event, that means we should have had the
-    // RequestAnimationFrame event by now. If so, we can set that as the
-    // initiator for the fire event.
-    const matchingRequestEvent = requestAnimationFrameEventsById.get(event.args.data.id);
-    if (matchingRequestEvent) {
-      storeInitiator({
-        event,
-        initiator: matchingRequestEvent,
-      });
-    }
-  } else if (Types.Events.isTimerInstall(event)) {
-    timerInstallEventsById.set(event.args.data.timerId, event);
-  } else if (Types.Events.isTimerFire(event)) {
-    const matchingInstall = timerInstallEventsById.get(event.args.data.timerId);
-    if (matchingInstall) {
-      storeInitiator({event, initiator: matchingInstall});
-    }
-  } else if (Types.Events.isRequestIdleCallback(event)) {
-    requestIdleCallbackEventsById.set(event.args.data.id, event);
-  } else if (Types.Events.isFireIdleCallback(event)) {
-    const matchingRequestEvent = requestIdleCallbackEventsById.get(event.args.data.id);
-    if (matchingRequestEvent) {
-      storeInitiator({
-        event,
-        initiator: matchingRequestEvent,
-      });
-    }
   } else if (Types.Events.isWebSocketCreate(event)) {
     webSocketCreateEventsById.set(event.args.data.identifier, event);
   } else if (Types.Events.isWebSocketInfo(event) || Types.Events.isWebSocketTransfer(event)) {

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Protocol from '../../../generated/protocol.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
@@ -13,17 +12,18 @@ describeWithEnvironment('LargestImagePaintHandler', function() {
   });
 
   it('creates a map of DOM Node IDs to image candidates', async function() {
-    const events = await TraceLoader.rawEvents(this, 'lcp-images.json.gz');
-    for (const event of events) {
-      Trace.Handlers.ModelHandlers.LargestImagePaint.handleEvent(event);
-    }
-
-    const data = Trace.Handlers.ModelHandlers.LargestImagePaint.data();
-    assert.strictEqual(data.imageByDOMNodeId.size, 1);
-    const imageForLCP = data.imageByDOMNodeId.get(10 as Protocol.DOM.BackendNodeId);
-    assert.exists(imageForLCP);
-    assert.strictEqual(imageForLCP?.args.data?.DOMNodeId, 10 as Protocol.DOM.BackendNodeId);
-    assert.strictEqual(imageForLCP?.args.data?.imageUrl, 'https://via.placeholder.com/2000.jpg');
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
+
+    const {mainFrameNavigations} = parsedTrace.Meta;
+    // There is only one main frame navigation in this trace.
+    assert.lengthOf(mainFrameNavigations, 1);
+    const mainNavigation = mainFrameNavigations.at(0);
+    assert.isOk(mainNavigation);
+
+    const {lcpRequestByNavigation} = parsedTrace.LargestImagePaint;
+    const lcpRequest = lcpRequestByNavigation.get(mainNavigation);
+    assert.isOk(lcpRequest);
+    assert.strictEqual(lcpRequest.args.data.url, 'https://via.placeholder.com/2000.jpg');
   });
 
   it('is able to identify the LCP image request for each navigation', async function() {
@@ -42,4 +42,21 @@ describeWithEnvironment('LargestImagePaintHandler', function() {
     assert.isOk(lcpRequest);
     assert.strictEqual(lcpRequest.args.data.url, 'https://placehold.co/1000.jpg');
   });
+
+  it('handles image paints which happen after the LCP event', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'lcp-late-paint-event.json.gz');
+
+    const {mainFrameNavigations} = parsedTrace.Meta;
+    // There is only one main frame navigation in this trace.
+    assert.lengthOf(mainFrameNavigations, 1);
+    const mainNavigation = mainFrameNavigations.at(0);
+    assert.isOk(mainNavigation);
+
+    const {lcpRequestByNavigation} = parsedTrace.LargestImagePaint;
+    const lcpRequest = lcpRequestByNavigation.get(mainNavigation);
+
+    // There is a largest image paint event, but it happens after the LCP candidate
+    // so it's ignored. The actual LCP is text.
+    assert.isUndefined(lcpRequest);
+  });
 });

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

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Types from '../types/types.js';
 
 import {data as metaData} from './MetaHandler.js';
 import {data as networkRequestsData} from './NetworkRequestsHandler.js';
+import {data as pageLoadMetricsData, MetricName} from './PageLoadMetricsHandler.js';
 import type {HandlerName} from './types.js';
 
 /**
@@ -24,62 +26,53 @@ import type {HandlerName} from './types.js';
  * use the nodeId from the LCP candidate to find the image candidate. That image
  * candidate also contains a `imageUrl` property, which will have the full URL
  * to the image.
+ *
+ * `BackendNodeId`s are only unique within a given renderer process, so this is
+ * also keyed on `ProcessId`.
  **/
-const imageByDOMNodeId = new Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>();
+const imagePaintsByNodeIdAndProcess =
+    new Map<Types.Events.ProcessID, Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>>();
 const lcpRequestByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>();
-const lcpPaintEventByNavigation = new Map<Types.Events.NavigationStart|null, Types.Events.LargestImagePaintCandidate>();
-
-/**
- * We track the latest navigation that happened because we want to relate each
- * LargestImagePaintCandidate to the navigation it occurred after, but we have
- * to track navigations per-frame to avoid us reading a navigation from one
- * frame and treating it as the latest navigation across all frames.
- */
-const lastNavigationPerFrame = new Map<string, Types.Events.NavigationStart>();
 
 export function reset(): void {
-  imageByDOMNodeId.clear();
-  lcpRequestByNavigation.clear();
-  lcpPaintEventByNavigation.clear();
-  lastNavigationPerFrame.clear();
+  imagePaintsByNodeIdAndProcess.clear();
 }
 
 export function handleEvent(event: Types.Events.Event): void {
-  if (Types.Events.isNavigationStart(event) && event.args.frame) {
-    lastNavigationPerFrame.set(event.args.frame, event);
-    return;
-  }
-
-  if (!Types.Events.isLargestImagePaintCandidate(event)) {
-    return;
-  }
-
-  if (!event.args.data) {
+  if (!Types.Events.isLargestImagePaintCandidate(event) || !event.args.data) {
     return;
   }
 
-  imageByDOMNodeId.set(event.args.data.DOMNodeId, event);
-
-  // Now relate this LargestImagePaintCandidate event to the last navigation
-  // that occurred within the same frame.
-  const navigationForEvent = lastNavigationPerFrame.get(event.args.frame);
-  if (navigationForEvent) {
-    lcpPaintEventByNavigation.set(navigationForEvent, event);
-  }
+  const imagePaintsByNodeId =
+      Platform.MapUtilities.getWithDefault(imagePaintsByNodeIdAndProcess, event.pid, () => new Map());
+  imagePaintsByNodeId.set(event.args.data.DOMNodeId, event);
 }
 
 export async function finalize(): Promise<void> {
   const requests = networkRequestsData().byTime;
-  const traceBounds = metaData().traceBounds;
+  const {traceBounds, navigationsByNavigationId} = metaData();
+  const metricScoresByFrameId = pageLoadMetricsData().metricScoresByFrameId;
+
+  for (const [navigationId, navigation] of navigationsByNavigationId) {
+    const lcpMetric = metricScoresByFrameId.get(navigation.args.frame)?.get(navigationId)?.get(MetricName.LCP);
+    const lcpEvent = lcpMetric?.event;
+    if (!lcpEvent || !Types.Events.isLargestContentfulPaintCandidate(lcpEvent)) {
+      continue;
+    }
+
+    const nodeId = lcpEvent.args.data?.nodeId;
+    if (!nodeId) {
+      continue;
+    }
 
-  for (const [navigation, event] of lcpPaintEventByNavigation) {
-    const lcpUrl = event.args.data?.imageUrl;
+    const lcpImagePaintEvent = imagePaintsByNodeIdAndProcess.get(lcpEvent.pid)?.get(nodeId);
+    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
     if (!lcpUrl) {
       continue;
     }
 
     const startTime = navigation?.ts ?? traceBounds.min;
-    const endTime = event.ts;
+    const endTime = lcpImagePaintEvent.ts;
 
     let lcpRequest;
     for (const request of requests) {
@@ -103,14 +96,13 @@ export async function finalize(): Promise<void> {
 }
 
 export interface LargestImagePaintData {
-  imageByDOMNodeId: Map<Protocol.DOM.BackendNodeId, Types.Events.LargestImagePaintCandidate>;
   lcpRequestByNavigation: Map<Types.Events.NavigationStart|null, Types.Events.SyntheticNetworkRequest>;
 }
 
 export function data(): LargestImagePaintData {
-  return {imageByDOMNodeId, lcpRequestByNavigation};
+  return {lcpRequestByNavigation};
 }
 
 export function deps(): HandlerName[] {
-  return ['Meta', 'NetworkRequests'];
+  return ['Meta', 'NetworkRequests', 'PageLoadMetrics'];
 }

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

@@ -171,7 +171,7 @@ describe('LayoutShiftsHandler', function() {
           assert.strictEqual(cluster.scoreWindows.needsImprovement.min, event.ts);
         }
 
-        // Here we have transitioned from eiter Good or NI to Bad, so
+        // Here we have transitioned from either Good or NI to Bad, so
         // again we assert that the Bad window starts when expected,
         // and that either the NI or Good window finishes just prior.
         if (scoreBeforeEvent < Trace.Handlers.ModelHandlers.LayoutShifts.LayoutShiftsThreshold.BAD &&
@@ -257,7 +257,7 @@ describe('LayoutShiftsHandler', function() {
 
       const lastShiftTimings = Trace.Helpers.Timing.eventTimingsMicroSeconds(cluster.events[cluster.events.length - 1]);
       const wantEndTime = lastShiftTimings.endTime + Trace.Handlers.ModelHandlers.LayoutShifts.MAX_SHIFT_TIME_DELTA;
-      const dur = Trace.Types.Timing.MicroSeconds(wantEndTime - earliestLayoutShiftTs);
+      const dur = Trace.Types.Timing.Micro(wantEndTime - earliestLayoutShiftTs);
       assert.strictEqual(cluster.dur || 0, dur);
     }
   });

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

@@ -61,11 +61,11 @@ interface LayoutShifts {
 
 // This represents the maximum #time we will allow a cluster to go before we
 // reset it.
-export const MAX_CLUSTER_DURATION = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(5000));
+export const MAX_CLUSTER_DURATION = Helpers.Timing.milliToMicro(Types.Timing.Milli(5000));
 
 // This represents the maximum #time we will allow between layout shift events
 // before considering it to be the start of a new cluster.
-export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.millisecondsToMicroseconds(Types.Timing.MilliSeconds(1000));
+export const MAX_SHIFT_TIME_DELTA = Helpers.Timing.milliToMicro(Types.Timing.Milli(1000));
 
 // Layout shifts are reported globally to the developer, irrespective of which
 // frame they originated in. However, each process does have its own individual
@@ -105,10 +105,10 @@ const clustersByNavigationId = new Map<Types.Events.NavigationId, Types.Events.S
 
 // Represents a point in time in which a  LS score change
 // was recorded.
-type ScoreRecord = {
-  ts: number,
-  score: number,
-};
+interface ScoreRecord {
+  ts: number;
+  score: number;
+}
 
 // The complete timeline of LS score changes in a trace.
 // Includes drops to 0 when session windows end.
@@ -169,25 +169,33 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
-function traceWindowFromTime(time: Types.Timing.MicroSeconds): Types.Timing.TraceWindowMicroSeconds {
+function traceWindowFromTime(time: Types.Timing.Micro): Types.Timing.TraceWindowMicro {
   return {
     min: time,
     max: time,
-    range: Types.Timing.MicroSeconds(0),
+    range: Types.Timing.Micro(0),
   };
 }
 
-function updateTraceWindowMax(
-    traceWindow: Types.Timing.TraceWindowMicroSeconds, newMax: Types.Timing.MicroSeconds): void {
+function updateTraceWindowMax(traceWindow: Types.Timing.TraceWindowMicro, newMax: Types.Timing.Micro): void {
   traceWindow.max = newMax;
-  traceWindow.range = Types.Timing.MicroSeconds(traceWindow.max - traceWindow.min);
+  traceWindow.range = Types.Timing.Micro(traceWindow.max - traceWindow.min);
 }
 
-function findScreenshots(timestamp: Types.Timing.MicroSeconds): Types.Events.LayoutShiftParsedData['screenshots'] {
-  const screenshots = screenshotsHandlerData().all;
-  const before = Helpers.Trace.findPreviousEventBeforeTimestamp(screenshots, timestamp);
-  const after = before ? screenshots[screenshots.indexOf(before) + 1] : null;
-  return {before, after};
+function findScreenshots(timestamp: Types.Timing.Micro): Types.Events.LayoutShiftParsedData['screenshots'] {
+  const data = screenshotsHandlerData();
+  if (data.screenshots) {
+    const before = Helpers.Trace.findPreviousEventBeforeTimestamp(data.screenshots, timestamp);
+    const after = before ? data.screenshots[data.screenshots.indexOf(before) + 1] : null;
+    return {before, after};
+  }
+  if (data.legacySyntheticScreenshots) {
+    const before = Helpers.Trace.findPreviousEventBeforeTimestamp(data.legacySyntheticScreenshots, timestamp);
+    const after = before ? data.legacySyntheticScreenshots[data.legacySyntheticScreenshots.indexOf(before) + 1] : null;
+    return {before, after};
+  }
+  // No screenshots
+  return {before: null, after: null};
 }
 
 function buildScoreRecords(): void {
@@ -312,7 +320,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
       // If there is an existing cluster update its closing time.
       if (clusters.length > 0) {
         const currentCluster = clusters[clusters.length - 1];
-        updateTraceWindowMax(currentCluster.clusterWindow, Types.Timing.MicroSeconds(previousClusterEndTime));
+        updateTraceWindowMax(currentCluster.clusterWindow, Types.Timing.Micro(previousClusterEndTime));
       }
 
       // If this cluster happened after a navigation, set the navigationId to
@@ -341,7 +349,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
         tid: event.tid,
         ph: Types.Events.Phase.COMPLETE,
         cat: '',
-        dur: Types.Timing.MicroSeconds(-1),  // This `cluster.dur` is updated below.
+        dur: Types.Timing.Micro(-1),  // This `cluster.dur` is updated below.
       });
 
       firstShiftTime = clusterStartTime;
@@ -351,7 +359,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
     // recent one and append the shift, bump its score and window values accordingly.
     const currentCluster = clusters[clusters.length - 1];
     const timeFromNavigation = currentShiftNavigation !== null ?
-        Types.Timing.MicroSeconds(event.ts - navigations[currentShiftNavigation].ts) :
+        Types.Timing.Micro(event.ts - navigations[currentShiftNavigation].ts) :
         undefined;
 
     currentCluster.clusterCumulativeScore += event.args.data ? event.args.data.weighted_score_delta : 0;
@@ -362,6 +370,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
         Helpers.SyntheticEvents.SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticLayoutShift>({
           rawSourceEvent: event,
           ...event,
+          name: Types.Events.Name.SYNTHETIC_LAYOUT_SHIFT,
           args: {
             frame: event.args.frame,
             data: {
@@ -405,7 +414,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
           Platform.ArrayUtilities.nearestIndexFromBeginning(navigations, nav => nav.ts > cluster.clusterWindow.max);
       const nextNavigationTime = nextNavigationIndex ? navigations[nextNavigationIndex].ts : Infinity;
       const clusterEnd = Math.min(clusterEndByMaxDuration, clusterEndByMaxGap, traceBounds.max, nextNavigationTime);
-      updateTraceWindowMax(cluster.clusterWindow, Types.Timing.MicroSeconds(clusterEnd));
+      updateTraceWindowMax(cluster.clusterWindow, Types.Timing.Micro(clusterEnd));
     }
 
     let largestScore: number = 0;
@@ -425,7 +434,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
           weightedScore >= LayoutShiftsThreshold.NEEDS_IMPROVEMENT && weightedScore < LayoutShiftsThreshold.BAD) {
         if (!cluster.scoreWindows.needsImprovement) {
           // Close the Good window, and open the needs improvement window.
-          updateTraceWindowMax(cluster.scoreWindows.good, Types.Timing.MicroSeconds(ts - 1));
+          updateTraceWindowMax(cluster.scoreWindows.good, Types.Timing.Micro(ts - 1));
           cluster.scoreWindows.needsImprovement = traceWindowFromTime(ts);
         }
 
@@ -435,9 +444,9 @@ async function buildLayoutShiftsClusters(): Promise<void> {
         if (!cluster.scoreWindows.bad) {
           // We may jump from Good to Bad here, so update whichever window is open.
           if (cluster.scoreWindows.needsImprovement) {
-            updateTraceWindowMax(cluster.scoreWindows.needsImprovement, Types.Timing.MicroSeconds(ts - 1));
+            updateTraceWindowMax(cluster.scoreWindows.needsImprovement, Types.Timing.Micro(ts - 1));
           } else {
-            updateTraceWindowMax(cluster.scoreWindows.good, Types.Timing.MicroSeconds(ts - 1));
+            updateTraceWindowMax(cluster.scoreWindows.good, Types.Timing.Micro(ts - 1));
           }
 
           cluster.scoreWindows.bad = traceWindowFromTime(shift.ts);
@@ -477,7 +486,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
     cluster.ts = cluster.events[0].ts;
     const lastShiftTimings = Helpers.Timing.eventTimingsMicroSeconds(cluster.events[cluster.events.length - 1]);
     // Add MAX_SHIFT_TIME_DELTA, the section gap after the last layout shift. This marks the end of the cluster.
-    cluster.dur = Types.Timing.MicroSeconds((lastShiftTimings.endTime - cluster.events[0].ts) + MAX_SHIFT_TIME_DELTA);
+    cluster.dur = Types.Timing.Micro((lastShiftTimings.endTime - cluster.events[0].ts) + MAX_SHIFT_TIME_DELTA);
 
     if (weightedScore > sessionMaxScore) {
       clsWindowID = windowID;

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

@@ -32,7 +32,7 @@ describe('MetaHandler', function() {
         },
         pid: Trace.Types.Events.ProcessID(23456),
         tid: Trace.Types.Events.ThreadID(775),
-        ts: Trace.Types.Timing.MicroSeconds(100),
+        ts: Trace.Types.Timing.Micro(100),
         name: 'navigationStart',
       } as Trace.Types.Events.NavigationStart,
       {
@@ -48,9 +48,10 @@ describe('MetaHandler', function() {
         },
         pid: Trace.Types.Events.ProcessID(23456),
         tid: Trace.Types.Events.ThreadID(775),
-        ts: Trace.Types.Timing.MicroSeconds(800),
+        ts: Trace.Types.Timing.Micro(800),
         name: 'navigationStart',
-      } as Trace.Types.Events.NavigationStartUnreliable,
+        // Casting as NavStart, but it is ignored due to the empty documentLoaderURL
+      } as Trace.Types.Events.NavigationStart,
       {
         ...defaultTraceEvent,
         args: {
@@ -63,7 +64,7 @@ describe('MetaHandler', function() {
         },
         pid: Trace.Types.Events.ProcessID(23456),
         tid: Trace.Types.Events.ThreadID(775),
-        ts: Trace.Types.Timing.MicroSeconds(1000),
+        ts: Trace.Types.Timing.Micro(1000),
         name: 'navigationStart',
       } as Trace.Types.Events.NavigationStart,
     ];

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

@@ -28,10 +28,10 @@ let devicePixelRatio: number|null = null;
 const processNames: Map<Types.Events.ProcessID, Types.Events.ProcessName> = new Map();
 
 const topLevelRendererIds = new Set<Types.Events.ProcessID>();
-const traceBounds: Types.Timing.TraceWindowMicroSeconds = {
-  min: Types.Timing.MicroSeconds(Number.POSITIVE_INFINITY),
-  max: Types.Timing.MicroSeconds(Number.NEGATIVE_INFINITY),
-  range: Types.Timing.MicroSeconds(Number.POSITIVE_INFINITY),
+const traceBounds: Types.Timing.TraceWindowMicro = {
+  min: Types.Timing.Micro(Number.POSITIVE_INFINITY),
+  max: Types.Timing.Micro(Number.NEGATIVE_INFINITY),
+  range: Types.Timing.Micro(Number.POSITIVE_INFINITY),
 };
 
 /**
@@ -44,7 +44,7 @@ const traceBounds: Types.Timing.TraceWindowMicroSeconds = {
  * Note that these Maps will have the same values in them; these are just keyed
  * differently to make look-ups easier.
  *
- * We also additionally maintain an array of only navigations that occured on
+ * We also additionally maintain an array of only navigations that occurred on
  * the main frame. In many places in the UI we only care about highlighting
  * main frame navigations, so calculating this list here is better than
  * filtering either of the below maps over and over again at the UI layer.
@@ -57,7 +57,7 @@ const mainFrameNavigations: Types.Events.NavigationStart[] = [];
 // bookkeeping so that during the finalize pass we can obtain the main and browser thread IDs.
 const threadsInProcess = new Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.ThreadName>>();
 
-let traceStartedTimeFromTracingStartedEvent = Types.Timing.MicroSeconds(-1);
+let traceStartedTimeFromTracingStartedEvent = Types.Timing.Micro(-1);
 const eventPhasesOfInterestForTraceBounds = new Set([
   Types.Events.Phase.BEGIN,
   Types.Events.Phase.END,
@@ -95,10 +95,10 @@ export function reset(): void {
   rendererProcessesByFrameId.clear();
   framesByProcessId.clear();
 
-  traceBounds.min = Types.Timing.MicroSeconds(Number.POSITIVE_INFINITY);
-  traceBounds.max = Types.Timing.MicroSeconds(Number.NEGATIVE_INFINITY);
-  traceBounds.range = Types.Timing.MicroSeconds(Number.POSITIVE_INFINITY);
-  traceStartedTimeFromTracingStartedEvent = Types.Timing.MicroSeconds(-1);
+  traceBounds.min = Types.Timing.Micro(Number.POSITIVE_INFINITY);
+  traceBounds.max = Types.Timing.Micro(Number.NEGATIVE_INFINITY);
+  traceBounds.range = Types.Timing.Micro(Number.POSITIVE_INFINITY);
+  traceStartedTimeFromTracingStartedEvent = Types.Timing.Micro(-1);
 
   traceIsGeneric = true;
 }
@@ -109,8 +109,8 @@ function updateRendererProcessByFrame(event: Types.Events.Event, frame: Types.Ev
 
   const rendererProcessInFrame = Platform.MapUtilities.getWithDefault(
       rendererProcessesByFrameId, frame.frame,
-      () => new Map<
-          Types.Events.ProcessID, {frame: Types.Events.TraceFrame, window: Types.Timing.TraceWindowMicroSeconds}[]>());
+      () =>
+          new Map<Types.Events.ProcessID, {frame: Types.Events.TraceFrame, window: Types.Timing.TraceWindowMicro}[]>());
   const rendererProcessInfo = Platform.MapUtilities.getWithDefault(rendererProcessInFrame, frame.processId, () => {
     return [];
   });
@@ -127,8 +127,8 @@ function updateRendererProcessByFrame(event: Types.Events.Event, frame: Types.Ev
     frame,
     window: {
       min: event.ts,
-      max: Types.Timing.MicroSeconds(0),
-      range: Types.Timing.MicroSeconds(0),
+      max: Types.Timing.Micro(0),
+      range: Types.Timing.Micro(0),
     },
   });
 }
@@ -148,9 +148,9 @@ export function handleEvent(event: Types.Events.Event): void {
   // The UMA events in particular seem to be reported on page unloading, which
   // often extends the bounds of the trace unhelpfully.
   if (event.ts !== 0 && !event.name.endsWith('::UMA') && eventPhasesOfInterestForTraceBounds.has(event.ph)) {
-    traceBounds.min = Types.Timing.MicroSeconds(Math.min(event.ts, traceBounds.min));
-    const eventDuration = event.dur ?? Types.Timing.MicroSeconds(0);
-    traceBounds.max = Types.Timing.MicroSeconds(Math.max(event.ts + eventDuration, traceBounds.max));
+    traceBounds.min = Types.Timing.Micro(Math.min(event.ts, traceBounds.min));
+    const eventDuration = event.dur ?? Types.Timing.Micro(0);
+    traceBounds.max = Types.Timing.Micro(Math.max(event.ts + eventDuration, traceBounds.max));
   }
 
   if (Types.Events.isProcessName(event) && (event.args.name === 'Browser' || event.args.name === 'HeadlessBrowser')) {
@@ -236,7 +236,7 @@ export function handleEvent(event: Types.Events.Event): void {
           mainFrameURL = frame.url;
         }
       } else if (traceHasOutermostMainFrameFlag) {
-        // Less ideal: "guess" at the main thread by using this falg.
+        // Less ideal: "guess" at the main thread by using this flag.
         if (frame.isOutermostMainFrame) {
           mainFrameId = frame.frame;
           mainFrameURL = frame.url;
@@ -326,7 +326,7 @@ export async function finalize(): Promise<void> {
   if (traceStartedTimeFromTracingStartedEvent >= 0) {
     traceBounds.min = traceStartedTimeFromTracingStartedEvent;
   }
-  traceBounds.range = Types.Timing.MicroSeconds(traceBounds.max - traceBounds.min);
+  traceBounds.range = Types.Timing.Micro(traceBounds.max - traceBounds.min);
 
   // If we go from foo.com to example.com we will get a new renderer, and
   // therefore the "top level renderer" will have a different PID as it has
@@ -343,11 +343,11 @@ export async function finalize(): Promise<void> {
       // For the last window we set its max to be positive infinity.
       // TODO: Move the trace bounds handler into meta so we can clamp first and last windows.
       if (!nextWindow) {
-        currentWindow.window.max = Types.Timing.MicroSeconds(traceBounds.max);
-        currentWindow.window.range = Types.Timing.MicroSeconds(traceBounds.max - currentWindow.window.min);
+        currentWindow.window.max = Types.Timing.Micro(traceBounds.max);
+        currentWindow.window.range = Types.Timing.Micro(traceBounds.max - currentWindow.window.min);
       } else {
-        currentWindow.window.max = Types.Timing.MicroSeconds(nextWindow.window.min - 1);
-        currentWindow.window.range = Types.Timing.MicroSeconds(currentWindow.window.max - currentWindow.window.min);
+        currentWindow.window.max = Types.Timing.Micro(nextWindow.window.min - 1);
+        currentWindow.window.range = Types.Timing.Micro(currentWindow.window.max - currentWindow.window.min);
       }
     }
   }
@@ -376,13 +376,13 @@ export async function finalize(): Promise<void> {
   // the previous page. This doesn't matter too much except we often use this
   // URL as the visual name of the trace shown to the user (e.g. in the history
   // dropdown). We can be more accurate by finding the first main frame
-  // navigaton, and using its URL, if we have it.
+  // navigation, and using its URL, if we have it.
   // However, to avoid doing this in a case where the first navigation is far
   // into the trace's lifecycle, we only do this in situations where the first
   // navigation happened very soon (0.5 seconds) after the trace started
   // recording.
   const firstMainFrameNav = mainFrameNavigations.at(0);
-  const firstNavTimeThreshold = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
+  const firstNavTimeThreshold = Helpers.Timing.secondsToMicro(Types.Timing.Seconds(0.5));
   if (firstMainFrameNav) {
     const navigationIsWithinThreshold = firstMainFrameNav.ts - traceBounds.min < firstNavTimeThreshold;
     if (firstMainFrameNav.args.data?.isOutermostMainFrame && firstMainFrameNav.args.data?.documentLoaderURL &&
@@ -392,18 +392,18 @@ export async function finalize(): Promise<void> {
   }
 }
 
-export type MetaHandlerData = {
-  traceIsGeneric: boolean,
-  traceBounds: Types.Timing.TraceWindowMicroSeconds,
-  browserProcessId: Types.Events.ProcessID,
-  processNames: Map<Types.Events.ProcessID, Types.Events.ProcessName>,
-  browserThreadId: Types.Events.ThreadID,
-  gpuProcessId: Types.Events.ProcessID,
-  navigationsByFrameId: Map<string, Types.Events.NavigationStart[]>,
-  navigationsByNavigationId: Map<string, Types.Events.NavigationStart>,
-  threadsInProcess: Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.ThreadName>>,
-  mainFrameId: string,
-  mainFrameURL: string,
+export interface MetaHandlerData {
+  traceIsGeneric: boolean;
+  traceBounds: Types.Timing.TraceWindowMicro;
+  browserProcessId: Types.Events.ProcessID;
+  processNames: Map<Types.Events.ProcessID, Types.Events.ProcessName>;
+  browserThreadId: Types.Events.ThreadID;
+  gpuProcessId: Types.Events.ProcessID;
+  navigationsByFrameId: Map<string, Types.Events.NavigationStart[]>;
+  navigationsByNavigationId: Map<string, Types.Events.NavigationStart>;
+  threadsInProcess: Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Types.Events.ThreadName>>;
+  mainFrameId: string;
+  mainFrameURL: string;
   /**
    * A frame can have multiple renderer processes, at the same time,
    * a renderer process can have multiple URLs. This map tracks the
@@ -412,14 +412,14 @@ export type MetaHandlerData = {
    * URLs, each process in each frame has an array of windows, with an
    * entry for each URL it had.
    */
-  rendererProcessesByFrame: FrameProcessData,
-  topLevelRendererIds: Set<Types.Events.ProcessID>,
-  frameByProcessId: Map<Types.Events.ProcessID, Map<string, Types.Events.TraceFrame>>,
-  mainFrameNavigations: Types.Events.NavigationStart[],
-  gpuThreadId?: Types.Events.ThreadID,
-  viewportRect?: DOMRect,
-  devicePixelRatio?: number,
-};
+  rendererProcessesByFrame: FrameProcessData;
+  topLevelRendererIds: Set<Types.Events.ProcessID>;
+  frameByProcessId: Map<Types.Events.ProcessID, Map<string, Types.Events.TraceFrame>>;
+  mainFrameNavigations: Types.Events.NavigationStart[];
+  gpuThreadId?: Types.Events.ThreadID;
+  viewportRect?: DOMRect;
+  devicePixelRatio?: number;
+}
 
 // Each frame has a single render process at a given time but it can have
 // multiple render processes  during a trace, for example if a navigation
@@ -436,8 +436,7 @@ export type MetaHandlerData = {
 // https://developer.chrome.com/articles/renderingng-architecture/#threads
 // and https://web.dev/same-site-same-origin/
 export type FrameProcessData =
-    Map<string,
-        Map<Types.Events.ProcessID, {frame: Types.Events.TraceFrame, window: Types.Timing.TraceWindowMicroSeconds}[]>>;
+    Map<string, Map<Types.Events.ProcessID, {frame: Types.Events.TraceFrame, window: Types.Timing.TraceWindowMicro}[]>>;
 
 export function data(): MetaHandlerData {
   return {

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

@@ -6,6 +6,7 @@ export * as AnimationFrames from './AnimationFramesHandler.js';
 export * as Animations from './AnimationHandler.js';
 export * as AsyncJSCalls from './AsyncJSCallsHandler.js';
 export * as AuctionWorklets from './AuctionWorkletsHandler.js';
+export * as DOMStats from './DOMStatsHandler.js';
 export * as ExtensionTraceData from './ExtensionTraceDataHandler.js';
 export * as Flows from './FlowsHandler.js';
 export * as Frames from './FramesHandler.js';