Adjust card settings margins and paddings

This CL makes two main changes:
1. Unify paddings from different settings pages
2. Increase margins to not crop shadows in narrow view

Drive-by: Slotted elements into contents need to come first since
we rely on a first-child selector, and correctly include the
icon button in Cards.

Fixed: 376194355
Change-Id: I064c84be94c7406d15831122a1cf5fbfe21e0ed2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5979930
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -108,7 +108,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     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');
+    const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
     enableIgnoreListing.appendChild(
         UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting, true));
     UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
@@ -121,6 +121,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     settingsContent.appendChild(enableIgnoreListingCard);
 
     const generalExclusionGroup = this.createSettingGroup();
+    generalExclusionGroup.classList.add('general-exclusion-group');
     const ignoreListContentScripts = generalExclusionGroup.createChild('div', 'ignore-list-option');
     ignoreListContentScripts.appendChild(UI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.ignoreListContentScripts),

front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -32,7 +32,7 @@
 }
 
 .devices-list-item {
-  padding: var(--sys-size-3) var(--sys-size-7);
+  padding: var(--sys-size-3) var(--sys-size-6);
   height: var(--sys-size-13);
   display: flex;
   align-items: center;

front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -6,6 +6,9 @@
 
 .ignore-list-option {
   flex: none;
+  display: flex;
+  align-items: center;
+  height: var(--sys-size-13);
 }
 
 .ignore-list-option devtools-button {
@@ -25,13 +28,16 @@
   flex: 0 1 auto;
 }
 
+.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: var(--sys-size-3) var(--sys-size-5);
   height: var(--sys-size-13);
   display: flex;
   align-items: center;

front_end/panels/settings/keybindsSettingsTab.css

@@ -23,7 +23,7 @@
 }
 
 .keybinds-list-item {
-  margin: 0 var(--sys-size-7);
+  margin: 0 var(--sys-size-6);
   padding: var(--sys-size-4) 0;
   display: grid;
   grid-template-rows: 1fr ;

front_end/panels/settings/settingsScreen.css

@@ -165,7 +165,7 @@ label {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--sys-size-11);
+  gap: var(--sys-size-9);
 }
 
 .settings-tab.settings-content {

front_end/ui/components/cards/Card.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as LitHtml from '../../lit-html/lit-html.js';
 
 import cardStyles from './card.css.js';
@@ -31,18 +33,20 @@ export class Card extends HTMLElement {
     this.#heading = data.heading;
     this.#headingIconName = data.headingIconName;
 
-    this.#headingSuffix?.remove();
-    if (data.headingSuffix) {
-      this.#headingSuffix = data.headingSuffix;
-      data.headingSuffix.slot = 'heading-suffix';
-      this.append(data.headingSuffix);
-    }
     this.#content.forEach(content => content.remove());
     data.content.forEach(content => {
       content.slot = 'content';
       this.append(content);
     });
     this.#content = data.content;
+
+    this.#headingSuffix?.remove();
+    if (data.headingSuffix) {
+      this.#headingSuffix = data.headingSuffix;
+      data.headingSuffix.slot = 'heading-suffix';
+      this.append(data.headingSuffix);
+    }
+
     this.#render();
   }
 

front_end/ui/components/cards/card.css

@@ -11,7 +11,7 @@
 .card {
   min-width: var(--sys-size-31);
   max-width: var(--sys-size-37);
-  margin: var(--sys-size-3);
+  margin: var(--sys-size-3) var(--sys-size-5) var(--sys-size-5) var(--sys-size-5);
 }
 
 .heading-wrapper {
@@ -42,7 +42,7 @@ slot[name="heading-suffix"]::slotted(*) {
 }
 
 slot[name="content"]::slotted(*) {
-  padding: var(--sys-size-5);
+  padding: var(--sys-size-5) var(--sys-size-6);
 }
 
 slot[name="content"]::slotted(*:not(:first-child)) {