chrome-devtools-frontend 1.0.951410 → 1.0.952713

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

@@ -71,31 +71,31 @@ export interface BadgeData {
 
 export class Badge extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-tree-view-badge`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private adorner = new Adorners.Adorner.Adorner();
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #adorner = new Adorners.Adorner.Adorner();
 
   set data(data: BadgeData) {
-    this.render(data);
+    this.#render(data);
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [badgeStyles];
+    this.#shadow.adoptedStyleSheets = [badgeStyles];
   }
 
-  private render(data: BadgeData): void {
+  #render(data: BadgeData): void {
     const adornerContent = document.createElement('span');
     adornerContent.textContent = data.badgeContent;
-    this.adorner.data = {
+    this.#adorner.data = {
       name: 'badge',
       content: adornerContent,
     };
-    this.adorner.classList.add(`badge-${data.style}`);
+    this.#adorner.classList.add(`badge-${data.style}`);
 
     LitHtml.render(
         LitHtml.html`
-      ${this.adorner}
+      ${this.#adorner}
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 }
 
@@ -210,73 +210,73 @@ export interface OriginTrialTokenRowsData {
 
 export class OriginTrialTokenRows extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-token-rows`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus|null = null;
-  private parsedTokenDetails: TokenField[] = [];
-  private dateFormatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #tokenWithStatus: Protocol.Page.OriginTrialTokenWithStatus|null = null;
+  #parsedTokenDetails: TokenField[] = [];
+  #dateFormatter: Intl.DateTimeFormat = new Intl.DateTimeFormat(
       i18n.DevToolsLocale.DevToolsLocale.instance().locale,
       {dateStyle: 'long', timeStyle: 'long'},
   );
 
   set data(data: OriginTrialTokenRowsData) {
-    this.tokenWithStatus = data.node.treeNodeData as Protocol.Page.OriginTrialTokenWithStatus;
-    this.setTokenFields();
+    this.#tokenWithStatus = data.node.treeNodeData as Protocol.Page.OriginTrialTokenWithStatus;
+    this.#setTokenFields();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [originTrialTokenRowsStyles];
-    this.render();
+    this.#shadow.adoptedStyleSheets = [originTrialTokenRowsStyles];
+    this.#render();
   }
 
-  private renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => LitHtml.html`
+  #renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => LitHtml.html`
         <div class=${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}>
           ${fieldValue}
         </div>`;
 
-  private setTokenFields(): void {
-    if (!this.tokenWithStatus?.parsedToken) {
+  #setTokenFields(): void {
+    if (!this.#tokenWithStatus?.parsedToken) {
       return;
     }
-    this.parsedTokenDetails = [
+    this.#parsedTokenDetails = [
       {
         name: i18nString(UIStrings.origin),
-        value: this.renderTokenField(
-            this.tokenWithStatus.parsedToken.origin,
-            this.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin),
+        value: this.#renderTokenField(
+            this.#tokenWithStatus.parsedToken.origin,
+            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.WrongOrigin),
       },
       {
         name: i18nString(UIStrings.expiryTime),
-        value: this.renderTokenField(
-            this.dateFormatter.format(this.tokenWithStatus.parsedToken.expiryTime * 1000),
-            this.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired),
+        value: this.#renderTokenField(
+            this.#dateFormatter.format(this.#tokenWithStatus.parsedToken.expiryTime * 1000),
+            this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Expired),
       },
       {
         name: i18nString(UIStrings.usageRestriction),
-        value: this.renderTokenField(this.tokenWithStatus.parsedToken.usageRestriction),
+        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.usageRestriction),
       },
       {
         name: i18nString(UIStrings.isThirdParty),
-        value: this.renderTokenField(this.tokenWithStatus.parsedToken.isThirdParty.toString()),
+        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.isThirdParty.toString()),
       },
       {
         name: i18nString(UIStrings.matchSubDomains),
-        value: this.renderTokenField(this.tokenWithStatus.parsedToken.matchSubDomains.toString()),
+        value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.matchSubDomains.toString()),
       },
     ];
 
-    if (this.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.UnknownTrial) {
-      this.parsedTokenDetails = [
+    if (this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.UnknownTrial) {
+      this.#parsedTokenDetails = [
         {
           name: i18nString(UIStrings.trialName),
-          value: this.renderTokenField(this.tokenWithStatus.parsedToken.trialName),
+          value: this.#renderTokenField(this.#tokenWithStatus.parsedToken.trialName),
         },
-        ...this.parsedTokenDetails,
+        ...this.#parsedTokenDetails,
       ];
     }
   }
 
-  private render(): void {
-    if (!this.tokenWithStatus) {
+  #render(): void {
+    if (!this.#tokenWithStatus) {
       return;
     }
 
@@ -285,11 +285,11 @@ export class OriginTrialTokenRows extends HTMLElement {
         name: i18nString(UIStrings.status),
         value: LitHtml.html`
           <${Badge.litTagName} .data=${{
-          badgeContent: this.tokenWithStatus.status,
-          style: this.tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
+          badgeContent: this.#tokenWithStatus.status,
+          style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
         } as BadgeData}></${Badge.litTagName}>`,
       },
-      ...this.parsedTokenDetails,
+      ...this.#parsedTokenDetails,
     ];
 
     const tokenDetailRows = tokenDetails.map((field: TokenField): LitHtml.TemplateResult => {
@@ -305,7 +305,7 @@ export class OriginTrialTokenRows extends HTMLElement {
         ${tokenDetailRows}
       </div>
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 }
 
@@ -317,17 +317,17 @@ export interface OriginTrialTreeViewData {
 
 export class OriginTrialTreeView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-origin-trial-tree-view`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
   set data(data: OriginTrialTreeViewData) {
-    this.render(data.trials);
+    this.#render(data.trials);
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [originTrialTreeViewStyles];
+    this.#shadow.adoptedStyleSheets = [originTrialTreeViewStyles];
   }
 
-  private render(trials: Protocol.Page.OriginTrial[]): void {
+  #render(trials: Protocol.Page.OriginTrial[]): void {
     if (!trials.length) {
       return;
     }
@@ -340,7 +340,7 @@ export class OriginTrialTreeView extends HTMLElement {
         } as TreeOutline.TreeOutline.TreeOutlineData<OriginTrialTreeNodeData>}>
       </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 }
 

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

@@ -84,25 +84,25 @@ export function renderIconLink(
 
 export class PermissionsPolicySection extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-permissions-policy-section`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
 
   set data(data: PermissionsPolicySectionData) {
-    this.permissionsPolicySectionData = data;
-    this.render();
+    this.#permissionsPolicySectionData = data;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [permissionsPolicySectionStyles];
+    this.#shadow.adoptedStyleSheets = [permissionsPolicySectionStyles];
   }
 
-  private toggleShowPermissionsDisallowedDetails(): void {
-    this.permissionsPolicySectionData.showDetails = !this.permissionsPolicySectionData.showDetails;
-    this.render();
+  #toggleShowPermissionsDisallowedDetails(): void {
+    this.#permissionsPolicySectionData.showDetails = !this.#permissionsPolicySectionData.showDetails;
+    this.#render();
   }
 
-  private renderAllowed(): LitHtml.TemplateResult|{} {
-    const allowed = this.permissionsPolicySectionData.policies.filter(p => p.allowed).map(p => p.feature).sort();
+  #renderAllowed(): LitHtml.TemplateResult|{} {
+    const allowed = this.#permissionsPolicySectionData.policies.filter(p => p.allowed).map(p => p.feature).sort();
     if (!allowed.length) {
       return LitHtml.nothing;
     }
@@ -115,19 +115,19 @@ export class PermissionsPolicySection extends HTMLElement {
     `;
   }
 
-  private async renderDisallowed(): Promise<LitHtml.TemplateResult|{}> {
-    const disallowed = this.permissionsPolicySectionData.policies.filter(p => !p.allowed)
+  async #renderDisallowed(): Promise<LitHtml.TemplateResult|{}> {
+    const disallowed = this.#permissionsPolicySectionData.policies.filter(p => !p.allowed)
                            .sort((a, b) => a.feature.localeCompare(b.feature));
     if (!disallowed.length) {
       return LitHtml.nothing;
     }
-    if (!this.permissionsPolicySectionData.showDetails) {
+    if (!this.#permissionsPolicySectionData.showDetails) {
       return LitHtml.html`
         <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.disabledFeatures)}</${
           ReportView.ReportView.ReportKey.litTagName}>
         <${ReportView.ReportView.ReportValue.litTagName}>
           ${disallowed.map(p => p.feature).join(', ')}
-          <button class="link" @click=${(): void => this.toggleShowPermissionsDisallowedDetails()}>
+          <button class="link" @click=${(): void => this.#toggleShowPermissionsDisallowedDetails()}>
             ${i18nString(UIStrings.showDetails)}
           </button>
         </${ReportView.ReportView.ReportValue.litTagName}>
@@ -198,7 +198,7 @@ export class PermissionsPolicySection extends HTMLElement {
       <${ReportView.ReportView.ReportValue.litTagName} class="policies-list">
         ${featureRows}
         <div class="permissions-row">
-          <button class="link" @click=${(): void => this.toggleShowPermissionsDisallowedDetails()}>
+          <button class="link" @click=${(): void => this.#toggleShowPermissionsDisallowedDetails()}>
             ${i18nString(UIStrings.hideDetails)}
           </button>
         </div>
@@ -206,7 +206,7 @@ export class PermissionsPolicySection extends HTMLElement {
     `;
   }
 
-  private async render(): Promise<void> {
+  async #render(): Promise<void> {
     await coordinator.write('PermissionsPolicySection render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
@@ -214,12 +214,12 @@ export class PermissionsPolicySection extends HTMLElement {
         LitHtml.html`
           <${ReportView.ReportView.ReportSectionHeader.litTagName}>${i18n.i18n.lockedString('Permissions Policy')}</${
             ReportView.ReportView.ReportSectionHeader.litTagName}>
-          ${this.renderAllowed()}
-          ${LitHtml.Directives.until(this.renderDisallowed(), LitHtml.nothing)}
+          ${this.#renderAllowed()}
+          ${LitHtml.Directives.until(this.#renderDisallowed(), LitHtml.nothing)}
           <${ReportView.ReportView.ReportSectionDivider.litTagName}></${
             ReportView.ReportView.ReportSectionDivider.litTagName}>
         `,
-        this.shadow, {host: this},
+        this.#shadow, {host: this},
       );
       // clang-format on
     });

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

@@ -27,14 +27,14 @@ const {render, html} = LitHtml;
 
 export class ReportsGridStatusHeader extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid-status-header`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
-    this.render();
+    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -47,7 +47,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
           height: '16px',
           } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
       </x-link>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -59,22 +59,22 @@ export interface ReportsGridData {
 export class ReportsGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private reports: Protocol.Network.ReportingApiReport[] = [];
-  private protocolMonitorExperimentEnabled = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #reports: Protocol.Network.ReportingApiReport[] = [];
+  #protocolMonitorExperimentEnabled = false;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
-    this.protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
-    this.render();
+    this.#shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
+    this.#render();
   }
 
   set data(data: ReportsGridData) {
-    this.reports = data.reports;
-    this.render();
+    this.#reports = data.reports;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     const reportsGridData: DataGrid.DataGridController.DataGridControllerData = {
       columns: [
         {
@@ -123,10 +123,10 @@ export class ReportsGrid extends HTMLElement {
           visible: true,
         },
       ],
-      rows: this.buildReportRows(),
+      rows: this.#buildReportRows(),
     };
 
-    if (this.protocolMonitorExperimentEnabled) {
+    if (this.#protocolMonitorExperimentEnabled) {
       reportsGridData.columns.unshift(
           {id: 'id', title: 'ID', widthWeighting: 30, hideable: false, visible: true},
       );
@@ -137,7 +137,7 @@ export class ReportsGrid extends HTMLElement {
     render(html`
       <div class="reporting-container">
         <div class="reporting-header">${i18n.i18n.lockedString('Reports')}</div>
-        ${this.reports.length > 0 ? html`
+        ${this.#reports.length > 0 ? html`
           <${DataGrid.DataGridController.DataGridController.litTagName} .data=${
               reportsGridData as DataGrid.DataGridController.DataGridControllerData}>
           </${DataGrid.DataGridController.DataGridController.litTagName}>
@@ -147,22 +147,22 @@ export class ReportsGrid extends HTMLElement {
           </div>
         `}
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 
-  private buildReportRows(): DataGrid.DataGridUtils.Row[] {
-    return this.reports.map(report => ({
-                              cells: [
-                                {columnId: 'id', value: report.id},
-                                {columnId: 'url', value: report.initiatorUrl},
-                                {columnId: 'type', value: report.type},
-                                {columnId: 'status', value: report.status},
-                                {columnId: 'destination', value: report.destination},
-                                {columnId: 'timestamp', value: new Date(report.timestamp * 1000).toLocaleString()},
-                                {columnId: 'body', value: JSON.stringify(report.body)},
-                              ],
-                            }));
+  #buildReportRows(): DataGrid.DataGridUtils.Row[] {
+    return this.#reports.map(report => ({
+                               cells: [
+                                 {columnId: 'id', value: report.id},
+                                 {columnId: 'url', value: report.initiatorUrl},
+                                 {columnId: 'type', value: report.type},
+                                 {columnId: 'status', value: report.status},
+                                 {columnId: 'destination', value: report.destination},
+                                 {columnId: 'timestamp', value: new Date(report.timestamp * 1000).toLocaleString()},
+                                 {columnId: 'body', value: JSON.stringify(report.body)},
+                               ],
+                             }));
   }
 }
 

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

@@ -44,38 +44,38 @@ interface StackTraceRowData {
 
 export class StackTraceRow extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-stack-trace-row`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null = null;
+  #stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null = null;
 
   set data(data: StackTraceRowData) {
-    this.stackTraceRowItem = data.stackTraceRowItem;
-    this.render();
+    this.#stackTraceRowItem = data.stackTraceRowItem;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [stackTraceRowStyles];
+    this.#shadow.adoptedStyleSheets = [stackTraceRowStyles];
   }
 
-  private render(): void {
-    if (!this.stackTraceRowItem) {
+  #render(): void {
+    if (!this.#stackTraceRowItem) {
       return;
     }
     LitHtml.render(
         LitHtml.html`
       <div class="stack-trace-row">
-              <div class="stack-trace-function-name text-ellipsis" title=${this.stackTraceRowItem.functionName}>
-                ${this.stackTraceRowItem.functionName}
+              <div class="stack-trace-function-name text-ellipsis" title=${this.#stackTraceRowItem.functionName}>
+                ${this.#stackTraceRowItem.functionName}
               </div>
               <div class="stack-trace-source-location">
                 ${
-            this.stackTraceRowItem.link ?
-                LitHtml.html`<div class="text-ellipsis">\xA0@\xA0${this.stackTraceRowItem.link}</div>` :
+            this.#stackTraceRowItem.link ?
+                LitHtml.html`<div class="text-ellipsis">\xA0@\xA0${this.#stackTraceRowItem.link}</div>` :
                 LitHtml.nothing}
               </div>
             </div>
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 }
 
@@ -86,75 +86,76 @@ interface StackTraceLinkButtonData {
 
 export class StackTraceLinkButton extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-stack-trace-link-button`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private onShowAllClick: () => void = () => {};
-  private hiddenCallFramesCount: number|null = null;
+  #onShowAllClick: () => void = () => {};
+  #hiddenCallFramesCount: number|null = null;
 
   set data(data: StackTraceLinkButtonData) {
-    this.onShowAllClick = data.onShowAllClick;
-    this.hiddenCallFramesCount = data.hiddenCallFramesCount;
-    this.render();
+    this.#onShowAllClick = data.onShowAllClick;
+    this.#hiddenCallFramesCount = data.hiddenCallFramesCount;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [stackTraceLinkButtonStyles];
+    this.#shadow.adoptedStyleSheets = [stackTraceLinkButtonStyles];
   }
 
-  private render(): void {
-    if (!this.hiddenCallFramesCount) {
+  #render(): void {
+    if (!this.#hiddenCallFramesCount) {
       return;
     }
 
     LitHtml.render(
         LitHtml.html`
       <div class="stack-trace-row">
-          <button class="link" @click=${(): void => this.onShowAllClick()}>
+          <button class="link" @click=${(): void => this.#onShowAllClick()}>
             ${i18nString(UIStrings.showSMoreFrames, {
-          n: this.hiddenCallFramesCount,
+          n: this.#hiddenCallFramesCount,
         })}
           </button>
         </div>
     `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 }
 
 export class StackTrace extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-stack-trace`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private readonly linkifier = new Components.Linkifier.Linkifier();
-  private stackTraceRows: (Components.JSPresentationUtils.StackTraceRegularRow|
-                           Components.JSPresentationUtils.StackTraceAsyncRow)[] = [];
-  private showHidden = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #linkifier = new Components.Linkifier.Linkifier();
+  #stackTraceRows: (Components.JSPresentationUtils.StackTraceRegularRow|
+                    Components.JSPresentationUtils.StackTraceAsyncRow)[] = [];
+  #showHidden = false;
 
   set data(data: StackTraceData) {
     const frame = data.frame;
     const {creationStackTrace, creationStackTraceTarget} = frame.getCreationStackTraceData();
     if (creationStackTrace) {
-      this.stackTraceRows = data.buildStackTraceRows(
-          creationStackTrace, creationStackTraceTarget, this.linkifier, true, this.onStackTraceRowsUpdated.bind(this));
+      this.#stackTraceRows = data.buildStackTraceRows(
+          creationStackTrace, creationStackTraceTarget, this.#linkifier, true,
+          this.#onStackTraceRowsUpdated.bind(this));
     }
-    this.render();
+    this.#render();
   }
 
-  private onStackTraceRowsUpdated(stackTraceRows: (Components.JSPresentationUtils.StackTraceRegularRow|
-                                                   Components.JSPresentationUtils.StackTraceAsyncRow)[]): void {
-    this.stackTraceRows = stackTraceRows;
-    this.render();
+  #onStackTraceRowsUpdated(stackTraceRows: (Components.JSPresentationUtils.StackTraceRegularRow|
+                                            Components.JSPresentationUtils.StackTraceAsyncRow)[]): void {
+    this.#stackTraceRows = stackTraceRows;
+    this.#render();
   }
 
-  private onShowAllClick(): void {
-    this.showHidden = true;
-    this.render();
+  #onShowAllClick(): void {
+    this.#showHidden = true;
+    this.#render();
   }
 
   createRowTemplates(): LitHtml.TemplateResult[] {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
-    for (const item of this.stackTraceRows) {
-      if (this.showHidden || (!item.ignoreListHide && !item.rowCountHide)) {
+    for (const item of this.#stackTraceRows) {
+      if (this.#showHidden || (!item.ignoreListHide && !item.rowCountHide)) {
         if ('functionName' in item) {
           expandableRows.push(LitHtml.html`
           <${StackTraceRow.litTagName} data-stack-trace-row .data=${{
@@ -167,7 +168,7 @@ export class StackTrace extends HTMLElement {
           `);
         }
       }
-      if (!this.showHidden && 'functionName' in item && (item.ignoreListHide || item.rowCountHide)) {
+      if (!this.#showHidden && 'functionName' in item && (item.ignoreListHide || item.rowCountHide)) {
         hiddenCallFramesCount++;
       }
     }
@@ -175,7 +176,7 @@ export class StackTrace extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       expandableRows.push(LitHtml.html`
-      <${StackTraceLinkButton.litTagName} data-stack-trace-row .data=${{onShowAllClick: this.onShowAllClick.bind(this), hiddenCallFramesCount: hiddenCallFramesCount} as StackTraceLinkButtonData}></${StackTraceLinkButton.litTagName}>
+      <${StackTraceLinkButton.litTagName} data-stack-trace-row .data=${{onShowAllClick: this.#onShowAllClick.bind(this), hiddenCallFramesCount: hiddenCallFramesCount} as StackTraceLinkButtonData}></${StackTraceLinkButton.litTagName}>
       `);
       // clang-format on
     }
@@ -183,15 +184,15 @@ export class StackTrace extends HTMLElement {
     return expandableRows;
   }
 
-  private render(): void {
-    if (!this.stackTraceRows.length) {
+  #render(): void {
+    if (!this.#stackTraceRows.length) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(
         LitHtml.html`
           <span>${i18nString(UIStrings.cannotRenderStackTrace)}</span>
         `,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
       return;
     }
     const expandableRows = this.createRowTemplates();
@@ -202,7 +203,7 @@ export class StackTrace extends HTMLElement {
         } as ExpandableList.ExpandableList.ExpandableListData}>
         </${ExpandableList.ExpandableList.ExpandableList.litTagName}>
       `,
-      this.shadow, {host: this});
+      this.#shadow, {host: this});
     // clang-format on
   }
 }