chrome-devtools-frontend 1.0.950850 → 1.0.952284

package/front_end/panels/application/{BackForwardCacheView.ts → components/BackForwardCacheView.ts}

@@ -2,15 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.js';
-import * as i18n from '../../core/i18n/i18n.js';
-import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as LitHtml from '../../ui/lit-html/lit-html.js';
-import * as ReportView from '../../ui/components/report_view/report_view.js';
-import * as UI from '../../ui/legacy/legacy.js';
-import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type * as Platform from '../../../core/platform/platform.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ReportView from '../../../ui/components/report_view/report_view.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Protocol from '../../../generated/protocol.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 
 import {NotRestoredReasonDescription} from './BackForwardCacheStrings.js';
 import backForwardCacheViewStyles from './backForwardCacheView.css.js';
@@ -96,7 +98,7 @@ const UIStrings = {
   supportPendingExplanation:
       'Chrome support for these reasons is pending i.e. they will not prevent the page from being eligible for back/forward cache in a future version of Chrome.',
 };
-const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheView.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const enum ScreenStatusType {
@@ -104,61 +106,84 @@ const enum ScreenStatusType {
   Result = 'Result',
 }
 
-export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
+export class BackForwardCacheViewWrapper extends UI.ThrottledWidget.ThrottledWidget {
+  readonly #bfcacheView = new BackForwardCacheView();
+
   constructor() {
     super(true, 1000);
-    this.getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.MainFrameNavigated, this.onBackForwardCacheUpdate, this);
-    this.getMainResourceTreeModel()?.addEventListener(
-        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.onBackForwardCacheUpdate, this);
+    this.#getMainResourceTreeModel()?.addEventListener(
+        SDK.ResourceTreeModel.Events.MainFrameNavigated, this.update, this);
+    this.#getMainResourceTreeModel()?.addEventListener(
+        SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.update, this);
+    this.contentElement.classList.add('overflow-auto');
+    this.contentElement.appendChild(this.#bfcacheView);
     this.update();
-    this.screenStatus = ScreenStatusType.Result;
   }
 
-  private screenStatus: ScreenStatusType;
+  async doUpdate(): Promise<void> {
+    this.#bfcacheView.data = {frame: this.#getMainFrame()};
+  }
 
-  wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([backForwardCacheViewStyles]);
+  #getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
+    return mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel) || null;
   }
 
-  private onBackForwardCacheUpdate(): void {
-    this.update();
+  #getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
+    return this.#getMainResourceTreeModel()?.mainFrame || null;
   }
+}
 
-  async doUpdate(): Promise<void> {
-    const data = {reportTitle: i18nString(UIStrings.backForwardCacheTitle)};
-    const html = LitHtml.html`
-      <${ReportView.ReportView.Report.litTagName} .data=${data as ReportView.ReportView.ReportData}>
-        ${this.renderMainFrameInformation(this.getMainFrame())}
-      </${ReportView.ReportView.Report.litTagName}>
-    `;
-    LitHtml.render(html, this.contentElement, {host: this});
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+export interface BackForwardCacheViewData {
+  frame: SDK.ResourceTreeModel.ResourceTreeFrame|null;
+}
+
+export class BackForwardCacheView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-back-forward-cache-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #frame: SDK.ResourceTreeModel.ResourceTreeFrame|null = null;
+  #screenStatus = ScreenStatusType.Result;
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [backForwardCacheViewStyles];
   }
 
-  private getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
-    return mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel) || null;
+  set data(data: BackForwardCacheViewData) {
+    this.#frame = data.frame;
+    this.#render();
   }
 
