[GM3Restyling] Update Devices settings page

Before: https://i.imgur.com/etuzuGK.png
After: https://i.imgur.com/8wq6uTt.png
Bug: 368238837
Change-Id: Ia64dab4ccc03a2b3bb36b312d1f195fee437f6da
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5946824
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/settings/emulation/BUILD.gn

@@ -16,6 +16,7 @@ devtools_module("emulation") {
 
   deps = [
     "../../../core/i18n:bundle",
+    "../../../ui/components/cards:bundle",
     "../../../ui/legacy:bundle",
     "../../emulation:bundle",
     "./components:bundle",

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,34 +102,63 @@ 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 {
     if (this.muteUpdate) {
       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 {

front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -4,16 +4,17 @@
  * found in the LICENSE file.
  */
 
-.devices-settings-tab .settings-container-wrapper {
-  padding-top: 5px;
+.device-card-content {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.devices-settings-tab .settings-tab.settings-content {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  height: 100%;
-  margin: 0;
+.list {
+  border: none;
+}
+
+#custom-device-add-button {
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
 .devices-settings-tab .devices-button-row {
@@ -31,8 +32,8 @@
 }
 
 .devices-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  padding: var(--sys-size-3) var(--sys-size-7);
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;