[GM3Restyling] Update Framework ignore listing settings page

Drive-by: Update padding in cards component

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

Author: ktran

config/gni/devtools_grd_files.gni

@@ -675,6 +675,7 @@ grd_files_release_sources = [
   "front_end/third_party/web-vitals/web-vitals.js",
   "front_end/ui/components/adorners/adorners.js",
   "front_end/ui/components/buttons/buttons.js",
+  "front_end/ui/components/cards/cards.js",
   "front_end/ui/components/chrome_link/chrome_link.js",
   "front_end/ui/components/code_highlighter/code_highlighter.js",
   "front_end/ui/components/data_grid/data_grid.js",
@@ -2133,6 +2134,8 @@ grd_files_debug_sources = [
   "front_end/ui/components/adorners/adorner.css.js",
   "front_end/ui/components/buttons/Button.js",
   "front_end/ui/components/buttons/button.css.legacy.js",
+  "front_end/ui/components/cards/Card.js",
+  "front_end/ui/components/cards/card.css.js",
   "front_end/ui/components/chrome_link/ChromeLink.js",
   "front_end/ui/components/chrome_link/chromeLink.css.js",
   "front_end/ui/components/code_highlighter/CodeHighlighter.js",

front_end/panels/settings/BUILD.gn

@@ -30,6 +30,7 @@ devtools_module("settings") {
     "../../core/host:bundle",
     "../../core/i18n:bundle",
     "../../core/root:bundle",
+    "../../ui/components/cards:bundle",
     "../../ui/components/icon_button:bundle",
     "../../ui/components/legacy_wrapper:bundle",
     "../../ui/components/switch:bundle",

front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -7,21 +7,23 @@ import * 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 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';
 
 import frameworkIgnoreListSettingsTabStyles from './frameworkIgnoreListSettingsTab.css.js';
+import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
   /**
-   *@description Header text content in Framework Ignore List Settings Tab of the Settings
+   *@description Header text content in Framework Ignore List Settings Tab of the Settings for enabling or disabling ignore listing
    */
-  frameworkIgnoreList: 'Framework ignore list',
+  frameworkIgnoreList: 'Ignore listing',
   /**
-   *@description Text in Framework Ignore List Settings Tab of the Settings
+   *@description Checkbox label in Framework Ignore List Settings Tab of the Settings
    */
-  debuggerWillSkipThroughThe:
-      'Debugger won\'t step through these scripts or break on exceptions that only affect them and Performance panel will collapse flamechart items that match.',
+  ignoreListingDescription:
+      'If enabled, DevTools’ debugger will skip over ignore-listed scripts and won’t stop on exceptions thrown by them',
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
@@ -45,11 +47,11 @@ const UIStrings = {
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
-  generalExclusionRules: 'General exclusion rules:',
+  generalExclusionRules: 'General exclusion rules',
   /**
    *@description Text in Framework Ignore List Settings Tab of the Settings
    */
-  customExclusionRules: 'Custom exclusion rules:',
+  customExclusionRules: 'Custom exclusion rules',
   /**
    *@description Text of the add pattern button in Framework Ignore List Settings Tab of the Settings
    */
@@ -96,27 +98,29 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
   constructor() {
     super(true);
-
     this.element.setAttribute('jslog', `${VisualLogging.pane('blackbox')}`);
 
-    const header = this.contentElement.createChild('div', 'header');
-    header.textContent = i18nString(UIStrings.frameworkIgnoreList);
-    UI.ARIAUtils.markAsHeading(header, 1);
-
-    this.contentElement.createChild('div', 'intro').textContent = i18nString(UIStrings.debuggerWillSkipThroughThe);
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container', 'ignore-list-settings');
 
+    const ignoreListingDescription = document.createElement('span');
+    ignoreListingDescription.textContent = i18nString(UIStrings.ignoreListingDescription);
     const enabledSetting =
         Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing') as Common.Settings.Setting<boolean>;
-    const enableIgnoreListing = this.contentElement.createChild('div', 'ignore-list-global-enable');
+    const enableIgnoreListing = this.contentElement.createChild('div');
     enableIgnoreListing.appendChild(
         UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting, true));
     UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
 
-    const ignoreListOptions = this.contentElement.createChild('div', 'ignore-list-options');
-
-    const generalExclusionGroup = this.createSettingGroup(i18nString(UIStrings.generalExclusionRules));
-    ignoreListOptions.appendChild(generalExclusionGroup);
+    const enableIgnoreListingCard = new Cards.Card.Card();
+    enableIgnoreListingCard.data = {
+      heading: i18nString(UIStrings.frameworkIgnoreList),
+      content: [ignoreListingDescription, enableIgnoreListing],
+    };
+    settingsContent.appendChild(enableIgnoreListingCard);
 
+    const generalExclusionGroup = this.createSettingGroup();
     const ignoreListContentScripts = generalExclusionGroup.createChild('div', 'ignore-list-option');
     ignoreListContentScripts.appendChild(UI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.ignoreListContentScripts),
@@ -147,8 +151,22 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
         i18nString(UIStrings.ignoreListAnonymousScripts),
         Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts'), true));
 
-    const customExclusionGroup = this.createSettingGroup(i18nString(UIStrings.customExclusionRules));
-    ignoreListOptions.appendChild(customExclusionGroup);
+    const generalExclusionGroupCard = new Cards.Card.Card();
+    generalExclusionGroupCard.data = {
+      heading: i18nString(UIStrings.generalExclusionRules),
+      content: [generalExclusionGroup],
+    };
+    generalExclusionGroupCard.classList.add('ignore-list-options');
+    settingsContent.appendChild(generalExclusionGroupCard);
+
+    const customExclusionGroup = this.createSettingGroup();
+    const customExclusionGroupCard = new Cards.Card.Card();
+    customExclusionGroupCard.classList.add('ignore-list-options');
+    customExclusionGroupCard.data = {
+      heading: i18nString(UIStrings.customExclusionRules),
+      content: [customExclusionGroup],
+    };
+    settingsContent.appendChild(customExclusionGroupCard);
 
     this.list = new UI.ListWidget.ListWidget(this);
     this.list.element.classList.add('ignore-list');
@@ -174,17 +192,17 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     function enabledChanged(): void {
       const enabled = enabledSetting.get();
       if (enabled) {
-        ignoreListOptions.classList.remove('ignore-listing-disabled');
+        settingsContent.classList.remove('ignore-listing-disabled');
       } else {
-        ignoreListOptions.classList.add('ignore-listing-disabled');
+        settingsContent.classList.add('ignore-listing-disabled');
       }
     }
   }
 
   override wasShown(): void {
     super.wasShown();
     this.list.registerCSSFiles([frameworkIgnoreListSettingsTabStyles]);
-    this.registerCSSFiles([frameworkIgnoreListSettingsTabStyles]);
+    this.registerCSSFiles([frameworkIgnoreListSettingsTabStyles, settingsScreenStyles]);
     this.settingUpdated();
   }
 
@@ -200,14 +218,10 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     this.list.addNewItem(this.setting.getAsArray().length, {pattern: '', disabled: false});
   }
 
-  private createSettingGroup(title: string): Element {
+  private createSettingGroup(): HTMLElement {
     const group = document.createElement('div');
     group.classList.add('ignore-list-option-group');
     UI.ARIAUtils.markAsGroup(group);
-    const groupTitle = group.createChild('div', 'ignore-list-option-group-title');
-    UI.ARIAUtils.markAsHeading(groupTitle, 2);
-    UI.ARIAUtils.setLabel(group, title);
-    groupTitle.textContent = title;
     return group;
   }
 

front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -4,26 +4,8 @@
  * 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;
 }
 
 .ignore-list-option devtools-button {
@@ -32,31 +14,16 @@
   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;
   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;
-}
-
 .ignore-list-item {
   padding: 3px 5px;
   height: 30px;
@@ -68,7 +35,6 @@
 
 .ignore-list-pattern {
   flex: auto;
-  min-width: 100px;
 }
 
 .ignore-list-item > [is="dt-checkbox"] {
@@ -97,13 +63,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%;
 }
 

front_end/panels/settings/settingsScreen.css

@@ -144,6 +144,30 @@ label {
   border-top: 1px solid var(--sys-color-divider);
 }
 
+.settings-card-container-wrapper {
+  padding-top: var(--sys-size-8);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+@media (max-width: 1000px) {
+  .settings-card-container-wrapper {
+    position: absolute;
+    top: var(--sys-size-8);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: auto;
+  }
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-11);
+}
+
 .settings-tab.settings-content {
   margin: 0;
   padding: 0;

front_end/ui/components/cards/Card.ts

@@ -44,7 +44,7 @@ export class Card extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
     <div class="card">
-      <div role="heading" class="heading">${this.#heading}</div>
+      <div role="heading" aria-level="2" class="heading">${this.#heading}</div>
       <slot name="content" class='content-container'></slot>
     </div>
     `, this.#shadow, {

front_end/ui/components/cards/card.css

@@ -3,10 +3,15 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
+:host {
+  max-width: var(--sys-size-37);
+  width: 100%;
+}
 
 .card {
-  margin: var(--sys-size-9);
-  width: auto;
+  min-width: var(--sys-size-31);
+  max-width: var(--sys-size-37);
+  margin: var(--sys-size-3);
 }
 
 .heading {

front_end/ui/legacy/tabbedPane.css

@@ -241,7 +241,7 @@
 }
 
 .tabbed-pane-shadow.vertical-tab-layout .tabbed-pane-content {
-  padding: var(--sys-size-10);
+  padding-top: var(--sys-size-10);
   overflow-x: hidden;
 }
 

test/e2e/helpers/settings-helpers.ts

@@ -86,8 +86,8 @@ export const setIgnoreListPattern = async (pattern: string) => {
 
 export const toggleIgnoreListing = async (enable: boolean) => {
   await openSettingsTab('Ignore list');
-  const enabledPattern = '.ignore-list-options:not(.ignore-listing-disabled)';
-  const disabledPattern = '.ignore-list-options.ignore-listing-disabled';
+  const enabledPattern = '.ignore-list-settings:not(.ignore-listing-disabled)';
+  const disabledPattern = '.ignore-list-settings.ignore-listing-disabled';
   await waitFor(enable ? disabledPattern : enabledPattern);
   await click('[title="Enable ignore listing"]');
   await waitFor(enable ? enabledPattern : disabledPattern);