chrome-devtools-frontend 1.0.951864 → 1.0.952284

package/front_end/models/issues_manager/SameSiteCookieIssue.ts

@@ -38,27 +38,27 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SameSiteCookieIs
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class SameSiteCookieIssue extends Issue {
-  private issueDetails: Protocol.Audits.SameSiteCookieIssueDetails;
+  #issueDetails: Protocol.Audits.SameSiteCookieIssueDetails;
 
   constructor(
       code: string, issueDetails: Protocol.Audits.SameSiteCookieIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel) {
     super(code, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
-  private cookieId(): string {
-    if (this.issueDetails.cookie) {
-      const {domain, path, name} = this.issueDetails.cookie;
+  #cookieId(): string {
+    if (this.#issueDetails.cookie) {
+      const {domain, path, name} = this.#issueDetails.cookie;
       const cookieId = `${domain};${path};${name}`;
       return cookieId;
     }
-    return this.issueDetails.rawCookieLine ?? 'no-cookie-info';
+    return this.#issueDetails.rawCookieLine ?? 'no-cookie-info';
   }
 
   primaryKey(): string {
-    const requestId = this.issueDetails.request ? this.issueDetails.request.requestId : 'no-request';
-    return `${this.code()}-(${this.cookieId()})-(${requestId})`;
+    const requestId = this.#issueDetails.request ? this.#issueDetails.request.requestId : 'no-request';
+    return `${this.code()}-(${this.#cookieId()})-(${requestId})`;
   }
 
   /**
@@ -162,22 +162,22 @@ export class SameSiteCookieIssue extends Issue {
   }
 
   cookies(): Iterable<Protocol.Audits.AffectedCookie> {
-    if (this.issueDetails.cookie) {
-      return [this.issueDetails.cookie];
+    if (this.#issueDetails.cookie) {
+      return [this.#issueDetails.cookie];
     }
     return [];
   }
 
   rawCookieLines(): Iterable<string> {
-    if (this.issueDetails.rawCookieLine) {
-      return [this.issueDetails.rawCookieLine];
+    if (this.#issueDetails.rawCookieLine) {
+      return [this.#issueDetails.rawCookieLine];
     }
     return [];
   }
 
   requests(): Iterable<Protocol.Audits.AffectedRequest> {
-    if (this.issueDetails.request) {
-      return [this.issueDetails.request];
+    if (this.#issueDetails.request) {
+      return [this.#issueDetails.request];
     }
     return [];
   }
@@ -196,11 +196,11 @@ export class SameSiteCookieIssue extends Issue {
 
   isCausedByThirdParty(): boolean {
     const topFrame = SDK.FrameManager.FrameManager.instance().getTopFrame();
-    return isCausedByThirdParty(topFrame, this.issueDetails.cookieUrl);
+    return isCausedByThirdParty(topFrame, this.#issueDetails.cookieUrl);
   }
 
   getKind(): IssueKind {
-    if (this.issueDetails.cookieExclusionReasons?.length > 0) {
+    if (this.#issueDetails.cookieExclusionReasons?.length > 0) {
       return IssueKind.PageError;
     }
     return IssueKind.BreakingChange;

package/front_end/models/issues_manager/SharedArrayBufferIssue.ts

@@ -20,12 +20,12 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/SharedArrayBuffe
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SharedArrayBufferIssue extends Issue {
-  private issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails;
+  #issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.SharedArrayBufferIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
     const umaCode = [Protocol.Audits.InspectorIssueCode.SharedArrayBufferIssue, issueDetails.type].join('::');
     super({code: Protocol.Audits.InspectorIssueCode.SharedArrayBufferIssue, umaCode}, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -33,7 +33,7 @@ export class SharedArrayBufferIssue extends Issue {
   }
 
   details(): Protocol.Audits.SharedArrayBufferIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription {
@@ -47,11 +47,11 @@ export class SharedArrayBufferIssue extends Issue {
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
-    if (this.issueDetails.isWarning) {
+    if (this.#issueDetails.isWarning) {
       return IssueKind.BreakingChange;
     }
     return IssueKind.PageError;

package/front_end/models/issues_manager/SourceFrameIssuesManager.ts

@@ -16,21 +16,21 @@ import {Events} from './IssuesManagerEvents.js';
 import {getIssueTitleFromMarkdownDescription} from './MarkdownIssueDescription.js';
 
 export class SourceFrameIssuesManager {
-  private locationPool = new Bindings.LiveLocation.LiveLocationPool();
-  private issueMessages = new Array<IssueMessage>();
+  #locationPool = new Bindings.LiveLocation.LiveLocationPool();
+  #issueMessages = new Array<IssueMessage>();
 
   constructor(private readonly issuesManager: IssuesManager) {
-    this.issuesManager.addEventListener(Events.IssueAdded, this.onIssueAdded, this);
-    this.issuesManager.addEventListener(Events.FullUpdateRequired, this.onFullUpdateRequired, this);
+    this.issuesManager.addEventListener(Events.IssueAdded, this.#onIssueAdded, this);
+    this.issuesManager.addEventListener(Events.FullUpdateRequired, this.#onFullUpdateRequired, this);
   }
 
-  private onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssueAddedEvent>): void {
+  #onIssueAdded(event: Common.EventTarget.EventTargetEvent<IssueAddedEvent>): void {
     const {issue} = event.data;
-    this.addIssue(issue);
+    this.#addIssue(issue);
   }
 
-  private addIssue(issue: Issue): void {
-    if (!this.isTrustedTypeIssue(issue)) {
+  #addIssue(issue: Issue): void {
+    if (!this.#isTrustedTypeIssue(issue)) {
       return;
     }
     const issuesModel = issue.model();
@@ -43,20 +43,20 @@ export class SourceFrameIssuesManager {
       const rawLocation =
           debuggerModel.createRawLocationByURL(srcLocation.url, srcLocation.lineNumber, srcLocation.columnNumber);
       if (rawLocation) {
-        this.addIssueMessageToScript(issue, rawLocation);
+        this.#addIssueMessageToScript(issue, rawLocation);
       }
     }
   }
 
-  private onFullUpdateRequired(): void {
-    this.resetMessages();
+  #onFullUpdateRequired(): void {
+    this.#resetMessages();
     const issues = this.issuesManager.issues();
     for (const issue of issues) {
-      this.addIssue(issue);
+      this.#addIssue(issue);
     }
   }
 
-  private async addIssueMessageToScript(issue: Issue, rawLocation: SDK.DebuggerModel.Location): Promise<void> {
+  async #addIssueMessageToScript(issue: Issue, rawLocation: SDK.DebuggerModel.Location): Promise<void> {
     const description = issue.getDescription();
     if (description) {
       const title = await getIssueTitleFromMarkdownDescription(description);
@@ -64,58 +64,59 @@ export class SourceFrameIssuesManager {
         const clickHandler = (): void => {
           Common.Revealer.reveal(issue);
         };
-        this.issueMessages.push(new IssueMessage(title, issue.getKind(), rawLocation, this.locationPool, clickHandler));
+        this.#issueMessages.push(
+            new IssueMessage(title, issue.getKind(), rawLocation, this.#locationPool, clickHandler));
       }
     }
   }
 
-  private isTrustedTypeIssue(issue: Issue): issue is ContentSecurityPolicyIssue {
+  #isTrustedTypeIssue(issue: Issue): issue is ContentSecurityPolicyIssue {
     return issue instanceof ContentSecurityPolicyIssue && issue.code() === trustedTypesSinkViolationCode ||
         issue.code() === trustedTypesPolicyViolationCode;
   }
 
-  private resetMessages(): void {
-    for (const message of this.issueMessages) {
+  #resetMessages(): void {
+    for (const message of this.#issueMessages) {
       message.dispose();
     }
-    this.issueMessages = [];
-    this.locationPool.disposeAll();
+    this.#issueMessages = [];
+    this.#locationPool.disposeAll();
   }
 }
 
 export class IssueMessage extends Workspace.UISourceCode.Message {
-  private uiSourceCode?: Workspace.UISourceCode.UISourceCode = undefined;
-  private kind: IssueKind;
+  #uiSourceCode?: Workspace.UISourceCode.UISourceCode = undefined;
+  #kind: IssueKind;
 
   constructor(
       title: string, kind: IssueKind, rawLocation: SDK.DebuggerModel.Location,
       locationPool: Bindings.LiveLocation.LiveLocationPool, clickHandler: () => void) {
     super(Workspace.UISourceCode.Message.Level.Issue, title, clickHandler);
-    this.kind = kind;
+    this.#kind = kind;
     Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createLiveLocation(
-        rawLocation, this.updateLocation.bind(this), locationPool);
+        rawLocation, this.#updateLocation.bind(this), locationPool);
   }
 
-  private async updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
-    if (this.uiSourceCode) {
-      this.uiSourceCode.removeMessage(this);
+  async #updateLocation(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> {
+    if (this.#uiSourceCode) {
+      this.#uiSourceCode.removeMessage(this);
     }
     const uiLocation = await liveLocation.uiLocation();
     if (!uiLocation) {
       return;
     }
     this.range = TextUtils.TextRange.TextRange.createFromLocation(uiLocation.lineNumber, uiLocation.columnNumber || 0);
-    this.uiSourceCode = uiLocation.uiSourceCode;
-    this.uiSourceCode.addMessage(this);
+    this.#uiSourceCode = uiLocation.uiSourceCode;
+    this.#uiSourceCode.addMessage(this);
   }
 
   getIssueKind(): IssueKind {
-    return this.kind;
+    return this.#kind;
   }
 
   dispose(): void {
-    if (this.uiSourceCode) {
-      this.uiSourceCode.removeMessage(this);
+    if (this.#uiSourceCode) {
+      this.#uiSourceCode.removeMessage(this);
     }
   }
 }

package/front_end/models/issues_manager/TrustedWebActivityIssue.ts

@@ -20,21 +20,21 @@ const str_ = i18n.i18n.registerUIStrings('models/issues_manager/TrustedWebActivi
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
 export class TrustedWebActivityIssue extends Issue {
-  private issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails;
+  #issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails;
 
   constructor(issueDetails: Protocol.Audits.TrustedWebActivityIssueDetails) {
     const issueCode =
         [Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue, issueDetails.violationType].join('::');
     super(issueCode);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   details(): Protocol.Audits.TrustedWebActivityIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription|null {
-    const description = issueDescriptions.get(this.issueDetails.violationType);
+    const description = issueDescriptions.get(this.#issueDetails.violationType);
     if (!description) {
       return null;
     }
@@ -46,7 +46,7 @@ export class TrustedWebActivityIssue extends Issue {
   }
 
   primaryKey(): string {
-    return `${Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue}-${JSON.stringify(this.issueDetails)}`;
+    return `${Protocol.Audits.InspectorIssueCode.TrustedWebActivityIssue}-${JSON.stringify(this.#issueDetails)}`;
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/WasmCrossOriginModuleSharingIssue.ts

@@ -20,13 +20,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class WasmCrossOriginModuleSharingIssue extends
     Issue<Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue> {
-  private issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails;
+  #issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails;
 
   constructor(
       issueDetails: Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails,
       issuesModel: SDK.IssuesModel.IssuesModel) {
     super(Protocol.Audits.InspectorIssueCode.WasmCrossOriginModuleSharingIssue, issuesModel);
-    this.issueDetails = issueDetails;
+    this.#issueDetails = issueDetails;
   }
 
   getCategory(): IssueCategory {
@@ -34,7 +34,7 @@ export class WasmCrossOriginModuleSharingIssue extends
   }
 
   details(): Protocol.Audits.WasmCrossOriginModuleSharingIssueDetails {
-    return this.issueDetails;
+    return this.#issueDetails;
   }
 
   getDescription(): MarkdownIssueDescription|null {
@@ -48,11 +48,11 @@ export class WasmCrossOriginModuleSharingIssue extends
   }
 
   primaryKey(): string {
-    return JSON.stringify(this.issueDetails);
+    return JSON.stringify(this.#issueDetails);
   }
 
   getKind(): IssueKind {
-    return this.issueDetails.isWarning ? IssueKind.BreakingChange : IssueKind.PageError;
+    return this.#issueDetails.isWarning ? IssueKind.BreakingChange : IssueKind.PageError;
   }
 
   static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):

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

@@ -107,30 +107,30 @@ const enum ScreenStatusType {
 }
 
 export class BackForwardCacheViewWrapper extends UI.ThrottledWidget.ThrottledWidget {
-  private readonly bfcacheView = new BackForwardCacheView();
+  readonly #bfcacheView = new BackForwardCacheView();
 
   constructor() {
     super(true, 1000);
-    this.getMainResourceTreeModel()?.addEventListener(
+    this.#getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.MainFrameNavigated, this.update, this);
-    this.getMainResourceTreeModel()?.addEventListener(
+    this.#getMainResourceTreeModel()?.addEventListener(
         SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, this.update, this);
     this.contentElement.classList.add('overflow-auto');
-    this.contentElement.appendChild(this.bfcacheView);
+    this.contentElement.appendChild(this.#bfcacheView);
     this.update();
   }
 
   async doUpdate(): Promise<void> {
-    this.bfcacheView.data = {frame: this.getMainFrame()};
+    this.#bfcacheView.data = {frame: this.#getMainFrame()};
   }
 
-  private getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
+  #getMainResourceTreeModel(): SDK.ResourceTreeModel.ResourceTreeModel|null {
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     return mainTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel) || null;
   }
 
-  private getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
-    return this.getMainResourceTreeModel()?.mainFrame || null;
+  #getMainFrame(): SDK.ResourceTreeModel.ResourceTreeFrame|null {
+    return this.#getMainResourceTreeModel()?.mainFrame || null;
   }
 }
 
@@ -152,10 +152,10 @@ export class BackForwardCacheView extends HTMLElement {
 
   set data(data: BackForwardCacheViewData) {
     this.#frame = data.frame;
-    this.render();
+    this.#render();
   }
 
-  private async render(): Promise<void> {
+  async #render(): Promise<void> {
     await coordinator.write('BackForwardCacheView render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
@@ -163,27 +163,27 @@ export class BackForwardCacheView extends HTMLElement {
         <${ReportView.ReportView.Report.litTagName} .data=${
             {reportTitle: i18nString(UIStrings.backForwardCacheTitle)} as ReportView.ReportView.ReportData
         }>
-          ${this.renderMainFrameInformation()}
+          ${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.#renderBackForwardCacheTestResult, this);
     this.#screenStatus = ScreenStatusType.Result;
-    this.render();
+    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.#goBackOneHistoryEntry, this);
     this.#screenStatus = ScreenStatusType.Running;
-    this.render();
+    this.#render();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
       return;
@@ -198,11 +198,11 @@ export class BackForwardCacheView extends HTMLElement {
     }
     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();
@@ -215,7 +215,7 @@ export class BackForwardCacheView extends HTMLElement {
       // 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.
@@ -225,7 +225,7 @@ export class BackForwardCacheView extends HTMLElement {
     }
   }
 
-  private renderMainFrameInformation(): LitHtml.TemplateResult {
+  #renderMainFrameInformation(): LitHtml.TemplateResult {
     if (!this.#frame) {
       // clang-format off
       return LitHtml.html`
@@ -241,7 +241,7 @@ export class BackForwardCacheView extends HTMLElement {
     const isDisabled = this.#screenStatus === ScreenStatusType.Running;
     // clang-format off
     return LitHtml.html`
-      ${this.renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
+      ${this.#renderBackForwardCacheStatus(this.#frame.backForwardCacheDetails.restoredFromCache)}
       <div class='url'>
         <div class='url-key'>
           ${i18nString(UIStrings.url)}
@@ -255,7 +255,7 @@ export class BackForwardCacheView extends HTMLElement {
           .disabled=${isDisabled}
           .spinner=${isDisabled}
           .variant=${Buttons.Button.Variant.PRIMARY}
-          @click=${this.navigateAwayAndBack}>
+          @click=${this.#navigateAwayAndBack}>
           ${isDisabled ? LitHtml.html`
             ${i18nString(UIStrings.runningTest)}`:`
             ${i18nString(UIStrings.runTest)}
@@ -264,7 +264,7 @@ export class BackForwardCacheView extends HTMLElement {
       </${ReportView.ReportView.ReportSection.litTagName}>
       <${ReportView.ReportView.ReportSectionDivider.litTagName}>
       </${ReportView.ReportView.ReportSectionDivider.litTagName}>
-        ${this.maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations)}
+        ${this.#maybeRenderExplanations(this.#frame.backForwardCacheDetails.explanations)}
       <${ReportView.ReportView.ReportSection.litTagName}>
         <x-link href="https://web.dev/bfcache/" class="link">
           ${i18nString(UIStrings.learnMore)}
@@ -274,7 +274,7 @@ export class BackForwardCacheView extends HTMLElement {
     // clang-format on
   }
 
-  private renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
+  #renderBackForwardCacheStatus(status: boolean|undefined): LitHtml.TemplateResult {
     switch (status) {
       case true:
         // clang-format off
@@ -320,8 +320,8 @@ export class BackForwardCacheView extends HTMLElement {
     // 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;
     }
@@ -336,14 +336,14 @@ export class BackForwardCacheView extends HTMLElement {
     // 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.
@@ -362,13 +362,13 @@ export class BackForwardCacheView extends HTMLElement {
             </${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}>

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: [