chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/components/cards/card.css

@@ -0,0 +1,50 @@
+/*
+ * 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 {
+  max-width: var(--sys-size-37);
+  width: 100%;
+}
+
+.card {
+  min-width: var(--sys-size-31);
+  max-width: var(--sys-size-37);
+  margin: var(--sys-size-3) var(--sys-size-5) var(--sys-size-5) var(--sys-size-5);
+}
+
+.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);
+}
+
+.heading-icon {
+  margin-right: var(--sys-size-3);
+}
+
+slot[name="heading-suffix"]::slotted(*) {
+  margin-left: auto;
+}
+
+.content-container {
+  border-radius: var(--sys-shape-corner-small);
+  box-shadow: var(--sys-elevation-level3);
+  display: flex;
+  flex-direction: column;
+  background: var(--app-color-card-background);
+}
+
+slot[name="content"]::slotted(*) {
+  padding: var(--sys-size-5) var(--sys-size-6);
+}
+
+slot[name="content"]::slotted(*:not(:first-child)) {
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+}

package/front_end/ui/components/cards/cards.ts

@@ -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.
+
+import * as Card from './Card.js';
+
+export {
+  Card,
+};

package/front_end/ui/components/chrome_link/ChromeLink.test.ts

@@ -11,6 +11,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as ChromeLink from './chrome_link.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 describeWithMockConnection('ChromeLink', () => {
@@ -21,10 +23,10 @@ describeWithMockConnection('ChromeLink', () => {
     const container = document.createElement('div');
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-        <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${'chrome://settings'}>
+      html`
+        <devtools-chrome-link .href=${'chrome://settings' as Platform.DevToolsPath.UrlString}>
           link text
-        </${ChromeLink.ChromeLink.ChromeLink.litTagName}>
+        </devtools-chrome-link>
       `,
       container, {host: this},
     );

package/front_end/ui/components/chrome_link/ChromeLink.ts

@@ -12,6 +12,8 @@ import * as ComponentHelpers from '../helpers/helpers.js';
 
 import chromeLinkStyles from './chromeLink.css.js';
 
+const {html} = LitHtml;
+
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-chrome-link': ChromeLink;
@@ -21,7 +23,6 @@ declare global {
 // Use this component to render links to 'chrome://...'-URLs
 // (for which regular <x-link>s do not work).
 export class ChromeLink extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-chrome-link`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
   #href: string = '';
@@ -63,7 +64,7 @@ export class ChromeLink extends HTMLElement {
     LitHtml.render(
       /* x-link doesn't work with custom click/keydown handlers */
       /* eslint-disable rulesdir/ban_a_tags_in_lit_html */
-      LitHtml.html`
+      html`
         <a href=${this.#href} class="link" target="_blank"
           jslog=${VisualLogging.link().track({click: true}).context(jslogContext)}
           @click=${this.#handleClick}><slot></slot></a>

package/front_end/ui/components/data_grid/DataGrid.test.ts

@@ -34,6 +34,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as DataGrid from './data_grid.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const createColumns = (): DataGrid.DataGridUtils.Column[] => {
@@ -271,7 +273,7 @@ describe('DataGrid', () => {
           columnId: 'key',
           value: 'Hello World',
           title: 'Hello World',
-          renderer: value => LitHtml.html`<p>foo: ${value}</p>`,
+          renderer: value => html`<p>foo: ${value}</p>`,
         }],
       }];
       const component = renderDataGrid({columns, rows});

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -37,6 +37,8 @@ import {
 } from './DataGridUtils.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
