chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -7,11 +7,13 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import keybindsSettingsTabStyles from './keybindsSettingsTab.css.js';
+import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
   /**
@@ -108,26 +110,31 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('keybinds')}`);
 
-    const header = this.contentElement.createChild('header');
-    header.createChild('h1').textContent = i18nString(UIStrings.shortcuts);
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container');
+
     const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
     const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
     keybindsSetSetting.addChangeListener(this.update, this);
     const keybindsSetSelect =
         UI.SettingsUI.createControlForSetting(keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));
+
+    const card = new Cards.Card.Card();
+    settingsContent.appendChild(card);
+
     if (keybindsSetSelect) {
       keybindsSetSelect.classList.add('keybinds-set-select');
-      this.contentElement.appendChild(keybindsSetSelect);
     }
 
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);
+    this.list.element.classList.add('shortcut-list');
     this.items.replaceAll(this.createListItems());
     UI.ARIAUtils.markAsList(this.list.element);
 
-    this.contentElement.appendChild(this.list.element);
     UI.ARIAUtils.setLabel(this.list.element, i18nString(UIStrings.keyboardShortcutsList));
-    const footer = this.contentElement.createChild('div');
+    const footer = document.createElement('div');
     footer.classList.add('keybinds-footer');
     const docsLink = UI.XLink.XLink.create(
         'https://developer.chrome.com/docs/devtools/shortcuts/', i18nString(UIStrings.FullListOfDevtoolsKeyboard),
@@ -143,29 +150,39 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     this.editingItem = null;
     this.editingRow = null;
 
+    card.data = {
+      heading: i18nString(UIStrings.shortcuts),
+      content: keybindsSetSelect ? [keybindsSetSelect, this.list.element, footer] : [this.list.element, footer],
+    };
+
     this.update();
   }
 
   createElementForItem(item: KeybindsItem): Element {
-    let itemElement = document.createElement('div');
+    const itemWrapper = document.createElement('div');
+    itemWrapper.classList.add('keybinds-list-item-wrapper');
 
+    let itemContent;
     if (typeof item === 'string') {
-      UI.ARIAUtils.setLevel(itemElement, 1);
-      itemElement.classList.add('keybinds-category-header');
-      itemElement.textContent = UI.ActionRegistration.getLocalizedActionCategory(item);
+      itemWrapper.classList.add('keybinds-header-wrapper');
+      UI.ARIAUtils.setLevel(itemWrapper, 1);
+      itemContent = itemWrapper.createChild('div');
+      itemContent.classList.add('keybinds-category-header');
+      itemContent.textContent = UI.ActionRegistration.getLocalizedActionCategory(item);
     } else {
       const listItem = new ShortcutListItem(item, this, item === this.editingItem);
-      itemElement = listItem.element;
-      UI.ARIAUtils.setLevel(itemElement, 2);
+      itemContent = listItem.element;
+      UI.ARIAUtils.setLevel(itemContent, 2);
       if (item === this.editingItem) {
         this.editingRow = listItem;
       }
+      itemContent.classList.add('keybinds-list-item');
+      itemWrapper.appendChild(itemContent);
     }
 
-    itemElement.classList.add('keybinds-list-item');
-    UI.ARIAUtils.markAsListitem(itemElement);
-    itemElement.tabIndex = item === this.list.selectedItem() && item !== this.editingItem ? 0 : -1;
-    return itemElement;
+    UI.ARIAUtils.markAsListitem(itemContent);
+    itemContent.tabIndex = item === this.list.selectedItem() && item !== this.editingItem ? 0 : -1;
+    return itemWrapper;
   }
 
   commitChanges(
@@ -303,7 +320,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
   override wasShown(): void {
     super.wasShown();
-    this.registerCSSFiles([keybindsSettingsTabStyles]);
+    this.registerCSSFiles([keybindsSettingsTabStyles, settingsScreenStyles]);
   }
 }
 
@@ -463,7 +480,7 @@ export class ShortcutListItem {
     } else {
       const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(' + '));
       keys.forEach(key => {
-        shortcutElement.createChild('span', 'keybinds-key').textContent = key;
+        shortcutElement.createChild('div', 'keybinds-key').createChild('span').textContent = key;
       });
       if (index === 0) {
         this.element.appendChild(this.createEditButton());

package/front_end/panels/settings/SettingsScreen.ts

@@ -40,7 +40,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {PanelUtils} from '../utils/utils.js';
 
 import * as PanelComponents from './components/components.js';
-import {type KeybindsSettingsTab} from './KeybindsSettingsTab.js';
+import type {KeybindsSettingsTab} from './KeybindsSettingsTab.js';
 import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
@@ -496,10 +496,10 @@ export class ExperimentsSettingsTab extends SettingsTab {
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.SMALL,
         jslogContext: `${experiment.name}-documentation`,
+        title: i18nString(UIStrings.learnMore),
       };
       linkButton.addEventListener(
           'click', () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(experimentLink));
-      linkButton.ariaLabel = i18nString(UIStrings.learnMore);
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);

package/front_end/panels/settings/aiSettingsTab.css

@@ -175,3 +175,16 @@ header {
   font-size: var(--sys-typescale-headline3-size);
   font-weight: var(--ref-typeface-weight-regular);
 }
+
+.disabled-explainer {
+  display: flex;
+  gap: var(--sys-size-6);
+  background-color: var(--sys-color-surface-yellow);
+  border-radius: var(--sys-shape-corner-medium-small);
+  margin-top: var(--sys-size-11);
+  padding: var(--sys-size-8) var(--sys-size-11);
+  width: 100%;
+  max-width: var(--sys-size-35);
+  min-width: var(--sys-size-28);
+  color: var(--sys-color-yellow);
+}

package/front_end/panels/settings/components/SyncSection.ts

@@ -2,16 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/chrome_link/chrome_link.js';
+import '../../../ui/components/settings/settings.js';
+
 import * as Common from '../../../core/common/common.js';
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as Settings from '../../../ui/components/settings/settings.js';
-import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 
 import syncSectionStyles from './syncSection.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Text shown to the user in the Settings UI. 'This setting' refers
@@ -43,7 +47,6 @@ export interface SyncSectionData {
 }
 
 export class SyncSection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-sync-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #syncInfo: Host.InspectorFrontendHostAPI.SyncInformation = {isSyncActive: false};
@@ -72,13 +75,13 @@ export class SyncSection extends HTMLElement {
     this.#syncSetting?.setDisabled(checkboxDisabled);
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <fieldset>
         <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
         ${renderAccountInfoOrWarning(this.#syncInfo)}
-        <${Settings.SettingCheckbox.SettingCheckbox.litTagName} .data=${
-            {setting: this.#syncSetting} as Settings.SettingCheckbox.SettingCheckboxData}>
-        </${Settings.SettingCheckbox.SettingCheckbox.litTagName}>
+        <setting-checkbox .data=${
+            {setting: this.#syncSetting}}>
+        </setting-checkbox>
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -90,28 +93,28 @@ export class SyncSection extends HTMLElement {
 
 function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
   if (!syncInfo.isSyncActive) {
-    const link = 'chrome://settings/syncSetup';
+    const link = 'chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <span class="warning">
         ${i18nString(UIStrings.syncDisabled)}
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
       </span>`;
     // clang-format on
   }
   if (!syncInfo.arePreferencesSynced) {
-    const link = 'chrome://settings/syncSetup/advanced';
+    const link = 'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <span class="warning">
         ${i18nString(UIStrings.preferencesSyncDisabled)}
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${i18nString(UIStrings.settings)}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
       </span>`;
     // clang-format on
   }
-  return LitHtml.html`
+  return html`
     <div class="account-info">
       <img src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
       <div class="account-email">

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as EmulationModel from '../../../models/emulation/emulation.js';
 import type * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as Cards from '../../../ui/components/cards/cards.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -13,9 +14,13 @@ import devicesSettingsTabStyles from './devicesSettingsTab.css.js';
 
 const UIStrings = {
   /**
-   *@description Title for a section of the UI that shows all of the devices the user can emulate, in the Device Toolbar.
+   * @description Title for a section of the UI that shows all of the custom devices the user can emulate, in the Device Toolbar.
    */
