Expose intermediate property on the CheckboxLabel and remove the usage of checkboxElement in the browser_debugger

Bug: 410500405
Change-Id: I252b3f0f8dbb183ebd40c149064936c602c962ef
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6448904
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -198,40 +198,40 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   private createCategory(name: SDK.CategorizedBreakpoint.Category): void {
     const labelNode =
         UI.UIUtils.CheckboxLabel.create(getLocalizedCategory(name), undefined, undefined, name, /* small */ true);
-    labelNode.checkboxElement.addEventListener('click', this.categoryCheckboxClicked.bind(this, name), true);
-    labelNode.checkboxElement.tabIndex = -1;
+    labelNode.addEventListener('click', this.categoryCheckboxClicked.bind(this, name), true);
+    labelNode.tabIndex = -1;
 
     const treeElement = new UI.TreeOutline.TreeElement(labelNode, undefined, name);
     treeElement.listItemElement.addEventListener('keydown', event => {
       this.handleSpaceKeyEventOnBreakpoint(event, this.#categories.get(name));
     });
 
-    labelNode.checkboxElement.addEventListener('keydown', event => {
+    labelNode.addEventListener('keydown', event => {
       treeElement.listItemElement.focus();
       this.handleSpaceKeyEventOnBreakpoint(event, this.#categories.get(name));
     });
 
     UI.ARIAUtils.setChecked(treeElement.listItemElement, false);
     this.#categoriesTreeOutline.appendChild(treeElement);
 
-    this.#categories.set(name, {element: treeElement, checkbox: labelNode.checkboxElement});
+    this.#categories.set(name, {element: treeElement, checkbox: labelNode});
   }
 
   protected createBreakpoint(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): void {
     const labelNode = UI.UIUtils.CheckboxLabel.create(
         Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name), undefined, undefined,
         Platform.StringUtilities.toKebabCase(breakpoint.name), /* small */ true);
     labelNode.classList.add('source-code', 'breakpoint');
-    labelNode.checkboxElement.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
-    labelNode.checkboxElement.tabIndex = -1;
+    labelNode.addEventListener('click', this.breakpointCheckboxClicked.bind(this, breakpoint), true);
+    labelNode.tabIndex = -1;
 
     const treeElement =
         new UI.TreeOutline.TreeElement(labelNode, undefined, Platform.StringUtilities.toKebabCase(breakpoint.name));
     treeElement.listItemElement.addEventListener('keydown', event => {
       this.handleSpaceKeyEventOnBreakpoint(event, this.#breakpoints.get(breakpoint));
     });
 
-    labelNode.checkboxElement.addEventListener('keydown', event => {
+    labelNode.addEventListener('keydown', event => {
       treeElement.listItemElement.focus();
       this.handleSpaceKeyEventOnBreakpoint(event, this.#breakpoints.get(breakpoint));
     });
@@ -243,7 +243,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       category.element.appendChild(treeElement);
     }
     // Better to return that to produce a side-effect
-    this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode.checkboxElement});
+    this.#breakpoints.set(breakpoint, {element: treeElement, checkbox: labelNode});
   }
 
   protected getBreakpointFromPausedDetails(_details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -345,7 +345,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
 }
 export interface Item {
   element: UI.TreeOutline.TreeElement;
-  checkbox: HTMLInputElement;
+  checkbox: UI.UIUtils.CheckboxLabel;
 }
 
 const LOCALIZED_CATEGORIES: Record<SDK.CategorizedBreakpoint.Category, () => Platform.UIString.LocalizedString> = {

front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -136,7 +136,7 @@ let domBreakpointsSidebarPaneInstance: DOMBreakpointsSidebarPane;
 
 export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     UI.ContextFlavorListener.ContextFlavorListener, UI.ListControl.ListDelegate<SDK.DOMDebuggerModel.DOMBreakpoint> {
-  elementToCheckboxes: WeakMap<Element, HTMLInputElement>;
+  elementToCheckboxes: WeakMap<Element, UI.UIUtils.CheckboxLabel>;
   readonly #emptyElement: HTMLElement;
   readonly #breakpoints: UI.ListModel.ListModel<SDK.DOMDebuggerModel.DOMBreakpoint>;
   #list: UI.ListControl.ListControl<SDK.DOMDebuggerModel.DOMBreakpoint>;
@@ -204,15 +204,14 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     UI.ARIAUtils.markAsListitem(element);
     element.tabIndex = -1;
 
-    const checkboxLabel = UI.UIUtils.CheckboxLabel.create(/* title */ undefined, item.enabled);
-    const checkboxElement = checkboxLabel.checkboxElement;
-    checkboxElement.addEventListener('click', this.checkboxClicked.bind(this, item), false);
-    checkboxElement.tabIndex = -1;
-    this.elementToCheckboxes.set(element, checkboxElement);
-    element.appendChild(checkboxLabel);
+    const checkbox = UI.UIUtils.CheckboxLabel.create(/* title */ undefined, item.enabled);
+    checkbox.addEventListener('click', this.checkboxClicked.bind(this, item), false);
+    checkbox.tabIndex = -1;
+    this.elementToCheckboxes.set(element, checkbox);
+    element.appendChild(checkbox);
     element.addEventListener('keydown', event => {
       if (event.key === ' ') {
-        checkboxLabel.checkboxElement.click();
+        checkbox.click();
         event.consume(true);
       }
     });
@@ -224,8 +223,8 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     const breakpointTypeLabel = BreakpointTypeLabels.get(item.type);
     description.textContent = breakpointTypeLabel ? breakpointTypeLabel() : null;
     const breakpointTypeText = breakpointTypeLabel ? breakpointTypeLabel() : '';
-    UI.ARIAUtils.setLabel(checkboxElement, breakpointTypeText);
-    checkboxElement.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
+    UI.ARIAUtils.setLabel(checkbox, breakpointTypeText);
+    checkbox.setAttribute('jslog', `${VisualLogging.toggle().track({click: true})}`);
     const checkedStateText = item.enabled ? i18nString(UIStrings.checked) : i18nString(UIStrings.unchecked);
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
@@ -235,7 +234,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
           linkifiedNode.appendChild(linkified);
           // Give the checkbox an aria-label as it is required for all form element
           UI.ARIAUtils.setLabel(
-              checkboxElement, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+              checkbox, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
           // The parent list element is the one that actually gets focused.
           // Assign it an aria-label with complete information for the screen reader to read out properly
           UI.ARIAUtils.setLabel(
@@ -249,7 +248,7 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     if (item === this.#highlightedBreakpoint) {
       element.classList.add('breakpoint-hit');
       UI.ARIAUtils.setDescription(element, i18nString(UIStrings.sBreakpointHit, {PH1: checkedStateText}));
-      UI.ARIAUtils.setDescription(checkboxElement, i18nString(UIStrings.breakpointHit));
+      UI.ARIAUtils.setDescription(checkbox, i18nString(UIStrings.breakpointHit));
     } else {
       UI.ARIAUtils.setDescription(element, checkedStateText);
     }

front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -63,7 +63,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/browser_debugger/XHRBreakpoints
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const containerToBreakpointEntry = new WeakMap<Element, HTMLElement>();
 
-const breakpointEntryToCheckbox = new WeakMap<Element, HTMLInputElement>();
+const breakpointEntryToCheckbox = new WeakMap<Element, UI.UIUtils.CheckboxLabel>();
 
 let xhrBreakpointsSidebarPaneInstance: XHRBreakpointsSidebarPane;
 
@@ -193,18 +193,18 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     element.addEventListener('contextmenu', this.contextMenu.bind(this, item), true);
 
     const title = item ? i18nString(UIStrings.urlContainsS, {PH1: item}) : i18nString(UIStrings.anyXhrOrFetch);
-    const label = UI.UIUtils.CheckboxLabel.create(title, enabled, undefined, undefined, /* small */ true);
-    UI.ARIAUtils.setHidden(label, true);
+    const checkbox = UI.UIUtils.CheckboxLabel.create(title, enabled, undefined, undefined, /* small */ true);
+    UI.ARIAUtils.setHidden(checkbox, true);
     UI.ARIAUtils.setLabel(element, title);
-    element.appendChild(label);
-    label.checkboxElement.addEventListener('click', this.checkboxClicked.bind(this, item, enabled), false);
+    element.appendChild(checkbox);
+    checkbox.addEventListener('click', this.checkboxClicked.bind(this, item, enabled), false);
     element.addEventListener('click', event => {
       if (event.target === element) {
         this.checkboxClicked(item, enabled);
       }
     }, false);
-    breakpointEntryToCheckbox.set(element, label.checkboxElement);
-    label.checkboxElement.tabIndex = -1;
+    breakpointEntryToCheckbox.set(element, checkbox);
+    checkbox.tabIndex = -1;
     element.tabIndex = -1;
     if (item === this.#list.selectedItem()) {
       element.tabIndex = 0;
@@ -230,8 +230,8 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
       UI.ARIAUtils.setDescription(element, i18nString(UIStrings.breakpointHit));
     }
 
-    label.classList.add('cursor-auto');
-    label.addEventListener('dblclick', this.labelClicked.bind(this, item), false);
+    checkbox.classList.add('cursor-auto');
+    checkbox.addEventListener('dblclick', this.labelClicked.bind(this, item), false);
     this.#breakpointElements.set(item, listItemElement);
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,

front_end/ui/legacy/UIUtils.ts

@@ -1364,6 +1364,18 @@ export class CheckboxLabel extends HTMLElement {
     return this.checkboxElement.disabled;
   }
 
+  set indeterminate(indeterminate: boolean) {
+    this.checkboxElement.indeterminate = indeterminate;
+  }
+
+  get indeterminate(): boolean {
+    return this.checkboxElement.indeterminate;
+  }
+
+  override click(): void {
+    this.checkboxElement.click();
+  }
+
   /** 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 {