[GM3Restyling] Use card components for shortcut settings page

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

Author: ktran

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]);
   }
 }
 

front_end/panels/settings/keybindsSettingsTab.css

@@ -4,26 +4,9 @@
  * found in the LICENSE file.
  */
 
-header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  flex: none;
-  margin-bottom: 16px;
-}
-
-h1 {
-  font-size: 18px;
-  font-weight: normal;
-  padding-bottom: 3px;
-  margin: 0;
-}
-
-[role="list"] {
-  overflow: auto;
-
-  > * {
-    min-width: 300px;
-  }
+.shortcut-list {
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .keybinds-key {
@@ -42,32 +25,26 @@ h1 {
 }
 
 .keybinds-list-item {
-  min-height: 30px;
+  margin: 0 var(--sys-size-7);
+  padding: var(--sys-size-4) 0;
   display: grid;
-  grid-template-rows: repeat(auto-fit, minmax(30px, auto));
+  grid-template-rows: 1fr ;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  flex: auto 1 1;
-}
-
-.keybinds-list-item:focus-visible {
-  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item:not(.keybinds-category-header) {
-  padding: 4px 0 4px 20px;
-  border-radius: 7px;
+  border-top: 1px solid var(--sys-color-divider);
 }
 
-.keybinds-list-item:not(.keybinds-category-header):last-child {
-  margin-bottom: 5px;
+.keybinds-list-item:focus-visible {
+  background-color: var(--sys-color-tonal-container);
 }
 
 .keybinds-list-item.keybinds-editing {
   background-color: var(--sys-color-neutral-container);
 }
 
 .keybinds-list-text.keybinds-action-name {
-  padding-top: 7px;
   grid-row: 1 / 3;
 }
 
@@ -77,19 +54,6 @@ h1 {
   grid-column: 3 / span 1;
 }
 
-.keybinds-shortcut.devtools-link {
-  align-items: center;
-  margin-left: 3px;
-}
-
-.keybinds-shortcut .devtools-link {
-  padding: 4px 0;
-}
-
-.keybinds-info .devtools-link {
-  padding-top: 6px;
-}
-
 .keybinds-error {
   color: var(--sys-color-error);
 }
@@ -100,21 +64,7 @@ h1 {
 
 .keybinds-modified {
   grid-column: 2 / span 1;
-  margin-top: 2px;
-}
-
-.keybinds-list-item button {
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-
-.keybinds-list-item button:hover devtools-icon {
-  color: var(--icon-default-hover);
-}
-
-.keybinds-list-item button:focus-visible {
-  background-color: var(--sys-color-tonal-container);
+  margin-top: var(--sys-size-3);
 }
 
 .keybinds-list-item button[disabled] {
@@ -128,7 +78,7 @@ h1 {
 .keybinds-edit-button {
   display: none;
   grid-row: 1 / span 1;
-  grid-column: 4 / span 1;
+  grid-column: 5 / span 1;
 }
 
 .keybinds-list-item:not(.keybinds-editing):hover .keybinds-edit-button,
@@ -137,7 +87,9 @@ h1 {
 }
 
 .keybinds-list-text {
-  padding: 3px 0;
+  min-height: var(--sys-size-12);
+  display: flex;
+  align-items: center;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: start;
@@ -146,35 +98,28 @@ h1 {
 }
 
 .keybinds-category-header {
-  font-weight: bold;
-  line-height: 30px;
+  display: flex;
+  align-items: center;
+  font: var(--sys-typescale-body4-bold);
+  height: var(--sys-size-13);
+  padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
 }
 
-.keybinds-category-header:not(:nth-child(2)) {
-  border-top: 1px solid var(--sys-color-divider);
+.keybinds-header-wrapper + .keybinds-list-item-wrapper > .keybinds-list-item {
+  border: none;
 }
 
-.keybinds-list-item:not(.keybinds-category-header):hover,
-.keybinds-list-item:not(.keybinds-editing):focus-within {
+.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 
-.keybinds-set-select {
-  text-align: right;
-  margin-bottom: 16px;
-}
-
 .keybinds-set-select label p {
   display: inline;
   color: var(--sys-color-on-surface);
 }
 
-.keybinds-set-select select {
-  margin-left: 6px;
-  margin-top: 6px;
-}
-
 button.text-button {
   width: fit-content;
   align-self: flex-end;
@@ -184,6 +129,20 @@ button.text-button {
   margin: 0 2px;
 }
 
+.keybinds-set-select {
+  margin: 0;
+  padding: var(--sys-size-5) var(--sys-size-7);
+
+  & .settings-select {
+    display: flex;
+    justify-content: space-between;
+
+    & label {
+      padding: 0;
+    }
+  }
+}
+
 .keybinds-list-text:has(.keybinds-delete-button) {
   grid-column: 3 / -1;
 }
@@ -196,6 +155,7 @@ button.text-button {
 }
 
 .keybinds-footer {
+  padding: var(--sys-size-5) var(--sys-size-7);
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;