chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -23,7 +23,7 @@ const UIStrings = {
   /**
    *@description Title for a link to the Elements panel
    */
-  clickToRevealInElementsPanel: 'Click to reveal in Elements panel',
+  clickToOpenInElementsPanel: 'Click to open in Elements panel',
   /**
    *@description Name of a network resource type
    */
@@ -120,8 +120,7 @@ async function maybeCreateLinkToElementsPanel(opener: Protocol.Page.FrameId|SDK.
     return null;
   }
   const linkElement = linkifyIcon(
-      'code-circle', i18nString(UIStrings.clickToRevealInElementsPanel),
-      () => Common.Revealer.reveal(linkTargetDOMNode));
+      'code-circle', i18nString(UIStrings.clickToOpenInElementsPanel), () => Common.Revealer.reveal(linkTargetDOMNode));
   const label = document.createElement('span');
   label.textContent = `<${linkTargetDOMNode.nodeName().toLocaleLowerCase()}>`;
   linkElement.insertBefore(label, linkElement.firstChild);

package/front_end/panels/application/PreloadingTreeElement.ts

@@ -10,7 +10,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type * as PreloadingHelper from './preloading/helper/helper.js';
 import {PreloadingAttemptView, PreloadingRuleSetView, PreloadingSummaryView} from './preloading/PreloadingView.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -10,7 +10,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
 import {ReportingApiView} from './ReportingApiView.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/ResourcesPanel.ts

@@ -12,7 +12,9 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import {DOMStorageItemsView} from './DOMStorageItemsView.js';
-import {type DOMStorage} from './DOMStorageModel.js';
+import type {DOMStorage} from './DOMStorageModel.js';
+import {ExtensionStorageItemsView} from './ExtensionStorageItemsView.js';
+import type {ExtensionStorage} from './ExtensionStorageModel.js';
 import type * as PreloadingHelper from './preloading/helper/helper.js';
 import resourcesPanelStyles from './resourcesPanel.css.js';
 import {StorageItemsView} from './StorageItemsView.js';
@@ -27,6 +29,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   storageViews: HTMLElement;
   private readonly storageViewToolbar: UI.Toolbar.Toolbar;
   private domStorageView: DOMStorageItemsView|null;
+  private extensionStorageView: ExtensionStorageItemsView|null;
   private cookieView: CookieItemsView|null;
   private readonly emptyWidget: UI.EmptyWidget.EmptyWidget|null;
   private readonly sidebar: ApplicationPanelSidebar;
@@ -50,6 +53,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.splitWidget().setMainWidget(mainContainer);
 
     this.domStorageView = null;
+    this.extensionStorageView = null;
 
     this.cookieView = null;
 
@@ -162,6 +166,19 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.showView(this.domStorageView);
   }
 
+  showExtensionStorage(extensionStorage: ExtensionStorage): void {
+    if (!extensionStorage) {
+      return;
+    }
+
+    if (!this.extensionStorageView) {
+      this.extensionStorageView = new ExtensionStorageItemsView(extensionStorage);
+    } else {
+      this.extensionStorageView.setStorage(extensionStorage);
+    }
+    this.showView(this.extensionStorageView);
+  }
+
   showCookies(cookieFrameTarget: SDK.Target.Target, cookieDomain: string): void {
     const model = cookieFrameTarget.model(SDK.CookieModel.CookieModel);
     if (!model) {

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -12,7 +12,7 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkerCacheView} from './ServiceWorkerCacheViews.js';
 
 const UIStrings = {

package/front_end/panels/application/SharedStorageItemsView.test.ts

@@ -15,6 +15,7 @@ import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {
   describeWithMockConnection,
 } from '../../testing/MockConnection.js';
+import {getCellElementFromNodeAndColumnId, selectNodeByKey} from '../../testing/StorageItemsViewHelpers.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -123,26 +124,6 @@ class SharedStorageItemsListener {
   }
 }
 
