chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/utils/SourceMapsResolver.test.ts

@@ -18,6 +18,7 @@ import {MockProtocolBackend} from '../../../testing/MockScopeChain.js';
 import {encodeSourceMap} from '../../../testing/SourceMapEncoder.js';
 import {loadBasicSourceMapExample} from '../../../testing/SourceMapHelpers.js';
 import {
+  makeMockRendererHandlerData,
   makeMockSamplesHandlerData,
   makeProfileCall,
 } from '../../../testing/TraceHelpers.js';
@@ -115,6 +116,10 @@ function parsedTraceFromProfileCalls(profileCalls: Trace.Types.Events.SyntheticP
   return {
     Samples: makeMockSamplesHandlerData(profileCalls),
     Workers: workersData,
+    Renderer: makeMockRendererHandlerData(profileCalls),
+    NetworkRequests:
+        {entityMappings: {entityByEvent: new Map(), eventsByEntity: new Map(), createdEntityCache: new Map()}},
+    Meta: {mainFrameURL: 'https://example.com', navigationsByNavigationId: new Map()},
   } as Trace.Handlers.Types.ParsedTrace;
 }
 
@@ -222,7 +227,8 @@ describeWithMockConnection('SourceMapsResolver', () => {
 
       // For a profile call with mappings, it must return the mapped script.
       const traceWithMappings = parsedTraceFromProfileCalls([profileCallWithMappings]);
-      let resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings);
+      const mapperWithMappings = new Utils.EntityMapper.EntityMapper(traceWithMappings);
+      let resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithMappings, mapperWithMappings);
       await resolver.install();
       let sourceMappedURL =
           Utils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(traceWithMappings, profileCallWithMappings);
@@ -230,7 +236,8 @@ describeWithMockConnection('SourceMapsResolver', () => {
 
       // For a profile call without mappings, it must return the original URL
       const traceWithoutMappings = parsedTraceFromProfileCalls([profileCallWithNoMappings]);
-      resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithoutMappings);
+      const mapperWithoutMappings = new Utils.EntityMapper.EntityMapper(traceWithoutMappings);
+      resolver = new Utils.SourceMapsResolver.SourceMapsResolver(traceWithoutMappings, mapperWithoutMappings);
       await resolver.install();
       sourceMappedURL = Utils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(
           traceWithoutMappings, profileCallWithNoMappings);
@@ -248,4 +255,78 @@ describeWithMockConnection('SourceMapsResolver', () => {
       assert.isTrue(listener.notCalled);
     });
   });
+  describe('updating entity mapping', () => {
+    it('correctly updates mapping for event that maps to a script', async function() {
+      const {scriptId} = await loadCodeLocationResolvingScenario();
+
+      const profileCall =
+          makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+      const LINE_NUMBER = 0;
+      const COLUMN_NUMBER = 9;
+      profileCall.callFrame = {
+        lineNumber: LINE_NUMBER,
+        columnNumber: COLUMN_NUMBER,
+        functionName: 'minified',
+        scriptId,
+        url: 'http://example-domain.com/',
+      };
+      const profileCallUnmapped =
+          makeProfileCall('function', 10, 100, Trace.Types.Events.ProcessID(1), Trace.Types.Events.ThreadID(1));
+      profileCallUnmapped.callFrame = {
+        lineNumber: 2,
+        columnNumber: 0,
+        functionName: '',
+        scriptId,
+        url: 'http://example-domain.com/',
+      };
+
+      const trace = parsedTraceFromProfileCalls([profileCall, profileCallUnmapped]);
+      const mapper = new Utils.EntityMapper.EntityMapper(trace);
+
+      const testEntity = {
+        name: 'example-domain.com',
+        company: 'example-domain.com',
+        category: '',
+        categories: [],
+        domains: ['example-domain.com'],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+        isUnrecognized: true,
+      };
+      // Set a fake entity for this event that should get overriden. Initially
+      // both traces are mapped together, after the sourcemap that should change
+      mapper.mappings().entityByEvent.set(profileCall, testEntity);
+      mapper.mappings().entityByEvent.set(profileCallUnmapped, testEntity);
+      mapper.mappings().eventsByEntity.set(testEntity, [profileCall, profileCallUnmapped]);
+      mapper.mappings().createdEntityCache.set('example-domain.com', testEntity);
+
+      const resolver = new Utils.SourceMapsResolver.SourceMapsResolver(trace, mapper);
+      // This should update the entities
+      await resolver.install();
+      const afterEntityOfEvent = mapper.entityForEvent(profileCall);
+      const expected = {
+        name: 'example.com',
+        company: 'example.com',
+        category: '',
+        categories: [],
+        domains: ['example.com'],
+        averageExecutionTime: 0,
+        totalExecutionTime: 0,
+        totalOccurrences: 0,
+        isUnrecognized: true,
+      };
+      assert.exists(afterEntityOfEvent);
+      assert.deepEqual(afterEntityOfEvent, expected);
+      // The mapped event should now map to its new entity.
+      const gotEventsMapped = mapper.eventsForEntity(afterEntityOfEvent) ?? [];
+      assert.deepEqual(gotEventsMapped, [profileCall]);
+
+      // The unmapped event should keep its original entity.
+      const gotEventsUnmapped = mapper.eventsForEntity(testEntity) ?? [];
+      assert.deepEqual(gotEventsUnmapped, [profileCallUnmapped]);
+      const gotUnmappedEntity = mapper.entityForEvent(profileCallUnmapped);
+      assert.deepEqual(gotUnmappedEntity, testEntity);
+    });
+  });
 });

