chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

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

@@ -0,0 +1,259 @@
+// 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 Protocol from '../../../generated/protocol.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
+
+function shapeStackTraceAsArray(stackTrace: Protocol.Runtime.StackTrace):
+    {callFrames: Protocol.Runtime.CallFrame[], description?: string}[] {
+  const stackTraceAsArray: {callFrames: Protocol.Runtime.CallFrame[], description?: string}[] = [];
+  let currentStackTrace: Protocol.Runtime.StackTrace|undefined = stackTrace;
+  while (currentStackTrace) {
+    // @ts-ignore `codeType` is not included in the protocol types but
+    // occasionally present
+    currentStackTrace.callFrames.forEach(callFrame => delete callFrame.codeType);
+    stackTraceAsArray.push({callFrames: currentStackTrace.callFrames, description: currentStackTrace.description});
+    currentStackTrace = currentStackTrace.parent;
+  }
+
+  return stackTraceAsArray;
+}
+describeWithEnvironment('StackTraceForTraceEvent', function() {
+  let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  beforeEach(async function() {
+    const traceEngineData = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    parsedTrace = traceEngineData.parsedTrace;
+    Trace.Extras.StackTraceForEvent.clearCacheForTrace(parsedTrace);
+  });
+  afterEach(async () => {
+    Trace.Extras.StackTraceForEvent.clearCacheForTrace(parsedTrace);
+  });
+
+  it('correctly builds the stack trace of a profile call when it only has a synchronous stack trace.',
+     async function() {
+       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'startExample');
+       assert.exists(jsCall);
+       const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
+       assert.exists(stackTrace);
+       const stackTraceArray = shapeStackTraceAsArray(stackTrace);
+       assert.lengthOf(stackTraceArray, 1);
+       const callFrames = stackTraceArray[0].callFrames;
+       assert.deepEqual(callFrames, [
+         {
+           columnNumber: 21,
+           functionName: 'startExample',
+           lineNumber: 25,
+           scriptId: '53' as Protocol.Runtime.ScriptId,
+           url: '',
+         },
+         {columnNumber: 0, functionName: '', lineNumber: 0, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+       ]);
+     });
+
+  it('correctly builds the stack trace of a profile call when it only has an asynchronous stack trace.',
+     async function() {
+       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+       assert.exists(jsCall);
+       const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
+       assert.exists(stackTrace);
+       const stackTraceArray = shapeStackTraceAsArray(stackTrace);
+       assert.lengthOf(stackTraceArray, 4);
+
+       assert.deepEqual(stackTraceArray, [
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'baz',
+             lineNumber: 13,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: undefined,
+         },
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'bar',
+             lineNumber: 6,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: 'requestIdleCallback',
+         },
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'foo',
+             lineNumber: 0,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: 'setTimeout',
+         },
+         {
+           callFrames: [
+             {
+               columnNumber: 21,
+               functionName: 'startExample',
+               lineNumber: 25,
+               scriptId: '53' as Protocol.Runtime.ScriptId,
+               url: '',
+             },
+             {columnNumber: 0, functionName: '', lineNumber: 0, scriptId: '53', url: ''},
+           ],
+           description: 'requestAnimationFrame',
+         },
+       ]);
+     });
+  it('uses cached data correctly.', async function() {
+    const fooCall = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'foo');
+    assert.exists(fooCall);
+    const result =
+        parsedTrace.AsyncJSCalls.asyncCallToScheduler.get(fooCall as Trace.Types.Events.SyntheticProfileCall);
+    assert.exists(result);
+    const {scheduler: parentOfFoo} = result;
+
+    // Compute stack trace of foo's parent
+    const stackTraceOfParent = Trace.Extras.StackTraceForEvent.get(parentOfFoo, parsedTrace);
+    assert.exists(stackTraceOfParent);
+    const stackTraceArray = shapeStackTraceAsArray(stackTraceOfParent);
+    assert.lengthOf(stackTraceArray, 1);
+
+    // Modify the cache, to check it's used when possible
+    const bottomFrame = stackTraceOfParent.callFrames.at(-1);
+    assert.exists(bottomFrame);
+    const originalName = bottomFrame.functionName;
+    bottomFrame.functionName = 'Overriden name';
+
+    // Compute stack trace of foo, ensure the cache calculated with
+    // its parent is used.
+    const stackTraceOfFoo = Trace.Extras.StackTraceForEvent.get(fooCall, parsedTrace);
+    assert.exists(stackTraceOfFoo);
+    const stackTraceArray2 = shapeStackTraceAsArray(stackTraceOfFoo);
+    assert.deepEqual(stackTraceArray2, [
+      {
+        callFrames: [
+          {columnNumber: 12, functionName: 'foo', lineNumber: 0, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+        ],
+        description: undefined,
+      },
+      {
+        callFrames: [
+          {
+            columnNumber: 21,
+            functionName: 'startExample',
+            lineNumber: 25,
+            scriptId: '53' as Protocol.Runtime.ScriptId,
+            url: '',
+          },
+          {
+            columnNumber: 0,
+            functionName: bottomFrame.functionName,
+            lineNumber: 0,
+            scriptId: '53' as Protocol.Runtime.ScriptId,
+            url: '',
+          },
+        ],
+        description: 'requestAnimationFrame',
+      },
+    ]);
+    bottomFrame.functionName = originalName;
+  });
+  it('correctly builds the stack trace of an extension entry', async function() {
+    const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+                       e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz') as
+            Trace.Types.Events.SyntheticProfileCall |
+        undefined;
+    assert.exists(jsCall);
+    const stackTraceForExtensionProfileCall = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
+    assert.exists(stackTraceForExtensionProfileCall);
+
+    // Create an extension entry right next to our profile call (based
+    // on its callTime property).
+    // Test the profile call's stack strace is returned as the
+    // extension entry's stack trace.
+    const mockExtensionEntry = {
+      cat: 'devtools.extension',
+      ts: jsCall.ts,
+      pid: jsCall.pid,
+      tid: jsCall.tid,
+      rawSourceEvent: {
+        cat: 'blink.user_timing',
+        args: {stackTrace: [{functionName: jsCall.callFrame.functionName}], callTime: jsCall.ts - 1},
+        ph: Trace.Types.Events.Phase.ASYNC_NESTABLE_START,
+      },
+    } as Trace.Types.Extensions.SyntheticExtensionEntry;
+    const stackTraceForExtensionEntry = Trace.Extras.StackTraceForEvent.get(mockExtensionEntry, parsedTrace);
+    assert.exists(stackTraceForExtensionEntry);
+
+    assert.strictEqual(stackTraceForExtensionEntry, stackTraceForExtensionProfileCall);
+  });
+  it('uses the stack trace of the profile call that contains an extension entry call time', async function() {
+    const bar = parsedTrace.Renderer.allTraceEntries.find(
+                    e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'bar') as
+            Trace.Types.Events.SyntheticProfileCall |
+        undefined;
+    assert.exists(bar);
+    const stackTraceForExtensionProfileCall = Trace.Extras.StackTraceForEvent.get(bar, parsedTrace);
+    assert.exists(stackTraceForExtensionProfileCall);
+
+    // Create an extension entry contained by the profile call (based on
+    // its callTime property).
+    // Test the profile call's stack strace is returned as
+    // the extension entry's stack trace.
+    const mockExtensionEntry = {
+      cat: 'devtools.extension',
+      ts: bar.ts,
+      pid: bar.pid,
+      tid: bar.tid,
+      rawSourceEvent: {
+        cat: 'blink.user_timing',
+        args: {stackTrace: [{functionName: bar.callFrame.functionName}], callTime: bar.ts + 1},
+        ph: Trace.Types.Events.Phase.ASYNC_NESTABLE_START,
+      },
+    } as Trace.Types.Extensions.SyntheticExtensionEntry;
+    const stackTraceForExtensionEntry = Trace.Extras.StackTraceForEvent.get(mockExtensionEntry, parsedTrace);
+    assert.exists(stackTraceForExtensionEntry);
+
+    assert.strictEqual(stackTraceForExtensionEntry, stackTraceForExtensionProfileCall);
+  });
+
+  it('picks the stack trace of the closest profile call when no profile call contains the extension entry call time',
+     async function() {
+       const bazCalls = parsedTrace.Renderer.allTraceEntries.filter(
+           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+       const firstBaz = bazCalls.at(0);
+       assert.exists(firstBaz);
+       const secondBaz = bazCalls.at(1) as Trace.Types.Events.SyntheticProfileCall;
+       assert.exists(secondBaz);
+       const middlePoint = (secondBaz.ts + firstBaz.ts) / 2;
+
+       const stackTraceForSecondBaz = Trace.Extras.StackTraceForEvent.get(secondBaz, parsedTrace);
+       assert.exists(stackTraceForSecondBaz);
+
+       // Create an extension entry contained closer to the second
+       // baz call (based on its callTime property).
+       // Test the stack trace of baz is used for it.
+       const mockExtensionEntry = {
+         cat: 'devtools.extension',
+         ts: middlePoint,
+         pid: secondBaz.pid,
+         tid: secondBaz.tid,
+         rawSourceEvent: {
+           cat: 'blink.user_timing',
+           args: {stackTrace: [{functionName: secondBaz.callFrame.functionName}], callTime: middlePoint + 1},
+           ph: Trace.Types.Events.Phase.ASYNC_NESTABLE_START,
+         },
+       } as Trace.Types.Extensions.SyntheticExtensionEntry;
+       const stackTraceForExtensionEntry = Trace.Extras.StackTraceForEvent.get(mockExtensionEntry, parsedTrace);
+       assert.exists(stackTraceForExtensionEntry);
+
+       assert.strictEqual(stackTraceForExtensionEntry, stackTraceForSecondBaz);
+     });
+});

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

