chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -2,26 +2,30 @@
 // 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 './PreloadingMismatchedHeadersGrid.js';
+import './MismatchedPreloadingGrid.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 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 * as PreloadingHelper from '../helper/helper.js';
 
-import * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
-import * as PreloadingMismatchedHeadersGrid from './PreloadingMismatchedHeadersGrid.js';
+import type * as MismatchedPreloadingGrid from './MismatchedPreloadingGrid.js';
 import {prefetchFailureReason, prerenderFailureReason} from './PreloadingString.js';
 import usedPreloadingStyles from './usedPreloadingView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Header for preloading status.
@@ -138,7 +142,6 @@ export const enum UsedKind {
 // TODO(kenoss): Rename this class and file once https://crrev.com/c/4933567 landed.
 // This also shows summary of speculations initiated by this page.
 export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-used-preloading-view`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: UsedPreloadingViewData = {
@@ -165,22 +168,20 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
   #renderInternal(): LitHtml.LitTemplate {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.Report.litTagName}>
+    return html`
+      <devtools-report>
         ${this.#speculativeLoadingStatusForThisPageSections()}
 
-        <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-          ReportView.ReportView.ReportSectionDivider.litTagName}>
+        <devtools-report-divider></devtools-report-divider>
 
         ${this.#speculationsInitiatedByThisPageSummarySections()}
 
-        <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
-          ReportView.ReportView.ReportSectionDivider.litTagName}>
+        <devtools-report-divider></devtools-report-divider>
 
-        <${ReportView.ReportView.ReportSection.litTagName}>
+        <devtools-report-section>
           ${UI.XLink.XLink.create('https://developer.chrome.com/blog/prerender-pages/', i18nString(UIStrings.learnMore), 'link', undefined, 'learn-more')}
-        </${ReportView.ReportView.ReportSection.litTagName}>
-      </${ReportView.ReportView.Report.litTagName}>
+        </devtools-report-section>
+      </devtools-report>
     `;
     // clang-format on
   }
@@ -219,27 +220,27 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     switch (kind) {
       case UsedKind.DOWNGRADED_PRERENDER_TO_PREFETCH_AND_USED:
         badge = this.#badgeSuccess();
-        basicMessage = LitHtml.html`${i18nString(UIStrings.downgradedPrefetchUsed)}`;
+        basicMessage = html`${i18nString(UIStrings.downgradedPrefetchUsed)}`;
         break;
       case UsedKind.PREFETCH_USED:
         badge = this.#badgeSuccess();
-        basicMessage = LitHtml.html`${i18nString(UIStrings.prefetchUsed)}`;
+        basicMessage = html`${i18nString(UIStrings.prefetchUsed)}`;
         break;
       case UsedKind.PRERENDER_USED:
         badge = this.#badgeSuccess();
-        basicMessage = LitHtml.html`${i18nString(UIStrings.prerenderUsed)}`;
+        basicMessage = html`${i18nString(UIStrings.prerenderUsed)}`;
         break;
       case UsedKind.PREFETCH_FAILED:
         badge = this.#badgeFailure();
-        basicMessage = LitHtml.html`${i18nString(UIStrings.prefetchFailed)}`;
+        basicMessage = html`${i18nString(UIStrings.prefetchFailed)}`;
         break;
       case UsedKind.PRERENDER_FAILED:
         badge = this.#badgeFailure();
-        basicMessage = LitHtml.html`${i18nString(UIStrings.prerenderFailed)}`;
+        basicMessage = html`${i18nString(UIStrings.prerenderFailed)}`;
         break;
       case UsedKind.NO_PRELOADS:
         badge = this.#badgeNeutral(i18nString(UIStrings.badgeNoSpeculativeLoads));
-        basicMessage = LitHtml.html`${i18nString(UIStrings.noPreloads)}`;
+        basicMessage = html`${i18nString(UIStrings.noPreloads)}`;
         break;
     }
 
@@ -256,22 +257,20 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     if (maybeFailureReasonMessage !== undefined) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      maybeFailureReason = LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.detailsFailureReason)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
+      maybeFailureReason = html`
+      <devtools-report-section-header>${i18nString(UIStrings.detailsFailureReason)}</devtools-report-section-header>
+      <devtools-report-section>
         ${maybeFailureReasonMessage}
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
       `;
       // clang-format on
     }
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.speculativeLoadingStatusForThisPage)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.speculativeLoadingStatusForThisPage)}</devtools-report-section-header>
+      <devtools-report-section>
         <div>
           <div class="status-badge-container">
             ${badge}
@@ -280,7 +279,7 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
             ${basicMessage}
           </div>
         </div>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
 
       ${maybeFailureReason}
 
@@ -309,21 +308,18 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.currentURL)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.currentURL)}</devtools-report-section-header>
+      <devtools-report-section>
         ${UI.XLink.XLink.create(this.#data.pageURL, undefined, 'link', undefined, 'current-url')}
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
 
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.preloadedURLs)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}
+      <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>
+      <devtools-report-section
       jslog=${VisualLogging.section('preloaded-urls')}>
-        <${MismatchedPreloadingGrid.MismatchedPreloadingGrid.litTagName}
-          .data=${data as MismatchedPreloadingGrid.MismatchedPreloadingGridData}></${
-          MismatchedPreloadingGrid.MismatchedPreloadingGrid.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+        <devtools-resources-mismatched-preloading-grid
+          .data=${data as MismatchedPreloadingGrid.MismatchedPreloadingGridData}></devtools-resources-mismatched-preloading-grid>
+      </devtools-report-section>
     `;
     // clang-format on
   }