-  emulatedDevices: 'Emulated Devices',
+  customDevices: 'Custom devices',
+  /**
+   * @description Title for a section of the UI that shows all of the default devices the user can emulate, in the Device Toolbar.
+   */
+  defaultDevices: 'Default devices',
   /**
    *@description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
    */
@@ -72,7 +77,8 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
   containerElement: HTMLElement;
   private readonly addCustomButton: Buttons.Button.Button;
   private readonly ariaSuccessMessageElement: HTMLElement;
-  private readonly list: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>;
+  readonly #customDeviceList: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>;
+  readonly #defaultDeviceList: UI.ListWidget.ListWidget<EmulationModel.EmulatedDevices.EmulatedDevice>;
   private muteUpdate: boolean;
   private emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private editor?: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>;
@@ -82,25 +88,12 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('devices')}`);
 
-    this.element.classList.add('settings-tab-container');
-    this.element.classList.add('devices-settings-tab');
-
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), i18nString(UIStrings.emulatedDevices));
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
-
-    const buttonsRow = this.containerElement.createChild('div', 'devices-button-row');
-    this.addCustomButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addCustomDevice), this.addCustomDevice.bind(this), {jslogContext: 'add-custom-device'});
-    this.addCustomButton.id = 'custom-device-add-button';
-    buttonsRow.appendChild(this.addCustomButton);
-    this.ariaSuccessMessageElement = this.containerElement.createChild('div', 'device-success-message');
-    UI.ARIAUtils.markAsPoliteLiveRegion(this.ariaSuccessMessageElement, false);
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    this.containerElement.classList.add('settings-card-container', 'ignore-list-settings');
 
-    this.list = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
-    this.list.element.classList.add('devices-list');
-    this.list.show(this.containerElement);
+    this.#defaultDeviceList = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
+    this.#defaultDeviceList.element.classList.add('devices-list', 'device-card-content');
 
     this.muteUpdate = false;
     this.emulatedDevicesList = EmulationModel.EmulatedDevices.EmulatedDevicesList.instance();
@@ -109,14 +102,44 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     this.emulatedDevicesList.addEventListener(
         EmulationModel.EmulatedDevices.Events.STANDARD_DEVICES_UPDATED, this.devicesUpdated, this);
 
-    this.setDefaultFocusedElement(this.addCustomButton);
+    this.ariaSuccessMessageElement = this.contentElement.createChild('div', 'device-success-message');
+    UI.ARIAUtils.markAsPoliteLiveRegion(this.ariaSuccessMessageElement, false);
+
+    this.addCustomButton = UI.UIUtils.createTextButton(
+        i18nString(UIStrings.addCustomDevice), this.addCustomDevice.bind(this), {jslogContext: 'add-custom-device'});
+    this.addCustomButton.id = 'custom-device-add-button';
+
+    const customSettings = document.createElement('div');
+    customSettings.classList.add('device-card-content');
+    customSettings.appendChild(this.ariaSuccessMessageElement);
+    const deviceList = customSettings.createChild('div');
+    customSettings.appendChild(this.addCustomButton);
+
+    const customDevicesCard = new Cards.Card.Card();
+    customDevicesCard.data = {
+      heading: i18nString(UIStrings.customDevices),
+      content: [customSettings],
+    };
+    this.containerElement.appendChild(customDevicesCard);
+
+    this.#customDeviceList = new UI.ListWidget.ListWidget(this, false /* delegatesFocus */);
+    this.#customDeviceList.element.classList.add('devices-list');
+    this.#customDeviceList.show(deviceList);
+
+    const defaultDevicesCard = new Cards.Card.Card();
+    defaultDevicesCard.data = {
+      heading: i18nString(UIStrings.defaultDevices),
+      content: [this.#defaultDeviceList.element],
+    };
+    this.containerElement.appendChild(defaultDevicesCard);
   }
 
   override wasShown(): void {
     super.wasShown();
     this.devicesUpdated();
     this.registerCSSFiles([devicesSettingsTabStyles]);
-    this.list.registerCSSFiles([devicesSettingsTabStyles]);
+    this.#defaultDeviceList.registerCSSFiles([devicesSettingsTabStyles]);
+    this.#customDeviceList.registerCSSFiles([devicesSettingsTabStyles]);
   }
 
   private devicesUpdated(): void {
@@ -124,19 +147,18 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
       return;
     }
 
-    this.list.clear();
+    this.#defaultDeviceList.clear();
+    this.#customDeviceList.clear();
 
     let devices = this.emulatedDevicesList.custom().slice();
     for (let i = 0; i < devices.length; ++i) {
-      this.list.appendItem(devices[i], true);
+      this.#customDeviceList.appendItem(devices[i], true);
     }
 
-    this.list.appendSeparator();
-
     devices = this.emulatedDevicesList.standard().slice();
     devices.sort(EmulationModel.EmulatedDevices.EmulatedDevice.deviceComparator);
     for (let i = 0; i < devices.length; ++i) {
-      this.list.appendItem(devices[i], false);
+      this.#defaultDeviceList.appendItem(devices[i], false);
     }
   }
 
@@ -157,7 +179,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     device.horizontal.height = 400;
     device.vertical.width = 400;
     device.vertical.height = 700;
-    this.list.addNewItem(this.emulatedDevicesList.custom().length, device);
+    this.#customDeviceList.addNewItem(this.emulatedDevicesList.custom().length, device);
   }
 
   private toNumericInputValue(value: number): string {

package/front_end/panels/settings/emulation/components/UserAgentClientHintsForm.ts

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/legacy/legacy.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../../ui/components/input/input.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -15,6 +16,8 @@ import * as EmulationUtils from '../utils/utils.js';
 
 import userAgentClientHintsFormStyles from './userAgentClientHintsForm.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title for user agent client hints form
@@ -201,7 +204,6 @@ const DEFAULT_METADATA = {
  * and network conditions panel. It is customizable through showMobileCheckbox and showSubmitButton.
  */
 export class UserAgentClientHintsForm extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-user-agent-client-hints-form`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #isFormOpened: boolean = false;
