[GM3Restyling] Extend cards to allow for icon and a heading suffix

Some cards in the Settings page require an icon preceding the heading,
and an HTMLElement after the heading. This extends the card settings
to allow for these two.

Drive-by: Change heading to accept strings only, since in some
cases we don't have a translation (path in settings pages).

Bug: 368238837
Change-Id: I7a8d629f08088f3588cfcbf42f2ab397ba46f9c4
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5972704
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/ui/components/cards/BUILD.gn

@@ -18,6 +18,7 @@ devtools_module("card") {
   deps = [
     "../../../core/common:bundle",
     "../../../ui/lit-html:bundle",
+    "../icon_button:bundle",
   ]
 }
 

front_end/ui/components/cards/Card.test.ts

@@ -8,10 +8,13 @@ import {
   renderElementIntoDOM,
 } from '../../../testing/DOMHelpers.js';
 
+const CONTENT_SLOT = 'content';
+const HEADING_SUFFIX_SLOT = 'heading-suffix';
+
 import * as Cards from './cards.js';
 
-function assertCardContent(card: Cards.Card.Card, expectedContent: string[]) {
-  const slot = getElementWithinComponent(card, 'slot', HTMLSlotElement);
+function assertCardContent(card: Cards.Card.Card, slotName: string, expectedContent: string[]) {
+  const slot = getElementWithinComponent(card, `slot[name="${slotName}"]`, HTMLSlotElement);
   const textContents = Array.from(slot.assignedElements()).map(child => child.textContent);
   assert.deepStrictEqual(textContents, expectedContent);
 }
@@ -29,7 +32,7 @@ describe('Card', () => {
       content: [content1, content2],
     };
 
-    assertCardContent(card, ['content 1', 'content 2']);
+    assertCardContent(card, CONTENT_SLOT, ['content 1', 'content 2']);
   });
 
   it('order of slotted elements matter', () => {
@@ -43,12 +46,12 @@ describe('Card', () => {
     card.data = {
       content: [content1, content2],
     };
-    assertCardContent(card, ['content 1', 'content 2']);
+    assertCardContent(card, CONTENT_SLOT, ['content 1', 'content 2']);
 
     card.data = {
       content: [content2, content1],
     };
-    assertCardContent(card, ['content 2', 'content 1']);
+    assertCardContent(card, CONTENT_SLOT, ['content 2', 'content 1']);
   });
 
   it('shows heading', () => {
@@ -63,4 +66,27 @@ describe('Card', () => {
     assert.instanceOf(heading, HTMLElement);
     assert.strictEqual(heading.textContent, 'This is my heading');
   });
+
+  it('shows heading icon', async () => {
+    const card = new Cards.Card.Card();
+    card.data = {
+      headingIconName: 'folder',
+      content: [],
+    };
+    renderElementIntoDOM(card);
+    const icon = card.shadowRoot?.querySelector('devtools-icon');
+    assert.isNotNull(icon);
+  });
+
+  it('shows heading-suffix', () => {
+    const suffix = document.createElement('span');
+    suffix.textContent = 'hello';
+    const card = new Cards.Card.Card();
+    card.data = {
+      headingSuffix: suffix,
+      content: [],
+    };
+    renderElementIntoDOM(card);
+    assertCardContent(card, HEADING_SUFFIX_SLOT, ['hello']);
+  });
 });

front_end/ui/components/cards/Card.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../../core/common/common.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 
 import cardStyles from './card.css.js';
@@ -16,16 +15,28 @@ declare global {
 }
 
 export interface CardData {
-  heading?: Common.UIString.LocalizedString;
+  heading?: string;
+  headingIconName?: string;
+  headingSuffix?: HTMLElement;
   content: HTMLElement[];
 }
 export class Card extends HTMLElement {
   #heading?: string;
+  #headingIconName?: string;
+  #headingSuffix?: HTMLElement;
   #content: HTMLElement[] = [];
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   set data(data: CardData) {
     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';
@@ -44,7 +55,11 @@ export class Card extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
     <div class="card">
-      <div role="heading" aria-level="2" class="heading">${this.#heading}</div>
+      <div class="heading-wrapper">
+        ${this.#headingIconName ? html`<devtools-icon class="heading-icon" name=${this.#headingIconName}></devtools-icon>` : LitHtml.nothing}
+        <div role="heading" aria-level="2" class="heading">${this.#heading}</div>
+        <slot name="heading-suffix"></slot>
+      </div>
       <slot name="content" class='content-container'></slot>
     </div>
     `, this.#shadow, {

front_end/ui/components/cards/card.css

@@ -14,10 +14,23 @@
   margin: var(--sys-size-3);
 }
 
+.heading-wrapper {
+  display: flex;
+  white-space: nowrap;
+  margin-bottom: var(--sys-size-5);
+}
+
 .heading {
   color: var(--sys-color-on-surface);
   font: var(--sys-typescale-body2-medium);
-  margin-bottom: var(--sys-size-5);
+}
+
+.heading-icon {
+  margin-right: var(--sys-size-3);
+}
+
+slot[name="heading-suffix"]::slotted(*) {
+  margin-left: auto;
 }
 
 .content-container {
@@ -28,10 +41,10 @@
   background: var(--app-color-card-background);
 }
 
-::slotted(*) {
+slot[name="content"]::slotted(*) {
   padding: var(--sys-size-5);
 }
 
-::slotted(*:not(:first-child)) {
-  border-top: 1px solid var(--sys-color-divider);
+slot[name="content"]::slotted(*:not(:first-child)) {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }