Expose checked and disabled properties on the CheckboxLabel and remove the usage of checkboxElement in the Elements panel

Bug: 410500405
Change-Id: I841cad2d6e3a086cc569ae07626a6447f6aae78c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6450130
Reviewed-by: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>

Author: danilsomsikov

front_end/panels/accessibility/SourceOrderView.ts

@@ -40,8 +40,7 @@ export class SourceOrderPane extends AccessibilitySubPane {
   private readonly noNodeInfo: Element;
   private readonly warning: Element;
   private checked: boolean;
-  private checkboxLabel: UI.UIUtils.CheckboxLabel;
-  private checkboxElement: HTMLInputElement;
+  private checkbox: UI.UIUtils.CheckboxLabel;
   private overlayModel: SDK.OverlayModel.OverlayModel|null;
   constructor() {
     super(i18nString(UIStrings.sourceOrderViewer));
@@ -51,24 +50,23 @@ export class SourceOrderPane extends AccessibilitySubPane {
     this.warning = this.createInfo(i18nString(UIStrings.thereMayBeADelayInDisplaying));
     this.warning.id = 'source-order-warning';
     this.checked = false;
-    this.checkboxLabel = UI.UIUtils.CheckboxLabel.create(
+    this.checkbox = UI.UIUtils.CheckboxLabel.create(
         /* title */ i18nString(UIStrings.showSourceOrder), /* checked */ false);
-    this.checkboxElement = this.checkboxLabel.checkboxElement;
 
-    this.checkboxLabel.classList.add('source-order-checkbox');
-    this.checkboxLabel.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
-    this.checkboxElement.addEventListener('click', this.checkboxClicked.bind(this), false);
-    this.element.appendChild(this.checkboxLabel);
+    this.checkbox.classList.add('source-order-checkbox');
+    this.checkbox.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
+    this.checkbox.addEventListener('click', this.checkboxClicked.bind(this), false);
+    this.element.appendChild(this.checkbox);
 
     this.nodeInternal = null;
     this.overlayModel = null;
   }
 
   async setNodeAsync(node: SDK.DOMModel.DOMNode|null): Promise<void> {
-    if (!this.checkboxLabel.classList.contains('hidden')) {
-      this.checked = this.checkboxElement.checked;
+    if (!this.checkbox.classList.contains('hidden')) {
+      this.checked = this.checkbox.checked;
     }
-    this.checkboxElement.checked = false;
+    this.checkbox.checked = false;
     this.checkboxClicked();
     super.setNode(node);
     if (!this.nodeInternal) {
@@ -88,10 +86,10 @@ export class SourceOrderPane extends AccessibilitySubPane {
 
     this.noNodeInfo.classList.toggle('hidden', foundSourceOrder);
     this.warning.classList.toggle('hidden', childCount < MAX_CHILD_ELEMENTS_THRESHOLD);
-    this.checkboxLabel.classList.toggle('hidden', !foundSourceOrder);
+    this.checkbox.classList.toggle('hidden', !foundSourceOrder);
     if (foundSourceOrder) {
       this.overlayModel = this.nodeInternal.domModel().overlayModel();
-      this.checkboxElement.checked = this.checked;
+      this.checkbox.checked = this.checked;
       this.checkboxClicked();
     } else {
       this.overlayModel = null;
@@ -103,7 +101,7 @@ export class SourceOrderPane extends AccessibilitySubPane {
       return;
     }
 
-    if (this.checkboxElement.checked) {
+    if (this.checkbox.checked) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.SourceOrderViewActivated);
       this.overlayModel.highlightSourceOrderInOverlay(this.nodeInternal);
     } else {

front_end/panels/elements/ClassesPaneWidget.ts

@@ -180,11 +180,11 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
     const keys = [...classes.keys()];
     keys.sort(Platform.StringUtilities.caseInsensetiveComparator);
     for (const className of keys) {
-      const label =
+      const checkbox =
           UI.UIUtils.CheckboxLabel.createWithStringLiteral(className, classes.get(className), 'element-class', true);
-      label.classList.add('monospace');
-      label.checkboxElement.addEventListener('click', this.onClick.bind(this, className), false);
-      this.classesContainer.appendChild(label);
+      checkbox.classList.add('monospace');
+      checkbox.addEventListener('click', this.onClick.bind(this, className), false);
+      this.classesContainer.appendChild(checkbox);
     }
   }
 

front_end/panels/elements/ElementStatePaneWidget.ts

@@ -69,8 +69,8 @@ enum SpecificPseudoStates {
 }
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
-  private readonly inputs: HTMLInputElement[];
-  private readonly inputStates: WeakMap<HTMLInputElement, string>;
+  private readonly inputs: UI.UIUtils.CheckboxLabel[];
+  private readonly inputStates: WeakMap<UI.UIUtils.CheckboxLabel, string>;
   private readonly duals: Map<SpecificPseudoStates, SpecificPseudoStates>;
   private cssModel?: SDK.CSSModel.CSSModel|null;
   private specificPseudoStateDivs: Map<SpecificPseudoStates, HTMLDivElement>;
@@ -82,7 +82,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.registerRequiredCSS(elementStatePaneWidgetStyles);
     this.contentElement.className = 'styles-element-state-pane';
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('element-states')}`);
-    const inputs: HTMLInputElement[] = [];
+    const inputs: UI.UIUtils.CheckboxLabel[] = [];
     this.inputs = inputs;
     this.inputStates = new WeakMap();
     this.duals = new Map();
@@ -95,7 +95,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     };
     const clickListener = (event: MouseEvent): void => {
       const node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
-      if (!node || !(event.target instanceof HTMLInputElement)) {
+      if (!node || !(event.target instanceof UI.UIUtils.CheckboxLabel)) {
         return;
       }
       const state = this.inputStates.get(event.target);
@@ -112,13 +112,11 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const createElementStateCheckbox = (state: string): HTMLDivElement => {
       const div = document.createElement('div');
       div.id = state;
-      const label = UI.UIUtils.CheckboxLabel.createWithStringLiteral(':' + state, undefined, undefined, true);
-      const input = label.checkboxElement;
-      this.inputStates.set(input, state);
-      input.addEventListener('click', (clickListener as EventListener), false);
-      input.setAttribute('jslog', `${VisualLogging.toggle().track({change: true}).context(state)}`);
-      inputs.push(input);
-      div.appendChild(label);
+      const checkbox = UI.UIUtils.CheckboxLabel.createWithStringLiteral(':' + state, undefined, state, true);
+      this.inputStates.set(checkbox, state);
+      checkbox.addEventListener('click', (clickListener as EventListener), false);
+      inputs.push(checkbox);
+      div.appendChild(checkbox);
       return div;
     };
     const setDualStateCheckboxes = (first: SpecificPseudoStates, second: SpecificPseudoStates): void => {
@@ -128,14 +126,13 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const createEmulateFocusedPageCheckbox = (): Element => {
       const div = document.createElement('div');
       div.classList.add('page-state-checkbox');
-      const label = UI.UIUtils.CheckboxLabel.create(
+      const checkbox = UI.UIUtils.CheckboxLabel.create(
           i18nString(UIStrings.emulateFocusedPage), undefined, undefined, 'emulate-page-focus', true);
-      UI.SettingsUI.bindCheckbox(
-          label.checkboxElement, Common.Settings.Settings.instance().moduleSetting('emulate-page-focus'), {
-            enable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOn,
-            disable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOff,
-          });
-      UI.Tooltip.Tooltip.install(label, i18nString(UIStrings.emulatesAFocusedPage));
+      UI.SettingsUI.bindCheckbox(checkbox, Common.Settings.Settings.instance().moduleSetting('emulate-page-focus'), {
+        enable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOn,
+        disable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOff,
+      });
+      UI.Tooltip.Tooltip.install(checkbox, i18nString(UIStrings.emulatesAFocusedPage));
 
       const learnMoreButton = new Buttons.Button.Button();
       learnMoreButton.data = {
@@ -150,7 +147,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
           () => UI.UIUtils.openInNewTab(
               'https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page'));
 
-      div.appendChild(label);
+      div.appendChild(checkbox);
       div.appendChild(learnMoreButton);
       return div;
     };

front_end/ui/legacy/UIUtils.ts

@@ -1317,8 +1317,14 @@ export class CheckboxLabel extends HTMLElement {
     this.checkboxElement = this.#shadowRoot.createChild('input');
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
+    // Change event is not composable, so it doesn't bubble up through the shadow root.
+    this.checkboxElement.addEventListener('change', () => this.dispatchEvent(new Event('change')));
     this.#textElement = this.#shadowRoot.createChild('label', 'dt-checkbox-text');
     this.#textElement.setAttribute('for', id);
+    // Click events are composable, so both label and checkbox bubble up through the shadow root.
+    // However, clicking the label, also triggers the checkbox click, so we stop the label event
+    // propagation here to avoid duplicate events.
+    this.#textElement.addEventListener('click', e => e.stopPropagation());
     this.#shadowRoot.createChild('slot');
   }
 
@@ -1342,6 +1348,22 @@ export class CheckboxLabel extends HTMLElement {
     return element;
   }
 
+  get checked(): boolean {
+    return this.checkboxElement.checked;
+  }
+
+  set checked(checked: boolean) {
+    this.checkboxElement.checked = checked;
+  }
+
+  set disabled(disabled: boolean) {
+    this.checkboxElement.disabled = disabled;
+  }
+
+  get disabled(): boolean {
+    return this.checkboxElement.disabled;
+  }
+
   /** Only to be used when the checkbox label is 'generated' (a regex, a className, etc). Most checkboxes should be create()'d with UIStrings */
   static createWithStringLiteral(title?: string, checked?: boolean, jslogContext?: string, small?: boolean):
       CheckboxLabel {