chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/timeline/utils/EntityMapper.test.ts

@@ -0,0 +1,124 @@
+// 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 Trace from '../../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+
+import * as Utils from './utils.js';
+
+describeWithEnvironment('EntityMapper', function() {
+  it('correctly merges handler data', async function() {
+    const {parsedTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+
+    const fromRenderer = new Map(parsedTrace.Renderer.entityMappings.eventsByEntity);
+    const fromNetwork = new Map(parsedTrace.NetworkRequests.entityMappings.eventsByEntity);
+
+    const mapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+    const mappings = mapper.mappings();
+
+    // [paulirish.com, Google Tag Manager, Google Fonts, Google Analytics, Disqus, Firebase]
+    assert.deepEqual(mappings.eventsByEntity.size, 6);
+
+    // Check that mappings.eventsByEntity includes all the events of RendererHandler.
+    fromRenderer.entries().forEach(([entity, events]) => {
+      assert.isTrue(mappings.eventsByEntity.has(entity));
+      const gotEvents = mappings.eventsByEntity.get(entity) ?? [];
+      events.forEach(e => {
+        assert.isTrue(gotEvents.includes(e));
+      });
+    });
+
+    // Check that mappings.eventsByEntity includes all the events of NetworkRequestsHandler.
+    fromNetwork.entries().forEach(([entity, events]) => {
+      assert.isTrue(mappings.eventsByEntity.has(entity));
+      const gotEvents = mappings.eventsByEntity.get(entity) ?? [];
+      events.forEach(e => {
+        assert.isTrue(gotEvents.includes(e));
+      });
+    });
+
+    // Additioanlly make sure they sum up.
+    mappings.eventsByEntity.entries().forEach(([entity, events]) => {
+      const eventsInNetwork = fromNetwork.get(entity) ?? [];
+      const eventsInRenderer = fromRenderer.get(entity) ?? [];
+      assert.deepEqual(events.length, eventsInNetwork.length + eventsInRenderer.length);
+    });
+  });
+
+  describe('entityForEvent', () => {
+    it('correctly contains network req entity mappings', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+      const mapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
+      // Check entities for network requests.
+      const reqs = parsedTrace.NetworkRequests.byOrigin.get('www.paulirish.com')?.all ?? [];
+      let gotEntity = mapper.entityForEvent(reqs[0]);
+      assert.deepEqual(gotEntity?.name, 'paulirish.com');
+
+      const gstatic = parsedTrace.NetworkRequests.byOrigin.get('fonts.gstatic.com')?.all ?? [];
+      gotEntity = mapper.entityForEvent(gstatic[0]);
+      assert.deepEqual(gotEntity?.name, 'Google Fonts');
+    });
+
+    it('correctly contains main event entity mappings', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+      const mapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
+      const funcCall = parsedTrace.Renderer.allTraceEntries.find(e => Trace.Types.Events.isFunctionCall(e));
+      assert.exists(funcCall);
+
+      // This function call should map to paulirish.com entity.
+      const gotEntity = mapper.entityForEvent(funcCall);
+      assert.deepEqual(gotEntity?.name, 'paulirish.com');
+    });
+  });
+  describe('eventsForEntity', () => {
+    it('correctly contains network req entity mappings', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+      const mapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
+      const reqs = parsedTrace.NetworkRequests.byOrigin.get('www.paulirish.com')?.all ?? [];
+      const entity = mapper.entityForEvent(reqs[0]);
+      assert.exists(entity);
+      assert.deepEqual(entity.name, 'paulirish.com');
+
+      // Reqs should all be mapped to the correct entity.
+      const gotEvents = mapper.eventsForEntity(entity);
+      reqs.forEach(req => {
+        assert.isTrue(gotEvents.includes(req));
+      });
+    });
+  });
+  describe('first party', () => {
+    it('correctly captures the first party entity', async function() {
+      const {parsedTrace: localhostTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+      let mapper = new Utils.EntityMapper.EntityMapper(localhostTrace);
+      let got = mapper.firstPartyEntity();
+      assert.deepEqual(got?.name, 'localhost');
+
+      const {parsedTrace: paulTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+      mapper = new Utils.EntityMapper.EntityMapper(paulTrace);
+      got = mapper.firstPartyEntity();
+      assert.deepEqual(got?.name, 'paulirish.com');
+
+      const {parsedTrace: webDevTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+      mapper = new Utils.EntityMapper.EntityMapper(webDevTrace);
+      got = mapper.firstPartyEntity();
+      assert.deepEqual(got?.name, 'web.dev');
+    });
+    it('correctly captures 3p events', async function() {
+      const {parsedTrace: paulTrace} = await TraceLoader.traceEngine(this, 'lantern/paul/trace.json.gz');
+      const mapper = new Utils.EntityMapper.EntityMapper(paulTrace);
+      const got = mapper.firstPartyEntity();
+      assert.exists(got);
+      assert.deepEqual(got.name, 'paulirish.com');
+      const firstPartyEvents = mapper.eventsForEntity(got);
+      const gotThirdPartyEvents = mapper.thirdPartyEvents();
+      gotThirdPartyEvents.forEach(e => {
+        assert.isTrue(!firstPartyEvents.includes(e));
+      });
+    });
+  });
+});

package/front_end/panels/timeline/utils/EntityMapper.ts

@@ -0,0 +1,164 @@
+// 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 * as Trace from '../../../models/trace/trace.js';
+
+export class EntityMapper {
+  #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #entityMappings: Trace.Handlers.Helpers.EntityMappings;
+  #firstPartyEntity: Trace.Handlers.Helpers.Entity|null;
+  #thirdPartyEvents: Trace.Types.Events.Event[] = [];
+  /**
+   * When resolving urls and updating our entity mapping in the
+   * SourceMapsResolver, a single call frame can appear multiple times
+   * as different cpu profile nodes. To avoid duplicate work on the
+   * same CallFrame, we can keep track of them.
+   */
+  #resolvedCallFrames: Set<Protocol.Runtime.CallFrame> = new Set();
+
+  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+    this.#parsedTrace = parsedTrace;
+    this.#entityMappings = this.#initializeEntityMappings(this.#parsedTrace);
+    this.#firstPartyEntity = this.#findFirstPartyEntity();
+    this.#thirdPartyEvents = this.#getThirdPartyEvents();
+  }
+
+  /**
+   * This initializes our maps using the parsedTrace data from both the RendererHandler and
+   * the NetworkRequestsHandler.
+   */
+  #initializeEntityMappings(parsedTrace: Trace.Handlers.Types.ParsedTrace): Trace.Handlers.Helpers.EntityMappings {
+    // NetworkRequestHander caches.
+    const entityByNetworkEvent = parsedTrace.NetworkRequests.entityMappings.entityByEvent;
+    const networkEventsByEntity = parsedTrace.NetworkRequests.entityMappings.eventsByEntity;
+    const networkCreatedCache = parsedTrace.NetworkRequests.entityMappings.createdEntityCache;
+
+    // RendrerHandler caches.
+    const entityByRendererEvent = parsedTrace.Renderer.entityMappings.entityByEvent;
+    const rendererEventsByEntity = parsedTrace.Renderer.entityMappings.eventsByEntity;
+    const rendererCreatedCache = parsedTrace.Renderer.entityMappings.createdEntityCache;
+
+    // Build caches.
+    const entityByEvent = new Map([...entityByNetworkEvent, ...entityByRendererEvent]);
+    const createdEntityCache = new Map([...networkCreatedCache, ...rendererCreatedCache]);
+    const eventsByEntity = this.#mergeEventsByEntities(rendererEventsByEntity, networkEventsByEntity);
+
+    return {
+      entityByEvent,
+      eventsByEntity,
+      createdEntityCache,
+    };
+  }
+
+  #findFirstPartyEntity(): Trace.Handlers.Helpers.Entity|null {
+    // As a starting point, we consider the first navigation as the 1P.
+    const nav = Array.from(this.#parsedTrace.Meta.navigationsByNavigationId.values()).sort((a, b) => a.ts - b.ts)[0];
+    const firstPartyUrl = nav?.args.data?.documentLoaderURL ?? this.#parsedTrace.Meta.mainFrameURL;
+    return Trace.Handlers.Helpers.getEntityForUrl(firstPartyUrl, this.#entityMappings.createdEntityCache) ?? null;
+  }
+
+  #getThirdPartyEvents(): Trace.Types.Events.Event[] {
+    const entries = Array.from(this.#entityMappings.eventsByEntity.entries());
+    const thirdPartyEvents = entries.flatMap(([entity, requests]) => {
+      return entity.name !== this.#firstPartyEntity?.name ? requests : [];
+    });
+    return thirdPartyEvents;
+  }
+
+  #mergeEventsByEntities(
+      a: Map<Trace.Handlers.Helpers.Entity, Trace.Types.Events.Event[]>,
+      b: Map<Trace.Handlers.Helpers.Entity, Trace.Types.Events.Event[]>):
+      Map<Trace.Handlers.Helpers.Entity, Trace.Types.Events.Event[]> {
+    const merged = new Map(a);
+    for (const [entity, events] of b.entries()) {
+      if (merged.has(entity)) {
+        const currentEvents = merged.get(entity) ?? [];
+        merged.set(entity, [...currentEvents, ...events]);
+      } else {
+        merged.set(entity, [...events]);
+      }
+    }
+    return merged;
+  }
+
+  /**
+   * Returns an entity for a given event if any.
+   */
+  entityForEvent(event: Trace.Types.Events.Event): Trace.Handlers.Helpers.Entity|null {
+    return this.#entityMappings.entityByEvent.get(event) ?? null;
+  }
+
+  /**
+   * Returns trace events that correspond with a given entity if any.
+   */
+  eventsForEntity(entity: Trace.Handlers.Helpers.Entity): Trace.Types.Events.Event[] {
+    return this.#entityMappings.eventsByEntity.get(entity) ?? [];
+  }
+
+  firstPartyEntity(): Trace.Handlers.Helpers.Entity|null {
+    return this.#firstPartyEntity;
+  }
+
+  thirdPartyEvents(): Trace.Types.Events.Event[] {
+    return this.#thirdPartyEvents;
+  }
+
+  mappings(): Trace.Handlers.Helpers.EntityMappings {
+    return this.#entityMappings;
+  }
+
+  /**
+   * This updates entity mapping given a callFrame and sourceURL (newly resolved),
+   * updating both eventsByEntity and entityByEvent. The call frame provides us the
+   * URL and sourcemap source location that events map to. This describes the exact events we
+   * want to update. We then update the events with the new sourceURL.
+   *
+   * compiledURLs -> the actual file's url (e.g. my-big-bundle.min.js)
+   * sourceURLs -> the resolved urls (e.g. react.development.js, my-app.ts)
+   * @param callFrame
+   * @param sourceURL
+   */
+  updateSourceMapEntities(callFrame: Protocol.Runtime.CallFrame, sourceURL: string): void {
+    // Avoid the extra work, if we have already resolved this callFrame.
+    if (this.#resolvedCallFrames.has(callFrame)) {
+      return;
+    }
+
+    const compiledURL = callFrame.url;
+    const currentEntity = Trace.Handlers.Helpers.getEntityForUrl(compiledURL, this.#entityMappings.createdEntityCache);
+    const resolvedEntity = Trace.Handlers.Helpers.getEntityForUrl(sourceURL, this.#entityMappings.createdEntityCache);
+    // If the entity changed, then we should update our caches. If we don't have a currentEntity,
+    // we can't do much with that. Additionally without our current entity, we don't have a reference to the related
+    // events so there are no relationships to be made.
+    if ((resolvedEntity === currentEntity) || (!currentEntity || !resolvedEntity)) {
+      return;
+    }
+    const currentEntityEvents = (currentEntity && this.#entityMappings.eventsByEntity.get(currentEntity)) ?? [];
+    // The events of the entity that match said source location.
+    const sourceLocationEvents: Trace.Types.Events.Event[] = [];
+    // The events that don't match the source location, but that we should keep mapped to its current entity.
+    const unrelatedEvents: Trace.Types.Events.Event[] = [];
+    currentEntityEvents?.forEach(e => {
+      const stackTrace = Trace.Helpers.Trace.getZeroIndexedStackTraceForEvent(e);
+      const cf = stackTrace?.at(0);
+
+      const matchesCallFrame = cf && Trace.Helpers.Trace.isMatchingCallFrame(cf, callFrame);
+      if (matchesCallFrame) {
+        sourceLocationEvents.push(e);
+      } else {
+        unrelatedEvents.push(e);
+      }
+    });
+    // Update current entity.
+    this.#entityMappings.eventsByEntity.set(currentEntity, unrelatedEvents);
+    // Map the source location events to the new entity.
+    this.#entityMappings.eventsByEntity.set(resolvedEntity, sourceLocationEvents);
+    sourceLocationEvents.forEach(e => {
+      this.#entityMappings.entityByEvent.set(e, resolvedEntity);
+    });
+    // Update our CallFrame cache when we've got a resolved entity.
+    this.#resolvedCallFrames.add(callFrame);
+  }
+}

package/front_end/panels/timeline/utils/EntryStyles.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 
@@ -47,6 +48,10 @@ const UIStrings = {
    *@description Text in Timeline UIUtils of the Performance panel
    */
   task: 'Task',
+  /**
+   *@description Text in Timeline UIUtils of the Performance panel
+   */
+  consoleTaskRun: 'Run console task',
   /**
    *@description Text for other types of items
    */
@@ -551,13 +556,15 @@ export class TimelineRecordStyle {
 }
 export class TimelineCategory {
   name: EventCategory;
-  title: string;
+  title: Platform.UIString.LocalizedString;
   visible: boolean;
   childColor: string;
   colorInternal: string;
   #hidden?: boolean;
 
-  constructor(name: EventCategory, title: string, visible: boolean, childColor: string, color: string) {
+  constructor(
+      name: EventCategory, title: Platform.UIString.LocalizedString, visible: boolean, childColor: string,
+      color: string) {
     this.name = name;
     this.title = title;
     this.visible = visible;
@@ -1060,6 +1067,8 @@ export function maybeInitSylesMap(): EventStylesMap {
 
     [Trace.Types.Events.Name.ABORT_POST_TASK_CALLBACK]:
         new TimelineRecordStyle(i18nString(UIStrings.abortPostTaskCallback), defaultCategoryStyles.scripting),
+    [Trace.Types.Events.Name.V8_CONSOLE_RUN_TASK]:
+        new TimelineRecordStyle(i18nString(UIStrings.consoleTaskRun), defaultCategoryStyles.scripting),
   };
   return eventStylesMap;
 }
@@ -1103,3 +1112,32 @@ export function getTimelineMainEventCategories(): EventCategory[] {
 export function setTimelineMainEventCategories(categories: EventCategory[]): void {
   mainEventCategories = categories;
 }
+
+export function markerDetailsForEvent(event: Trace.Types.Events.Event): {
+  color: string,
+  title: string,
+} {
+  let title = '';
+  let color = 'var(--color-text-primary)';
+  if (Trace.Types.Events.isFirstContentfulPaint(event)) {
+    color = 'var(--sys-color-green-bright)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
+  }
+  if (Trace.Types.Events.isLargestContentfulPaintCandidate(event)) {
+    color = 'var(--sys-color-green)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
+  }
+  if (Trace.Types.Events.isNavigationStart(event)) {
+    color = 'var(--color-text-primary)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.NAV;
+  }
+  if (Trace.Types.Events.isMarkDOMContent(event)) {
+    color = 'var(--color-text-disabled)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.DCL;
+  }
+  if (Trace.Types.Events.isMarkLoad(event)) {
+    color = 'var(--color-text-disabled)';
+    title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.L;
+  }
+  return {color, title};
+}

package/front_end/panels/timeline/utils/Helpers.ts

@@ -6,11 +6,31 @@ import '../../../ui/components/markdown_view/markdown_view.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Platform from '../../../core/platform/platform.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
+import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as MobileThrottling from '../../mobile_throttling/mobile_throttling.js';
 
 const {html} = LitHtml;
 
+export function getThrottlingRecommendations():
+    {cpuRate: number|null, networkConditions: SDK.NetworkManager.Conditions|null} {
+  const cpuRate = 4;  // TODO(crbug.com/311438112): suggest "mid-tier" mobile device when implemented.
+  let networkConditions = null;
+
+  const response = CrUXManager.CrUXManager.instance().getSelectedFieldMetricData('round_trip_time');
+  if (response?.percentiles) {
+    const rtt = Number(response.percentiles.p75);
+    networkConditions = MobileThrottling.ThrottlingPresets.ThrottlingPresets.getRecommendedNetworkPreset(rtt);
+  }
+
+  return {
+    cpuRate,
+    networkConditions,
+  };
+}
+
 function createTrimmedUrlSearch(url: URL): string {
   const maxSearchValueLength = 8;
   let search = '';

package/front_end/panels/timeline/utils/IgnoreList.test.ts

@@ -16,7 +16,7 @@ import {
   makeProfileCall,
 } from '../../../testing/TraceHelpers.js';
 
-import { // eslint-disable-line rulesdir/es_modules_import
+import { // eslint-disable-line rulesdir/es-modules-import
   loadCodeLocationResolvingScenario,
 } from './SourceMapsResolver.test.js';
 import * as Utils from './utils.js';

package/front_end/panels/timeline/utils/ImageCache.test.ts

@@ -48,11 +48,11 @@ describe('ImageCache', () => {
   it('loadImage resolves invalid images to null', async () => {
     const datauri = 'data:image/jpg;base64,INVALIDDATA';
     const res = await loadImage(datauri);
-    assert.strictEqual(res, null);
+    assert.isNull(res);
   });
 
   it('getOrQueue should return null for a new screenshot', () => {
-    assert.strictEqual(getOrQueue(syntheticScreenshot1), null);
+    assert.isNull(getOrQueue(syntheticScreenshot1));
   });
 
   it('getOrQueue should return the same image for the same screenshot', async () => {

package/front_end/panels/timeline/utils/SourceMapsResolver.test.ts

@@ -18,6 +18,7 @@ import {MockProtocolBackend} from '../../../testing/MockScopeChain.js';
 import {encodeSourceMap} from '../../../testing/SourceMapEncoder.js';
 import {loadBasicSourceMapExample} from '../../../testing/SourceMapHelpers.js';
 import {
+  makeMockRendererHandlerData,
   makeMockSamplesHandlerData,
   makeProfileCall,
 } from '../../../testing/TraceHelpers.js';
@@ -115,6 +116,10 @@ function parsedTraceFromProfileCalls(profileCalls: Trace.Types.Events.SyntheticP
   return {
     Samples: makeMockSamplesHandlerData(profileCalls),
     Workers: workersData,
+    Renderer: makeMockRendererHandlerData(profileCalls),
+    NetworkRequests:
+        {entityMappings: {entityByEvent: new Map(), eventsByEntity: new Map(), createdEntityCache: new Map()}},
+    Meta: {mainFrameURL: 'https://example.com', navigationsByNavigationId: new Map()},
   } as Trace.Handlers.Types.ParsedTrace;
 }
 
@@ -222,7 +227,8 @@ describeWithMockConnection('SourceMapsResolver', () => {
 
       // For a profile call with mappings, it must return the mapped script.
       const traceWithMappings = parsedTraceFromProfileCalls([profileCallWithMappings]);
-      let resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings);
+      const mapperWithMappings = new Utils.EntityMapper.EntityMapper(traceWithMappings);
+      let resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings, mapperWithMappings);
       await resolver.install();
       let sourceMappedURL =
           Utils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(traceWithMappings, profileCallWithMappings);
@@ -230,7 +236,8 @@ describeWithMockConnection('SourceMapsResolver', () => {
 
       // For a profile call without mappings, it must return the original URL
       const traceWithoutMappings = parsedTraceFromProfileCalls([profileCallWithNoMappings]);
-      resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithoutMappings);
+      const mapperWithoutMappings = new Utils.EntityMapper.EntityMapper(traceWithoutMappings);
+      resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithoutMappings, mapperWithoutMappings);
       await resolver.install();
       sourceMappedURL = Utils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(
           traceWithoutMappings, profileCallWithNoMappings);
@@ -248,4 +255,78 @@ describeWithMockConnection('SourceMapsResolver', () => {
       assert.isTrue(listener.notCalled);
     });
   });
+  describe('updating entity mapping', () => {
+    it('correctly updates mapping for event that maps to a script', async function() {
+      const {scriptId} = await loadCodeLocationResolvingScenario();
+
+      const profileCall =
+          makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+      const LINE_NUMBER = 0;
+      const COLUMN_NUMBER = 9;
+      profileCall.callFrame = {
+        lineNumber: LINE_NUMBER,
+        columnNumber: COLUMN_NUMBER,
+        functionName: 'minified',
+        scriptId,
+        url: 'http://example-domain.com/',
+      };
+      const profileCallUnmapped =
+          makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+      profileCallUnmapped.callFrame = {
+        lineNumber: 2,
+        columnNumber: 0,
+        functionName: '',
+        scriptId,
+        url: 'http://example-domain.com/',
+      };
+
+      const trace = parsedTraceFromProfileCalls([profileCall, profileCallUnmapped]);
+      const mapper = new Utils.EntityMapper.EntityMapper(trace);
+
+      const testEntity = {
+        name: 'example-domain.com',
+        company: 'example-domain.com',
+        category: '',
+        categories: [],
+        domains: ['example-domain.com'],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+        isUnrecognized: true,
+      };
+      // Set a fake entity for this event that should get overriden. Initially
+      // both traces are mapped together, after the sourcemap that should change
+      mapper.mappings().entityByEvent.set(profileCall, testEntity);
+      mapper.mappings().entityByEvent.set(profileCallUnmapped, testEntity);
+      mapper.mappings().eventsByEntity.set(testEntity, [profileCall, profileCallUnmapped]);
+      mapper.mappings().createdEntityCache.set('example-domain.com', testEntity);
+
+      const resolver = new Utils.SourceMapsResolver.SourceMapsResolver(trace, mapper);
+      // This should update the entities
+      await resolver.install();
+      const afterEntityOfEvent = mapper.entityForEvent(profileCall);
+      const expected = {
+        name: 'example.com',
+        company: 'example.com',
+        category: '',
+        categories: [],
+        domains: ['example.com'],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+        isUnrecognized: true,
+      };
+      assert.exists(afterEntityOfEvent);
+      assert.deepEqual(afterEntityOfEvent, expected);
+      // The mapped event should now map to its new entity.
+      const gotEventsMapped = mapper.eventsForEntity(afterEntityOfEvent) ?? [];
+      assert.deepEqual(gotEventsMapped, [profileCall]);
+
+      // The unmapped event should keep its original entity.
+      const gotEventsUnmapped = mapper.eventsForEntity(testEntity) ?? [];
+      assert.deepEqual(gotEventsUnmapped, [profileCallUnmapped]);
+      const gotUnmappedEntity = mapper.entityForEvent(profileCallUnmapped);
+      assert.deepEqual(gotUnmappedEntity, testEntity);
+    });
+  });
 });

package/front_end/panels/timeline/utils/SourceMapsResolver.ts

@@ -10,6 +10,8 @@ import * as SourceMapScopes from '../../../models/source_map_scopes/source_map_s
 import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 
+import type * as EntityMapper from './EntityMapper.js';
+
 type ResolvedCodeLocationData = {
   name: string|null,
   devtoolsLocation: Workspace.UISourceCode.UILocation|null,
@@ -26,15 +28,12 @@ export class SourceMappingsUpdated extends Event {
   }
 }
 
-// Resolved code location data is keyed based on
-// ProcessID=>ThreadID=> Call frame key.
 // The code location key is created as a concatenation of its fields.
-export const resolvedCodeLocationDataNames:
-    Map<Trace.Types.Events.ProcessID, Map<Trace.Types.Events.ThreadID, Map<string, ResolvedCodeLocationData|null>>> =
-        new Map();
+export const resolvedCodeLocationDataNames: Map<string, ResolvedCodeLocationData|null> = new Map();
 
 export class SourceMapsResolver extends EventTarget {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #entityMapper: EntityMapper.EntityMapper|null = null;
 
   #isResolving = false;
 
@@ -45,9 +44,10 @@ export class SourceMapsResolver extends EventTarget {
   // those workers too.
   #debuggerModelsToListen = new Set<SDK.DebuggerModel.DebuggerModel>();
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace, entityMapper?: EntityMapper.EntityMapper) {
     super();
     this.#parsedTrace = parsedTrace;
+    this.#entityMapper = entityMapper ?? null;
   }
 
   static clearResolvedNodeNames(): void {
@@ -71,6 +71,11 @@ export class SourceMapsResolver extends EventTarget {
    *
    * TODO(andoli): This can return incorrect scripts if the target page has been reloaded since the trace.
    */
+  static resolvedCodeLocationForCallFrame(callFrame: Protocol.Runtime.CallFrame): ResolvedCodeLocationData|null {
+    const codeLocationKey = this.keyForCodeLocation(callFrame as Protocol.Runtime.CallFrame);
+    return resolvedCodeLocationDataNames.get(codeLocationKey) ?? null;
+  }
+
   static resolvedCodeLocationForEntry(entry: Trace.Types.Events.Event): ResolvedCodeLocationData|null {
     let callFrame = null;
     if (Trace.Types.Events.isProfileCall(entry)) {
@@ -82,8 +87,7 @@ export class SourceMapsResolver extends EventTarget {
       }
       callFrame = stackTrace[0];
     }
-    const codeLocationKey = this.keyForCodeLocation(callFrame as Protocol.Runtime.CallFrame);
-    return resolvedCodeLocationDataNames.get(entry.pid)?.get(entry.tid)?.get(codeLocationKey) ?? null;
+    return SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame as Protocol.Runtime.CallFrame);
   }
 
   static resolvedURLForEntry(parsedTrace: Trace.Handlers.Types.ParsedTrace, entry: Trace.Types.Events.Event):
@@ -95,23 +99,17 @@ export class SourceMapsResolver extends EventTarget {
     }
     // If no source mapping was found for an entry's URL, then default
     // to the URL value contained in the event itself, if any.
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, entry);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(entry, parsedTrace);
     if (url) {
       return Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url)?.url() ?? url;
     }
     return null;
   }
 
-  static storeResolvedNodeDataForEntry(
-      pid: Trace.Types.Events.ProcessID, tid: Trace.Types.Events.ThreadID, callFrame: Protocol.Runtime.CallFrame,
-      resolvedCodeLocationData: ResolvedCodeLocationData): void {
-    const resolvedForPid = resolvedCodeLocationDataNames.get(pid) ||
-        new Map<Trace.Types.Events.ThreadID, Map<string, ResolvedCodeLocationData|null>>();
-    const resolvedForTid = resolvedForPid.get(tid) || new Map<string, ResolvedCodeLocationData|null>();
+  static storeResolvedCodeDataForCallFrame(
+      callFrame: Protocol.Runtime.CallFrame, resolvedCodeLocationData: ResolvedCodeLocationData): void {
     const keyForCallFrame = this.keyForCodeLocation(callFrame);
-    resolvedForTid.set(keyForCallFrame, resolvedCodeLocationData);
-    resolvedForPid.set(tid, resolvedForTid);
-    resolvedCodeLocationDataNames.set(pid, resolvedForPid);
+    resolvedCodeLocationDataNames.set(keyForCallFrame, resolvedCodeLocationData);
   }
 
   async install(): Promise<void> {
@@ -167,7 +165,7 @@ export class SourceMapsResolver extends EventTarget {
     // is attach. If not, we do not notify the flamechart that mappings
     // were updated, since that would trigger a rerender.
     let updatedMappings = false;
-    for (const [pid, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
+    for (const [, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
       for (const [tid, threadProfile] of threadsInProcess) {
         const nodes = threadProfile.parsedProfile.nodes() ?? [];
         const target = this.#targetForThread(tid);
@@ -189,9 +187,13 @@ export class SourceMapsResolver extends EventTarget {
               await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
                   location);
           updatedMappings ||= Boolean(uiLocation);
+          if (uiLocation?.uiSourceCode.url() && this.#entityMapper) {
+            // Update mappings for the related events of the entity.
+            this.#entityMapper.updateSourceMapEntities(node.callFrame, uiLocation.uiSourceCode.url());
+          }
 
-          SourceMapsResolver.storeResolvedNodeDataForEntry(
-              pid, tid, node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation, script});
+          SourceMapsResolver.storeResolvedCodeDataForCallFrame(
+              node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation, script});
         }
       }
     }

package/front_end/panels/timeline/utils/utils.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.
 import * as AICallTree from './AICallTree.js';
+import * as EntityMapper from './EntityMapper.js';
 import * as EntryName from './EntryName.js';
 import * as EntryStyles from './EntryStyles.js';
 import * as Helpers from './Helpers.js';
@@ -12,6 +13,7 @@ import * as SourceMapsResolver from './SourceMapsResolver.js';
 
 export {
   AICallTree,
+  EntityMapper,
   EntryName,
   EntryStyles,
   Helpers,