chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/network/components/HeaderSectionRow.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/legacy/legacy.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';
@@ -10,11 +12,11 @@ import type * as Protocol from '../../../generated/protocol.js';
 import * as ClientVariations from '../../../third_party/chromium/client-variations/client-variations.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {EditableSpan, type EditableSpanData} from './EditableSpan.js';
+import type {EditableSpan, EditableSpanData} from './EditableSpan.js';
 import headerSectionRowStyles from './HeaderSectionRow.css.js';
 
 const {render, html} = LitHtml;
@@ -116,7 +118,6 @@ export interface HeaderSectionRowData {
 }
 
 export class HeaderSectionRow extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-header-section-row`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #header: HeaderDescriptor|null = null;
   readonly #boundRender = this.#render.bind(this);
@@ -186,22 +187,22 @@ export class HeaderSectionRow extends HTMLElement {
             LitHtml.nothing
           }
           ${isHeaderNameEditable && !this.#isValidHeaderName ?
-            html`<${IconButton.Icon.Icon.litTagName} class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{
+            html`<devtools-icon class="inline-icon disallowed-characters" title=${UIStrings.headerNamesOnlyLetters} .data=${{
               iconName: 'cross-circle-filled',
               width: '16px',
               height: '16px',
               color: 'var(--icon-error)',
             } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>` : LitHtml.nothing
+            </devtools-icon>` : LitHtml.nothing
           }
           ${isHeaderNameEditable && !this.#header.isDeleted ?
-            html`<${EditableSpan.litTagName}
+            html`<devtools-editable-span
               @focusout=${this.#onHeaderNameFocusOut}
               @keydown=${this.#onKeyDown}
               @input=${this.#onHeaderNameEdit}
               @paste=${this.#onHeaderNamePaste}
               .data=${{value: this.#header.name} as EditableSpanData}
-            ></${EditableSpan.litTagName}>` :
+            ></devtools-editable-span>` :
             this.#header.name}:
         </div>
         <div
@@ -211,13 +212,13 @@ export class HeaderSectionRow extends HTMLElement {
           ${this.#renderHeaderValue()}
         </div>
         ${showReloadInfoIcon ?
-          html`<${IconButton.Icon.Icon.litTagName} class="row-flex-icon flex-right" title=${UIStrings.reloadPrompt} .data=${{
+          html`<devtools-icon class="row-flex-icon flex-right" title=${UIStrings.reloadPrompt} .data=${{
             iconName: 'info',
             width: '16px',
             height: '16px',
             color: 'var(--icon-default)',
           } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>` : LitHtml.nothing
+          </devtools-icon>` : LitHtml.nothing
         }
       </div>
       ${this.#maybeRenderBlockedDetails(this.#header.blockedDetails)}
@@ -245,7 +246,7 @@ export class HeaderSectionRow extends HTMLElement {
       ${this.#header.value || ''}
       ${this.#maybeRenderHeaderValueSuffix(this.#header)}
       ${showEditHeaderButton ? html`
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           title=${i18nString(UIStrings.editHeader)}
           .size=${Buttons.Button.Size.SMALL}
           .iconUrl=${editIconUrl}
@@ -255,20 +256,20 @@ export class HeaderSectionRow extends HTMLElement {
           }}
           jslog=${VisualLogging.action('enable-header-overrides').track({click: true})}
           class="enable-editing inline-button"
-        ></${Buttons.Button.Button.litTagName}>
+        ></devtools-button>
       ` : LitHtml.nothing}
     `;
     }
     return html`
-      <${EditableSpan.litTagName}
+      <devtools-editable-span
         @focusout=${this.#onHeaderValueFocusOut}
         @input=${this.#onHeaderValueEdit}
         @paste=${this.#onHeaderValueEdit}
         @keydown=${this.#onKeyDown}
         .data=${{value: this.#header.value || ''} as EditableSpanData}
-      ></${EditableSpan.litTagName}>
+      ></devtools-editable-span>
       ${this.#maybeRenderHeaderValueSuffix(this.#header)}
-      <${Buttons.Button.Button.litTagName}
+      <devtools-button
         title=${i18nString(UIStrings.removeOverride)}
         .size=${Buttons.Button.Size.SMALL}
         .iconUrl=${trashIconUrl}
@@ -276,7 +277,7 @@ export class HeaderSectionRow extends HTMLElement {
         class="remove-header inline-button"
         @click=${this.#onRemoveOverrideClick}
         jslog=${VisualLogging.action('remove-header-override').track({click: true})}
-      ></${Buttons.Button.Button.litTagName}>
+      ></devtools-button>
     `;
     // clang-format on
   }
