chrome-devtools-frontend 1.0.1536371 → 1.0.1537268

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

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/expandable_list/expandable_list.js';
@@ -15,19 +14,16 @@ 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 type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.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 Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, type LitTemplate, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
 
-const {html} = Lit;
-
 const UIStrings = {
   /**
    * @description Title text in back/forward cache view of the Application panel
@@ -66,6 +62,10 @@ const UIStrings = {
    * page eligible for back/forward cache.
    */
   pageSupportNeeded: 'Actionable',
+  /**
+   * @description Label for the completion of the back/forward cache test
+   */
+  testCompleted: 'Back/forward cache test completed.',
   /**
    * @description Explanation for actionable items which prevent the page from being eligible
    * for back/forward cache.
@@ -158,7 +158,7 @@ function renderMainFrameInformation(
     frame: SDK.ResourceTreeModel.ResourceTreeFrame|null,
     frameTreeData: {node: FrameTreeNodeData, frameCount: number, issueCount: number}|undefined,
     reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>, screenStatus: ScreenStatusType,
-    navigateAwayAndBack: () => Promise<void>): Lit.TemplateResult {
+    navigateAwayAndBack: () => Promise<void>): TemplateResult {
   if (!frame) {
     // clang-format of
     return html`
@@ -208,19 +208,19 @@ function renderMainFrameInformation(
 }
 
 function maybeRenderFrameTree(
-    frameTreeData: {node: FrameTreeNodeData, frameCount: number, issueCount: number}|undefined): Lit.LitTemplate {
+    frameTreeData: {node: FrameTreeNodeData, frameCount: number, issueCount: number}|undefined): LitTemplate {
   if (!frameTreeData || (frameTreeData.frameCount === 0 && frameTreeData.issueCount === 0)) {
-    return Lit.nothing;
+    return nothing;
   }
 
-  function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): Lit.TemplateResult {
+  function treeNodeRenderer(node: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData>): TemplateResult {
     // clang-format off
     return html`
       <div class="text-ellipsis">
         ${node.treeNodeData.iconName ? html`
           <devtools-icon class="inline-icon extra-large" .name=${node.treeNodeData.iconName} style="margin-bottom: -3px;">
           </devtools-icon>
-        ` : Lit.nothing}
+        ` : nothing}
         ${node.treeNodeData.text}
       </div>`;
     // clang-format on
@@ -274,12 +274,12 @@ function buildFrameTree(data: FrameTreeNodeData): TreeOutline.TreeOutlineUtils.T
   return node;
 }
 
-function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateResult {
+function renderBackForwardCacheStatus(status: boolean|undefined): TemplateResult {
   switch (status) {
     case true:
       // clang-format off
       return html`
-        <devtools-report-section>
+        <devtools-report-section class="cache-status-section" tabindex="-1">
           <div class="status extra-large">
             <devtools-icon class="inline-icon extra-large" name="check-circle" style="color: var(--icon-checkmark-green);">
             </devtools-icon>
@@ -290,7 +290,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
     case false:
       // clang-format off
       return html`
-        <devtools-report-section>
+        <devtools-report-section class="cache-status-section" tabindex="-1">
           <div class="status">
             <devtools-icon class="inline-icon extra-large" name="clear">
             </devtools-icon>
@@ -301,7 +301,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
   }
   // clang-format off
   return html`
-    <devtools-report-section>
+    <devtools-report-section class="cache-status-section" tabindex="-1">
       ${i18nString(UIStrings.unknown)}
     </devtools-report-section>`;
   // clang-format on
@@ -310,9 +310,9 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
 function maybeRenderExplanations(
     explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
     explanationTree: Protocol.Page.BackForwardCacheNotRestoredExplanationTree|undefined,
-    reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): Lit.LitTemplate {
+    reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): LitTemplate {
   if (explanations.length === 0) {
-    return Lit.nothing;
+    return nothing;
   }
 
   const pageSupportNeeded = explanations.filter(
@@ -334,7 +334,7 @@ function maybeRenderExplanations(
 function renderExplanations(
     category: Platform.UIString.LocalizedString, explainerText: Platform.UIString.LocalizedString,
     explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[],
-    reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): Lit.TemplateResult {
+    reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>): TemplateResult {
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
   return html`
@@ -347,11 +347,11 @@ function renderExplanations(
         </div>
       </devtools-report-section-header>
       ${explanations.map(explanation => renderReason(explanation, reasonToFramesMap.get(explanation.reason)))}
-    ` : Lit.nothing}`;
+    ` : nothing}`;
   // clang-format on
 }
 
-function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): Lit.LitTemplate {
+function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitTemplate {
   if (explanation.reason ===
           Protocol.Page.BackForwardCacheNotRestoredReason.EmbedderExtensionSentMessageToCachedFrame &&
       explanation.context) {
@@ -361,12 +361,12 @@ function maybeRenderReasonContext(explanation: Protocol.Page.BackForwardCacheNot
       <devtools-chrome-link .href=${link}>${explanation.context}</devtools-chrome-link>`;
     // clang-format on
   }
-  return Lit.nothing;
+  return nothing;
 }
 
-function renderFramesPerReason(frames: string[]|undefined): Lit.LitTemplate {
+function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   if (frames === undefined || frames.length === 0) {
-    return Lit.nothing;
+    return nothing;
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
@@ -383,8 +383,7 @@ function renderFramesPerReason(frames: string[]|undefined): Lit.LitTemplate {
     `;
 }
 
-function maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation):
-    Lit.LitTemplate {
+function maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitTemplate {
   if (explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInMainFrame ||
       explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInSubFrame) {
     return html`
@@ -395,13 +394,12 @@ function maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCache
           ${i18nString(UIStrings.neverUseUnload)}
         </x-link>`;
   }
-  return Lit.nothing;
+  return nothing;
 }
 
-function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlockingDetails[]|undefined):
-    Lit.LitTemplate {
+function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlockingDetails[]|undefined): LitTemplate {
   if (details === undefined || details.length === 0) {
-    return Lit.nothing;
+    return nothing;
   }
   const maxLengthForDisplayedURLs = 50;
   const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
@@ -423,7 +421,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
 }
 
 function renderReason(
-    explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation, frames: string[]|undefined): Lit.TemplateResult {
+    explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation, frames: string[]|undefined): TemplateResult {
   // clang-format off
   return html`
     <devtools-report-section>
@@ -438,7 +436,7 @@ function renderReason(
             ${maybeRenderDeepLinkToUnload(explanation)}
             ${maybeRenderReasonContext(explanation)}
           </div>` :
-          Lit.nothing}
+          nothing}
     </devtools-report-section>
     <div class="gray-text">
       ${explanation.reason}
@@ -448,36 +446,44 @@ function renderReason(
   // clang-format on
 }
 
-function renderBackForwardCacheView(
-    frame: SDK.ResourceTreeModel.ResourceTreeFrame|null,
-    frameTreeData: {node: FrameTreeNodeData, frameCount: number, issueCount: number}|undefined,
-    reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>, screenStatus: ScreenStatusType,
-    navigateAwayAndBack: () => Promise<void>, target: ShadowRoot): void {
+interface ViewInput {
+  frame: SDK.ResourceTreeModel.ResourceTreeFrame|null;
+  frameTreeData: {node: FrameTreeNodeData, frameCount: number, issueCount: number}|undefined;
+  reasonToFramesMap: Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>;
+  screenStatus: ScreenStatusType;
+  navigateAwayAndBack: () => Promise<void>;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
   // Disabled until https://crbug.com/1079231 is fixed.
   // clang-format off
-  Lit.render(html`
+  render(html`
     <style>${backForwardCacheViewStyles}</style>
     <devtools-report .data=${
         {reportTitle: i18nString(UIStrings.backForwardCacheTitle)} as ReportView.ReportView.ReportData
     } jslog=${VisualLogging.pane('back-forward-cache')}>
 
-      ${renderMainFrameInformation(frame, frameTreeData, reasonToFramesMap, screenStatus, navigateAwayAndBack)}
+      ${renderMainFrameInformation(input.frame, input.frameTreeData, input.reasonToFramesMap, input.screenStatus, input.navigateAwayAndBack)}
     </devtools-report>
   `, target);
   // clang-format on
-}
+};
 
-export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class BackForwardCacheView extends UI.Widget.Widget {
   #screenStatus = ScreenStatusType.RESULT;
   #historyIndex = 0;
+  #view: View;
 
-  constructor() {
-    super();
+  constructor(view = DEFAULT_VIEW) {
+    super({useShadowDom: true});
+    this.#view = view;
     this.#getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.render, this);
+        SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.requestUpdate, this);
     this.#getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.render, this);
+        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
   #getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
@@ -488,21 +494,21 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
   #getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
     return this.#getMainResourceTreeModel()?.mainFrame || null;
   }
-  connectedCallback(): void {
-    this.parentElement?.classList.add('overflow-auto');
-  }
 
-  override async render(): Promise<void> {
-    await RenderCoordinator.write('BackForwardCacheView render', () => {
-      const reasonToFramesMap = new Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>();
-      const explanationTree = this.#getMainFrame()?.backForwardCacheDetails?.explanationsTree;
-      if (explanationTree) {
-        this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
-      }
-      renderBackForwardCacheView(
-          this.#getMainFrame(), this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1}), reasonToFramesMap,
-          this.#screenStatus, this.#navigateAwayAndBack.bind(this), this.#shadow);
-    });
+  override async performUpdate(): Promise<void> {
+    const reasonToFramesMap = new Map<Protocol.Page.BackForwardCacheNotRestoredReason, string[]>();
+    const explanationTree = this.#getMainFrame()?.backForwardCacheDetails?.explanationsTree;
+    if (explanationTree) {
+      this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
+    }
+    const viewInput: ViewInput = {
+      frame: this.#getMainFrame(),
+      frameTreeData: this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1}),
+      reasonToFramesMap,
+      screenStatus: this.#screenStatus,
+      navigateAwayAndBack: this.#navigateAwayAndBack.bind(this),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #renderBackForwardCacheTestResult(): void {
@@ -510,7 +516,14 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
         this.#renderBackForwardCacheTestResult, this);
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.render();
+    this.requestUpdate();
+    void this.updateComplete.then(() => {
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.testCompleted));
+      const resultsSection = this.contentElement?.querySelector('.cache-status-section') as HTMLElement;
+      if (resultsSection) {
+        resultsSection.focus();
+      }
+    });
   }
 
   async #onNavigatedAway(): Promise<void> {
@@ -552,7 +565,7 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
     }
     this.#historyIndex = historyResults.currentIndex;
     this.#screenStatus = ScreenStatusType.RUNNING;
-    void this.render();
+    this.requestUpdate();
 
     // This event listener is removed inside of onNavigatedAway().
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -643,11 +656,3 @@ interface FrameTreeNodeData {
   iconName?: string;
   children?: FrameTreeNodeData[];
 }
-
-customElements.define('devtools-resources-back-forward-cache-view', BackForwardCacheView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-back-forward-cache-view': BackForwardCacheView;
-  }
-}

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

@@ -23,6 +23,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -35,6 +36,7 @@ import {
 import type {StackTraceData} from './StackTrace.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -283,7 +285,6 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
-  #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
 
@@ -317,7 +318,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    await RenderCoordinator.write('FrameDetailsView render', () => {
+    await RenderCoordinator.write('FrameDetailsView render', async () => {
       if (!this.#frame) {
         return;
       }
@@ -331,7 +332,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           ${this.#renderDocumentSection()}
           ${this.#renderIsolationSection()}
           ${this.#renderApiAvailabilitySection()}
-          ${this.#renderOriginTrial()}
+          ${await this.#renderOriginTrial()}
           ${Lit.Directives.until(this.#permissionsPolicies?.then(policies => {
             this.#permissionsPolicySectionData.policies = policies || [];
             return html`
@@ -348,17 +349,12 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     });
   }
 
-  #renderOriginTrial(): Lit.LitTemplate {
+  async #renderOriginTrial(): Promise<Lit.LitTemplate> {
     if (!this.#frame) {
       return Lit.nothing;
     }
 
-    this.#originTrialTreeView.classList.add('span-cols');
-
-    void this.#frame.getOriginTrials().then(trials => {
-      this.#originTrialTreeView.data = {trials};
-    });
-
+    const data = {trials: await this.#frame.getOriginTrials()};
     // clang-format off
     return html`
     <devtools-report-section-header>
@@ -373,7 +369,8 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         </x-link>
       </span>
     </devtools-report-section>
-    ${this.#originTrialTreeView}
+    <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
+    </devtools-widget>
     <devtools-report-divider></devtools-report-divider>`;
     // clang-format on
   }

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

@@ -11,6 +11,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import badgeStyles from './badge.css.js';
@@ -79,34 +80,18 @@ export interface BadgeData {
   style: 'error'|'success'|'secondary';
 }
 
-export class Badge extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #adorner = new Adorners.Adorner.Adorner();
-
-  set data(data: BadgeData) {
-    this.#render(data);
-  }
-
-  #render(data: BadgeData): void {
-    const adornerContent = document.createElement('span');
-    adornerContent.textContent = data.badgeContent;
-    this.#adorner.data = {
-      name: 'badge',
-      content: adornerContent,
-    };
-    this.#adorner.classList.add(`badge-${data.style}`);
-
-    Lit.render(
-        html`
-      <style>${badgeStyles}</style>
-      ${this.#adorner}
-    `,
-        this.#shadow, {host: this});
-  }
+function createBadge(data: BadgeData): Adorners.Adorner.Adorner {
+  const adorner = new Adorners.Adorner.Adorner();
+  const adornerContent = document.createElement('span');
+  adornerContent.textContent = data.badgeContent;
+  adorner.data = {
+    name: 'badge',
+    content: adornerContent,
+  };
+  adorner.classList.add(`badge-${data.style}`);
+  return adorner;
 }
 
-customElements.define('devtools-resources-origin-trial-tree-view-badge', Badge);
-
 type TreeNode<DataType> = TreeOutline.TreeOutlineUtils.TreeNode<DataType>;
 
 /**
@@ -127,19 +112,18 @@ function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeN
         constructTokenDetailsNodes(originTrial.tokensWithStatus[0]),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>) => {
       const trial = node.treeNodeData as Protocol.Page.OriginTrial;
-      const tokenCountBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+      const tokenCountBadge = createBadge({
         badgeContent: i18nString(UIStrings.tokens, {PH1: trial.tokensWithStatus.length}),
         style: 'secondary',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
+      });
 
       return html`
         ${trial.trialName}
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+        <style>${badgeStyles}</style>
+        ${createBadge({
         badgeContent: trial.status,
         style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
+      })}
         ${trial.tokensWithStatus.length > 1 ? tokenCountBadge : Lit.nothing}
       `;
     },
@@ -153,12 +137,10 @@ function constructTokenNode(token: Protocol.Page.OriginTrialTokenWithStatus): Tr
     children: async () => constructTokenDetailsNodes(token),
     renderer: (node: TreeNode<OriginTrialTreeNodeData>, state: {isExpanded: boolean}) => {
       const tokenStatus = node.treeNodeData as string;
-      const statusBadge = html`
-        <devtools-resources-origin-trial-tree-view-badge .data=${{
+      const statusBadge = createBadge({
         badgeContent: tokenStatus,
         style: tokenStatus === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-      } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>
-      `;
+      });
       // Only display token status for convenience when the node is not expanded.
       return html`${i18nString(UIStrings.token)} ${state.isExpanded ? Lit.nothing : statusBadge}`;
     },
@@ -290,10 +272,11 @@ export class OriginTrialTokenRows extends HTMLElement {
       {
         name: i18nString(UIStrings.status),
         value: html`
-          <devtools-resources-origin-trial-tree-view-badge .data=${{
+          <style>${badgeStyles}</style>
+          ${createBadge({
           badgeContent: this.#tokenWithStatus.status,
           style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
-        } as BadgeData}></devtools-resources-origin-trial-tree-view-badge>`,
+        })}`,
       },
       ...this.#parsedTokenDetails,
     ];
@@ -307,7 +290,9 @@ export class OriginTrialTokenRows extends HTMLElement {
 
     Lit.render(
         html`
-      <style>${originTrialTokenRowsStyles}</style>
+      <style>
+        ${originTrialTokenRowsStyles}
+      </style>
       <div class="content">
         ${tokenDetailRows}
       </div>
@@ -322,45 +307,56 @@ export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
 
-export class OriginTrialTreeView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElement) => void;
 
-  set data(data: OriginTrialTreeViewData) {
-    this.#render(data.trials);
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (!input.trials.length) {
+    // clang-format off
+    Lit.render(html`
+      <style>${originTrialTreeViewStyles}</style>
+      <span class="status-badge">
+        <devtools-icon class="medium" name="clear"></devtools-icon>
+        <span>${i18nString(UIStrings.noTrialTokens)}</span>
+      </span>`, target);
+    // clang-format on
+    return;
   }
 
-  #render(trials: Protocol.Page.OriginTrial[]): void {
-    if (!trials.length) {
-      Lit.render(
-          html`
-    <style>${originTrialTreeViewStyles}</style>
-    <span class="status-badge">
-      <devtools-icon class="medium" name="clear"></devtools-icon>
-      <span>${i18nString(UIStrings.noTrialTokens)}</span>
-    </span>`,
-          this.#shadow, {host: this});
-      return;
-    }
+  // clang-format off
+  Lit.render(html`
+    <style>
+      ${originTrialTreeViewStyles}
+    </style>
+    <devtools-tree-outline .data=${{
+      tree: input.trials.map(constructOriginTrialTree),
+      defaultRenderer,
+    } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
+    </devtools-tree-outline>
+  `, target);
+  // clang-format on
+};
+
+export class OriginTrialTreeView extends UI.Widget.Widget {
+  #data: OriginTrialTreeViewData = {trials: []};
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-    Lit.render(
-        html`
-      <style>${originTrialTreeViewStyles}</style>
-      <devtools-tree-outline .data=${{
-          tree: trials.map(constructOriginTrialTree),
-          defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-      </devtools-tree-outline>
-    `,
-        this.#shadow, {host: this});
+  set data(data: OriginTrialTreeViewData) {
+    this.#data = data;
+    this.requestUpdate();
   }
-}
 
-customElements.define('devtools-resources-origin-trial-tree-view', OriginTrialTreeView);
+  override performUpdate(): void {
+    this.#view(this.#data, undefined, this.contentElement);
+  }
+}
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-tree-view': OriginTrialTreeView;
     'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
-    'devtools-resources-origin-trial-tree-view-badge': Badge;
   }
 }

package/front_end/panels/application/components/backForwardCacheView.css

@@ -73,6 +73,10 @@ devtools-report-value:has(devtools-tree-outline) {
   margin-left: var(--sys-size-7);
 }
 
+.cache-status-section:focus-visible {
+ outline: 0;
+}
+
 .tree-outline li .selection {
   margin-left: -5px;
 }

package/front_end/panels/application/components/badge.css

@@ -20,6 +20,6 @@
 }
 
 /* Use mono-space source code font to assist reading of adorner content */
-:host {
+:host devtools-adorner {
   font-family: var(--source-code-font-family);
 }