-function selectNodeByKey(
-    dataGrid: DataGrid.DataGrid.DataGridImpl<Protocol.Storage.SharedStorageEntry>,
-    key: string|null): DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>|null {
-  for (const node of dataGrid.rootNode().children) {
-    if (node?.data?.key === key) {
-      node.select();
-      return node;
-    }
-  }
-  return null;
-}
-
-function getCellElementFromNodeAndColumnId(
-    dataGrid: DataGrid.DataGrid.DataGridImpl<Protocol.Storage.SharedStorageEntry>,
-    node: DataGrid.DataGrid.DataGridNode<Protocol.Storage.SharedStorageEntry>, columnId: string): Element|null {
-  const column = dataGrid.columns[columnId];
-  const cellIndex = dataGrid.visibleColumnsArray.indexOf(column);
-  return node.element()?.children[cellIndex] || null;
-}
-
 describeWithMockConnection('SharedStorageItemsView', function() {
   let target: SDK.Target.Target;
   let sharedStorageModel: Resources.SharedStorageModel.SharedStorageModel|null;

package/front_end/panels/application/SharedStorageListTreeElement.ts

@@ -9,7 +9,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {SharedStorageEventsView} from './SharedStorageEventsView.js';
 
 const UIStrings = {

package/front_end/panels/application/SharedStorageTreeElement.ts

@@ -6,9 +6,9 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {SharedStorageItemsView} from './SharedStorageItemsView.js';
-import {type SharedStorageForOrigin} from './SharedStorageModel.js';
+import type {SharedStorageForOrigin} from './SharedStorageModel.js';
 
 export class SharedStorageTreeElement extends ApplicationPanelTreeElement {
   view!: SharedStorageItemsView;

package/front_end/panels/application/StorageBucketsTreeElement.ts

@@ -14,7 +14,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {IndexedDBTreeElement} from './ApplicationPanelSidebar.js';
 import {ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {StorageMetadataView} from './components/components.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
 
 const UIStrings = {

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -11,7 +11,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
-import {type ResourcesPanel} from './ResourcesPanel.js';
+import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**

package/front_end/panels/application/application.ts

@@ -10,6 +10,7 @@ import * as BounceTrackingMitigationsTreeElement from './BounceTrackingMitigatio
 import * as CookieItemsView from './CookieItemsView.js';
 import * as DOMStorageItemsView from './DOMStorageItemsView.js';
 import * as DOMStorageModel from './DOMStorageModel.js';
+import * as ExtensionStorageItemsView from './ExtensionStorageItemsView.js';
 import * as ExtensionStorageModel from './ExtensionStorageModel.js';
 import * as IndexedDBModel from './IndexedDBModel.js';
 import * as IndexedDBViews from './IndexedDBViews.js';
@@ -44,6 +45,7 @@ export {
   CookieItemsView,
   DOMStorageItemsView,
   DOMStorageModel,
+  ExtensionStorageItemsView,
   ExtensionStorageModel,
   IndexedDBModel,
   IndexedDBViews,

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

@@ -697,6 +697,7 @@ export const NotRestoredReasonDescription = {
   ParserAborted: {name: i18n.i18n.lockedLazyString('ParserAborted')},
   BroadcastChannelOnMessage: {name: i18n.i18n.lockedLazyString('BroadcastChannelOnMessage')},
   RequestedByWebViewClient: {name: i18n.i18n.lockedLazyString('RequestedByWebViewClient')},
+  PostMessageByWebViewClient: {name: i18n.i18n.lockedLazyString('PostMessageByWebViewClient')},
   WebViewSettingsChanged: {name: i18n.i18n.lockedLazyString('WebViewSettingsChanged')},
   WebViewJavaScriptObjectChanged: {name: i18n.i18n.lockedLazyString('WebViewJavaScriptObjectChanged')},
   WebViewMessageListenerInjected: {name: i18n.i18n.lockedLazyString('WebViewMessageListenerInjected')},

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

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