[GM3Restyling] Update the dialog's header/buttons row

Also added more example in components server
See design here: https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=3653-3002&m=dev

Bug: 383278166
Change-Id: Iac70968af04b967ae5ec1f5bce0fe04b37096fa3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6084416
Commit-Queue: Nancy Li <[email protected]>
Reviewed-by: Kim-Anh Tran <[email protected]>

Author: Nancy Li

front_end/panels/timeline/components/ignoreListSetting.css

@@ -4,6 +4,7 @@
  * found in the LICENSE file.
  */
 .ignore-list-setting-content {
+  padding: 0 var(--sys-size-8);
   width: 280px;
 }
 

front_end/ui/components/dialogs/Dialog.test.ts

@@ -564,7 +564,8 @@ describe('Dialog', () => {
 
       assert.isNotNull(dialog.shadowRoot);
       const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
-      assert.notExists(dialogHeader);
+      assert.exists(dialogHeader);
+      assert.isEmpty(dialogHeader.children);
     });
 
     it('should render a close button in the dialog if closeButton is true', async () => {

front_end/ui/components/dialogs/Dialog.ts

@@ -705,7 +705,6 @@ export class Dialog extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class="dialog-header">
         <span class="dialog-header-text">${this.#props.dialogTitle}</span>
         ${this.#props.closeButton ? html`
           <devtools-button
@@ -718,7 +717,6 @@ export class Dialog extends HTMLElement {
             jslog=${VisualLogging.close().track({click: true})}
           ></devtools-button>
         ` : LitHtml.nothing}
-      </div>
     `;
     // clang-format on
   }
@@ -745,7 +743,7 @@ export class Dialog extends HTMLElement {
       <dialog @click=${this.#handlePointerEvent} @pointermove=${this.#handlePointerEvent} @cancel=${this.#onCancel}
               jslog=${VisualLogging.dialog(this.#props.jslogContext).track({resize: true, keydown: 'Escape'}).parent('mapped')}>
         <div id="content">
-          ${this.#renderHeaderRow()}
+          <div class="dialog-header">${this.#renderHeaderRow()}</div>
           <div class='dialog-content'>
             <slot></slot>
           </div>

front_end/ui/components/dialogs/dialog.css

@@ -55,14 +55,19 @@ dialog:focus-visible {
   justify-content: space-between;
   align-items: center;
   padding: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) var(--sys-size-8);
-}
 
-.dialog-header-text {
-  font: var(--sys-typescale-body2-medium);
+  &:empty {
+    padding: 0;
+    height: var(--sys-size-7);
+  }
+
+  .dialog-header-text {
+    font: var(--sys-typescale-body2-medium);
+  }
 }
 
 .dialog-content {
-  padding: 0 var(--sys-size-8);
+  padding: 0 0 var(--sys-size-7);
   overflow: hidden;
 }
 

front_end/ui/components/dialogs/shortcutDialog.css

@@ -21,7 +21,7 @@
   flex-direction: column;
   /* overwrite default`margin` and `padding` for the <ul> element */
   margin: 0;
-  padding: 0;
+  padding: 0 var(--sys-size-8);
 }
 
 .keybinds-list-item {

front_end/ui/components/docs/dialog/basic.ts

@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
 import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
 
 const showConnectors = [true, false];
 const verticalPositions = [Dialogs.Dialog.DialogVerticalPosition.TOP, Dialogs.Dialog.DialogVerticalPosition.BOTTOM];
@@ -104,3 +109,66 @@ for (const verticalPosition of verticalPositions) {
     i++;
   }
 }
+
+renderDifferentModeExample();
+
+function renderDifferentModeExample() {
+  const row = document.createElement('div');
+  row.classList.add('row');
+  root.appendChild(row);
+  renderDialogWithTitle();
+  renderDialogWithTitleAndCloseButton();
+  renderDialogWithoutTitleOrCloseButton();
+
+  function renderDialog(): Dialogs.Dialog.Dialog {
+    const dialog = new Dialogs.Dialog.Dialog();
+
+    const container = document.createElement('div');
+    container.classList.add('container');
+    container.id = `container-${i}`;
+
+    const host = document.createElement('div');
+    host.classList.add('dialog-host-narrow');
+    host.id = `host-${i}`;
+    host.textContent = 'H';
+
+    container.appendChild(host);
+    row.appendChild(container);
+
+    dialog.position = Dialogs.Dialog.DialogVerticalPosition.BOTTOM;
+    dialog.horizontalAlignment = Dialogs.Dialog.DialogHorizontalAlignment.AUTO;
+    dialog.origin = host;
+    dialog.id = `dialog-${i}`;
+
+    host.addEventListener('mouseover', () => {
+      void dialog.setDialogVisible(true);
+    });
+    dialog.addEventListener('clickoutsidedialog', () => {
+      void dialog.setDialogVisible(false);
+    });
+    const div = document.createElement('div');
+    div.classList.add('dialog-content');
+
+    div.innerHTML = 'Hello, World';
+    dialog.appendChild(div);
+    root.appendChild(dialog);
+    i++;
+
+    return dialog;
+  }
+
+  function renderDialogWithTitle() {
+    const dialog = renderDialog();
+    dialog.dialogTitle = 'title';
+  }
+
+  function renderDialogWithTitleAndCloseButton() {
+    const dialog = renderDialog();
+    dialog.dialogTitle = 'title';
+    dialog.closeButton = true;
+  }
+
+  function renderDialogWithoutTitleOrCloseButton() {
+    renderDialog();
+  }
+}

front_end/ui/components/docs/dialog/button_dialog.ts

@@ -23,6 +23,7 @@ buttonDialog.data = {
   dialogTitle: 'Button dialog example',
 };
 const div = document.createElement('div');
+div.style.padding = '0 var(--sys-size-8)';
 div.createChild('div').innerHTML = 'Hello, World';
 div.createChild('div').innerHTML = 'This is a super long content. This is a super long content';
 buttonDialog.appendChild(div);