chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/trace/extras/ThirdParties.ts

@@ -0,0 +1,207 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
+import type * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+import * as URLForEntry from './URLForEntry.js';
+
+export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
+
+export interface Summary {
+  transferSize: number;
+  mainThreadTime: Types.Timing.MicroSeconds;
+}
+
+export interface SummaryMaps {
+  byEntity: Map<Entity, Summary>;
+  byRequest: Map<Types.Events.SyntheticNetworkRequest, Summary>;
+  requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>;
+}
+
+/**
+ * Returns the origin portion of a Chrome extension URL.
+ */
+function getChromeExtensionOrigin(url: URL): string {
+  return url.protocol + '//' + url.host;
+}
+
+function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: string, extensionName?: string): Entity {
+  const parsedUrl = new URL(url);
+  const origin = getChromeExtensionOrigin(parsedUrl);
+  const host = new URL(origin).host;
+  const name = extensionName || host;
+
+  const cachedEntity = entityCache.get(origin);
+  if (cachedEntity) {
+    return cachedEntity;
+  }
+
+  const chromeExtensionEntity = {
+    name,
+    company: name,
+    category: 'Chrome Extension',
+    homepage: 'https://chromewebstore.google.com/detail/' + host,
+    categories: [],
+    domains: [],
+    averageExecutionTime: 0,
+    totalExecutionTime: 0,
+    totalOccurrences: 0,
+  };
+
+  entityCache.set(origin, chromeExtensionEntity);
+  return chromeExtensionEntity;
+}
+
+export function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
+  if (url.startsWith('chrome-extension:')) {
+    return makeUpChromeExtensionEntity(entityCache, url);
+  }
+
+  // Make up an entity only for valid http/https URLs.
+  if (!url.startsWith('http')) {
+    return;
+  }
+
+  // NOTE: Lighthouse uses a tld database to determine the root domain, but here
+  // we are using third party web's database. Doesn't really work for the case of classifying
+  // domains 3pweb doesn't know about, so it will just give us a guess.
+  const rootDomain = ThirdPartyWeb.ThirdPartyWeb.getRootDomain(url);
+  if (!rootDomain) {
+    return;
+  }
+
+  if (entityCache.has(rootDomain)) {
+    return entityCache.get(rootDomain);
+  }
+
+  const unrecognizedEntity = {
+    name: rootDomain,
+    company: rootDomain,
+    category: '',
+    categories: [],
+    domains: [rootDomain],
+    averageExecutionTime: 0,
+    totalExecutionTime: 0,
+    totalOccurrences: 0,
+    isUnrecognized: true,
+  };
+  entityCache.set(rootDomain, unrecognizedEntity);
+  return unrecognizedEntity;
+}
+
+function getSelfTimeByUrl(
+    parsedTrace: Handlers.Types.ParsedTrace, bounds: Types.Timing.TraceWindowMicroSeconds): Map<string, number> {
+  const selfTimeByUrl = new Map<string, number>();
+
+  for (const process of parsedTrace.Renderer.processes.values()) {
+    if (!process.isOnMainFrame) {
+      continue;
+    }
+
+    for (const thread of process.threads.values()) {
+      if (thread.name === 'CrRendererMain') {
+        if (!thread.tree) {
+          break;
+        }
+
+        for (const event of thread.entries) {
+          if (!Helpers.Timing.eventIsInBounds(event, bounds)) {
+            continue;
+          }
+
+          const node = parsedTrace.Renderer.entryToNode.get(event);
+          if (!node || !node.selfTime) {
+            continue;
+          }
+
+          const url = URLForEntry.getNonResolved(parsedTrace as Handlers.Types.ParsedTrace, event);
+          if (!url) {
+            continue;
+          }
+
+          selfTimeByUrl.set(url, node.selfTime + (selfTimeByUrl.get(url) ?? 0));
+        }
+      }
+    }
+  }
+
+  return selfTimeByUrl;
+}
+
+export function getEntitiesByRequest(requests: Types.Events.SyntheticNetworkRequest[]):
+    {entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>, madeUpEntityCache: Map<string, Entity>} {
+  const entityByRequest = new Map<Types.Events.SyntheticNetworkRequest, Entity>();
+  const madeUpEntityCache = new Map<string, Entity>();
+  for (const request of requests) {
+    const url = request.args.data.url;
+    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(madeUpEntityCache, url);
+    if (entity) {
+      entityByRequest.set(request, entity);
+    }
+  }
+  return {entityByRequest, madeUpEntityCache};
+}
+
+function getSummaryMap(
+    requests: Types.Events.SyntheticNetworkRequest[],
+    entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
+    selfTimeByUrl: Map<string, number>): SummaryMaps {
+  const byRequest = new Map<Types.Events.SyntheticNetworkRequest, Summary>();
+  const byEntity = new Map<Entity, Summary>();
+  const defaultSummary: Summary = {transferSize: 0, mainThreadTime: Types.Timing.MicroSeconds(0)};
+
+  for (const request of requests) {
+    const urlSummary = byRequest.get(request) || {...defaultSummary};
+    urlSummary.transferSize += request.args.data.encodedDataLength;
+    urlSummary.mainThreadTime =
+        Types.Timing.MicroSeconds(urlSummary.mainThreadTime + (selfTimeByUrl.get(request.args.data.url) ?? 0));
+    byRequest.set(request, urlSummary);
+  }
+
+  // Map each request's stat to a particular entity.
+  const requestsByEntity = new Map<Entity, Types.Events.SyntheticNetworkRequest[]>();
+  for (const [request, requestSummary] of byRequest.entries()) {
+    const entity = entityByRequest.get(request);
+    if (!entity) {
+      byRequest.delete(request);
+      continue;
+    }
+
+    const entitySummary = byEntity.get(entity) || {...defaultSummary};
+    entitySummary.transferSize += requestSummary.transferSize;
+    entitySummary.mainThreadTime =
+        Types.Timing.MicroSeconds(entitySummary.mainThreadTime + requestSummary.mainThreadTime);
+    byEntity.set(entity, entitySummary);
+
+    const entityRequests = requestsByEntity.get(entity) || [];
+    entityRequests.push(request);
+    requestsByEntity.set(entity, entityRequests);
+  }
+
+  return {byEntity, byRequest, requestsByEntity};
+}
+
+export function getSummariesAndEntitiesForTraceBounds(
+    parsedTrace: Handlers.Types.ParsedTrace, traceBounds: Types.Timing.TraceWindowMicroSeconds,
+    networkRequests: Types.Events.SyntheticNetworkRequest[]): {
+  summaries: SummaryMaps,
+  entityByRequest: Map<Types.Events.SyntheticNetworkRequest, Entity>,
+  madeUpEntityCache: Map<string, Entity>,
+} {
+  // Ensure we only handle requests that are within the given traceBounds.
+  const reqs = networkRequests.filter(event => {
+    return Helpers.Timing.eventIsInBounds(event, traceBounds);
+  });
+
+  const {entityByRequest, madeUpEntityCache} = getEntitiesByRequest(reqs);
+
+  const selfTimeByUrl = getSelfTimeByUrl(parsedTrace, traceBounds);
+  // TODO(crbug.com/352244718): re-work to still collect main thread activity if no request is present
+  const summaries = getSummaryMap(reqs, entityByRequest, selfTimeByUrl);
+
+  return {summaries, entityByRequest, madeUpEntityCache};
+}

