chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/ui/components/dialogs/ButtonDialog.ts

@@ -0,0 +1,131 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import buttonDialogStyles from './buttonDialog.css.js';
+import {
+  type ClickOutsideDialogEvent,
+  type Dialog as DialogElement,
+  DialogHorizontalAlignment,
+  DialogVerticalPosition,
+} from './Dialog.js';
+
+const {html} = LitHtml;
+
+export interface ButtonDialogData {
+  openOnRender?: boolean;
+  jslogContext?: string;
+  // The below are parts of ButtonData. See comments of ButtonData.
+  iconName: string;
+  variant: Buttons.Button.Variant.PRIMARY_TOOLBAR|Buttons.Button.Variant.TOOLBAR|Buttons.Button.Variant.ICON;
+  iconTitle?: string;
+  // The below are parts of DialogData. See comments of DialogData.
+  position?: DialogVerticalPosition;
+  horizontalAlignment?: DialogHorizontalAlignment;
+  closeOnESC?: boolean;
+  closeOnScroll?: boolean;
+  closeButton?: boolean;
+  dialogTitle: string;
+}
+
+export class ButtonDialog extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #renderBound = this.#render.bind(this);
+
+  #dialog: DialogElement|null = null;
+  #showButton: Buttons.Button.Button|null = null;
+  #data: ButtonDialogData|null = null;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [buttonDialogStyles];
+  }
+
+  set data(data: ButtonDialogData) {
+    this.#data = data;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
+  }
+
+  #showDialog(): void {
+    if (!this.#dialog) {
+      throw new Error('Dialog not found');
+    }
+    void this.#dialog.setDialogVisible(true);
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
+  }
+
+  #closeDialog(evt?: ClickOutsideDialogEvent): void {
+    if (!this.#dialog) {
+      throw new Error('Dialog not found');
+    }
+    void this.#dialog.setDialogVisible(false);
+    if (evt) {
+      evt.stopImmediatePropagation();
+    }
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
+  }
+
+  #render(): void {
+    if (!this.#data) {
+      throw new Error('ButtonDialog.data is not set');
+    }
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('Button dialog render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(
+      html`
+      <devtools-button
+        @click=${this.#showDialog}
+        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
+          this.#showButton = node as Buttons.Button.Button;
+        })}
+        .data=${{
+          variant: this.#data.variant,
+          iconName: this.#data.iconName,
+          title: this.#data.iconTitle,
+          jslogContext: this.#data.jslogContext,
+        } as Buttons.Button.ButtonData}
+      ></devtools-button>
+      <devtools-dialog
+        @clickoutsidedialog=${this.#closeDialog}
+        .origin=${() => {
+          if (!this.#showButton) {
+            throw new Error('Button not found');
+          }
+          return this.#showButton;
+        }}
+        .position=${this.#data.position ?? DialogVerticalPosition.BOTTOM}
+        .horizontalAlignment=${this.#data.horizontalAlignment ?? DialogHorizontalAlignment.RIGHT}
+        .closeOnESC=${this.#data.closeOnESC ?? false}
+        .closeOnScroll=${this.#data.closeOnScroll ?? false}
+        .closeButton=${this.#data.closeButton ?? false}
+        .dialogTitle=${this.#data.dialogTitle}
+        .jslogContext=${this.#data.jslogContext ?? ''}
+        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
+          this.#dialog = node as DialogElement;
+        })}
+      >
+        <slot></slot>
+      </devtools-dialog>
+      `,
+      this.#shadow, {host: this});
+    // clang-format on
+
+    if (this.#data.openOnRender) {
+      this.#showDialog();
+      this.#data.openOnRender = false;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-button-dialog': ButtonDialog;
+  }
+}
+customElements.define('devtools-button-dialog', ButtonDialog);

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

@@ -5,6 +5,7 @@
 import * as Platform from '../../../core/platform/platform.js';
 import type * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as Helpers from '../../../testing/DOMHelpers.js';  // eslint-disable-line rulesdir/es_modules_import
