chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -0,0 +1,159 @@
+// 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 type * as Platform from '../../../core/platform/platform.js';
+import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
+import * as Types from '../types/types.js';
+
+import type {ParsedTrace} from './types.js';
+
+export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
+
+export interface EntityMappings {
+  createdEntityCache: Map<string, Entity>;
+  entityByEvent: Map<Types.Events.Event, Entity>;
+  /**
+   * This holds the entities that had to be created, because they were not found using the
+   * ThirdPartyWeb database.
+   */
+  eventsByEntity: Map<Entity, Types.Events.Event[]>;
+}
+
+export function getEntityForEvent(event: Types.Events.Event, entityByUrlCache: Map<string, Entity>): Entity|undefined {
+  const url = getNonResolvedURL(event);
+  if (!url) {
+    return;
+  }
+  return getEntityForUrl(url, entityByUrlCache);
+}
+
+export function getEntityForUrl(url: string, entityByUrlCache: Map<string, Entity>): Entity|undefined {
+  if (entityByUrlCache.has(url)) {
+    return entityByUrlCache.get(url);
+  }
+  const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(entityByUrlCache, url);
+  return entity;
+}
+
+export function getNonResolvedURL(
+    entry: Types.Events.Event, parsedTrace?: ParsedTrace): Platform.DevToolsPath.UrlString|null {
+  if (Types.Events.isProfileCall(entry)) {
+    return entry.callFrame.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (Types.Events.isSyntheticNetworkRequest(entry)) {
+    return entry.args.data.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (entry.args?.data?.stackTrace && entry.args.data.stackTrace.length > 0) {
+    return entry.args.data.stackTrace[0].url as Platform.DevToolsPath.UrlString;
+  }
+
+  // ParseHTML events store the URL under beginData, not data.
+  if (Types.Events.isParseHTML(entry)) {
+    return entry.args.beginData.url as Platform.DevToolsPath.UrlString;
+  }
+
+  if (parsedTrace) {
+    // DecodeImage events use the URL from the relevant PaintImage event.
+    if (Types.Events.isDecodeImage(entry)) {
+      const paintEvent = parsedTrace.ImagePainting.paintImageForEvent.get(entry);
+      return paintEvent ? getNonResolvedURL(paintEvent, parsedTrace) : null;
+    }
+
+    // DrawLazyPixelRef events use the URL from the relevant PaintImage event.
+    if (Types.Events.isDrawLazyPixelRef(entry) && entry.args?.LazyPixelRef) {
+      const paintEvent = parsedTrace.ImagePainting.paintImageByDrawLazyPixelRef.get(entry.args.LazyPixelRef);
+      return paintEvent ? getNonResolvedURL(paintEvent, parsedTrace) : null;
+    }
+  }
+
+  // For all other events, try to see if the URL is provided, else return null.
+  if (entry.args?.data?.url) {
+    return entry.args.data.url as Platform.DevToolsPath.UrlString;
+  }
+
+  return null;
+}
+
+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 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 updateEventForEntities(entry: Types.Events.Event, entityMappings: EntityMappings): void {
+  const entity = getEntityForEvent(entry, entityMappings.createdEntityCache);
+  if (entity) {
+    if (entityMappings.eventsByEntity.has(entity)) {
+      const events = entityMappings.eventsByEntity.get(entity) ?? [];
+      events?.push(entry);
+    } else {
+      entityMappings.eventsByEntity.set(entity, [entry]);
+    }
+    entityMappings.entityByEvent.set(entry, entity);
+  }
+}

package/front_end/models/trace/helpers/SamplesIntegrator.test.ts

@@ -67,7 +67,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
         ...Trace.Types.Configuration.defaults(),
       };
       config.debugMode = true;
-      assert.strictEqual(Trace.Types.Configuration.defaults().debugMode, false, 'Default config should not be mutable');
+      assert.isFalse(Trace.Types.Configuration.defaults().debugMode, 'Default config should not be mutable');
 
       const integrator =
           new Trace.Helpers.SamplesIntegrator.SamplesIntegrator(parsedBasicProfile, PROFILE_ID, pid, tid, config);
@@ -84,10 +84,10 @@ describeWithEnvironment('SamplesIntegrator', function() {
       assert.strictEqual(jsSampleEvents[2].dur, 0);
       assert.strictEqual(jsSampleEvents[3].dur, 0);
 
-      assert.deepStrictEqual(jsSampleEvents[0].args.data.stackTrace.map(f => f.functionName), ['a']);
-      assert.deepStrictEqual(jsSampleEvents[1].args.data.stackTrace.map(f => f.functionName), ['a']);
-      assert.deepStrictEqual(jsSampleEvents[2].args.data.stackTrace.map(f => f.functionName), ['a', 'b']);
-      assert.deepStrictEqual(jsSampleEvents[3].args.data.stackTrace.map(f => f.functionName), ['a', 'b']);
+      assert.deepEqual(jsSampleEvents[0].args.data.stackTrace.map(f => f.functionName), ['a']);
+      assert.deepEqual(jsSampleEvents[1].args.data.stackTrace.map(f => f.functionName), ['a']);
+      assert.deepEqual(jsSampleEvents[2].args.data.stackTrace.map(f => f.functionName), ['a', 'b']);
+      assert.deepEqual(jsSampleEvents[3].args.data.stackTrace.map(f => f.functionName), ['a', 'b']);
     });
   });
 