@@ -345,14 +341,12 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.mismatchedHeadersDetail)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
-        <${PreloadingMismatchedHeadersGrid.PreloadingMismatchedHeadersGrid.litTagName}
-          .data=${attempt as SDK.PreloadingModel.PrerenderAttempt}></${
-            PreloadingMismatchedHeadersGrid.PreloadingMismatchedHeadersGrid.litTagName}>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.mismatchedHeadersDetail)}</devtools-report-section-header>
+      <devtools-report-section>
+        <devtools-resources-preloading-mismatched-headers-grid
+          .data=${attempt as SDK.PreloadingModel.PrerenderAttempt}></devtools-resources-preloading-mismatched-headers-grid>
+      </devtools-report-section>
     `;
     // clang-format on
   }
@@ -393,10 +387,9 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
-      <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18nString(UIStrings.speculationsInitiatedByThisPage)}</${
-        ReportView.ReportView.ReportSectionHeader.litTagName}>
-      <${ReportView.ReportView.ReportSection.litTagName}>
+    return html`
+      <devtools-report-section-header>${i18nString(UIStrings.speculationsInitiatedByThisPage)}</devtools-report-section-header>
+      <devtools-report-section>
         <div>
           <div class="status-badge-container">
             ${badges}
@@ -414,7 +407,7 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
             </button>
           </div>
         </div>
