chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

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

@@ -29,7 +29,7 @@ describe('NetworkRequestsHandler', function() {
       assert.strictEqual(requestsByOrigin.size, 3, 'Too many origins detected');
 
       const topLevelRequests = requestsByOrigin.get('localhost:8080') || {all: []};
-      assert.strictEqual(topLevelRequests.all.length, 4, 'Incorrect number of requests');
+      assert.lengthOf(topLevelRequests.all, 4, 'Incorrect number of requests');
 
       // Page Request.
       const pageRequestExpected: DataArgsProcessedDataMap = new Map([
@@ -108,7 +108,7 @@ describe('NetworkRequestsHandler', function() {
 
       // Google Fonts CSS Request (cached).
       const fontCSSRequests = requestsByOrigin.get('fonts.googleapis.com') || {all: []};
-      assert.strictEqual(fontCSSRequests.all.length, 1, 'Incorrect number of requests');
+      assert.lengthOf(fontCSSRequests.all, 1, 'Incorrect number of requests');
 
       const fontCSSRequestExpected: DataArgsProcessedDataMap = new Map([
         ['queueing', Trace.Types.Timing.MicroSeconds(0)],
@@ -135,7 +135,7 @@ describe('NetworkRequestsHandler', function() {
 
       // Google Fonts Data Request (cached).
       const fontDataRequests = requestsByOrigin.get('fonts.gstatic.com') || {all: []};
-      assert.strictEqual(fontDataRequests.all.length, 1, 'Incorrect number of requests');
+      assert.lengthOf(fontDataRequests.all, 1, 'Incorrect number of requests');
 
       const fontDataRequestExpected: DataArgsProcessedDataMap = new Map([
         ['queueing', Trace.Types.Timing.MicroSeconds(0)],
@@ -173,7 +173,7 @@ describe('NetworkRequestsHandler', function() {
 
       const webSocketEvents = Trace.Handlers.ModelHandlers.NetworkRequests.data().webSocket;
 
-      assert.strictEqual(webSocketEvents[0].events.length, 9, 'Incorrect number of events');
+      assert.lengthOf(webSocketEvents[0].events, 9, 'Incorrect number of events');
     });
   });
 
@@ -222,9 +222,9 @@ describe('NetworkRequestsHandler', function() {
       await Trace.Handlers.ModelHandlers.NetworkRequests.finalize();
 
       const {byTime} = Trace.Handlers.ModelHandlers.NetworkRequests.data();
-      assert.strictEqual(byTime.length, 2, 'Incorrect number of requests');
-      assert.strictEqual(byTime[0].args.data.redirects.length, 0, 'Incorrect number of redirects (request 0)');
-      assert.deepStrictEqual(
+      assert.lengthOf(byTime, 2, 'Incorrect number of requests');
+      assert.lengthOf(byTime[0].args.data.redirects, 0, 'Incorrect number of redirects (request 0)');
+      assert.deepEqual(
           byTime[1].args.data.redirects,
           [
             {
@@ -255,9 +255,9 @@ describe('NetworkRequestsHandler', function() {
       await Trace.Handlers.ModelHandlers.NetworkRequests.finalize();
 
       const {byTime} = Trace.Handlers.ModelHandlers.NetworkRequests.data();
-      assert.strictEqual(byTime.length, 2, 'Incorrect number of requests');
-      assert.strictEqual(byTime[0].args.data.redirects.length, 0, 'Incorrect number of redirects (request 0)');
-      assert.deepStrictEqual(
+      assert.lengthOf(byTime, 2, 'Incorrect number of requests');
+      assert.lengthOf(byTime[0].args.data.redirects, 0, 'Incorrect number of redirects (request 0)');
+      assert.deepEqual(
           byTime[1].args.data.redirects,
           [
             {
@@ -342,6 +342,112 @@ describe('NetworkRequestsHandler', function() {
       assert.strictEqual(initiator.args.data.url, event.args.data.stackTrace?.[0].url);
     });
   });
+  describe('ThirdParty caches', () => {
+    it('Correctly captures entities by network event', async function() {
+      const traceEvents = await TraceLoader.rawEvents(this, 'lantern/paul/trace.json.gz');
+      for (const event of traceEvents) {
+        Trace.Handlers.ModelHandlers.Meta.handleEvent(event);
+        Trace.Handlers.ModelHandlers.NetworkRequests.handleEvent(event);
+      }
+      await Trace.Handlers.ModelHandlers.Meta.finalize();
+      await Trace.Handlers.ModelHandlers.NetworkRequests.finalize();
+
+      const {entityMappings} = Trace.Handlers.ModelHandlers.NetworkRequests.data();
+      const syntheticNetworkEventsByEntity = new Map(
+          Array.from(entityMappings.eventsByEntity.entries()).map(([entity, events]) => {
+            const syntheticNetworkEvents = events.filter(
+                event => Trace.Types.Events.isSyntheticNetworkRequest(event),
+            );
+            return [entity, syntheticNetworkEvents];
+          }),
+      );
+      const requestsByEntityResult = [...syntheticNetworkEventsByEntity.entries()].map(([entity, requests]) => {
+        return [entity.name, requests.map(r => r.args?.data?.url)];
+      });
+      assert.deepEqual(
+          requestsByEntityResult,
+          [
+            [
+              'paulirish.com',
+              [
+                'https://www.paulirish.com/',
+                'https://www.paulirish.com/assets/wikipedia-flamechart.jpg',
+                'https://www.paulirish.com/avatar150.jpg',
+                'https://www.paulirish.com/javascripts/modernizr-2.0.js',
+                'https://www.paulirish.com/javascripts/ender.js',
+                'https://www.paulirish.com/javascripts/octopress.js',
+                'https://www.paulirish.com/javascripts/firebase-performance-standalone.js',
+                'https://www.paulirish.com/images/noise.png?1418840251',
+                'https://www.paulirish.com/images/code_bg.png?1418840251',
+                'https://www.paulirish.com/favicon.ico',
+              ],
+            ],
+            [
+              'Google Tag Manager',
+              [
+                'https://www.googletagmanager.com/gtag/js?id=G-PGXNGYWP8E',
+              ],
+            ],
+            [
+              'Google Fonts',
+              [
+                'https://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold|PT+Sans:regular,italic,bold|Droid+Sans:400,700|Lato:700,900',
+                'https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2',
+                'https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2',
+                'https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2',
+                'https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2',
+                'https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2',
+                'https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2',
+              ],
+            ],
+            [
+              'Google Analytics',
+              [
+                'https://www.google-analytics.com/analytics.js',
+                'https://www.google-analytics.com/g/collect?v=2&tid=G-PGXNGYWP8E&gtm=45je4580v880158425za200&_p=1715625261583&gcd=13l3l3l3l1&npa=0&dma=0&cid=414801335.1715625262&ul=en-us&sr=412x823&uaa=&uab=64&uafvl=Not%252FA)Brand%3B8.0.0.0%7CChromium%3B126.0.6475.0%7CGoogle%2520Chrome%3B126.0.6475.0&uamb=1&uam=moto%20g%20power%20(2022)&uap=Android&uapv=11.0&uaw=0&are=1&frm=0&pscdl=noapi&_s=1&sid=1715625261&sct=1&seg=0&dl=https%3A%2F%2Fwww.paulirish.com%2F&dt=Paul%20Irish&en=page_view&_fv=1&_nsi=1&_ss=1&_ee=1&tfd=353',
+                'https://www.google-analytics.com/j/collect?v=1&_v=j101&a=272264939&t=pageview&_s=1&dl=https%3A%2F%2Fwww.paulirish.com%2F&ul=en-us&de=UTF-8&dt=Paul%20Irish&sd=30-bit&sr=412x823&vp=412x823&je=0&_u=IADAAEABAAAAACAAI~&jid=1388679807&gjid=654531532&cid=414801335.1715625262&tid=UA-692547-2&_gid=1964734610.1715625262&_r=1&_slc=1&z=1746264594',
+              ],
+            ],
+            [
+              'Disqus',
+              [
+                'https://paulirish.disqus.com/count.js',
+              ],
+            ],
+            [
+              'Firebase',
+              [
+                'https://firebaseinstallations.googleapis.com/v1/projects/paulirishcom/installations',
+                'https://firebaseremoteconfig.googleapis.com/v1/projects/paulirishcom/namespaces/fireperf:fetch?key=AIzaSyCGxLbbFQxH4BV1fY0RODlxTos9nJa2l_g',
+              ],
+            ],
+          ],
+      );
+    });
+    it('Correctly captures entities', async function() {
+      const traceEvents = await TraceLoader.rawEvents(this, 'lantern/paul/trace.json.gz');
+      for (const event of traceEvents) {
+        Trace.Handlers.ModelHandlers.Meta.handleEvent(event);
+        Trace.Handlers.ModelHandlers.NetworkRequests.handleEvent(event);
+      }
+      await Trace.Handlers.ModelHandlers.Meta.finalize();
+      await Trace.Handlers.ModelHandlers.NetworkRequests.finalize();
+
+      const {entityMappings} = Trace.Handlers.ModelHandlers.NetworkRequests.data();
+      const expectedEntities = [
+        'paulirish.com',
+        'Google Tag Manager',
+        'Google Fonts',
+        'Google Analytics',
+        'Disqus',
+        'Firebase',
+      ];
+      const gotEntities = Array.from(entityMappings.entityByEvent.values()).map(enity => enity.name);
+      expectedEntities.forEach(entity => {
+        assert.isTrue(gotEntities.includes(entity));
+      });
+    });
+  });
 });
 
 function assertDataArgsStats<D extends keyof DataArgs>(

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

@@ -7,6 +7,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
+import * as HandlerHelpers from './helpers.js';
 import {data as metaHandlerData} from './MetaHandler.js';
 import type {HandlerName} from './types.js';
 
@@ -56,6 +57,7 @@ interface NetworkRequestData {
   byTime: Types.Events.SyntheticNetworkRequest[];
   eventToInitiator: Map<Types.Events.SyntheticNetworkRequest, Types.Events.SyntheticNetworkRequest>;
   webSocket: WebSocketTraceData[];
+  entityMappings: HandlerHelpers.EntityMappings;
 }
 
 const requestMap = new Map<string, TraceEventsForNetworkRequest>();
@@ -70,6 +72,17 @@ const requestsByTime: Types.Events.SyntheticNetworkRequest[] = [];
 const networkRequestEventByInitiatorUrl = new Map<string, Types.Events.SyntheticNetworkRequest[]>();
 const eventToInitiatorMap = new Map<Types.Events.SyntheticNetworkRequest, Types.Events.SyntheticNetworkRequest>();
 
+/**
+ * These are to store ThirdParty data relationships between entities and events. To reduce iterating through data
+ * more than we have to, here we start building the caches. After this, the RendererHandler will update
+ * the relationships. When handling ThirdParty references, use the one in the RendererHandler instead.
+ */
+const entityMappings: HandlerHelpers.EntityMappings = {
+  eventsByEntity: new Map<HandlerHelpers.Entity, Types.Events.Event[]>(),
+  entityByEvent: new Map<Types.Events.Event, HandlerHelpers.Entity>(),
+  createdEntityCache: new Map<string, HandlerHelpers.Entity>(),
+};
+
 function storeTraceEventWithRequestId<K extends keyof TraceEventsForNetworkRequest>(
     requestId: string, key: K, value: TraceEventsForNetworkRequest[K]): void {
   if (!requestMap.has(requestId)) {
@@ -111,6 +124,9 @@ export function reset(): void {
   networkRequestEventByInitiatorUrl.clear();
   eventToInitiatorMap.clear();
   webSocketData.clear();
+  entityMappings.eventsByEntity.clear();
+  entityMappings.entityByEvent.clear();
+  entityMappings.createdEntityCache.clear();
 }
 
 export function handleEvent(event: Types.Events.Event): void {
@@ -471,7 +487,8 @@ export async function finalize(): Promise<void> {
     requests.all.push(networkEvent);
     requestsByTime.push(networkEvent);
     requestsById.set(networkEvent.args.data.requestId, networkEvent);
-
+    // Update entity relationships for network events.
+    HandlerHelpers.updateEventForEntities(networkEvent, entityMappings);
     const initiatorUrl = networkEvent.args.data.initiator?.url ||
         Helpers.Trace.getZeroIndexedStackTraceForEvent(networkEvent)?.at(0)?.url;
     if (initiatorUrl) {
@@ -500,6 +517,11 @@ export function data(): NetworkRequestData {
     byTime: requestsByTime,
     eventToInitiator: eventToInitiatorMap,
     webSocket: [...webSocketData.values()],
+    entityMappings: {
+      entityByEvent: new Map(entityMappings.entityByEvent),
+      eventsByEntity: new Map(entityMappings.eventsByEntity),
+      createdEntityCache: new Map(entityMappings.createdEntityCache),
+    },
   };
 }
 

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

@@ -263,7 +263,7 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
       for (const metricName of Trace.Types.Events.MarkerName) {
         const markerEventsOfThisType = allMarkerEvents.filter(event => event.name === metricName);
         // There should be 2 events for each marker and all of them should correspond to the main frame
-        assert.strictEqual(markerEventsOfThisType.length, 2);
+        assert.lengthOf(markerEventsOfThisType, 2);
         assert.isTrue(markerEventsOfThisType.every(
             marker => Trace.Handlers.ModelHandlers.PageLoadMetrics.getFrameIdForPageLoadEvent(marker) === mainFrameId));
       }
@@ -279,7 +279,7 @@ describeWithEnvironment('PageLoadMetricsHandler', function() {
       const {PageLoadMetrics} = parsedTrace;
       const pageLoadMarkers = PageLoadMetrics.allMarkerEvents;
       const largestContentfulPaints = pageLoadMarkers.filter(Trace.Types.Events.isLargestContentfulPaintCandidate);
-      assert.strictEqual(largestContentfulPaints.length, 1);
+      assert.lengthOf(largestContentfulPaints, 1);
       assert.strictEqual(largestContentfulPaints[0].args.data?.candidateIndex, 2);
     });
   });

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

@@ -434,6 +434,8 @@ export const enum MetricName {
   TBT = 'TBT',
   // Cumulative Layout Shift
   CLS = 'CLS',
+  // Navigation
+  NAV = 'Nav',
   // Note: INP is handled in UserInteractionsHandler
 }
 

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

@@ -34,7 +34,7 @@ describeWithEnvironment('RendererHandler', function() {
     assert.strictEqual(renderers.processes.size, 4);
 
     const pids = [...renderers.processes].map(([pid]) => pid);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         pids,
         [
           MAIN_FRAME_PID,   // Main frame process: localhost:5000
@@ -60,7 +60,7 @@ describeWithEnvironment('RendererHandler', function() {
     // Assert on whether it has correctly detected a given process to be on the
     // main frame or in a subframe.
     const isOnMainFrame = [...renderers.processes].map(([, process]) => process.isOnMainFrame);
-    assert.deepStrictEqual(
+    assert.deepEqual(
         isOnMainFrame,
         [
           true,   // Main frame process: localhost:5000
@@ -838,7 +838,7 @@ describeWithEnvironment('RendererHandler', function() {
 
       const data = await handleEvents(traceEvents);
 
-      assert.strictEqual(data.allTraceEntries.length, 7);
+      assert.lengthOf(data.allTraceEntries, 7);
       assert.strictEqual(data.processes.size, 1);
       const [process] = data.processes.values();
       assert.strictEqual(process.threads.size, 1);
@@ -849,7 +849,7 @@ describeWithEnvironment('RendererHandler', function() {
         return;
       }
       const allNodes = getAllNodes(thread.tree?.roots);
-      assert.strictEqual(allNodes.length, 5);
+      assert.lengthOf(allNodes, 5);
       if (!thread.tree) {
         return;
       }
@@ -877,7 +877,7 @@ describeWithEnvironment('RendererHandler', function() {
 
       const data = await handleEvents(traceEvents);
 
-      assert.strictEqual(data.allTraceEntries.length, 6);
+      assert.lengthOf(data.allTraceEntries, 6);
       assert.strictEqual(data.processes.size, 1);
       const [process] = data.processes.values();
       assert.strictEqual(process.threads.size, 1);
@@ -888,7 +888,7 @@ describeWithEnvironment('RendererHandler', function() {
         return;
       }
       const allNodes = getAllNodes(thread.tree?.roots);
-      assert.strictEqual(allNodes.length, 4);
+      assert.lengthOf(allNodes, 4);
       if (!thread.tree) {
         return;
       }
@@ -999,4 +999,23 @@ describeWithEnvironment('RendererHandler', function() {
       assert.isTrue(process?.url?.includes('fledge-demo.glitch.me'));
     }
   });
+  describe('ThirdParty', () => {
+    it('correctly creates entities (simple)', async function() {
+      const {Renderer} = await handleEventsFromTraceFile(this, 'load-simple.json.gz');
+      const entities = Array.from(Renderer.entityMappings.eventsByEntity.keys()).map(entity => entity.name);
+      const expectedEntities = ['localhost', 'Google Fonts'];
+      assert.deepEqual(entities, expectedEntities);
+    });
+    it('correctly creates entities', async function() {
+      const {Renderer} = await handleEventsFromTraceFile(this, 'lantern/paul/trace.json.gz');
+      const entityNames = [...Renderer.entityMappings.eventsByEntity.keys()].map(entity => entity.name);
+      assert.deepEqual([...new Set(entityNames)], [
+        'paulirish.com',
+        'Google Tag Manager',
+        'Google Fonts',
+        'Disqus',
+        'Google Analytics',
+      ]);
+    });
+  });
 });

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

@@ -7,7 +7,9 @@ import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
 import {data as auctionWorkletsData} from './AuctionWorkletsHandler.js';
+import * as HandlerHelpers from './helpers.js';
 import {data as metaHandlerData, type FrameProcessData} from './MetaHandler.js';
+import {data as networkRequestHandlerData} from './NetworkRequestsHandler.js';
 import {data as samplesHandlerData} from './SamplesHandler.js';
 import type {HandlerName} from './types.js';
 
@@ -25,6 +27,12 @@ import type {HandlerName} from './types.js';
 
 const processes = new Map<Types.Events.ProcessID, RendererProcess>();
 
+const entityMappings: HandlerHelpers.EntityMappings = {
+  eventsByEntity: new Map<HandlerHelpers.Entity, Types.Events.Event[]>(),
+  entityByEvent: new Map<Types.Events.Event, HandlerHelpers.Entity>(),
+  createdEntityCache: new Map<string, HandlerHelpers.Entity>(),
+};
+
 // We track the compositor tile worker thread name events so that at the end we
 // can return these keyed by the process ID. These are used in the frontend to
 // show the user the rasterization thread(s) on the main frame as tracks.
@@ -49,6 +57,8 @@ const makeRendererThread = (): RendererThread => ({
   name: null,
   entries: [],
   profileCalls: [],
+  layoutEvents: [],
+  updateLayoutTreeEvents: [],
 });
 
 const getOrCreateRendererProcess =
@@ -67,6 +77,9 @@ export function handleUserConfig(userConfig: Types.Configuration.Configuration):
 export function reset(): void {
   processes.clear();
   entryToNode.clear();
+  entityMappings.eventsByEntity.clear();
+  entityMappings.entityByEvent.clear();
+  entityMappings.createdEntityCache.clear();
   allTraceEntries.length = 0;
   completeEventStack.length = 0;
   compositorTileWorkers.length = 0;
@@ -98,10 +111,26 @@ export function handleEvent(event: Types.Events.Event): void {
     thread.entries.push(event);
     allTraceEntries.push(event);
   }
+
+  if (Types.Events.isLayout(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    thread.layoutEvents.push(event);
+  }
+
+  if (Types.Events.isUpdateLayoutTree(event)) {
+    const process = getOrCreateRendererProcess(processes, event.pid);
+    const thread = getOrCreateRendererThread(process, event.tid);
+    thread.updateLayoutTreeEvents.push(event);
+  }
 }
 
 export async function finalize(): Promise<void> {
   const {mainFrameId, rendererProcessesByFrame, threadsInProcess} = metaHandlerData();
+  const {entityMappings: networkEntityMappings} = networkRequestHandlerData();
+  // Build on top of the created entity cache to avoid de-dupes of entities that are made up.
+  entityMappings.createdEntityCache = new Map(networkEntityMappings.createdEntityCache);
+
   assignMeta(processes, mainFrameId, rendererProcessesByFrame, threadsInProcess);
   sanitizeProcesses(processes);
   buildHierarchy(processes);
@@ -115,6 +144,11 @@ export function data(): RendererHandlerData {
     compositorTileWorkers: new Map(gatherCompositorThreads()),
     entryToNode: new Map(entryToNode),
     allTraceEntries: [...allTraceEntries],
+    entityMappings: {
+      entityByEvent: new Map(entityMappings.entityByEvent),
+      eventsByEntity: new Map(entityMappings.eventsByEntity),
+      createdEntityCache: new Map(entityMappings.createdEntityCache),
+    },
   };
 }
 
@@ -322,6 +356,7 @@ export function buildHierarchy(
       // Update the entryToNode map with the entries from this thread
       for (const [entry, node] of treeData.entryToNode) {
         entryToNode.set(entry, node);
+        HandlerHelpers.updateEventForEntities(entry, entityMappings);
       }
     }
   }
@@ -360,7 +395,7 @@ export function makeCompleteEvent(event: Types.Events.Begin|Types.Events.End): T
 }
 
 export function deps(): HandlerName[] {
-  return ['Meta', 'Samples', 'AuctionWorklets'];
+  return ['Meta', 'Samples', 'AuctionWorklets', 'NetworkRequests'];
 }
 
 export interface RendererHandlerData {
@@ -376,6 +411,7 @@ export interface RendererHandlerData {
    * samples.
    */
   allTraceEntries: Types.Events.Event[];
+  entityMappings: HandlerHelpers.EntityMappings;
 }
 
 export interface RendererProcess {
@@ -394,5 +430,7 @@ export interface RendererThread {
    */
   entries: Types.Events.Event[];
   profileCalls: Types.Events.SyntheticProfileCall[];
+  layoutEvents: Types.Events.Layout[];
+  updateLayoutTreeEvents: Types.Events.UpdateLayoutTree[];
   tree?: Helpers.TreeHelpers.TraceEntryTree;
 }

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

@@ -224,7 +224,7 @@ describeWithEnvironment('SamplesHandler', function() {
       const cpuProfileData = profileById.values().next().value as Trace.Handlers.ModelHandlers.Samples.ProfileData;
       const cpuProfile = cpuProfileData.rawProfile;
       assert.deepEqual(Object.keys(cpuProfile), ['startTime', 'endTime', 'nodes', 'samples', 'timeDeltas', 'lines']);
-      assert.strictEqual(cpuProfile.nodes.length, 153);
+      assert.lengthOf(cpuProfile.nodes, 153);
       assert.strictEqual(cpuProfile.startTime, 287510826176);
       assert.strictEqual(cpuProfile.endTime, 287510847633);
       assert.strictEqual(cpuProfile.samples?.length, 39471);

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

@@ -52,7 +52,7 @@ describe('ScreenshotsHandler', function() {
       await Trace.Handlers.ModelHandlers.Screenshots.finalize();
 
       const data = Trace.Handlers.ModelHandlers.Screenshots.data().all;
-      assert.strictEqual(data.length, 2);
+      assert.lengthOf(data, 2);
     });
   });
 
@@ -87,7 +87,7 @@ describe('ScreenshotsHandler', function() {
 
       const msDifferences = getMsDifferences(syntheticScreenshots, originalScreenshotEvents);
       // These values indicate all the screenshots true timings are a tad more to the left.
-      assert.deepStrictEqual(msDifferences, [
+      assert.deepEqual(msDifferences, [
         -13.079, -16.381, -12.503, -5.405,  -14.108, -14.661, -11.944, -14.322, -3.532, -15.821, 0.254,
         -32.22,  -15.156, -13.219, -14.464, -16.135, -16.501, -33.165, -15.71,  -32.39, -32.445, -30.512,
       ]);
@@ -113,7 +113,7 @@ describe('ScreenshotsHandler', function() {
 
       const msDifferences = getMsDifferences(syntheticScreenshots, originalScreenshotEvents);
       // No adjustment made.
-      assert.deepStrictEqual(msDifferences, [
+      assert.deepEqual(msDifferences, [
         0,
         0,
         0,

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

@@ -51,7 +51,7 @@ describeWithEnvironment('Handler Threads helper', function() {
     assert.strictEqual(parsedTrace.Samples.profilesInProcess.size, 1);
 
     const threads = Trace.Handlers.Threads.threadsInTrace(parsedTrace);
-    assert.strictEqual(threads.length, 1);
+    assert.lengthOf(threads, 1);
 
     assert.strictEqual(threads.at(0)?.type, Trace.Handlers.Threads.ThreadType.CPU_PROFILE);
     assert.strictEqual(threads.at(0)?.entries.length, 875);

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

@@ -52,8 +52,8 @@ describe('UserInteractionsHandler', function() {
       return event.args.data.type === 'click';
     });
 
-    assert.strictEqual(data.allEvents.length, 58);
-    assert.strictEqual(clicks.length, 1);
+    assert.lengthOf(data.allEvents, 58);
+    assert.lengthOf(clicks, 1);
   });
 
   it('returns all interaction events', async () => {
@@ -62,7 +62,7 @@ describe('UserInteractionsHandler', function() {
     // There are three inct interactions:
     // pointerdown on the button (start of the click)
     // pointerup & click on the button (end of the click)
-    assert.strictEqual(data.interactionEvents.length, 3);
+    assert.lengthOf(data.interactionEvents, 3);
   });
 
   it('adds microsecond processingStart and processingEnd times to the synthetic event', async function() {

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * as Helpers from './helpers.js';
 export * as ModelHandlers from './ModelHandlers.js';
 export * as Threads from './Threads.js';
 export * as Types from './types.js';

package/front_end/models/trace/{extras/URLForEntry.test.ts → handlers/helpers.test.ts}

@@ -6,12 +6,12 @@ import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as Trace from '../trace.js';
 
-describeWithEnvironment('URLForEntry', () => {
+describeWithEnvironment('getNonResolvedURL', () => {
   it('returns the URL in event.args.data if it has one', async function() {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const commitLoadEvent = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isCommitLoad);
     assert.isOk(commitLoadEvent);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, commitLoadEvent);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(commitLoadEvent, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(url, commitLoadEvent.args.data?.url);
   });
@@ -20,7 +20,7 @@ describeWithEnvironment('URLForEntry', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const profileCall = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isProfileCall);
     assert.isOk(profileCall);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, profileCall);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(profileCall, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(url, profileCall.callFrame.url);
   });
@@ -29,7 +29,7 @@ describeWithEnvironment('URLForEntry', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const request = parsedTrace.NetworkRequests.byTime[0];
     assert.isOk(request);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, request);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(request, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(url, request.args.data.url);
   });
@@ -40,7 +40,7 @@ describeWithEnvironment('URLForEntry', () => {
       return Trace.Types.Events.isDispatch(entry) && entry.args.data.stackTrace;
     });
     assert.isOk(eventDispatch);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, eventDispatch);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(eventDispatch, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(url, eventDispatch.args?.data?.stackTrace?.[0].url);
   });
@@ -49,7 +49,7 @@ describeWithEnvironment('URLForEntry', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
     const parseHTMLEvent = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isParseHTML);
     assert.isOk(parseHTMLEvent);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, parseHTMLEvent);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(parseHTMLEvent, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(url, parseHTMLEvent.args.beginData.url);
   });
@@ -58,9 +58,36 @@ describeWithEnvironment('URLForEntry', () => {
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
     const decodeImage = parsedTrace.Renderer.allTraceEntries.find(Trace.Types.Events.isDecodeImage);
     assert.isOk(decodeImage);
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, decodeImage);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(decodeImage, parsedTrace);
     assert.isNotNull(url);
     assert.strictEqual(
         url, 'https://web-dev.imgix.net/image/admin/WkMOiDtaDgiAA2YkRZ5H.jpg?fit=crop&h=64&w=64&dpr=1&q=75');
   });
 });
+describeWithEnvironment('makeUpEntity', () => {
+  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.Handlers.Helpers.makeUpEntity(new Map<string, Trace.Extras.ThirdParties.Entity>(), url)?.name ?? '';
+      assert.deepEqual(gotEntity, expectedEntity);
+    }
+  });
+  it('correctly makes up chrome extension entity', async function() {
+    const url = 'chrome-extension://chromeextension/something/exciting.js';
+    const gotEntity = Trace.Handlers.Helpers.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');
+  });
+});