chrome-devtools-frontend 1.0.1536371 → 1.0.1537860

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

@@ -1,12 +1,11 @@
 // 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';
 import '../../../ui/components/report_view/report_view.js';
-import '../../../ui/components/tree_outline/tree_outline.js';
+import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -15,19 +14,15 @@ 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 +61,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 +157,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,27 +207,28 @@ 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 renderFrameTreeNode(node: 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;">
+      <li role="treeitem" class="text-ellipsis">
+        ${node.iconName ? html`
+          <devtools-icon class="inline-icon extra-large" .name=${node.iconName} style="margin-bottom: -3px;">
           </devtools-icon>
-        ` : Lit.nothing}
-        ${node.treeNodeData.text}
-      </div>`;
+        ` : nothing}
+        ${node.text}
+        ${node.children?.length ? html`
+          <ul role="group" hidden>
+            ${node.children.map(child => renderFrameTreeNode(child))}
+          </ul>` : nothing}
+      </li>`;
     // clang-format on
   }
 
-  const frameTreeNode = buildFrameTree(frameTreeData.node);
-  // Override the icon for the outermost frame.
-  frameTreeNode.treeNodeData.iconName = 'frame';
   let title = '';
   // The translation pipeline does not support nested plurals. We avoid this
   // here by pulling out the logic for one of the plurals into code instead.
@@ -237,49 +237,31 @@ function maybeRenderFrameTree(
   } else {
     title = i18nString(UIStrings.issuesInMultipleFrames, {n: frameTreeData.issueCount, m: frameTreeData.frameCount});
   }
-  const root: TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> = {
-    treeNodeData: {
-      text: title,
-    },
-    id: 'root',
-    children: () => Promise.resolve([frameTreeNode]),
-  };
-
   // clang-format off
   return html`
     <devtools-report-key jslog=${VisualLogging.section('frames')}>${i18nString(UIStrings.framesTitle)}</devtools-report-key>
     <devtools-report-value>
-      <devtools-tree-outline .data=${{
-        tree: [root],
-        defaultRenderer: treeNodeRenderer,
-        compact: true,
-      } as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
-      </devtools-tree-outline>
+      <devtools-tree .template=${html`
+        <ul role="tree">
+          <li role="treeitem" class="text-ellipsis">
+            ${title}
+            <ul role="group">
+              ${renderFrameTreeNode(frameTreeData.node)}
+            </ul>
+          </li>
+        </ul>
+      `}>
+      </devtools-tree>
     </devtools-report-value>`;
   // clang-format on
 }
 
-let nextNodeId = 0;
-
-function buildFrameTree(data: FrameTreeNodeData): TreeOutline.TreeOutlineUtils.TreeNode<FrameTreeNodeData> {
-  const children = data.children;
-  const node = {
-    treeNodeData: {
-      text: data.text,
-      ...(data.iconName ? {iconName: data.iconName} : {}),
-    },
-    ...(children?.length ? {children: () => Promise.resolve(children.map(child => buildFrameTree(child)))} : {}),
-    id: String(nextNodeId++),
-  };
-  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 autofocus 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 +272,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
     case false:
       // clang-format off
       return html`
-        <devtools-report-section>
+        <devtools-report-section autofocus tabindex="-1">
           <div class="status">
             <devtools-icon class="inline-icon extra-large" name="clear">
             </devtools-icon>
@@ -301,7 +283,7 @@ function renderBackForwardCacheStatus(status: boolean|undefined): Lit.TemplateRe
   }
   // clang-format off
   return html`
-    <devtools-report-section>
+    <devtools-report-section autofocus tabindex="-1">
       ${i18nString(UIStrings.unknown)}
     </devtools-report-section>`;
   // clang-format on
@@ -310,9 +292,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 +316,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 +329,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 +343,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 +365,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 +376,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 +403,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 +418,7 @@ function renderReason(
             ${maybeRenderDeepLinkToUnload(explanation)}
             ${maybeRenderReasonContext(explanation)}
           </div>` :
-          Lit.nothing}
+          nothing}
     </devtools-report-section>
     <div class="gray-text">
       ${explanation.reason}
@@ -448,36 +428,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, delegatesFocus: 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 +476,25 @@ 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 frame = this.#getMainFrame();
+    const explanationTree = frame?.backForwardCacheDetails?.explanationsTree;
+    if (explanationTree) {
+      this.#buildReasonToFramesMap(explanationTree, {blankCount: 1}, reasonToFramesMap);
+    }
+    const frameTreeData = this.#buildFrameTreeDataRecursive(explanationTree, {blankCount: 1});
+    // Override the icon for the outermost frame.
+    frameTreeData.node.iconName = 'frame';
+    const viewInput: ViewInput = {
+      frame,
+      frameTreeData,
+      reasonToFramesMap,
+      screenStatus: this.#screenStatus,
+      navigateAwayAndBack: this.#navigateAwayAndBack.bind(this),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #renderBackForwardCacheTestResult(): void {
@@ -510,7 +502,11 @@ 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));
+      this.contentElement.focus();
+    });
   }
 
   async #onNavigatedAway(): Promise<void> {
@@ -552,7 +548,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 +639,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
   }