package/front_end/panels/timeline/utils/SourceMapsResolver.ts

@@ -10,6 +10,8 @@ import * as SourceMapScopes from '../../../models/source_map_scopes/source_map_s
 import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 
+import type * as EntityMapper from './EntityMapper.js';
+
 type ResolvedCodeLocationData = {
   name: string|null,
   devtoolsLocation: Workspace.UISourceCode.UILocation|null,
@@ -26,15 +28,12 @@ export class SourceMappingsUpdated extends Event {
   }
 }
 
-// Resolved code location data is keyed based on
-// ProcessID=>ThreadID=> Call frame key.
 // The code location key is created as a concatenation of its fields.
-export const resolvedCodeLocationDataNames:
-    Map<Trace.Types.Events.ProcessID, Map<Trace.Types.Events.ThreadID, Map<string, ResolvedCodeLocationData|null>>> =
-        new Map();
+export const resolvedCodeLocationDataNames: Map<string, ResolvedCodeLocationData|null> = new Map();
 
 export class SourceMapsResolver extends EventTarget {
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #entityMapper: EntityMapper.EntityMapper|null = null;
 
   #isResolving = false;
 
@@ -45,9 +44,10 @@ export class SourceMapsResolver extends EventTarget {
   // those workers too.
   #debuggerModelsToListen = new Set<SDK.DebuggerModel.DebuggerModel>();
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace) {
+  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace, entityMapper?: EntityMapper.EntityMapper) {
     super();
     this.#parsedTrace = parsedTrace;
+    this.#entityMapper = entityMapper ?? null;
   }
 
   static clearResolvedNodeNames(): void {
@@ -68,7 +68,14 @@ export class SourceMapsResolver extends EventTarget {
    * (f.e. if an app is bundled). Thus, beyond a URL we can use code
    * location data like line and column numbers to obtain the specific
    * authored code according to the source mappings.
+   *
+   * TODO(andoli): This can return incorrect scripts if the target page has been reloaded since the trace.
    */
+  static resolvedCodeLocationForCallFrame(callFrame: Protocol.Runtime.CallFrame): ResolvedCodeLocationData|null {
+    const codeLocationKey = this.keyForCodeLocation(callFrame as Protocol.Runtime.CallFrame);
+    return resolvedCodeLocationDataNames.get(codeLocationKey) ?? null;
+  }
+
   static resolvedCodeLocationForEntry(entry: Trace.Types.Events.Event): ResolvedCodeLocationData|null {
     let callFrame = null;
     if (Trace.Types.Events.isProfileCall(entry)) {
@@ -80,8 +87,7 @@ export class SourceMapsResolver extends EventTarget {
       }
       callFrame = stackTrace[0];
     }
-    const codeLocationKey = this.keyForCodeLocation(callFrame as Protocol.Runtime.CallFrame);
-    return resolvedCodeLocationDataNames.get(entry.pid)?.get(entry.tid)?.get(codeLocationKey) ?? null;
+    return SourceMapsResolver.resolvedCodeLocationForCallFrame(callFrame as Protocol.Runtime.CallFrame);
   }
 
   static resolvedURLForEntry(parsedTrace: Trace.Handlers.Types.ParsedTrace, entry: Trace.Types.Events.Event):
@@ -93,23 +99,17 @@ export class SourceMapsResolver extends EventTarget {
     }
     // If no source mapping was found for an entry's URL, then default
     // to the URL value contained in the event itself, if any.
-    const url = Trace.Extras.URLForEntry.getNonResolved(parsedTrace, entry);
+    const url = Trace.Handlers.Helpers.getNonResolvedURL(entry, parsedTrace);
     if (url) {
       return Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url)?.url() ?? url;
     }
     return null;
   }
 
-  static storeResolvedNodeDataForEntry(
-      pid: Trace.Types.Events.ProcessID, tid: Trace.Types.Events.ThreadID, callFrame: Protocol.Runtime.CallFrame,
-      resolvedCodeLocationData: ResolvedCodeLocationData): void {
-    const resolvedForPid = resolvedCodeLocationDataNames.get(pid) ||
-        new Map<Trace.Types.Events.ThreadID, Map<string, ResolvedCodeLocationData|null>>();
-    const resolvedForTid = resolvedForPid.get(tid) || new Map<string, ResolvedCodeLocationData|null>();
+  static storeResolvedCodeDataForCallFrame(
+      callFrame: Protocol.Runtime.CallFrame, resolvedCodeLocationData: ResolvedCodeLocationData): void {
     const keyForCallFrame = this.keyForCodeLocation(callFrame);
-    resolvedForTid.set(keyForCallFrame, resolvedCodeLocationData);
-    resolvedForPid.set(tid, resolvedForTid);
-    resolvedCodeLocationDataNames.set(pid, resolvedForPid);
+    resolvedCodeLocationDataNames.set(keyForCallFrame, resolvedCodeLocationData);
   }
 
   async install(): Promise<void> {
@@ -165,7 +165,7 @@ export class SourceMapsResolver extends EventTarget {
     // is attach. If not, we do not notify the flamechart that mappings
     // were updated, since that would trigger a rerender.
     let updatedMappings = false;
-    for (const [pid, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
+    for (const [, threadsInProcess] of this.#parsedTrace.Samples.profilesInProcess) {
       for (const [tid, threadProfile] of threadsInProcess) {
         const nodes = threadProfile.parsedProfile.nodes() ?? [];
         const target = this.#targetForThread(tid);
@@ -187,9 +187,13 @@ export class SourceMapsResolver extends EventTarget {
               await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
                   location);
           updatedMappings ||= Boolean(uiLocation);
+          if (uiLocation?.uiSourceCode.url() && this.#entityMapper) {
+            // Update mappings for the related events of the entity.
+            this.#entityMapper.updateSourceMapEntities(node.callFrame, uiLocation.uiSourceCode.url());
+          }
 
-          SourceMapsResolver.storeResolvedNodeDataForEntry(
-              pid, tid, node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation, script});
+          SourceMapsResolver.storeResolvedCodeDataForCallFrame(
+              node.callFrame, {name: resolvedFunctionName, devtoolsLocation: uiLocation, script});
         }
       }
     }

package/front_end/panels/timeline/utils/utils.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as AICallTree from './AICallTree.js';
+import * as EntityMapper from './EntityMapper.js';
 import * as EntryName from './EntryName.js';
 import * as EntryStyles from './EntryStyles.js';
 import * as Helpers from './Helpers.js';
@@ -12,6 +13,7 @@ import * as SourceMapsResolver from './SourceMapsResolver.js';
 
 export {
   AICallTree,
+  EntityMapper,
   EntryName,
   EntryStyles,
   Helpers,

package/front_end/panels/utils/utils.test.ts

@@ -205,8 +205,8 @@ describeWithEnvironment('panels/utils', () => {
       const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
       const imagePreview = iconElement.querySelector('.image-network-icon-preview') as HTMLImageElement;
 
-      assert.isTrue(iconElement instanceof HTMLDivElement);
-      assert.isTrue(imagePreview instanceof HTMLImageElement);
+      assert.instanceOf(iconElement, HTMLDivElement);
+      assert.instanceOf(imagePreview, HTMLImageElement);
     });
 
     it('mime win: show document icon for fetch-html', async () => {

package/front_end/panels/web_audio/AudioContextSelector.ts

@@ -92,8 +92,7 @@ export class AudioContextSelector extends Common.ObjectWrapper.ObjectWrapper<Eve
 
   createElementForItem(item: Protocol.WebAudio.BaseAudioContext): Element {
     const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        element, {cssFile: [audioContextSelectorStyles], delegatesFocus: undefined});
+    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: [audioContextSelectorStyles]});
     const title = shadowRoot.createChild('div', 'title');
     UI.UIUtils.createTextChild(title, Platform.StringUtilities.trimEndWithMaxLength(this.titleFor(item), 100));
     return element;

package/front_end/panels/webauthn/WebauthnPane.test.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
+import * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
@@ -131,7 +131,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       let emptyNode = dataGrid.rootNode().children[0];
       assert.isOk(emptyNode);
       assert.deepEqual(emptyNode.data, {});
@@ -151,7 +151,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential appeared and the empty row was removed.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -159,7 +159,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       // Remove the credential.
       const removeCredential = sinon.stub(model, 'removeCredential').resolves();
       dataGrid.element.querySelectorAll('devtools-button')[1].click();
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       emptyNode = dataGrid.rootNode().children[0];
       assert.isOk(emptyNode);
       assert.deepEqual(emptyNode.data, {});
@@ -202,7 +202,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -222,7 +222,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was updated.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential1);
 
       // The credential can also be updated through the CREDENTIAL_UPDATED
@@ -241,7 +241,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was updated.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential2);
 
       // Updating a different credential should not affect the existing one.
@@ -259,7 +259,7 @@ describeWithMockConnection('WebAuthn pane', () => {
       });
 
       // Verify the credential was unchanged.
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       assert.strictEqual(credentialNode.data, updatedCredential2);
     });
 
@@ -295,7 +295,7 @@ describeWithMockConnection('WebAuthn pane', () => {
         assert.fail('Expected dataGrid to be truthy');
         return;
       }
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
       const credentialNode = dataGrid.rootNode().children[0];
       assert.isOk(credentialNode);
       assert.strictEqual(credentialNode.data, credential);
@@ -305,14 +305,58 @@ describeWithMockConnection('WebAuthn pane', () => {
         authenticatorId,
         credentialId: 'another credential',
       });
-      assert.strictEqual(dataGrid.rootNode().children.length, 1);
+      assert.lengthOf(dataGrid.rootNode().children, 1);
 
       // Delete the credential. It should be removed from the list.
       model.dispatchEventToListeners(SDK.WebAuthnModel.Events.CREDENTIAL_DELETED, {
         authenticatorId,
         credentialId: credential.credentialId,
       });
-      assert.strictEqual(dataGrid.rootNode().children.length, 0);
+      assert.lengthOf(dataGrid.rootNode().children, 0);
+    });
+
+    it('disables "internal" if an internal authenticator exists', async () => {
+      const authenticatorId = 'authenticator-1' as Protocol.WebAuthn.AuthenticatorId;
+      let panel = new Webauthn.WebauthnPane.WebauthnPaneImpl();
+      let transport = panel.transportSelect;
+      if (!transport) {
+        assert.fail('Transport select is not present');
+      }
+      let internalTransportIndex = -1;
+      for (let i = 0; i < transport.options.length; ++i) {
+        if (transport.options[i].value === Protocol.WebAuthn.AuthenticatorTransport.Internal) {
+          internalTransportIndex = i;
+          break;
+        }
+      }
+      assert.notEqual(internalTransportIndex, -1);
+      assert.isFalse(transport.options[internalTransportIndex].disabled);
+
+      // Add an internal authenticator.
+      transport.selectedIndex = internalTransportIndex;
+      const addAuthenticator = sinon.stub(model, 'addAuthenticator').resolves(authenticatorId);
+      panel.addAuthenticatorButton?.click();
+      await new Promise(resolve => setTimeout(resolve, 0));
+      assert.strictEqual(addAuthenticator.called, inScope);
+      if (!inScope) {
+        return;
+      }
+
+      // The "internal" option should have been disabled, and another option selected.
+      assert.notEqual(transport.selectedIndex, internalTransportIndex);
+      assert.isTrue(transport.options[internalTransportIndex].disabled);
+
+      // Restoring the authenticator when loading the panel again should also cause "internal" to be disabled.
+      panel = new Webauthn.WebauthnPane.WebauthnPaneImpl();
+      transport = panel.transportSelect;
+      if (!transport) {
+        assert.fail('Transport select is not present');
+      }
+      assert.isTrue(transport.options[internalTransportIndex].disabled);
+
+      // Removing the internal authenticator should re-enable the option.
+      panel.removeAuthenticator(authenticatorId);
+      assert.isFalse(transport.options[internalTransportIndex].disabled);
     });
   };
 

