chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,19 +2,23 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/chrome_link/chrome_link.js';
+import '../../../ui/components/expandable_list/expandable_list.js';
+import '../../../ui/components/report_view/report_view.js';
+import '../../../ui/components/tree_outline/tree_outline.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 * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
-import * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.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 ReportView from '../../../ui/components/report_view/report_view.js';
-import * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import type * as ReportView from '../../../ui/components/report_view/report_view.js';
+import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.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';
@@ -22,6 +26,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title text in back/forward cache view of the Application panel
@@ -151,7 +157,6 @@ const enum ScreenStatusType {
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-resources-back-forward-cache-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #screenStatus = ScreenStatusType.RESULT;
   #nextNodeId = 0;
@@ -182,13 +187,13 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     await coordinator.write('BackForwardCacheView render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
-        <${ReportView.ReportView.Report.litTagName} .data=${
+      LitHtml.render(html`
+        <devtools-report .data=${
             {reportTitle: i18nString(UIStrings.backForwardCacheTitle)} as ReportView.ReportView.ReportData
         } jslog=${VisualLogging.pane('back-forward-cache')}>
 
           ${this.#renderMainFrameInformation()}
-        </${ReportView.ReportView.Report.litTagName}>
+        </devtools-report>
       `, this.#shadow, {host: this});
       // clang-format on
     });
@@ -259,13 +264,13 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     const frame = this.#getMainFrame();
     if (!frame) {
       // clang-format off
-      return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>
+      return html`
+        <devtools-report-key>
           ${i18nString(UIStrings.mainFrame)}
-        </${ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-key>
+        <devtools-report-value>
           ${i18nString(UIStrings.unavailable)}
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-report-value>
       `;
       // clang-format on
     }
@@ -273,7 +278,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     // Prevent running BFCache test on the DevTools window itself via DevTools on DevTools
     const isTestingForbidden = Common.ParsedURL.schemeIs(frame.url, 'devtools:');
     // clang-format off
-    return LitHtml.html`
+    return html`
       ${this.#renderBackForwardCacheStatus(frame.backForwardCacheDetails.restoredFromCache)}
       <div class="report-line">
         <div class="report-key">
@@ -284,30 +289,30 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         </div>
       </div>
       ${this.#maybeRenderFrameTree(frame.backForwardCacheDetails.explanationsTree)}
-      <${ReportView.ReportView.ReportSection.litTagName}>
-        <${Buttons.Button.Button.litTagName}
+      <devtools-report-section>
+        <devtools-button
           aria-label=${i18nString(UIStrings.runTest)}
           .disabled=${isTestRunning || isTestingForbidden}
           .spinner=${isTestRunning}
           .variant=${Buttons.Button.Variant.PRIMARY}
           @click=${this.#navigateAwayAndBack}
           jslog=${VisualLogging.action('back-forward-cache.run-test').track({click: true})}>
-          ${isTestRunning ? LitHtml.html`
+          ${isTestRunning ? html`
             ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
           `}
-        </${Buttons.Button.Button.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}>
-      </${ReportView.ReportView.ReportSectionDivider.litTagName}>
+        </devtools-button>
+      </devtools-report-section>
+      <devtools-report-divider>
+      </devtools-report-divider>
       ${this.#maybeRenderExplanations(frame.backForwardCacheDetails.explanations,
           frame.backForwardCacheDetails.explanationsTree)}
-      <${ReportView.ReportView.ReportSection.litTagName}>
+      <devtools-report-section>
         <x-link href="https://web.dev/bfcache/" class="link"
         jslog=${VisualLogging.action('learn-more.eligibility').track({click: true})}>
           ${i18nString(UIStrings.learnMore)}
         </x-link>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
     `;
     // clang-format on
   }
@@ -320,16 +325,16 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
 
     function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): LitHtml.TemplateResult {
       // clang-format off
-      return LitHtml.html`
+      return html`
         <div class="text-ellipsis">
-          ${node.treeNodeData.iconName ? LitHtml.html`
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon" style="margin-bottom: -3px;" .data=${{
+          ${node.treeNodeData.iconName ? html`
+            <devtools-icon class="inline-icon" style="margin-bottom: -3px;" .data=${{
               iconName: node.treeNodeData.iconName,
               color: 'var(--icon-default)',
               width: '20px',
               height: '20px',
             } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           ` : LitHtml.nothing}
           ${node.treeNodeData.text}
         </div>
@@ -357,19 +362,19 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     };
 
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="report-line"
       jslog=${VisualLogging.section('frames')}>
         <div class="report-key">
           ${i18nString(UIStrings.framesTitle)}
         </div>
         <div class="report-value">
-          <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data=${{
+          <devtools-tree-outline .data=${{
             tree: [root],
             defaultRenderer: treeNodeRenderer,
             compact: true,
           } as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
-          </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
+          </devtools-tree-outline>
         </div>
       </div>
     `;
@@ -432,44 +437,44 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     switch (status) {
       case true:
         // clang-format off
-        return LitHtml.html`
-          <${ReportView.ReportView.ReportSection.litTagName}>
+        return html`
+          <devtools-report-section>
             <div class="status">
-              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              <devtools-icon class="inline-icon" .data=${{
                 iconName: 'check-circle',
                 color: 'var(--icon-checkmark-green)',
                 width: '20px',
                 height: '20px',
                 } as IconButton.Icon.IconData}>
-              </${IconButton.Icon.Icon.litTagName}>
+              </devtools-icon>
             </div>
             ${i18nString(UIStrings.restoredFromBFCache)}
-          </${ReportView.ReportView.ReportSection.litTagName}>
+          </devtools-report-section>
         `;
         // clang-format on
       case false:
         // clang-format off
-        return LitHtml.html`
-          <${ReportView.ReportView.ReportSection.litTagName}>
+        return html`
+          <devtools-report-section>
             <div class="status">
-              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              <devtools-icon class="inline-icon" .data=${{
                   iconName: 'clear',
                   color: 'var(--icon-default)',
                   width: '20px',
                   height: '20px',
                   } as IconButton.Icon.IconData}>
-              </${IconButton.Icon.Icon.litTagName}>
+              </devtools-icon>
             </div>
             ${i18nString(UIStrings.normalNavigation)}
-          </${ReportView.ReportView.ReportSection.litTagName}>
+          </devtools-report-section>
         `;
         // clang-format on
     }
     // clang-format off
-    return LitHtml.html`
-    <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+    <devtools-report-section>
       ${i18nString(UIStrings.unknown)}
-    </${ReportView.ReportView.ReportSection.litTagName}>
+    </devtools-report-section>
     `;
     // clang-format on
   }
@@ -517,7 +522,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     }
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       ${this.#renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded, reasonToFramesMap)}
       ${this.#renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending, reasonToFramesMap)}
       ${this.#renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial, reasonToFramesMap)}
@@ -531,20 +536,20 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
       reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      ${explanations.length > 0 ? LitHtml.html`
-        <${ReportView.ReportView.ReportSectionHeader.litTagName}>
+    return html`
+      ${explanations.length > 0 ? html`
+        <devtools-report-section-header>
           ${category}
           <div class="help-outline-icon">
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            <devtools-icon class="inline-icon" .data=${{
               iconName: 'help',
               color: 'var(--icon-default)',
               width: '16px',
               height: '16px',
               } as IconButton.Icon.IconData} title=${explainerText}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
           </div>
-        </${ReportView.ReportView.ReportSectionHeader.litTagName}>
+        </devtools-report-section-header>
         ${explanations.map(explanation => this.#renderReason(explanation, reasonToFramesMap.get(explanation.reason)))}
       ` : LitHtml.nothing}
     `;
@@ -555,10 +560,10 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     if (explanation.reason ===
             Protocol.Page.BackForwardCacheNotRestoredReason.EmbedderExtensionSentMessageToCachedFrame &&
         explanation.context) {
-      const link = 'chrome://extensions/?id=' + explanation.context;
+      const link = 'chrome://extensions/?id=' + explanation.context as Platform.DevToolsPath.UrlString;
       // clang-format off
-    return LitHtml.html`${i18nString(UIStrings.blockingExtensionId)}
-      <${ChromeLink.ChromeLink.ChromeLink.litTagName} .href=${link}>${explanation.context}</${ChromeLink.ChromeLink.ChromeLink.litTagName}>`;
+    return html`${i18nString(UIStrings.blockingExtensionId)}
+      <devtools-chrome-link .href=${link}>${explanation.context}</devtools-chrome-link>`;
       // clang-format on
     }
     return LitHtml.nothing;
@@ -568,17 +573,17 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     if (frames === undefined || frames.length === 0) {
       return LitHtml.nothing;
     }
-    const rows = [LitHtml.html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
-    rows.push(...frames.map(url => LitHtml.html`<div class="text-ellipsis" title=${url}
+    const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
+    rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
     jslog=${VisualLogging.treeItem()}>${url}</div>`));
-    return LitHtml.html`
+    return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
-        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${{
+        <devtools-expandable-list .data=${{
       rows,
       title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
     } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem()}></${ExpandableList.ExpandableList.ExpandableList.litTagName}>
+        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
       </div>
     `;
   }
@@ -586,7 +591,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
   #maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.LitTemplate {
     if (explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInMainFrame ||
         explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInSubFrame) {
-      return LitHtml.html`
+      return html`
         <x-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link"
         jslog=${VisualLogging.action('learn-more.never-use-unload').track({
         click: true,
@@ -604,20 +609,19 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     }
     const maxLengthForDisplayedURLs = 50;
     const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
-    const rows = [LitHtml.html`<div>${i18nString(UIStrings.filesPerIssue, {n: details.length})}</div>`];
+    const rows = [html`<div>${i18nString(UIStrings.filesPerIssue, {n: details.length})}</div>`];
     rows.push(...details.map(
-        detail => LitHtml.html`${
+        detail => html`${
             linkifier.linkifyScriptLocation(
                 null, null, detail.url as Platform.DevToolsPath.UrlString, detail.lineNumber, {
                   columnNumber: detail.columnNumber,
                   showColumnNumber: true,
                   inlineFrameIndex: 0,
                 })}`));
-    return LitHtml.html`
+    return html`
       <div class="details-list">
-        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
-        {rows} as
-        ExpandableList.ExpandableList.ExpandableListData}></${ExpandableList.ExpandableList.ExpandableList.litTagName}>
+        <devtools-expandable-list .data=${
+        {rows} as ExpandableList.ExpandableList.ExpandableListData}></devtools-expandable-list>
       </div>
     `;
   }
@@ -625,18 +629,18 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
   #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation, frames: string[]|undefined):
       LitHtml.TemplateResult {
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section>
         ${(explanation.reason in NotRestoredReasonDescription) ?
-          LitHtml.html`
+          html`
             <div class="circled-exclamation-icon">
-              <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+              <devtools-icon class="inline-icon" .data=${{
                 iconName: 'warning',
                 color: 'var(--icon-warning)',
                 width: '16px',
                 height: '16px',
               } as IconButton.Icon.IconData}>
-              </${IconButton.Icon.Icon.litTagName}>
+              </devtools-icon>
             </div>
             <div>
               ${NotRestoredReasonDescription[explanation.reason].name()}
@@ -644,7 +648,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
               ${this.#maybeRenderReasonContext(explanation)}
            </div>` :
             LitHtml.nothing}
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
       <div class="gray-text">
         ${explanation.reason}
       </div>

package/front_end/panels/application/components/BounceTrackingMitigationsView.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 * as SDK from '../../../core/sdk/sdk.js';
@@ -9,12 +11,14 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ChromeLink from '../../../ui/components/chrome_link/chrome_link.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import bounceTrackingMitigationsViewStyles from './bounceTrackingMitigationsView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Title text in bounce tracking mitigations view of the Application panel.
@@ -73,7 +77,6 @@ export interface BounceTrackingMitigationsViewData {
 }
 
 export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-bounce-tracking-mitigations-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #trackingSites: string[] = [];
   #screenStatus = ScreenStatusType.RESULT;
@@ -87,13 +90,13 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   async #render(): Promise<void> {
     // clang-format off
-    LitHtml.render(LitHtml.html`
-      <${ReportView.ReportView.Report.litTagName} .data=${
+    LitHtml.render(html`
+      <devtools-report .data=${
           {reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)} as ReportView.ReportView.ReportData
       }
       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
         ${await this.#renderMainFrameInformation()}
-      </${ReportView.ReportView.Report.litTagName}>
+      </devtools-report>
     `, this.#shadow, {host: this});
     // clang-format on
   }
@@ -109,30 +112,30 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
       mitigationsFlagLink.textContent = i18nString(UIStrings.featureFlag);
 
       // clang-format off
-      return LitHtml.html`
-        <${ReportView.ReportView.ReportSection.litTagName}>
+      return html`
+        <devtools-report-section>
           ${i18n.i18n.getFormatLocalizedString(
               str_, UIStrings.featureDisabled,
               {PH1: mitigationsFlagLink})}
-        </${ReportView.ReportView.ReportSection.litTagName}>
+        </devtools-report-section>
       `;
       // clang-format on
     }
 
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section>
         ${this.#renderForceRunButton()}
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
         ${this.#renderDeletedSitesOrNoSitesMessage()}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}>
-      </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
+      <devtools-report-divider>
+      </devtools-report-divider>
+      <devtools-report-section>
         <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
         jslog=${VisualLogging.link('learn-more').track({click: true})}>
           ${i18nString(UIStrings.learnMore)}
         </x-link>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
     `;
     // clang-format on
   }
@@ -141,37 +144,37 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     const isMitigationRunning = (this.#screenStatus === ScreenStatusType.RUNNING);
 
     // clang-format off
-    return LitHtml.html`
-      <${Buttons.Button.Button.litTagName}
+    return html`
+      <devtools-button
         aria-label=${i18nString(UIStrings.forceRun)}
         .disabled=${isMitigationRunning}
         .spinner=${isMitigationRunning}
         .variant=${Buttons.Button.Variant.PRIMARY}
         @click=${this.#runMitigations}
         jslog=${VisualLogging.action('force-run').track({click: true})}>
-        ${isMitigationRunning ? LitHtml.html`
+        ${isMitigationRunning ? html`
           ${i18nString(UIStrings.runningMitigations)}`:`
           ${i18nString(UIStrings.forceRun)}
         `}
-      </${Buttons.Button.Button.litTagName}>
+      </devtools-button>
     `;
     // clang-format on
   }
 
   #renderDeletedSitesOrNoSitesMessage(): LitHtml.TemplateResult {
     if (!this.#seenButtonClick) {
-      return LitHtml.html``;
+      return html``;
     }
 
     if (this.#trackingSites.length === 0) {
       // clang-format off
-      return LitHtml.html`
-        <${ReportView.ReportView.ReportSection.litTagName}>
-        ${(this.#screenStatus === ScreenStatusType.RUNNING) ? LitHtml.html`
+      return html`
+        <devtools-report-section>
+        ${(this.#screenStatus === ScreenStatusType.RUNNING) ? html`
           ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
           ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
         `}
-        </${ReportView.ReportView.ReportSection.litTagName}>
+        </devtools-report-section>
       `;
       // clang-format on
     }
@@ -195,12 +198,12 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     };
 
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSection.litTagName}>
-        <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+    return html`
+      <devtools-report-section>
+        <devtools-data-grid-controller .data=${
             gridData as DataGrid.DataGridController.DataGridControllerData}>
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+        </devtools-data-grid-controller>
+      </devtools-report-section>
     `;
     // clang-format on
   }

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

@@ -2,9 +2,11 @@
 // 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 Protocol from '../../../generated/protocol.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -27,7 +29,6 @@ export interface EndpointsGridData {
 }
 
 export class EndpointsGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-endpoints-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
@@ -76,9 +77,9 @@ export class EndpointsGrid extends HTMLElement {
       <div class="reporting-container" jslog=${VisualLogging.section('endpoints')}>
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
         ${this.#endpoints.size > 0 ? html`
-          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
+          <devtools-data-grid-controller .data=${
               endpointsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </${DataGrid.DataGridController.DataGridController.litTagName}>
+          </devtools-data-grid-controller>
         ` : html`
           <div class="reporting-placeholder">
             <div>${i18nString(UIStrings.noEndpointsToDisplay)}</div>