chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

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

@@ -2,14 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../../ui/components/data_grid/data_grid.js';
+import '../../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import {assertNotNullOrUndefined} from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
-import * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
-import * as IconButton from '../../../../ui/components/icon_button/icon_button.js';
+import type * as DataGrid from '../../../../ui/components/data_grid/data_grid.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
@@ -20,6 +22,8 @@ import * as PreloadingHelper from '../helper/helper.js';
 import * as PreloadingString from './PreloadingString.js';
 import ruleSetGridStyles from './ruleSetGrid.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Column header: Short URL of rule set.
@@ -32,11 +36,11 @@ const UIStrings = {
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Elements panel
    */
-  buttonClickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description button: Title of button to reveal the corresponding request of rule set in Network panel
    */
-  buttonClickToRevealInNetworkPanel: 'Click to reveal in Network panel',
+  clickToOpenInNetworkPanel: 'Click to open in Network panel',
   /**
    *@description Value of status, specifying rule set contains how many errors.
    */
@@ -61,7 +65,6 @@ export interface RuleSetGridRow {
 
 // Grid component to show SpeculationRules rule sets.
 export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
-  static readonly litTagName = LitHtml.literal`devtools-resources-ruleset-grid`;
 
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: RuleSetGridData|null = null;
@@ -106,12 +109,10 @@ export class RuleSetGrid extends LegacyWrapper.LegacyWrapper.WrappableComponent<
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="ruleset-container"
       jslog=${VisualLogging.pane('preloading-rules')}>
-        <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
-            reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
-        </${DataGrid.DataGridController.DataGridController.litTagName}>
+        <devtools-data-grid-controller .data=${reportsGridData}></devtools-data-grid-controller>
       </div>
     `, this.#shadow, {host: this});
     // clang-format on
@@ -166,10 +167,10 @@ function ruleSetRenderer(
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInElements}
-        title=${i18nString(UIStrings.buttonClickToRevealInElementsPanel)}
+        title=${i18nString(UIStrings.clickToOpenInElementsPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -181,18 +182,18 @@ function ruleSetRenderer(
         })}
         jslog=${VisualLogging.action('reveal-in-elements').track({click: true})}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
           .data=${{
             iconName: 'code-circle',
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${location}
       </button>
     `;
@@ -221,10 +222,10 @@ function ruleSetRenderer(
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealSpeculationRulesInNetwork}
-        title=${i18nString(UIStrings.buttonClickToRevealInNetworkPanel)}
+        title=${i18nString(UIStrings.clickToOpenInNetworkPanel)}
         style=${LitHtml.Directives.styleMap({
           border: 'none',
           background: 'none',
@@ -235,18 +236,18 @@ function ruleSetRenderer(
           'padding-inline-end': '0',
         })}
       >
-        <${IconButton.Icon.Icon.litTagName}
+        <devtools-icon
          .data=${{
             iconName: 'arrow-up-down-circle',
             color: 'var(--icon-link)',
             width: '16px',
             height: '16px',
-          } as IconButton.Icon.IconData}
+          }}
           style=${LitHtml.Directives.styleMap({
             'vertical-align': 'sub',
           })}
         >
-        </${IconButton.Icon.Icon.litTagName}>
+        </devtools-icon>
         ${location}
       </button>
     `;
@@ -263,7 +264,7 @@ function ruleSetRenderer(
     return ruleSetRendererOutOfDocument(ruleSet, location);
   }
 
-  return LitHtml.html`${location}`;
+  return html`${location}`;
 }
 
 function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload.RuleSet): LitHtml.TemplateResult {
@@ -274,7 +275,7 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button class="link" role="link"
         @click=${revealAttemptViewWithFilter}
         title=${i18nString(UIStrings.buttonRevealPreloadsAssociatedWithRuleSet)}
@@ -296,7 +297,7 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
 
   function errors(): LitHtml.TemplateResult {
     const nErrors = i18nString(UIStrings.errors, {errorCount: 1});
-    return LitHtml.html`
+    return html`
       <span
         style=${LitHtml.Directives.styleMap({
       color: 'var(--sys-color-error)',
@@ -313,6 +314,6 @@ function statusRenderer(preloadsStatusSummary: string, ruleSet: Protocol.Preload
     case Protocol.Preload.RuleSetErrorType.SourceIsNotJsonObject:
       return errors();
     case Protocol.Preload.RuleSetErrorType.InvalidRulesSkipped:
-      return LitHtml.html`${errors()} ${counts(preloadsStatusSummary, ruleSet)}`;
+      return html`${errors()} ${counts(preloadsStatusSummary, ruleSet)}`;
   }
 }

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,16 @@
 // 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 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 +20,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
@@ -97,7 +101,6 @@ const str_ = i18n.i18n.registerUIStrings('panels/autofill/AutofillView.ts', UISt
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AutofillView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-autofill-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #renderBound = this.#render.bind(this);
   #autoOpenViewSetting: Common.Settings.Setting<boolean>;
@@ -163,7 +166,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 +201,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 +258,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 +272,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 +297,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 +360,14 @@ 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}>
+          .data=${gridData}>
+        </devtools-data-grid-controller>
       </div>
     `;
     // clang-format on
@@ -442,10 +444,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}}></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/ConsoleView.ts

@@ -1363,7 +1363,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
   private registerShortcuts(): void {
     this.shortcuts.set(
-        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl),
+        UI.KeyboardShortcut.KeyboardShortcut.makeKey('u', UI.KeyboardShortcut.Modifiers.Ctrl.value),
         this.clearPromptBackwards.bind(this));
   }
 

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;