package/front_end/panels/webauthn/WebauthnPane.ts

@@ -251,7 +251,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #newAuthenticatorSection: HTMLElement|undefined;
   #newAuthenticatorForm: HTMLElement|undefined;
   #protocolSelect: HTMLSelectElement|undefined;
-  #transportSelect: HTMLSelectElement|undefined;
+  transportSelect: HTMLSelectElement|undefined;
   #residentKeyCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
   residentKeyCheckbox: HTMLInputElement|undefined;
   #userVerificationCheckboxLabel: UI.UIUtils.CheckboxLabel|undefined;
@@ -481,23 +481,43 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   }
 
   #updateEnabledTransportOptions(enabledOptions: Protocol.WebAuthn.AuthenticatorTransport[]): void {
-    if (!this.#transportSelect) {
+    if (!this.transportSelect) {
       return;
     }
 
-    const prevValue = this.#transportSelect.value;
-    this.#transportSelect.removeChildren();
+    const prevValue = this.transportSelect.value;
+    this.transportSelect.removeChildren();
 
     for (const option of enabledOptions) {
-      this.#transportSelect.appendChild(UI.UIUtils.createOption(option, option, option));
+      this.transportSelect.appendChild(UI.UIUtils.createOption(option, option, option));
     }
 
     // Make sure the currently selected value stays the same.
-    this.#transportSelect.value = prevValue;
+    this.transportSelect.value = prevValue;
     // If the new set does not include the previous value.
-    if (!this.#transportSelect.value) {
+    if (!this.transportSelect.value) {
       // Select the first available value.
-      this.#transportSelect.selectedIndex = 0;
+      this.transportSelect.selectedIndex = 0;
+    }
+    this.#updateInternalTransportAvailability();
+  }
+
+  #updateInternalTransportAvailability(): void {
+    if (!this.transportSelect?.options) {
+      return;
+    }
+    const hasInternal = Boolean(this.#availableAuthenticatorSetting.get().find(
+        authenticator => authenticator.transport === Protocol.WebAuthn.AuthenticatorTransport.Internal));
+    for (let i = 0; i < this.transportSelect.options.length; ++i) {
+      const option = this.transportSelect.options[i];
+      if (option.value === Protocol.WebAuthn.AuthenticatorTransport.Internal) {
+        option.disabled = hasInternal;
+        // This relies on "internal" never being the first or only element.
+        if (i === this.transportSelect.selectedIndex) {
+          --this.transportSelect.selectedIndex;
+        }
+        break;
+      }
     }
   }
 