@@ -106,7 +106,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
         throw new Error('Trace events were unexpectedly not found.');
       }
       const constructedCalls = samplesIntegrator.buildProfileCalls(traceEvents);
-      assert.strictEqual(constructedCalls.length, 5131);
+      assert.lengthOf(constructedCalls, 5131);
     });
 
     it('creates JS profile calls with a top-level V8 invocation', () => {
@@ -120,7 +120,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
       const callEvent = makeCompleteEvent(Trace.Types.Events.Name.FUNCTION_CALL, 0, 500);
       const traceEvents = [callEvent];
       const constructedCalls = integrator.buildProfileCalls(traceEvents);
-      assert.strictEqual(constructedCalls.length, 2);
+      assert.lengthOf(constructedCalls, 2);
       assert.strictEqual(constructedCalls[0].callFrame.functionName, 'a');
       assert.strictEqual(constructedCalls[0].ts, 100);
       assert.strictEqual(constructedCalls[0].dur, 400);
@@ -134,7 +134,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
           new Trace.Helpers.SamplesIntegrator.SamplesIntegrator(parsedBasicProfile, PROFILE_ID, pid, tid);
       const traceEvents: Trace.Types.Events.Complete[] = [];
       const constructedCalls = integrator.buildProfileCalls(traceEvents);
-      assert.strictEqual(constructedCalls.length, 2);
+      assert.lengthOf(constructedCalls, 2);
       assert.strictEqual(constructedCalls[0].callFrame.functionName, 'a');
       assert.strictEqual(constructedCalls[0].ts, 100);
       assert.strictEqual(constructedCalls[0].dur, 300);
@@ -172,7 +172,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
       const callEvent = makeCompleteEvent(Trace.Types.Events.Name.FUNCTION_CALL, 250, 250);
       const traceEvents = [callEvent];
       const constructedCalls = integrator.buildProfileCalls(traceEvents);
-      assert.strictEqual(constructedCalls.length, 2);
+      assert.lengthOf(constructedCalls, 2);
       assert.strictEqual(constructedCalls[0].callFrame.functionName, 'a');
       assert.strictEqual(constructedCalls[0].ts, 100);
       assert.strictEqual(constructedCalls[0].dur, 150);
@@ -217,7 +217,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
 
       const traceEvents = [evaluateScript, v8Run, parseFunction];
       const constructedCalls = integrator.buildProfileCalls(traceEvents);
-      assert.strictEqual(constructedCalls.length, 2);
+      assert.lengthOf(constructedCalls, 2);
       assert.strictEqual(constructedCalls[0].callFrame.functionName, 'a');
       assert.strictEqual(constructedCalls[0].ts, 100);
       assert.strictEqual(constructedCalls[0].dur, 200);
@@ -261,9 +261,9 @@ describeWithEnvironment('SamplesIntegrator', function() {
       const integrator = new Trace.Helpers.SamplesIntegrator.SamplesIntegrator(parsedProfile, PROFILE_ID, pid, tid);
       const constructedCalls = integrator.buildProfileCalls(traceEvents);
 
-      assert.strictEqual(constructedCalls.length, 3);
+      assert.lengthOf(constructedCalls, 3);
       const framesForFunctionA = constructedCalls.filter(c => c.callFrame.functionName === 'a');
-      assert.strictEqual(framesForFunctionA.length, 2);
+      assert.lengthOf(framesForFunctionA, 2);
       const expectedATimestamp = 20;
       assert.strictEqual(framesForFunctionA[0].ts, 20);
       // First frame for function A should be finished when the
@@ -298,7 +298,7 @@ describeWithEnvironment('SamplesIntegrator', function() {
       const filteredNodes = constructedCalls.filter(
           c => c.nodeId === rootNode.id || c.nodeId === idleNode.id || c.nodeId === programNode.id ||
               c.nodeId === gcNode.id);
-      assert.strictEqual(filteredNodes.length, 0);
+      assert.lengthOf(filteredNodes, 0);
     });
   });
 });

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

