chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

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');
+  });
+});

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/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, {