[RPP] Create 3p checkbox behind an experiment

https://screencast.googleplex.com/cast/NTIzMzM4NzExMDQwMDAwMHxlYTY5OWI3Zi01NQ

Bug:383568427
Change-Id: Ieef63de82f9a77e2e2c3cdfee8c2a790fbfa8962
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6087616
Reviewed-by: Adam Raine <[email protected]>
Commit-Queue: Adriana Ixba <[email protected]>

Author: Adriana Ixba

front_end/core/host/UserMetrics.ts

@@ -942,8 +942,9 @@ export enum KeyboardShortcutAction {
   'elements.refresh-event-listeners' = 115,
   'coverage.clear' = 116,
   'coverage.export' = 117,
+  'timeline.dim-third-parties' = 118,
   /* eslint-enable @typescript-eslint/naming-convention */
-  MAX_VALUE = 118,
+  MAX_VALUE = 119,
 }
 
 export const enum IssueOpener {
@@ -994,10 +995,11 @@ export enum DevtoolsExperiments {
   'timeline-dim-unrelated-events' = 103,
   'timeline-alternative-navigation' = 104,
   'timeline-ignore-list' = 105,
+  'timeline-third-party-dependencies' = 106,
   /* eslint-enable @typescript-eslint/naming-convention */
 
   // Increment this when new experiments are added.
-  MAX_VALUE = 106,
+  MAX_VALUE = 107,
 }
 
 export const enum CSSPropertyDocumentation {

front_end/core/root/Runtime.ts

@@ -301,6 +301,7 @@ export const enum ExperimentName {
   TIMELINE_DIM_UNRELATED_EVENTS = 'timeline-dim-unrelated-events',
   TIMELINE_ALTERNATIVE_NAVIGATION = 'timeline-alternative-navigation',
   TIMELINE_IGNORE_LIST = 'timeline-ignore-list',
+  TIMELINE_THIRD_PARTY_DEPENDENCIES = 'timeline-third-party-dependencies',
   // when adding to this enum, you'll need to also add to REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts
 }
 

front_end/entrypoints/main/MainImpl.ts

@@ -408,6 +408,11 @@ export class MainImpl {
         'Performance panel: enable an ignore list setting dialog',
     );
 
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES,
+        'Performance panel: enable third party depenedency features',
+    );
+
     Root.Runtime.experiments.enableExperimentsByDefault([
       'css-type-component-length-deprecate',
       Root.Runtime.ExperimentName.AUTOFILL_VIEW,

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -389,6 +389,13 @@ export class TimelineFlameChartView extends
     return this.element;
   }
 
+  dimEvents(events: Trace.Types.Events.Event[]): void {
+    const relatedMainIndices = events.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
+    const relatedNetworkIndices = events.map(event => this.networkDataProvider.indexForEvent(event) ?? -1);
+    this.mainFlameChart.enableDimming(relatedMainIndices, false /** shouldAddOutlines */);
+    this.networkFlameChart.enableDimming(relatedNetworkIndices, false /** shouldAddOutlines */);
+  }
+
   #dimInsightRelatedEvents(relatedEvents: Trace.Types.Events.Event[]): void {
     // Dim all events except those related to the active insight.
     const relatedMainIndices = relatedEvents.map(event => this.mainDataProvider.indexForEvent(event) ?? -1);
@@ -435,8 +442,13 @@ export class TimelineFlameChartView extends
 
       relevantEvents.push(...provider.search(bounds).map(r => r.index));
     }
-    this.mainFlameChart.enableDimming(relatedMainIndices);
-    this.networkFlameChart.enableDimming(relatedNetworkIndices);
+    this.mainFlameChart.enableDimmingForUnrelatedEntries(relatedMainIndices);
+    this.networkFlameChart.enableDimmingForUnrelatedEntries(relatedNetworkIndices);
+  }
+
+  disableAllDimming(): void {
+    this.mainFlameChart.disableDimming();
+    this.networkFlameChart.disableDimming();
   }
 
   #sortMarkersForPreferredVisualOrder(markers: Trace.Types.Events.Event[]): void {

front_end/panels/timeline/TimelinePanel.ts

