Remove textElement member from the CheckboxLabel

This is the first step to replacing custom <dt-checkbox> component with a simple <label>

Bug: 407751147
Change-Id: I028de14edf56e75935c0086a6431c451671fabe8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6439366
Reviewed-by: Benedikt Meurer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -231,7 +231,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     }
 
     label.classList.add('cursor-auto');
-    label.textElement.addEventListener('dblclick', this.labelClicked.bind(this, item), false);
+    label.addEventListener('dblclick', this.labelClicked.bind(this, item), false);
     this.#breakpointElements.set(item, listItemElement);
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,

front_end/panels/elements/ElementStatePaneWidget.ts

@@ -135,7 +135,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
             enable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOn,
             disable: Host.UserMetrics.Action.ToggleEmulateFocusedPageFromStylesPaneOff,
           });
-      UI.Tooltip.Tooltip.install(label.textElement, i18nString(UIStrings.emulatesAFocusedPage));
+      UI.Tooltip.Tooltip.install(label, i18nString(UIStrings.emulatesAFocusedPage));
 
       const learnMoreButton = new Buttons.Button.Button();
       learnMoreButton.data = {

front_end/ui/legacy/Toolbar.ts

@@ -905,7 +905,7 @@ class ToolbarInputElement extends HTMLElement {
     return [...options].map((({value}) => value)).filter(value => value.startsWith(prefix)).map(text => ({text}));
   }
 
-  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void {
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
     if (name === 'value') {
       if (this.item && this.item.value() !== newValue) {
         this.item.setValue(newValue, true);
@@ -1320,7 +1320,7 @@ export class ToolbarCheckbox extends ToolbarItem<void> {
     if (tooltip) {
       // install on the checkbox
       Tooltip.install(this.inputElement, tooltip);
-      Tooltip.install((this.element as CheckboxLabel).textElement, tooltip);
+      Tooltip.install(this.element, tooltip);
     }
     if (listener) {
       this.inputElement.addEventListener('click', listener, false);

front_end/ui/legacy/UIUtils.ts

@@ -1305,21 +1305,21 @@ export function setTitle(element: HTMLElement, title: string): void {
 }
 
 export class CheckboxLabel extends HTMLElement {
-  private readonly shadowRootInternal!: DocumentFragment;
+  readonly #shadowRoot!: DocumentFragment;
   checkboxElement!: HTMLInputElement;
-  textElement!: HTMLElement;
+  #textElement!: HTMLElement;
 
   constructor() {
     super();
     CheckboxLabel.lastId = CheckboxLabel.lastId + 1;
     const id = 'ui-checkbox-label' + CheckboxLabel.lastId;
-    this.shadowRootInternal = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles});
-    this.checkboxElement = this.shadowRootInternal.createChild('input');
+    this.#shadowRoot = createShadowRootWithCoreStyles(this, {cssFile: checkboxTextLabelStyles});
+    this.checkboxElement = this.#shadowRoot.createChild('input');
     this.checkboxElement.type = 'checkbox';
     this.checkboxElement.setAttribute('id', id);
-    this.textElement = this.shadowRootInternal.createChild('label', 'dt-checkbox-text');
-    this.textElement.setAttribute('for', id);
-    this.shadowRootInternal.createChild('slot');
+    this.#textElement = this.#shadowRoot.createChild('label', 'dt-checkbox-text');
+    this.#textElement.setAttribute('for', id);
+    this.#shadowRoot.createChild('slot');
   }
 
   static create(
@@ -1332,10 +1332,10 @@ export class CheckboxLabel extends HTMLElement {
           'jslog', `${VisualLogging.toggle().track({change: true}).context(jslogContext)}`);
     }
     if (title !== undefined) {
-      element.textElement.textContent = title;
+      element.#textElement.textContent = title;
       element.checkboxElement.title = title;
       if (subtitle !== undefined) {
-        element.textElement.createChild('div', 'dt-checkbox-subtitle').textContent = subtitle;
+        element.#textElement.createChild('div', 'dt-checkbox-subtitle').textContent = subtitle;
       }
     }
     element.checkboxElement.classList.toggle('small', small);