chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,6 +2,9 @@
 // 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 '../../../../ui/components/request_link_icon/request_link_icon.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
@@ -12,8 +15,8 @@ import * as Logs from '../../../../models/logs/logs.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 * as RequestLinkIcon from '../../../../ui/components/request_link_icon/request_link_icon.js';
+import type * as ReportView from '../../../../ui/components/report_view/report_view.js';
+import type * as RequestLinkIcon from '../../../../ui/components/request_link_icon/request_link_icon.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
@@ -23,6 +26,8 @@ import preloadingDetailsReportViewStyles from './preloadingDetailsReportView.css
 import * as PreloadingString from './PreloadingString.js';
 import {prefetchFailureReason, prerenderFailureReason, ruleSetLocationShort} from './PreloadingString.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text in PreloadingDetailsReportView of the Application panel
@@ -127,7 +132,6 @@ interface PreloadingDetailsReportViewDataInternal {
 }
 
 export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-details-report-view`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: PreloadingDetailsReportViewData = null;
@@ -146,7 +150,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       if (this.#data === null) {
         // Disabled until https://crbug.com/1079231 is fixed.
         // clang-format off
-        LitHtml.render(LitHtml.html`
+        LitHtml.render(html`
           <div class="preloading-noselected">
             <div>
               <p>${i18nString(UIStrings.selectAnElementForMoreDetails)}</p>
@@ -162,26 +166,24 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
-        <${ReportView.ReportView.Report.litTagName} .data=${{reportTitle: 'Speculative Loading Attempt'} as ReportView.ReportView.ReportData}
+      LitHtml.render(html`
+        <devtools-report .data=${{reportTitle: 'Speculative Loading Attempt'} as ReportView.ReportView.ReportData}
         jslog=${VisualLogging.section('preloading-details')}>
-          <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.detailsDetailedInformation)}</${
-            ReportView.ReportView.ReportSectionHeader.litTagName}>
+          <devtools-report-section-header>${i18nString(UIStrings.detailsDetailedInformation)}</devtools-report-section-header>
 
           ${this.#url()}
           ${this.#action()}
 
-          <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsStatus)}</${
-            ReportView.ReportView.ReportKey.litTagName}>
-          <${ReportView.ReportView.ReportValue.litTagName}>
+          <devtools-report-key>${i18nString(UIStrings.detailsStatus)}</devtools-report-key>
+          <devtools-report-value>
             ${detailedStatus}
-          </${ReportView.ReportView.ReportValue.litTagName}>
+          </devtools-report-value>
 
           ${this.#maybePrefetchFailureReason()}
           ${this.#maybePrerenderFailureReason()}
 
           ${this.#data.ruleSets.map(ruleSet => this.#renderRuleSet(ruleSet, pageURL))}
-        </${ReportView.ReportView.Report.litTagName}>
+        </devtools-report>
       `, this.#shadow, {host: this});
       // clang-format on
     });
@@ -195,8 +197,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
     if (attempt.action === Protocol.Preload.SpeculationAction.Prefetch && attempt.requestId !== undefined) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      value = LitHtml.html`
-          <${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}
+      value = html`
+          <devtools-request-link-icon
             .data=${
               {
                 affectedRequest: {
@@ -209,12 +211,12 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
               } as RequestLinkIcon.RequestLinkIcon.RequestLinkIconData
             }
           >
-          </${RequestLinkIcon.RequestLinkIcon.RequestLinkIcon.litTagName}>
+          </devtools-request-link-icon>
       `;
     } else {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      value = LitHtml.html`
+      value = html`
           <div class="text-ellipsis" title=${attempt.key.url}>${attempt.key.url}</div>
       `;
       // clang-format on
@@ -222,12 +224,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18n.i18n.lockedString('URL')}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18n.i18n.lockedString('URL')}</devtools-report-key>
+        <devtools-report-value>
           ${value}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
     // clang-format on
   }
@@ -261,8 +262,8 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       };
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      maybeInspectButton = LitHtml.html`
-          <${Buttons.Button.Button.litTagName}
+      maybeInspectButton = html`
+          <devtools-button
             @click=${inspect}
             .title=${i18nString(UIStrings.buttonClickToInspect)}
             .size=${Buttons.Button.Size.SMALL}
@@ -271,22 +272,21 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             jslog=${VisualLogging.action('inspect-prerendered-page').track({click: true})}
           >
             ${i18nString(UIStrings.buttonInspect)}
-          </${Buttons.Button.Button.litTagName}>
+          </devtools-button>
       `;
       // clang-format on
     })();
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsAction)}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsAction)}</devtools-report-key>
+        <devtools-report-value>
           <div class="text-ellipsis" title="">
             ${action}
             ${maybeInspectButton}
           </div>
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
     // clang-format on
   }
@@ -304,12 +304,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsFailureReason)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+        <devtools-report-value>
           ${failureDescription}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
   }
 
