chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,17 +2,22 @@
 // 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 '../../../ui/components/tree_outline/tree_outline.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import badgeStyles from './badge.css.js';
 import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
+const {html, Directives: {ifDefined}} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Label for the 'origin' field in a parsed Origin Trial Token.
@@ -74,7 +79,6 @@ export interface BadgeData {
 }
 
 export class Badge extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-tree-view-badge`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #adorner = new Adorners.Adorner.Adorner();
 
@@ -96,7 +100,7 @@ export class Badge extends HTMLElement {
     this.#adorner.classList.add(`badge-${data.style}`);
 
     LitHtml.render(
-        LitHtml.html`
+        html`
       ${this.#adorner}
     `,
         this.#shadow, {host: this});
@@ -123,19 +127,19 @@ function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeN
         constructTokenDetailsNodes(originTrial.tokensWithStatus[0]),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>) => {
       const trial = node.treeNodeData as Protocol.Page.OriginTrial;
-      const tokenCountBadge = LitHtml.html`
-        <${Badge.litTagName} .data=${{
+      const tokenCountBadge = html`
+        <devtools-resources-origin-trial-tree-view-badge .data=${{
         badgeContent: i18nString(UIStrings.tokens, {PH1: trial.tokensWithStatus.length}),
         style: 'secondary',
-      } as BadgeData}></${Badge.litTagName}>
+      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
       `;
 
-      return LitHtml.html`
+      return html`
         ${trial.trialName}
-        <${Badge.litTagName} .data=${{
+        <devtools-resources-origin-trial-tree-view-badge .data=${{
         badgeContent: trial.status,
         style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      } as BadgeData}></${Badge.litTagName}>
+      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
         ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : LitHtml.nothing}
       `;
     },
@@ -149,14 +153,14 @@ function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): Tr
     children: async () => constructTokenDetailsNodes(token),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>, state: {isExpanded: boolean}) => {
       const tokenStatus = node.treeNodeData as string;
-      const statusBadge = LitHtml.html`
-        <${Badge.litTagName} .data=${{
+      const statusBadge = html`
+        <devtools-resources-origin-trial-tree-view-badge .data=${{
         badgeContent: tokenStatus,
         style: tokenStatus === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-      } as BadgeData}></${Badge.litTagName}>
+      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
       `;
       // Only display token status for convenience when the node is not expanded.
-      return LitHtml.html`${i18nString(UIStrings.token)} ${state.isExpanded ? LitHtml.nothing : statusBadge}`;
+      return html`${i18nString(UIStrings.token)} ${state.isExpanded ? LitHtml.nothing : statusBadge}`;
     },
   };
 }
@@ -167,9 +171,9 @@ interface TokenField {
 }
 
 function renderTokenDetails(node: TreeNode<OriginTrialTreeNodeData>): LitHtml.TemplateResult {
-  return LitHtml.html`
-    <${OriginTrialTokenRows.litTagName} .data=${{node} as OriginTrialTokenRowsData}>
-    </${OriginTrialTokenRows.litTagName}>
+  return html`
+    <devtools-resources-origin-trial-token-rows .data=${{node} as OriginTrialTokenRowsData}>
+    </devtools-resources-origin-trial-token-rows>
     `;
 }
 
