chrome-devtools-frontend 1.0.950971 → 1.0.952403

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

@@ -45,33 +45,33 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class ElementsBreadcrumbs extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private readonly resizeObserver = new ResizeObserver(() => this.checkForOverflowOnResize());
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
 
-  private crumbsData: readonly DOMNode[] = [];
-  private selectedDOMNode: Readonly<DOMNode>|null = null;
-  private overflowing = false;
-  private userScrollPosition: UserScrollPosition = 'start';
-  private isObservingResize = false;
-  private userHasManuallyScrolled = false;
+  #crumbsData: readonly DOMNode[] = [];
+  #selectedDOMNode: Readonly<DOMNode>|null = null;
+  #overflowing = false;
+  #userScrollPosition: UserScrollPosition = 'start';
+  #isObservingResize = false;
+  #userHasManuallyScrolled = false;
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [elementsBreadcrumbsStyles];
+    this.#shadow.adoptedStyleSheets = [elementsBreadcrumbsStyles];
   }
 
   set data(data: ElementsBreadcrumbsData) {
-    this.selectedDOMNode = data.selectedNode;
-    this.crumbsData = data.crumbs;
-    this.userHasManuallyScrolled = false;
-    this.update();
+    this.#selectedDOMNode = data.selectedNode;
+    this.#crumbsData = data.crumbs;
+    this.#userHasManuallyScrolled = false;
+    this.#update();
   }
 
   disconnectedCallback(): void {
-    this.isObservingResize = false;
-    this.resizeObserver.disconnect();
+    this.#isObservingResize = false;
+    this.#resizeObserver.disconnect();
   }
 