package/front_end/models/trace/extras/extras.ts

@@ -6,4 +6,5 @@ export * as FetchNodes from './FetchNodes.js';
 export * as FilmStrip from './FilmStrip.js';
 export * as MainThreadActivity from './MainThreadActivity.js';
 export * as Metadata from './Metadata.js';
+export * as ThirdParties from './ThirdParties.js';
 export * as URLForEntry from './URLForEntry.js';

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

@@ -64,8 +64,8 @@ export async function finalize(): Promise<void> {
 }
 
 export interface FramesData {
-  frames: readonly TimelineFrame[];
-  framesById: Readonly<Record<number, TimelineFrame|undefined>>;
+  frames: readonly Types.Events.LegacyTimelineFrame[];
+  framesById: Readonly<Record<number, Types.Events.LegacyTimelineFrame|undefined>>;
 }
 
 export function data(): FramesData {
@@ -385,7 +385,14 @@ const MAIN_FRAME_MARKERS = new Set<Types.Events.Name>([
   Types.Events.Name.SCROLL_LAYER,
 ]);
 
-export class TimelineFrame implements Types.Events.LegacyTimelineFrame {
+/**
+ * Legacy class that represents TimelineFrames that was ported from the old SDK.
+ * This class is purposefully not exported as it breaks the abstraction that
+ * every event shown on the timeline is a trace event. Instead, we use the Type
+ * LegacyTimelineFrame to represent frames in the codebase. These do implement
+ * the right interface to be treated just like they were a trace event.
+ */
+class TimelineFrame implements Types.Events.LegacyTimelineFrame {
   // These fields exist to satisfy the base Event type which all
   // "trace events" must implement. They aren't used, but doing this means we
   // can pass `TimelineFrame` instances into places that expect
@@ -562,8 +569,8 @@ export class TimelineFrameBeginFrameQueue {
 }
 
 export function framesWithinWindow(
-    frames: readonly TimelineFrame[], startTime: Types.Timing.MicroSeconds,
-    endTime: Types.Timing.MicroSeconds): TimelineFrame[] {
+    frames: readonly Types.Events.LegacyTimelineFrame[], startTime: Types.Timing.MicroSeconds,
+    endTime: Types.Timing.MicroSeconds): 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);

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

@@ -213,4 +213,44 @@ describe('InitiatorsHandler', () => {
     assert.strictEqual(data.eventToInitiator.get(handlePostMessageEvent), schedulePostMessageEvent);
     assert.deepEqual(data.initiatorToEvents.get(schedulePostMessageEvent), [handlePostMessageEvent]);
   });
+
+  it('pairs the postTask-scheduled tasks with their scheduling initiators', async function() {
+    const traceEvents = await TraceLoader.rawEvents(this, 'scheduler-post-task.json.gz');
+    for (const event of traceEvents) {
+      Trace.Handlers.ModelHandlers.Initiators.handleEvent(event);
+    }
+    await Trace.Handlers.ModelHandlers.Initiators.finalize();
+    const data = Trace.Handlers.ModelHandlers.Initiators.data();
+
+    const scheduleEvents = traceEvents.filter(Trace.Types.Events.isSchedulePostTaskCallback);
+    assert.isNotEmpty(scheduleEvents, 'Could not find SchedulePostTaskCallback events');
+    const runEvents = traceEvents.filter(Trace.Types.Events.isRunPostTaskCallback);
+    assert.isNotEmpty(runEvents, 'Could not find RunPostTaskCallback events');
+    const cancelEvents = traceEvents.filter(Trace.Types.Events.isAbortPostTaskCallback);
+    assert.isNotEmpty(cancelEvents, 'Could not find AbortPostTaskCallback events');
+
+    assert.containsAllKeys(data.initiatorToEvents, scheduleEvents, 'Not all schedule events in initiators');
+
+    // All end events have a SchedulePostTaskCallback initiator.
+    for (const endEvent of [...runEvents, ...cancelEvents]) {
+      const initiator = data.eventToInitiator.get(endEvent);
+      assert.exists(initiator);
+      assert(Trace.Types.Events.isSchedulePostTaskCallback(initiator));
+      assert.strictEqual(endEvent.args.data.taskId, initiator.args.data.taskId);
+
+      assert(data.initiatorToEvents.get(initiator)?.includes(endEvent));
+    }
+
+    // There is one task that cancels itself while running, so it has both run and cancel events.
+    const doubleEvents = scheduleEvents.some(scheduleEvent => {
+      const endEvents = data.initiatorToEvents.get(scheduleEvent);
+      if (!endEvents || endEvents.length < 2) {
+        return false;
+      }
+
+      return endEvents.some(Trace.Types.Events.isRunPostTaskCallback) &&
+          endEvents.some(Trace.Types.Events.isAbortPostTaskCallback);
+    });
+    assert(doubleEvents, 'initiator with both run and cancel initiated events not found');
+  });
 });

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

