chrome-devtools-frontend 1.0.951410 → 1.0.952713

package/front_end/panels/css_overview/CSSOverviewSidebarPanel.ts

@@ -33,11 +33,11 @@ export class CSSOverviewSidebarPanel extends Common.ObjectWrapper.eventMixin<Eve
     super(true);
 
     this.contentElement.classList.add('overview-sidebar-panel');
-    this.contentElement.addEventListener('click', this.onItemClick.bind(this));
+    this.contentElement.addEventListener('click', this.#onItemClick.bind(this));
 
     // Clear overview.
     const clearResultsButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.clearOverview), 'largeicon-clear');
-    clearResultsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.reset, this);
+    clearResultsButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, this.#reset, this);
 
     // Toolbar.
     const toolbarElement = this.contentElement.createChild('div', 'overview-toolbar');
@@ -51,18 +51,18 @@ export class CSSOverviewSidebarPanel extends Common.ObjectWrapper.eventMixin<Eve
     item.dataset.id = id;
   }
 
-  private reset(): void {
+  #reset(): void {
     this.dispatchEventToListeners(SidebarEvents.Reset);
   }
 
-  private deselectAllItems(): void {
+  #deselectAllItems(): void {
     const items = this.contentElement.querySelectorAll(`.${CSSOverviewSidebarPanel.ITEM_CLASS_NAME}`);
     items.forEach(item => {
       item.classList.remove(CSSOverviewSidebarPanel.SELECTED);
     });
   }
 
