chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -6,11 +6,7 @@ import type * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 
 import {ContentData, type ContentDataOrError} from './ContentData.js';
-import {
-  type ContentProvider,
-  type DeferredContent,
-  type SearchMatch,
-} from './ContentProvider.js';
+import type {ContentProvider, DeferredContent, SearchMatch} from './ContentProvider.js';
 import {performSearchInContentData} from './TextUtils.js';
 
 export class StaticContentProvider implements ContentProvider {

package/front_end/models/text_utils/TextUtils.ts

@@ -32,7 +32,7 @@ import * as Platform from '../../core/platform/platform.js';
 
 import {ContentData, type ContentDataOrError} from './ContentData.js';
 import {SearchMatch} from './ContentProvider.js';
-import {type Text} from './Text.js';
+import type {Text} from './Text.js';
 
 const KEY_VALUE_FILTER_REGEXP = /(?:^|\s)(\-)?([\w\-]+):([^\s]+)/;
 const REGEXP_FILTER_REGEXP = /(?:^|\s)(\-)?\/([^\/\\]+(\\.[^\/]*)*)\//;

package/front_end/models/text_utils/WasmDisassembly.ts

@@ -5,7 +5,7 @@
 import * as Platform from '../../core/platform/platform.js';
 
 import {ContentData} from './ContentData.js';
-import { type DeferredContent } from './ContentProvider.js';
+import type {DeferredContent} from './ContentProvider.js';
 
 interface FunctionBodyOffset {
   start: number;

package/front_end/models/timeline_model/TimelineModelFilter.ts

@@ -24,11 +24,11 @@ export class TimelineVisibleEventsFilter extends TimelineModelFilter {
 
   static eventType(event: Trace.Types.Events.Event): Trace.Types.Events.Name {
     // Any blink.console category events are treated as ConsoleTime events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.console')) {
+    if (event.cat.includes('blink.console')) {
       return Trace.Types.Events.Name.CONSOLE_TIME;
     }
     // Any blink.user_timing egory events are treated as UserTiming events
-    if (Trace.Helpers.Trace.eventHasCategory(event, 'blink.user_timing')) {
+    if (event.cat.includes('blink.user_timing')) {
       return Trace.Types.Events.Name.USER_TIMING;
     }
     return event.name as Trace.Types.Events.Name;

package/front_end/models/timeline_model/TimelineProfileTree.test.ts

@@ -35,9 +35,9 @@ describeWithEnvironment('TimelineProfileTree', () => {
       assert.strictEqual(children.size, 3);
 
       const nodesIterator = children.values();
-      assert.strictEqual(nodesIterator.next().value.event, eventA);
-      assert.strictEqual(nodesIterator.next().value.event, eventB);
-      assert.strictEqual(nodesIterator.next().value.event, eventC);
+      assert.strictEqual(nodesIterator.next().value!.event, eventA);
+      assert.strictEqual(nodesIterator.next().value!.event, eventB);
+      assert.strictEqual(nodesIterator.next().value!.event, eventC);
     });
 
     it('builds a top-down tree from an event tree with multiple levels 1', () => {
@@ -65,14 +65,14 @@ describeWithEnvironment('TimelineProfileTree', () => {
       const rootChildIterator = rootChildren.values();
       const nodeA = rootChildIterator.next().value as TimelineModel.TimelineProfileTree.TopDownNode;
       assert.strictEqual(nodeA.event, eventA);
-      assert.strictEqual(rootChildIterator.next().value.event, eventB);
+      assert.strictEqual(rootChildIterator.next().value!.event, eventB);
 
       const nodeAChildren = nodeA.children();
       assert.strictEqual(nodeAChildren.size, 2);
 
       const nodeAChildIterator = nodeAChildren.values();
-      assert.strictEqual(nodeAChildIterator.next().value.event, eventC);
-      assert.strictEqual(nodeAChildIterator.next().value.event, eventD);
+      assert.strictEqual(nodeAChildIterator.next().value!.event, eventC);
+      assert.strictEqual(nodeAChildIterator.next().value!.event, eventD);
     });
 
     it('builds a top-down tree from an event tree with multiple levels 2', () => {
@@ -98,7 +98,7 @@ describeWithEnvironment('TimelineProfileTree', () => {
       assert.strictEqual(rootChildren.size, 2);
 
       const rootChildIterator = rootChildren.values();
-      assert.strictEqual(rootChildIterator.next().value.event, eventA);
+      assert.strictEqual(rootChildIterator.next().value!.event, eventA);
       const nodeB = rootChildIterator.next().value as TimelineModel.TimelineProfileTree.TopDownNode;
       assert.strictEqual(nodeB.event, eventB);
 
@@ -106,8 +106,8 @@ describeWithEnvironment('TimelineProfileTree', () => {
       assert.strictEqual(nodeBChildren.size, 2);
 
       const nodeBChildIterator = nodeBChildren.values();
-      assert.strictEqual(nodeBChildIterator.next().value.event, eventC);
-      assert.strictEqual(nodeBChildIterator.next().value.event, eventD);
+      assert.strictEqual(nodeBChildIterator.next().value!.event, eventC);
+      assert.strictEqual(nodeBChildIterator.next().value!.event, eventD);
     });
 
     it('calculates the self time for each node in an event tree correctly', () => {
@@ -137,7 +137,7 @@ describeWithEnvironment('TimelineProfileTree', () => {
 
       const rootChildIterator = rootChildren.values();
       assert.strictEqual(
-          rootChildIterator.next().value.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventA.dur));
+          rootChildIterator.next().value!.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventA.dur));
 
       const nodeB = rootChildIterator.next().value as TimelineModel.TimelineProfileTree.TopDownNode;
       const nodeBSelfTime = Trace.Types.Timing.MicroSeconds(eventB.dur - eventC.dur - eventD.dur);
@@ -148,9 +148,9 @@ describeWithEnvironment('TimelineProfileTree', () => {
 
       const nodeBChildIterator = nodeBChildren.values();
       assert.strictEqual(
-          nodeBChildIterator.next().value.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventC.dur));
+          nodeBChildIterator.next().value!.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventC.dur));
 
-      const nodeD = nodeBChildIterator.next().value;
+      const nodeD = nodeBChildIterator.next().value!;
       const nodeDSelfTime = Trace.Types.Timing.MicroSeconds(eventD.dur - eventE.dur);
       assert.strictEqual(nodeD.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(nodeDSelfTime));
 
@@ -158,7 +158,7 @@ describeWithEnvironment('TimelineProfileTree', () => {
       assert.strictEqual(nodeDChildren.size, 1);
 
       const nodeDChildIterator = nodeDChildren.values();
-      const nodeE = nodeDChildIterator.next().value;
+      const nodeE = nodeDChildIterator.next().value!;
       assert.strictEqual(nodeE.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventE.dur));
     });
   });
@@ -183,9 +183,9 @@ describeWithEnvironment('TimelineProfileTree', () => {
       assert.strictEqual(children.size, 3);
 
       const nodesIterator = children.values();
-      assert.strictEqual(nodesIterator.next().value.event, eventA);
-      assert.strictEqual(nodesIterator.next().value.event, eventB);
-      assert.strictEqual(nodesIterator.next().value.event, eventC);
+      assert.strictEqual(nodesIterator.next().value!.event, eventA);
+      assert.strictEqual(nodesIterator.next().value!.event, eventB);
+      assert.strictEqual(nodesIterator.next().value!.event, eventC);
     });
 
     it('builds a bottom up tree from an event tree with multiple levels 1', () => {
@@ -227,12 +227,12 @@ describeWithEnvironment('TimelineProfileTree', () => {
       const nodeCChildren = nodeC.children();
       assert.strictEqual(nodeCChildren.size, 1);
       const nodeCChildIterator = nodeCChildren.values();
-      assert.strictEqual(nodeCChildIterator.next().value.event, eventA);
+      assert.strictEqual(nodeCChildIterator.next().value!.event, eventA);
 
       const nodeDChildren = nodeC.children();
       assert.strictEqual(nodeDChildren.size, 1);
       const nodeDChildIterator = nodeDChildren.values();
-      assert.strictEqual(nodeDChildIterator.next().value.event, eventA);
+      assert.strictEqual(nodeDChildIterator.next().value!.event, eventA);
 
       const nodeAChildren = nodeA.children();
       assert.strictEqual(nodeAChildren.size, 0);
@@ -281,12 +281,12 @@ describeWithEnvironment('TimelineProfileTree', () => {
       const nodeCChildren = nodeC.children();
       assert.strictEqual(nodeCChildren.size, 1);
       const nodeCChildIterator = nodeCChildren.values();
-      assert.strictEqual(nodeCChildIterator.next().value.event, eventB);
+      assert.strictEqual(nodeCChildIterator.next().value!.event, eventB);
 
       const nodeDChildren = nodeC.children();
       assert.strictEqual(nodeDChildren.size, 1);
       const nodeDChildIterator = nodeDChildren.values();
-      assert.strictEqual(nodeDChildIterator.next().value.event, eventB);
+      assert.strictEqual(nodeDChildIterator.next().value!.event, eventB);
 
       const nodeAChildren = nodeA.children();
       assert.strictEqual(nodeAChildren.size, 0);
@@ -323,7 +323,7 @@ describeWithEnvironment('TimelineProfileTree', () => {
 
       const rootChildIterator = rootChildren.values();
       assert.strictEqual(
-          rootChildIterator.next().value.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventA.dur));
+          rootChildIterator.next().value!.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventA.dur));
 
       const nodeC = rootChildIterator.next().value as TimelineModel.TimelineProfileTree.TopDownNode;
       assert.strictEqual(nodeC.selfTime, Trace.Helpers.Timing.microSecondsToMilliseconds(eventC.dur));

package/front_end/models/timeline_model/TimelineProfileTree.ts

@@ -6,7 +6,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Trace from '../../models/trace/trace.js';
 
 import {TimelineJSProfileProcessor} from './TimelineJSProfile.js';
-import {type TimelineModelFilter} from './TimelineModelFilter.js';
+import type {TimelineModelFilter} from './TimelineModelFilter.js';
 
 export class Node {
   totalTime: number;

package/front_end/models/trace/ModelImpl.test.ts

@@ -87,7 +87,7 @@ describeWithEnvironment('TraceModel', function() {
       // Process the previous trace again to test the trace sequencing
       await TraceLoader.rawEvents(this, 'web-dev.json.gz'),
       await TraceLoader.rawEvents(this, 'multiple-navigations.json.gz'),
-      await TraceLoader.rawEvents(this, 'basic.json.gz'),
+      await TraceLoader.rawEvents(this, 'missing-url.json.gz'),
     ];
     for (const traceFile of traceFiles) {
       await model.parse(traceFile);

package/front_end/models/trace/ModelImpl.ts

@@ -16,7 +16,6 @@ import * as Types from './types/types.js';
 
 export interface ParseConfig {
   metadata?: Types.File.MetaData;
-  // Unused but will eventually be consumed by UIUtils Linkifier, etc.
   isFreshRecording?: boolean;
 }
 
@@ -92,6 +91,7 @@ export class Model extends EventTarget {
   async parse(traceEvents: readonly Types.Events.Event[], config?: ParseConfig): Promise<void> {
     const metadata = config?.metadata || {};
     const isFreshRecording = config?.isFreshRecording || false;
+    const isCPUProfile = metadata?.dataOrigin === Types.File.DataOrigin.CPU_PROFILE;
     // During parsing, periodically update any listeners on each processors'
     // progress (if they have any updates).
     const onTraceUpdate = (event: Event): void => {
@@ -113,7 +113,10 @@ export class Model extends EventTarget {
       // Wait for all outstanding promises before finishing the async execution,
       // but perform all tasks in parallel.
       const syntheticEventsManager = Helpers.SyntheticEvents.SyntheticEventsManager.createAndActivate(traceEvents);
-      await this.#processor.parse(traceEvents, isFreshRecording);
+      await this.#processor.parse(traceEvents, {
+        isFreshRecording,
+        isCPUProfile,
+      });
       this.#storeParsedFileData(file, this.#processor.parsedTrace, this.#processor.insights);
       // We only push the file onto this.#traces here once we know it's valid
       // and there's been no errors in the parsing.
@@ -157,27 +160,15 @@ export class Model extends EventTarget {
    * If no index is given, the last stored parsed data is returned.
    */
   parsedTrace(index: number = this.#traces.length - 1): Handlers.Types.ParsedTrace|null {
-    if (!this.#traces[index]) {
-      return null;
-    }
-
-    return this.#traces[index].parsedTrace;
+    return this.#traces.at(index)?.parsedTrace ?? null;
   }
 
   traceInsights(index: number = this.#traces.length - 1): Insights.Types.TraceInsightSets|null {
-    if (!this.#traces[index]) {
-      return null;
-    }
-
-    return this.#traces[index].traceInsights;
+    return this.#traces.at(index)?.traceInsights ?? null;
   }
 
   metadata(index: number = this.#traces.length - 1): Types.File.MetaData|null {
-    if (!this.#traces[index]) {
-      return null;
-    }
-
-    return this.#traces[index].metadata;
+    return this.#traces.at(index)?.metadata ?? null;
   }
 
   overrideModifications(index: number, newModifications: Types.File.Modifications): void {
@@ -187,20 +178,12 @@ export class Model extends EventTarget {
   }
 
   rawTraceEvents(index: number = this.#traces.length - 1): readonly Types.Events.Event[]|null {
-    if (!this.#traces[index]) {
-      return null;
-    }
-
-    return this.#traces[index].traceEvents;
+    return this.#traces.at(index)?.traceEvents ?? null;
   }
 
   syntheticTraceEventsManager(index: number = this.#traces.length - 1): Helpers.SyntheticEvents.SyntheticEventsManager
       |null {
-    if (!this.#syntheticEventsManagerByTrace[index]) {
-      return null;
-    }
-
-    return this.#syntheticEventsManagerByTrace[index];
+    return this.#syntheticEventsManagerByTrace.at(index) ?? null;
   }
 
   size(): number {

package/front_end/models/trace/Processor.test.ts

@@ -13,13 +13,13 @@ describeWithEnvironment('TraceProcessor', function() {
 
     // Check parsing after instantiation.
     assert.isNull(processor.parsedTrace);
-    await processor.parse(file);
+    await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
     assert.isNotNull(processor.parsedTrace);
 
     // Check parsing without a reset.
     let thrown;
     try {
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
     } catch (e) {
       thrown = e as Error;
     }
@@ -30,7 +30,7 @@ describeWithEnvironment('TraceProcessor', function() {
     processor.reset();
     assert.isNull(processor.parsedTrace);
     assert.isNull(processor.insights);
-    await processor.parse(file);
+    await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
     assert.isNotNull(processor.parsedTrace);
     assert.isNotNull(processor.insights);
     // Cleanup.
@@ -39,8 +39,9 @@ describeWithEnvironment('TraceProcessor', function() {
     // Check simultaneous parsing without waiting.
     let promise;
     try {
-      promise = processor.parse(file);
-      await processor.parse(file);
+      promise = processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
+
     } catch (e) {
       thrown = e as Error;
     } finally {
@@ -53,7 +54,7 @@ describeWithEnvironment('TraceProcessor', function() {
     // Check if data is null immediately after resetting.
     assert.isNull(processor.parsedTrace);
     assert.isNull(processor.insights);
-    await processor.parse(file);
+    await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
     assert.isNotNull(processor.parsedTrace);
     assert.isNotNull(processor.insights);
     processor.reset();
@@ -62,7 +63,7 @@ describeWithEnvironment('TraceProcessor', function() {
 
     // Check resetting while parsing.
     try {
-      promise = processor.parse(file);
+      promise = processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       processor.reset();
     } catch (e) {
       thrown = e as Error;
@@ -76,7 +77,7 @@ describeWithEnvironment('TraceProcessor', function() {
     // Check parsing after resetting while parsing.
     assert.isNull(processor.parsedTrace);
     assert.isNull(processor.insights);
-    await processor.parse(file);
+    await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
     assert.isNotNull(processor.parsedTrace);
     assert.isNotNull(processor.insights);
   });
@@ -86,7 +87,7 @@ describeWithEnvironment('TraceProcessor', function() {
       Animations: Trace.Handlers.ModelHandlers.Animations,
     });
     const events = await TraceLoader.rawEvents(this, 'animation.json.gz');
-    await processor.parse(events);
+    await processor.parse(events, {isFreshRecording: true, isCPUProfile: false});
     assert.isNotNull(processor.parsedTrace);
     assert.deepEqual(Object.keys(processor.parsedTrace || {}), ['Meta', 'Animations']);
   });
@@ -129,7 +130,7 @@ describeWithEnvironment('TraceProcessor', function() {
     const rawEvents = await TraceLoader.rawEvents(this, 'web-dev-outermost-frames.json.gz');
     // This trace has 106,110 events. At default of 50k chunks we should see 2 updates.
     // Additional progress updates are emitted for handers, etc.
-    await processor.parse(rawEvents).then(() => {
+    await processor.parse(rawEvents, {isFreshRecording: true, isCPUProfile: false}).then(() => {
       assert.isAtLeast(updateEventCount, 2);
     });
   });
@@ -245,7 +246,7 @@ describeWithEnvironment('TraceProcessor', function() {
       const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
       const file = await TraceLoader.rawEvents(this, 'basic.json.gz');
 
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       if (!processor.insights) {
         throw new Error('No insights');
       }
@@ -269,7 +270,7 @@ describeWithEnvironment('TraceProcessor', function() {
       const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
       const file = await TraceLoader.rawEvents(this, 'load-simple.json.gz');
 
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       if (!processor.insights) {
         throw new Error('No insights');
       }
@@ -286,7 +287,7 @@ describeWithEnvironment('TraceProcessor', function() {
       });
       const file = await TraceLoader.rawEvents(this, 'load-simple.json.gz');
 
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       if (!processor.insights) {
         throw new Error('No insights');
       }
@@ -305,7 +306,7 @@ describeWithEnvironment('TraceProcessor', function() {
       const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
       const file = await TraceLoader.rawEvents(this, 'load-simple.json.gz');
 
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       if (!processor.insights) {
         throw new Error('No insights');
       }
@@ -331,7 +332,7 @@ describeWithEnvironment('TraceProcessor', function() {
       const processor = Trace.Processor.TraceProcessor.createWithAllHandlers();
       const file = await TraceLoader.rawEvents(this, 'multiple-navigations.json.gz');
 
-      await processor.parse(file);
+      await processor.parse(file, {isFreshRecording: true, isCPUProfile: false});
       if (!processor.insights) {
         throw new Error('No insights');
       }

package/front_end/models/trace/Processor.ts

@@ -49,6 +49,19 @@ declare global {
   }
 }
 
+export interface ParseOptions {
+  /**
+   * If the trace was just recorded on the current page, rather than an imported file.
+   * @default false
+   */
+  isFreshRecording?: boolean;
+  /**
+   * If the trace is a CPU Profile rather than a Chrome tracing trace.
+   * @default false
+   */
+  isCPUProfile?: boolean;
+}
+
 export class TraceProcessor extends EventTarget {
   // We force the Meta handler to be enabled, so the TraceHandlers type here is
   // the model handlers the user passes in and the Meta handler.
@@ -151,14 +164,14 @@ export class TraceProcessor extends EventTarget {
     this.#status = Status.IDLE;
   }
 
-  async parse(traceEvents: readonly Types.Events.Event[], freshRecording = false): Promise<void> {
+  async parse(traceEvents: readonly Types.Events.Event[], options: ParseOptions): Promise<void> {
     if (this.#status !== Status.IDLE) {
       throw new Error(`Trace processor can't start parsing when not idle. Current state: ${this.#status}`);
     }
     try {
       this.#status = Status.PARSING;
-      await this.#computeParsedTrace(traceEvents, freshRecording);
-      if (this.#data) {
+      await this.#computeParsedTrace(traceEvents, Boolean(options.isFreshRecording));
+      if (this.#data && !options.isCPUProfile) {  // We do not calculate insights for CPU Profiles.
         this.#computeInsights(this.#data, traceEvents);
       }
       this.#status = Status.FINISHED_PARSING;
@@ -306,10 +319,16 @@ 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
+          // that? Do we need to set 'devtools' throttlingMethod?
           networkAnalysis,
-          throttlingMethod: 'simulate',
+          throttlingMethod: 'provided',
         });
 
     const computeData = {graph, simulator, processedNavigation};
@@ -342,19 +361,28 @@ export class TraceProcessor extends EventTarget {
       Object.assign(data, {[name]: insightResult});
     }
 
-    let id, label, navigation;
+    let id, urlString, navigation;
     if (context.navigation) {
       id = context.navigationId;
-      label = context.navigation.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
+      urlString = context.navigation.args.data?.documentLoaderURL ?? parsedTrace.Meta.mainFrameURL;
       navigation = context.navigation;
     } else {
       id = Types.Events.NO_NAVIGATION;
-      label = parsedTrace.Meta.mainFrameURL;
+      urlString = parsedTrace.Meta.mainFrameURL;
+    }
+
+    let url;
+    try {
+      url = new URL(urlString);
+    } catch {
+      // We're pretty sure this only happens for our test fixture: missing-url.json.gz. Shouldn't
+      // happen for real traces.
+      return;
     }
 
     const insightSets = {
       id,
-      label,
+      url,
       navigation,
       frameId: context.frameId,
       bounds: context.bounds,
@@ -403,7 +431,7 @@ export class TraceProcessor extends EventTarget {
       const frameId = navigation.args.frame;
       const navigationId = navigation.args.data?.navigationId as string;
 
-      // The lantern sub-context is optional on NavigationInsightContext, so not setting it is OK.
+      // The lantern sub-context is optional on InsightSetContext, so not setting it is OK.
       // This is also a hedge against an error inside Lantern resulting in breaking the entire performance panel.
       // Additionally, many trace fixtures are too old to be processed by Lantern.
       let lantern;
@@ -427,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/FilmStrip.ts

@@ -30,7 +30,7 @@ export type HandlerDataWithScreenshots = Handlers.Types.EnabledHandlerDataWithMe
 // Cache film strips based on:
 // 1. The trace parsed data object
 // 2. The start time.
-const filmStripCache = new Map<HandlerDataWithScreenshots, Map<Types.Timing.MicroSeconds, Data>>();
+const filmStripCache = new WeakMap<HandlerDataWithScreenshots, Map<Types.Timing.MicroSeconds, Data>>();
 
 export function fromParsedTrace(
     parsedTrace: HandlerDataWithScreenshots, customZeroTime?: Types.Timing.MicroSeconds): Data {
@@ -43,7 +43,7 @@ export function fromParsedTrace(
     return fromCache;
   }
 
-  for (const screenshotEvent of parsedTrace.Screenshots) {
+  for (const screenshotEvent of parsedTrace.Screenshots.all) {
     if (screenshotEvent.ts < zeroTime) {
       continue;
     }

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, []);
+    });
+  });
+});