@@ -39,6 +39,7 @@ const requestAnimationFrameEventsById: Map<number, Types.Events.RequestAnimation
 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();
 
 export function reset(): void {
   lastScheduleStyleRecalcByFrame.clear();
@@ -50,6 +51,7 @@ export function reset(): void {
   requestAnimationFrameEventsById.clear();
   requestIdleCallbackEventsById.clear();
   webSocketCreateEventsById.clear();
+  schedulePostTaskCallbackEventsById.clear();
   schedulePostMessageEventByTraceId.clear();
   postMessageHandlerEvents.length = 0;
 
@@ -168,6 +170,13 @@ export function handleEvent(event: Types.Events.Event): void {
         initiator: matchingCreateEvent,
       });
     }
+  } else if (Types.Events.isSchedulePostTaskCallback(event)) {
+    schedulePostTaskCallbackEventsById.set(event.args.data.taskId, event);
+  } else if (Types.Events.isRunPostTaskCallback(event) || Types.Events.isAbortPostTaskCallback(event)) {
+    const matchingSchedule = schedulePostTaskCallbackEventsById.get(event.args.data.taskId);
+    if (matchingSchedule) {
+      storeInitiator({event, initiator: matchingSchedule});
+    }
   }
   // Store schedulePostMessage Events by their traceIds.
   // so they can be reconciled later with matching handlePostMessage events with same traceIds.

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