@@ -147,6 +147,14 @@ export function traceWindowFromMicroSeconds(
   return traceWindow;
 }
 
+export function traceWindowFromEvent(event: Types.Events.Event): Types.Timing.TraceWindowMicroSeconds {
+  return {
+    min: event.ts,
+    max: Types.Timing.MicroSeconds(event.ts + (event.dur ?? 0)),
+    range: event.dur ?? Types.Timing.MicroSeconds(0),
+  };
+}
+
 export interface BoundsIncludeTimeRange {
   timeRange: Types.Timing.TraceWindowMicroSeconds;
   bounds: Types.Timing.TraceWindowMicroSeconds;

package/front_end/models/trace/helpers/Trace.test.ts

@@ -421,7 +421,7 @@ describeWithEnvironment('Trace helpers', function() {
         '@ 40825.971 for   11.802: InputLatency::MouseMove',
         '@ 41818.833 for 2005.601: third measure',
       ]);
-      assert.strictEqual(synthEvents.length, 237);
+      assert.lengthOf(synthEvents, 237);
     });
     describe('createSortedSyntheticEvents()', () => {
       it('correctly creates synthetic events when instant animation events are present', async function() {
@@ -465,7 +465,7 @@ describeWithEnvironment('Trace helpers', function() {
           }
           assert.isTrue(instantEvents?.every(event => event.id2?.local && id.includes(event.id2?.local)));
 
-          assert.strictEqual(instantEvents.length, 2);
+          assert.lengthOf(instantEvents, 2);
 
           // Check that the non-composited data matches the expected.
           const nonCompositedEvents = instantEvents.filter(event => event.args.data.compositeFailed);

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

@@ -11,7 +11,6 @@ import * as Types from '../types/types.js';
 import {SyntheticEventsManager} from './SyntheticEvents.js';
 import {eventTimingsMicroSeconds} from './Timing.js';
 
-type MatchedPairType<T extends Types.Events.PairableAsync> = Types.Events.SyntheticEventPair<T>;
 type MatchingPairableAsyncEvents = {
   begin: Types.Events.PairableAsyncBegin|null,
   end: Types.Events.PairableAsyncEnd|null,
@@ -19,13 +18,18 @@ type MatchingPairableAsyncEvents = {
 };
 
 /**
- * Extracts the raw stack trace of known trace events. Most likely than
+ * Extracts the raw stack trace in known trace events. Most likely than
  * not you want to use `getZeroIndexedStackTraceForEvent`, which returns
  * the stack with zero based numbering. Since some trace events are
  * one based this function can yield unexpected results when used
  * indiscriminately.
+ *
+ * Note: this only returns the stack trace contained in the payload of
+ * an event, which only contains the synchronous portion of the call
+ * stack. If you want to obtain the whole stack trace you might need to
+ * use the @see Trace.Extras.StackTraceForEvent util.
  */
-export function stackTraceForEvent(event: Types.Events.Event): Types.Events.CallFrame[]|null {
+export function stackTraceInEvent(event: Types.Events.Event): Types.Events.CallFrame[]|null {
   if (event.args?.data?.stackTrace) {
     return event.args.data.stackTrace;
   }
@@ -36,10 +40,35 @@ export function stackTraceForEvent(event: Types.Events.Event): Types.Events.Call
     return event.args.beginData?.stackTrace || null;
   }
   if (Types.Extensions.isSyntheticExtensionEntry(event)) {
-    return stackTraceForEvent(event.rawSourceEvent);
+    return stackTraceInEvent(event.rawSourceEvent);
   }
   if (Types.Events.isSyntheticUserTiming(event)) {
-    return stackTraceForEvent(event.rawSourceEvent);
+    return stackTraceInEvent(event.rawSourceEvent);
+  }
+  if (Types.Events.isFunctionCall(event)) {
+    const data = event.args.data;
+    if (!data) {
+      return null;
+    }
+    const {columnNumber, lineNumber, url, scriptId, functionName} = data;
+    if (lineNumber === undefined || functionName === undefined || columnNumber === undefined ||
+        scriptId === undefined || url === undefined) {
+      return null;
+    }
+    return [{columnNumber, lineNumber, url, scriptId, functionName}];
+  }
+  if (Types.Events.isProfileCall(event)) {
+    // Of type Protocol.Runtime.CallFrame, handle accordingly.
+    const callFrame = event.callFrame;
+    if (!callFrame) {
+      return null;
+    }
+    const {columnNumber, lineNumber, url, scriptId, functionName} = callFrame;
+    if (lineNumber === undefined || functionName === undefined || columnNumber === undefined ||
+        scriptId === undefined || url === undefined) {
+      return null;
+    }
+    return [{columnNumber, lineNumber, url, scriptId, functionName}];
   }
   return null;
 }
@@ -167,8 +196,8 @@ export function getNavigationForTraceEvent(
   return navigations[eventNavigationIndex];
 }
 
-export function extractId(event: Types.Events.PairableAsync|MatchedPairType<Types.Events.PairableAsync>): string|
-    undefined {
+export function extractId(event: Types.Events.PairableAsync|
+                          Types.Events.SyntheticEventPair<Types.Events.PairableAsync>): string|undefined {
   return event.id ?? event.id2?.global ?? event.id2?.local;
 }
 
@@ -276,9 +305,9 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
       end: Types.Events.PairableAsyncEnd | null,
       instant?: Types.Events.PairableAsyncInstant[],
     }>,
-    syntheticEventCallback?: (syntheticEvent: MatchedPairType<T>) => void,
-    ): MatchedPairType<T>[] {
-  const syntheticEvents: MatchedPairType<T>[] = [];
+    syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void,
+    ): Types.Events.SyntheticEventPair<T>[] {
+  const syntheticEvents: Types.Events.SyntheticEventPair<T>[] = [];
   for (const [id, eventsTriplet] of matchedPairs.entries()) {
     const beginEvent = eventsTriplet.begin;
     const endEvent = eventsTriplet.end;
@@ -299,7 +328,7 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
       beginEvent: Types.Events.PairableAsyncBegin,
       endEvent: Types.Events.PairableAsyncEnd|null,
       instantEvents?: Types.Events.PairableAsyncInstant[],
-    }): data is MatchedPairType<T>['args']['data'] {
+    }): data is Types.Events.SyntheticEventPair<T>['args']['data'] {
       const instantEventsMatch = data.instantEvents ? data.instantEvents.some(e => id === getSyntheticId(e)) : false;
       const endEventMatch = data.endEvent ? id === getSyntheticId(data.endEvent) : false;
       return Boolean(id) && (instantEventsMatch || endEventMatch);
@@ -309,8 +338,8 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
     }
     const targetEvent = endEvent || beginEvent;
 
-    const event = SyntheticEventsManager.registerSyntheticEvent<MatchedPairType<T>>({
-      rawSourceEvent: beginEvent,
+    const event = SyntheticEventsManager.registerSyntheticEvent<Types.Events.SyntheticEventPair<T>>({
+      rawSourceEvent: triplet.beginEvent,
       cat: targetEvent.cat,
       ph: targetEvent.ph,
       pid: targetEvent.pid,
@@ -340,8 +369,8 @@ export function createSortedSyntheticEvents<T extends Types.Events.PairableAsync
 }
 
 export function createMatchedSortedSyntheticEvents<T extends Types.Events.PairableAsync>(
-    unpairedAsyncEvents: T[],
-    syntheticEventCallback?: (syntheticEvent: MatchedPairType<T>) => void): MatchedPairType<T>[] {
+    unpairedAsyncEvents: T[], syntheticEventCallback?: (syntheticEvent: Types.Events.SyntheticEventPair<T>) => void):
+    Types.Events.SyntheticEventPair<T>[] {
   const matchedPairs = matchEvents(unpairedAsyncEvents);
   const syntheticEvents = createSortedSyntheticEvents<T>(matchedPairs, syntheticEventCallback);
   return syntheticEvents;
@@ -387,9 +416,14 @@ export function getZeroIndexedLineAndColumnForEvent(event: Types.Events.Event):
  * that are 1 or 0 indexed.
  * This function knows which events return 1 indexed numbers and normalizes
  * them. The UI expects 0 indexed line numbers, so that is what we return.
+ *
+ * Note: this only returns the stack trace contained in the payload of
+ * an event, which only contains the synchronous portion of the call
+ * stack. If you want to obtain the whole stack trace you might need to
+ * use the @see Trace.Extras.StackTraceForEvent util.
  */
 export function getZeroIndexedStackTraceForEvent(event: Types.Events.Event): Types.Events.CallFrame[]|null {
-  const stack = stackTraceForEvent(event);
+  const stack = stackTraceInEvent(event);
   if (!stack) {
     return null;
   }
@@ -397,6 +431,7 @@ export function getZeroIndexedStackTraceForEvent(event: Types.Events.Event): Typ
     switch (event.name) {
       case Types.Events.Name.SCHEDULE_STYLE_RECALCULATION:
       case Types.Events.Name.INVALIDATE_LAYOUT:
+      case Types.Events.Name.FUNCTION_CALL:
       case Types.Events.Name.UPDATE_LAYOUT_TREE: {
         return makeZeroBasedCallFrame(callFrame);
       }
@@ -639,3 +674,17 @@ export function nodeIdForInvalidationEvent(event: Types.Events.InvalidationTrack
     null {
   return event.args.data.nodeId ?? null;
 }
+
+/**
+ * This compares Types.Events.CallFrame with Protocol.Runtime.CallFrame and checks for equality.
+ */
+export function isMatchingCallFrame(
+    eventFrame: Types.Events.CallFrame, nodeFrame: Protocol.Runtime.CallFrame): boolean {
+  return eventFrame.columnNumber === nodeFrame.columnNumber && eventFrame.lineNumber === nodeFrame.lineNumber &&
+      String(eventFrame.scriptId) === nodeFrame.scriptId && eventFrame.url === nodeFrame.url &&
+      eventFrame.functionName === nodeFrame.functionName;
+}
+
+export function eventContainsTimestamp(event: Types.Events.Event, ts: Types.Timing.MicroSeconds): boolean {
+  return event.ts <= ts && event.ts + (event.dur || 0) >= ts;
+}

package/front_end/models/trace/helpers/TreeHelpers.test.ts

@@ -488,7 +488,7 @@ describe('TreeHelpers', () => {
       assert.exists(v8RunNode);
 
       // First check the serialization as a while.
-      assert.deepStrictEqual(JSON.parse(JSON.stringify(aiNodeTree)), {
+      assert.deepEqual(JSON.parse(JSON.stringify(aiNodeTree)), {
         name: 'EvaluateScript',
         dur: 0.5,
         self: 0,
@@ -507,12 +507,12 @@ describe('TreeHelpers', () => {
 
       // Now we can make sure the pre-serialized data is also correct.
       assert.strictEqual(v8RunNode.name, 'v8.run');
-      assert.strictEqual(v8RunNode.selected, true);
+      assert.isTrue(v8RunNode.selected);
       assert.strictEqual(v8RunNode.duration, 0.49);
       assert.strictEqual(v8RunNode.children?.length, 3);
 
       assert.strictEqual(aiNodeTree.name, 'EvaluateScript');
-      assert.strictEqual(aiNodeTree.selected, undefined);
+      assert.isUndefined(aiNodeTree.selected);
       assert.strictEqual(aiNodeTree.duration, 0.5);
       assert.strictEqual(aiNodeTree.children?.length, 1);
 
@@ -520,9 +520,9 @@ describe('TreeHelpers', () => {
       assert.exists(v8RunNode);
 
       assert.strictEqual(parseFnAINode.name, 'V8.ParseFunction');
-      assert.strictEqual(parseFnAINode.selected, undefined);
+      assert.isUndefined(parseFnAINode.selected);
       assert.strictEqual(parseFnAINode.duration, 0.001);
-      assert.strictEqual(parseFnAINode.children, undefined);
+      assert.isUndefined(parseFnAINode.children);
     });
   });
 });

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

@@ -193,7 +193,7 @@ export class AINode {
     return AINode.#filterRecursive(list, node => longEnough(node) && selfLongEnough(node));
   }
 
-  // Invoked from DrJonesPerformanceAgent
+  // Invoked from PerformanceAgent
   sanitize(): void {
     if (this.children) {
       this.children = AINode.#removeInexpensiveNodesRecursively(this.children, {

package/front_end/models/trace/insights/CLSCulprits.test.ts

@@ -3,22 +3,12 @@
 // found in the LICENSE file.
 
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
-import {getFirstOrError, getInsightOrError} from '../../../testing/InsightHelpers.js';
-import {TraceLoader} from '../../../testing/TraceLoader.js';
+import {getFirstOrError, getInsightOrError, processTrace} from '../../../testing/InsightHelpers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {Models} from './insights.js';
 
-export async function processTrace(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
-  const {parsedTrace, insights} = await TraceLoader.traceEngine(testContext, traceFile);
-  if (!insights) {
-    throw new Error('No insights');
-  }
-
-  return {data: parsedTrace, insights};
-}
-
 // Root cause invalidation window.
 const INVALIDATION_WINDOW = Helpers.Timing.secondsToMicroseconds(Types.Timing.Seconds(0.5));
 
@@ -54,7 +44,7 @@ describeWithEnvironment('CLSCulprits', function() {
           animation: top,
         },
       ];
-      assert.deepStrictEqual(animationFailures, expected);
+      assert.deepEqual(animationFailures, expected);
     });
     // Flaky test.
     it.skip('[crbug.com/370382177]: gets the correct non composited animations for shift', async function() {
@@ -82,7 +72,7 @@ describeWithEnvironment('CLSCulprits', function() {
           animation: simpleAnimation,
         },
       ];
-      assert.deepStrictEqual(shiftAnimations, expectedWithShift);
+      assert.deepEqual(shiftAnimations, expectedWithShift);
 
       const expectedAll: Models.CLSCulprits.NoncompositedAnimationFailure[] = [
         {
@@ -99,7 +89,7 @@ describeWithEnvironment('CLSCulprits', function() {
         },
       ];
       // animationFailures should include both root causes failures, and failures without associated shifts.
-      assert.deepStrictEqual(animationFailures, expectedAll);
+      assert.deepEqual(animationFailures, expectedAll);
     });
 
     it('returns no insights when there are no non-composited animations', async function() {
@@ -136,7 +126,7 @@ describeWithEnvironment('CLSCulprits', function() {
         const shift1 = Array.from(shifts)[0][0];
         const shiftIframes = shifts.get(shift1)?.iframeIds;
         assert.exists(shiftIframes);
-        assert.strictEqual(shiftIframes.length, 1);
+        assert.lengthOf(shiftIframes, 1);
 
         const iframe = shiftIframes[0];
 
@@ -173,7 +163,7 @@ describeWithEnvironment('CLSCulprits', function() {
 
         const shiftFonts = shift2[1].fontRequests;
         assert.exists(shiftFonts);
-        assert.strictEqual(shiftFonts.length, 1);
+        assert.lengthOf(shiftFonts, 1);
 
         const fontRequest = shiftFonts[0];
         const fontRequestEndTime = fontRequest.ts + fontRequest.dur;
@@ -199,7 +189,7 @@ describeWithEnvironment('CLSCulprits', function() {
         assert.strictEqual(shifts.size, 2);
 
         const unsizedImages = data.LayoutShifts.layoutImageUnsizedEvents;
-        assert.strictEqual(unsizedImages.length, 2);
+        assert.lengthOf(unsizedImages, 2);
 
         const layoutShiftEvents = Array.from(shifts.entries());
         const shift1 = layoutShiftEvents.at(0);
@@ -222,7 +212,7 @@ describeWithEnvironment('CLSCulprits', function() {
 
       assert.exists(clusters);
       assert.exists(shifts);
-      assert.strictEqual(clusters.length, 2);
+      assert.lengthOf(clusters, 2);
       for (const cluster of clusters) {
         // Check that the cluster events exist in shifts map.
         for (const shiftEvent of cluster.events) {
@@ -238,7 +228,7 @@ describeWithEnvironment('CLSCulprits', function() {
 
       assert.exists(clusters);
       assert.exists(shifts);
-      assert.strictEqual(clusters.length, 3);
+      assert.lengthOf(clusters, 3);
       for (const cluster of clusters) {
         // Check that the cluster events exist in shifts map.
         for (const shiftEvent of cluster.events) {

package/front_end/models/trace/insights/CLSCulprits.ts

@@ -8,7 +8,7 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import type {InsightModel, InsightSetContext, RequiredData} from './types.js';
+import {InsightCategory, type InsightModel, type InsightSetContext, type RequiredData} from './types.js';
 
 const UIStrings = {
   /** Title of an insight that provides details about why elements shift/move on the page. The causes for these shifts are referred to as culprits ("reasons"). */
@@ -420,8 +420,23 @@ function getFontRootCauses(
   return rootCausesByShift;
 }
 
-function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'>): CLSCulpritsInsightModel {
-  return {title: i18nString(UIStrings.title), description: i18nString(UIStrings.description), ...partialModel};
+function finalize(partialModel: Omit<CLSCulpritsInsightModel, 'title'|'description'|'category'|'shouldShow'>):
+    CLSCulpritsInsightModel {
+  let maxScore = 0;
+  for (const cluster of partialModel.clusters) {
+    if (cluster.clusterCumulativeScore > maxScore) {
+      maxScore = cluster.clusterCumulativeScore;
+    }
+  }
+
+  return {
+    title: i18nString(UIStrings.title),
+    description: i18nString(UIStrings.description),
+    category: InsightCategory.CLS,
+    // TODO: getTopCulprits in component needs to move to model so this can be set properly here.
+    shouldShow: maxScore > 0,
+    ...partialModel,
+  };
 }
 
 export function generateInsight(

package/front_end/models/trace/insights/Common.test.ts

@@ -0,0 +1,52 @@
+// 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 {getFirstOrError, processTrace} from '../../../testing/InsightHelpers.js';
+
+import * as Insights from './insights.js';
+
+const {calculateMetricWeightsForSorting} = Insights.Common;
+
+describeWithEnvironment('Common', function() {
+  describe('calculateMetricWeightsForSorting', () => {
+    async function process(testContext: Mocha.Suite|Mocha.Context|null, traceFile: string) {
+      const {data, insights, metadata} = await processTrace(testContext, traceFile);
+      if (!metadata) {
+        throw new Error('missing metadata');
+      }
+
+      const insightSetKey = getFirstOrError(data.Meta.navigationsByNavigationId.values()).args.data.navigationId;
+      const insightSet = insights.get(insightSetKey);
+      if (!insightSet) {
+        throw new Error('missing insight set');
+      }
+
+      // Clone so it may be modified.
+      const clonedMetadata = structuredClone(metadata);
+
+      return {insightSet, metadata: clonedMetadata};
+    }
+
+    it('returns default weights when there is no field data', async () => {
+      const {insightSet, metadata} = await process(this, 'image-delivery.json.gz');
+
+      // No field data defaults to even split of weights.
+      metadata.cruxFieldData = undefined;
+      let weights = calculateMetricWeightsForSorting(insightSet, metadata);
+      assert.deepEqual(weights, {lcp: 1 / 3, inp: 1 / 3, cls: 1 / 3});
+
+      metadata.cruxFieldData = [];
+      weights = calculateMetricWeightsForSorting(insightSet, metadata);
+      assert.deepEqual(weights, {lcp: 1 / 3, inp: 1 / 3, cls: 1 / 3});
+    });
+
+    it('returns weights based on field data', async () => {
+      const {insightSet, metadata} = await process(this, 'image-delivery.json.gz');
+
+      const weights = calculateMetricWeightsForSorting(insightSet, metadata);
+      assert.deepEqual(weights, {lcp: 0.07778127820223579, inp: 0.5504200439526509, cls: 0.37179867784511333});
+    });
+  });
+});