@@ -326,12 +325,11 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsFailureReason)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+        <devtools-report-key>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-key>
+        <devtools-report-value>
           ${failureReason}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
     `;
   }
 
@@ -343,10 +341,9 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.detailsRuleSet)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.detailsRuleSet)}</devtools-report-key>
+      <devtools-report-value>
         <div class="text-ellipsis" title="">
           <button class="link" role="link"
             @click=${revealRuleSetView}
@@ -360,7 +357,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
             ${location}
           </button>
         </div>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
     // clang-format on
   }

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.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 type * as Platform from '../../../../core/platform/platform.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -10,13 +12,14 @@ import * as Dialogs from '../../../../ui/components/dialogs/dialogs.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 Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * 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';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
 import preloadingDisabledInfobarStyles from './preloadingDisabledInfobar.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Infobar text for disabled case
@@ -96,7 +99,6 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-disabled-infobar`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
@@ -140,13 +142,13 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div id='container'>
         <span id='header'>
           ${header}
         </span>
 
-        <${Dialogs.IconDialog.IconDialog.litTagName}
+        <devtools-icon-dialog
           .data=${{
             iconData: {
               iconName: 'info',
@@ -163,7 +165,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
           jslog=${VisualLogging.dialog('preloading-disabled').track({resize: true, keydown: 'Escape'})}
         >
           ${this.#dialogContents()}
-        </${Dialogs.IconDialog.IconDialog.litTagName}>
+        </devtools-icon-dialog>
       </div>
     `;
     // clang-format on
@@ -182,20 +184,20 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
         .data = {iconName: 'open-externally', color: 'var(--icon-default-hover)', width: '16px', height: '16px'};
     iconLink.append(iconLinkIcon);
 
-    return LitHtml.html`
+    return html`
       <div id='contents'>
         <div id='title'>${i18nString(UIStrings.titleReasonsPreventingPreloading)}</div>
 
-        <${ReportView.ReportView.Report.litTagName}>
+        <devtools-report>
           ${this.#maybeDisalebByPreference()}
           ${this.#maybeDisalebByDataSaver()}
           ${this.#maybeDisalebByBatterySaver()}
           ${this.#maybeDisalebByHoldbackPrefetchSpeculationRules()}
           ${this.#maybeDisalebByHoldbackPrerenderSpeculationRules()}
 
-          <${ReportView.ReportView.ReportSectionDivider.litTagName}>
-          </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        </${ReportView.ReportView.Report.litTagName}>
+          <devtools-report-divider>
+          </devtools-report-divider>
+        </devtools-report>
 
         <div id='footer'>
           ${learnMoreLink}
@@ -210,7 +212,7 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
+    return html`
       <div class='key'>
         ${header}
       </div>

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

@@ -2,14 +2,17 @@
 // 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 '../../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../../core/common/common.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 DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
+import type * as IconButton from '../../../../ui/components/icon_button/icon_button.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';
@@ -49,7 +52,6 @@ export interface PreloadingGridRow {
 
 // Grid component to show prerendering attempts.
 export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: PreloadingGridData|null = null;
@@ -112,9 +114,9 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
     // clang-format off
     render(html`
       <div class="preloading-container">
-        <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+        <devtools-data-grid-controller .data=${
             reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
+        </devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -123,18 +125,18 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
   #buildReportRows(): DataGrid.DataGridUtils.Row[] {
     function statusRenderer(statusString: string, status: SDK.PreloadingModel.PreloadingStatus): LitHtml.LitTemplate {
       if (status !== SDK.PreloadingModel.PreloadingStatus.FAILURE) {
-        return LitHtml.html`<div>${statusString}</div>`;
+        return html`<div>${statusString}</div>`;
       }
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      return LitHtml.html`
+      return html`
         <div
           style=${LitHtml.Directives.styleMap({
             color: 'var(--sys-color-error)',
           })}
         >
-          <${IconButton.Icon.Icon.litTagName}
+          <devtools-icon
             .data=${{
               iconName: 'cross-circle-filled',
               color: 'var(--sys-color-error)',
@@ -145,7 +147,7 @@ export class PreloadingGrid extends LegacyWrapper.LegacyWrapper.WrappableCompone
               'vertical-align': 'sub',
             })}
           >
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
           ${statusString}
         </div>
       `;

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

@@ -2,10 +2,12 @@
 // 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 {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import type * as SDK from '../../../../core/sdk/sdk.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';
@@ -37,7 +39,6 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = LitHtml;
 
 export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-preloading-mismatched-headers-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: SDK.PreloadingModel.PrerenderAttempt|null = null;
@@ -94,9 +95,9 @@ export class PreloadingMismatchedHeadersGrid extends LegacyWrapper.LegacyWrapper
     // clang-format off
       render(html`
         <div class="preloading-container">
-          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+          <devtools-data-grid-controller .data=${
               reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </${DataGrid.DataGridController.DataGridController.litTagName}>
+          </devtools-data-grid-controller>
         </div>
       `, this.#shadow, {host: this});
     // clang-format on

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

@@ -682,6 +682,8 @@ export function prerenderFailureReason(attempt: SDK.PreloadingModel.PrerenderAtt
     case Protocol.Preload.PrerenderFinalStatus.WindowClosed:
     case Protocol.Preload.PrerenderFinalStatus.SlowNetwork:
     case Protocol.Preload.PrerenderFinalStatus.OtherPrerenderedPageActivated:
+    case Protocol.Preload.PrerenderFinalStatus.V8OptimizerDisabled:
+    case Protocol.Preload.PrerenderFinalStatus.PrerenderFailedDuringPrefetch:
       // TODO(crbug.com/350870118): Add message for this.
       return '';
     default:

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

@@ -8,7 +8,7 @@ import type * as Protocol from '../../../../generated/protocol.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
 import * as CodeHighlighter from '../../../../ui/components/code_highlighter/code_highlighter.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 LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TextEditor from '../../../../ui/components/text_editor/text_editor.js';
@@ -17,6 +17,8 @@ import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 
 import ruleSetDetailsViewStyles from './RuleSetDetailsView.css.js';
 
+const {html} = LitHtml;
+
 type RuleSet = Protocol.Preload.RuleSet;
 
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
@@ -54,7 +56,7 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
         <div class="content">
           <div class="ruleset-header" id="ruleset-url">${this.#data?.url || SDK.TargetManager.TargetManager.instance().inspectedURL()}</div>
           ${this.#maybeError()}
@@ -77,16 +79,16 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="ruleset-header">
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           .data=${{
             iconName: 'cross-circle',
             color: 'var(--icon-error)',
             width: '16px',
             height: '16px',
           } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         <span id="error-message-text">${this.#data.errorMessage}</span>
       </div>
     `;
@@ -107,10 +109,10 @@ export class RuleSetDetailsView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     // TODO(https://crbug.com/1425354): Add Raw button.
-    return LitHtml.html`
-      <${TextEditor.TextEditor.TextEditor.litTagName} .style.flexGrow = '1' .state=${
+    return html`
+      <devtools-text-editor .style.flexGrow=${'1'} .state=${
         this.#editorState
-      }></${TextEditor.TextEditor.TextEditor.litTagName}>
+      }></devtools-text-editor>
     `;
     // clang-format on
   }

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

@@ -2,14 +2,17 @@
 // 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 '../../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../../core/common/common.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 * as Protocol from '../../../../generated/protocol.js';
-import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
+import type * as IconButton from '../../../../ui/components/icon_button/icon_button.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';
@@ -20,6 +23,8 @@ import * as PreloadingHelper from '../helper/helper.js';
 import * as PreloadingString from './PreloadingString.js';
 import ruleSetGridStyles from './ruleSetGrid.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Column header: Short URL of rule set.
@@ -61,7 +66,6 @@ export interface RuleSetGridRow {
 
 // Grid component to show SpeculationRules rule sets.
 export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-ruleset-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: RuleSetGridData|null = null;
@@ -106,12 +110,12 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="ruleset-container"
       jslog=${VisualLogging.pane('preloading-rules')}>
-        <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+        <devtools-data-grid-controller .data=${
             reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
+        </devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -166,7 +170,7 @@ function ruleSetRenderer(
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInElements}
         title=${i18nString(UIStrings.buttonClickToRevealInElementsPanel)}
@@ -181,7 +185,7 @@ function ruleSetRenderer(
         })}
         jslog=${VisualLogging.action('reveal-in-elements').track({click: true})}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           .data=${{
             iconName: 'code-circle',
             color: 'var(--icon-link)',
@@ -192,7 +196,7 @@ function ruleSetRenderer(
             'vertical-align': 'sub',
           })}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${location}
       </button>
     `;
@@ -221,7 +225,7 @@ function ruleSetRenderer(
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInNetwork}
         title=${i18nString(UIStrings.buttonClickToRevealInNetworkPanel)}
@@ -235,7 +239,7 @@ function ruleSetRenderer(
           'padding-inline-end': '0',
         })}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
          .data=${{
             iconName: 'arrow-up-down-circle',
             color: 'var(--icon-link)',
@@ -246,7 +250,7 @@ function ruleSetRenderer(
             'vertical-align': 'sub',
           })}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${location}
       </button>
     `;
@@ -263,7 +267,7 @@ function ruleSetRenderer(
     return ruleSetRendererOutOfDocument(ruleSet, location);
   }
 
-  return LitHtml.html`${location}`;
+  return html`${location}`;
 }
 
 function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload.RuleSet): LitHtml.TemplateResult {
@@ -274,7 +278,7 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealAttemptViewWithFilter}
         title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
@@ -296,7 +300,7 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
 
   function errors(): LitHtml.TemplateResult {
     const nErrors = i18nString(UIStrings.errors, {errorCount: 1});
-    return LitHtml.html`
+    return html`
       <span
         style=${LitHtml.Directives.styleMap({
       color: 'var(--sys-color-error)',
@@ -313,6 +317,6 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
     case Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject:
       return errors();
     case Protocol.Preload.RuleSetErrorType.InvalidRulesSkipped:
-      return LitHtml.html`${errors()} ${counts(preloadsStatusSummary, ruleSet)}`;
+      return html`${errors()} ${counts(preloadsStatusSummary, ruleSet)}`;
   }
 }