chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/ui/components/menus/Menu.ts

@@ -13,6 +13,8 @@ import menuStyles from './menu.css.js';
 import menuGroupStyles from './menuGroup.css.js';
 import menuItemStyles from './menuItem.css.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export interface MenuData {
@@ -64,7 +66,6 @@ export interface MenuData {
 const selectedItemCheckmark = new URL('../../../Images/checkmark.svg', import.meta.url).toString();
 
 export class Menu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #dialog: Dialogs.Dialog.Dialog|null = null;
@@ -385,8 +386,8 @@ export class Menu extends HTMLElement {
       throw new Error('Menu render was not scheduled');
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${Dialogs.Dialog.Dialog.litTagName}
+    LitHtml.render(html`
+      <devtools-dialog
         @clickoutsidedialog=${this.#closeDialog}
         @forceddialogclose=${this.#closeDialog}
         .position=${this.position}
@@ -403,7 +404,7 @@ export class Menu extends HTMLElement {
           <slot @click=${this.#handleItemClick}>
           </slot>
         </span>
-      </${Dialogs.Dialog.Dialog.litTagName}>
+      </devtools-dialog>
     `, this.#shadow, { host: this });
     // clang-format on
   }
@@ -428,7 +429,6 @@ interface MenuItemData {
 }
 
 export class MenuItem extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-item`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {
@@ -475,7 +475,7 @@ export class MenuItem extends HTMLElement {
     }
     // clang-format off
 
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <span class=${LitHtml.Directives.classMap({
         'menu-item': true,
         'is-selected-item': this.selected,
@@ -494,7 +494,6 @@ interface MenuGroupData {
 }
 
 export class MenuGroup extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-menu-group`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   connectedCallback(): void {
@@ -519,7 +518,7 @@ export class MenuGroup extends HTMLElement {
       throw new Error('MenuGroup render was not scheduled');
     }
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <span class="menu-group">
         <span class="menu-group-label">${this.name}</span>
         <slot></slot>

package/front_end/ui/components/menus/SelectMenu.test.ts

@@ -12,6 +12,8 @@ import * as Coordinator from '../render_coordinator/render_coordinator.js';
 
 import * as Menus from './menus.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 async function createMenu(): Promise<Menus.SelectMenu.SelectMenu> {
@@ -80,7 +82,7 @@ describeWithLocale('SelectMenu', () => {
       return;
     }
     firsItem.selected = true;
-    menu.buttonTitle = () => LitHtml.html`Override Title`;
+    menu.buttonTitle = () => html`Override Title`;
     Helpers.renderElementIntoDOM(menu);
     await coordinator.done();
     assert.isNotNull(menu.shadowRoot);

package/front_end/ui/components/menus/SelectMenu.ts

@@ -10,7 +10,6 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Dialogs from '../dialogs/dialogs.js';
 
 import {
-  Menu,
   MenuGroup,
   type MenuItemSelectedEvent,
   type MenuItemValue,
@@ -18,6 +17,8 @@ import {
 import selectMenuStyles from './selectMenu.css.js';
 import selectMenuButtonStyles from './selectMenuButton.css.js';
 
+const {html} = LitHtml;
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export interface SelectMenuData {
@@ -86,7 +87,6 @@ type TitleCallback = () => LitHtml.TemplateResult;
 const deployMenuArrow = new URL('../../../Images/triangle-down.svg', import.meta.url).toString();
 
 export class SelectMenu extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #button: SelectMenuButton|null = null;
@@ -225,13 +225,14 @@ export class SelectMenu extends HTMLElement {
     this.dispatchEvent(new SelectMenuSideButtonClickEvent());
   }
 
-  #maybeGetArrowXPosition(): number|void {
+  #maybeGetArrowXPosition(): number {
     if (this.showConnector) {
       // This block is not wrapped in a `coordinator.read` because this function's
       // only invocation is already wrapped in one (in Dialog.showDialog).
       const arrowBounds = this.#getButton().getBoundingClientRect();
       return (arrowBounds.left + arrowBounds.right) / 2;
     }
+    return NaN;
   }
 
   #getButtonText(): LitHtml.TemplateResult|string {
@@ -242,25 +243,25 @@ export class SelectMenu extends HTMLElement {
     const buttonLabel = this.#getButtonText();
     if (!this.sideButton) {
       // clang-format off
-      return LitHtml.html`
-          <${SelectMenuButton.litTagName}
+      return html`
+          <devtools-select-menu-button
             @selectmenubuttontrigger=${this.#showMenu}
             .open=${this.#open} .showArrow=${this.showArrow}
             .arrowDirection=${this.position}
             .disabled=${this.disabled}
             .jslogContext=${this.jslogContext}>
               ${buttonLabel}
-            </${SelectMenuButton.litTagName}>
+            </devtools-select-menu-button>
         `;
       // clang-format on
     }
 
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button id="side-button" @click=${this.#sideButtonClicked} ?disabled=${this.disabled}>
         ${buttonLabel}
       </button>
-      <${SelectMenuButton.litTagName}
+      <devtools-select-menu-button
         @click=${this.#showMenu}
         @selectmenubuttontrigger=${this.#showMenu}
         .singleArrow=${true}
@@ -268,7 +269,7 @@ export class SelectMenu extends HTMLElement {
         .showArrow=${true}
         .arrowDirection=${this.position}
         .disabled=${this.disabled}>
-      </${SelectMenuButton.litTagName}>
+      </devtools-select-menu-button>
     `;
     // clang-format on
   }
@@ -293,8 +294,8 @@ export class SelectMenu extends HTMLElement {
       throw new Error('SelectMenu render was not scheduled');
     }
     LitHtml.render(
-        LitHtml.html`
-      <${Menu.litTagName}
+        html`
+      <devtools-menu
         @menucloserequest=${this.#onMenuClose}
         @menuitemselected=${this.#onItemSelected}
         .position=${this.position}
@@ -303,11 +304,11 @@ export class SelectMenu extends HTMLElement {
         .showDivider=${this.showDivider}
         .showSelectedItem=${this.showSelectedItem}
         .open=${this.#open}
-        .getConnectorCustomXPosition=${this.#maybeGetArrowXPosition.bind(this)}
+        .getConnectorCustomXPosition=${this.showConnector ? this.#maybeGetArrowXPosition.bind(this) : null}
       >
       <slot>
       </slot>
-      </${Menu.litTagName}>
+      </devtools-menu>
       ${this.#renderButton()}
     `,
         this.#shadow, {host: this});
@@ -323,7 +324,6 @@ export interface SelectMenuButtonData {
   jslogContext: string;
 }
 export class SelectMenuButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-select-menu-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #showButton: HTMLButtonElement|null = null;
@@ -435,10 +435,10 @@ export class SelectMenuButton extends HTMLElement {
     if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
       throw new Error('SelectMenuItem render was not scheduled');
     }
-    const arrow = this.#props.showArrow ? LitHtml.html`<span id="arrow"></span>` : LitHtml.nothing;
+    const arrow = this.#props.showArrow ? html`<span id="arrow"></span>` : LitHtml.nothing;
     const classMap = {'single-arrow': this.#props.singleArrow};
     // clang-format off
-      const buttonTitle = LitHtml.html`
+      const buttonTitle = html`
       <span id="button-label-wrapper">
         <span id="label" ?witharrow=${this.showArrow} class=${LitHtml.Directives.classMap(classMap)}><slot></slot></span>
         ${arrow}
@@ -446,7 +446,7 @@ export class SelectMenuButton extends HTMLElement {
       `;
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <button aria-haspopup="true" aria-expanded="false" class="show" @keydown=${this.#handleButtonKeyDown} @click=${this.#handleClick} ?disabled=${this.disabled} jslog=${VisualLogging.dropDown(this.jslogContext)}>${buttonTitle}</button>
     `, this.#shadow, { host: this });
     // clang-format on

package/front_end/ui/components/menus/selectMenu.css

@@ -6,15 +6,18 @@
 
 :host {
   border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 3px;
+  border-radius: var(--sys-shape-corner-extra-small);
   width: fit-content;
   display: flex;
   align-items: center;
-  background-color: var(--override-select-menu-background-color, var(--sys-color-cdt-base-container));
+  background-color: var(--sys-color-cdt-base-container);
 }
 
 :host([has-open-dialog]) {
-  background-color: var(--override-select-menu-active-background-color, var(--sys-color-neutral-container));
+  outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+  background:
+    linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+    linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
 }
 
 button {
@@ -22,7 +25,7 @@ button {
 }
 
 #side-button {
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: 1px solid var(--sys-color-neutral-outline);
   border-radius: 3px 0 0 3px;
   border-right: none;
   height: 100%;
@@ -31,7 +34,7 @@ button {
 }
 
 button:disabled {
-  cursor: not-allowed;
+  pointer-events: none;
 }
 
 @keyframes slideIn {

package/front_end/ui/components/menus/selectMenuButton.css

@@ -5,7 +5,7 @@
  */
 
 :host {
-  height: 100%;
+  height: var(--sys-size-9);
   width: 100%;
   display: block;
 }
@@ -17,13 +17,27 @@
   height: 100%;
   width: 100%;
   border: none;
-  border-radius: var(--override-select-menu-show-button-border-radius);
-  padding: var(--override-select-menu-show-button-padding, 1px 6px);
-}
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: 0 var(--sys-size-4) 0 var(--sys-size-5);
+
+  &:hover {
+    background-color: var(--sys-color-state-hover-on-subtle);
+  }
+
+  &:active {
+    background-color: var(--sys-color-state-ripple-neutral-on-subtle);
+  }
 
-.show:focus-visible {
-  outline: 2px solid var(--sys-color-state-focus-ring);
-  outline-offset: 2px;
+  &:hover:active {
+    background:
+      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
+      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
+  }
+
+  &:focus-visible {
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: -1px;
+  }
 }
 
 #button-label-wrapper {
@@ -45,7 +59,7 @@
 }
 
 #label[witharrow] {
-  padding: var(--override-select-menu-label-with-arrow-padding, 0 10px 0 0);
+  padding: 0 10px 0 0;
   text-align: left;
 }
 
@@ -62,15 +76,12 @@
   height: 14px;
   display: inline-block;
   mask-repeat: no-repeat;
-  background-color: var(--override-throttling-icon-and-text-color, var(--override-select-menu-arrow-color, var(--sys-color-on-surface)));
-  transform: rotate(var(--arrow-angle));
-  transform-origin: center;
-  transition: 200ms;
+  background-color: var(--sys-color-on-surface-subtle);
 }
 
 .single-arrow {
   border-radius: 0 3px 3px 0;
-  border: 1px solid var(--override-select-menu-border, var(--sys-color-neutral-outline));
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   height: 100%;
   aspect-ratio: 1 / 1;
   padding: 0;
@@ -79,14 +90,15 @@
   align-items: center;
 }
 
-button[aria-expanded="true"] #arrow {
-  transform: rotate(calc(var(--arrow-angle) + 180deg));
-}
-
 button {
   background: none;
 }
 
 button[disabled] {
   color: var(--sys-color-state-disabled);
+  background-color: var(--sys-color-state-disabled-container);
+
+  #arrow {
+    background-color: var(--sys-color-state-disabled);
+  }
 }

package/front_end/ui/components/node_text/NodeText.ts

@@ -15,7 +15,6 @@ export interface NodeTextData {
 }
 
 export class NodeText extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-node-text`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #nodeTitle: string = '';

package/front_end/ui/components/panel_feedback/FeedbackButton.ts

@@ -9,6 +9,8 @@ import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as Buttons from '../buttons/buttons.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description The title of the button that leads to the feedback form.
@@ -25,7 +27,6 @@ export interface FeedbackButtonData {
   feedbackUrl: Platform.DevToolsPath.UrlString;
 }
 export class FeedbackButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-feedback-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -48,13 +49,13 @@ export class FeedbackButton extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+    LitHtml.render(html`
+      <devtools-button
           @click=${this.#onFeedbackClick}
           .iconUrl=${feedbackIconUrl}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'feedback'}
-      >${i18nString(UIStrings.feedback)}</${Buttons.Button.Button.litTagName}>
+      >${i18nString(UIStrings.feedback)}</devtools-button>
       `, this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/ui/components/panel_feedback/PanelFeedback.ts

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../legacy/legacy.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
-import * as IconButton from '../icon_button/icon_button.js';
 
 import panelFeedbackStyles from './panelFeedback.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Introduction sentence to convey the feature is being actively worked on and we are looking for feedback.
@@ -42,7 +45,6 @@ export interface PanelFeedbackData {
   quickStartLinkText: string;
 }
 export class PanelFeedback extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-panel-feedback`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -67,15 +69,15 @@ export class PanelFeedback extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="preview">
         <h2 class="flex">
-          <${IconButton.Icon.Icon.litTagName} .data=${{
+          <devtools-icon .data=${{
             iconPath: previewFeatureUrl,
             width: '20px',
             height: '20px',
             color: 'var(--icon-primary)',
-          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}> ${i18nString(UIStrings.previewFeature)}
+          }}></devtools-icon> ${i18nString(UIStrings.previewFeature)}
         </h2>
         <p>${i18nString(UIStrings.previewText)} <x-link href=${this.#props.feedbackUrl} jslog=${VisualLogging.link('feedback').track({click: true})}>${i18nString(UIStrings.previewTextFeedbackLink)}</x-link></p>
         <div class="video">

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/legacy/legacy.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as IconButton from '../icon_button/icon_button.js';
 import * as Input from '../input/input.js';
 
 import previewToggleStyles from './previewToggle.css.js';
@@ -40,7 +41,6 @@ const str_ = i18n.i18n.registerUIStrings('ui/components/panel_feedback/PreviewTo
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class PreviewToggle extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-preview-toggle`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #name = '';
@@ -72,14 +72,14 @@ export class PreviewToggle extends HTMLElement {
       html`
       <div class="container">
         <label class="experiment-preview">
-          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name}/>
-          <${IconButton.Icon.Icon.litTagName} .data=${{
+          <input type="checkbox" ?checked=${checked} @change=${this.#checkboxChanged} aria-label=${this.#name} />
+          <devtools-icon .data=${{
             iconName: 'experiment',
             width: '16px',
             height: '16px',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>${this.#name}
+          }}>
+          </devtools-icon>${this.#name}
         </label>
         <div class="spacer"></div>
         ${this.#feedbackURL && !this.#helperText

package/front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.ts

@@ -6,8 +6,9 @@ import * as ComponentHelpers from '../../components/helpers/helpers.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import panelIntroductionStepsStyles from './panelIntroductionSteps.css.js';
 
+const {html} = LitHtml;
+
 export class PanelIntroductionSteps extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-panel-introduction-steps`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
 
@@ -22,7 +23,7 @@ export class PanelIntroductionSteps extends HTMLElement {
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <h1><slot name="title">slot: title</slot></h1>
 
       <ol class="intro-steps">

package/front_end/ui/components/report_view/ReportView.test.ts

@@ -7,6 +7,8 @@ import * as LitHtml from '../../lit-html/lit-html.js';
 
 import * as ReportView from './report_view.js';
 
+const {html} = LitHtml;
+
 describe('ReportView', () => {
   describe('header', () => {
     it('shows the provided report title', () => {
@@ -25,9 +27,9 @@ describe('ReportView', () => {
       const report = new ReportView.ReportView.Report();
       // clang-format off
       LitHtml.render(
-          LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>This is the key</${ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>This is the value</${ReportView.ReportView.ReportValue.litTagName}>
+          html`
+        <devtools-report-key>This is the key</devtools-report-key>
+        <devtools-report-value>This is the value</devtools-report-value>
       `,
           report, {host: this});
       // clang-format on

package/front_end/ui/components/report_view/ReportView.ts

@@ -11,6 +11,8 @@ import reportSectionDividerStyles from './reportSectionDivider.css.js';
 import reportSectionHeaderStyles from './reportSectionHeader.css.js';
 import reportValueStyles from './reportValue.css.js';
 
+const {html} = LitHtml;
+
 /**
  * The `Report` component can be used to display static information. A report
  * usually consists of multiple sections where each section has rows of name/value
@@ -19,7 +21,7 @@ import reportValueStyles from './reportValue.css.js';
  *
  * Example:
  * ```
- *   <devtools-report .data=${{reportTitle: 'Optional Title'} as Components.ReportView.ReportData}>
+ *   <devtools-report .data=${{reportTitle: 'Optional Title'}}>
  *     <devtools-report-section-header>Some Header</devtools-report-section-header>
  *     <devtools-report-key>Key (rendered in the left column)</devtools-report-key>
  *     <devtools-report-value>Value (rendered in the right column)</devtools-report-value>
@@ -34,7 +36,6 @@ export interface ReportData {
   reportTitle: string;
 }
 export class Report extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reportTitle: string = '';
@@ -52,9 +53,9 @@ export class Report extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="content">
-        ${this.#reportTitle ? LitHtml.html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
+        ${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
         <slot></slot>
       </div>
     `, this.#shadow, {host: this});
@@ -67,7 +68,6 @@ export interface ReportSectionData {
 }
 
 export class ReportSection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [reportSectionStyles];
@@ -76,7 +76,7 @@ export class ReportSection extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section">
         <slot></slot>
       </div>
@@ -86,7 +86,6 @@ export class ReportSection extends HTMLElement {
 }
 
 export class ReportSectionHeader extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-section-header`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -97,7 +96,7 @@ export class ReportSectionHeader extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section-header">
         <slot></slot>
       </div>
@@ -107,7 +106,6 @@ export class ReportSectionHeader extends HTMLElement {
 }
 
 export class ReportSectionDivider extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-divider`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -118,7 +116,7 @@ export class ReportSectionDivider extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="section-divider">
       </div>
     `, this.#shadow, {host: this});
@@ -127,7 +125,6 @@ export class ReportSectionDivider extends HTMLElement {
 }
 
 export class ReportKey extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-key`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -138,7 +135,7 @@ export class ReportKey extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="key"><slot></slot></div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -146,7 +143,6 @@ export class ReportKey extends HTMLElement {
 }
 
 export class ReportValue extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-report-value`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
@@ -157,7 +153,7 @@ export class ReportValue extends HTMLElement {
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="value"><slot></slot></div>
     `, this.#shadow, {host: this});
     // clang-format on