@@ -309,13 +310,13 @@ export class HeaderSectionRow extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       return html`
-        <${IconButton.Icon.Icon.litTagName} class="row-flex-icon" title=${titleText} .data=${{
+        <devtools-icon class="row-flex-icon" title=${titleText} .data=${{
             iconName: 'warning-filled',
             color: 'var(--icon-warning)',
             width: '16px',
             height: '16px',
           } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
       `;
       // clang-format on
     }
@@ -353,13 +354,13 @@ export class HeaderSectionRow extends HTMLElement {
       // clang-format off
       return html`
         <div class="devtools-link" @click=${blockedDetails.reveal}>
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          <devtools-icon class="inline-icon" .data=${{
             iconName: 'issue-exclamation-filled',
             color: 'var(--icon-warning)',
             width: '16px',
             height: '16px',
           } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}
+          </devtools-icon
           >${i18nString(UIStrings.learnMoreInTheIssuesTab)}
         </div>
       `;
@@ -370,13 +371,13 @@ export class HeaderSectionRow extends HTMLElement {
       // clang-format off
       return html`
         <x-link href=${blockedDetails.link.url} class="link">
-          <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          <devtools-icon class="inline-icon" .data=${{
             iconName: 'open-externally',
             color: 'var(--icon-link)',
             width: '20px',
             height: '20px',
           } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}
+          </devtools-icon
           >${i18nString(UIStrings.learnMore)}
         </x-link>
       `;

package/front_end/panels/network/components/RequestHeaderSection.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/legacy/legacy.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import type * as SDK from '../../../core/sdk/sdk.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 LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../forward/forward.js';
@@ -13,7 +15,6 @@ import * as NetworkForward from '../forward/forward.js';
 import {
   EditingAllowedStatus,
   type HeaderDescriptor,
-  HeaderSectionRow,
   type HeaderSectionRowData,
 } from './HeaderSectionRow.js';
 import requestHeaderSectionStyles from './RequestHeaderSection.css.js';
@@ -49,7 +50,6 @@ export interface RequestHeaderSectionData {
 }
 
 export class RequestHeaderSection extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-request-header-section`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
   #headers: HeaderDescriptor[] = [];
@@ -87,10 +87,10 @@ export class RequestHeaderSection extends HTMLElement {
     render(html`
       ${this.#maybeRenderProvisionalHeadersWarning()}
       ${this.#headers.map(header => html`
-        <${HeaderSectionRow.litTagName}
+        <devtools-header-section-row
           .data=${{header} as HeaderSectionRowData}
           jslog=${VisualLogging.item('request-header')}
-        ></${HeaderSectionRow.litTagName}>
+        ></devtools-header-section-row>
       `)}
     `, this.#shadow, {host: this});
     // clang-format on
@@ -115,13 +115,13 @@ export class RequestHeaderSection extends HTMLElement {
       <div class="call-to-action">
         <div class="call-to-action-body">
           <div class="explanation" title=${cautionTitle}>
-            <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+            <devtools-icon class="inline-icon" .data=${{
                 iconName: 'warning-filled',
                 color: 'var(--icon-warning)',
                 width: '16px',
                 height: '16px',
               } as IconButton.Icon.IconData}>
-            </${IconButton.Icon.Icon.litTagName}>
+            </devtools-icon>
             ${cautionText} <x-link href="https://developer.chrome.com/docs/devtools/network/reference/#provisional-headers" class="link">${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>

package/front_end/panels/network/components/RequestHeadersView.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 './RequestHeaderSection.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -12,7 +14,7 @@ import * as Workspace from '../../../models/workspace/workspace.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.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 Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
@@ -21,12 +23,10 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Sources from '../../sources/sources.js';
 
-import {RequestHeaderSection, type RequestHeaderSectionData} from './RequestHeaderSection.js';
+import type {RequestHeaderSectionData} from './RequestHeaderSection.js';
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 import {
-  EarlyHintsHeaderSection,
   RESPONSE_HEADER_SECTION_DATA_KEY,
-  ResponseHeaderSection,
   type ResponseHeaderSectionData,
 } from './ResponseHeaderSection.js';
 
@@ -118,7 +118,6 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   #request: Readonly<SDK.NetworkRequest.NetworkRequest>;
-  static readonly litTagName = LitHtml.literal`devtools-request-headers`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #showResponseHeadersText = false;
   #showRequestHeadersText = false;
@@ -225,7 +224,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <${Category.litTagName}
+      <devtools-request-headers-category
         @togglerawevent=${toggleShowRaw}
         .data=${{
         name: 'early-hints-headers',
@@ -240,12 +239,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       >
         ${this.#showResponseHeadersText ?
         this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          <${EarlyHintsHeaderSection.litTagName} .data=${{
+          <devtools-early-hints-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData}></${EarlyHintsHeaderSection.litTagName}>
+          } as ResponseHeaderSectionData}></devtools-early-hints-header-section>
         `}
-      </${Category.litTagName}>
+      </devtools-request-headers-category>
     `;
     // clang-format on
   }
@@ -263,7 +262,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <${Category.litTagName}
+      <devtools-request-headers-category
         @togglerawevent=${toggleShowRaw}
         .data=${{
           name: 'response-headers',
@@ -278,12 +277,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       >
         ${this.#showResponseHeadersText ?
             this.#renderRawHeaders(this.#request.responseHeadersText, true) : html`
-          <${ResponseHeaderSection.litTagName} .data=${{
+          <devtools-response-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as ResponseHeaderSectionData} jslog=${VisualLogging.section('response-headers')}></${ResponseHeaderSection.litTagName}>
+          } as ResponseHeaderSectionData} jslog=${VisualLogging.section('response-headers')}></devtools-response-header-section>
         `}
-      </${Category.litTagName}>
+      </devtools-request-headers-category>
     `;
     // clang-format on
   }
@@ -298,12 +297,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     const fileIcon = html`
-      <${IconButton.Icon.Icon.litTagName} class=${overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'} .data=${{
+      <devtools-icon class=${overridesSetting.get() ? 'inline-icon dot purple': 'inline-icon'} .data=${{
           iconName: 'document',
           width: '16px',
           height: '16px',
         } as IconButton.Icon.IconData}>
-      </${IconButton.Icon.Icon.litTagName}>`;
+      </devtools-icon>`;
     // clang-format on
 
     const revealHeadersFile = (event: Event): void => {
@@ -323,12 +322,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
           class="link devtools-link"
           jslog=${VisualLogging.link('devtools-override').track({click: true})}
       >
-        <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+        <devtools-icon class="inline-icon" .data=${{
             iconName: 'help',
             width: '16px',
             height: '16px',
           } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}
+        </devtools-icon
       ></x-link>
       <x-link
           @click=${revealHeadersFile}
@@ -366,7 +365,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <${Category.litTagName}
+      <devtools-request-headers-category
         @togglerawevent=${toggleShowRaw}
         .data=${{
           name: 'request-headers',
@@ -380,12 +379,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       >
         ${(this.#showRequestHeadersText && requestHeadersText) ?
             this.#renderRawHeaders(requestHeadersText, false) : html`
-          <${RequestHeaderSection.litTagName} .data=${{
+          <devtools-request-header-section .data=${{
             request: this.#request,
             toReveal: this.#toReveal,
-          } as RequestHeaderSectionData} jslog=${VisualLogging.section('request-headers')}></${RequestHeaderSection.litTagName}>
+          } as RequestHeaderSectionData} jslog=${VisualLogging.section('request-headers')}></devtools-request-header-section>
         `}
-      </${Category.litTagName}>
+      </devtools-request-headers-category>
     `;
     // clang-format on
   }
@@ -426,12 +425,12 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
       <div class="row raw-headers-row" on-render=${ComponentHelpers.Directives.nodeRenderedCallback(addContextMenuListener)}>
         <div class="raw-headers">${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}</div>
         ${isShortened ? html`
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             .size=${Buttons.Button.Size.SMALL}
             .variant=${Buttons.Button.Variant.OUTLINED}
             @click=${showMore}
             jslog=${VisualLogging.action('raw-headers-show-more').track({click: true})}
-          >${i18nString(UIStrings.showMore)}</${Buttons.Button.Button.litTagName}>
+          >${i18nString(UIStrings.showMore)}</devtools-button>
         ` : LitHtml.nothing}
       </div>
     `;
@@ -478,7 +477,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <${Category.litTagName}
+      <devtools-request-headers-category
         .data=${{
           name: 'general',
           title: i18nString(UIStrings.general),
@@ -494,7 +493,7 @@ export class RequestHeadersView extends LegacyWrapper.LegacyWrapper.WrappableCom
         ${this.#request.remoteAddress()? this.#renderGeneralRow(i18nString(UIStrings.remoteAddress), this.#request.remoteAddress()) : LitHtml.nothing}
         ${this.#request.referrerPolicy()? this.#renderGeneralRow(i18nString(UIStrings.referrerPolicy), String(this.#request.referrerPolicy())) : LitHtml.nothing}
       </div>
-      </${Category.litTagName}>
+      </devtools-request-headers-category>
     `;
     // clang-format on
   }
@@ -533,7 +532,6 @@ export interface CategoryData {
 }
 
 export class Category extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-request-headers-category`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #expandedSetting?: Common.Settings.Setting<boolean>;
   #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
@@ -592,6 +590,7 @@ export class Category extends HTMLElement {
               ` : LitHtml.nothing}
             </div>
             <div class="hide-when-closed">${this.#additionalContent}</div>
+          </div>
         </summary>
         <slot></slot>
       </details>

package/front_end/panels/network/components/RequestTrustTokensView.ts

@@ -2,17 +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/report_view/report_view.js';
+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 * as Protocol from '../../../generated/protocol.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 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 requestTrustTokensViewStyles from './RequestTrustTokensView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Section heading in the Trust Token tab
@@ -94,7 +98,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/network/components/RequestTrust
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-trust-token-report`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #request: SDK.NetworkRequest.NetworkRequest;
 
@@ -123,10 +126,10 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`<${ReportView.ReportView.Report.litTagName}>
+    LitHtml.render(html`<devtools-report>
         ${this.#renderParameterSection()}
         ${this.#renderResultSection()}
-      </${ReportView.ReportView.Report.litTagName}>
+      </devtools-report>
     `, this.#shadow, {host: this});
     // clang-format on
   }
@@ -137,16 +140,15 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName} jslog=${VisualLogging.pane('trust-tokens').track({
+    return html`
+      <devtools-report-section-header jslog=${VisualLogging.pane('trust-tokens').track({
       resize: true,
-    })}>${i18nString(UIStrings.parameters)}</${ReportView.ReportView.ReportSectionHeader.litTagName}>
+    })}>${i18nString(UIStrings.parameters)}</devtools-report-section-header>
       ${renderRowWithCodeValue(i18nString(UIStrings.type), trustTokenParams.operation.toString())}
       ${this.#renderRefreshPolicy(trustTokenParams)}
       ${this.#renderIssuers(trustTokenParams)}
       ${this.#renderIssuerAndTopLevelOriginFromResult()}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
+      <devtools-report-divider></devtools-report-divider>
     `;
   }
 
@@ -162,14 +164,13 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.issuers)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-key>${i18nString(UIStrings.issuers)}</devtools-report-key>
+      <devtools-report-value>
         <ul class="issuers-list">
-          ${params.issuers.map(issuer => LitHtml.html`<li>${issuer}</li>`)}
+          ${params.issuers.map(issuer => html`<li>${issuer}</li>`)}
         </ul>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
     `;
   }
 
@@ -182,7 +183,7 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
       return LitHtml.nothing;
     }
 
-    return LitHtml.html`
+    return html`
       ${renderSimpleRowIfValuePresent(i18nString(UIStrings.topLevelOrigin), trustTokenResult.topLevelOrigin)}
       ${renderSimpleRowIfValuePresent(i18nString(UIStrings.issuer), trustTokenResult.issuerOrigin)}`;
   }
@@ -192,23 +193,20 @@ export class RequestTrustTokensView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!trustTokenResult) {
       return LitHtml.nothing;
     }
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.result)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.status)}</${
-        ReportView.ReportView.ReportKey.litTagName}>
-      <${ReportView.ReportView.ReportValue.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.result)}</devtools-report-section-header>
+      <devtools-report-key>${i18nString(UIStrings.status)}</devtools-report-key>
+      <devtools-report-value>
         <span>
