[RPP] Adds entity to network and main chart tooltips

network tooltip: https://screenshot.googleplex.com/BQ62tG765YonHZL
main track tooltip: https://screenshot.googleplex.com/67SnHs453rQvNGv

Bug:370805066
Change-Id: I2faebdae3bda8e0a50954027d93cac323428a9db
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216980
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Adriana Ixba

front_end/models/trace/handlers/helpers.ts

@@ -8,7 +8,9 @@ import * as Types from '../types/types.js';
 
 import type {ParsedTrace} from './types.js';
 
-export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number];
+export type Entity = typeof ThirdPartyWeb.ThirdPartyWeb.entities[number]&{
+  isUnrecognized?: boolean,
+};
 
 export interface EntityMappings {
   createdEntityCache: Map<string, Entity>;

front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -202,6 +202,7 @@ export class CompatibilityTracksAppender {
   #layoutShiftsTrackAppender: LayoutShiftsTrackAppender;
   #threadAppenders: ThreadAppender[] = [];
   #serverTimingsTrackAppender: ServerTimingsTrackAppender;
+  #entityMapper: TimelineUtils.EntityMapper.EntityMapper|null;
 
   /**
    * @param flameChartData the data used by the flame chart renderer on
@@ -215,12 +216,15 @@ export class CompatibilityTracksAppender {
    * is needed only for compatibility with the legacy flamechart
    * architecture and should be removed once all tracks use the new
    * system.
+   * @param entityMapper 3P entity data for the trace.
    */
   constructor(
       flameChartData: PerfUI.FlameChart.FlameChartTimelineData, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      entryData: Trace.Types.Events.Event[], legacyEntryTypeByLevel: EntryType[]) {
+      entryData: Trace.Types.Events.Event[], legacyEntryTypeByLevel: EntryType[],
+      entityMapper: TimelineUtils.EntityMapper.EntityMapper|null) {
     this.#flameChartData = flameChartData;
     this.#parsedTrace = parsedTrace;
+    this.#entityMapper = entityMapper;
     this.#entryData = entryData;
     this.#colorGenerator = new Common.Color.Generator(
         /* hueSpace= */ {min: 30, max: 55, count: undefined},
@@ -659,13 +663,14 @@ export class CompatibilityTracksAppender {
         '');
     if (url) {
       const MAX_PATH_LENGTH = 45;
-      const MAX_ORIGIN_LENGTH = 30;
       const path = Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_PATH_LENGTH);
-      const origin =
-          Platform.StringUtilities.trimEndWithMaxLength(url.origin.replace('https://', ''), MAX_ORIGIN_LENGTH);
       const urlElems = document.createElement('div');
       urlElems.createChild('span', 'popoverinfo-url-path').textContent = path;
-      urlElems.createChild('span', 'popoverinfo-url-origin').textContent = `(${origin})`;
+      const entity = this.#entityMapper ? this.#entityMapper.entityForEvent(event) : null;
+      // Include entity with origin if it's non made-up entity, otherwise there'd be
+      // repetition with the origin.
+      const originWithEntity = TimelineUtils.Helpers.formatOriginWithEntity(url, entity);
+      urlElems.createChild('span', 'popoverinfo-url-origin').textContent = `(${originWithEntity})`;
       info.additionalElements.push(urlElems);
     }
 

front_end/panels/timeline/TimelineFlameChartDataProvider.test.ts

@@ -18,7 +18,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     it('returns the correct events for tree views given a flame chart group', async function() {
       const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'sync-like-timings.json.gz');
-      dataProvider.setModel(parsedTrace);
+      const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+      dataProvider.setModel(parsedTrace, entityMapper);
       const timingsTrackGroup = dataProvider.timelineData().groups.find(g => g.name === 'Timings');
       if (!timingsTrackGroup) {
         assert.fail('Could not find Timings track flame chart group');
@@ -36,7 +37,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     it('filters out async events if they cannot be added to the tree', async function() {
       const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'timings-track.json.gz');
-      dataProvider.setModel(parsedTrace);
+      const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+      dataProvider.setModel(parsedTrace, entityMapper);
       const timingsTrackGroup = dataProvider.timelineData().groups.find(g => g.name === 'Timings');
       if (!timingsTrackGroup) {
         assert.fail('Could not find Timings track flame chart group');
@@ -52,7 +54,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     setupIgnoreListManagerEnvironment();
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
 
     // Need to use an index that is not a frame, so jump past the frames.
     const event = dataProvider.eventByIndex(100);
@@ -63,7 +66,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     setupIgnoreListManagerEnvironment();
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'extension-tracks-and-marks.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const groupNames = dataProvider.timelineData().groups.map(g => g.name);
     assert.deepEqual(
         groupNames,
@@ -89,7 +93,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     setupIgnoreListManagerEnvironment();
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     // Force the track appenders to run and populate the chart data.
     dataProvider.timelineData();
 
@@ -105,7 +110,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
     setupIgnoreListManagerEnvironment();
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'one-second-interaction.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     dataProvider.timelineData();
 
     const {entryDecorations} = dataProvider.timelineData();
@@ -137,7 +143,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('populates the frames track with frames and screenshots', async function() {
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const framesTrack = dataProvider.timelineData().groups.find(g => {
       return g.name.includes('Frames');
     });
@@ -164,14 +171,15 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
 
       const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'react-hello-world.json.gz');
-      dataProvider.setModel(parsedTrace);
+      const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+      dataProvider.setModel(parsedTrace, entityMapper);
 
       const eventCountBeforeIgnoreList = dataProvider.timelineData().entryStartTimes.length;
 
       const SCRIPT_TO_IGNORE = urlString`https://unpkg.com/[email protected]/umd/react.development.js`;
       // Clear the data provider cache and add the React script to the ignore list.
       dataProvider.reset();
-      dataProvider.setModel(parsedTrace);
+      dataProvider.setModel(parsedTrace, entityMapper);
       ignoreListManager.ignoreListURL(SCRIPT_TO_IGNORE);
 
       const eventCountAfterIgnoreList = dataProvider.timelineData().entryStartTimes.length;
@@ -181,7 +189,7 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
 
       // Clear the data provider cache and unignore the script again
       dataProvider.reset();
-      dataProvider.setModel(parsedTrace);
+      dataProvider.setModel(parsedTrace, entityMapper);
       ignoreListManager.unIgnoreListURL(SCRIPT_TO_IGNORE);
       // Ensure that now we have un-ignored the URL that we get the full set of events again.
       assert.strictEqual(dataProvider.timelineData().entryStartTimes.length, eventCountBeforeIgnoreList);
@@ -191,8 +199,9 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('filters navigations to only return those that happen on the main frame', async function() {
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'multiple-navigations-with-iframes.json.gz');
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
 
-    dataProvider.setModel(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
 
     const mainFrameID = parsedTrace.Meta.mainFrameId;
     const navigationEvents = dataProvider.mainFrameNavigationStartEvents();
@@ -205,7 +214,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('can search for entries within a given time-range', async function() {
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
 
     const bounds = parsedTrace.Meta.traceBounds;
     const filter = new Timeline.TimelineFilters.TimelineRegExp(/Evaluate script/);
@@ -217,7 +227,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('delete annotations associated with an event', async function() {
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const entryIndex = 0;
     const eventToFindAssociatedEntriesFor = dataProvider.eventByIndex(entryIndex);
     const event = dataProvider.eventByIndex(1);
@@ -245,7 +256,8 @@ describeWithEnvironment('TimelineFlameChartDataProvider', function() {
   it('correctly identifies if an event has annotations', async function() {
     const dataProvider = new Timeline.TimelineFlameChartDataProvider.TimelineFlameChartDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const eventIndex = 0;
     const event = dataProvider.eventByIndex(eventIndex);
     assert.exists(event);

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -138,6 +138,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
   private lastSelection: Selection|null = null;
   readonly #font = `${PerfUI.Font.DEFAULT_FONT_SIZE} ${PerfUI.Font.getFontFamilyForCanvas()}`;
   #eventIndexByEvent: WeakMap<Trace.Types.Events.Event, number|null> = new WeakMap();
+  #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
 
   constructor() {
     super();
@@ -399,14 +400,15 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return Object.assign(defaultGroupStyle, extra);
   }
 
-  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace): void {
+  setModel(parsedTrace: Trace.Handlers.Types.ParsedTrace, entityMapper: Utils.EntityMapper.EntityMapper): void {
     this.reset();
     this.parsedTrace = parsedTrace;
     const {traceBounds} = parsedTrace.Meta;
     const minTime = Trace.Helpers.Timing.microToMilli(traceBounds.min);
     const maxTime = Trace.Helpers.Timing.microToMilli(traceBounds.max);
     this.#minimumBoundary = minTime;
     this.timeSpan = minTime === maxTime ? 1000 : maxTime - this.#minimumBoundary;
+    this.#entityMapper = entityMapper;
   }
 
   /**
@@ -424,7 +426,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       }
       this.timelineDataInternal = this.#instantiateTimelineData();
       this.compatibilityTracksAppender = new CompatibilityTracksAppender(
-          this.timelineDataInternal, this.parsedTrace, this.entryData, this.entryTypeByLevel);
+          this.timelineDataInternal, this.parsedTrace, this.entryData, this.entryTypeByLevel, this.#entityMapper);
     }
     return this.compatibilityTracksAppender;
   }
@@ -540,6 +542,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     this.compatibilityTracksAppender = null;
     this.timelineDataInternal = null;
     this.parsedTrace = null;
+    this.#entityMapper = null;
   }
 
   maxStackDepth(): number {

front_end/panels/timeline/TimelineFlameChartNetworkDataProvider.test.ts

@@ -12,11 +12,12 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('renders the network track correctly', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
 
     const minTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
     const maxTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
-    dataProvider.setModel(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     dataProvider.setWindowTimes(minTime, maxTime);
 
     // TimelineFlameChartNetworkDataProvider only has network track, so should always be one track group.
@@ -57,7 +58,8 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('can return the group for a given entryIndex', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     dataProvider.timelineData();
 
     assert.strictEqual(
@@ -69,11 +71,12 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('filters navigations to only return those that happen on the main frame', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'multiple-navigations-with-iframes.json.gz');
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
 
     const minTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
     const maxTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
-    dataProvider.setModel(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     dataProvider.setWindowTimes(minTime, maxTime);
 
     const mainFrameID = parsedTrace.Meta.mainFrameId;
@@ -87,7 +90,8 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('can provide the index for an event and the event for a given index', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
 
     const event = dataProvider.eventByIndex(0);
     assert.isOk(event);
@@ -97,11 +101,12 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('does not render the network track if there is no network requests', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'basic.json.gz');
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
 
     const minTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.min);
     const maxTime = Trace.Helpers.Timing.microToMilli(parsedTrace.Meta.traceBounds.max);
 
-    dataProvider.setModel(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     dataProvider.setWindowTimes(minTime, maxTime);
 
     // Network track appender won't append the network track if there is no network requests.
@@ -178,7 +183,8 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('can search for entries within a given time-range', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const boundsMs = Trace.Helpers.Timing.traceWindowMilliSeconds(parsedTrace.Meta.traceBounds);
     dataProvider.setWindowTimes(boundsMs.min, boundsMs.max);
 
@@ -191,7 +197,8 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('delete annotations associated with an event', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const entryIndex = 0;
     const eventToFindAssociatedEntriesFor = dataProvider.eventByIndex(entryIndex);
     const event = dataProvider.eventByIndex(1);
@@ -220,7 +227,8 @@ describeWithEnvironment('TimelineFlameChartNetworkDataProvider', function() {
   it('correctly identifies if an event has annotations', async function() {
     const dataProvider = new Timeline.TimelineFlameChartNetworkDataProvider.TimelineFlameChartNetworkDataProvider();
     const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
-    dataProvider.setModel(parsedTrace);
+    const entityMapper = new Timeline.Utils.EntityMapper.EntityMapper(parsedTrace);
+    dataProvider.setModel(parsedTrace, entityMapper);
     const eventIndex = 0;
     const event = dataProvider.eventByIndex(eventIndex);
     const event2 = dataProvider.eventByIndex(1);