@@ -446,7 +448,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).value;
       this.#handleInputChange(stateKey, value);
     };
-    return LitHtml.html`
+    return html`
       <label class="full-row label input-field-label-container">
         ${label}
         <input
@@ -472,7 +474,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).value;
       this.#handleInputChange('platformVersion', value);
     };
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.platformLabel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.platformProperties)} role="group">
         <input
@@ -511,7 +513,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
       const value = (event.target as HTMLInputElement).checked;
       this.#handleInputChange('mobile', value);
     };
-    const mobileCheckboxInput = this.#showMobileCheckbox ? LitHtml.html`
+    const mobileCheckboxInput = this.#showMobileCheckbox ? html`
       <label class="mobile-checkbox-container">
         <input type="checkbox" @input=${handleMobileChange} .checked=${mobile}
           jslog=${VisualLogging.toggle('mobile').track({
@@ -521,8 +523,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
         ${i18nString(UIStrings.mobileCheckboxLabel)}
       </label>
     ` :
-                                                           LitHtml.html``;
-    return LitHtml.html`
+                                                           html``;
+    return html`
       <span class="full-row label">${i18nString(UIStrings.deviceModel)}</span>
       <div class="full-row brand-row" aria-label=${i18nString(UIStrings.deviceProperties)} role="group">
         <input
@@ -569,7 +571,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         const value = (event.target as HTMLInputElement).value;
         this.#handleUseragentInputChange(value, index, 'brandVersion');
       };
-      return LitHtml.html`
+      return html`
         <div class="full-row brand-row" aria-label=${i18nString(UIStrings.brandProperties)} role="group">
           <input
             class="input-field ua-brand-name-input"
@@ -598,9 +600,12 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <${IconButton.Icon.Icon.litTagName}
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+          <devtools-icon
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandUserAgentDelete)}
             class="delete-icon"
             tabindex="0"
@@ -609,11 +614,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
             @keypress=${handleKeyPress}
             aria-label=${i18nString(UIStrings.brandUserAgentDelete)}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </div>
       `;
     });
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.useragent)}</span>
       ${brandElements}
       <div