-          <${IconButton.Icon.Icon.litTagName} class="status-icon"
+          <devtools-icon class="status-icon"
             .data=${getIconForStatusCode(trustTokenResult.status) as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
+          </devtools-icon>
           <strong>${getSimplifiedStatusTextForStatusCode(trustTokenResult.status)}</strong>
           ${getDetailedTextForStatusCode(trustTokenResult.status)}
         </span>
-      </${ReportView.ReportView.ReportValue.litTagName}>
+      </devtools-report-value>
       ${this.#renderIssuedTokenCount(trustTokenResult)}
-      <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-        ReportView.ReportView.ReportSectionDivider.litTagName}>
+      <devtools-report-divider></devtools-report-divider>
       `;
   }
 
@@ -279,17 +277,16 @@ function renderSimpleRowIfValuePresent<T>(key: string, value: T|undefined): LitH
     return LitHtml.nothing;
   }
 
-  return LitHtml.html`
-    <${ReportView.ReportView.ReportKey.litTagName}>${key}</${ReportView.ReportView.ReportKey.litTagName}>
-    <${ReportView.ReportView.ReportValue.litTagName}>${value}</${ReportView.ReportView.ReportValue.litTagName}>
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value>${value}</devtools-report-value>
   `;
 }
 
 function renderRowWithCodeValue(key: string, value: string): LitHtml.TemplateResult {
-  return LitHtml.html`
-    <${ReportView.ReportView.ReportKey.litTagName}>${key}</${ReportView.ReportView.ReportKey.litTagName}>
-    <${ReportView.ReportView.ReportValue.litTagName} class="code">${value}</${
-      ReportView.ReportView.ReportValue.litTagName}>
+  return html`
+    <devtools-report-key>${key}</devtools-report-key>
+    <devtools-report-value class="code">${value}</devtools-report-value>
   `;
 }
 