-  private onCrumbClick(node: DOMNode): (event: Event) => void {
+  #onCrumbClick(node: DOMNode): (event: Event) => void {
     return (event: Event): void => {
       event.preventDefault();
       this.dispatchEvent(new NodeSelectedEvent(node));
@@ -85,9 +85,9 @@ export class ElementsBreadcrumbs extends HTMLElement {
    *
    * If either of these are true, we toggle the overflowing state accordingly and trigger a re-render.
    */
-  private async checkForOverflowOnResize(): Promise<void> {
-    const wrappingElement = this.shadow.querySelector('.crumbs');
-    const crumbs = this.shadow.querySelector('.crumbs-scroll-container');
+  async #checkForOverflowOnResize(): Promise<void> {
+    const wrappingElement = this.#shadow.querySelector('.crumbs');
+    const crumbs = this.#shadow.querySelector('.crumbs-scroll-container');
     if (!wrappingElement || !crumbs) {
       return;
     }
@@ -95,52 +95,52 @@ export class ElementsBreadcrumbs extends HTMLElement {
     const totalContainingWidth = await coordinator.read<number>(() => wrappingElement.clientWidth);
     const totalCrumbsWidth = await coordinator.read<number>(() => crumbs.clientWidth);
 
-    if (totalCrumbsWidth >= totalContainingWidth && this.overflowing === false) {
-      this.overflowing = true;
-      this.userScrollPosition = 'start';
-      this.render();
-    } else if (totalCrumbsWidth < totalContainingWidth && this.overflowing === true) {
-      this.overflowing = false;
-      this.userScrollPosition = 'start';
-      this.render();
+    if (totalCrumbsWidth >= totalContainingWidth && this.#overflowing === false) {
+      this.#overflowing = true;
+      this.#userScrollPosition = 'start';
+      this.#render();
+    } else if (totalCrumbsWidth < totalContainingWidth && this.#overflowing === true) {
+      this.#overflowing = false;
+      this.#userScrollPosition = 'start';
+      this.#render();
     }
   }
 
-  private async update(): Promise<void> {
-    await this.render();
-    this.engageResizeObserver();
-    this.ensureSelectedNodeIsVisible();
+  async #update(): Promise<void> {
+    await this.#render();
+    this.#engageResizeObserver();
+    this.#ensureSelectedNodeIsVisible();
   }
 
-  private onCrumbMouseMove(node: DOMNode): () => void {
+  #onCrumbMouseMove(node: DOMNode): () => void {
     return (): void => node.highlightNode();
   }
 
-  private onCrumbMouseLeave(node: DOMNode): () => void {
+  #onCrumbMouseLeave(node: DOMNode): () => void {
     return (): void => node.clearHighlight();
   }
 
-  private onCrumbFocus(node: DOMNode): () => void {
+  #onCrumbFocus(node: DOMNode): () => void {
     return (): void => node.highlightNode();
   }
 
-  private onCrumbBlur(node: DOMNode): () => void {
+  #onCrumbBlur(node: DOMNode): () => void {
     return (): void => node.clearHighlight();
   }
 
-  private engageResizeObserver(): void {
-    if (!this.resizeObserver || this.isObservingResize === true) {
+  #engageResizeObserver(): void {
+    if (!this.#resizeObserver || this.#isObservingResize === true) {
       return;
     }
 
-    const crumbs = this.shadow.querySelector('.crumbs');
+    const crumbs = this.#shadow.querySelector('.crumbs');
 
     if (!crumbs) {
       return;
     }
 
-    this.resizeObserver.observe(crumbs);
-    this.isObservingResize = true;
+    this.#resizeObserver.observe(crumbs);
+    this.#isObservingResize = true;
   }
 
   /**
@@ -151,9 +151,9 @@ export class ElementsBreadcrumbs extends HTMLElement {
    * triggers a re-render. If we are not overflowing, this method returns and
    * does nothing.
    */
-  private async checkForOverflow(): Promise<void> {
-    const crumbScrollContainer = this.shadow.querySelector('.crumbs-scroll-container');
-    const crumbWindow = this.shadow.querySelector('.crumbs-window');
+  async #checkForOverflow(): Promise<void> {
+    const crumbScrollContainer = this.#shadow.querySelector('.crumbs-scroll-container');
+    const crumbWindow = this.#shadow.querySelector('.crumbs-window');
 
     if (!crumbScrollContainer || !crumbWindow) {
       return;
@@ -171,24 +171,24 @@ export class ElementsBreadcrumbs extends HTMLElement {
     const maxChildWidth = crumbWindowWidth - paddingAllowance;
 
     if (scrollContainerWidth < maxChildWidth) {
-      if (this.overflowing) {
+      if (this.#overflowing) {
         // We were overflowing, but now we have enough room, so re-render with
         // overflowing set to false so the overflow buttons get removed.
-        this.overflowing = false;
-        this.render();
+        this.#overflowing = false;
+        this.#render();
       }
       return;
     }
 
     // We don't have enough room, so if we are not currently overflowing, mark
     // as overflowing and re-render to update the UI.
-    if (!this.overflowing) {
-      this.overflowing = true;
-      this.render();
+    if (!this.#overflowing) {
+      this.#overflowing = true;
+      this.#render();
     }
   }
 
-  private onCrumbsWindowScroll(event: Event): void {
+  #onCrumbsWindowScroll(event: Event): void {
     if (!event.target) {
       return;
     }
@@ -200,10 +200,10 @@ export class ElementsBreadcrumbs extends HTMLElement {
      */
     const scrollWindow = event.target as Element;
 
-    this.updateScrollState(scrollWindow);
+    this.#updateScrollState(scrollWindow);
   }
 
-  private updateScrollState(scrollWindow: Element): void {
+  #updateScrollState(scrollWindow: Element): void {
     const maxScrollLeft = scrollWindow.scrollWidth - scrollWindow.clientWidth;
     const currentScroll = scrollWindow.scrollLeft;
 
@@ -220,20 +220,20 @@ export class ElementsBreadcrumbs extends HTMLElement {
     const scrollBeginningAndEndPadding = 10;
 
     if (currentScroll < scrollBeginningAndEndPadding) {
-      this.userScrollPosition = 'start';
+      this.#userScrollPosition = 'start';
     } else if (currentScroll >= maxScrollLeft - scrollBeginningAndEndPadding) {
-      this.userScrollPosition = 'end';
+      this.#userScrollPosition = 'end';
     } else {
-      this.userScrollPosition = 'middle';
+      this.#userScrollPosition = 'middle';
     }
 
-    this.render();
+    this.#render();
   }
 
-  private onOverflowClick(direction: 'left'|'right'): () => void {
+  #onOverflowClick(direction: 'left'|'right'): () => void {
     return (): void => {
-      this.userHasManuallyScrolled = true;
-      const scrollWindow = this.shadow.querySelector('.crumbs-window');
+      this.#userHasManuallyScrolled = true;
+      const scrollWindow = this.#shadow.querySelector('.crumbs-window');
 
       if (!scrollWindow) {
         return;
@@ -252,34 +252,34 @@ export class ElementsBreadcrumbs extends HTMLElement {
     };
   }
 
-  private renderOverflowButton(direction: 'left'|'right', disabled: boolean): LitHtml.TemplateResult {
+  #renderOverflowButton(direction: 'left'|'right', disabled: boolean): LitHtml.TemplateResult {
     const buttonStyles = LitHtml.Directives.classMap({
       overflow: true,
       [direction]: true,
-      hidden: this.overflowing === false,
+      hidden: this.#overflowing === false,
     });
 
     return LitHtml.html`
       <button
         class=${buttonStyles}
-        @click=${this.onOverflowClick(direction)}
+        @click=${this.#onOverflowClick(direction)}
         ?disabled=${disabled}
         aria-label="Scroll ${direction}"
       >&hellip;</button>
       `;
   }
 
-  private async render(): Promise<void> {
-    const crumbs = crumbsToRender(this.crumbsData, this.selectedDOMNode);
+  async #render(): Promise<void> {
+    const crumbs = crumbsToRender(this.#crumbsData, this.#selectedDOMNode);
 
     await coordinator.write('Breadcrumbs render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
         <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
-          ${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
+          ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
 
-          <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>
+          <div class="crumbs-window" @scroll=${this.#onCrumbsWindowScroll}>
             <ul class="crumbs-scroll-container">
               ${crumbs.map(crumb => {
                 const crumbClasses = {
@@ -295,11 +295,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     <a href="#"
                       draggable=false
                       class="crumb-link"
-                      @click=${this.onCrumbClick(crumb.node)}
-                      @mousemove=${this.onCrumbMouseMove(crumb.node)}
-                      @mouseleave=${this.onCrumbMouseLeave(crumb.node)}
-                      @focus=${this.onCrumbFocus(crumb.node)}
-                      @blur=${this.onCrumbBlur(crumb.node)}
+                      @click=${this.#onCrumbClick(crumb.node)}
+                      @mousemove=${this.#onCrumbMouseMove(crumb.node)}
+                      @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
+                      @focus=${this.#onCrumbFocus(crumb.node)}
+                      @blur=${this.#onCrumbBlur(crumb.node)}
                     ><${NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
                       nodeTitle: crumb.title.main,
                       nodeId: crumb.title.extras.id,
@@ -309,16 +309,16 @@ export class ElementsBreadcrumbs extends HTMLElement {
               })}
             </ul>
           </div>
-          ${this.renderOverflowButton('right', this.userScrollPosition === 'end')}
+          ${this.#renderOverflowButton('right', this.#userScrollPosition === 'end')}
         </nav>
-      `, this.shadow, { host: this });
+      `, this.#shadow, { host: this });
       // clang-format on
     });
 
-    this.checkForOverflow();
+    this.#checkForOverflow();
   }
 
-  private async ensureSelectedNodeIsVisible(): Promise<void> {
+  async #ensureSelectedNodeIsVisible(): Promise<void> {
     /*
      * If the user has manually scrolled the crumbs in either direction, we
      * effectively hand control over the scrolling down to them. This is to
@@ -329,11 +329,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
      * tree, we will auto-scroll that element into view, because we'll get new
      * data and hence the flag will be reset.
      */
-    if (!this.selectedDOMNode || !this.shadow || !this.overflowing || this.userHasManuallyScrolled) {
+    if (!this.#selectedDOMNode || !this.#shadow || !this.#overflowing || this.#userHasManuallyScrolled) {
       return;
     }
-    const activeCrumbId = this.selectedDOMNode.id;
-    const activeCrumb = this.shadow.querySelector(`.crumb[data-node-id="${activeCrumbId}"]`);
+    const activeCrumbId = this.#selectedDOMNode.id;
+    const activeCrumb = this.#shadow.querySelector(`.crumb[data-node-id="${activeCrumbId}"]`);
 
     if (activeCrumb) {
       await coordinator.scroll(() => {

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

@@ -13,36 +13,36 @@ export interface ElementsPanelLinkData {
 }
 export class ElementsPanelLink extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-elements-panel-link`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
+  readonly #shadow = this.attachShadow({mode: 'open'});
 
-  private onElementRevealIconClick: ((event?: Event) => void) = () => {};
-  private onElementRevealIconMouseEnter: ((event?: Event) => void) = () => {};
-  private onElementRevealIconMouseLeave: ((event?: Event) => void) = () => {};
+  #onElementRevealIconClick: ((event?: Event) => void) = () => {};
+  #onElementRevealIconMouseEnter: ((event?: Event) => void) = () => {};
+  #onElementRevealIconMouseLeave: ((event?: Event) => void) = () => {};
 
   set data(data: ElementsPanelLinkData) {
-    this.onElementRevealIconClick = data.onElementRevealIconClick;
-    this.onElementRevealIconMouseEnter = data.onElementRevealIconMouseEnter;
-    this.onElementRevealIconMouseLeave = data.onElementRevealIconMouseLeave;
-    this.update();
+    this.#onElementRevealIconClick = data.onElementRevealIconClick;
+    this.#onElementRevealIconMouseEnter = data.onElementRevealIconMouseEnter;
+    this.#onElementRevealIconMouseLeave = data.onElementRevealIconMouseLeave;
+    this.#update();
   }
 
-  private update(): void {
-    this.render();
+  #update(): void {
+    this.#render();
   }
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [elementsPanelLinkStyles];
+    this.#shadow.adoptedStyleSheets = [elementsPanelLinkStyles];
   }
 
-  private render(): void {
+  #render(): void {
     // clang-format off
       LitHtml.render(LitHtml.html`
       <span
         class="element-reveal-icon"
-        @click=${this.onElementRevealIconClick}
-        @mouseenter=${this.onElementRevealIconMouseEnter}
-        @mouseleave=${this.onElementRevealIconMouseLeave}></span>
-      `, this.shadow, {host: this});
+        @click=${this.#onElementRevealIconClick}
+        @mouseenter=${this.#onElementRevealIconMouseEnter}
+        @mouseleave=${this.#onElementRevealIconMouseLeave}></span>
+      `, this.#shadow, {host: this});
     // clang-format on
   }
 }

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

@@ -95,27 +95,27 @@ export interface LayoutPaneData {
 
 export class LayoutPane extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-layout-pane`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private settings: Readonly<Setting[]> = [];
-  private gridElements: Readonly<LayoutElement[]> = [];
-  private flexContainerElements?: Readonly<LayoutElement[]> = [];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #settings: Readonly<Setting[]> = [];
+  #gridElements: Readonly<LayoutElement[]> = [];
+  #flexContainerElements?: Readonly<LayoutElement[]> = [];
 
   constructor() {
     super();
-    this.shadow.adoptedStyleSheets = [
+    this.#shadow.adoptedStyleSheets = [
       layoutPaneStyles,
       inspectorCommonStyles,
     ];
   }
 
   set data(data: LayoutPaneData) {
-    this.settings = data.settings;
-    this.gridElements = data.gridElements;
-    this.flexContainerElements = data.flexContainerElements;
-    this.render();
+    this.#settings = data.settings;
+    this.#gridElements = data.gridElements;
+    this.#flexContainerElements = data.flexContainerElements;
+    this.#render();
   }
 
-  private onSummaryKeyDown(event: KeyboardEvent): void {
+  #onSummaryKeyDown(event: KeyboardEvent): void {
     if (!event.target) {
       return;
     }
@@ -134,109 +134,109 @@ export class LayoutPane extends HTMLElement {
     }
   }
 
-  private render(): void {
+  #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <details open>
-        <summary class="header" @keydown=${this.onSummaryKeyDown}>
+        <summary class="header" @keydown=${this.#onSummaryKeyDown}>
           ${i18nString(UIStrings.grid)}
         </summary>
         <div class="content-section">
           <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
           <div class="select-settings">
-            ${this.getEnumSettings().map(setting => this.renderEnumSetting(setting))}
+            ${this.#getEnumSettings().map(setting => this.#renderEnumSetting(setting))}
           </div>
           <div class="checkbox-settings">
-            ${this.getBooleanSettings().map(setting => this.renderBooleanSetting(setting))}
+            ${this.#getBooleanSettings().map(setting => this.#renderBooleanSetting(setting))}
           </div>
         </div>
-        ${this.gridElements ?
+        ${this.#gridElements ?
           html`<div class="content-section">
             <h3 class="content-section-title">
-              ${this.gridElements.length ? i18nString(UIStrings.gridOverlays) : i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
+              ${this.#gridElements.length ? i18nString(UIStrings.gridOverlays) : i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
             </h3>
-            ${this.gridElements.length ?
+            ${this.#gridElements.length ?
               html`<div class="elements">
-                ${this.gridElements.map(element => this.renderElement(element))}
+                ${this.#gridElements.map(element => this.#renderElement(element))}
               </div>` : ''}
           </div>` : ''}
       </details>
-      ${this.flexContainerElements !== undefined ?
+      ${this.#flexContainerElements !== undefined ?
         html`
         <details open>
-          <summary class="header" @keydown=${this.onSummaryKeyDown}>
+          <summary class="header" @keydown=${this.#onSummaryKeyDown}>
             ${i18nString(UIStrings.flexbox)}
           </summary>
-          ${this.flexContainerElements ?
+          ${this.#flexContainerElements ?
             html`<div class="content-section">
               <h3 class="content-section-title">
-                ${this.flexContainerElements.length ? i18nString(UIStrings.flexboxOverlays) : i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
+                ${this.#flexContainerElements.length ? i18nString(UIStrings.flexboxOverlays) : i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
               </h3>
-              ${this.flexContainerElements.length ?
+              ${this.#flexContainerElements.length ?
                 html`<div class="elements">
-                  ${this.flexContainerElements.map(element => this.renderElement(element))}
+                  ${this.#flexContainerElements.map(element => this.#renderElement(element))}
                 </div>` : ''}
             </div>` : ''}
         </details>
         `
       : ''}
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on
   }
 
-  private getEnumSettings(): EnumSetting[] {
-    return this.settings.filter(isEnumSetting);
+  #getEnumSettings(): EnumSetting[] {
+    return this.#settings.filter(isEnumSetting);
   }
 
-  private getBooleanSettings(): BooleanSetting[] {
-    return this.settings.filter(isBooleanSetting);
+  #getBooleanSettings(): BooleanSetting[] {
+    return this.#settings.filter(isBooleanSetting);
   }
 
-  private onBooleanSettingChange(setting: BooleanSetting, event: HTMLInputElementEvent): void {
+  #onBooleanSettingChange(setting: BooleanSetting, event: HTMLInputElementEvent): void {
     event.preventDefault();
     this.dispatchEvent(new SettingChangedEvent(setting.name, event.target.checked));
   }
 
-  private onEnumSettingChange(setting: EnumSetting, event: HTMLInputElementEvent): void {
+  #onEnumSettingChange(setting: EnumSetting, event: HTMLInputElementEvent): void {
     event.preventDefault();
     this.dispatchEvent(new SettingChangedEvent(setting.name, event.target.value));
   }
 
-  private onElementToggle(element: LayoutElement, event: HTMLInputElementEvent): void {
+  #onElementToggle(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.toggle(event.target.checked);
   }
 
-  private onElementClick(element: LayoutElement, event: HTMLInputElementEvent): void {
+  #onElementClick(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.reveal();
   }
 
-  private onColorChange(element: LayoutElement, event: HTMLInputElementEvent): void {
+  #onColorChange(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.setColor(event.target.value);
-    this.render();
+    this.#render();
   }
 
-  private onElementMouseEnter(element: LayoutElement, event: HTMLInputElementEvent): void {
+  #onElementMouseEnter(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.highlight();
   }
 
-  private onElementMouseLeave(element: LayoutElement, event: HTMLInputElementEvent): void {
+  #onElementMouseLeave(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.hideHighlight();
   }
 
-  private renderElement(element: LayoutElement): LitHtml.TemplateResult {
-    const onElementToggle = this.onElementToggle.bind(this, element);
-    const onElementClick = this.onElementClick.bind(this, element);
-    const onColorChange = this.onColorChange.bind(this, element);
-    const onMouseEnter = this.onElementMouseEnter.bind(this, element);
-    const onMouseLeave = this.onElementMouseLeave.bind(this, element);
+  #renderElement(element: LayoutElement): LitHtml.TemplateResult {
+    const onElementToggle = this.#onElementToggle.bind(this, element);
+    const onElementClick = this.#onElementClick.bind(this, element);
+    const onColorChange = this.#onColorChange.bind(this, element);
+    const onMouseEnter = this.#onElementMouseEnter.bind(this, element);
+    const onMouseLeave = this.#onElementMouseLeave.bind(this, element);
     const onColorLabelKeyUp = (event: KeyboardEvent): void => {
       // Handle Enter and Space events to make the color picker accessible.
       if (event.key !== 'Enter' && event.key !== ' ') {
@@ -275,16 +275,16 @@ export class LayoutPane extends HTMLElement {
     // clang-format on
   }
 
-  private renderBooleanSetting(setting: BooleanSetting): LitHtml.TemplateResult {
-    const onBooleanSettingChange = this.onBooleanSettingChange.bind(this, setting);
+  #renderBooleanSetting(setting: BooleanSetting): LitHtml.TemplateResult {
+    const onBooleanSettingChange = this.#onBooleanSettingChange.bind(this, setting);
     return html`<label data-boolean-setting="true" class="checkbox-label" title=${setting.title}>
       <input data-input="true" type="checkbox" .checked=${setting.value} @change=${onBooleanSettingChange} />
       <span data-label="true">${setting.title}</span>
     </label>`;
   }
 
-  private renderEnumSetting(setting: EnumSetting): LitHtml.TemplateResult {
-    const onEnumSettingChange = this.onEnumSettingChange.bind(this, setting);
+  #renderEnumSetting(setting: EnumSetting): LitHtml.TemplateResult {
+    const onEnumSettingChange = this.#onEnumSettingChange.bind(this, setting);
     return html`<label data-enum-setting="true" class="select-label" title=${setting.title}>
       <select class="chrome-select" data-input="true" @change=${onEnumSettingChange}>
         ${

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

@@ -17,40 +17,40 @@ export interface NodeTextData {
 export class NodeText extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-node-text`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private nodeTitle: string = '';
-  private nodeId?: string = '';
-  private nodeClasses?: string[] = [];
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #nodeTitle: string = '';
+  #nodeId?: string = '';
+  #nodeClasses?: string[] = [];
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [nodeTextStyles];
+    this.#shadow.adoptedStyleSheets = [nodeTextStyles];
   }
 
   set data(data: NodeTextData) {
-    this.nodeTitle = data.nodeTitle;
-    this.nodeId = data.nodeId;
-    this.nodeClasses = data.nodeClasses;
-    this.render();
+    this.#nodeTitle = data.nodeTitle;
+    this.#nodeId = data.nodeId;
+    this.#nodeClasses = data.nodeClasses;
+    this.#render();
   }
 
-  private render(): void {
-    const hasId = Boolean(this.nodeId);
-    const hasNodeClasses = Boolean(this.nodeClasses && this.nodeClasses.length > 0);
+  #render(): void {
+    const hasId = Boolean(this.#nodeId);
+    const hasNodeClasses = Boolean(this.#nodeClasses && this.#nodeClasses.length > 0);
 
     const parts = [
-      html`<span class="node-label-name">${this.nodeTitle}</span>`,
+      html`<span class="node-label-name">${this.#nodeTitle}</span>`,
     ];
 
-    if (this.nodeId) {
+    if (this.#nodeId) {
       const classes = LitHtml.Directives.classMap({
         'node-label-id': true,
         'node-multiple-descriptors': hasNodeClasses,
       });
-      parts.push(html`<span class=${classes}>#${CSS.escape(this.nodeId)}</span>`);
+      parts.push(html`<span class=${classes}>#${CSS.escape(this.#nodeId)}</span>`);
     }
 
-    if (this.nodeClasses && this.nodeClasses.length > 0) {
-      const text = this.nodeClasses.map(c => `.${CSS.escape(c)}`).join('');
+    if (this.#nodeClasses && this.#nodeClasses.length > 0) {
+      const text = this.#nodeClasses.map(c => `.${CSS.escape(c)}`).join('');
       const classes = LitHtml.Directives.classMap({
         'node-label-class': true,
         'node-multiple-descriptors': hasId,
@@ -62,7 +62,7 @@ export class NodeText extends HTMLElement {
     // clang-format off
     render(html`
       ${parts}
-    `, this.shadow, {
+    `, this.#shadow, {
       host: this,
     });
     // clang-format on