chrome-devtools-frontend 1.0.950971 → 1.0.952403

package/front_end/panels/elements/components/QueryContainer.ts

@@ -31,53 +31,53 @@ export interface QueryContainerData {
 export class QueryContainer extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-query-container`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private queryName?: string;
-  private container?: DOMNode;
-  private onContainerLinkClick?: (event: Event) => void;
-  private isContainerLinkHovered = false;
-  private queriedSizeDetails?: SDK.CSSContainerQuery.ContainerQueriedSizeDetails;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #queryName?: string;
+  #container?: DOMNode;
+  #onContainerLinkClick?: (event: Event) => void;
+  #isContainerLinkHovered = false;
+  #queriedSizeDetails?: SDK.CSSContainerQuery.ContainerQueriedSizeDetails;
 
   set data(data: QueryContainerData) {
-    this.queryName = data.queryName;
-    this.container = data.container;
-    this.onContainerLinkClick = data.onContainerLinkClick;
-    this.render();
+    this.#queryName = data.queryName;
+    this.#container = data.container;
+    this.#onContainerLinkClick = data.onContainerLinkClick;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [queryContainerStyles];
+    this.#shadow.adoptedStyleSheets = [queryContainerStyles];
   }
 
   updateContainerQueriedSizeDetails(details: SDK.CSSContainerQuery.ContainerQueriedSizeDetails): void {
-    this.queriedSizeDetails = details;
-    this.render();
+    this.#queriedSizeDetails = details;
+    this.#render();
   }
 
-  private async onContainerLinkMouseEnter(): Promise<void> {
-    this.container?.highlightNode('container-outline');
-    this.isContainerLinkHovered = true;
+  async #onContainerLinkMouseEnter(): Promise<void> {
+    this.#container?.highlightNode('container-outline');
+    this.#isContainerLinkHovered = true;
     this.dispatchEvent(new QueriedSizeRequestedEvent());
   }
 
-  private onContainerLinkMouseLeave(): void {
-    this.container?.clearHighlight();
-    this.isContainerLinkHovered = false;
-    this.render();
+  #onContainerLinkMouseLeave(): void {
+    this.#container?.clearHighlight();
+    this.#isContainerLinkHovered = false;
+    this.#render();
   }
 
-  private render(): void {
-    if (!this.container) {
+  #render(): void {
+    if (!this.#container) {
       return;
     }
 
     let idToDisplay, classesToDisplay;
-    if (!this.queryName) {
-      idToDisplay = this.container.getAttribute('id');
-      classesToDisplay = this.container.getAttribute('class')?.split(/\s+/).filter(Boolean);
+    if (!this.#queryName) {
+      idToDisplay = this.#container.getAttribute('id');
+      classesToDisplay = this.#container.getAttribute('class')?.split(/\s+/).filter(Boolean);
     }
 
-    const nodeTitle = this.queryName || this.container.nodeNameNicelyCased;
+    const nodeTitle = this.#queryName || this.#container.nodeNameNicelyCased;
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -87,9 +87,9 @@ export class QueryContainer extends HTMLElement {
       <a href="#"
         draggable=false
         class="container-link"
-        @click=${this.onContainerLinkClick}
-        @mouseenter=${this.onContainerLinkMouseEnter}
-        @mouseleave=${this.onContainerLinkMouseLeave}
+        @click=${this.#onContainerLinkClick}
+        @mouseenter=${this.#onContainerLinkMouseEnter}
+        @mouseleave=${this.#onContainerLinkMouseLeave}
       ><${NodeText.litTagName}
           data-node-title=${nodeTitle}
           .data=${{
@@ -97,39 +97,39 @@ export class QueryContainer extends HTMLElement {
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
       } as NodeTextData}></${NodeText.litTagName}></a>
-      ${this.isContainerLinkHovered ? this.renderQueriedSizeDetails() : LitHtml.nothing}
-    `, this.shadow, {
+      ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on
   }
 
-  private renderQueriedSizeDetails(): LitHtml.TemplateResult|{} {
-    if (!this.queriedSizeDetails || this.queriedSizeDetails.queryAxis === QueryAxis.None) {
+  #renderQueriedSizeDetails(): LitHtml.TemplateResult|{} {
+    if (!this.#queriedSizeDetails || this.#queriedSizeDetails.queryAxis === QueryAxis.None) {
       return LitHtml.nothing;
     }
 
-    const areBothAxesQueried = this.queriedSizeDetails.queryAxis === QueryAxis.Both;
+    const areBothAxesQueried = this.#queriedSizeDetails.queryAxis === QueryAxis.Both;
 
     const axisIconClasses = LitHtml.Directives.classMap({
       'axis-icon': true,
       'hidden': areBothAxesQueried,
-      'vertical': this.queriedSizeDetails.physicalAxis === PhysicalAxis.Vertical,
+      'vertical': this.#queriedSizeDetails.physicalAxis === PhysicalAxis.Vertical,
     });
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
       <span class="queried-size-details">
-        (${this.queriedSizeDetails.queryAxis}<${IconButton.Icon.Icon.litTagName}
+        (${this.#queriedSizeDetails.queryAxis}<${IconButton.Icon.Icon.litTagName}
           class=${axisIconClasses} .data=${{
             iconName: 'ic_dimension_single',
             color: 'var(--color-text-primary)',
           } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>)
-        ${areBothAxesQueried && this.queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
-        ${this.queriedSizeDetails.width || LitHtml.nothing}
-        ${areBothAxesQueried && this.queriedSizeDetails.height ? 'height:' : LitHtml.nothing}
-        ${this.queriedSizeDetails.height || LitHtml.nothing}
+        ${areBothAxesQueried && this.#queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
+        ${this.#queriedSizeDetails.width || LitHtml.nothing}
+        ${areBothAxesQueried && this.#queriedSizeDetails.height ? 'height:' : LitHtml.nothing}
+        ${this.#queriedSizeDetails.height || LitHtml.nothing}
       </span>
     `;
     // clang-format on

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -69,9 +69,9 @@ export class PropertyDeselectedEvent extends Event {
 
 // eslint-disable-next-line rulesdir/check_component_naming
 export class StylePropertyEditor extends HTMLElement {
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private authoredProperties: Map<string, string> = new Map();
-  private computedProperties: Map<string, string> = new Map();
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #authoredProperties: Map<string, string> = new Map();
+  #computedProperties: Map<string, string> = new Map();
   protected readonly editableProperties: EditableProperty[] = [];
 
   constructor() {
@@ -79,7 +79,7 @@ export class StylePropertyEditor extends HTMLElement {
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [stylePropertyEditorStyles];
+    this.#shadow.adoptedStyleSheets = [stylePropertyEditorStyles];
   }
 
   getEditableProperties(): EditableProperty[] {
@@ -87,28 +87,28 @@ export class StylePropertyEditor extends HTMLElement {
   }
 
   set data(data: FlexEditorData) {
-    this.authoredProperties = data.authoredProperties;
-    this.computedProperties = data.computedProperties;
-    this.render();
+    this.#authoredProperties = data.authoredProperties;
+    this.#computedProperties = data.computedProperties;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="container">
-        ${this.editableProperties.map(prop => this.renderProperty(prop))}
+        ${this.editableProperties.map(prop => this.#renderProperty(prop))}
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on
   }
 
-  private renderProperty(prop: EditableProperty): LitHtml.TemplateResult {
-    const authoredValue = this.authoredProperties.get(prop.propertyName);
+  #renderProperty(prop: EditableProperty): LitHtml.TemplateResult {
+    const authoredValue = this.#authoredProperties.get(prop.propertyName);
     const notAuthored = !authoredValue;
-    const shownValue = authoredValue || this.computedProperties.get(prop.propertyName);
+    const shownValue = authoredValue || this.#computedProperties.get(prop.propertyName);
     const classes = Directives.classMap({
       'property-value': true,
       'not-authored': notAuthored,
@@ -118,14 +118,14 @@ export class StylePropertyEditor extends HTMLElement {
         <span class="property-name">${prop.propertyName}</span>: <span class=${classes}>${shownValue}</span>
       </div>
       <div class="buttons">
-        ${prop.propertyValues.map(value => this.renderButton(value, prop.propertyName, value === authoredValue))}
+        ${prop.propertyValues.map(value => this.#renderButton(value, prop.propertyName, value === authoredValue))}
       </div>
     </div>`;
   }
 
-  private renderButton(propertyValue: string, propertyName: string, selected: boolean = false): LitHtml.TemplateResult {
+  #renderButton(propertyValue: string, propertyName: string, selected: boolean = false): LitHtml.TemplateResult {
     const query = `${propertyName}: ${propertyValue}`;
-    const iconInfo = this.findIcon(query, this.computedProperties);
+    const iconInfo = this.findIcon(query, this.#computedProperties);
     if (!iconInfo) {
       throw new Error(`Icon for ${query} is not found`);
     }
@@ -137,14 +137,14 @@ export class StylePropertyEditor extends HTMLElement {
     const values = {propertyName, propertyValue};
     const title = selected ? i18nString(UIStrings.deselectButton, values) : i18nString(UIStrings.selectButton, values);
     return html`<button title=${title} class=${classes} @click=${
-        (): void => this.onButtonClick(propertyName, propertyValue, selected)}>
+        (): void => this.#onButtonClick(propertyName, propertyValue, selected)}>
        <${IconButton.Icon.Icon.litTagName} style=${transform} .data=${
         {iconName: iconInfo.iconName, color: 'var(--icon-color)', width: '18px', height: '18px'} as
         IconButton.Icon.IconWithName}></${IconButton.Icon.Icon.litTagName}>
     </button>`;
   }
 
-  private onButtonClick(propertyName: string, propertyValue: string, selected: boolean): void {
+  #onButtonClick(propertyName: string, propertyValue: string, selected: boolean): void {
     if (selected) {
       this.dispatchEvent(new PropertyDeselectedEvent(propertyName, propertyValue));
     } else {

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -91,17 +91,17 @@ export class SizeInputElement extends HTMLElement {
              placeholder=${this.#placeholder}
              ?disabled=${this.#disabled}
              .value=${this.#size}
-             @change=${this.fireSizeChange}
-             @keydown=${this.handleModifierKeys} />
+             @change=${this.#fireSizeChange}
+             @keydown=${this.#handleModifierKeys} />
     `,
         this.#root, {host: this});
   }
 
-  private fireSizeChange(event: Event): void {
+  #fireSizeChange(event: Event): void {
     this.dispatchEvent(new SizeChangedEvent(getInputValue(event)));
   }
 
-  private handleModifierKeys(event: Event): void {
+  #handleModifierKeys(event: Event): void {
     const modifiedValue = UILegacy.UIUtils.modifiedFloatNumber(getInputValue(event), event);
     if (modifiedValue === null) {
       return;

package/front_end/panels/event_listeners/EventListenersUtils.ts

@@ -347,8 +347,9 @@ export function frameworkEventListeners(object: SDK.RemoteObject.RemoteObject):
       }
     }
 
+    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    function checkInternalHandler(handler: any): (() => any)|null {
+    function checkInternalHandler(handler: any): (() => void)|null {
       if (handler && (typeof handler === 'function')) {
         return handler;
       }

package/front_end/panels/issues/AffectedBlockedByResponseView.ts

@@ -32,7 +32,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedBlockedByRespons
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AffectedBlockedByResponseView extends AffectedResourcesView {
-  private appendDetails(details: Iterable<Protocol.Audits.BlockedByResponseIssueDetails>): void {
+  #appendDetails(details: Iterable<Protocol.Audits.BlockedByResponseIssueDetails>): void {
     const header = document.createElement('tr');
     this.appendColumnTitle(header, i18nString(UIStrings.requestC));
     this.appendColumnTitle(header, i18nString(UIStrings.parentFrame));
@@ -42,7 +42,7 @@ export class AffectedBlockedByResponseView extends AffectedResourcesView {
 
     let count = 0;
     for (const detail of details) {
-      this.appendDetail(detail);
+      this.#appendDetail(detail);
       count++;
     }
     this.updateAffectedResourceCount(count);
@@ -52,7 +52,7 @@ export class AffectedBlockedByResponseView extends AffectedResourcesView {
     return i18nString(UIStrings.nRequests, {n: count});
   }
 
-  private appendDetail(details: Protocol.Audits.BlockedByResponseIssueDetails): void {
+  #appendDetail(details: Protocol.Audits.BlockedByResponseIssueDetails): void {
     const element = document.createElement('tr');
     element.classList.add('affected-resource-row');
 
@@ -83,6 +83,6 @@ export class AffectedBlockedByResponseView extends AffectedResourcesView {
 
   update(): void {
     this.clear();
-    this.appendDetails(this.issue.getBlockedByResponseDetails());
+    this.#appendDetails(this.issue.getBlockedByResponseDetails());
   }
 }

package/front_end/panels/issues/AffectedCookiesView.ts

@@ -45,8 +45,7 @@ export class AffectedCookiesView extends AffectedResourcesView {
     return i18nString(UIStrings.nCookies, {n: count});
   }
 
-  private appendAffectedCookies(cookies: Iterable<{cookie: Protocol.Audits.AffectedCookie, hasRequest: boolean}>):
-      void {
+  #appendAffectedCookies(cookies: Iterable<{cookie: Protocol.Audits.AffectedCookie, hasRequest: boolean}>): void {
     const header = document.createElement('tr');
     this.appendColumnTitle(header, i18nString(UIStrings.name));
     this.appendColumnTitle(
@@ -58,12 +57,12 @@ export class AffectedCookiesView extends AffectedResourcesView {
     let count = 0;
     for (const cookie of cookies) {
       count++;
-      this.appendAffectedCookie(cookie.cookie, cookie.hasRequest);
+      this.#appendAffectedCookie(cookie.cookie, cookie.hasRequest);
     }
     this.updateAffectedResourceCount(count);
   }
 
-  private appendAffectedCookie(cookie: Protocol.Audits.AffectedCookie, hasAssociatedRequest: boolean): void {
+  #appendAffectedCookie(cookie: Protocol.Audits.AffectedCookie, hasAssociatedRequest: boolean): void {
     const element = document.createElement('tr');
     element.classList.add('affected-resource-cookie');
     const name = document.createElement('td');
@@ -96,7 +95,7 @@ export class AffectedCookiesView extends AffectedResourcesView {
 
   update(): void {
     this.clear();
-    this.appendAffectedCookies(this.issue.cookiesWithRequestIndicator());
+    this.#appendAffectedCookies(this.issue.cookiesWithRequestIndicator());
   }
 }
 

package/front_end/panels/issues/AffectedDirectivesView.ts

@@ -57,7 +57,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedDirectivesView.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AffectedDirectivesView extends AffectedResourcesView {
-  private appendStatus(element: Element, isReportOnly: boolean): void {
+  #appendStatus(element: Element, isReportOnly: boolean): void {
     const status = document.createElement('td');
     if (isReportOnly) {
       status.classList.add('affected-resource-report-only-status');
@@ -73,20 +73,20 @@ export class AffectedDirectivesView extends AffectedResourcesView {
     return i18nString(UIStrings.nDirectives, {n: count});
   }
 
-  private appendViolatedDirective(element: Element, directive: string): void {
+  #appendViolatedDirective(element: Element, directive: string): void {
     const violatedDirective = document.createElement('td');
     violatedDirective.textContent = directive;
     element.appendChild(violatedDirective);
   }
 
-  private appendBlockedURL(element: Element, url: string): void {
+  #appendBlockedURL(element: Element, url: string): void {
     const info = document.createElement('td');
     info.classList.add('affected-resource-directive-info');
     info.textContent = url;
     element.appendChild(info);
   }
 
-  private appendBlockedElement(
+  #appendBlockedElement(
       element: Element, nodeId: Protocol.DOM.BackendNodeId|undefined, model: SDK.IssuesModel.IssuesModel): void {
     const elementsPanelLinkComponent = new ElementsComponents.ElementsPanelLink.ElementsPanelLink();
     if (nodeId) {
@@ -126,7 +126,7 @@ export class AffectedDirectivesView extends AffectedResourcesView {
     element.appendChild(violatingNode);
   }
 
-  private appendAffectedContentSecurityPolicyDetails(
+  #appendAffectedContentSecurityPolicyDetails(
       cspIssues: Iterable<IssuesManager.ContentSecurityPolicyIssue.ContentSecurityPolicyIssue>): void {
     const header = document.createElement('tr');
     if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.inlineViolationCode) {
@@ -158,12 +158,12 @@ export class AffectedDirectivesView extends AffectedResourcesView {
     let count = 0;
     for (const cspIssue of cspIssues) {
       count++;
-      this.appendAffectedContentSecurityPolicyDetail(cspIssue);
+      this.#appendAffectedContentSecurityPolicyDetail(cspIssue);
     }
     this.updateAffectedResourceCount(count);
   }
 
-  private appendAffectedContentSecurityPolicyDetail(
+  #appendAffectedContentSecurityPolicyDetail(
       cspIssue: IssuesManager.ContentSecurityPolicyIssue.ContentSecurityPolicyIssue): void {
     const element = document.createElement('tr');
     element.classList.add('affected-resource-directive');
@@ -173,27 +173,27 @@ export class AffectedDirectivesView extends AffectedResourcesView {
     const model = cspIssue.model();
     const maybeTarget = cspIssue.model()?.getTargetIfNotDisposed();
     if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.inlineViolationCode && model) {
-      this.appendViolatedDirective(element, cspIssueDetails.violatedDirective);
-      this.appendBlockedElement(element, cspIssueDetails.violatingNodeId, model);
+      this.#appendViolatedDirective(element, cspIssueDetails.violatedDirective);
+      this.#appendBlockedElement(element, cspIssueDetails.violatingNodeId, model);
       this.appendSourceLocation(element, location, maybeTarget);
-      this.appendStatus(element, cspIssueDetails.isReportOnly);
+      this.#appendStatus(element, cspIssueDetails.isReportOnly);
     } else if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.urlViolationCode) {
       const url = cspIssueDetails.blockedURL ? cspIssueDetails.blockedURL : '';
-      this.appendBlockedURL(element, url);
-      this.appendStatus(element, cspIssueDetails.isReportOnly);
-      this.appendViolatedDirective(element, cspIssueDetails.violatedDirective);
+      this.#appendBlockedURL(element, url);
+      this.#appendStatus(element, cspIssueDetails.isReportOnly);
+      this.#appendViolatedDirective(element, cspIssueDetails.violatedDirective);
       this.appendSourceLocation(element, location, maybeTarget);
     } else if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.evalViolationCode) {
       this.appendSourceLocation(element, location, maybeTarget);
-      this.appendViolatedDirective(element, cspIssueDetails.violatedDirective);
-      this.appendStatus(element, cspIssueDetails.isReportOnly);
+      this.#appendViolatedDirective(element, cspIssueDetails.violatedDirective);
+      this.#appendStatus(element, cspIssueDetails.isReportOnly);
     } else if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.trustedTypesSinkViolationCode) {
       this.appendSourceLocation(element, location, maybeTarget);
-      this.appendStatus(element, cspIssueDetails.isReportOnly);
+      this.#appendStatus(element, cspIssueDetails.isReportOnly);
     } else if (this.issue.code() === IssuesManager.ContentSecurityPolicyIssue.trustedTypesPolicyViolationCode) {
       this.appendSourceLocation(element, location, maybeTarget);
-      this.appendViolatedDirective(element, cspIssueDetails.violatedDirective);
-      this.appendStatus(element, cspIssueDetails.isReportOnly);
+      this.#appendViolatedDirective(element, cspIssueDetails.violatedDirective);
+      this.#appendStatus(element, cspIssueDetails.isReportOnly);
     } else {
       return;
     }
@@ -203,6 +203,6 @@ export class AffectedDirectivesView extends AffectedResourcesView {
 
   update(): void {
     this.clear();
-    this.appendAffectedContentSecurityPolicyDetails(this.issue.getCspIssues());
+    this.#appendAffectedContentSecurityPolicyDetails(this.issue.getCspIssues());
   }
 }

package/front_end/panels/issues/AffectedDocumentsInQuirksModeView.ts

@@ -31,24 +31,24 @@ const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedDocumentsInQuirk
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AffectedDocumentsInQuirksModeView extends AffectedElementsView {
-  private runningUpdatePromise: Promise<void> = Promise.resolve();
+  #runningUpdatePromise: Promise<void> = Promise.resolve();
 
   update(): void {
     // Ensure that doUpdate is invoked atomically by serializing the update calls
     // because it's not re-entrace safe.
-    this.runningUpdatePromise = this.runningUpdatePromise.then(this.doUpdate.bind(this));
+    this.#runningUpdatePromise = this.#runningUpdatePromise.then(this.#doUpdate.bind(this));
   }
 
   protected getResourceName(count: number): Platform.UIString.LocalizedString {
     return i18nString(UIStrings.nDocuments, {n: count});
   }
 
-  private async doUpdate(): Promise<void> {
+  async #doUpdate(): Promise<void> {
     this.clear();
-    await this.appendQuirksModeDocuments(this.issue.getQuirksModeIssues());
+    await this.#appendQuirksModeDocuments(this.issue.getQuirksModeIssues());
   }
 
-  private async appendQuirksModeDocument(issue: IssuesManager.QuirksModeIssue.QuirksModeIssue): Promise<void> {
+  async #appendQuirksModeDocument(issue: IssuesManager.QuirksModeIssue.QuirksModeIssue): Promise<void> {
     const row = document.createElement('tr');
     row.classList.add('affected-resource-quirks-mode');
 
@@ -64,8 +64,7 @@ export class AffectedDocumentsInQuirksModeView extends AffectedElementsView {
     this.affectedResources.appendChild(row);
   }
 
-  private async appendQuirksModeDocuments(issues: Iterable<IssuesManager.QuirksModeIssue.QuirksModeIssue>):
-      Promise<void> {
+  async #appendQuirksModeDocuments(issues: Iterable<IssuesManager.QuirksModeIssue.QuirksModeIssue>): Promise<void> {
     const header = document.createElement('tr');
     this.appendColumnTitle(header, i18nString(UIStrings.documentInTheDOMTree));
     this.appendColumnTitle(header, i18nString(UIStrings.mode));
@@ -75,7 +74,7 @@ export class AffectedDocumentsInQuirksModeView extends AffectedElementsView {
     let count = 0;
     for (const issue of issues) {
       count++;
-      await this.appendQuirksModeDocument(issue);
+      await this.#appendQuirksModeDocument(issue);
     }
     this.updateAffectedResourceCount(count);
   }

package/front_end/panels/issues/AffectedElementsView.ts

@@ -17,10 +17,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedElementsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class AffectedElementsView extends AffectedResourcesView {
-  private async appendAffectedElements(affectedElements: Iterable<IssuesManager.Issue.AffectedElement>): Promise<void> {
+  async #appendAffectedElements(affectedElements: Iterable<IssuesManager.Issue.AffectedElement>): Promise<void> {
     let count = 0;
     for (const element of affectedElements) {
-      await this.appendAffectedElement(element);
+      await this.#appendAffectedElement(element);
       count++;
     }
     this.updateAffectedResourceCount(count);
@@ -30,7 +30,7 @@ export class AffectedElementsView extends AffectedResourcesView {
     return i18nString(UIStrings.nElements, {n: count});
   }
 
-  private async appendAffectedElement(element: IssuesManager.Issue.AffectedElement): Promise<void> {
+  async #appendAffectedElement(element: IssuesManager.Issue.AffectedElement): Promise<void> {
     const cellElement = await this.createElementCell(element, this.issue.getCategory());
     const rowElement = document.createElement('tr');
     rowElement.appendChild(cellElement);
@@ -39,6 +39,6 @@ export class AffectedElementsView extends AffectedResourcesView {
 
   update(): void {
     this.clear();
-    this.appendAffectedElements(this.issue.elements());
+    this.#appendAffectedElements(this.issue.elements());
   }
 }

package/front_end/panels/issues/AffectedElementsWithLowContrastView.ts

@@ -9,21 +9,20 @@ import type * as IssuesManager from '../../models/issues_manager/issues_manager.
 import {AffectedElementsView} from './AffectedElementsView.js';
 
 export class AffectedElementsWithLowContrastView extends AffectedElementsView {
-  private runningUpdatePromise: Promise<void> = Promise.resolve();
+  #runningUpdatePromise: Promise<void> = Promise.resolve();
 
   update(): void {
     // Ensure that doUpdate is invoked atomically by serializing the update calls
     // because it's not re-entrace safe.
-    this.runningUpdatePromise = this.runningUpdatePromise.then(this.doUpdate.bind(this));
+    this.#runningUpdatePromise = this.#runningUpdatePromise.then(this.#doUpdate.bind(this));
   }
 
-  private async doUpdate(): Promise<void> {
+  async #doUpdate(): Promise<void> {
     this.clear();
-    await this.appendLowContrastElements(this.issue.getLowContrastIssues());
+    await this.#appendLowContrastElements(this.issue.getLowContrastIssues());
   }
 
-  private async appendLowContrastElement(issue: IssuesManager.LowTextContrastIssue.LowTextContrastIssue):
-      Promise<void> {
+  async #appendLowContrastElement(issue: IssuesManager.LowTextContrastIssue.LowTextContrastIssue): Promise<void> {
     const row = document.createElement('tr');
     row.classList.add('affected-resource-low-contrast');
 
@@ -41,7 +40,7 @@ export class AffectedElementsWithLowContrastView extends AffectedElementsView {
     this.affectedResources.appendChild(row);
   }
 
-  private async appendLowContrastElements(issues: Iterable<IssuesManager.LowTextContrastIssue.LowTextContrastIssue>):
+  async #appendLowContrastElements(issues: Iterable<IssuesManager.LowTextContrastIssue.LowTextContrastIssue>):
       Promise<void> {
     const header = document.createElement('tr');
     this.appendColumnTitle(header, i18nString(UIStrings.element));
@@ -55,7 +54,7 @@ export class AffectedElementsWithLowContrastView extends AffectedElementsView {
     let count = 0;
     for (const lowContrastIssue of issues) {
       count++;
-      await this.appendLowContrastElement(lowContrastIssue);
+      await this.#appendLowContrastElement(lowContrastIssue);
     }
     this.updateAffectedResourceCount(count);
   }

package/front_end/panels/issues/AffectedHeavyAdView.ts

@@ -55,7 +55,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedHeavyAdView.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class AffectedHeavyAdView extends AffectedResourcesView {
-  private appendAffectedHeavyAds(heavyAds: Iterable<IssuesManager.HeavyAdIssue.HeavyAdIssue>): void {
+  #appendAffectedHeavyAds(heavyAds: Iterable<IssuesManager.HeavyAdIssue.HeavyAdIssue>): void {
     const header = document.createElement('tr');
     this.appendColumnTitle(header, i18nString(UIStrings.limitExceeded));
     this.appendColumnTitle(header, i18nString(UIStrings.resolutionStatus));
@@ -65,7 +65,7 @@ export class AffectedHeavyAdView extends AffectedResourcesView {
 
     let count = 0;
     for (const heavyAd of heavyAds) {
-      this.appendAffectedHeavyAd(heavyAd.details());
+      this.#appendAffectedHeavyAd(heavyAd.details());
       count++;
     }
     this.updateAffectedResourceCount(count);
@@ -75,7 +75,7 @@ export class AffectedHeavyAdView extends AffectedResourcesView {
     return i18nString(UIStrings.nResources, {n: count});
   }
 
-  private statusToString(status: Protocol.Audits.HeavyAdResolutionStatus): string {
+  #statusToString(status: Protocol.Audits.HeavyAdResolutionStatus): string {
     switch (status) {
       case Protocol.Audits.HeavyAdResolutionStatus.HeavyAdBlocked:
         return i18nString(UIStrings.removed);
@@ -85,7 +85,7 @@ export class AffectedHeavyAdView extends AffectedResourcesView {
     return '';
   }
 
-  private limitToString(status: Protocol.Audits.HeavyAdReason): string {
+  #limitToString(status: Protocol.Audits.HeavyAdReason): string {
     switch (status) {
       case Protocol.Audits.HeavyAdReason.CpuPeakLimit:
         return i18nString(UIStrings.cpuPeakLimit);
@@ -97,18 +97,18 @@ export class AffectedHeavyAdView extends AffectedResourcesView {
     return '';
   }
 
-  private appendAffectedHeavyAd(heavyAd: Protocol.Audits.HeavyAdIssueDetails): void {
+  #appendAffectedHeavyAd(heavyAd: Protocol.Audits.HeavyAdIssueDetails): void {
     const element = document.createElement('tr');
     element.classList.add('affected-resource-heavy-ad');
 
     const reason = document.createElement('td');
     reason.classList.add('affected-resource-heavy-ad-info');
-    reason.textContent = this.limitToString(heavyAd.reason);
+    reason.textContent = this.#limitToString(heavyAd.reason);
     element.appendChild(reason);
 
     const status = document.createElement('td');
     status.classList.add('affected-resource-heavy-ad-info');
-    status.textContent = this.statusToString(heavyAd.resolution);
+    status.textContent = this.#statusToString(heavyAd.resolution);
     element.appendChild(status);
 
     const frameId = heavyAd.frame.frameId;
@@ -120,6 +120,6 @@ export class AffectedHeavyAdView extends AffectedResourcesView {
 
   update(): void {
     this.clear();
-    this.appendAffectedHeavyAds(this.issue.getHeavyAdIssues());
+    this.#appendAffectedHeavyAds(this.issue.getHeavyAdIssues());
   }
 }