package/front_end/panels/network/components/ResponseHeaderSection.ts

@@ -6,7 +6,7 @@ import * as Common from '../../../core/common/common.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 {type NameValue} from '../../../core/sdk/NetworkRequest.js';
+import type {NameValue} from '../../../core/sdk/NetworkRequest.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
@@ -27,7 +27,7 @@ import {
   type HeaderEditedEvent,
   type HeaderEditorDescriptor,
   type HeaderRemovedEvent,
-  HeaderSectionRow,
+  type HeaderSectionRow,
   type HeaderSectionRowData,
   isValidHeaderName,
 } from './HeaderSectionRow.js';
@@ -120,7 +120,6 @@ class ResponseHeaderSectionBase extends HTMLElement {
 }
 
 export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
-  static readonly litTagName = LitHtml.literal`devtools-early-hints-header-section`;
   #request?: SDK.NetworkRequest.NetworkRequest;
 
   set data(data: ResponseHeaderSectionData) {
@@ -141,9 +140,9 @@ export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
     // clang-format off
     render(html`
       ${this.headerDetails.map(header => html`
-        <${HeaderSectionRow.litTagName} .data=${{
+        <devtools-header-section-row .data=${{
         header,
-      } as HeaderSectionRowData}></${HeaderSectionRow.litTagName}>
+      } as HeaderSectionRowData}></devtools-header-section-row>
       `)}
     `, this.shadow, { host: this });
     // clang-format on
@@ -153,7 +152,6 @@ export class EarlyHintsHeaderSection extends ResponseHeaderSectionBase {
 customElements.define('devtools-early-hints-header-section', EarlyHintsHeaderSection);
 
 export class ResponseHeaderSection extends ResponseHeaderSectionBase {
-  static readonly litTagName = LitHtml.literal`devtools-response-header-section`;
   #request?: SDK.NetworkRequest.NetworkRequest;
   #headerEditors: HeaderEditorDescriptor[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
@@ -540,24 +538,24 @@ export class ResponseHeaderSection extends ResponseHeaderSectionBase {
     // clang-format off
     render(html`
       ${headerDescriptors.map((header, index) => html`
-        <${HeaderSectionRow.litTagName}
+        <devtools-header-section-row
             .data=${{header} as HeaderSectionRowData}
             @headeredited=${this.#onHeaderEdited}
             @headerremoved=${this.#onHeaderRemoved}
             @enableheaderediting=${this.#onEnableHeaderEditingClick}
             data-index=${index}
             jslog=${VisualLogging.item('response-header')}
-        ></${HeaderSectionRow.litTagName}>
+        ></devtools-header-section-row>
       `)}
       ${this.#isEditingAllowed === EditingAllowedStatus.ENABLED ? html`
-        <${Buttons.Button.Button.litTagName}
+        <devtools-button
           class="add-header-button"
           .variant=${Buttons.Button.Variant.OUTLINED}
           .iconUrl=${plusIconUrl}
           @click=${this.#onAddHeaderClick}
           jslog=${VisualLogging.action('add-header').track({click: true})}>
           ${i18nString(UIStrings.addHeader)}
-        </${Buttons.Button.Button.litTagName}>
+        </devtools-button>
       ` : LitHtml.nothing}
     `, this.shadow, {host: this});
     // clang-format on