chrome-devtools-frontend 1.0.1367881 → 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

@@ -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

@@ -10,7 +10,6 @@ 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};
@@ -82,7 +80,7 @@ export class SyncSection extends HTMLElement {
         <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/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

@@ -8,7 +8,6 @@ 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 type * 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';
@@ -205,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;
@@ -603,8 +601,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       })}
           />
           <devtools-icon
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandUserAgentDelete)}
             class="delete-icon"
             tabindex="0"
@@ -631,7 +632,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       >
         <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',
+    }
+    }
         >
         </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
@@ -702,8 +707,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       })}
           />
           <devtools-icon
-            .data=${
-          {color: 'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px'} as IconButton.Icon.IconData}
+            .data=${{
+      color:
+        'var(--icon-default)', iconName: 'bin', width: '16px', height: '16px',
+      }
+      }
             title=${i18nString(UIStrings.brandFullVersionListDelete)}
             class="delete-icon"
             tabindex="0"
@@ -730,7 +738,11 @@ export class UserAgentClientHintsForm extends HTMLElement {
       >
         <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',
+    }
+    }
         >
         </devtools-icon>
         ${i18nString(UIStrings.addBrand)}
@@ -782,7 +794,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
               color: 'var(--icon-default)',
               iconName: 'triangle-right',
               width: '14px',
-            } as IconButton.Icon.IconData}
+            }}
           ></devtools-icon>
           ${i18nString(UIStrings.title)}
           <devtools-icon
@@ -790,7 +802,7 @@ export class UserAgentClientHintsForm extends HTMLElement {
               color: 'var(--icon-default)',
               iconName: 'info',
               width: '16px',
-            } as IconButton.Icon.IconData}
+            }}
             title=${i18nString(UIStrings.userAgentClientHintsInfo)}
             class='info-icon'
           ></devtools-icon>
@@ -822,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 => {

package/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-6);
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   flex: auto 1 1;

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -4,62 +4,41 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
-.intro {
-  margin-top: 10px;
-}
-
 .ignore-list-option {
   flex: none;
-  padding: 3px 6px;
-  min-height: 30px;
+  display: flex;
+  align-items: center;
+  height: var(--sys-size-13);
 }
 
 .ignore-list-option devtools-button {
+  cursor: pointer;
   position: relative;
   top: var(--sys-size-2);
   margin-left: var(--sys-size-2);
 }
 
-.ignore-list-option-group {
-  margin-top: 13px;
-  margin-bottom: 3px;
-  margin-left: 8px;
-  flex-shrink: 0;
-}
-
 .add-button {
-  margin: 10px 2px;
+  padding: var(--sys-size-5) var(--sys-size-6);
   align-self: flex-start;
   flex: none;
 }
 
 .ignore-list {
-  max-width: 500px;
   flex: 0 1 auto;
 }
 
-.ignore-list-global-enable {
-  padding: 3px 0;
-  color: var(--sys-color-token-subtle);
-  font-size: 120%;
-  margin-top: 17px;
+.enable-ignore-listing, .ignore-list-item, .general-exclusion-group {
+  padding-left: var(--sys-size-4);
+}
+
+.custom-exclusion-group {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .ignore-list-item {
-  padding: 3px 5px;
-  height: 30px;
+  height: var(--sys-size-13);
   display: flex;
   align-items: center;
   position: relative;
@@ -68,7 +47,6 @@
 
 .ignore-list-pattern {
   flex: auto;
-  min-width: 100px;
 }
 
 .ignore-list-item > [is="dt-checkbox"] {
@@ -97,13 +75,7 @@
   text-align: inherit;
 }
 
-.ignore-list-options {
-  margin-left: 22px;
-  display: flex;
-  flex-direction: column;
-}
-
-.ignore-list-options.ignore-listing-disabled {
+.ignore-listing-disabled .ignore-list-options {
   opacity: 30%;
 }