[RPP] disable 3p checkbox with related insights dimming

this disables the 3p checkbox when insights dimming is enabled
https://screencast.googleplex.com/cast/NjQ4OTE1OTU0Njk2MTkyMHw5ODc1ZDMzMC1jMg

Bug:391589856
Change-Id: Iefe0b3772c1ac31880731d6a4ae423d07ff8aeef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6199083
Commit-Queue: Adriana Ixba <[email protected]>
Reviewed-by: Paul Irish <[email protected]>

Author: Adriana Ixba

front_end/panels/timeline/TimelinePanel.ts

@@ -384,6 +384,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   readonly #minimapComponent = new TimelineMiniMap();
   #viewMode: ViewMode = {mode: 'LANDING_PAGE'};
   readonly #dimThirdPartiesSetting: Common.Settings.Setting<boolean>|null = null;
+  #thirdPartyCheckbox: UI.Toolbar.ToolbarSettingCheckbox|null = null;
 
   /**
    * We get given any filters for a new trace when it is recorded/imported.
@@ -724,13 +725,33 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null): void {
+    // When an insight is selected, ensure that the 3P checkbox is disabled
+    // to avoid dimming interference.
     if (insight) {
       this.#splitWidget.showBoth();
+      this.#set3PCheckboxDisabled(true);
+    } else {
+      this.#set3PCheckboxDisabled(false);
     }
     this.#sideBar.setActiveInsight(insight);
     this.flameChart.setActiveInsight(insight);
   }
 
+  /**
+   * This "disables" the 3P checkbox in the toolbar.
+   * Disabling here does a couple of things:
+   * 1) updates the setting to "disabled"
+   * 2) makes the checkbox dimmed and unclickable
+   * 3) gives the checkbox UI an indeterminate state
+   */
+  #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);
+    }
+  }
+
   static instance(opts: {
     forceNew: boolean|null,
     isNode: boolean,
@@ -1026,7 +1047,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
   }
 
   private createSettingCheckbox(setting: Common.Settings.Setting<boolean>, tooltip: Platform.UIString.LocalizedString):
-      UI.Toolbar.ToolbarItem {
+      UI.Toolbar.ToolbarSettingCheckbox {
     const checkboxItem = new UI.Toolbar.ToolbarSettingCheckbox(setting, tooltip);
     this.recordingOptionUIControls.push(checkboxItem);
     return checkboxItem;
@@ -1149,6 +1170,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
         this.#dimThirdPartiesSetting) {
       const dimThirdPartiesCheckbox =
           this.createSettingCheckbox(this.#dimThirdPartiesSetting, i18nString(UIStrings.thirdPartiesByThirdPartyWeb));
+      this.#thirdPartyCheckbox = dimThirdPartiesCheckbox;
       this.panelToolbar.appendToolbarItem(dimThirdPartiesCheckbox);
     }
 
@@ -2146,7 +2168,7 @@ export class TimelinePanel extends UI.Panel.Panel implements Client, TimelineMod
       return;
     }
 
-    const checkboxState = this.#dimThirdPartiesSetting?.get() ?? false;
+    const checkboxState = this.#dimThirdPartiesSetting?.getIfNotDisabled() ?? false;
     const thirdPartyEvents = this.#entityMapper?.thirdPartyEvents() ?? [];
 
     if (checkboxState && thirdPartyEvents.length) {