@@ -625,11 +630,15 @@ export class UserAgentClientHintsForm extends HTMLElement {
         @click=${this.#handleAddUseragentBrandClick}
         @keypress=${this.#handleAddUseragentBrandKeyPress}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           aria-hidden="true"
-          .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
+          .data=${{
+    color:
+      'var(--icon-default)', iconName: 'plus', width: '16px',
+    }
+    }
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
       </div>
     `;
@@ -664,7 +673,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
         const value = (event.target as HTMLInputElement).value;
         this.#handleFullVersionListInputChange(value, index, 'brandVersion');
       };
-      return LitHtml.html`
+      return html`
         <div
           class="full-row brand-row"
           aria-label=${i18nString(UIStrings.brandProperties)}
@@ -697,9 +706,12 @@ export class UserAgentClientHintsForm extends HTMLElement {
         change: true,
       })}
           />
-          <${IconButton.Icon.Icon.litTagName}
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+          <devtools-icon
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
             class="delete-icon"
             tabindex="0"
@@ -708,11 +720,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
             @keypress=${handleKeyPress}
             aria-label=${i18nString(UIStrings.brandFullVersionListDelete)}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
         </div>
       `;
     });
-    return LitHtml.html`
+    return html`
       <span class="full-row label">${i18nString(UIStrings.fullVersionList)}</span>
       ${elements}
       <div
@@ -724,11 +736,15 @@ export class UserAgentClientHintsForm extends HTMLElement {
         @click=${this.#handleAddFullVersionListBrandClick}
         @keypress=${this.#handleAddFullVersionListBrandKeyPress}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           aria-hidden="true"
-          .data=${{color: 'var(--icon-default)', iconName: 'plus', width: '16px'} as IconButton.Icon.IconData}
+          .data=${{
+    color:
+      'var(--icon-default)', iconName: 'plus', width: '16px',
+    }
+    }
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
       </div>
     `;
@@ -747,52 +763,51 @@ export class UserAgentClientHintsForm extends HTMLElement {
         'architecture');
     const deviceModelSection = this.#renderDeviceModelSection();
     // clang-format off
-    const submitButton = this.#showSubmitButton ? LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+    const submitButton = this.#showSubmitButton ? html`
+      <devtools-button
         .variant=${Buttons.Button.Variant.OUTLINED}
         .type=${'submit'}
       >
         ${i18nString(UIStrings.update)}
-      </${Buttons.Button.Button.litTagName}>
+      </devtools-button>
     ` : LitHtml.nothing;
     // clang-format on
 
     // clang-format off
-    const output = LitHtml.html`
+    const output = html`
       <section class="root">
         <div
           class="tree-title"
           role="button"
           @click=${this.#handleTreeClick}
-          tabindex="0"
+          tabindex=${this.#isFormDisabled ? '-1' : '0'}
           @keydown=${this.#handleTreeExpand}
           aria-expanded=${this.#isFormOpened}
           aria-controls="form-container"
-          @disabled=${this.#isFormDisabled}
           aria-disabled=${this.#isFormDisabled}
           aria-label=${i18nString(UIStrings.title)}
           jslog=${VisualLogging.toggleSubpane().track({click: true})}
         >
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             class=${this.#isFormOpened ? 'rotate-icon' : ''}
             .data=${{
               color: 'var(--icon-default)',
               iconName: 'triangle-right',
               width: '14px',
-            } as IconButton.Icon.IconData}
-          ></${IconButton.Icon.Icon.litTagName}>
+            }}
+          ></devtools-icon>
           ${i18nString(UIStrings.title)}
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${{
               color: 'var(--icon-default)',
               iconName: 'info',
               width: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             title=${i18nString(UIStrings.userAgentClientHintsInfo)}
-            class='info-icon',
-          ></${IconButton.Icon.Icon.litTagName}>
+            class='info-icon'
+          ></devtools-icon>
           <x-link
-           tabindex="0"
+           tabindex=${this.#isFormDisabled ? '-1' : '0'}
            href="https://web.dev/user-agent-client-hints/"
            target="_blank"
            class="link"
@@ -819,8 +834,8 @@ export class UserAgentClientHintsForm extends HTMLElement {
         <div aria-live="polite" aria-label=${this.#useragentModifiedAriaMessage}></div>
       </section>
     `;
-    // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
+              // clang-format on
+              LitHtml.render(output, this.#shadow, {host: this});
   }
 
   validate = (): UI.ListWidget.ValidatorResult => {