chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/application/components/SharedStorageMetadataView.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 '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import sharedStorageMetadataViewStyles from './sharedStorageMetadataView.css.js';
 import {StorageMetadataView} from './StorageMetadataView.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text in SharedStorage Metadata View of the Application panel
@@ -54,7 +57,6 @@ interface SharedStorageMetadataGetter {
 }
 
 export class SharedStorageMetadataView extends StorageMetadataView {
-  static override readonly litTagName = LitHtml.literal`devtools-shared-storage-metadata-view`;
   #sharedStorageMetadataGetter: SharedStorageMetadataGetter;
   #creationTime: Protocol.Network.TimeSinceEpoch|null = null;
   #length: number = 0;
@@ -90,7 +92,7 @@ export class SharedStorageMetadataView extends StorageMetadataView {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       ${await super.renderReportContent()}
       ${this.key(i18nString(UIStrings.creation))}
       ${this.value(this.#renderDateForCreationTime())}
@@ -98,28 +100,28 @@ export class SharedStorageMetadataView extends StorageMetadataView {
       ${this.value(String(this.#length))}
       ${this.key(i18nString(UIStrings.numBytesUsed))}
       ${this.value(String(this.#bytesUsed))}
-      ${this.key(LitHtml.html`${i18nString(UIStrings.entropyBudget)}<${IconButton.Icon.Icon.litTagName} name="info" title=${i18nString(UIStrings.budgetExplanation)}></${IconButton.Icon.Icon.litTagName}>`)}
-      ${this.value(LitHtml.html`${this.#remainingBudget}${this.#renderResetBudgetButton()}`)}`;
+      ${this.key(html`${i18nString(UIStrings.entropyBudget)}<devtools-icon name="info" title=${i18nString(UIStrings.budgetExplanation)}></devtools-icon>`)}
+      ${this.value(html`${this.#remainingBudget}${this.#renderResetBudgetButton()}`)}`;
     // clang-format on
   }
 
   #renderDateForCreationTime(): LitHtml.TemplateResult {
     if (!this.#creationTime) {
-      return LitHtml.html`${i18nString(UIStrings.notYetCreated)}`;
+      return html`${i18nString(UIStrings.notYetCreated)}`;
     }
     const date = new Date(1e3 * (this.#creationTime as number));
-    return LitHtml.html`${date.toLocaleString()}`;
+    return html`${date.toLocaleString()}`;
   }
 
   #renderResetBudgetButton(): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${Buttons.Button.Button.litTagName} .iconName=${'undo'}
-                                           .jslogContext=${'reset-entropy-budget'}
-                                           .size=${Buttons.Button.Size.SMALL}
-                                           .title=${i18nString(UIStrings.resetBudget)}
-                                           .variant=${Buttons.Button.Variant.ICON}
-                                           @click=${this.#resetBudget.bind(this)}></${Buttons.Button.Button.litTagName}>
+    return html`
+      <devtools-button .iconName=${'undo'}
+                       .jslogContext=${'reset-entropy-budget'}
+                       .size=${Buttons.Button.Size.SMALL}
+                       .title=${i18nString(UIStrings.resetBudget)}
+                       .variant=${Buttons.Button.Variant.ICON}
+                       @click=${this.#resetBudget.bind(this)}></devtools-button>
     `;
     // clang-format on
   }

package/front_end/panels/application/components/StackTrace.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 '../../../ui/components/expandable_list/expandable_list.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
-import * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
+import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -14,6 +16,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import stackTraceLinkButtonStyles from './stackTraceLinkButton.css.js';
 import stackTraceRowStyles from './stackTraceRow.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Error message stating that something went wrong when tring to render stack trace
@@ -53,7 +57,6 @@ interface StackTraceRowData {
 }
 
 export class StackTraceRow extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-stack-trace-row`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null = null;
@@ -72,7 +75,7 @@ export class StackTraceRow extends HTMLElement {
       return;
     }
     LitHtml.render(
-        LitHtml.html`
+        html`
       <div class="stack-trace-row">
               <div class="stack-trace-function-name text-ellipsis" title=${this.#stackTraceRowItem.functionName}>
                 ${this.#stackTraceRowItem.functionName}
@@ -80,7 +83,7 @@ export class StackTraceRow extends HTMLElement {
               <div class="stack-trace-source-location">
                 ${
             this.#stackTraceRowItem.link ?
-                LitHtml.html`<div class="text-ellipsis">\xA0@\xA0${this.#stackTraceRowItem.link}</div>` :
+                html`<div class="text-ellipsis">\xA0@\xA0${this.#stackTraceRowItem.link}</div>` :
                 LitHtml.nothing}
               </div>
             </div>
@@ -96,7 +99,6 @@ interface StackTraceLinkButtonData {
 }
 
 export class StackTraceLinkButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-stack-trace-link-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #onShowAllClick: () => void = () => {};
@@ -121,7 +123,7 @@ export class StackTraceLinkButton extends HTMLElement {
     const linkText = this.#expandedView ? i18nString(UIStrings.showLess) :
                                           i18nString(UIStrings.showSMoreFrames, {n: this.#hiddenCallFramesCount});
     LitHtml.render(
-        LitHtml.html`
+        html`
       <div class="stack-trace-row">
           <button class="link" @click=${() => this.#onShowAllClick()}>
             ${linkText}
@@ -133,7 +135,6 @@ export class StackTraceLinkButton extends HTMLElement {
 }
 
 export class StackTrace extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-stack-trace`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #linkifier = new Components.Linkifier.Linkifier();
@@ -182,13 +183,13 @@ export class StackTrace extends HTMLElement {
       }
       if (this.#showHidden || !ignoreListHide) {
         if ('functionName' in item) {
-          expandableRows.push(LitHtml.html`
-          <${StackTraceRow.litTagName} data-stack-trace-row .data=${{
+          expandableRows.push(html`
+          <devtools-stack-trace-row data-stack-trace-row .data=${{
             stackTraceRowItem: item,
-          } as StackTraceRowData}></${StackTraceRow.litTagName}>`);
+          } as StackTraceRowData}></devtools-stack-trace-row>`);
         }
         if ('asyncDescription' in item) {
-          expandableRows.push(LitHtml.html`
+          expandableRows.push(html`
             <div>${item.asyncDescription}</div>
           `);
         }
@@ -200,8 +201,8 @@ export class StackTrace extends HTMLElement {
     if (hiddenCallFramesCount) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      expandableRows.push(LitHtml.html`
-      <${StackTraceLinkButton.litTagName} data-stack-trace-row .data=${{onShowAllClick: this.#onToggleShowAllClick.bind(this), hiddenCallFramesCount, expandedView: this.#showHidden} as StackTraceLinkButtonData}></${StackTraceLinkButton.litTagName}>
+      expandableRows.push(html`
+      <devtools-stack-trace-link-button data-stack-trace-row .data=${{onShowAllClick: this.#onToggleShowAllClick.bind(this), hiddenCallFramesCount, expandedView: this.#showHidden} as StackTraceLinkButtonData}></devtools-stack-trace-link-button>
       `);
       // clang-format on
     }
@@ -214,7 +215,7 @@ export class StackTrace extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(
-        LitHtml.html`
+        html`
           <span>${i18nString(UIStrings.cannotRenderStackTrace)}</span>
         `,
         this.#shadow, {host: this});
@@ -223,12 +224,12 @@ export class StackTrace extends HTMLElement {
 
     const expandableRows = this.createRowTemplates();
     LitHtml.render(
-      LitHtml.html`
-        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${{
+      html`
+        <devtools-expandable-list .data=${{
           rows: expandableRows, title: i18nString(UIStrings.creationStackTrace),
         } as ExpandableList.ExpandableList.ExpandableListData}>
         jslog=${VisualLogging.tree()}>
-        </${ExpandableList.ExpandableList.ExpandableList.litTagName}>
+        </devtools-expandable-list>
       `,
       this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/application/components/StorageMetadataView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/report_view/report_view.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -9,10 +11,12 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as ReportView from '../../../ui/components/report_view/report_view.js';
+import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description The origin of a URL (https://web.dev/same-site-same-origin/#origin).
@@ -108,7 +112,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-storage-metadata-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #storageBucketsModel?: SDK.StorageBucketsModel.StorageBucketsModel;
   #storageKey: SDK.StorageKeyManager.StorageKey|null = null;
@@ -139,10 +142,10 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     return coordinator.write('StorageMetadataView render', async () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
-        <${ReportView.ReportView.Report.litTagName} .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)} as ReportView.ReportView.ReportData}>
+      LitHtml.render(html`
+        <devtools-report .data=${{reportTitle: this.getTitle() ?? i18nString(UIStrings.loading)} as ReportView.ReportView.ReportData}>
           ${await this.renderReportContent()}
-        </${ReportView.ReportView.Report.litTagName}>`, this.#shadow, {host: this});
+        </devtools-report>`, this.#shadow, {host: this});
       // clang-format on
     });
   }
@@ -157,13 +160,11 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
   }
 
   key(content: string|LitHtml.TemplateResult): LitHtml.TemplateResult {
-    return LitHtml.html`<${ReportView.ReportView.ReportKey.litTagName}>${content}</${
-        ReportView.ReportView.ReportKey.litTagName}>`;
+    return html`<devtools-report-key>${content}</devtools-report-key>`;
   }
 
   value(content: string|LitHtml.TemplateResult): LitHtml.TemplateResult {
-    return LitHtml.html`<${ReportView.ReportView.ReportValue.litTagName}>${content}</${
-        ReportView.ReportView.ReportValue.litTagName}>`;
+    return html`<devtools-report-value>${content}</devtools-report-value>`;
   }
 
   async renderReportContent(): Promise<LitHtml.LitTemplate> {
@@ -184,13 +185,13 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
                                                          null;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
         ${this.key(i18nString(UIStrings.origin))}
-        ${this.value(LitHtml.html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}
+        ${this.value(html`<div class="text-ellipsis" title=${origin}>${origin}</div>`)}
         ${(topLevelSite || topLevelSiteIsOpaque) ? this.key(i18nString(UIStrings.topLevelSite)) : LitHtml.nothing}
         ${topLevelSite ? this.value(topLevelSite) : LitHtml.nothing}
         ${topLevelSiteIsOpaque ? this.value(i18nString(UIStrings.opaque)) : LitHtml.nothing}
-        ${thirdPartyReason ? LitHtml.html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : LitHtml.nothing}
+        ${thirdPartyReason ? html`${this.key(i18nString(UIStrings.isThirdParty))}${this.value(thirdPartyReason)}` : LitHtml.nothing}
         ${hasNonce || topLevelSiteIsOpaque ?
         this.key(i18nString(UIStrings.isOpaque)) : LitHtml.nothing}
         ${hasNonce ? this.value(i18nString(UIStrings.yes)) : LitHtml.nothing}
@@ -208,7 +209,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
     const {bucket: {name}, persistent, durability, quota} = this.#storageBucket;
 
     // clang-format off
-    return LitHtml.html`
+    return html`
       ${this.key(i18nString(UIStrings.bucketName))}
       ${this.value(name || 'default')}
       ${this.key(i18nString(UIStrings.persistent))}
@@ -237,15 +238,15 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
 
   #renderBucketControls(): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSection.litTagName}>
-        <${Buttons.Button.Button.litTagName}
+    return html`
+      <devtools-report-section>
+        <devtools-button
           aria-label=${i18nString(UIStrings.deleteBucket)}
           .variant=${Buttons.Button.Variant.PRIMARY}
           @click=${this.#deleteBucket}>
           ${i18nString(UIStrings.deleteBucket)}
-        </${Buttons.Button.Button.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>`;
+        </devtools-button>
+      </devtools-report-section>`;
     // clang-format on
   }
 

package/front_end/panels/application/components/TrustTokensView.ts

@@ -2,18 +2,21 @@
 // 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 * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import trustTokensViewStyles from './trustTokensView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text for the issuer of an item
@@ -57,7 +60,6 @@ const coordinator = RenderCoordinator.RenderCoordinator.RenderCoordinator.instan
 const REFRESH_INTERVAL_MS = 1000;
 
 export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-trust-tokens-storage-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #deleteClickHandler(issuerOrigin: string): void {
@@ -80,10 +82,10 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
     await coordinator.write('Render TrustTokensView', () => {
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
         <div>
           <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
-          <${IconButton.Icon.Icon.litTagName} name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></${IconButton.Icon.Icon.litTagName}>
+          <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
           ${this.#renderGridOrNoDataMessage(tokens)}
         </div>
       `, this.#shadow, {host: this});
@@ -96,7 +98,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #renderGridOrNoDataMessage(tokens: Protocol.Storage.TrustTokens[]): LitHtml.TemplateResult {
     if (tokens.length === 0) {
-      return LitHtml.html`<div class="no-tt-message">${i18nString(UIStrings.noTrustTokensStored)}</div>`;
+      return html`<div class="no-tt-message">${i18nString(UIStrings.noTrustTokensStored)}</div>`;
     }
 
     const gridData: DataGrid.DataGridController.DataGridControllerData = {
@@ -133,10 +135,9 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       },
     };
 
-    return LitHtml.html`
-      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
-        gridData as DataGrid.DataGridController.DataGridControllerData}></${
-        DataGrid.DataGridController.DataGridController.litTagName}>
+    return html`
+      <devtools-data-grid-controller .data=${
+        gridData as DataGrid.DataGridController.DataGridControllerData}></devtools-data-grid-controller>
     `;
   }
 
@@ -157,13 +158,13 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
   #deleteButtonRendererForDataGridCell(issuer: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${Buttons.Button.Button.litTagName} .iconName=${'bin'}
-                                           .jslogContext=${'delete-all'}
-                                           .size=${Buttons.Button.Size.SMALL}
-                                           .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: issuer as string})}
-                                           .variant=${Buttons.Button.Variant.ICON}
-                                           @click=${this.#deleteClickHandler.bind(this, issuer as string)}></${Buttons.Button.Button.litTagName}>
+    return html`
+      <devtools-button .iconName=${'bin'}
+                       .jslogContext=${'delete-all'}
+                       .size=${Buttons.Button.Size.SMALL}
+                       .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: issuer as string})}
+                       .variant=${Buttons.Button.Variant.ICON}
+                       @click=${this.#deleteClickHandler.bind(this, issuer as string)}></devtools-button>
     `;
     // clang-format on
   }

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/split_view/split_view.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -11,7 +13,7 @@ import * as Protocol from '../../../generated/protocol.js';
 import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
-import * as SplitView from '../../../ui/components/split_view/split_view.js';
+import type * as SplitView from '../../../ui/components/split_view/split_view.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import emptyWidgetStyles from '../../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../../ui/legacy/legacy.js';
@@ -23,6 +25,8 @@ import type * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description DropDown title for filtering preloading attempts by rule set
@@ -223,9 +227,8 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     };
 
     LitHtml.render(
-        LitHtml.html`
-        <${SplitView.SplitView.SplitView.litTagName} .horizontal=${
-            true} style="--min-sidebar-size: max(100vh-200px, 0px)">
+        html`
+        <devtools-split-view .horizontal=${true} style="--min-sidebar-size: max(100vh-200px, 0px)">
           <div slot="main" class="overflow-auto" style="height: 100%">
             ${this.ruleSetGrid}
           </div>
@@ -233,9 +236,9 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           jslog=${VisualLogging.section('rule-set-details')}>
             ${this.ruleSetDetails}
           </div>
-        </${SplitView.SplitView.SplitView.litTagName}>
+        </devtools-split-view>
         <div class="pretty-print-button" style="border-top: 1px solid var(--sys-color-divider)">
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           .iconName=${'brackets'}
           .toggledIconName=${'brackets'}
           .toggled=${this.shouldPrettyPrint}
@@ -245,7 +248,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           .size=${Buttons.Button.Size.SMALL}
           @click=${onPrettyPrintToggle}
           jslog=${VisualLogging.action().track({click: true}).context('preloading-status-panel-pretty-print')}>
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
         </div>
         `,
         this.contentElement, {host: this});
@@ -309,7 +312,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
     this.render();
   }
 
-  getInfobarContainerForTest(): HTMLDivElement {
+  getInfobarContainerForTest(): HTMLElement {
     return this.warningsView.contentElement;
   }
 
@@ -374,15 +377,15 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
 
     this.preloadingGrid.addEventListener('cellfocused', this.onPreloadingGridCellFocused.bind(this));
     LitHtml.render(
-        LitHtml.html`
-        <${SplitView.SplitView.SplitView.litTagName} .horizontal=${true} style="--min-sidebar-size: 0px">
+        html`
+        <devtools-split-view .horizontal=${true} style="--min-sidebar-size: 0px">
           <div slot="main" class="overflow-auto" style="height: 100%">
             ${this.preloadingGrid}
           </div>
           <div slot="sidebar" class="overflow-auto" style="height: 100%">
             ${this.preloadingDetails}
           </div>
-        </${SplitView.SplitView.SplitView.litTagName}>`,
+        </devtools-split-view>`,
         vbox.contentElement, {host: this});
 
     vbox.show(this.contentElement);

package/front_end/panels/application/preloading/components/MismatchedPreloadingGrid.ts

@@ -2,13 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/data_grid/data_grid.js';
+
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Diff from '../../../../third_party/diff/diff.js';
-import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -99,7 +101,6 @@ export interface MismatchedPreloadingGridData {
 
 // Grid component to show prerendering attempts.
 export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-mismatched-preloading-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: MismatchedPreloadingGridData|null = null;
@@ -153,9 +154,9 @@ export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.Wrappa
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+      <devtools-data-grid-controller .data=${
         reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-      </${DataGrid.DataGridController.DataGridController.litTagName}>
+      </devtools-data-grid-controller>
     `, this.#shadow, {host: this});
     // clang-format on
   }
@@ -166,7 +167,7 @@ export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.Wrappa
           additionalProps: {'color'?: string, 'text-decoration'?: string}, s: string): LitHtml.TemplateResult {
         // Don't insert spaces to prevent spaces for inline blocks.
         // clang-format off
-        return LitHtml.html`<span style=${LitHtml.Directives.styleMap(additionalProps)}>${s}</span>`;
+        return html`<span style=${LitHtml.Directives.styleMap(additionalProps)}>${s}</span>`;
         // clang-format on
       }
 
@@ -187,7 +188,7 @@ export class MismatchedPreloadingGrid extends LegacyWrapper.LegacyWrapper.Wrappa
         }
       }, LitHtml.nothing as unknown as LitHtml.TemplateResult);
 
-      return LitHtml.html`<div>${contents}</div>`;
+      return html`<div>${contents}</div>`;
     }
 
     assertNotNullOrUndefined(this.#data);