chrome-devtools-frontend 1.0.944903 → 1.0.945884

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -90,20 +90,20 @@ export class RenderCoordinator extends EventTarget {
   // This does not affect logging frames or queue empty events.
   observeOnlyNamed = true;
 
-  private readonly logInternal: CoordinatorLogEntry[] = [];
+  readonly #logInternal: CoordinatorLogEntry[] = [];
 
-  private readonly pendingWorkFrames: CoordinatorFrame[] = [];
-  private readonly resolvers = new WeakMap<CoordinatorCallback, RenderCoordinatorResolverCallback>();
-  private readonly rejectors = new WeakMap<CoordinatorCallback, RenderCoordinatorRejectorCallback>();
-  private readonly labels = new WeakMap<CoordinatorCallback, string>();
-  private scheduledWorkId = 0;
+  readonly #pendingWorkFrames: CoordinatorFrame[] = [];
+  readonly #resolvers = new WeakMap<CoordinatorCallback, RenderCoordinatorResolverCallback>();
+  readonly #rejectors = new WeakMap<CoordinatorCallback, RenderCoordinatorRejectorCallback>();
+  readonly #labels = new WeakMap<CoordinatorCallback, string>();
+  #scheduledWorkId = 0;
 
   pendingFramesCount(): number {
-    return this.pendingWorkFrames.length;
+    return this.#pendingWorkFrames.length;
   }
 
   done(): Promise<void> {
-    if (this.pendingWorkFrames.length === 0) {
+    if (this.#pendingWorkFrames.length === 0) {
       this.logIfEnabled('[Queue empty]');
       return Promise.resolve();
     }
@@ -139,8 +139,8 @@ export class RenderCoordinator extends EventTarget {
   }
 
   takeRecords(): CoordinatorLogEntry[] {
-    const logs = [...this.logInternal];
-    this.logInternal.length = 0;
+    const logs = [...this.#logInternal];
+    this.#logInternal.length = 0;
     return logs;
   }
 
@@ -165,16 +165,16 @@ export class RenderCoordinator extends EventTarget {
   }
 
   private enqueueHandler<T = unknown>(callback: CoordinatorCallback, action: ACTION, label = ''): Promise<T> {
-    this.labels.set(callback, `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`);
+    this.#labels.set(callback, `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`);
 
-    if (this.pendingWorkFrames.length === 0) {
-      this.pendingWorkFrames.push({
+    if (this.#pendingWorkFrames.length === 0) {
+      this.#pendingWorkFrames.push({
         readers: [],
         writers: [],
       });
     }
 
-    const frame = this.pendingWorkFrames[0];
+    const frame = this.#pendingWorkFrames[0];
     if (!frame) {
       throw new Error('No frame available');
     }
@@ -193,8 +193,8 @@ export class RenderCoordinator extends EventTarget {
     }
 
     const resolverPromise = new Promise((resolve, reject) => {
-      this.resolvers.set(callback, resolve);
-      this.rejectors.set(callback, reject);
+      this.#resolvers.set(callback, resolve);
+      this.#rejectors.set(callback, reject);
     });
 
     this.scheduleWork();
@@ -203,24 +203,24 @@ export class RenderCoordinator extends EventTarget {
 
   private async handleWork(handler: CoordinatorCallback): Promise<void> {
     const data = await handler.call(undefined);
-    const resolver = this.resolvers.get(handler);
+    const resolver = this.#resolvers.get(handler);
     if (!resolver) {
       throw new Error('Unable to locate resolver');
     }
 
     resolver.call(undefined, data);
-    this.resolvers.delete(handler);
-    this.rejectors.delete(handler);
+    this.#resolvers.delete(handler);
+    this.#rejectors.delete(handler);
   }
 
   private scheduleWork(): void {
-    const hasScheduledWork = this.scheduledWorkId !== 0;
+    const hasScheduledWork = this.#scheduledWorkId !== 0;
     if (hasScheduledWork) {
       return;
     }
 
-    this.scheduledWorkId = requestAnimationFrame(async () => {
-      const hasPendingFrames = this.pendingWorkFrames.length > 0;
+    this.#scheduledWorkId = requestAnimationFrame(async () => {
+      const hasPendingFrames = this.#pendingWorkFrames.length > 0;
       if (!hasPendingFrames) {
         // No pending frames means all pending work has completed.
         // The events dispatched below are mostly for testing contexts.
@@ -231,14 +231,14 @@ export class RenderCoordinator extends EventTarget {
         window.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
 
         this.logIfEnabled('[Queue empty]');
-        this.scheduledWorkId = 0;
+        this.#scheduledWorkId = 0;
         return;
       }
 
       this.dispatchEvent(new RenderCoordinatorNewFrameEvent());
       this.logIfEnabled('[New frame]');
 
-      const frame = this.pendingWorkFrames.shift();
+      const frame = this.#pendingWorkFrames.shift();
       if (!frame) {
         return;
       }
@@ -247,7 +247,7 @@ export class RenderCoordinator extends EventTarget {
       // to proceed together.
       const readers: Promise<unknown>[] = [];
       for (const reader of frame.readers) {
-        this.logIfEnabled(this.labels.get(reader));
+        this.logIfEnabled(this.#labels.get(reader));
         readers.push(this.handleWork(reader));
       }
 
@@ -268,7 +268,7 @@ export class RenderCoordinator extends EventTarget {
       // Next do all the writers as a block.
       const writers: Promise<unknown>[] = [];
       for (const writer of frame.writers) {
-        this.logIfEnabled(this.labels.get(writer));
+        this.logIfEnabled(this.#labels.get(writer));
         writers.push(this.handleWork(writer));
       }
 
@@ -289,22 +289,22 @@ export class RenderCoordinator extends EventTarget {
       // Since there may have been more work requested in
       // the callback of a reader / writer, we attempt to schedule
       // it at this point.
-      this.scheduledWorkId = 0;
+      this.#scheduledWorkId = 0;
       this.scheduleWork();
     });
   }
 
   private rejectAll(handlers: CoordinatorCallback[], error: Error): void {
     for (const handler of handlers) {
-      const rejector = this.rejectors.get(handler);
+      const rejector = this.#rejectors.get(handler);
       if (!rejector) {
         console.warn('Unable to locate rejector');
         continue;
       }
 
       rejector.call(undefined, error);
-      this.resolvers.delete(handler);
-      this.rejectors.delete(handler);
+      this.#resolvers.delete(handler);
+      this.#rejectors.delete(handler);
     }
   }
 
@@ -317,11 +317,11 @@ export class RenderCoordinator extends EventTarget {
       return;
     }
 
-    this.logInternal.push({time: performance.now(), value});
+    this.#logInternal.push({time: performance.now(), value});
 
     // Keep the log at the log size.
-    while (this.logInternal.length > this.recordStorageLimit) {
-      this.logInternal.shift();
+    while (this.#logInternal.length > this.recordStorageLimit) {
+      this.#logInternal.shift();
     }
   }
 }

package/front_end/ui/components/report_view/ReportView.ts

@@ -36,16 +36,16 @@ export interface ReportData {
 export class Report extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private reportTitle: string = '';
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #reportTitle: string = '';
 
   set data({reportTitle}: ReportData) {
-    this.reportTitle = reportTitle;
+    this.#reportTitle = reportTitle;
     this.render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportStyles];
+    this.#shadow.adoptedStyleSheets = [reportStyles];
     this.render();
   }
 
@@ -54,10 +54,10 @@ export class Report extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="content">
-        ${this.reportTitle ? LitHtml.html`<div class="report-title">${this.reportTitle}</div>` : LitHtml.nothing}
+        ${this.#reportTitle ? LitHtml.html`<div class="report-title">${this.#reportTitle}</div>` : LitHtml.nothing}
         <slot></slot>
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -69,9 +69,9 @@ export interface ReportSectionData {
 export class ReportSectionHeader extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-section-header`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportSectionHeaderStyles];
+    this.#shadow.adoptedStyleSheets = [reportSectionHeaderStyles];
     this.render();
   }
 
@@ -82,7 +82,7 @@ export class ReportSectionHeader extends HTMLElement {
       <div class="section-header">
         <slot></slot>
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -90,9 +90,9 @@ export class ReportSectionHeader extends HTMLElement {
 export class ReportSectionDivider extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-divider`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportSectionDividerStyles];
+    this.#shadow.adoptedStyleSheets = [reportSectionDividerStyles];
     this.render();
   }
 
@@ -102,7 +102,7 @@ export class ReportSectionDivider extends HTMLElement {
     LitHtml.render(LitHtml.html`
       <div class="section-divider">
       </div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -110,9 +110,9 @@ export class ReportSectionDivider extends HTMLElement {
 export class ReportKey extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-key`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportKeyStyles];
+    this.#shadow.adoptedStyleSheets = [reportKeyStyles];
     this.render();
   }
 
@@ -121,7 +121,7 @@ export class ReportKey extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="key"><slot></slot></div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }
@@ -129,9 +129,9 @@ export class ReportKey extends HTMLElement {
 export class ReportValue extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-report-value`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [reportValueStyles];
+    this.#shadow.adoptedStyleSheets = [reportValueStyles];
     this.render();
   }
 
@@ -140,7 +140,7 @@ export class ReportValue extends HTMLElement {
     // clang-format off
     LitHtml.render(LitHtml.html`
       <div class="value"><slot></slot></div>
-    `, this.shadow, {host: this});
+    `, this.#shadow, {host: this});
     // clang-format on
   }
 }

package/front_end/ui/components/request_link_icon/RequestLinkIcon.ts

@@ -55,73 +55,73 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class RequestLinkIcon extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-request-link-icon`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private linkToPreflight?: boolean;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #linkToPreflight?: boolean;
   // The value `null` indicates that the request is not available,
   // `undefined` that it is still being resolved.
-  private request?: SDK.NetworkRequest.NetworkRequest|null;
-  private highlightHeader?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, name: string};
-  private requestResolver?: Logs.RequestResolver.RequestResolver;
-  private displayURL: boolean = false;
-  private networkTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
-  private affectedRequest?: {requestId: Protocol.Network.RequestId, url?: string};
-  private additionalOnClickAction?: () => void;
-  private reveal = Common.Revealer.reveal;
-  private requestResolvedPromise = Promise.resolve<void>(undefined);
+  #request?: SDK.NetworkRequest.NetworkRequest|null;
+  #highlightHeader?: {section: NetworkForward.UIRequestLocation.UIHeaderSection, name: string};
+  #requestResolver?: Logs.RequestResolver.RequestResolver;
+  #displayURL: boolean = false;
+  #networkTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
+  #affectedRequest?: {requestId: Protocol.Network.RequestId, url?: string};
+  #additionalOnClickAction?: () => void;
+  #reveal = Common.Revealer.reveal;
+  #requestResolvedPromise = Promise.resolve<void>(undefined);
 
   set data(data: RequestLinkIconData) {
-    this.linkToPreflight = data.linkToPreflight;
-    this.request = data.request;
+    this.#linkToPreflight = data.linkToPreflight;
+    this.#request = data.request;
     if (data.affectedRequest) {
-      this.affectedRequest = {...data.affectedRequest};
+      this.#affectedRequest = {...data.affectedRequest};
     }
-    this.highlightHeader = data.highlightHeader;
-    this.networkTab = data.networkTab;
-    this.requestResolver = data.requestResolver;
-    this.displayURL = data.displayURL ?? false;
-    this.additionalOnClickAction = data.additionalOnClickAction;
+    this.#highlightHeader = data.highlightHeader;
+    this.#networkTab = data.networkTab;
+    this.#requestResolver = data.requestResolver;
+    this.#displayURL = data.displayURL ?? false;
+    this.#additionalOnClickAction = data.additionalOnClickAction;
     if (data.revealOverride) {
-      this.reveal = data.revealOverride;
+      this.#reveal = data.revealOverride;
     }
-    if (!this.request && data.affectedRequest) {
-      this.requestResolvedPromise = this.resolveRequest(data.affectedRequest.requestId);
+    if (!this.#request && data.affectedRequest) {
+      this.#requestResolvedPromise = this.resolveRequest(data.affectedRequest.requestId);
     }
     this.render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [requestLinkIconStyles];
+    this.#shadow.adoptedStyleSheets = [requestLinkIconStyles];
   }
 
   private resolveRequest(requestId: Protocol.Network.RequestId): Promise<void> {
-    if (!this.requestResolver) {
+    if (!this.#requestResolver) {
       throw new Error('A `RequestResolver` must be provided if an `affectedRequest` is provided.');
     }
-    return this.requestResolver.waitFor(requestId)
+    return this.#requestResolver.waitFor(requestId)
         .then(request => {
-          this.request = request;
+          this.#request = request;
         })
         .catch(() => {
-          this.request = null;
+          this.#request = null;
         });
   }
 
   get data(): RequestLinkIconData {
     return {
-      linkToPreflight: this.linkToPreflight,
-      request: this.request,
-      affectedRequest: this.affectedRequest,
-      highlightHeader: this.highlightHeader,
-      networkTab: this.networkTab,
-      requestResolver: this.requestResolver,
-      displayURL: this.displayURL,
-      additionalOnClickAction: this.additionalOnClickAction,
-      revealOverride: this.reveal !== Common.Revealer.reveal ? this.reveal : undefined,
+      linkToPreflight: this.#linkToPreflight,
+      request: this.#request,
+      affectedRequest: this.#affectedRequest,
+      highlightHeader: this.#highlightHeader,
+      networkTab: this.#networkTab,
+      requestResolver: this.#requestResolver,
+      displayURL: this.#displayURL,
+      additionalOnClickAction: this.#additionalOnClickAction,
+      revealOverride: this.#reveal !== Common.Revealer.reveal ? this.#reveal : undefined,
     };
   }
 
   private iconColor(): string {
-    if (!this.request) {
+    if (!this.#request) {
       return '--issue-color-yellow';
     }
     return '--color-link';
@@ -140,38 +140,38 @@ export class RequestLinkIcon extends HTMLElement {
     if (event.button !== 0) {
       return;  // Only handle left-click for now.
     }
-    const linkedRequest = this.linkToPreflight ? this.request?.preflightRequest() : this.request;
+    const linkedRequest = this.#linkToPreflight ? this.#request?.preflightRequest() : this.#request;
     if (!linkedRequest) {
       return;
     }
-    if (this.highlightHeader) {
+    if (this.#highlightHeader) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.header(
-          linkedRequest, this.highlightHeader.section, this.highlightHeader.name);
-      this.reveal(requestLocation);
+          linkedRequest, this.#highlightHeader.section, this.#highlightHeader.name);
+      this.#reveal(requestLocation);
     } else {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-          linkedRequest, this.networkTab ?? NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
-      this.reveal(requestLocation);
+          linkedRequest, this.#networkTab ?? NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
+      this.#reveal(requestLocation);
     }
-    this.additionalOnClickAction?.();
+    this.#additionalOnClickAction?.();
   }
 
   private getTooltip(): Platform.UIString.LocalizedString {
-    if (this.request) {
-      return i18nString(UIStrings.clickToShowRequestInTheNetwork, {url: this.request.url()});
+    if (this.#request) {
+      return i18nString(UIStrings.clickToShowRequestInTheNetwork, {url: this.#request.url()});
     }
     return i18nString(UIStrings.requestUnavailableInTheNetwork);
   }
 
   private getUrlForDisplaying(): string|undefined {
-    if (!this.request) {
-      return this.affectedRequest?.url;
+    if (!this.#request) {
+      return this.#affectedRequest?.url;
     }
-    return this.request.url();
+    return this.#request.url();
   }
 
   private maybeRenderURL(): LitHtml.TemplateResult|{} {
-    if (!this.displayURL) {
+    if (!this.#displayURL) {
       return LitHtml.nothing;
     }
     const url = this.getUrlForDisplaying();
@@ -186,9 +186,9 @@ export class RequestLinkIcon extends HTMLElement {
     return coordinator.write(() => {
       // clang-format off
       LitHtml.render(LitHtml.html`
-        ${LitHtml.Directives.until(this.requestResolvedPromise.then(() => this.renderComponent()), this.renderComponent())}
+        ${LitHtml.Directives.until(this.#requestResolvedPromise.then(() => this.renderComponent()), this.renderComponent())}
       `,
-      this.shadow, {host: this});
+      this.#shadow, {host: this});
       // clang-format on
     });
   }
@@ -196,7 +196,7 @@ export class RequestLinkIcon extends HTMLElement {
   private renderComponent(): LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
-      <span class=${LitHtml.Directives.classMap({'link': Boolean(this.request)})}
+      <span class=${LitHtml.Directives.classMap({'link': Boolean(this.#request)})}
             tabindex="0"
             @click=${this.handleClick}>
         <${IconButton.Icon.Icon.litTagName} .data=${this.iconData() as IconButton.Icon.IconData}

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -22,32 +22,32 @@ export interface SettingCheckboxData {
  */
 export class SettingCheckbox extends HTMLElement {
   static readonly litTagName = LitHtml.literal`setting-checkbox`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private setting?: Common.Settings.Setting<boolean>;
-  private disabled: boolean = false;
-  private changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
+  #setting?: Common.Settings.Setting<boolean>;
+  #disabled: boolean = false;
+  #changeListenerDescriptor?: Common.EventTarget.EventDescriptor;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [settingCheckboxStyles];
+    this.#shadow.adoptedStyleSheets = [settingCheckboxStyles];
   }
 
   set data(data: SettingCheckboxData) {
-    if (this.changeListenerDescriptor && this.setting) {
-      this.setting.removeChangeListener(this.changeListenerDescriptor.listener);
+    if (this.#changeListenerDescriptor && this.#setting) {
+      this.#setting.removeChangeListener(this.#changeListenerDescriptor.listener);
     }
 
-    this.setting = data.setting;
-    this.disabled = Boolean(data.disabled);
+    this.#setting = data.setting;
+    this.#disabled = Boolean(data.disabled);
 
-    this.changeListenerDescriptor = this.setting.addChangeListener(() => {
+    this.#changeListenerDescriptor = this.#setting.addChangeListener(() => {
       this.render();
     });
     this.render();
   }
 
   private render(): void {
-    if (!this.setting) {
+    if (!this.#setting) {
       throw new Error('No "Setting" object provided for rendering');
     }
 
@@ -55,15 +55,15 @@ export class SettingCheckbox extends HTMLElement {
         LitHtml.html`
       <p>
         <label>
-          <input type="checkbox" ?checked=${this.setting.get()} ?disabled=${this.disabled} @change="${
-            this.checkboxChanged}" aria-label="${this.setting.title()}" /> ${this.setting.title()}
+          <input type="checkbox" ?checked=${this.#setting.get()} ?disabled=${this.#disabled} @change="${
+            this.checkboxChanged}" aria-label="${this.#setting.title()}" /> ${this.#setting.title()}
         </label>
       </p>`,
-        this.shadow, {host: this});
+        this.#shadow, {host: this});
   }
 
   private checkboxChanged(e: Event): void {
-    this.setting?.set((e.target as HTMLInputElement).checked);
+    this.#setting?.set((e.target as HTMLInputElement).checked);
   }
 }
 

package/front_end/ui/components/survey_link/SurveyLink.ts

@@ -51,74 +51,74 @@ const enum State {
 export class SurveyLink extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-survey-link`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private trigger = '';
-  private promptText = Common.UIString.LocalizedEmptyString;
-  private canShowSurvey: (trigger: string, callback: CanShowSurveyCallback) => void = () => {};
-  private showSurvey: (trigger: string, callback: ShowSurveyCallback) => void = () => {};
-  private state: State = State.Checking;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #trigger = '';
+  #promptText = Common.UIString.LocalizedEmptyString;
+  #canShowSurvey: (trigger: string, callback: CanShowSurveyCallback) => void = () => {};
+  #showSurvey: (trigger: string, callback: ShowSurveyCallback) => void = () => {};
+  #state: State = State.Checking;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [surveyLinkStyles];
+    this.#shadow.adoptedStyleSheets = [surveyLinkStyles];
   }
 
   // Re-setting data will cause the state to go back to 'Checking' which hides the link.
   set data(data: SurveyLinkData) {
-    this.trigger = data.trigger;
-    this.promptText = data.promptText;
-    this.canShowSurvey = data.canShowSurvey;
-    this.showSurvey = data.showSurvey;
+    this.#trigger = data.trigger;
+    this.#promptText = data.promptText;
+    this.#canShowSurvey = data.canShowSurvey;
+    this.#showSurvey = data.showSurvey;
 
     this.checkSurvey();
   }
 
   private checkSurvey(): void {
-    this.state = State.Checking;
-    this.canShowSurvey(this.trigger, ({canShowSurvey}) => {
+    this.#state = State.Checking;
+    this.#canShowSurvey(this.#trigger, ({canShowSurvey}) => {
       if (!canShowSurvey) {
-        this.state = State.DontShowLink;
+        this.#state = State.DontShowLink;
       } else {
-        this.state = State.ShowLink;
+        this.#state = State.ShowLink;
       }
       this.render();
     });
   }
 
   private sendSurvey(): void {
-    this.state = State.Sending;
+    this.#state = State.Sending;
     this.render();
-    this.showSurvey(this.trigger, ({surveyShown}) => {
+    this.#showSurvey(this.#trigger, ({surveyShown}) => {
       if (!surveyShown) {
-        this.state = State.Failed;
+        this.#state = State.Failed;
       } else {
-        this.state = State.SurveyShown;
+        this.#state = State.SurveyShown;
       }
       this.render();
     });
   }
 
   private render(): void {
-    if (this.state === State.Checking || this.state === State.DontShowLink) {
+    if (this.#state === State.Checking || this.#state === State.DontShowLink) {
       return;
     }
 
-    let linkText = this.promptText;
-    if (this.state === State.Sending) {
+    let linkText = this.#promptText;
+    if (this.#state === State.Sending) {
       linkText = i18nString(UIStrings.openingSurvey);
-    } else if (this.state === State.SurveyShown) {
+    } else if (this.#state === State.SurveyShown) {
       linkText = i18nString(UIStrings.thankYouForYourFeedback);
-    } else if (this.state === State.Failed) {
+    } else if (this.#state === State.Failed) {
       linkText = i18nString(UIStrings.anErrorOccurredWithTheSurvey);
     }
 
     let linkState = '';
-    if (this.state === State.Sending) {
+    if (this.#state === State.Sending) {
       linkState = 'pending-link';
-    } else if (this.state === State.Failed || this.state === State.SurveyShown) {
+    } else if (this.#state === State.Failed || this.#state === State.SurveyShown) {
       linkState = 'disabled-link';
     }
 
-    const ariaDisabled = this.state !== State.ShowLink;
+    const ariaDisabled = this.#state !== State.ShowLink;
 
     // clang-format off
     // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
@@ -129,7 +129,7 @@ export class SurveyLink extends HTMLElement {
       </button>
     `;
     // clang-format on
-    LitHtml.render(output, this.shadow, {host: this});
+    LitHtml.render(output, this.#shadow, {host: this});
   }
 }