@@ -194,7 +198,7 @@ function constructRawTokenTextNode(tokenText: string): TreeNode<OriginTrialTreeN
       id: 'TokenRawTextNode#' + tokenText,
       renderer: (data: TreeNode<OriginTrialTreeNodeData>) => {
         const tokenText = data.treeNodeData as string;
-        return LitHtml.html`
+        return html`
         <div style="overflow-wrap: break-word;">
           ${tokenText}
         </div>
@@ -205,7 +209,7 @@ function constructRawTokenTextNode(tokenText: string): TreeNode<OriginTrialTreeN
 }
 
 function defaultRenderer(node: TreeNode<OriginTrialTreeNodeData>): LitHtml.TemplateResult {
-  return LitHtml.html`${String(node.treeNodeData)}`;
+  return html`${String(node.treeNodeData)}`;
 }
 
 export interface OriginTrialTokenRowsData {
@@ -213,7 +217,6 @@ export interface OriginTrialTokenRowsData {
 }
 
 export class OriginTrialTokenRows extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-token-rows`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus|null = null;
   #parsedTokenDetails: TokenField[] = [];
@@ -232,8 +235,8 @@ export class OriginTrialTokenRows extends HTMLElement {
     this.#render();
   }
 
-  #renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => LitHtml.html`
-        <div class=${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}>
+  #renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => html`
+        <div class=${ifDefined(hasError ? 'error-text' : undefined)}>
           ${fieldValue}
         </div>`;
 
@@ -287,24 +290,24 @@ export class OriginTrialTokenRows extends HTMLElement {
     const tokenDetails: TokenField[] = [
       {
         name: i18nString(UIStrings.status),
-        value: LitHtml.html`
-          <${Badge.litTagName} .data=${{
+        value: html`
+          <devtools-resources-origin-trial-tree-view-badge .data=${{
           badgeContent: this.#tokenWithStatus.status,
           style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        } as BadgeData}></${Badge.litTagName}>`,
+        } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>`,
       },
       ...this.#parsedTokenDetails,
     ];
 
     const tokenDetailRows = tokenDetails.map((field: TokenField) => {
-      return LitHtml.html`
+      return html`
           <div class="key">${field.name}</div>
           <div class="value">${field.value}</div>
           `;
     });
 
     LitHtml.render(
-        LitHtml.html`
+        html`
       <div class="content">
         ${tokenDetailRows}
       </div>
@@ -320,7 +323,6 @@ export interface OriginTrialTreeViewData {
 }
 
 export class OriginTrialTreeView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-tree-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   set data(data: OriginTrialTreeViewData) {
@@ -334,9 +336,9 @@ export class OriginTrialTreeView extends HTMLElement {
   #render(trials: Protocol.Page.OriginTrial[]): void {
     if (!trials.length) {
       LitHtml.render(
-          LitHtml.html`
+          html`
     <span class="status-badge">
-      <${IconButton.Icon.Icon.litTagName}
+      <devtools-icon
           .data=${{
             iconName: 'clear',
             color: 'var(--icon-default)',
@@ -344,7 +346,7 @@ export class OriginTrialTreeView extends HTMLElement {
             height: '16px',
           } as IconButton.Icon.IconWithName}
         >
-      </${IconButton.Icon.Icon.litTagName}>
+      </devtools-icon>
       <span>${i18nString(UIStrings.noTrialTokens)}</span>
     </span>`,
           this.#shadow, {host: this});
@@ -352,12 +354,12 @@ export class OriginTrialTreeView extends HTMLElement {
     }
 
     LitHtml.render(
-        LitHtml.html`
-      <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data=${{
+        html`
+      <devtools-tree-outline .data=${{
           tree: trials.map(constructOriginTrialTree),
           defaultRenderer,
         } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-      </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
+      </devtools-tree-outline>
     `,
         this.#shadow, {host: this});
   }

package/front_end/panels/application/components/PermissionsPolicySection.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/icon_button/icon_button.js';
+import '../../../ui/components/report_view/report_view.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';
@@ -9,14 +12,14 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import permissionsPolicySectionStyles from './permissionsPolicySection.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Label for a button. When clicked more details (for the content this button refers to) will be shown.
@@ -73,20 +76,19 @@ export function renderIconLink(
     jsLogContext: string): LitHtml.TemplateResult {
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
-  return LitHtml.html`
-  <${Buttons.Button.Button.litTagName}
+  return html`
+  <devtools-button
     .iconName=${iconName}
     title=${title}
     .variant=${Buttons.Button.Variant.ICON}
     .size=${Buttons.Button.Size.SMALL}
     @click=${clickHandler}
-    jslog=${VisualLogging.action().track({click: true}).context(jsLogContext)}></${Buttons.Button.Button.litTagName}>
+    jslog=${VisualLogging.action().track({click: true}).context(jsLogContext)}></devtools-button>
   `;
   // clang-format on
 }
 
 export class PermissionsPolicySection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-permissions-policy-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
 
@@ -109,12 +111,11 @@ export class PermissionsPolicySection extends HTMLElement {
     if (!allowed.length) {
       return LitHtml.nothing;
     }
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.allowedFeatures)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.allowedFeatures)}</devtools-report-key>
+      <devtools-report-value>
         ${allowed.join(', ')}
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
   }
 
@@ -125,19 +126,18 @@ export class PermissionsPolicySection extends HTMLElement {
       return LitHtml.nothing;
     }
     if (!this.#permissionsPolicySectionData.showDetails) {
-      return LitHtml.html`
-        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.disabledFeatures)}</${
-          ReportView.ReportView.ReportKey.litTagName}>
-        <${ReportView.ReportView.ReportValue.litTagName}>
+      return html`
+        <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
+        <devtools-report-value>
           ${disallowed.map(p => p.feature).join(', ')}
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
           .variant=${Buttons.Button.Variant.OUTLINED}
           @click=${() => this.#toggleShowPermissionsDisallowedDetails()}
           jslog=${VisualLogging.action('show-disabled-features-details').track({
         click: true,
       })}>${i18nString(UIStrings.showDetails)}
-        </${Buttons.Button.Button.litTagName}>
-        </${ReportView.ReportView.ReportValue.litTagName}>
+        </devtools-button>
+        </devtools-report-value>
       `;
     }
 
@@ -178,16 +178,16 @@ export class PermissionsPolicySection extends HTMLElement {
 
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      return LitHtml.html`
+      return html`
         <div class="permissions-row">
           <div>
-            <${IconButton.Icon.Icon.litTagName} class="allowed-icon"
+            <devtools-icon class="allowed-icon"
               .data=${{
                 color: 'var(--icon-error)',
                 iconName: 'cross-circle',
                 width: '20px', height: '20px',
-              } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+              }}>
+            </devtools-icon>
           </div>
           <div class="feature-name text-ellipsis">
             ${policy.feature}
@@ -209,24 +209,23 @@ export class PermissionsPolicySection extends HTMLElement {
           </div>
         </div>
       `;
-      // clang-format on
+                // clang-format on
     }));
 
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.disabledFeatures)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName} class="policies-list">
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.disabledFeatures)}</devtools-report-key>
+      <devtools-report-value class="policies-list">
         ${featureRows}
         <div class="permissions-row">
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           .variant=${Buttons.Button.Variant.OUTLINED}
           @click=${() => this.#toggleShowPermissionsDisallowedDetails()}
           jslog=${VisualLogging.action('hide-disabled-features-details').track({
       click: true,
     })}>${i18nString(UIStrings.hideDetails)}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
         </div>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
   }
 
@@ -235,13 +234,11 @@ export class PermissionsPolicySection extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(
-        LitHtml.html`
-          <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18n.i18n.lockedString('Permissions Policy')}</${
-            ReportView.ReportView.ReportSectionHeader.litTagName}>
+        html`
+          <devtools-report-section-header>${i18n.i18n.lockedString('Permissions Policy')}</devtools-report-section-header>
           ${this.#renderAllowed()}
           ${LitHtml.Directives.until(this.#renderDisallowed(), LitHtml.nothing)}
-          <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-            ReportView.ReportView.ReportSectionDivider.litTagName}>
+          <devtools-report-divider></devtools-report-divider>
         `,
         this.#shadow, {host: this},
       );

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

@@ -2,11 +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/icon_button/icon_button.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../../ui/components/input/input.js';
 // inspectorCommonStyles is imported for the chrome-select class that is used for the dropdown
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -17,6 +18,8 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import protocolHandlersViewStyles from './protocolHandlersView.css.js';
 
+const {html} = LitHtml;
+
 const PROTOCOL_DOCUMENT_URL = 'https://web.dev/url-protocol-handler/';
 const UIStrings = {
   /**
@@ -84,7 +87,6 @@ export interface ProtocolHandlersData {
 }
 
 export class ProtocolHandlersView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-protocol-handlers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #protocolHandlers: ProtocolHandler[] = [];
   #manifestLink: Platform.DevToolsPath.UrlString = Platform.DevToolsPath.EmptyUrlString;
@@ -111,11 +113,11 @@ export class ProtocolHandlersView extends HTMLElement {
         UI.XLink.XLink.create(this.#manifestLink, i18nString(UIStrings.manifest), undefined, undefined, 'manifest');
     const statusString = this.#protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
     // clang-format off
-    return LitHtml.html`
+    return html`
     <div class="protocol-handlers-row status">
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon"
+            <devtools-icon class="inline-icon"
                                                 name=${this.#protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
             ${i18n.i18n.getFormatLocalizedString(str_, statusString, {
       PH1: manifestInTextLink,
     })}
@@ -130,10 +132,10 @@ export class ProtocolHandlersView extends HTMLElement {
     }
     const protocolOptions =
         this.#protocolHandlers.filter(p => p.protocol)
-            .map(p => LitHtml.html`<option value=${p.protocol} jslog=${VisualLogging.item(p.protocol).track({
-              click: true,
-            })}>${p.protocol}://</option>`);
-    return LitHtml.html`
+            .map(p => html`<option value=${p.protocol} jslog=${VisualLogging.item(p.protocol).track({
+                   click: true,
+                 })}>${p.protocol}://</option>`);
+    return html`
        <div class="protocol-handlers-row">
         <select class="chrome-select protocol-select" @change=${this.#handleProtocolSelect} aria-label=${
         i18nString(UIStrings.dropdownLabel)}>
@@ -141,11 +143,10 @@ export class ProtocolHandlersView extends HTMLElement {
         </select>
         <input .value=${this.#queryInputState} class="devtools-text-input" type="text" @change=${
         this.#handleQueryInputChange} aria-label=${i18nString(UIStrings.textboxLabel)}
-        placeholder=${i18nString(UIStrings.textboxPlaceholder)}/>
-        <${Buttons.Button.Button.litTagName} .variant=${Buttons.Button.Variant.PRIMARY} @click=${
-        this.#handleTestProtocolClick}>
+        placeholder=${i18nString(UIStrings.textboxPlaceholder)} />
+        <devtools-button .variant=${Buttons.Button.Variant.PRIMARY} @click=${this.#handleTestProtocolClick}>
             ${i18nString(UIStrings.testProtocol)}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
         </div>
       `;
   }
@@ -177,7 +178,7 @@ export class ProtocolHandlersView extends HTMLElement {
     const protocolDocLink = UI.XLink.XLink.create(
         PROTOCOL_DOCUMENT_URL, i18nString(UIStrings.protocolHandlerRegistrations), undefined, undefined, 'learn-more');
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       ${this.#renderStatusMessage()}
       <div class="protocol-handlers-row">
           ${i18n.i18n.getFormatLocalizedString(str_, UIStrings.needHelpReadOur, {PH1: protocolDocLink})}

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

@@ -2,11 +2,14 @@
 // 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 '../../../ui/legacy/legacy.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.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 * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -40,7 +43,6 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = LitHtml;
 
 export class ReportsGridStatusHeader extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid-status-header`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -55,12 +57,12 @@ export class ReportsGridStatusHeader extends HTMLElement {
       ${i18nString(UIStrings.status)}
       <x-link href="https://web.dev/reporting-api/#report-status"
       jslog=${VisualLogging.link('report-status').track({click: true})}>
-        <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+        <devtools-icon class="inline-icon" .data=${{
           iconName: 'help',
           color: 'var(--icon-link)',
           width: '16px',
           height: '16px',
-          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+          }}></devtools-icon>
       </x-link>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -72,7 +74,6 @@ export interface ReportsGridData {
 }
 
 export class ReportsGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #reports: Protocol.Network.ReportingApiReport[] = [];
@@ -113,7 +114,7 @@ export class ReportsGrid extends HTMLElement {
           hideable: false,
           visible: true,
           titleElement: html`
-          <${ReportsGridStatusHeader.litTagName}></${ReportsGridStatusHeader.litTagName}>
+          <devtools-resources-reports-grid-status-header></devtools-resources-reports-grid-status-header>
           `,
         },
         {
@@ -153,9 +154,8 @@ export class ReportsGrid extends HTMLElement {
       <div class="reporting-container" jslog=${VisualLogging.section('reports')}>
         <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
         ${this.#reports.length > 0 ? html`
-          <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
-              reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-          </${DataGrid.DataGridController.DataGridController.litTagName}>
+          <devtools-data-grid-controller .data=${reportsGridData}>
+          </devtools-data-grid-controller>
         ` : html`
           <div class="reporting-placeholder">
             <div>${i18nString(UIStrings.noReportsToDisplay)}</div>

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

@@ -11,7 +11,6 @@ import styles from './serviceWorkerRouterView.css.js';
 const {html, render} = LitHtml;
 
 export class ServiceWorkerRouterView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-service-worker-router-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #rules: SDK.ServiceWorkerManager.ServiceWorkerRouterRule[] = [];
 

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

@@ -5,11 +5,12 @@
 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 * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import sharedStorageAccessGridStyles from './sharedStorageAccessGrid.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Text in Shared Storage Events View of the Application panel
@@ -56,7 +57,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/components/SharedSt
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SharedStorageAccessGrid extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-shared-storage-access-grid`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #datastores: Array<Protocol.Storage.SharedStorageAccessedEvent> = [];
 
@@ -72,16 +72,13 @@ export class SharedStorageAccessGrid extends HTMLElement {
 
   #render(): void {
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div>
         <span class="heading">${i18nString(UIStrings.sharedStorage)}</span>
-        <${IconButton.Icon.Icon.litTagName} class="info-icon" title=${
-            i18nString(UIStrings.allSharedStorageEvents)}
-          .data=${
-            {iconName: 'info',
-              color: 'var(--icon-default)', width: '16px'} as
-            IconButton.Icon.IconWithName}>
-        </${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon class="info-icon"
+                       title=${i18nString(UIStrings.allSharedStorageEvents)}
+                       .data=${{iconName: 'info', color: 'var(--icon-default)', width: '16px'}}>
+        </devtools-icon>
         ${this.#renderGridOrNoDataMessage()}
       </div>
     `, this.#shadow, {host: this});
@@ -90,7 +87,7 @@ export class SharedStorageAccessGrid extends HTMLElement {
 
   #renderGridOrNoDataMessage(): LitHtml.TemplateResult {
     if (this.#datastores.length === 0) {
-      return LitHtml.html`<div
+      return html`<div
         class="no-events-message">${i18nString(UIStrings.noEvents)}</div>`;
     }
 
@@ -144,10 +141,8 @@ export class SharedStorageAccessGrid extends HTMLElement {
       },
     };
 
-    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}></devtools-data-grid-controller>
     `;
   }
 
@@ -169,7 +164,7 @@ export class SharedStorageAccessGrid extends HTMLElement {
 
   #renderDateForDataGridCell(value: DataGrid.DataGridUtils.CellValue): LitHtml.TemplateResult {
     const date = new Date(1e3 * (value as number));
-    return LitHtml.html`${date.toLocaleString()}`;
+    return html`${date.toLocaleString()}`;
   }
 }