[Perf] Move 3p dimming handling into TimelineFlameChartView

And call it when building the flamechart data from a trace. This way we
ensure we keep dimmed 3p entries when toggling the custom tracks
setting.

Fixed: 394123714
Change-Id: I04a378f4f30b8247cba585d5e4ffe7c31dbaef52
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6235029
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: and-oli

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -437,8 +437,18 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     return this.element;
   }
 
-  setActiveThirdPartyDimmingSetting(thirdPartyEvents: Trace.Types.Events.Event[]|null): void {
-    this.#updateFlameChartDimmerWithEvents(this.#thirdPartyCheckboxDimmer, thirdPartyEvents);
+  // Activates or disables dimming when setting is toggled.
+  dimThirdPartiesIfRequired(): void {
+    if (!this.#parsedTrace) {
+      return;
+    }
+    const dim = Common.Settings.Settings.instance().createSetting('timeline-dim-third-parties', false).get();
+    const thirdPartyEvents = this.#entityMapper?.thirdPartyEvents() ?? [];
+    if (dim && thirdPartyEvents.length) {
+      this.#updateFlameChartDimmerWithEvents(this.#thirdPartyCheckboxDimmer, thirdPartyEvents);
+    } else {
+      this.#updateFlameChartDimmerWithEvents(this.#thirdPartyCheckboxDimmer, null);
+    }
   }
 
   #registerFlameChartDimmer(opts: {inclusive: boolean, outline: boolean}): FlameChartDimmer {
@@ -1160,6 +1170,7 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     this.#updateFlameCharts();
     this.resizeToPreferredHeights();
     this.setMarkers(this.#parsedTrace);
+    this.dimThirdPartiesIfRequired();
   }
 
   setInsights(

front_end/panels/timeline/TimelinePanel.test.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Trace from '../../models/trace/trace.js';
@@ -25,6 +27,9 @@ describeWithEnvironment('TimelinePanel', function() {
         SDK.TargetManager.TargetManager.instance(),
         Workspace.Workspace.WorkspaceImpl.instance(),
     );
+    Root.Runtime.experiments.enableForTest(
+        Root.Runtime.ExperimentName.TIMELINE_THIRD_PARTY_DEPENDENCIES,
+    );
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance({
       forceNew: true,
       resourceMapping,
@@ -118,4 +123,22 @@ describeWithEnvironment('TimelinePanel', function() {
     const overlaysAfterEnablingSetting = timeline.getFlameChart().overlays().allOverlays();
     assert.deepEqual(overlaysBeforeDisablingSetting, overlaysAfterEnablingSetting);
   });
+
+  it('keeps entries set to be dimmed as so after toggling the custom tracks setting', async function() {
+    const events = await TraceLoader.rawEvents(this, 'web-dev.json.gz') as Trace.Types.Events.Event[];
+    await timeline.loadingComplete(events, null, null);
+    const thirdPartyDimSetting = Common.Settings.Settings.instance().createSetting('timeline-dim-third-parties', false);
+
+    // Dim 3P entries.
+    thirdPartyDimSetting.set(true);
+    const dimIndicesBeforeToggle = timeline.getFlameChart().getMainFlameChart().getDimIndices();
+    assert.exists(dimIndicesBeforeToggle);
+    assert.isAbove(dimIndicesBeforeToggle.length, 0);
+
+    // Toggle the custom track setting and verify 3P entries remain dimmed.
+    Timeline.TimelinePanel.TimelinePanel.extensionDataVisibilitySetting().set(true);
+    const dimIndicesAfterToggle = timeline.getFlameChart().getMainFlameChart().getDimIndices();
+    assert.exists(dimIndicesAfterToggle);
+    assert.isAbove(dimIndicesAfterToggle.length, 0);
+  });
 });

front_end/panels/timeline/TimelinePanel.ts

@@ -934,7 +934,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.#setModelForActiveTrace();
         this.#removeStatusPane();
         this.#showSidebarIfRequired();
-        this.#dimThirdPartiesIfRequired(newMode.traceIndex);
+        this.flameChart.dimThirdPartiesIfRequired();
         return;
       }
 
@@ -1550,7 +1550,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     if (this.#viewMode.mode !== 'VIEWING_TRACE') {
       return;
     }
-    this.#dimThirdPartiesIfRequired(this.#viewMode.traceIndex);
+    this.flameChart.dimThirdPartiesIfRequired();
   }
 
   #extensionDataVisibilityChanged(): void {
@@ -2156,23 +2156,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     this.#restoreSidebarVisibilityOnTraceLoad = false;
   }
 