-  private onItemClick(event: Event): void {
+  #onItemClick(event: Event): void {
     const target = (event.composedPath()[0] as HTMLElement);
     if (!target.classList.contains(CSSOverviewSidebarPanel.ITEM_CLASS_NAME)) {
       return;
@@ -86,7 +86,7 @@ export class CSSOverviewSidebarPanel extends Common.ObjectWrapper.eventMixin<Eve
       return;
     }
 
-    this.deselectAllItems();
+    this.#deselectAllItems();
     target.classList.add(CSSOverviewSidebarPanel.SELECTED);
   }
   wasShown(): void {

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -58,7 +58,7 @@ export class CSSOverviewStartView extends HTMLElement {
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [cssOverviewStartViewStyles];
-    this.render();
+    this.#render();
   }
 
   show(): void {
@@ -69,11 +69,11 @@ export class CSSOverviewStartView extends HTMLElement {
     this.classList.add('hidden');
   }
 
-  private onStartCaptureClick(): void {
+  #onStartCaptureClick(): void {
     this.dispatchEvent(new OverviewStartRequestedEvent());
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
@@ -88,7 +88,7 @@ export class CSSOverviewStartView extends HTMLElement {
           <${Buttons.Button.Button.litTagName}
             class="start-capture"
             .variant=${Buttons.Button.Variant.PRIMARY}
-            @click=${this.onStartCaptureClick}>
+            @click=${this.#onStartCaptureClick}>
             ${i18nString(UIStrings.captureOverview)}
           </${Buttons.Button.Button.litTagName}>
         </div>

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1811,9 +1811,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.nodeInternal.removeNode();
   }
 
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  toggleEditAsHTML(callback?: ((arg0: boolean) => any), startEditing?: boolean): void {
+  toggleEditAsHTML(callback?: ((arg0: boolean) => void), startEditing?: boolean): void {
     if (this.editing && this.htmlEditElement) {
       this.editing.commit();
       return;
@@ -2220,7 +2218,5 @@ export interface EditorHandles {
   commit: () => void;
   cancel: () => void;
   editor?: TextEditor.TextEditor.TextEditor;
-  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  resize: () => any;
+  resize: () => void;
 }

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

@@ -53,29 +53,29 @@ export interface AccessibilityTreeNodeData {
 
 export class AccessibilityTreeNode extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-accessibility-tree-node`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private ignored = true;
-  private name = '';
-  private role = '';
-  private properties: Protocol.Accessibility.AXProperty[] = [];
+  #ignored = true;
+  #name = '';
+  #role = '';
+  #properties: Protocol.Accessibility.AXProperty[] = [];
 
   set data(data: AccessibilityTreeNodeData) {
-    this.ignored = data.ignored;
-    this.name = data.name;
-    this.role = data.role;
-    this.properties = data.properties;
-    this.render();
+    this.#ignored = data.ignored;
+    this.#name = data.name;
+    this.#role = data.role;
+    this.#properties = data.properties;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [accessibilityTreeNodeStyles];
+    this.#shadow.adoptedStyleSheets = [accessibilityTreeNodeStyles];
   }
 
-  private async render(): Promise<void> {
-    const role = LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.role)}</span>`;
-    const name = LitHtml.html`"<span class='attribute-value'>${this.name}</span>"`;
-    const properties = this.properties.map(
+  async #render(): Promise<void> {
+    const role = LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
+    const name = LitHtml.html`"<span class='attribute-value'>${this.#name}</span>"`;
+    const properties = this.#properties.map(
         ({name, value}) => isPrintable(value.type) ?
             LitHtml.html`&nbsp<span class='attribute-name'>${name}</span>:&nbsp<span class='attribute-value'>${
                 value.value}</span>` :
@@ -84,10 +84,10 @@ export class AccessibilityTreeNode extends HTMLElement {
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write('Accessibility node render', () => {
       // clang-format off
       LitHtml.render(
-        this.ignored ?
+        this.#ignored ?
           LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
           LitHtml.html`${role}&nbsp${name}${properties}`,
-        this.shadow,
+        this.#shadow,
         {host: this});
       // clang-format on
     });

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

@@ -92,58 +92,58 @@ interface SettingStore<Setting> {
 }
 
 export class AdornerManager {
-  private adornerSettings: AdornerSettingsMap = new Map();
-  private settingStore: SettingStore<AdornerSetting[]>;
+  #adornerSettings: AdornerSettingsMap = new Map();
+  #settingStore: SettingStore<AdornerSetting[]>;
 
   constructor(settingStore: SettingStore<AdornerSetting[]>) {
-    this.settingStore = settingStore;
-    this.syncSettings();
+    this.#settingStore = settingStore;
+    this.#syncSettings();
   }
 
   updateSettings(settings: AdornerSettingsMap): void {
-    this.adornerSettings = settings;
-    this.persistCurrentSettings();
+    this.#adornerSettings = settings;
+    this.#persistCurrentSettings();
   }
 
   getSettings(): Readonly<AdornerSettingsMap> {
-    return this.adornerSettings;
+    return this.#adornerSettings;
   }
 
   isAdornerEnabled(adornerText: string): boolean {
-    return this.adornerSettings.get(adornerText) || false;
+    return this.#adornerSettings.get(adornerText) || false;
   }
 
-  private persistCurrentSettings(): void {
+  #persistCurrentSettings(): void {
     const settingList = [];
-    for (const [adorner, isEnabled] of this.adornerSettings) {
+    for (const [adorner, isEnabled] of this.#adornerSettings) {
       settingList.push({adorner, isEnabled});
     }
-    this.settingStore.set(settingList);
+    this.#settingStore.set(settingList);
   }
 
-  private loadSettings(): void {
-    const settingList = this.settingStore.get();
+  #loadSettings(): void {
+    const settingList = this.#settingStore.get();
     for (const setting of settingList) {
-      this.adornerSettings.set(setting.adorner, setting.isEnabled);
+      this.#adornerSettings.set(setting.adorner, setting.isEnabled);
     }
   }
 
-  private syncSettings(): void {
-    this.loadSettings();
+  #syncSettings(): void {
+    this.#loadSettings();
 
     // Prune outdated adorners and add new ones to the persistence.
-    const outdatedAdorners = new Set(this.adornerSettings.keys());
+    const outdatedAdorners = new Set(this.#adornerSettings.keys());
     for (const {adorner, isEnabled} of DefaultAdornerSettings) {
       outdatedAdorners.delete(adorner);
-      if (!this.adornerSettings.has(adorner)) {
-        this.adornerSettings.set(adorner, isEnabled);
+      if (!this.#adornerSettings.has(adorner)) {
+        this.#adornerSettings.set(adorner, isEnabled);
       }
     }
     for (const outdatedAdorner of outdatedAdorners) {
-      this.adornerSettings.delete(outdatedAdorner);
+      this.#adornerSettings.delete(outdatedAdorner);
     }
 
-    this.persistCurrentSettings();
+    this.#persistCurrentSettings();
   }
 }
 

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

@@ -44,21 +44,21 @@ export interface AdornerSettingsPaneData {
 
 export class AdornerSettingsPane extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-adorner-settings-pane`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private settings: AdornerSettingsMap = new Map();
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #settings: AdornerSettingsMap = new Map();
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [adornerSettingsPaneStyles];
+    this.#shadow.adoptedStyleSheets = [adornerSettingsPaneStyles];
   }
 
   set data(data: AdornerSettingsPaneData) {
-    this.settings = new Map(data.settings.entries());
-    this.render();
+    this.#settings = new Map(data.settings.entries());
+    this.#render();
   }
 
   show(): void {
     this.classList.remove('hidden');
-    const settingsPane = this.shadow.querySelector<HTMLElement>('.adorner-settings-pane');
+    const settingsPane = this.#shadow.querySelector<HTMLElement>('.adorner-settings-pane');
     if (settingsPane) {
       settingsPane.focus();
     }
@@ -68,21 +68,21 @@ export class AdornerSettingsPane extends HTMLElement {
     this.classList.add('hidden');
   }
 
-  private onChange(ev: Event): void {
+  #onChange(ev: Event): void {
     const inputEl = ev.target as HTMLInputElement;
     const adorner = inputEl.dataset.adorner;
     if (adorner === undefined) {
       return;
     }
     const isEnabledNow = inputEl.checked;
-    this.settings.set(adorner, isEnabledNow);
-    this.dispatchEvent(new AdornerSettingUpdatedEvent(adorner, isEnabledNow, this.settings));
-    this.render();
+    this.#settings.set(adorner, isEnabledNow);
+    this.dispatchEvent(new AdornerSettingUpdatedEvent(adorner, isEnabledNow, this.#settings));
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     const settingTemplates = [];
-    for (const [adorner, isEnabled] of this.settings) {
+    for (const [adorner, isEnabled] of this.#settings) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       settingTemplates.push(html`
@@ -103,12 +103,12 @@ export class AdornerSettingsPane extends HTMLElement {
     render(html`
       <div class="adorner-settings-pane" tabindex="-1">
         <div class="settings-title">${i18nString(UIStrings.settingsTitle)}</div>
-        <div class="setting-list" @change=${this.onChange}>
+        <div class="setting-list" @change=${this.#onChange}>
           ${settingTemplates}
         </div>
         <button class="close" @click=${this.hide} aria-label=${i18nString(UIStrings.closeButton)}></button>
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on

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

@@ -21,44 +21,44 @@ export interface CSSQueryData {
 export class CSSQuery extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-css-query`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private queryPrefix: string = '';
-  private queryName?: string;
-  private queryText: string = '';
-  private onQueryTextClick?: (event: Event) => void;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #queryPrefix: string = '';
+  #queryName?: string;
+  #queryText: string = '';
+  #onQueryTextClick?: (event: Event) => void;
 
   set data(data: CSSQueryData) {
-    this.queryPrefix = data.queryPrefix;
-    this.queryName = data.queryName;
-    this.queryText = data.queryText;
-    this.onQueryTextClick = data.onQueryTextClick;
-    this.render();
+    this.#queryPrefix = data.queryPrefix;
+    this.#queryName = data.queryName;
+    this.#queryText = data.queryText;
+    this.#onQueryTextClick = data.onQueryTextClick;
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [
+    this.#shadow.adoptedStyleSheets = [
       cssQueryStyles,
       inspectorCommonStyles,
     ];
   }
 
-  private render(): void {
+  #render(): void {
     const queryClasses = LitHtml.Directives.classMap({
       query: true,
-      editable: Boolean(this.onQueryTextClick),
+      editable: Boolean(this.#onQueryTextClick),
     });
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     const queryText = html`
-      <span class="query-text" @click=${this.onQueryTextClick}>${this.queryText}</span>
+      <span class="query-text" @click=${this.#onQueryTextClick}>${this.#queryText}</span>
     `;
 
     render(html`
       <div class=${queryClasses}>
-        ${this.queryPrefix ? html`<span>${this.queryPrefix + ' '}</span>` : LitHtml.nothing}${this.queryName ? html`<span>${this.queryName + ' '}</span>` : LitHtml.nothing}${queryText}
+        ${this.#queryPrefix ? html`<span>${this.#queryPrefix + ' '}</span>` : LitHtml.nothing}${this.#queryName ? html`<span>${this.#queryName + ' '}</span>` : LitHtml.nothing}${queryText}
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on

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

@@ -16,37 +16,37 @@ export interface ComputedStylePropertyData {
 
 export class ComputedStyleProperty extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-computed-style-property`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private inherited = false;
-  private traceable = false;
-  private onNavigateToSource: ((event?: Event) => void) = () => {};
+  #inherited = false;
+  #traceable = false;
+  #onNavigateToSource: ((event?: Event) => void) = () => {};
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [computedStylePropertyStyles];
+    this.#shadow.adoptedStyleSheets = [computedStylePropertyStyles];
   }
 
   set data(data: ComputedStylePropertyData) {
-    this.inherited = data.inherited;
-    this.traceable = data.traceable;
-    this.onNavigateToSource = data.onNavigateToSource;
-    this.render();
+    this.#inherited = data.inherited;
+    this.#traceable = data.traceable;
+    this.#onNavigateToSource = data.onNavigateToSource;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <div class="computed-style-property ${this.inherited ? 'inherited' : ''}">
+      <div class="computed-style-property ${this.#inherited ? 'inherited' : ''}">
         <slot name="property-name"></slot>
         <span class="hidden" aria-hidden="false">: </span>
-        ${this.traceable ?
-            html`<span class="goto" @click=${this.onNavigateToSource}></span>` :
+        ${this.#traceable ?
+            html`<span class="goto" @click=${this.#onNavigateToSource}></span>` :
             null}
         <slot name="property-value"></slot>
         <span class="hidden" aria-hidden="false">;</span>
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on

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

@@ -16,34 +16,34 @@ export interface ComputedStyleTraceData {
 
 export class ComputedStyleTrace extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-computed-style-trace`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private selector = '';
-  private active = false;
-  private onNavigateToSource: ((event?: Event) => void) = () => {};
+  #selector = '';
+  #active = false;
+  #onNavigateToSource: ((event?: Event) => void) = () => {};
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [computedStyleTraceStyles];
+    this.#shadow.adoptedStyleSheets = [computedStyleTraceStyles];
   }
 
   set data(data: ComputedStyleTraceData) {
-    this.selector = data.selector;
-    this.active = data.active;
-    this.onNavigateToSource = data.onNavigateToSource;
-    this.render();
+    this.#selector = data.selector;
+    this.#active = data.active;
+    this.#onNavigateToSource = data.onNavigateToSource;
+    this.#render();
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <div class="computed-style-trace ${this.active ? 'active' : 'inactive'}">
-        <span class="goto" @click=${this.onNavigateToSource}></span>
-        <slot name="trace-value" @click=${this.onNavigateToSource}></slot>
-        <span class="trace-selector">${this.selector}</span>
+      <div class="computed-style-trace ${this.#active ? 'active' : 'inactive'}">
+        <span class="goto" @click=${this.#onNavigateToSource}></span>
+        <slot name="trace-value" @click=${this.#onNavigateToSource}></slot>
+        <span class="trace-selector">${this.#selector}</span>
         <slot name="trace-link"></slot>
       </div>
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on