Migrate off CheckboxLabel in the WebAuthn panel

Currently input in and label are being taken out of the `dt-checkbox` shadow root and attached directly to the panel. Not only this is weird and probably buggy, it also prevents me from refactoring and eventually eliminating the CheckboxLabel

Bug: 407751147
Change-Id: Ia64e7b6c24bd73cc09e3238b1962c9555a3a3395
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6440930
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/webauthn/WebauthnPane.ts

@@ -259,11 +259,8 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #newAuthenticatorForm: HTMLElement|undefined;
   #protocolSelect: HTMLSelectElement|undefined;
   transportSelect: HTMLSelectElement|undefined;
-  #residentKeyCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   residentKeyCheckbox: HTMLInputElement|undefined;
-  #userVerificationCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   #userVerificationCheckbox: HTMLInputElement|undefined;
-  #largeBlobCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   largeBlobCheckbox: HTMLInputElement|undefined;
   addAuthenticatorButton: Buttons.Button.Button|undefined;
   #isEnabling?: Promise<void>;
@@ -608,33 +605,33 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     UI.ARIAUtils.bindLabelToControl(transportSelectTitle, (this.transportSelect as Element));
     // transportSelect will be populated in updateNewAuthenticatorSectionOptions.
 
-    this.#residentKeyCheckboxLabel =
-        UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsResidentKeys), false, undefined, 'resident-key');
-    this.#residentKeyCheckboxLabel.textElement.classList.add('authenticator-option-label');
-    residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel.textElement);
-    this.residentKeyCheckbox = this.#residentKeyCheckboxLabel.checkboxElement;
+    const residentKeyCheckboxLabel =
+        UI.UIUtils.createLabel(i18nString(UIStrings.supportsResidentKeys), 'authenticator-option-label');
+    residentKeyCheckboxLabel.setAttribute('jslog', `${VisualLogging.toggle('resident-key').track({change: true})}`);
+    residentKeyGroup.appendChild(residentKeyCheckboxLabel);
+    this.residentKeyCheckbox = residentKeyGroup.createChild('input', 'authenticator-option-checkbox');
+    this.residentKeyCheckbox.type = 'checkbox';
     this.residentKeyCheckbox.checked = false;
-    this.residentKeyCheckbox.classList.add('authenticator-option-checkbox');
-    residentKeyGroup.appendChild(this.#residentKeyCheckboxLabel);
-
-    this.#userVerificationCheckboxLabel = UI.UIUtils.CheckboxLabel.create(
-        i18nString(UIStrings.supportsUserVerification), false, undefined, 'user-verification');
-    this.#userVerificationCheckboxLabel.textElement.classList.add('authenticator-option-label');
-    userVerificationGroup.appendChild(this.#userVerificationCheckboxLabel.textElement);
-    this.#userVerificationCheckbox = this.#userVerificationCheckboxLabel.checkboxElement;
+    UI.ARIAUtils.bindLabelToControl(residentKeyCheckboxLabel, this.residentKeyCheckbox);
+
+    const userVerificationCheckboxLabel =
+        UI.UIUtils.createLabel(i18nString(UIStrings.supportsUserVerification), 'authenticator-option-label');
+    userVerificationCheckboxLabel.setAttribute(
+        'jslog', `${VisualLogging.toggle('user-verification').track({change: true})}`);
+    userVerificationGroup.appendChild(userVerificationCheckboxLabel);
+    this.#userVerificationCheckbox = userVerificationGroup.createChild('input', 'authenticator-option-checkbox');
+    this.#userVerificationCheckbox.type = 'checkbox';
     this.#userVerificationCheckbox.checked = false;
-    this.#userVerificationCheckbox.classList.add('authenticator-option-checkbox');
-    userVerificationGroup.appendChild(this.#userVerificationCheckboxLabel);
-
-    this.#largeBlobCheckboxLabel =
-        UI.UIUtils.CheckboxLabel.create(i18nString(UIStrings.supportsLargeBlob), false, undefined, 'large-blob');
-    this.#largeBlobCheckboxLabel.textElement.classList.add('authenticator-option-label');
-    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel.textElement);
-    this.largeBlobCheckbox = this.#largeBlobCheckboxLabel.checkboxElement;
+    UI.ARIAUtils.bindLabelToControl(userVerificationCheckboxLabel, this.#userVerificationCheckbox);
+
+    const largeBlobCheckboxLabel =
+        UI.UIUtils.createLabel(i18nString(UIStrings.supportsLargeBlob), 'authenticator-option-label');
+    largeBlobCheckboxLabel.setAttribute('jslog', `${VisualLogging.toggle('large-blob').track({change: true})}`);
+    largeBlobGroup.appendChild(largeBlobCheckboxLabel);
+    this.largeBlobCheckbox = largeBlobGroup.createChild('input', 'authenticator-option-checkbox');
+    this.largeBlobCheckbox.type = 'checkbox';
     this.largeBlobCheckbox.checked = false;
-    this.largeBlobCheckbox.classList.add('authenticator-option-checkbox');
-    this.largeBlobCheckbox.name = 'large-blob-checkbox';
-    largeBlobGroup.appendChild(this.#largeBlobCheckboxLabel);
+    UI.ARIAUtils.bindLabelToControl(largeBlobCheckboxLabel, this.largeBlobCheckbox);
 
     this.addAuthenticatorButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.add), this.#handleAddAuthenticatorButton.bind(this),

front_end/panels/webauthn/webauthnPane.css

@@ -47,12 +47,16 @@
 }
 
 .authenticator-option {
-  > select, > devtools-button {
+  > select {
     margin: 0 var(--sys-size-9) var(--sys-size-3) var(--sys-size-9);
   }
 
-  > dt-checkbox {
-    margin: 0 var(--sys-size-9) 0 var(--sys-size-8);
+  > devtools-button {
+    margin: var(--sys-size-3) var(--sys-size-9);
+  }
+
+  > input[type="checkbox"] {
+    margin: var(--sys-size-5) var(--sys-size-9);
   }
 }
 
@@ -117,11 +121,6 @@
   line-height: 18px;
 }
 
-.authenticator-option-checkbox {
-  position: relative;
-  top: 2px;
-}
-
 .authenticator-field {
   margin: var(--sys-size-3) 0;
 }
@@ -137,7 +136,7 @@
   font: var(--sys-typescale-body5-medium);
   padding-right: var(--sys-size-6);
   text-align: left;
-  min-width: 150px;
+  min-width: 152px;
   line-height: 18px;
 }