chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/models/trace/Processor.ts

@@ -319,6 +319,10 @@ export class TraceProcessor extends EventTarget {
     const processedNavigation = LanternComputationData.createProcessedNavigation(parsedTrace, frameId, navigationId);
 
     const networkAnalysis = Lantern.Core.NetworkAnalyzer.analyze(requests);
+    if (!networkAnalysis) {
+      return;
+    }
+
     const simulator: Lantern.Simulation.Simulator<Types.Events.SyntheticNetworkRequest> =
         Lantern.Simulation.Simulator.createSimulator({
           // TODO(crbug.com/372674229): if devtools throttling was on, does this network analysis capture
@@ -451,7 +455,7 @@ export class TraceProcessor extends EventTarget {
         } else if (!expectedErrors.some(err => e.message === err)) {
           // To reduce noise from tests, only print errors that are not expected to occur because a trace is
           // too old (for which there is no single check).
-          console.error(e.message);
+          console.error(e);
         }
       }
 

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

@@ -0,0 +1,117 @@
+// 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 {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
+
+describeWithEnvironment('ThirdParties', function() {
+  describe('Entities', function() {
+    it('correctly makes up entities', async function() {
+      const expectedEntities = new Map<string, string>([
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'googleapis.com'],
+        ['https://emp.bbci.co.uk/emp/bump-4/bump-4.js', 'bbci.co.uk'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'gstatic.com'],
+        ['chrome-extension://chromeextension/something/exciting.js', 'chromeextension'],
+      ]);
+
+      for (const [url, expectedEntity] of expectedEntities.entries()) {
+        const gotEntity =
+            Trace.Extras.ThirdParties.makeUpEntity(new Map<string, Trace.Extras.ThirdParties.Entity>(), url)?.name ??
+            '';
+        assert.deepEqual(gotEntity, expectedEntity);
+      }
+    });
+    it('coreectly makes up chrome extension entity', async function() {
+      const url = 'chrome-extension://chromeextension/something/exciting.js';
+      const gotEntity =
+          Trace.Extras.ThirdParties.makeUpEntity(new Map<string, Trace.Extras.ThirdParties.Entity>(), url);
+      assert.exists(gotEntity);
+
+      assert.deepEqual(gotEntity.name, 'chromeextension');
+      assert.deepEqual(gotEntity.category, 'Chrome Extension');
+      assert.deepEqual(gotEntity.homepage, 'https://chromewebstore.google.com/detail/chromeextension');
+    });
+    it('gets correct entitiesByRequest', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const got = Trace.Extras.ThirdParties.getEntitiesByRequest(reqs);
+      const gotEntityByRequest = [...got.entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'Google Fonts'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'Google Fonts'],
+      ]);
+    });
+  });
+  describe('byTraceBounds', function() {
+    it('full trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const {entityByRequest} = Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(
+          parsedTrace, parsedTrace.Meta.traceBounds, reqs);
+
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['https://fonts.googleapis.com/css2?family=Orelega+One&display=swap', 'Google Fonts'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+        ['https://fonts.gstatic.com/s/orelegaone/v1/3qTpojOggD2XtAdFb-QXZFt93kY.woff2', 'Google Fonts'],
+      ]);
+    });
+    it('partial trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      // Font requests of load-simple.json.gz begin & end before/after this bounds.
+      const min = Trace.Types.Timing.MicroSeconds(1634222300000);
+      const max = Trace.Types.Timing.MicroSeconds(1634222320000);
+      const middle = {min, max, range: Trace.Types.Timing.MicroSeconds(max - min)};
+
+      const {entityByRequest} =
+          Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(parsedTrace, middle, reqs);
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+
+      // Only these localhost requests overlap traceBounds.
+      assert.deepEqual(gotEntityByRequest, [
+        ['http://localhost:8080/', 'localhost'],
+        ['http://localhost:8080/styles.css', 'localhost'],
+        ['http://localhost:8080/blocking.js', 'localhost'],
+        ['http://localhost:8080/module.js', 'localhost'],
+      ]);
+    });
+    it('no requests within trace bounds', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      const reqs = parsedTrace.NetworkRequests.byTime;
+
+      const min = Trace.Types.Timing.MicroSeconds(1634230000000);
+      const max = Trace.Types.Timing.MicroSeconds(1634231000000);
+      const middle = {min, max, range: Trace.Types.Timing.MicroSeconds(max - min)};
+
+      const {entityByRequest} =
+          Trace.Extras.ThirdParties.getSummariesAndEntitiesForTraceBounds(parsedTrace, middle, reqs);
+      const gotEntityByRequest = [...entityByRequest.entries()].map(([req, entity]) => {
+        return [req.args.data.url, entity.name];
+      });
+      assert.deepEqual(gotEntityByRequest, []);
+    });
+  });
+});

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.ts