-      </${ReportView.ReportView.ReportSection.litTagName}>
+      </devtools-report-section>
     `;
     // clang-format on
   }
@@ -446,9 +439,9 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
   #badge(klass: string, iconName: string, message: string): LitHtml.LitTemplate {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <span class=${klass}>
-        <${IconButton.Icon.Icon.litTagName} name=${iconName}></${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon name=${iconName}></devtools-icon>
         <span>
           ${message}
         </span>

package/front_end/panels/application/resourcesSidebar.css

@@ -4,8 +4,6 @@
  * found in the LICENSE file.
  */
 
-/* Linter does not work with CSS nesting correctly. */
-/* stylelint-disable no-descending-specificity */
 .tree-outline {
   li.storage-group-list-item,
   li.storage-group-list-item:not(:has(span[is="dt-checkbox"])) {
@@ -29,7 +27,6 @@
     margin-top: var(--sys-size-6);
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 .icons-container devtools-icon.red-icon {
   color: var(--icon-error);

package/front_end/panels/autofill/AutofillView.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/adorners/adorners.js';
+import '../../ui/components/data_grid/data_grid.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 AutofillManager from '../../models/autofill_manager/autofill_manager.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as DataGrid from '../../ui/components/data_grid/data_grid.js';
+import type * as Adorners from '../../ui/components/adorners/adorners.js';
+import type * as DataGrid from '../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../ui/components/helpers/helpers.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
@@ -18,6 +21,8 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import autofillViewStyles from './autofillView.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Explanation for how to populate the autofill panel with data. Shown when there is
@@ -163,7 +168,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     if (!this.#address && !this.#filledFields.length) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      LitHtml.render(LitHtml.html`
+      LitHtml.render(html`
         <main>
           <div class="top-left-corner">
             <label class="checkbox-label" title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
@@ -198,7 +203,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <main>
         <div class="content-container" jslog=${VisualLogging.pane('autofill')}>
           <div class="right-to-left" role="region" aria-label=${i18nString(UIStrings.addressPreview)}>
@@ -255,11 +260,11 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
     const createSpan = (startIndex: number, endIndex: number): LitHtml.TemplateResult => {
       const textContentLines = this.#address.substring(startIndex, endIndex).split('\n');
       const templateLines =
-          textContentLines.map((line, i) => i === textContentLines.length - 1 ? line : LitHtml.html`${line}<br>`);
+          textContentLines.map((line, i) => i === textContentLines.length - 1 ? line : html`${line}<br>`);
       const hasMatches = this.#matches.some(match => match.startIndex <= startIndex && match.endIndex > startIndex);
 
       if (!hasMatches) {
-        return LitHtml.html`<span>${templateLines}</span>`;
+        return html`<span>${templateLines}</span>`;
       }
 
       const spanClasses = LitHtml.Directives.classMap({
@@ -269,7 +274,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
       });
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      return LitHtml.html`
+      return html`
         <span
           class=${spanClasses}
           @mouseenter=${() => this.#onSpanMouseEnter(startIndex)}
@@ -294,7 +299,7 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
       spans.push(createSpan(sortedMatchIndices[i], sortedMatchIndices[i + 1]));
     }
 
-    return LitHtml.html`
+    return html`
       <div class="address">
         ${spans}
       </div>
@@ -357,15 +362,15 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <div class="grid-wrapper" role="region" aria-label=${i18nString(UIStrings.formInspector)}>
-        <${DataGrid.DataGridController.DataGridController.litTagName}
+        <devtools-data-grid-controller
           @rowmouseenter=${this.#onGridRowMouseEnter}
           @rowmouseleave=${this.#onGridRowMouseLeave}
           class="filled-fields-grid"
           .data=${gridData as DataGrid.DataGridController.DataGridControllerData}
         >
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
+        </devtools-data-grid-controller>
       </div>
     `;
     // clang-format on
@@ -442,10 +447,10 @@ export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       ${autofillType}
-      ${adornerContent.textContent ? LitHtml.html`
-          <${Adorners.Adorner.Adorner.litTagName} title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent} as Adorners.Adorner.AdornerData}>
+      ${adornerContent.textContent ? html`
+          <devtools-adorner title=${adornerTitle} .data=${{name: fillingStrategy, content: adornerContent} as Adorners.Adorner.AdornerData}></devtools-adorner>
         `: LitHtml.nothing}
     `;
     // clang-format on

package/front_end/panels/console/ConsoleFilter.ts

@@ -6,7 +6,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 
-import {type ConsoleGroupViewMessage, type ConsoleViewMessage} from './ConsoleViewMessage.js';
+import type {ConsoleGroupViewMessage, ConsoleViewMessage} from './ConsoleViewMessage.js';
 
 export type LevelsMask = {
   [x: string]: boolean,

package/front_end/panels/console/ConsoleSidebar.ts

@@ -14,7 +14,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ConsoleFilter, FilterType, type LevelsMask} from './ConsoleFilter.js';
 import consoleSidebarStyles from './consoleSidebar.css.js';
-import {type ConsoleViewMessage} from './ConsoleViewMessage.js';
+import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
 
 const UIStrings = {
   /**

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -32,7 +32,7 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import {type Chrome} from '../../../extension-api/ExtensionAPI.js';
+import type {Chrome} from '../../../extension-api/ExtensionAPI.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';
@@ -58,7 +58,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
 import consoleViewStyles from './consoleView.css.js';
-import {type ConsoleViewportElement} from './ConsoleViewport.js';
+import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
 
 const UIStrings = {

package/front_end/panels/console/consoleView.css

@@ -355,6 +355,10 @@
   word-break: break-all;
 }
 
+#console-messages .devtools-link:focus-visible {
+  background-color: transparent;
+}
+
 #console-messages .resource-links {
   margin-top: -1px;
   margin-bottom: -2px;
@@ -582,8 +586,6 @@ devtools-console-insight {
   vertical-align: 0;
 }
 
-/* It does not look like the linter works with CSS nesting correctly. */
-/* stylelint-disable no-descending-specificity */
 .console-message-wrapper:not(.has-insight) {
   &:hover,
   &:focus,
@@ -598,7 +600,6 @@ devtools-console-insight {
     }
   }
 }
-/* stylelint-enable no-descending-specificity */
 
 @media (forced-colors: active) {
   .console-message-expand-icon,

package/front_end/panels/coverage/CoverageDecorationManager.ts

@@ -8,7 +8,7 @@ import type * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 
-import {type CoverageInfo, type CoverageModel} from './CoverageModel.js';
+import type {CoverageInfo, CoverageModel} from './CoverageModel.js';
 
 export const decoratorType = 'coverage';
 

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -24,7 +24,7 @@ import {
   type PopulateNodesEventNodeTypes,
 } from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, type ItemSelectedEvent, SidebarEvents} from './CSSOverviewSidebarPanel.js';
-import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 const UIStrings = {
   /**

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -6,8 +6,8 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 
-import {type ContrastIssue} from './CSSOverviewCompletedView.js';
-import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import type {ContrastIssue} from './CSSOverviewCompletedView.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 export class OverviewController extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   currentUrl: string;

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -5,12 +5,11 @@
 import * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 
-import {type ContrastIssue} from './CSSOverviewCompletedView.js';
-
+import type {ContrastIssue} from './CSSOverviewCompletedView.js';
 import {CSSOverviewUnusedDeclarations, type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 interface NodeStyleStats {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -2,21 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as CSSOverviewComponents from './components/components.js';
-import cssOverviewStyles from './cssOverview.css.js';
 import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
-import {CSSOverviewCompletedView, type ContrastIssue} from './CSSOverviewCompletedView.js';
-
+import * as CSSOverviewComponents from './components/components.js';
+import cssOverviewStyles from './cssOverview.css.js';
+import {type ContrastIssue, CSSOverviewCompletedView} from './CSSOverviewCompletedView.js';
 import {Events, type OverviewController} from './CSSOverviewController.js';
-
 import {CSSOverviewModel, type GlobalStyleStats} from './CSSOverviewModel.js';
 import {CSSOverviewProcessingView} from './CSSOverviewProcessingView.js';
-import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {
   readonly #controller: OverviewController;

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -2,11 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import '../../../ui/components/panel_feedback/panel_feedback.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
-import * as PanelIntroductionSteps from '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+import type * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -79,31 +81,31 @@ export class CSSOverviewStartView extends HTMLElement {
     // clang-format off
     render(html`
       <div class="css-overview-start-view">
-        <${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+        <devtools-panel-introduction-steps>
           <span slot="title">${i18nString(UIStrings.identifyCSSImprovements)}</span>
           <span slot="step-1">${i18nString(UIStrings.capturePageCSSOverview)}</span>
           <span slot="step-2">${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)}</span>
           <span slot="step-3">${i18nString(UIStrings.locateAffectedElements)}</span>
-        </${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+        </devtools-panel-introduction-steps>
         <div class="start-capture-wrapper">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             class="start-capture"
             .variant=${Buttons.Button.Variant.PRIMARY}
             .jslogContext=${'css-overview.capture-overview'}
             @click=${this.#onStartCaptureClick}>
             ${i18nString(UIStrings.captureOverview)}
-          </${Buttons.Button.Button.litTagName}>
+          </devtools-button>
         </div>
-        <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${{
+        <devtools-panel-feedback .data=${{
             feedbackUrl: FEEDBACK_LINK,
             quickStartUrl: DOC_LINK,
             quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
           } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
-        </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
-        <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${{
+        </devtools-panel-feedback>
+        <devtools-feedback-button .data=${{
           feedbackUrl: FEEDBACK_LINK,
           } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
-        </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
+        </devtools-feedback-button>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -2,11 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './components/components.js';
+
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
-import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
-import type * as Protocol from '../../generated/protocol.js';
+
+import type * as ElementsComponents from './components/components.js';
+
+const {html} = LitHtml;
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
@@ -112,14 +117,14 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
 type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
 
 export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateResult {
-  const tag = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNode.litTagName;
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
   const role = sdkNode.role()?.value || '';
   const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
   const id = getNodeId(sdkNode);
-  return LitHtml.html`<${tag} .data=${{name, role, ignored, properties, id} as Data}></${tag}>`;
+  return html`<devtools-accessibility-tree-node .data=${
+      {name, role, ignored, properties, id} as Data}></devtools-accessibility-tree-node>`;
 }
 
 export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -10,9 +10,9 @@ import * as ColorPicker from '../../ui/legacy/components/color_picker/color_pick
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
-import {type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {type StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**