@@ -329,6 +329,10 @@ const UIStrings = {
    * @description Description of the Timeline right/left panning action that appears in the Performance panel shortcuts dialog.
    */
   timelinePanLeftRight: 'Timeline right/left',
+  /**
+   * @description Title for the Dim 3rd Parties checkbox.
+   */
+  dimThirdParties: 'Dim 3rd Parties',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelinePanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -374,6 +378,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   private readonly timelinePane: UI.Widget.VBox;
   readonly #minimapComponent = new TimelineMiniMap();
   #viewMode: ViewMode = {mode: 'LANDING_PAGE'};
+  readonly #dimThirdPartiesSetting: Common.Settings.Setting<boolean>|null = null;
 
   /**
    * We get given any filters for a new trace when it is recorded/imported.
@@ -424,6 +429,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
 
   #traceEngineModel: Trace.TraceModel.Model;
   #sourceMapsResolver: Utils.SourceMapsResolver.SourceMapsResolver|null = null;
+  #entityMapper: Utils.EntityMapper.EntityMapper|null = null;
   #onSourceMapsNodeNamesResolvedBound = this.#onSourceMapsNodeNamesResolved.bind(this);
   readonly #onChartPlayableStateChangeBound: (event: Common.EventTarget.EventTargetEvent<boolean>) => void;
   #sidebarToggleButton = this.#splitWidget.createShowHideSidebarButton(
@@ -533,6 +539,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.showMemorySetting.setTitle(i18nString(UIStrings.memory));
     this.showMemorySetting.addChangeListener(this.onMemoryModeChanged, this);
 
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES)) {
+      this.#dimThirdPartiesSetting =
+          Common.Settings.Settings.instance().createSetting('timeline-dim-third-parties', false);
+      this.#dimThirdPartiesSetting.setTitle(i18nString(UIStrings.dimThirdParties));
+      this.#dimThirdPartiesSetting.addChangeListener(this.onDimThirdPartiesChanged, this);
+    }
+
     this.#thirdPartyTracksSetting = TimelinePanel.extensionDataVisibilitySetting();
     this.#thirdPartyTracksSetting.addChangeListener(this.#extensionDataVisibilityChanged, this);
     this.#thirdPartyTracksSetting.setTitle(i18nString(UIStrings.showCustomtracks));
@@ -879,6 +892,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.#setModelForActiveTrace();
         this.#removeStatusPane();
         this.#showSidebarIfRequired();
+        this.#dimThirdPartiesIfRequired(newMode.traceIndex);
         return;
       }
 
@@ -1106,6 +1120,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       this.panelToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(showIgnoreListSetting));
     }
 
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES) &&
+        this.#dimThirdPartiesSetting) {
+      const dimThirdPartiesCheckbox =
+          this.createSettingCheckbox(this.#dimThirdPartiesSetting, i18nString(UIStrings.dimThirdParties));
+      this.panelToolbar.appendToolbarItem(dimThirdPartiesCheckbox);
+    }
+
     // Isolate selector
     if (isNode) {
       const isolateSelector = new IsolateSelector();
@@ -1491,6 +1512,13 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.select(null);
   }
 
+  private onDimThirdPartiesChanged(): void {
+    if (this.#viewMode.mode !== 'VIEWING_TRACE') {
+      return;
+    }
+    this.#dimThirdPartiesIfRequired(this.#viewMode.traceIndex);
+  }
+
   #extensionDataVisibilityChanged(): void {
     this.flameChart.extensionDataVisibilityChanged();
   }
@@ -2002,6 +2030,9 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         Utils.SourceMapsResolver.SourceMappingsUpdated.eventName, this.#onSourceMapsNodeNamesResolvedBound);
     void this.#sourceMapsResolver.install();
 
+    // Initialize EntityMapper
+    this.#entityMapper = new Utils.EntityMapper.EntityMapper(parsedTrace);
+
     this.statusPane?.updateProgressBar(i18nString(UIStrings.processed), 80);
     this.updateMiniMap();
     this.statusPane?.updateProgressBar(i18nString(UIStrings.processed), 90);
@@ -2085,6 +2116,20 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#restoreSidebarVisibilityOnTraceLoad = false;
   }
 
+  #dimThirdPartiesIfRequired(traceIndex: number): void {
+    const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
+    if (!parsedTrace) {
+      return;
+    }
+    const thirdPartyEvents = this.#entityMapper?.thirdPartyEvents() ?? [];
+    if (this.#dimThirdPartiesSetting?.get() && thirdPartyEvents.length) {
+      this.flameChart.dimEvents(thirdPartyEvents);
+    } else {
+      // Ensure dimming stores are cleared, and there is no dimming.
+      this.flameChart.disableAllDimming();
+    }
+  }
+
   // Build a map mapping annotated entries to the colours that are used to display them in the FlameChart.
   // We need this map to display the entries in the sidebar with the same colours.
   private buildColorsAnnotationsMap(annotations: Trace.Types.File.Annotation[]): Map<Trace.Types.Events.Event, string> {

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

@@ -91,4 +91,34 @@ describeWithEnvironment('EntityMapper', function() {
       });
     });
   });
+  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));
+      });
+    });
+  });
 });

front_end/panels/timeline/utils/EntityMapper.ts

@@ -2,15 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../../models/trace/trace.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[] = [];
 
   constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
     this.#parsedTrace = parsedTrace;
     this.#entityMappings = this.#initializeEntityMappings(this.#parsedTrace);
+    this.#firstPartyEntity = this.#findFirstPartyEntity();
+    this.#thirdPartyEvents = this.#getThirdPartyEvents();
   }
 
   /**
@@ -40,6 +44,21 @@ export class EntityMapper {
     };
   }
 
+  #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[]>):
@@ -70,6 +89,14 @@ export class EntityMapper {
     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;
   }

front_end/testing/EnvironmentHelpers.ts

@@ -132,6 +132,7 @@ const REGISTERED_EXPERIMENTS = [
   Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS,
   Root.Runtime.ExperimentName.TIMELINE_ALTERNATIVE_NAVIGATION,
   Root.Runtime.ExperimentName.TIMELINE_IGNORE_LIST,
+  Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES,
 ];
 
 export async function initializeGlobalVars({reset = true} = {}) {

front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -313,6 +313,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private forceDecorationCache?: boolean[]|null;
   private entryColorsCache?: string[]|null;
   private entryIndicesToNotDim?: number[]|null;
+  private entryIndicesToDim?: number[]|null;
   private colorDimmingCache = new Map<string, string>();
   private totalTime?: number;
   private lastPopoverState: PopoverState;
@@ -332,6 +333,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   #indexToDrawOverride = new Map<number, DrawOverride>();
 
+  #shouldAddOutlines: boolean = true;
+
   constructor(
       dataProvider: FlameChartDataProvider, flameChartDelegate: FlameChartDelegate,
       optionalConfig: OptionalFlameChartConfig = {}) {
@@ -496,7 +499,12 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   #shouldDimEvent(entryIndex: number): boolean {
     // If a search is active, that enables a mode where we dim all events that do not match the search results.
-    // Otherwise the events to not dim are defined by the last call to `enableDimming`.
+    if (this.entryIndicesToDim && !this.#searchResultEntries) {
+      return this.entryIndicesToDim.includes(entryIndex);
+    }
+
+    // Otherwise the events to not dim are defined by the last call to `enableDimmingForUnrelatedEntries` or
+    // `enableDimming`.
     const entriesToNotDim = this.#searchResultEntries ?? this.entryIndicesToNotDim;
     if (!entriesToNotDim) {
       return false;
@@ -505,13 +513,22 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     return !entriesToNotDim.includes(entryIndex);
   }
 
-  enableDimming(entryIndicesToNotDim: number[]): void {
+  enableDimming(entryIndices: number[], shouldAddOutlines: boolean): void {
+    this.entryIndicesToDim = entryIndices;
+    this.#shouldAddOutlines = shouldAddOutlines;
+    this.entryIndicesToNotDim = [];
+    this.draw();
+  }
+
+  enableDimmingForUnrelatedEntries(entryIndicesToNotDim: number[]): void {
     this.entryIndicesToNotDim = entryIndicesToNotDim;
+    this.entryIndicesToDim = [];
     this.draw();
   }
 
   disableDimming(): void {
     this.entryIndicesToNotDim = null;
+    this.entryIndicesToDim = null;
     this.draw();
   }
 
@@ -2265,7 +2282,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.#drawEventRect(context, timelineData, entryIndex);
     }
 
-    if (!shouldDim) {
+    if (!shouldDim && this.#shouldAddOutlines) {
       // In some scenarios we want to draw outlines around events for added visual contrast.
       // But we only do this if the events are not being dimmed.
       this.#maybeAddOutlines(context, color);
@@ -3326,6 +3343,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.forceDecorationCache = null;
       this.entryColorsCache = null;
       this.entryIndicesToNotDim = null;
+      this.entryIndicesToDim = null;
       this.colorDimmingCache.clear();
       this.rawTimelineDataLength = 0;
       this.#groupTreeRoot = null;
@@ -3937,6 +3955,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.rawTimelineDataLength = 0;
     this.#groupTreeRoot = null;
     this.entryIndicesToNotDim = null;
+    this.entryIndicesToDim = null;
     this.colorDimmingCache.clear();
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;

front_end/ui/visual_logging/KnownContextValues.ts

@@ -3391,6 +3391,7 @@ export const knownContextValues = new Set([
   'timeline-counters-graph-js-heap-size-used',
   'timeline-counters-graph-nodes',
   'timeline-debug-mode',
+  'timeline-dim-third-parties',
   'timeline-dim-unrelated-events',
   'timeline-disable-js-sampling',
   'timeline-enhanced-traces',