+
+const {html, Directives: {ifDefined, classMap, styleMap, repeat}} = LitHtml;
 const UIStrings = {
   /**
    *@description A context menu item in the Data Grid of a data grid
@@ -102,7 +104,6 @@ const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 const ROW_HEIGHT_PIXELS = 20;
 
 export class DataGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #columns: readonly Column[] = [];
@@ -387,7 +388,7 @@ export class DataGrid extends HTMLElement {
    * Guidance on values of attribute taken from
    * https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html.
    */
-  #ariaSortForHeader(col: Column): string|undefined {
+  #ariaSortForHeader(col: Column): 'none'|'ascending'|'descending'|undefined {
     if (col.sortable && (!this.#sortState || this.#sortState.columnId !== col.id)) {
       // Column is sortable but is not currently sorted
       return 'none';
@@ -409,15 +410,14 @@ export class DataGrid extends HTMLElement {
       const emptyCellClasses = LitHtml.Directives.classMap({
         firstVisibleColumn: colIndex === 0,
       });
-      return LitHtml.html`<td aria-hidden="true" class=${emptyCellClasses} data-filler-row-column-index=${
-          colIndex}></td>`;
+      return html`<td aria-hidden="true" class=${emptyCellClasses} data-filler-row-column-index=${colIndex}></td>`;
     });
     const emptyRowClasses = LitHtml.Directives.classMap({
       'filler-row': true,
       'padding-row': true,
       'empty-table': numberOfVisibleRows === 0,
     });
-    return LitHtml.html`<tr aria-hidden="true" class=${emptyRowClasses}>${emptyCells}</tr>`;
+    return html`<tr aria-hidden="true" class=${emptyRowClasses}>${emptyCells}</tr>`;
   }
 
   #cleanUpAfterResizeColumnComplete(): void {
@@ -569,7 +569,7 @@ export class DataGrid extends HTMLElement {
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`<span class="cell-resize-handle"
+    return html`<span class="cell-resize-handle"
      @pointerdown=${this.#onResizePointerDown}
      @pointerup=${this.#onResizePointerUp}
      data-column-index=${columnIndex}
@@ -786,7 +786,7 @@ export class DataGrid extends HTMLElement {
     await coordinator.write(() => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
       ${this.#columns.map((col, columnIndex) => {
         /**
          * We render the resizers outside of the table. One is rendered for each
@@ -796,13 +796,14 @@ export class DataGrid extends HTMLElement {
          */
         return this.#renderResizeForCell(col, [columnIndex, 0]);
       })}
-      <div class=${LitHtml.Directives.classMap(containerClassMap)} @scroll=${this.#onScroll} @focusout=${this.#onFocusOut}>
+      <div class=${classMap(containerClassMap)} @scroll=${this.#onScroll} @focusout=${this.#onFocusOut}>
         <table
-          aria-label=${LitHtml.Directives.ifDefined(this.#label)}
+          aria-label=${ifDefined(this.#label)}
           aria-rowcount=${this.#rows.length}
           aria-colcount=${this.#columns.length}
           @keydown=${this.#onTableKeyDown}
         >
+          <!-- @ts-ignore -->
           <colgroup>
             ${this.#columns.map((col, colIndex) => {
               const width = calculateColumnWidthPercentageFromWeighting(this.#columns, col.id);
@@ -810,13 +811,13 @@ export class DataGrid extends HTMLElement {
               if (!col.visible) {
                 return LitHtml.nothing;
               }
-              return LitHtml.html`<col style=${style} data-col-column-index=${colIndex}>`;
+              return html`<col style=${style} data-col-column-index=${colIndex}>`;
             })}
           </colgroup>
           <thead>
             <tr @contextmenu=${this.#onHeaderContextMenu}>
               ${this.#columns.map((col, columnIndex) => {
-                const thClasses = LitHtml.Directives.classMap({
+                const thClasses = classMap({
                   hidden: !col.visible,
                   firstVisibleColumn: columnIndex === indexOfFirstVisibleColumn,
                   sortable: anyColumnsSortable,
@@ -824,9 +825,9 @@ export class DataGrid extends HTMLElement {
                 const tabbableCell = this.#tabbableCell();
                 const cellIsFocusableCell = anyColumnsSortable && columnIndex === tabbableCell[0] && tabbableCell[1] === 0;
 
-                return LitHtml.html`<th class=${thClasses}
+                return html`<th class=${thClasses}
                   jslog=${VisualLogging.tableHeader().track({click: anyColumnsSortable, resize: true}).context(col.id)}
-                  style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
+                  style=${ifDefined(col.styles ? styleMap(col.styles) : undefined)}
                   data-grid-header-cell=${col.id}
                   @focus=${() => {
                     this.#focusCellIfRequired([columnIndex, 0]);
@@ -842,20 +843,20 @@ export class DataGrid extends HTMLElement {
                     this.#onColumnHeaderClick(col, columnIndex);
                   }}
                   title=${col.title}
-                  aria-sort=${LitHtml.Directives.ifDefined(this.#ariaSortForHeader(col))}
+                  aria-sort=${ifDefined(this.#ariaSortForHeader(col))}
                   aria-colindex=${columnIndex + 1}
                   data-row-index='0'
                   data-col-index=${columnIndex}
-                  tabindex=${LitHtml.Directives.ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
+                  tabindex=${ifDefined(anyColumnsSortable ? (cellIsFocusableCell ? '0' : '-1') : undefined)}
                 >${col.titleElement || col.title}</th>`;
               })}
             </tr>
           </thead>
           <tbody>
-            <tr class="filler-row-top padding-row" style=${LitHtml.Directives.styleMap({
+            <tr class="filler-row-top padding-row" style=${styleMap({
               height: `${topVisibleRow * ROW_HEIGHT_PIXELS}px`,
             })} aria-hidden="true"></tr>
-            ${LitHtml.Directives.repeat(renderableRows, row => this.#rowIndexMap.get(row), row => {
+            ${repeat(renderableRows, row => this.#rowIndexMap.get(row), row => {
               const rowIndex = this.#rowIndexMap.get(row);
               if (rowIndex === undefined) {
                 throw new Error('Trying to render a row that has no index in the rowIndexMap');
@@ -872,11 +873,11 @@ export class DataGrid extends HTMLElement {
                 selected: rowIsSelected,
                 hidden: row.hidden === true,
               });
-              return LitHtml.html`
+              return html`
                 <tr
                   aria-rowindex=${rowIndex + 1}
                   class=${rowClasses}
-                  style=${LitHtml.Directives.ifDefined(row.styles ? LitHtml.Directives.styleMap(row.styles) : undefined)}
+                  style=${ifDefined(row.styles ? styleMap(row.styles) : undefined)}
                   jslog=${VisualLogging.tableRow().track({keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space'})}
                   @contextmenu=${this.#onBodyRowContextMenu}
                   @mouseenter=${() => {
@@ -887,16 +888,16 @@ export class DataGrid extends HTMLElement {
                   }}
                 >${this.#columns.map((col, columnIndex) => {
                   const cell = getRowEntryForColumnId(row, col.id);
-                  const cellClasses = LitHtml.Directives.classMap({
+                  const cellClasses = classMap({
                     hidden: !col.visible,
                     firstVisibleColumn: columnIndex === indexOfFirstVisibleColumn,
                   });
                   const cellIsFocusableCell = columnIndex === tabbableCell[0] && tableRowIndex === tabbableCell[1];
                   const cellOutput = col.visible ? renderCellValue(cell) : null;
-                  return LitHtml.html`<td
+                  return html`<td
                     class=${cellClasses}
                     jslog=${VisualLogging.tableCell().track({click: true})}).context(col.id)}
-                    style=${LitHtml.Directives.ifDefined(col.styles ? LitHtml.Directives.styleMap(col.styles) : undefined)}
+                    style=${ifDefined(col.styles ? styleMap(col.styles) : undefined)}
                     tabindex=${cellIsFocusableCell ? '0' : '-1'}
                     aria-colindex=${columnIndex + 1}
                     title=${cell.title || getCellTitleFromCellContent(String(cell.value))}
@@ -909,10 +910,10 @@ export class DataGrid extends HTMLElement {
                     }}
                   >${cellOutput}</td>`;
                 })}
-              `;
+              </tr>`;
             })}
             ${this.#renderEmptyFillerRow(renderableRows.length)}
-            <tr class="filler-row-bottom padding-row" style=${LitHtml.Directives.styleMap({
+            <tr class="filler-row-bottom padding-row" style=${styleMap({
               height: `${Math.max(0, nonHiddenRows.length - bottomVisibleRow) * ROW_HEIGHT_PIXELS}px`,
             })} aria-hidden="true"></tr>
           </tbody>

package/front_end/ui/components/data_grid/DataGridContextMenuUtils.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 import type * as UI from '../../legacy/legacy.js';
 
-import {type DataGrid} from './DataGrid.js';
+import type {DataGrid} from './DataGrid.js';
 import {ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
-import {type Column} from './DataGridUtils.js';
+import type {Column} from './DataGridUtils.js';
 
 function toggleColumnVisibility(dataGrid: DataGrid, column: Column): void {
   const newVisibility = !column.visible;

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -2,14 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './DataGrid.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as TextUtils from '../../../models/text_utils/text_utils.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as UI from '../../legacy/legacy.js';
 
-import {DataGrid, type DataGridContextMenusConfiguration, type DataGridData} from './DataGrid.js';
+import type {DataGridContextMenusConfiguration} from './DataGrid.js';
 import dataGridControllerStyles from './dataGridController.css.js';
-import {type ColumnHeaderClickEvent, type ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
+import type {ColumnHeaderClickEvent, ContextMenuColumnSortClickEvent} from './DataGridEvents.js';
 import {
   type Column,
   getRowEntryForColumnId,
@@ -19,6 +21,8 @@ import {
   type SortState,
 } from './DataGridUtils.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text announced when the column is sorted in ascending order
@@ -61,7 +65,6 @@ export interface DataGridControllerData {
 }
 
 export class DataGridController extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-data-grid-controller`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #hasRenderedAtLeastOnce = false;
@@ -266,8 +269,8 @@ export class DataGridController extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${DataGrid.litTagName} .data=${{
+    LitHtml.render(html`
+      <devtools-data-grid .data=${{
           columns: this.#columns,
           rows: this.#rows,
           activeSort: this.#sortState,
@@ -277,11 +280,11 @@ export class DataGridController extends HTMLElement {
           showScrollbar: this.#showScrollbar,
           striped: this.#striped,
           autoScrollToBottom: this.#autoScrollToBottom,
-        } as DataGridData}
+        }}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}
         @contextmenuheaderresetclick=${this.#onContextMenuHeaderResetClick}
-     ></${DataGrid.litTagName}>
+     ></devtools-data-grid>
     `, this.#shadow, {
       host: this,
     });

package/front_end/ui/components/data_grid/DataGridControllerIntegrator.ts

@@ -18,8 +18,7 @@ export class DataGridControllerIntegrator extends UI.Widget.VBox {
 
   constructor(data: DataGridControllerData) {
     /**
-     * first true = isWebComponent and tells the widget system it's rendering a
-     * component
+     * first true = useShadowDom and tells the widget system it's using a shadow dom
      * second true = delegatesFocus, which tells the widget system to
      * let the component deal with its own focusing.
      */

package/front_end/ui/components/data_grid/DataGridEvents.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2021 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 Cell, type Column, type Row} from './DataGridUtils.js';
+import type {Cell, Column, Row} from './DataGridUtils.js';
 
 export class ColumnHeaderClickEvent extends Event {
   static readonly eventName = 'columnheaderclick';

package/front_end/ui/components/data_grid/DataGridRenderers.ts

@@ -2,10 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import {type CellValue} from './DataGridUtils.js';
+
+import type {CellValue} from './DataGridUtils.js';
+
+const {html} = LitHtml;
 
 export const primitiveRenderer = (value: CellValue): LitHtml.TemplateResult => {
-  return LitHtml.html`${value}`;
+  return html`${value}`;
 };
 
 export const codeBlockRenderer = (value: CellValue): LitHtml.TemplateResult|typeof LitHtml.nothing => {
@@ -13,12 +16,12 @@ export const codeBlockRenderer = (value: CellValue): LitHtml.TemplateResult|type
     return LitHtml.nothing;
   }
   const stringValue = String(value);
-  return LitHtml.html`<code>${stringValue}</code>`;
+  return html`<code>${stringValue}</code>`;
 };
 
 export const iconRenderer = (icon: CellValue): LitHtml.TemplateResult|typeof LitHtml.nothing => {
   if (!icon) {
     return LitHtml.nothing;
   }
-  return LitHtml.html`<div style="display: flex; justify-content: center;">${icon}</div>`;
+  return html`<div style="display: flex; justify-content: center;">${icon}</div>`;
 };

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

@@ -11,6 +11,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import dialogStyles from './dialog.css.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 const IS_DIALOG_SUPPORTED = 'HTMLDialogElement' in globalThis;
@@ -90,7 +92,6 @@ export const MODAL = 'MODAL';
 
 export type DialogOrigin = DialogAnchor|null|(() => DialogAnchor)|typeof MODAL;
 export class Dialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   readonly #forceDialogCloseInDevToolsBound = this.#forceDialogCloseInDevToolsMutation.bind(this);
@@ -673,7 +674,7 @@ export class Dialog extends HTMLElement {
       // we have to explicitly render a slot and hide it with CSS.
       LitHtml.render(
           // clang-format off
-      LitHtml.html`
+      html`
         <slot></slot>
       `,  this.#shadow, {host: this});
       // clang-format on
@@ -681,7 +682,7 @@ export class Dialog extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    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">

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

@@ -2,19 +2,20 @@
 // 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 './Dialog.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {
-  Dialog as DialogElement,
-  type DialogHorizontalAlignment,
-  type DialogVerticalPosition,
-} from './Dialog.js';
+import type {Dialog as DialogElement, DialogHorizontalAlignment, DialogVerticalPosition} from './Dialog.js';
 import iconDialogStyles from './iconDialog.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title of close button for the shortcuts dialog.
@@ -52,7 +53,6 @@ export interface IconDialogData {
 // This class provides a shorthand for a typical use case of Dialog,
 // i.e. Dialog on an icon.
 export class IconDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-icon-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -101,36 +101,36 @@ export class IconDialog extends HTMLElement {
     if (this.#data.closeButton) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      maybeCloseButton = LitHtml.html`
+      maybeCloseButton = html`
         <div id='close-button-container'>
           <div id='close-button-right-aligner'>
-            <${IconButton.Icon.Icon.litTagName}
+            <devtools-icon
               @click=${this.#closeDialog}
               .data=${{
                 iconName: 'cross',
                 color: 'var(--icon-default-hover)',
                 width: '16px',
                 height: '16px',
-              } as IconButton.Icon.IconWithName}
+              }}
               jslog=${VisualLogging.close().track({click: true})}
               title=${i18nString(UIStrings.close)}
-            ></${IconButton.Icon.Icon.litTagName}>
+            ></devtools-icon>
           </div>
         </div>
       `;
-      // clang-format on
+                // clang-format on
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${IconButton.Icon.Icon.litTagName}
+    LitHtml.render(html`
+      <devtools-icon
         @click=${this.#showDialog}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#icon = node as IconButton.Icon.Icon;
         })}
-        .data=${this.#data.iconData as IconButton.Icon.IconWithName}
-      ></${IconButton.Icon.Icon.litTagName}>
-      <${DialogElement.litTagName}
+        .data=${this.#data.iconData}
+      ></devtools-icon>
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .origin=${() => {
@@ -151,7 +151,7 @@ export class IconDialog extends HTMLElement {
         <div id='slot-container'>
           <slot></slot>
         </div>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
     `, this.#shadow, {host: this});
     // clang-format on
   }

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

@@ -11,12 +11,14 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {
   type ClickOutsideDialogEvent,
-  Dialog as DialogElement,
+  type Dialog as DialogElement,
   DialogHorizontalAlignment,
   DialogVerticalPosition,
 } from './Dialog.js';
 import shortcutDialogStyles from './shortcutDialog.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
 
   /**
@@ -60,7 +62,6 @@ export interface ShortcutDialogData {
 }
 
 export class ShortcutDialog extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-shortcut-dialog`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
 
@@ -109,8 +110,8 @@ export class ShortcutDialog extends HTMLElement {
 
     // clang-format off
     LitHtml.render(
-      LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+      html`
+      <devtools-button
         @click=${this.#showDialog}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#showButton = node as Buttons.Button.Button;
@@ -120,8 +121,8 @@ export class ShortcutDialog extends HTMLElement {
           iconName: 'help',
           title: i18nString(UIStrings.showShortcutTitle),
         } as Buttons.Button.ButtonData}
-      ></${Buttons.Button.Button.litTagName}>
-      <${DialogElement.litTagName}
+      ></devtools-button>
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         .showConnector=${true}
         .origin=${() => {
@@ -139,7 +140,7 @@ export class ShortcutDialog extends HTMLElement {
       >
         <div class="keybinds-category-header">
           <span class="keybinds-category-header-text">${i18nString(UIStrings.dialogTitle)}</span>
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             @click=${this.#closeDialog}
             class='close-icon'
             .data=${{
@@ -148,27 +149,27 @@ export class ShortcutDialog extends HTMLElement {
               title: i18nString(UIStrings.close),
             } as Buttons.Button.ButtonData}
             jslog=${VisualLogging.close().track({click: true})}
-          ></${Buttons.Button.Button.litTagName}>
+          ></devtools-button>
         </div>
         <ul class="keybinds-list">
           ${this.#shortcuts.map(shortcut =>
-            LitHtml.html`
+            html`
               <li class="keybinds-list-item">
                 <div class="keybinds-action-name keybinds-list-text">${shortcut.title}</div>
                 ${shortcut.bindings.map((binding, index) =>
-                  LitHtml.html`
+                  html`
                     <div class="keybinds-shortcut keybinds-list-text">
                       <span class="keybinds-key">${binding}</span>
                     </div>
                     ${shortcut.bindings.at(index + 1) ?
-                      LitHtml.html`<span class="keybinds-shortcut-separator"> - </span>`
+                      html`<span class="keybinds-shortcut-separator"> - </span>`
                       : LitHtml.nothing
                     }
                 `)}
               </li>`,
           )}
         </ul>
-      </${DialogElement.litTagName}>
+      </devtools-dialog>
       `,
       this.#shadow, {host: this});
     // clang-format on