+import {describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
 import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as Dialogs from './dialogs.js';
@@ -552,6 +553,48 @@ describe('Dialog', () => {
       }
     });
   });
+
+  describeWithLocale('rendering', () => {
+    it('do not render dialog header line if title is empty and there is no close button', async () => {
+      const dialog = new Dialogs.Dialog.Dialog();
+      dialog.closeButton = false;
+      dialog.dialogTitle = '';
+      Helpers.renderElementIntoDOM(dialog);
+      await coordinator.done();
+
+      assert.isNotNull(dialog.shadowRoot);
+      const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
+      assert.notExists(dialogHeader);
+    });
+
+    it('should render a close button in the dialog if closeButton is true', async () => {
+      const dialog = new Dialogs.Dialog.Dialog();
+      dialog.closeButton = true;
+      Helpers.renderElementIntoDOM(dialog);
+      await coordinator.done();
+
+      assert.isNotNull(dialog.shadowRoot);
+      const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
+      assert.exists(dialogHeader);
+      const closeButton = dialogHeader.querySelector('devtools-button');
+      assert.exists(closeButton);
+    });
+
+    it('should render dialog title if it is not empty', async () => {
+      const dialogTitle = 'Button dialog example';
+      const dialog = new Dialogs.Dialog.Dialog();
+      dialog.dialogTitle = dialogTitle;
+      Helpers.renderElementIntoDOM(dialog);
+      await coordinator.done();
+
+      assert.isNotNull(dialog.shadowRoot);
+      const dialogHeader = dialog.shadowRoot.querySelector('.dialog-header');
+      assert.exists(dialogHeader);
+      const dialogTitleElement = dialogHeader.querySelector('.dialog-header-text');
+      assert.exists(dialogTitleElement);
+      assert.strictEqual(dialogTitleElement.textContent, dialogTitle);
+    });
+  });
 });
 
 describe('closing the dialog with click', () => {

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

@@ -2,17 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as WindowBoundsService from '../../../services/window_bounds/window_bounds.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Buttons from '../buttons/buttons.js';
 
 import dialogStyles from './dialog.css.js';
 
 const {html} = LitHtml;
 
+const UIStrings = {
+
+  /**
+   * @description Title of close button for the shortcuts dialog.
+   */
+  close: 'Close',
+};
+
+const str_ = i18n.i18n.registerUIStrings('ui/components/dialogs/Dialog.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const IS_DIALOG_SUPPORTED = 'HTMLDialogElement' in globalThis;
@@ -45,7 +58,7 @@ interface DialogData {
   origin: DialogOrigin;
   position: DialogVerticalPosition;
   /**
-   * Horizontal alignment of the dialg with respect to its origin.
+   * Horizontal alignment of the dialog with respect to its origin.
    * Center by default.
    */
   horizontalAlignment: DialogHorizontalAlignment;
@@ -80,6 +93,14 @@ interface DialogData {
    * content. Defaults to true.
    */
   closeOnScroll: boolean;
+  /**
+   * Whether render a closed button, when it is clicked, close the dialog. Defaults to false.
+   */
+  closeButton: boolean;
+  /**
+   * The string used in the header row of the dialog.
+   */
+  dialogTitle: string;
   /**
    * Specifies a context for the visual element.
    */
@@ -106,6 +127,8 @@ export class Dialog extends HTMLElement {
     windowBoundsService: WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance(),
     closeOnESC: true,
     closeOnScroll: true,
+    closeButton: false,
+    dialogTitle: '',
     jslogContext: '',
   };
 
@@ -211,6 +234,16 @@ export class Dialog extends HTMLElement {
     this.#onStateChange();
   }
 
+  set closeButton(closeButton: boolean) {
+    this.#props.closeButton = closeButton;
+    this.#onStateChange();
+  }
+
+  set dialogTitle(dialogTitle: string) {
+    this.#props.dialogTitle = dialogTitle;
+    this.#onStateChange();
+  }
+
   set jslogContext(jslogContext: string) {
     this.#props.jslogContext = jslogContext;
     this.#onStateChange();
@@ -664,6 +697,32 @@ export class Dialog extends HTMLElement {
     return this.#dialogClientRect;
   }
 
+  #renderHeaderRow(): LitHtml.TemplateResult|null {
+    // If the title is empty and close button is false, let's skip the header row.
+    if (!this.#props.dialogTitle && !this.#props.closeButton) {
+      return null;
+    }
+    // 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
+            @click=${this.#closeDialog}
+            .data=${{
+              variant: Buttons.Button.Variant.TOOLBAR,
+              iconName: 'cross',
+              title: i18nString(UIStrings.close),
+            } as Buttons.Button.ButtonData}
+            jslog=${VisualLogging.close().track({click: true})}
+          ></devtools-button>
+        ` : LitHtml.nothing}
+      </div>
+    `;
+    // clang-format on
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Dialog render was not scheduled');
@@ -685,8 +744,9 @@ export class Dialog extends HTMLElement {
     LitHtml.render(html`
       <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-wrap">
-          <div id="content">
+        <div id="content">
+          ${this.#renderHeaderRow()}
+          <div class='dialog-content'>
             <slot></slot>
           </div>
         </div>

package/front_end/ui/components/dialogs/ShortcutDialog.test.ts

@@ -13,8 +13,11 @@ import * as Dialogs from './dialogs.js';
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithLocale('ShortcutDialog', () => {
-  async function getShortcutDialog(open?: boolean) {
+  async function getShortcutDialog(open?: boolean, prependedElement?: HTMLElement) {
     const shortcutDialog = new Dialogs.ShortcutDialog.ShortcutDialog();
+    if (prependedElement) {
+      shortcutDialog.prependElement(prependedElement);
+    }
     shortcutDialog.data = {shortcuts: [{title: 'Shortcut Title', bindings: ['Ctrl+E']}], open};
     Helpers.renderElementIntoDOM(shortcutDialog);
     await coordinator.done();
@@ -45,4 +48,15 @@ describeWithLocale('ShortcutDialog', () => {
 
     assert.isFalse(dialog.hasAttribute('open'));
   });
+
+  it('prepends provived element to the dialog content', async () => {
+    const prependedElement = document.createElement('div');
+    prependedElement.classList.add('prepended-element');
+
+    const shortcutDialog = await getShortcutDialog(true, prependedElement);
+    const dialog = getDialogFromShortcutDialog(shortcutDialog);
+    const prependedElementInShortcutDialog = dialog.querySelector('div.prepended-element');
+
+    assert.instanceOf(prependedElementInShortcutDialog, HTMLDivElement);
+  });
 });

package/front_end/ui/components/dialogs/ShortcutDialog.ts

@@ -69,6 +69,7 @@ export class ShortcutDialog extends HTMLElement {
   #showButton: Buttons.Button.Button|null = null;
   #shortcuts: Shortcut[] = [];
   #openOnRender = false;
+  #prependedElement: HTMLElement|null = null;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [shortcutDialogStyles];
@@ -103,6 +104,14 @@ export class ShortcutDialog extends HTMLElement {
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#renderBound);
   }
 
+  #getKeysFromBinding(binding: string): string[] {
+    return binding.split(/[\s+]+/).map(word => word.trim());  // Split on one or more spaces or + symbols
+  }
+
+  prependElement(element: HTMLElement): void {
+    this.#prependedElement = element;
+  }
+
   #render(): void {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('Shortcut dialog render was not scheduled');
@@ -123,8 +132,8 @@ export class ShortcutDialog extends HTMLElement {
         } as Buttons.Button.ButtonData}
       ></devtools-button>
       <devtools-dialog
+        class="shortcuts-dialog"
         @clickoutsidedialog=${this.#closeDialog}
-        .showConnector=${true}
         .origin=${() => {
           if (!this.#showButton) {
             throw new Error('Button not found');
@@ -138,34 +147,35 @@ export class ShortcutDialog extends HTMLElement {
           this.#dialog = node as DialogElement;
         })}
       >
-        <div class="keybinds-category-header">
-          <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
-          <devtools-button
-            @click=${this.#closeDialog}
-            class='close-icon'
-            .data=${{
-              variant: Buttons.Button.Variant.TOOLBAR,
-              iconName: 'cross',
-              title: i18nString(UIStrings.close),
-            } as Buttons.Button.ButtonData}
+      <div class="keybinds-category-header">
+        <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
+        <devtools-button
+        @click=${this.#closeDialog}
+        .data=${{
+          variant: Buttons.Button.Variant.TOOLBAR,
+          iconName: 'cross',
+          title: i18nString(UIStrings.close),
+        } as Buttons.Button.ButtonData}
             jslog=${VisualLogging.close().track({click: true})}
-          ></devtools-button>
-        </div>
+            ></devtools-button>
+          </div>
+        ${(this.#prependedElement) ? html`${this.#prependedElement}` : LitHtml.nothing}
         <ul class="keybinds-list">
           ${this.#shortcuts.map(shortcut =>
             html`
               <li class="keybinds-list-item">
-                <div class="keybinds-action-name keybinds-list-text">${shortcut.title}</div>
-                ${shortcut.bindings.map((binding, index) =>
-                  html`
-                    <div class="keybinds-shortcut keybinds-list-text">
-                      <span class="keybinds-key">${binding}</span>
+                <div class="keybinds-list-title">${shortcut.title}</div>
+                <div class="shortcuts-for-actions">
+                  ${shortcut.bindings.map(binding => {
+                    return html`
+                    <div class="keys-container">
+                      ${this.#getKeysFromBinding(binding).map(key => html`
+                          <span class="keybinds-key">${key}</span>
+                      `)}
                     </div>
-                    ${shortcut.bindings.at(index + 1) ?
-                      html`<span class="keybinds-shortcut-separator"> - </span>`
-                      : LitHtml.nothing
-                    }
-                `)}
+                  `;
+                    })}
+                  </div>
               </li>`,
           )}
         </ul>

package/front_end/ui/components/dialogs/buttonDialog.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  white-space: nowrap;
+}

package/front_end/ui/components/dialogs/dialog.css

@@ -17,7 +17,6 @@ dialog::backdrop {
 dialog {
   background: transparent;
   border: none;
-  border-radius: 4px;
   top: var(--dialog-top);
   padding: var(--dialog-padding);
   left: var(--dialog-left);
@@ -29,6 +28,7 @@ dialog {
   animation-duration: 100ms;
   animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
   overflow: hidden;
+  filter: drop-shadow(0 4px 8px rgb(0 0 0 / 15%)) drop-shadow(0 1px 3px rgb(0 0 0 / 30%));
 }
 
 dialog:focus,
@@ -39,7 +39,7 @@ dialog:focus-visible {
 #content {
   min-width: var(--content-min-width);
   background: var(--color-background-elevation-dark-only);
-  border-radius: 4px;
+  border-radius: var(--sys-size-5);
   padding-top: var(--content-padding-top);
   padding-bottom: var(--content-padding-bottom);
   box-shadow: var(--override-content-box-shadow);
@@ -50,8 +50,19 @@ dialog:focus-visible {
   clip-path: polygon(var(--content-clip-path));
 }
 
-#content-wrap {
-  filter: drop-shadow(0 1px 2px rgb(60 64 67 / 30%)) drop-shadow(0 2px 0 rgb(60 64 67 / 15%));
+.dialog-header {
+  display: flex;
+  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);
+}
+
+.dialog-content {
+  padding: 0 var(--sys-size-8);
 }
 
 @keyframes slideIn {

package/front_end/ui/components/dialogs/dialogs.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ButtonDialog from './ButtonDialog.js';
 import * as Dialog from './Dialog.js';
 import * as IconDialog from './IconDialog.js';
 import * as ShortcutDialog from './ShortcutDialog.js';
 
 export {
+  ButtonDialog,
   Dialog,
   IconDialog,
   ShortcutDialog,

package/front_end/ui/components/dialogs/shortcutDialog.css

@@ -4,70 +4,90 @@
  * found in the LICENSE file.
  */
 
-.keybinds-category-header {
+.shortcuts-dialog {
+  /* overwrite 'white-space: pre' in the toolbar item parent element */
   white-space: nowrap;
-  padding: 0 10px 20px;
-  display: flex;
 }
 
-.keybinds-category-header-text {
-  line-height: 24px;
-  flex: auto;
-  font-weight: bold;
+.keybinds-category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-8);
 }
 
-.keybinds-key {
-  padding: 0.1em 0.6em;
-  border: 1px solid var(--sys-color-neutral-outline);
-  font-size: 11px;
-  background-color: var(--sys-color-neutral-container);
-  color: var(--sys-color-on-surface);
-  border-radius: 3px;
-  display: inline-block;
-  margin: 0 0.1em;
-  text-shadow: 0 1px 0 var(--sys-color-cdt-base-container);
-  line-height: 1.5;
-  white-space: nowrap;
+.keybinds-category-header-text {
+  font-size: var(--sys-typescale-body3-size);
+  font-weight: var(--ref-typeface-weight-medium);
 }
 
 .keybinds-list {
-  list-style: none;
+  display: flex;
+  flex-direction: column;
   margin: 0;
-  padding: 0;
+  padding: 0 var(--sys-size-8) var(--sys-size-3) var(--sys-size-8);
 }
 
 .keybinds-list-item {
-  line-height: 30px;
-  display: flex;
-  padding: 0 10px;
+  display: grid;
+  align-items: baseline;
+  justify-content: space-between;
+  grid-template-rows: 1fr;
+  grid-template-columns: 1fr var(--sys-size-11) 1fr;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-4) 0;
+
+  &:last-of-type {
+    border-bottom: unset;
+  }
+
+  .keybinds-list-title {
+    grid-row: 1/1;
+  }
+
+  .shortcuts-for-actions {
+    grid-area: auto / 3 / auto / span 1;
+  }
 }
 
 .keybinds-list-text {
+  font-size: var(--sys-typescale-body4-size);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   user-select: none;
   color: var(--sys-color-on-surface);
-  text-align: start;
-  position: relative;
-  margin-right: 0;
 }
 
-.keybinds-shortcut-separator {
-  white-space: pre-wrap;
+.keys-container {
+  display: flex;
+  gap: var(--sys-size-3);
 }
 
-.keybinds-action-name {
-  flex: auto;
-  padding-right: 30px;
+.shortcuts-for-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sys-size-3);
 }
 
-.keybinds-shortcut {
-  flex: none;
+.nav-radio-buttons {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--sys-size-8);
+  gap: var(--sys-size-3);
 }
 
-.close-icon {
-  width: 12px;
-  height: 12px;
-  padding-top: 2px;
+.keybinds-key {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: var(--sys-size-4);
+  min-width: var(--sys-size-11);
+  height: var(--sys-size-11);
+  font: var(--sys-typescale-body5-medium);
+  white-space: nowrap;
+  border-radius: var(--sys-shape-corner-small);
+  background: var(--sys-color-tonal-container);
 }

package/front_end/ui/components/docs/dialog/button_dialog.html

@@ -0,0 +1,28 @@
+<!--
+  Copyright 2024 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Button dialog - basic example</title>
+    <style>
+      #container {
+        width: 800px;
+        height: 400px;
+        margin: 0 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="container"></div>
+    <script src="./button_dialog.js" type="module"></script>
+  </body>
+</html>