-  // Activates or disables dimming when checkbox is clicked.
-  #dimThirdPartiesIfRequired(traceIndex: number): void {
-    const parsedTrace = this.#traceEngineModel.parsedTrace(traceIndex);
-    if (!parsedTrace) {
-      return;
-    }
-
-    const checkboxState = this.#dimThirdPartiesSetting?.getIfNotDisabled() ?? false;
-    const thirdPartyEvents = this.#entityMapper?.thirdPartyEvents() ?? [];
-
-    if (checkboxState && thirdPartyEvents.length) {
-      this.flameChart.setActiveThirdPartyDimmingSetting(thirdPartyEvents);
-    } else {
-      this.flameChart.setActiveThirdPartyDimmingSetting(null);
-    }
-  }
-
   // 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/ui/legacy/components/perf_ui/FlameChart.ts

@@ -315,7 +315,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private totalTime?: number;
   private lastPopoverState: PopoverState;
 
-  private dimIndicies?: Uint8Array|null;
+  private dimIndices?: Uint8Array|null;
   /** When true, all undimmed entries are outlined. When an array, only those indices are outlined (if not dimmed). */
   private dimShouldOutlineUndimmedEntries: boolean|Uint8Array = false;
 
@@ -496,8 +496,8 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   #shouldDimEvent(entryIndex: number): boolean {
-    if (this.dimIndicies) {
-      return this.dimIndicies[entryIndex] !== 0;
+    if (this.dimIndices) {
+      return this.dimIndices[entryIndex] !== 0;
     }
 
     return false;
@@ -540,22 +540,22 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   enableDimming(entryIndices: number[], inclusive: boolean, outline: boolean|number[]): void {
-    this.dimIndicies = this.#createTypedIndexArray(entryIndices, inclusive);
+    this.dimIndices = this.#createTypedIndexArray(entryIndices, inclusive);
     this.dimShouldOutlineUndimmedEntries =
         Array.isArray(outline) ? this.#createTypedIndexArray(outline, true) : outline;
 
     this.draw();
   }
 
   disableDimming(): void {
-    this.dimIndicies = null;
+    this.dimIndices = null;
     this.dimShouldOutlineUndimmedEntries = false;
 
     this.draw();
   }
 
   isDimming(): boolean {
-    return Boolean(this.dimIndicies);
+    return Boolean(this.dimIndices);
   }
 
   #transformColor(entryIndex: number, color: string): string {
@@ -3364,7 +3364,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
       this.rawTimelineData = null;
       this.forceDecorationCache = null;
       this.entryColorsCache = null;
-      this.dimIndicies = null;
+      this.dimIndices = null;
       this.colorDimmingCache.clear();
       this.rawTimelineDataLength = 0;
       this.#groupTreeRoot = null;
@@ -3976,7 +3976,7 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.rawTimelineData = null;
     this.rawTimelineDataLength = 0;
     this.#groupTreeRoot = null;
-    this.dimIndicies = null;
+    this.dimIndices = null;
     this.colorDimmingCache.clear();
     this.highlightedMarkerIndex = -1;
     this.highlightedEntryIndex = -1;
@@ -4015,6 +4015,9 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
   boundarySpan(): Trace.Types.Timing.Milli {
     return Trace.Types.Timing.Milli(this.maximumBoundary() - this.minimumBoundary());
   }
+  getDimIndices(): Uint8Array<ArrayBufferLike>|null {
+    return this.dimIndices || null;
+  }
 }
 
 export const RulerHeight = 15;