@@ -0,0 +1,173 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import type * as Handlers from '../handlers/handlers.js';
+import * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+export const stackTraceForEventInTrace =
+    new Map<Handlers.Types.ParsedTrace, Map<Types.Events.Event, Protocol.Runtime.StackTrace>>();
+
+export function clearCacheForTrace(parsedTrace: Handlers.Types.ParsedTrace): void {
+  stackTraceForEventInTrace.delete(parsedTrace);
+}
+/**
+ * This util builds a stack trace that includes async calls for a given
+ * event. It leverages data we collect from sampling to deduce sync
+ * stacks and trace event instrumentation on the V8 debugger to stitch
+ * them together.
+ */
+export function get(event: Types.Events.Event, parsedTrace: Handlers.Types.ParsedTrace): Protocol.Runtime.StackTrace|
+    null {
+  let cacheForTrace = stackTraceForEventInTrace.get(parsedTrace);
+  if (!cacheForTrace) {
+    cacheForTrace = new Map();
+    stackTraceForEventInTrace.set(parsedTrace, cacheForTrace);
+  }
+  const resultFromCache = cacheForTrace.get(event);
+  if (resultFromCache) {
+    return resultFromCache;
+  }
+  let result: Protocol.Runtime.StackTrace|null = null;
+  if (Types.Events.isProfileCall(event)) {
+    result = getForProfileCall(event, parsedTrace);
+  } else if (Types.Extensions.isSyntheticExtensionEntry(event)) {
+    result = getForExtensionEntry(event, parsedTrace);
+  }
+  if (result) {
+    cacheForTrace.set(event, result);
+  }
+  return result;
+}
+
+function getForProfileCall(
+    event: Types.Events.SyntheticProfileCall, parsedTrace: Handlers.Types.ParsedTrace): Protocol.Runtime.StackTrace {
+  // When working with a CPU profile the renderer handler won't have
+  // entries in its tree.
+  const entryToNode =
+      parsedTrace.Renderer.entryToNode.size > 0 ? parsedTrace.Renderer.entryToNode : parsedTrace.Samples.entryToNode;
+  const topStackTrace: Protocol.Runtime.StackTrace = {callFrames: []};
+  let stackTrace: Protocol.Runtime.StackTrace = topStackTrace;
+  let currentEntry = event;
+  let node: Helpers.TreeHelpers.TraceEntryNode|null|undefined = entryToNode.get(event);
+  const traceCache =
+      stackTraceForEventInTrace.get(parsedTrace) || new Map<Types.Events.Event, Protocol.Runtime.StackTrace>();
+  stackTraceForEventInTrace.set(parsedTrace, traceCache);
+  // Move up this node's ancestor tree appending frames to its
+  // stack trace.
+  while (node) {
+    if (!Types.Events.isProfileCall(node.entry)) {
+      node = node.parent;
+      continue;
+    }
+
+    currentEntry = node.entry;
+    // First check if this entry was processed before.
+    const stackTraceFromCache = traceCache.get(node.entry);
+    if (stackTraceFromCache) {
+      stackTrace.callFrames.push(...stackTraceFromCache.callFrames.filter(callFrame => !isNativeJSFunction(callFrame)));
+      stackTrace.parent = stackTraceFromCache.parent;
+      // Only set the description to the cache value if we didn't
+      // compute it in the previous iteration, since the async stack
+      // trace descriptions / taskNames is only extracted when jumping
+      // to the async parent, and that might not have happened when
+      // the cached value was computed (e.g. the cached value
+      // computation started at some point inside the parent stack
+      // trace).
+      stackTrace.description = stackTrace.description || stackTraceFromCache.description;
+      break;
+    }
+
+    if (!isNativeJSFunction(currentEntry.callFrame)) {
+      stackTrace.callFrames.push(currentEntry.callFrame);
+    }
+    const maybeAsyncParentEvent = parsedTrace.AsyncJSCalls.asyncCallToScheduler.get(currentEntry);
+    const maybeAsyncParentNode = maybeAsyncParentEvent && entryToNode.get(maybeAsyncParentEvent.scheduler);
+    if (maybeAsyncParentNode) {
+      // The Protocol.Runtime.StackTrace type is recursive, so we
+      // move one level deeper in it as we walk up the ancestor tree.
+      stackTrace.parent = {callFrames: []};
+      stackTrace = stackTrace.parent;
+      // Note: this description effectively corresponds to the name
+      // of the task that scheduled the stack trace we are jumping
+      // FROM, so it would make sense that it was set to that stack
+      // trace instead of the one we are jumping TO. However, the
+      // JS presentation utils we use to present async stack traces
+      // assume the description is added to the stack trace that
+      // scheduled the async task, so we build the data that way.
+      stackTrace.description = maybeAsyncParentEvent.taskName;
+      node = maybeAsyncParentNode;
+      continue;
+    }
+    node = node.parent;
+  }
+  return topStackTrace;
+}
+
+/**
+ * Finds the JS call in which an extension entry was injected (the
+ * code location that called the extension API), and returns its stack
+ * trace.
+ */
+function getForExtensionEntry(event: Types.Extensions.SyntheticExtensionEntry, parsedTrace: Handlers.Types.ParsedTrace):
+    Protocol.Runtime.StackTrace|null {
+  const eventCallPoint = Helpers.Trace.getZeroIndexedStackTraceForEvent(event)?.[0];
+  if (!eventCallPoint) {
+    return null;
+  }
+  const eventCallTime = Types.Events.isPerformanceMeasureBegin(event.rawSourceEvent) ?
+      event.rawSourceEvent.args.callTime :
+      event.rawSourceEvent.args.data?.callTime;
+  if (eventCallTime === undefined) {
+    return null;
+  }
+  const callsInThread = parsedTrace.Renderer.processes.get(event.pid)?.threads.get(event.tid)?.profileCalls;
+  if (!callsInThread) {
+    return null;
+  }
+  const matchByName = callsInThread.filter(e => {
+    return e.callFrame.functionName === eventCallPoint.functionName;
+  });
+
+  const lastCallBeforeEventIndex =
+      Platform.ArrayUtilities.nearestIndexFromEnd(matchByName, profileCall => profileCall.ts <= eventCallTime);
+  const firstCallAfterEventIndex =
+      Platform.ArrayUtilities.nearestIndexFromBeginning(matchByName, profileCall => profileCall.ts >= eventCallTime);
+  const lastCallBeforeEvent = typeof lastCallBeforeEventIndex === 'number' && matchByName.at(lastCallBeforeEventIndex);
+  const firstCallAfterEvent = typeof firstCallAfterEventIndex === 'number' && matchByName.at(firstCallAfterEventIndex);
+
+  let closestMatchingProfileCall: Types.Events.SyntheticProfileCall;
+  if (!lastCallBeforeEvent && !firstCallAfterEvent) {
+    return null;
+  }
+  if (!lastCallBeforeEvent) {
+    // Per the check above firstCallAfterEvent is guaranteed to exist
+    // but ts is unaware, so we cast the type.
+    closestMatchingProfileCall = firstCallAfterEvent as Types.Events.SyntheticProfileCall;
+  } else if (!firstCallAfterEvent) {
+    closestMatchingProfileCall = lastCallBeforeEvent;
+  } else if (Helpers.Trace.eventContainsTimestamp(lastCallBeforeEvent, eventCallTime)) {
+    closestMatchingProfileCall = lastCallBeforeEvent;
+  }  // pick the closest when the choice isn't clear.
+  else if (eventCallTime - lastCallBeforeEvent.ts < firstCallAfterEvent.ts - eventCallTime) {
+    closestMatchingProfileCall = lastCallBeforeEvent;
+  } else {
+    closestMatchingProfileCall = firstCallAfterEvent;
+  }
+  return get(closestMatchingProfileCall, parsedTrace);
+}
+/**
+ * Determines if a function is a native JS API (like setTimeout,
+ * requestAnimationFrame, consoleTask.run. etc.). This is useful to
+ * discard stack frames corresponding to the JS scheduler function
+ * itself, since it's already being used as title of async stack traces
+ * taken from the async `taskName`. This is also consistent with the
+ * behaviour of the stack trace in the sources
+ * panel.
+ */
+function isNativeJSFunction({columnNumber, lineNumber, url, scriptId}: Protocol.Runtime.CallFrame): boolean {
+  return lineNumber === -1 && columnNumber === -1 && url === '' && scriptId === '0';
+}

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