@@ -518,8 +538,6 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         Protocol.WebAuthn.AuthenticatorTransport.Usb,
         Protocol.WebAuthn.AuthenticatorTransport.Ble,
         Protocol.WebAuthn.AuthenticatorTransport.Nfc,
-        // TODO (crbug.com/1034663): Toggle cable as option depending on if cablev2 flag is on.
-        // Protocol.WebAuthn.AuthenticatorTransport.Cable,
         Protocol.WebAuthn.AuthenticatorTransport.Internal,
       ]);
     } else {
@@ -565,7 +583,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     const protocolSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.protocol), 'authenticator-option-label');
     protocolGroup.appendChild(protocolSelectTitle);
-    this.#protocolSelect = (protocolGroup.createChild('select', 'chrome-select') as HTMLSelectElement);
+    this.#protocolSelect = protocolGroup.createChild('select', 'chrome-select');
     this.#protocolSelect.setAttribute('jslog', `${VisualLogging.dropDown('protocol').track({change: true})}`);
     UI.ARIAUtils.bindLabelToControl(protocolSelectTitle, (this.#protocolSelect as Element));
     Object.values(PROTOCOL_AUTHENTICATOR_VALUES).sort().forEach((option: Protocol.WebAuthn.AuthenticatorProtocol) => {
@@ -580,9 +598,9 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     const transportSelectTitle = UI.UIUtils.createLabel(i18nString(UIStrings.transport), 'authenticator-option-label');
     transportGroup.appendChild(transportSelectTitle);
-    this.#transportSelect = (transportGroup.createChild('select', 'chrome-select') as HTMLSelectElement);
-    this.#transportSelect.setAttribute('jslog', `${VisualLogging.dropDown('transport').track({change: true})}`);
-    UI.ARIAUtils.bindLabelToControl(transportSelectTitle, (this.#transportSelect as Element));
+    this.transportSelect = transportGroup.createChild('select', 'chrome-select');
+    this.transportSelect.setAttribute('jslog', `${VisualLogging.dropDown('transport').track({change: true})}`);
+    UI.ARIAUtils.bindLabelToControl(transportSelectTitle, (this.transportSelect as Element));
     // transportSelect will be populated in updateNewAuthenticatorSectionOptions.
 
     this.#residentKeyCheckboxLabel =
@@ -642,6 +660,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
       const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)');
       const prefersReducedMotion = mediaQueryList.matches;
       section.scrollIntoView({block: 'start', behavior: prefersReducedMotion ? 'auto' : 'smooth'});
+      this.#updateInternalTransportAvailability();
     }
   }
 
@@ -660,16 +679,16 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
     await this.#clearActiveAuthenticator();
     const activeButtonContainer = headerElement.createChild('div', 'active-button-container');
-    const activeLabel =
-        UI.UIUtils.createRadioLabel(`active-authenticator-${authenticatorId}`, i18nString(UIStrings.active));
-    activeLabel.radioElement.addEventListener('change', this.#setActiveAuthenticator.bind(this, authenticatorId));
+    const {label: activeLabel, radio: activeRadio} = UI.UIUtils.createRadioButton(
+        'active-authenticator', i18nString(UIStrings.active), 'webauthn.active-authenticator');
+    activeRadio.addEventListener('change', this.#setActiveAuthenticator.bind(this, authenticatorId));
+    activeRadio.checked = true;
     activeButtonContainer.appendChild(activeLabel);
-    (activeLabel.radioElement as HTMLInputElement).checked = true;
     this.#activeAuthId = authenticatorId;  // Newly added authenticator is automatically set as active.
 
     const removeButton = headerElement.createChild('button', 'text-button');
     removeButton.textContent = i18nString(UIStrings.remove);
-    removeButton.addEventListener('click', this.#removeAuthenticator.bind(this, authenticatorId));
+    removeButton.addEventListener('click', this.removeAuthenticator.bind(this, authenticatorId));
     removeButton.setAttribute('jslog', `${VisualLogging.action('webauthn.remove-authenticator').track({click: true})}`);
 
     const toolbar = new UI.Toolbar.Toolbar('edit-name-toolbar', titleElement);
@@ -677,7 +696,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     const saveName = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.saveName), 'checkmark', undefined, 'save-name');
     saveName.setVisible(false);
 
-    const nameField = (titleElement.createChild('input', 'authenticator-name-field') as HTMLInputElement);
+    const nameField = titleElement.createChild('input', 'authenticator-name-field');
     nameField.placeholder = i18nString(UIStrings.enterNewName);
     nameField.disabled = true;
     nameField.setAttribute('jslog', `${VisualLogging.textField('name').track({keydown: 'Enter', change: true})}`);
@@ -804,7 +823,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
 
   #handleSaveNameButton(
       titleElement: Element, nameField: HTMLInputElement, editName: UI.Toolbar.ToolbarItem,
-      saveName: UI.Toolbar.ToolbarItem, activeLabel: UI.UIUtils.DevToolsRadioButton): void {
+      saveName: UI.Toolbar.ToolbarItem, activeLabel: HTMLLabelElement): void {
     const name = nameField.value;
     if (!name) {
       return;
@@ -816,15 +835,15 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
     this.#updateActiveLabelTitle(activeLabel, name);
   }
 
-  #updateActiveLabelTitle(activeLabel: UI.UIUtils.DevToolsRadioButton, authenticatorName: string): void {
+  #updateActiveLabelTitle(activeLabel: HTMLLabelElement, authenticatorName: string): void {
     UI.Tooltip.Tooltip.install(
-        activeLabel.radioElement, i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName}));
+        activeLabel, i18nString(UIStrings.setSAsTheActiveAuthenticator, {PH1: authenticatorName}));
   }
 
   /**
    * Removes both the authenticator and its respective UI element.
    */
