chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

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 = {
   /**
@@ -21,7 +23,7 @@ const UIStrings = {
   /**
    *@description Text appearing before a select control offering users their choice of keyboard shortcut presets.
    */
-  matchShortcutsFromPreset: 'Match shortcuts from preset',
+  matchShortcutsFromPreset: 'Shortcut preset',
   /**
    *@description Screen reader label for list of keyboard shortcuts in settings
    */
@@ -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

@@ -34,6 +34,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -44,6 +45,11 @@ import type {KeybindsSettingsTab} from './KeybindsSettingsTab.js';
 import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
+
+  /**
+   *@description Card header in Experiments settings tab that list all available unstable experiments that can be turned on or off.
+   */
+  unstableExperiments: 'Unstable experiments',
   /**
    *@description Name of the Settings view
    */
@@ -52,31 +58,22 @@ const UIStrings = {
    *@description Text for keyboard shortcuts
    */
   shortcuts: 'Shortcuts',
-  /**
-   *@description Text in Settings Screen of the Settings
-   */
-  preferences: 'Preferences',
   /**
    *@description Text of button in Settings Screen of the Settings
    */
   restoreDefaultsAndReload: 'Restore defaults and reload',
   /**
-   *@description Text in Settings Screen of the Settings
+   *@description Card header in Experiments settings tab that list all available stable experiments that can be turned on or off.
    */
   experiments: 'Experiments',
   /**
    *@description Message shown in the experiments panel to warn users about any possible unstable features.
    */
-  theseExperimentsCouldBeUnstable:
-      'These experiments could be unstable or unreliable and may require you to restart DevTools.',
+  theseExperimentsCouldBeUnstable: 'Warning: These experiments could be unstable or unreliable.',
   /**
    *@description Message text content in Settings Screen of the Settings
    */
-  theseExperimentsAreParticularly: 'These experiments are particularly unstable. Enable at your own risk.',
-  /**
-   *@description Warning text content in Settings Screen of the Settings
-   */
-  warning: 'WARNING:',
+  theseExperimentsAreParticularly: 'Warning: These experiments are particularly unstable. Enable at your own risk.',
   /**
    *@description Message to display if a setting change requires a reload of DevTools
    */
@@ -89,7 +86,7 @@ const UIStrings = {
    * @description Warning text shown when the user has entered text to filter the
    * list of experiments, but no experiments match the filter.
    */
-  noResults: 'No experiments match the filter',
+  noResults: 'Warning: No experiments match the filter',
   /**
    *@description Text that is usually a hyperlink to more documentation
    */
@@ -104,6 +101,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let settingsScreenInstance: SettingsScreen;
 
+function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Cards.Card.Card {
+  const card = new Cards.Card.Card();
+  card.data = {heading, content};
+  return card;
+}
+
 export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocationResolver {
   private readonly tabbedLocation: UI.View.TabbedViewLocation;
   private keybindsTab?: KeybindsSettingsTab;
@@ -240,28 +243,14 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
 abstract class SettingsTab extends UI.Widget.VBox {
   containerElement: HTMLElement;
-  constructor(name: string, id?: string) {
+  constructor(id?: string) {
     super();
     this.element.classList.add('settings-tab-container');
     if (id) {
       this.element.id = id;
     }
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), name);
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
-  }
-
-  protected appendSection(name?: string): HTMLElement {
-    const block = this.containerElement.createChild('div', 'settings-block');
-    if (name) {
-      UI.ARIAUtils.markAsGroup(block);
-      const title = block.createChild('div', 'settings-section-title');
-      title.textContent = name;
-      UI.ARIAUtils.markAsHeading(title, 2);
-      UI.ARIAUtils.setLabel(block, name);
-    }
-    return block;
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
   }
 
   abstract highlightObject(_object: Object): void;
@@ -272,9 +261,10 @@ export class GenericSettingsTab extends SettingsTab {
   private readonly settingToControl = new Map<Common.Settings.Setting<unknown>, HTMLElement>();
 
   constructor() {
-    super(i18nString(UIStrings.preferences), 'preferences-tab-content');
+    super('preferences-tab-content');
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('preferences')}`);
+    this.containerElement.classList.add('settings-multicolumn-card-container');
 
     // GRID, MOBILE, EMULATION, and RENDERING are intentionally excluded from this list.
     const explicitSectionOrder: Common.Settings.SettingCategory[] = [
@@ -318,7 +308,7 @@ export class GenericSettingsTab extends SettingsTab {
     const restoreAndReloadButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.restoreDefaultsAndReload), restoreAndReload,
         {jslogContext: 'settings.restore-defaults-and-reload'});
-    this.appendSection().appendChild(restoreAndReloadButton);
+    this.containerElement.appendChild(restoreAndReloadButton);
 
     function restoreAndReload(): void {
       Common.Settings.Settings.instance().clearAll();
@@ -355,8 +345,7 @@ export class GenericSettingsTab extends SettingsTab {
     const settingUI = Components.Linkifier.LinkHandlerSettingUI.instance() as UI.SettingsUI.SettingUI;
     const element = settingUI.settingElement();
     if (element) {
-      const sectionElement = this.createStandardSectionElement(sectionName, settings);
-      sectionElement.appendChild(element);
+      this.createStandardSectionElement(sectionName, settings, element);
     }
   }
 
@@ -366,16 +355,20 @@ export class GenericSettingsTab extends SettingsTab {
     if (category === Common.Settings.SettingCategory.EXTENSIONS) {
       this.createExtensionSection(settings);
     } else if (category === Common.Settings.SettingCategory.SYNC && settings.length > 0) {
-      this.containerElement.appendChild(this.syncSection);
+      const syncCard = createSettingsCard(
+          Common.SettingRegistration.getLocalizedSettingsCategory(Common.SettingRegistration.SettingCategory.SYNC),
+          this.syncSection);
+      this.containerElement.appendChild(syncCard);
     } else if (settings.length > 0) {
       this.createStandardSectionElement(category, settings);
     }
   }
 
   private createStandardSectionElement(
-      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[]): Element {
+      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[],
+      content?: Element): void {
     const uiSectionName = Common.Settings.getLocalizedSettingsCategory(category);
-    const sectionElement = this.appendSection(uiSectionName);
+    const sectionElement = document.createElement('div');
     for (const settingRegistration of settings) {
       const setting = Common.Settings.Settings.instance().moduleSetting(settingRegistration.settingName);
       const settingControl = UI.SettingsUI.createControlForSetting(setting);
@@ -384,7 +377,11 @@ export class GenericSettingsTab extends SettingsTab {
         sectionElement.appendChild(settingControl);
       }
     }
-    return sectionElement;
+    if (content) {
+      sectionElement.appendChild(content);
+    }
+    const card = createSettingsCard(uiSectionName, sectionElement);
+    this.containerElement.appendChild(card);
   }
 
   highlightObject(setting: Object): void {
@@ -398,14 +395,16 @@ export class GenericSettingsTab extends SettingsTab {
 }
 
 export class ExperimentsSettingsTab extends SettingsTab {
-  #experimentsSection: HTMLElement|undefined;
-  #unstableExperimentsSection: HTMLElement|undefined;
+  #experimentsSection: Cards.Card.Card|undefined;
+  #unstableExperimentsSection: Cards.Card.Card|undefined;
   #inputElement: HTMLInputElement;
   private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
 
   constructor() {
-    super(i18nString(UIStrings.experiments), 'experiments-tab-content');
-    const filterSection = this.appendSection();
+    super('experiments-tab-content');
+    this.containerElement.classList.add('settings-card-container');
+
+    const filterSection = this.containerElement.createChild('div');
     filterSection.classList.add('experiments-filter');
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('experiments')}`);
@@ -434,36 +433,42 @@ export class ExperimentsSettingsTab extends SettingsTab {
     const unstableExperiments = experiments.filter(e => e.unstable && e.title.toLowerCase().includes(filterText));
     const stableExperiments = experiments.filter(e => !e.unstable && e.title.toLowerCase().includes(filterText));
     if (stableExperiments.length) {
-      this.#experimentsSection = this.appendSection();
+      const experimentsBlock = document.createElement('div');
+      experimentsBlock.classList.add('settings-experiments-block');
       const warningMessage = i18nString(UIStrings.theseExperimentsCouldBeUnstable);
-      this.#experimentsSection.appendChild(this.createExperimentsWarningSubsection(warningMessage));
+      const warningSection = this.createExperimentsWarningSubsection(warningMessage);
       for (const experiment of stableExperiments) {
-        this.#experimentsSection.appendChild(this.createExperimentCheckbox(experiment));
+        experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
       }
+      this.#experimentsSection =
+          createSettingsCard(i18nString(UIStrings.experiments), warningSection, experimentsBlock);
+      this.containerElement.appendChild(this.#experimentsSection);
     }
     if (unstableExperiments.length) {
-      this.#unstableExperimentsSection = this.appendSection();
+      const experimentsBlock = document.createElement('div');
+      experimentsBlock.classList.add('settings-experiments-block');
       const warningMessage = i18nString(UIStrings.theseExperimentsAreParticularly);
-      this.#unstableExperimentsSection.appendChild(this.createExperimentsWarningSubsection(warningMessage));
       for (const experiment of unstableExperiments) {
-        this.#unstableExperimentsSection.appendChild(this.createExperimentCheckbox(experiment));
+        experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
       }
+      this.#unstableExperimentsSection = createSettingsCard(
+          i18nString(UIStrings.unstableExperiments), this.createExperimentsWarningSubsection(warningMessage),
+          experimentsBlock);
+      this.containerElement.appendChild(this.#unstableExperimentsSection);
     }
     if (!stableExperiments.length && !unstableExperiments.length) {
-      this.#experimentsSection = this.appendSection();
-      const warning = this.#experimentsSection.createChild('span');
+      const warning = document.createElement('span');
       warning.textContent = i18nString(UIStrings.noResults);
       UI.ARIAUtils.alert(warning.textContent);
+      this.#experimentsSection = createSettingsCard(i18nString(UIStrings.experiments), warning);
+      this.containerElement.appendChild(this.#experimentsSection);
     }
   }
 
-  private createExperimentsWarningSubsection(warningMessage: string): Element {
+  private createExperimentsWarningSubsection(warningMessage: string): HTMLElement {
     const subsection = document.createElement('div');
-    const warning = subsection.createChild('span', 'settings-experiments-warning-subsection-warning');
-    warning.textContent = i18nString(UIStrings.warning);
-    UI.UIUtils.createTextChild(subsection, ' ');
-    const message = subsection.createChild('span', 'settings-experiments-warning-subsection-message');
-    message.textContent = warningMessage;
+    const warning = subsection.createChild('span');
+    warning.textContent = warningMessage;
     return subsection;
   }
 
@@ -496,10 +501,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

@@ -8,13 +8,6 @@
   box-sizing: border-box;
 }
 
-header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  white-space: nowrap;
-}
-
 .shared-disclaimer {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-5);
@@ -45,7 +38,7 @@ header > h1 {
   display: grid;
   grid-template-columns: 1fr auto auto;
   border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level3); /* stylelint-disable-line plugin/use_theme_colors */
+  box-shadow: var(--sys-elevation-level2);
   margin: var(--sys-size-11) 0 var(--sys-size-4);
   line-height: var(--sys-typescale-body5-line-height);
   min-width: var(--sys-size-28);
@@ -154,13 +147,9 @@ header > h1 {
 
 .settings-container-wrapper {
   position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: var(--sys-size-8) 0 0;
   overflow: auto;
-  padding: var(--sys-size-6);
-  border-top: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
   display: flex;
   flex-direction: column;
 }
@@ -175,3 +164,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

@@ -5,12 +5,11 @@
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/settings/settings.js';
 
-import * as Common from '../../../core/common/common.js';
+import type * as Common from '../../../core/common/common.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 type * as Settings from '../../../ui/components/settings/settings.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import syncSectionStyles from './syncSection.css.js';
@@ -48,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};
@@ -79,10 +77,9 @@ export class SyncSection extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
       <fieldset>
-        <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
         ${renderAccountInfoOrWarning(this.#syncInfo)}
         <setting-checkbox .data=${
-            {setting: this.#syncSetting} as Settings.SettingCheckbox.SettingCheckboxData}>
+            {setting: this.#syncSetting}}>
         </setting-checkbox>
       </fieldset>
     `, this.#shadow, {host: this});

package/front_end/panels/settings/components/syncSection.css

@@ -13,18 +13,9 @@
 
 fieldset {
   border: 0;
-  margin-left: 20px;
   padding: 0;
 }
 
-legend {
-  color: var(--sys-color-token-subtle);
-  font-size: 120%;
-  margin-left: -20px;
-  padding: 0;
-  text-align: left;
-}
-
 .link {
   color: var(--sys-color-primary);
   text-decoration: underline;
@@ -42,7 +33,6 @@ img {
 
 .warning {
   display: block;
-  margin-top: 12px;
 }
 
 .account-info {

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 {