-  private getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
-    return this.getMainResourceTreeModel()?.mainFrame || null;
+  async #render(): Promise<void> {
+    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=${
+            {reportTitle: i18nString(UIStrings.backForwardCacheTitle)} as ReportView.ReportView.ReportData
+        }>
+          ${this.#renderMainFrameInformation()}
+        </${ReportView.ReportView.Report.litTagName}>
+      `, this.#shadow, {host: this});
+      // clang-format on
+    });
   }
 
-  private renderBackForwardCacheTestResult(): void {
+  #renderBackForwardCacheTestResult(): void {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-        this.renderBackForwardCacheTestResult, this);
-    this.screenStatus = ScreenStatusType.Result;
-    this.update();
+        this.#renderBackForwardCacheTestResult, this);
+    this.#screenStatus = ScreenStatusType.Result;
+    this.#render();
   }
 
-  private async goBackOneHistoryEntry(): Promise<void> {
+  async #goBackOneHistoryEntry(): Promise<void> {
     SDK.TargetManager.TargetManager.instance().removeModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-        this.goBackOneHistoryEntry, this);
-    this.screenStatus = ScreenStatusType.Running;
-    this.update();
+        this.#goBackOneHistoryEntry, this);
+    this.#screenStatus = ScreenStatusType.Running;
+    this.#render();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
       return;
@@ -173,11 +198,11 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     }
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-        this.renderBackForwardCacheTestResult, this);
+        this.#renderBackForwardCacheTestResult, this);
     resourceTreeModel.navigateToHistoryEntry(historyResults.entries[historyResults.currentIndex - 1]);
   }
 
-  private async navigateAwayAndBack(): Promise<void> {
+  async #navigateAwayAndBack(): Promise<void> {
     // Checking BFCache Compatibility
 
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
@@ -190,7 +215,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       // This event is removed by inside of goBackOneHistoryEntry().
       SDK.TargetManager.TargetManager.instance().addModelListener(
           SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.FrameNavigated,
-          this.goBackOneHistoryEntry, this);
+          this.#goBackOneHistoryEntry, this);
 
       // We can know whether the current page can use BFCache
       // as the browser navigates to another unrelated page and goes back to the current page.
@@ -200,8 +225,8 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  private renderMainFrameInformation(mainFrame: SDK.ResourceTreeModel.ResourceTreeFrame|null): LitHtml.TemplateResult {
-    if (!mainFrame) {
+  #renderMainFrameInformation(): LitHtml.TemplateResult {
+    if (!this.#frame) {
       // clang-format off
       return LitHtml.html`
         <${ReportView.ReportView.ReportKey.litTagName}>
@@ -213,16 +238,16 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       `;
       // clang-format on
     }
-    const isDisabled = this.screenStatus === ScreenStatusType.Running;
+    const isDisabled = this.#screenStatus === ScreenStatusType.Running;
     // clang-format off
     return LitHtml.html`
-      ${this.renderBackForwardCacheStatus(mainFrame.backForwardCacheDetails.restoredFromCache)}
+      ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
       <div class='url'>
         <div class='url-key'>
           ${i18nString(UIStrings.url)}
         </div>
         <div class='url-value'>
-          ${mainFrame.url}
+          ${this.#frame.url}
         </div>
       </div>
       <${ReportView.ReportView.ReportSection.litTagName}>
@@ -230,7 +255,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
           .disabled=${isDisabled}
           .spinner=${isDisabled}
           .variant=${Buttons.Button.Variant.PRIMARY}
-          @click=${this.navigateAwayAndBack}>
+          @click=${this.#navigateAwayAndBack}>
           ${isDisabled ? LitHtml.html`
             ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
@@ -239,7 +264,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
       </${ReportView.ReportView.ReportSection.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}>
       </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        ${this.maybeRenderExplanations(mainFrame.backForwardCacheDetails.explanations)}
+        ${this.#maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <x-link href="https://web.dev/bfcache/" class="link">
           ${i18nString(UIStrings.learnMore)}
@@ -249,7 +274,7 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format on
   }
 
-  private renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
+  #renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
     switch (status) {
       case true:
         // clang-format off
@@ -295,8 +320,8 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format on
   }
 
-  private maybeRenderExplanations(explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]):
-      LitHtml.TemplateResult|{} {
+  #maybeRenderExplanations(explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]): LitHtml.TemplateResult
+      |{} {
     if (explanations.length === 0) {
       return LitHtml.nothing;
     }
@@ -311,14 +336,14 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return LitHtml.html`
-      ${this.renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded)}
-      ${this.renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending)}
-      ${this.renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial)}
+      ${this.#renderExplanations(i18nString(UIStrings.pageSupportNeeded), i18nString(UIStrings.pageSupportNeededExplanation), pageSupportNeeded)}
+      ${this.#renderExplanations(i18nString(UIStrings.supportPending), i18nString(UIStrings.supportPendingExplanation), supportPending)}
+      ${this.#renderExplanations(i18nString(UIStrings.circumstantial), i18nString(UIStrings.circumstantialExplanation), circumstantial)}
     `;
     // clang-format on
   }
 
-  private renderExplanations(
+  #renderExplanations(
       category: Platform.UIString.LocalizedString, explainerText: Platform.UIString.LocalizedString,
       explanations: Protocol.Page.BackForwardCacheNotRestoredExplanation[]): LitHtml.TemplateResult {
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -337,13 +362,13 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
             </${IconButton.Icon.Icon.litTagName}>
           </div>
         </${ReportView.ReportView.ReportSectionHeader.litTagName}>
-        ${explanations.map(explanation => this.renderReason(explanation))}
+        ${explanations.map(explanation => this.#renderReason(explanation))}
       ` : LitHtml.nothing}
     `;
     // clang-format on
   }
 
-  private renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
+  #renderReason(explanation: Protocol.Page.BackForwardCacheNotRestoredExplanation): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <${ReportView.ReportView.ReportSection.litTagName}>
@@ -368,3 +393,12 @@ export class BackForwardCacheView extends UI.ThrottledWidget.ThrottledWidget {
     // clang-format on
   }
 }
+
+ComponentHelpers.CustomElements.defineComponent('devtools-resources-back-forward-cache-view', BackForwardCacheView);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-resources-back-forward-cache-view': BackForwardCacheView;
+  }
+}

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

@@ -30,20 +30,20 @@ export interface EndpointsGridData {
 export class EndpointsGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-endpoints-grid`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]> = new Map();
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
-    this.render();
+    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.#render();
   }
 
   set data(data: EndpointsGridData) {
-    this.endpoints = data.endpoints;
-    this.render();
+    this.#endpoints = data.endpoints;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     const endpointsGridData: DataGrid.DataGridController.DataGridControllerData = {
       columns: [
         {
@@ -68,7 +68,7 @@ export class EndpointsGrid extends HTMLElement {
           visible: true,
         },
       ],
-      rows: this.buildReportRows(),
+      rows: this.#buildReportRows(),
     };
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -76,7 +76,7 @@ export class EndpointsGrid extends HTMLElement {
     render(html`
       <div class="reporting-container">
         <div class="reporting-header">${i18n.i18n.lockedString('Endpoints')}</div>
-        ${this.endpoints.size > 0 ? html`
+        ${this.#endpoints.size > 0 ? html`
           <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
               endpointsGridData as DataGrid.DataGridController.DataGridControllerData}>
           </${DataGrid.DataGridController.DataGridController.litTagName}>
@@ -86,12 +86,12 @@ export class EndpointsGrid extends HTMLElement {
           </div>
         `}
       </div>
-    `, this.shadow);
+    `, this.#shadow);
     // clang-format on
   }
 
-  private buildReportRows(): DataGrid.DataGridUtils.Row[] {
-    return Array.from(this.endpoints)
+  #buildReportRows(): DataGrid.DataGridUtils.Row[] {
+    return Array.from(this.#endpoints)
         .map(([origin, endpointArray]) => endpointArray.map(endpoint => {
           return {
             cells: [