-  #removeAuthenticator(authenticatorId: Protocol.WebAuthn.AuthenticatorId): void {
+  removeAuthenticator(authenticatorId: Protocol.WebAuthn.AuthenticatorId): void {
     if (this.#authenticatorsView) {
       const child = this.#authenticatorsView.querySelector(`[data-authenticator-id=${CSS.escape(authenticatorId)}]`);
       if (child) {
@@ -854,11 +873,12 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
         this.#activeAuthId = null;
       }
     }
+    this.#updateInternalTransportAvailability();
   }
 
   #createOptionsFromCurrentInputs(): Protocol.WebAuthn.VirtualAuthenticatorOptions {
     // TODO(crbug.com/1034663): Add optionality for isUserVerified param.
-    if (!this.#protocolSelect || !this.#transportSelect || !this.residentKeyCheckbox ||
+    if (!this.#protocolSelect || !this.transportSelect || !this.residentKeyCheckbox ||
         !this.#userVerificationCheckbox || !this.largeBlobCheckbox) {
       throw new Error('Unable to create options from current inputs');
     }
@@ -867,7 +887,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
       protocol: this.#protocolSelect.options[this.#protocolSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorProtocol,
       ctap2Version: Protocol.WebAuthn.Ctap2Version.Ctap2_1,
-      transport: this.#transportSelect.options[this.#transportSelect.selectedIndex].value as
+      transport: this.transportSelect.options[this.transportSelect.selectedIndex].value as
           Protocol.WebAuthn.AuthenticatorTransport,
       hasResidentKey: this.residentKeyCheckbox.checked,
       hasUserVerification: this.#userVerificationCheckbox.checked,
@@ -899,7 +919,7 @@ export class WebauthnPaneImpl extends UI.Widget.VBox implements
   #updateActiveButtons(): void {
     const authenticators = this.#authenticatorsView.getElementsByClassName('authenticator-section');
     Array.from(authenticators).forEach((authenticator: Element) => {
-      const button = (authenticator.querySelector('input.dt-radio-button') as HTMLInputElement);
+      const button = (authenticator.querySelector('input[type="radio"]') as HTMLInputElement);
       if (!button) {
         return;
       }

package/front_end/panels/webauthn/webauthnPane.css

@@ -69,11 +69,6 @@
   margin: 0;
 }
 
-.authenticator-field {
-  display: flex;
-  margin: auto;
-}
-
 .authenticator-section-header {
   display: flex;
   justify-content: space-between;
@@ -100,8 +95,6 @@
 }
 
 .authenticator-field-value {
-  padding: 5px 0;
-  display: inline-block;
   font-family: monospace;
 }
 
@@ -110,13 +103,14 @@
   top: 2px;
 }
 
+.authenticator-field,
 .authenticator-option {
   display: flex;
   padding-bottom: 10px;
   align-items: center;
   margin: auto;
 
-  &:has(span[is="dt-checkbox"]) {
+  &:has(dt-checkbox) {
     padding-bottom: 4px;
   }
 }
@@ -124,8 +118,7 @@
 .authenticator-option-label {
   text-align: right;
   width: 200px;
-  display: inline-block;
-  padding: 0 10px 0 0;
+  padding-right: 10px;
 }
 
 td .text-button {