@@ -235,11 +235,11 @@ describe('LayoutShiftsHandler', function() {
 
     for (const cluster of clusters) {
       // Get the max shift score from the list of layout shifts.
-      const maxShiftScore = Math.max(...cluster.events.map(s => s.args.data?.score ?? 0));
+      const maxShiftScore = Math.max(...cluster.events.map(s => s.args.data?.weighted_score_delta ?? 0));
       const gotShift = cluster.worstShiftEvent as Trace.Types.Events.SyntheticLayoutShift;
       assert.isNotNull(gotShift);
       // Make sure the worstShiftEvent's data matches the maxShiftScore.
-      assert.strictEqual(gotShift.args.data?.score ?? 0, maxShiftScore);
+      assert.strictEqual(gotShift.args.data?.weighted_score_delta ?? 0, maxShiftScore);
     }
   });
 

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

@@ -9,6 +9,7 @@ import * as Types from '../types/types.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
 import {ScoreClassification} from './PageLoadMetricsHandler.js';
+import {data as screenshotsHandlerData} from './ScreenshotsHandler.js';
 import {type HandlerName, HandlerState} from './types.js';
 
 // We start with a score of zero and step through all Layout Shift records from
@@ -45,11 +46,13 @@ interface LayoutShifts {
   // We use these to calculate root causes for a given LayoutShift
   // TODO(crbug/41484172): should be readonly
   prePaintEvents: Types.Events.PrePaint[];
+  paintImageEvents: Types.Events.PaintImage[];
   layoutInvalidationEvents: readonly Types.Events.LayoutInvalidationTracking[];
   scheduleStyleInvalidationEvents: readonly Types.Events.ScheduleStyleInvalidationTracking[];
   styleRecalcInvalidationEvents: readonly Types.Events.StyleRecalcInvalidationTracking[];
   renderFrameImplCreateChildFrameEvents: readonly Types.Events.RenderFrameImplCreateChildFrame[];
   domLoadingEvents: readonly Types.Events.DomLoading[];
+  layoutImageUnsizedEvents: readonly Types.Events.LayoutImageUnsized[];
   beginRemoteFontLoadEvents: readonly Types.Events.BeginRemoteFontLoad[];
   scoreRecords: readonly ScoreRecord[];
   // TODO(crbug/41484172): should be readonly
@@ -80,6 +83,7 @@ const scheduleStyleInvalidationEvents: Types.Events.ScheduleStyleInvalidationTra
 const styleRecalcInvalidationEvents: Types.Events.StyleRecalcInvalidationTracking[] = [];
 const renderFrameImplCreateChildFrameEvents: Types.Events.RenderFrameImplCreateChildFrame[] = [];
 const domLoadingEvents: Types.Events.DomLoading[] = [];
+const layoutImageUnsizedEvents: Types.Events.LayoutImageUnsized[] = [];
 const beginRemoteFontLoadEvents: Types.Events.BeginRemoteFontLoad[] = [];
 
 const backendNodeIds = new Set<Protocol.DOM.BackendNodeId>();
@@ -90,6 +94,8 @@ const backendNodeIds = new Set<Protocol.DOM.BackendNodeId>();
 // node of such shift.
 const prePaintEvents: Types.Events.PrePaint[] = [];
 
+const paintImageEvents: Types.Events.PaintImage[] = [];
+
 let sessionMaxScore = 0;
 
 let clsWindowID = -1;
@@ -124,7 +130,9 @@ export function reset(): void {
   scheduleStyleInvalidationEvents.length = 0;
   styleRecalcInvalidationEvents.length = 0;
   prePaintEvents.length = 0;
+  paintImageEvents.length = 0;
   renderFrameImplCreateChildFrameEvents.length = 0;
+  layoutImageUnsizedEvents.length = 0;
   domLoadingEvents.length = 0;
   beginRemoteFontLoadEvents.length = 0;
   backendNodeIds.clear();
@@ -164,9 +172,15 @@ export function handleEvent(event: Types.Events.Event): void {
   if (Types.Events.isDomLoading(event)) {
     domLoadingEvents.push(event);
   }
+  if (Types.Events.isLayoutImageUnsized(event)) {
+    layoutImageUnsizedEvents.push(event);
+  }
   if (Types.Events.isBeginRemoteFontLoad(event)) {
     beginRemoteFontLoadEvents.push(event);
   }
+  if (Types.Events.isPaintImage(event)) {
+    paintImageEvents.push(event);
+  }
 }
 
 function traceWindowFromTime(time: Types.Timing.MicroSeconds): Types.Timing.TraceWindowMicroSeconds {
@@ -183,6 +197,13 @@ function updateTraceWindowMax(
   traceWindow.range = Types.Timing.MicroSeconds(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 buildScoreRecords(): void {
   const {traceBounds} = metaHandlerData();
   scoreRecords.push({ts: traceBounds.min, score: 0});
@@ -243,7 +264,9 @@ export async function finalize(): Promise<void> {
   layoutInvalidationEvents.sort((a, b) => a.ts - b.ts);
   renderFrameImplCreateChildFrameEvents.sort((a, b) => a.ts - b.ts);
   domLoadingEvents.sort((a, b) => a.ts - b.ts);
+  layoutImageUnsizedEvents.sort((a, b) => a.ts - b.ts);
   beginRemoteFontLoadEvents.sort((a, b) => a.ts - b.ts);
+  paintImageEvents.sort((a, b) => a.ts - b.ts);
 
   // Each function transforms the data used by the next, as such the invoke order
   // is important.
@@ -364,6 +387,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
           },
           parsedData: {
             timeFromNavigation,
+            screenshots: findScreenshots(event.ts),
             cumulativeWeightedScoreInWindow: currentCluster.clusterCumulativeScore,
             // The score of the session window is temporarily set to 0 just
             // to initialize it. Since we need to get the score of all shifts
@@ -452,7 +476,7 @@ async function buildLayoutShiftsClusters(): Promise<void> {
       }
 
       // Find the worst layout shift of the cluster.
-      const score = shift.args.data?.score;
+      const score = shift.args.data?.weighted_score_delta;
       if (score !== undefined && score > largestScore) {
         largestScore = score;
         worstShiftEvent = shift;
@@ -499,11 +523,13 @@ export function data(): LayoutShifts {
     styleRecalcInvalidationEvents: [],
     renderFrameImplCreateChildFrameEvents,
     domLoadingEvents,
+    layoutImageUnsizedEvents,
     beginRemoteFontLoadEvents,
     scoreRecords,
     // TODO(crbug/41484172): change the type so no need to clone
     backendNodeIds: [...backendNodeIds],
     clustersByNavigationId: new Map(clustersByNavigationId),
+    paintImageEvents,
   };
 }
 

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

@@ -25,6 +25,7 @@ let browserThreadId: Types.Events.ThreadID = Types.Events.ThreadID(-1);
 let gpuProcessId: Types.Events.ProcessID = Types.Events.ProcessID(-1);
 let gpuThreadId: Types.Events.ThreadID = Types.Events.ThreadID(-1);
 let viewportRect: DOMRect|null = null;
+let devicePixelRatio: number|null = null;
 
 const processNames: Map<Types.Events.ProcessID, Types.Events.ProcessName> = new Map();
 
@@ -195,6 +196,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const viewportWidth = rectAsArray[2];
     const viewportHeight = rectAsArray[5];
     viewportRect = new DOMRect(viewportX, viewportY, viewportWidth, viewportHeight);
+    devicePixelRatio = event.args.data.dpr;
   }
 
   // The TracingStartedInBrowser event includes the data on which frames are
@@ -440,6 +442,7 @@ export type MetaHandlerData = {
   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
@@ -473,6 +476,7 @@ export function data(): MetaHandlerData {
     gpuProcessId,
     gpuThreadId: gpuThreadId === Types.Events.ThreadID(-1) ? undefined : gpuThreadId,
     viewportRect: viewportRect || undefined,
+    devicePixelRatio: devicePixelRatio ?? undefined,
     mainFrameId,
     mainFrameURL,
     navigationsByFrameId,

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

@@ -438,10 +438,10 @@ export async function finalize(): Promise<void> {
               requestId,
               requestingFrameUrl,
               requestMethod: finalSendRequest.args.data.requestMethod,
-              resourceType: finalSendRequest.args.data.resourceType,
+              resourceType: finalSendRequest.args.data.resourceType ?? Protocol.Network.ResourceType.Other,
               statusCode: request.receiveResponse.args.data.statusCode,
               responseHeaders: request.receiveResponse.args.data.headers || [],
-              fetchPriorityHint: finalSendRequest.args.data.fetchPriorityHint,
+              fetchPriorityHint: finalSendRequest.args.data.fetchPriorityHint ?? 'auto',
               initiator: finalSendRequest.args.data.initiator,
               stackTrace: finalSendRequest.args.data.stackTrace,
               timing,

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

@@ -18,7 +18,7 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {data as metaHandlerData} from './MetaHandler.js';
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 
 /**
  * This represents the metric scores for all navigations, for all frames in a trace.

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Components from '../../../panels/timeline/components/components.js';
+import * as Utils from '../../../panels/timeline/utils/utils.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {
   getAllNodes,
@@ -192,7 +192,7 @@ describeWithEnvironment('RendererHandler', function() {
     const isLong = (event: Trace.Types.Events.Event) => Trace.Types.Events.isComplete(event) && event.dur > 1000;
     const isIncluded = (node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
         (!isRoot(node) || isInstant(event) || isLong(event)) &&
-        Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+        Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
     assert.strictEqual(prettyPrint(tree, isIncluded), `
 ............
 -RunTask [2.21ms]
@@ -391,7 +391,7 @@ describeWithEnvironment('RendererHandler', function() {
       assert(false, 'Main thread has no tree of events');
     }
     const isIncluded = (_node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
-        Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+        Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
     assert.strictEqual(prettyPrint(tree, isIncluded), `
 -RunTask [0.13ms]
 -RunTask [0.005ms]
@@ -814,7 +814,7 @@ describeWithEnvironment('RendererHandler', function() {
     const pid = Trace.Types.Events.ProcessID(28274);
     const tid = Trace.Types.Events.ThreadID(775);
     beforeEach(async function() {
-      defaultTraceEvents = await TraceLoader.rawEvents(this, 'basic.json.gz');
+      defaultTraceEvents = await TraceLoader.rawEvents(this, 'missing-url.json.gz');
     });
 
     afterEach(() => {
@@ -934,7 +934,7 @@ describeWithEnvironment('RendererHandler', function() {
       const onlyLongTasksPredicate =
           (_node: Trace.Helpers.TreeHelpers.TraceEntryNode, event: Trace.Types.Events.Event) =>
               Boolean(event.dur && event.dur > 1000) &&
-          Boolean(Components.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
+          Boolean(Utils.EntryStyles.getEventStyle(event.name as Trace.Types.Events.Name));
       assert.strictEqual(prettyPrint(thread.tree, onlyLongTasksPredicate), `
 .............
 -RunTask [17.269ms]

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

@@ -224,7 +224,7 @@ describeWithEnvironment('SamplesHandler', function() {
     it('generates a CPU profile from a trace file', async () => {
       const data = await handleEventsFromTraceFile(this, 'recursive-blocking-js.json.gz');
       assert.strictEqual(data.profilesInProcess.size, 1);
-      const profileById = data.profilesInProcess.values().next().value;
+      const profileById = data.profilesInProcess.values().next().value!;
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const cpuProfile = cpuProfileData.rawProfile;
@@ -241,7 +241,7 @@ describeWithEnvironment('SamplesHandler', function() {
     it('generates a parsed CPU profile from a trace file', async () => {
       const data = await handleEventsFromTraceFile(this, 'recursive-blocking-js.json.gz');
       assert.strictEqual(data.profilesInProcess.size, 1);
-      const profileById = data.profilesInProcess.values().next().value;
+      const profileById = data.profilesInProcess.values().next().value!;
       assert.strictEqual(profileById.size, 1);
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const parsedProfile = cpuProfileData.parsedProfile;

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

@@ -52,7 +52,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const data = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const data = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       assert.strictEqual(data.length, 2);
     });
   });
@@ -67,7 +67,8 @@ describe('ScreenshotsHandler', function() {
         return msDifference;
       });
     }
-    it('are corrected if frame sequence number is present', async function() {
+    // Skip while we resolve the getPresentationTimestamp mystery.
+    it.skip('[crbug.com/41363012] are corrected if frame sequence number is present', async function() {
       // This trace was collected after https://crrev.com/c/4957973 landed.
       const events = await TraceLoader.rawEvents(this, 'about-blank-first.json.gz');
       for (const event of events) {
@@ -77,7 +78,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 
@@ -103,7 +104,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Meta.finalize();
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
-      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data();
+      const syntheticScreenshots = Trace.Handlers.ModelHandlers.Screenshots.data().all;
       const originalScreenshotEvents = events.filter(Trace.Types.Events.isScreenshot);
       assert.strictEqual(syntheticScreenshots.length, originalScreenshotEvents.length);
 

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

@@ -5,7 +5,7 @@
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import {type HandlerName} from './types.js';
+import type {HandlerName} from './types.js';
 
 // Each thread contains events. Events indicate the thread and process IDs, which are
 // used to store the event in the correct process thread entry below.
@@ -49,8 +49,9 @@ export async function finalize(): Promise<void> {
       ph,
       pid,
       tid,
-      // `getPresentationTimestamp(snapshotEvent) - snapshotEvent.ts` is how many microsec the screenshot was adjusted to the right/later
-      ts: getPresentationTimestamp(snapshotEvent),
+      // TODO(paulirish, crbug.com/41363012): investigate why getPresentationTimestamp(snapshotEvent) seems less accurate. Resolve screenshot timing innaccuracy.
+      // `getPresentationTimestamp(snapshotEvent) - snapshotEvent.ts` is how many microsec the screenshot should be adjusted to the right/later
+      ts: snapshotEvent.ts,
       args: {
         dataUri: `data:image/jpg;base64,${snapshotEvent.args.snapshot}`,
       },
@@ -65,6 +66,7 @@ export async function finalize(): Promise<void> {
  * We match that up with the "PipelineReporter" trace events as they terminate at presentation.
  * Presentation == when the pixels hit the screen. AKA Swap on the GPU
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Types.Timing.MicroSeconds {
   const frameSequence = parseInt(screenshotEvent.id, 16);
   // If it's 1, then it's an old trace (before https://crrev.com/c/4957973) and cannot be corrected.
@@ -84,8 +86,8 @@ function getPresentationTimestamp(screenshotEvent: Types.Events.Screenshot): Typ
 }
 
 // TODO(crbug/41484172): should be readonly
-export function data(): Types.Events.SyntheticScreenshot[] {
-  return syntheticScreenshots;
+export function data(): ({all: Types.Events.SyntheticScreenshot[]}) {
+  return {all: syntheticScreenshots};
 }
 
 export function deps(): HandlerName[] {