chrome-devtools-frontend 1.0.945329 → 1.0.945579

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});
   }
 }
 

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -21,19 +21,19 @@ declare global {
 export class TextEditor extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private activeEditor: CodeMirror.EditorView|undefined = undefined;
-  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
-  private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
-  private pendingState: CodeMirror.EditorState|undefined;
-  private lastScrollPos = {left: 0, top: 0};
-  private resizeTimeout = -1;
-  private devtoolsResizeObserver = new ResizeObserver(() => {
-    if (this.resizeTimeout < 0) {
-      this.resizeTimeout = window.setTimeout(() => {
-        this.resizeTimeout = -1;
-        if (this.activeEditor) {
-          CodeMirror.repositionTooltips(this.activeEditor);
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #activeEditor: CodeMirror.EditorView|undefined = undefined;
+  #dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
+  #activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
+  #pendingState: CodeMirror.EditorState|undefined;
+  #lastScrollPos = {left: 0, top: 0};
+  #resizeTimeout = -1;
+  #devtoolsResizeObserver = new ResizeObserver(() => {
+    if (this.#resizeTimeout < 0) {
+      this.#resizeTimeout = window.setTimeout(() => {
+        this.#resizeTimeout = -1;
+        if (this.#activeEditor) {
+          CodeMirror.repositionTooltips(this.#activeEditor);
         }
       }, 50);
     }
@@ -41,15 +41,15 @@ export class TextEditor extends HTMLElement {
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
-    this.pendingState = pendingState;
-    this.shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
+    this.#pendingState = pendingState;
+    this.#shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
   }
 
   private createEditor(): CodeMirror.EditorView {
-    this.activeEditor = new CodeMirror.EditorView({
+    this.#activeEditor = new CodeMirror.EditorView({
       state: this.state,
-      parent: this.shadow,
-      root: this.shadow,
+      parent: this.#shadow,
+      root: this.#shadow,
       dispatch: (tr: CodeMirror.Transaction): void => {
         this.editor.update([tr]);
         if (tr.reconfigured) {
@@ -57,19 +57,19 @@ export class TextEditor extends HTMLElement {
         }
       },
     });
-    this.activeEditor.scrollDOM.scrollTop = this.lastScrollPos.top;
-    this.activeEditor.scrollDOM.scrollLeft = this.lastScrollPos.left;
-    this.activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
-      this.lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
-      this.lastScrollPos.top = (event.target as HTMLElement).scrollTop;
+    this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
+    this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
+    this.#activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
+      this.#lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
+      this.#lastScrollPos.top = (event.target as HTMLElement).scrollTop;
     });
     this.ensureSettingListeners();
     this.startObservingResize();
-    return this.activeEditor;
+    return this.#activeEditor;
   }
 
   get editor(): CodeMirror.EditorView {
-    return this.activeEditor || this.createEditor();
+    return this.#activeEditor || this.createEditor();
   }
 
   dispatch(spec: CodeMirror.TransactionSpec): void {
@@ -77,68 +77,68 @@ export class TextEditor extends HTMLElement {
   }
 
   get state(): CodeMirror.EditorState {
-    if (this.activeEditor) {
-      return this.activeEditor.state;
+    if (this.#activeEditor) {
+      return this.#activeEditor.state;
     }
-    if (!this.pendingState) {
-      this.pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
+    if (!this.#pendingState) {
+      this.#pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
     }
-    return this.pendingState;
+    return this.#pendingState;
   }
 
   set state(state: CodeMirror.EditorState) {
-    if (this.activeEditor) {
-      this.activeEditor.setState(state);
+    if (this.#activeEditor) {
+      this.#activeEditor.setState(state);
     } else {
-      this.pendingState = state;
+      this.#pendingState = state;
     }
   }
 
   connectedCallback(): void {
-    if (!this.activeEditor) {
+    if (!this.#activeEditor) {
       this.createEditor();
     }
   }
 
   disconnectedCallback(): void {
-    if (this.activeEditor) {
-      this.pendingState = this.activeEditor.state;
-      this.devtoolsResizeObserver.disconnect();
-      this.activeEditor.destroy();
-      this.activeEditor = undefined;
+    if (this.#activeEditor) {
+      this.#pendingState = this.#activeEditor.state;
+      this.#devtoolsResizeObserver.disconnect();
+      this.#activeEditor.destroy();
+      this.#activeEditor = undefined;
       this.ensureSettingListeners();
     }
   }
 
   focus(): void {
-    if (this.activeEditor) {
-      this.activeEditor.focus();
+    if (this.#activeEditor) {
+      this.#activeEditor.focus();
     }
   }
 
   private ensureSettingListeners(): void {
-    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
-    if (dynamicSettings === this.dynamicSettings) {
+    const dynamicSettings = this.#activeEditor ? this.#activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.#dynamicSettings) {
       return;
     }
-    this.dynamicSettings = dynamicSettings;
+    this.#dynamicSettings = dynamicSettings;
 
-    for (const [setting, listener] of this.activeSettingListeners) {
+    for (const [setting, listener] of this.#activeSettingListeners) {
       setting.removeChangeListener(listener);
     }
-    this.activeSettingListeners = [];
+    this.#activeSettingListeners = [];
 
     const settings = Common.Settings.Settings.instance();
     for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
         const change = dynamicSetting.sync(this.state, data);
-        if (change && this.activeEditor) {
-          this.activeEditor.dispatch({effects: change});
+        if (change && this.#activeEditor) {
+          this.#activeEditor.dispatch({effects: change});
         }
       };
       const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
-      this.activeSettingListeners.push([setting, handler]);
+      this.#activeSettingListeners.push([setting, handler]);
     }
   }
 
@@ -146,12 +146,12 @@ export class TextEditor extends HTMLElement {
     const devtoolsElement =
         WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
     if (devtoolsElement) {
-      this.devtoolsResizeObserver.observe(devtoolsElement);
+      this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
-    const view = this.activeEditor;
+    const view = this.#activeEditor;
     if (!view) {
       return;
     }

package/front_end/ui/components/text_editor/javascript.ts

@@ -217,10 +217,10 @@ let cacheInstance: PropertyCache|null = null;
 // Store recent collections of property completions. The empty string
 // is used to store the set of global bindings.
 class PropertyCache {
-  private readonly cache: Map<string, Promise<CompletionSet>> = new Map();
+  readonly #cache: Map<string, Promise<CompletionSet>> = new Map();
 
   constructor() {
-    const clear = (): void => this.cache.clear();
+    const clear = (): void => this.#cache.clear();
     SDK.ConsoleModel.ConsoleModel.instance().addEventListener(SDK.ConsoleModel.Events.CommandEvaluated, clear);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, clear);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -230,14 +230,14 @@ class PropertyCache {
   }
 
   get(expression: string): Promise<CompletionSet>|undefined {
-    return this.cache.get(expression);
+    return this.#cache.get(expression);
   }
 
   set(expression: string, value: Promise<CompletionSet>): void {
-    this.cache.set(expression, value);
+    this.#cache.set(expression, value);
     setTimeout(() => {
-      if (this.cache.get(expression) === value) {
-        this.cache.delete(expression);
+      if (this.#cache.get(expression) === value) {
+        this.#cache.delete(expression);
       }
     }, maxCacheAge);
   }