@@ -46,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
@@ -81,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>();
@@ -91,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;
@@ -125,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();
@@ -165,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 {
@@ -251,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.
@@ -508,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/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/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]
@@ -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/helpers/Timing.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {microsecondsTraceWindow} from '../../../testing/TraceHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
@@ -351,4 +352,32 @@ describeWithEnvironment('Timing helpers', () => {
       assert.isFalse(timestampIsInBounds(bounds, MicroSeconds(11)));
     });
   });
+
+  describe('WindowFitsInsideBounds', () => {
+    const {windowFitsInsideBounds} = Trace.Helpers.Timing;
+    const {MicroSeconds} = Trace.Types.Timing;
+
+    const bounds: Trace.Types.Timing.TraceWindowMicroSeconds = {
+      min: MicroSeconds(5),
+      max: MicroSeconds(15),
+      range: MicroSeconds(10),
+    };
+
+    it('is true if the window fits within the bounds', () => {
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 8), bounds}));
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 14), bounds}));
+      assert.isTrue(windowFitsInsideBounds({window: microsecondsTraceWindow(5, 15), bounds}));
+    });
+
+    it('is false if the window does not fully fit within the bounds', () => {
+      // Outside the left hand edge
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(0, 8), bounds}));
+      // Outside the right hand edge
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(10, 20), bounds}));
+      // Outside entirely before
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(0, 5), bounds}));
+      // Outside entirely after
+      assert.isFalse(windowFitsInsideBounds({window: microsecondsTraceWindow(20, 25), bounds}));
+    });
+  });
 });

package/front_end/models/trace/helpers/Timing.ts

@@ -118,6 +118,14 @@ export function traceWindowMillisecondsToMicroSeconds(bounds: Types.Timing.Trace
     range: millisecondsToMicroseconds(bounds.range),
   };
 }
+export function traceWindowMicroSecondsToMilliSeconds(bounds: Types.Timing.TraceWindowMicroSeconds):
+    Types.Timing.TraceWindowMilliSeconds {
+  return {
+    min: microSecondsToMilliseconds(bounds.min),
+    max: microSecondsToMilliseconds(bounds.max),
+    range: microSecondsToMilliseconds(bounds.range),
+  };
+}
 
 export function traceWindowFromMilliSeconds(
     min: Types.Timing.MilliSeconds, max: Types.Timing.MilliSeconds): Types.Timing.TraceWindowMicroSeconds {
@@ -178,6 +186,16 @@ export interface WindowFitsInsideBounds {
   window: Types.Timing.TraceWindowMicroSeconds;
   bounds: Types.Timing.TraceWindowMicroSeconds;
 }
+
+/**
+ * Returns true if the window fits entirely within the bounds.
+ * Note that if the window is equivalent to the bounds, that is considered to fit
+ */
 export function windowFitsInsideBounds(data: WindowFitsInsideBounds): boolean {
   return data.window.min >= data.bounds.min && data.window.max <= data.bounds.max;
 }
+
+export function windowsEqual(
+    w1: Types.Timing.TraceWindowMicroSeconds, w2: Types.Timing.TraceWindowMicroSeconds): boolean {
+  return w1.min === w2.min && w1.max === w2.max;
+}