RPP: Disable 3p checkbox for all dim states

If dimming applied due to search or hovering a treeview table row,
we now disable the checkbox as well.

Bug:391589856
Change-Id: I87b69d0166cde33f23c3c686cacf705f2dd542c8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6216184
Reviewed-by: Connor Clark <[email protected]>
Auto-Submit: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: paulirish

front_end/panels/timeline/TimelineDetailsView.test.ts

@@ -12,6 +12,8 @@ import * as Timeline from './timeline.js';
 class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
   select(_selection: Timeline.TimelineSelection.TimelineSelection|null): void {
   }
+  set3PCheckboxDisabled(_disabled: boolean): void {
+  }
   selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
   }
   highlightEvent(_event: Trace.Types.Events.Event|null): void {

front_end/panels/timeline/TimelineFlameChartView.test.ts

@@ -22,6 +22,8 @@ class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegat
   select(selection: Timeline.TimelineSelection.TimelineSelection|null): void {
     this.selection = selection;
   }
+  set3PCheckboxDisabled(_disabled: boolean): void {
+  }
   selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
   }
   highlightEvent(_event: Trace.Types.Events.Event|null): void {

front_end/panels/timeline/TimelineFlameChartView.ts

@@ -476,6 +476,10 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
 
   #refreshDimming(): void {
     const dimmer = this.#flameChartDimmers.find(dimmer => dimmer.active);
+
+    // This checkbox should only be enabled if its dimmer is being used.
+    this.delegate.set3PCheckboxDisabled(Boolean(dimmer && dimmer !== this.#thirdPartyCheckboxDimmer));
+
     if (!dimmer) {
       this.mainFlameChart.disableDimming();
       this.networkFlameChart.disableDimming();

front_end/panels/timeline/TimelinePanel.ts

@@ -729,9 +729,6 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
     // to avoid dimming interference.
     if (insight) {
       this.#splitWidget.showBoth();
-      this.#set3PCheckboxDisabled(true);
-    } else {
-      this.#set3PCheckboxDisabled(false);
     }
     this.#sideBar.setActiveInsight(insight);
     this.flameChart.setActiveInsight(insight);
@@ -743,12 +740,15 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
    * 1) updates the setting to "disabled"
    * 2) makes the checkbox dimmed and unclickable
    * 3) gives the checkbox UI an indeterminate state
+   * Only make the change if it's different to avoid an infinite loop
    */
-  #set3PCheckboxDisabled(disabled: boolean): void {
+  set3PCheckboxDisabled(disabled: boolean): void {
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DIM_UNRELATED_EVENTS)) {
-      this.#dimThirdPartiesSetting?.setDisabled(disabled);
-      this.#thirdPartyCheckbox?.setIndeterminate(disabled);
-      this.#thirdPartyCheckbox?.applyEnabledState(!disabled);
+      if (this.#thirdPartyCheckbox?.inputElement.disabled !== disabled) {
+        this.#thirdPartyCheckbox?.applyEnabledState(!disabled);
+        this.#thirdPartyCheckbox?.setIndeterminate(disabled);
+        this.#dimThirdPartiesSetting?.setDisabled(disabled);
+      }
     }
   }
 
@@ -2685,6 +2685,7 @@ export const headerHeight = 20;
 export interface TimelineModeViewDelegate {
   select(selection: TimelineSelection|null): void;
   element: Element;
+  set3PCheckboxDisabled(disabled: boolean): void;
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void;
   highlightEvent(event: Trace.Types.Events.Event|null): void;
 }

front_end/panels/timeline/TimelineTreeView.test.ts

@@ -11,6 +11,8 @@ import * as Timeline from './timeline.js';
 class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
   select(_selection: Timeline.TimelineSelection.TimelineSelection|null): void {
   }
+  set3PCheckboxDisabled(_disabled: boolean): void {
+  }
   selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
   }
   highlightEvent(_event: Trace.Types.Events.Event|null): void {