@@ -8,33 +8,6 @@ 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;

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

@@ -3,12 +3,10 @@
 // found in the LICENSE file.
 
 import * as ThirdPartyWeb from '../../../third_party/third-party-web/third-party-web.js';
-import type * as Handlers from '../handlers/handlers.js';
+import * as Handlers from '../handlers/handlers.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
-import * as URLForEntry from './URLForEntry.js';
-
 export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
 
 export interface Summary {
@@ -22,77 +20,6 @@ export interface SummaryMaps {
   requestsByEntity: Map<Entity, Types.Events.SyntheticNetworkRequest[]>;
 }
 
-/**
- * Returns the origin portion of a Chrome extension URL.
- */
-function getChromeExtensionOrigin(url: URL): string {
-  return url.protocol + '//' + url.host;
-}
-
-function makeUpChromeExtensionEntity(entityCache: Map<string, Entity>, url: string, extensionName?: string): Entity {
-  const parsedUrl = new URL(url);
-  const origin = getChromeExtensionOrigin(parsedUrl);
-  const host = new URL(origin).host;
-  const name = extensionName || host;
-
-  const cachedEntity = entityCache.get(origin);
-  if (cachedEntity) {
-    return cachedEntity;
-  }
-
-  const chromeExtensionEntity = {
-    name,
-    company: name,
-    category: 'Chrome Extension',
-    homepage: 'https://chromewebstore.google.com/detail/' + host,
-    categories: [],
-    domains: [],
-    averageExecutionTime: 0,
-    totalExecutionTime: 0,
-    totalOccurrences: 0,
-  };
-
-  entityCache.set(origin, chromeExtensionEntity);
-  return chromeExtensionEntity;
-}
-
-export function makeUpEntity(entityCache: Map<string, Entity>, url: string): Entity|undefined {
-  if (url.startsWith('chrome-extension:')) {
-    return makeUpChromeExtensionEntity(entityCache, url);
-  }
-
-  // Make up an entity only for valid http/https URLs.
-  if (!url.startsWith('http')) {
-    return;
-  }
-
-  // NOTE: Lighthouse uses a tld database to determine the root domain, but here
-  // we are using third party web's database. Doesn't really work for the case of classifying
-  // domains 3pweb doesn't know about, so it will just give us a guess.
-  const rootDomain = ThirdPartyWeb.ThirdPartyWeb.getRootDomain(url);
-  if (!rootDomain) {
-    return;
-  }
-
-  if (entityCache.has(rootDomain)) {
-    return entityCache.get(rootDomain);
-  }
-
-  const unrecognizedEntity = {
-    name: rootDomain,
-    company: rootDomain,
-    category: '',
-    categories: [],
-    domains: [rootDomain],
-    averageExecutionTime: 0,
-    totalExecutionTime: 0,
-    totalOccurrences: 0,
-    isUnrecognized: true,
-  };
-  entityCache.set(rootDomain, unrecognizedEntity);
-  return unrecognizedEntity;
-}
-
 function getSelfTimeByUrl(
     parsedTrace: Handlers.Types.ParsedTrace, bounds: Types.Timing.TraceWindowMicroSeconds): Map<string, number> {
   const selfTimeByUrl = new Map<string, number>();
@@ -118,7 +45,7 @@ function getSelfTimeByUrl(
             continue;
           }
 
-          const url = URLForEntry.getNonResolved(parsedTrace as Handlers.Types.ParsedTrace, event);
+          const url = Handlers.Helpers.getNonResolvedURL(event, parsedTrace as Handlers.Types.ParsedTrace);
           if (!url) {
             continue;
           }
@@ -138,7 +65,7 @@ export function getEntitiesByRequest(requests: Types.Events.SyntheticNetworkRequ
   const madeUpEntityCache = new Map<string, Entity>();
   for (const request of requests) {
     const url = request.args.data.url;
-    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? makeUpEntity(madeUpEntityCache, url);
+    const entity = ThirdPartyWeb.ThirdPartyWeb.getEntity(url) ?? Handlers.Helpers.makeUpEntity(madeUpEntityCache, url);
     if (entity) {
       entityByRequest.set(request, entity);
     }

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

@@ -6,8 +6,8 @@ export * as FetchNodes from './FetchNodes.js';
 export * as FilmStrip from './FilmStrip.js';
 export * as MainThreadActivity from './MainThreadActivity.js';
 export * as Metadata from './Metadata.js';
+export * as StackTraceForEvent from './StackTraceForEvent.js';
 export * as ThirdParties from './ThirdParties.js';
 export * as TimelineJSProfile from './TimelineJSProfile.js';
 export * as TraceFilter from './TraceFilter.js';
 export * as TraceTree from './TraceTree.js';
-export * as URLForEntry from './URLForEntry.js';

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

@@ -0,0 +1,40 @@
+// 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 {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
+
+async function parseEvents(events: readonly Trace.Types.Events.Event[]) {
+  Trace.Handlers.ModelHandlers.Flows.reset();
+  Trace.Handlers.ModelHandlers.AnimationFrames.reset();
+  for (const event of events) {
+    Trace.Handlers.ModelHandlers.Flows.handleEvent(event);
+    Trace.Handlers.ModelHandlers.AnimationFrames.handleEvent(event);
+  }
+  await Trace.Handlers.ModelHandlers.Flows.finalize();
+  await Trace.Handlers.ModelHandlers.AnimationFrames.finalize();
+}
+
+describe('AnimationFramesHandler', () => {
+  it('can group all related animation frame events', async function() {
+    Trace.Handlers.ModelHandlers.AnimationFrames.reset();
+    const events = await TraceLoader.rawEvents(this, 'web-dev-animation-frames.json.gz');
+    await parseEvents(events);
+    const data = Trace.Handlers.ModelHandlers.AnimationFrames.data();
+    assert.lengthOf(data.animationFrames, 32);
+    const firstFrame = data.animationFrames[0];
+    assert.strictEqual(firstFrame.args.data.beginEvent.args?.animation_frame_timing_info.duration_ms, 76);
+    assert.strictEqual(firstFrame.dur, Trace.Types.Timing.MicroSeconds(76038));
+  });
+
+  it('links an animation frame to its presentation event', async function() {
+    Trace.Handlers.ModelHandlers.AnimationFrames.reset();
+    const events = await TraceLoader.rawEvents(this, 'web-dev-animation-frames.json.gz');
+    await parseEvents(events);
+    const data = Trace.Handlers.ModelHandlers.AnimationFrames.data();
+    const firstFrame = data.animationFrames[0];
+    const presentationEvent = data.presentationForFrame.get(firstFrame);
+    assert.isDefined(presentationEvent);
+    assert.strictEqual(presentationEvent.args?.id, firstFrame.args.data.beginEvent.args?.id);
+  });
+});