chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/ui/legacy/TabbedPane.ts

@@ -91,11 +91,11 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/TabbedPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, typeof VBox>(VBox) {
-  private readonly headerElementInternal: HTMLElement;
+  readonly #headerElement: HTMLElement;
   private readonly headerContentsElement: HTMLElement;
   tabSlider: HTMLDivElement;
   readonly tabsElement: HTMLElement;
-  private readonly contentElementInternal: HTMLElement;
+  readonly #contentElement: HTMLElement;
   private tabs: TabbedPaneTab[];
   private readonly tabsHistory: TabbedPaneTab[];
   tabsById: Map<string, TabbedPaneTab>;
@@ -115,8 +115,8 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   private placeholderContainerElement?: HTMLElement;
   private lastSelectedOverflowTab?: TabbedPaneTab;
   private measuredDropDownButtonWidth?: number;
-  private leftToolbarInternal?: Toolbar;
-  private rightToolbarInternal?: Toolbar;
+  #leftToolbar?: Toolbar;
+  #rightToolbar?: Toolbar;
   allowTabReorder?: boolean;
   private automaticReorder?: boolean;
 
@@ -127,15 +127,15 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     this.contentElement.classList.add('tabbed-pane-shadow');
     this.contentElement.tabIndex = -1;
     this.setDefaultFocusedElement(this.contentElement);
-    this.headerElementInternal = this.contentElement.createChild('div', 'tabbed-pane-header');
-    this.headerContentsElement = this.headerElementInternal.createChild('div', 'tabbed-pane-header-contents');
+    this.#headerElement = this.contentElement.createChild('div', 'tabbed-pane-header');
+    this.headerContentsElement = this.#headerElement.createChild('div', 'tabbed-pane-header-contents');
     this.tabSlider = document.createElement('div');
     this.tabSlider.classList.add('tabbed-pane-tab-slider');
     this.tabsElement = this.headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
     this.tabsElement.setAttribute('role', 'tablist');
     this.tabsElement.addEventListener('keydown', this.keyDown.bind(this), false);
-    this.contentElementInternal = this.contentElement.createChild('div', 'tabbed-pane-content');
-    this.contentElementInternal.createChild('slot');
+    this.#contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
+    this.#contentElement.createChild('slot');
     this.tabs = [];
     this.tabsHistory = [];
     this.tabsById = new Map();
@@ -155,7 +155,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
   setCurrentTabLocked(locked: boolean): void {
     this.currentTabLocked = locked;
-    this.headerElementInternal.classList.toggle('locked', this.currentTabLocked);
+    this.#headerElement.classList.toggle('locked', this.currentTabLocked);
   }
 
   setAutoSelectFirstItemOnShow(autoSelect: boolean): void {
@@ -218,11 +218,11 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   headerElement(): Element {
-    return this.headerElementInternal;
+    return this.#headerElement;
   }
 
   tabbedPaneContentElement(): Element {
-    return this.contentElementInternal;
+    return this.#contentElement;
   }
 
   setTabDelegate(delegate: TabbedPaneTabDelegate): void {
@@ -588,17 +588,16 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
 
     if (!this.tabs.length) {
-      this.contentElementInternal.classList.add('has-no-tabs');
+      this.#contentElement.classList.add('has-no-tabs');
       if (this.placeholderElement && !this.placeholderContainerElement) {
-        this.placeholderContainerElement =
-            this.contentElementInternal.createChild('div', 'tabbed-pane-placeholder fill');
+        this.placeholderContainerElement = this.#contentElement.createChild('div', 'tabbed-pane-placeholder fill');
         this.placeholderContainerElement.appendChild(this.placeholderElement);
         if (this.focusedPlaceholderElement) {
           this.setDefaultFocusedElement(this.focusedPlaceholderElement);
         }
       }
     } else {
-      this.contentElementInternal.classList.remove('has-no-tabs');
+      this.#contentElement.classList.remove('has-no-tabs');
       if (this.placeholderContainerElement) {
         this.placeholderContainerElement.remove();
         this.setDefaultFocusedElement(this.contentElement);
@@ -614,20 +613,20 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   private adjustToolbarWidth(): void {
-    if (!this.rightToolbarInternal || !this.measuredDropDownButtonWidth) {
+    if (!this.#rightToolbar || !this.measuredDropDownButtonWidth) {
       return;
     }
-    const leftToolbarWidth = this.leftToolbarInternal?.getBoundingClientRect().width ?? 0;
-    const rightToolbarWidth = this.rightToolbarInternal.getBoundingClientRect().width;
-    const totalWidth = this.headerElementInternal.getBoundingClientRect().width;
-    if (!this.rightToolbarInternal.hasCompactLayout() &&
+    const leftToolbarWidth = this.#leftToolbar?.getBoundingClientRect().width ?? 0;
+    const rightToolbarWidth = this.#rightToolbar.getBoundingClientRect().width;
+    const totalWidth = this.#headerElement.getBoundingClientRect().width;
+    if (!this.#rightToolbar.hasCompactLayout() &&
         totalWidth - rightToolbarWidth - leftToolbarWidth < this.measuredDropDownButtonWidth + 10) {
-      this.rightToolbarInternal.setCompactLayout(true);
+      this.#rightToolbar.setCompactLayout(true);
     } else if (
-        this.rightToolbarInternal.hasCompactLayout() &&
+        this.#rightToolbar.hasCompactLayout() &&
         // Estimate the right toolbar size in non-compact mode as 2 times its compact size.
         totalWidth - 2 * rightToolbarWidth - leftToolbarWidth > this.measuredDropDownButtonWidth + 10) {
-      this.rightToolbarInternal.setCompactLayout(false);
+      this.#rightToolbar.setCompactLayout(false);
     }
   }
 
@@ -929,7 +928,7 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   override elementsToRestoreScrollPositionsFor(): Element[] {
-    return [this.contentElementInternal];
+    return [this.#contentElement];
   }
 
   insertBefore(tab: TabbedPaneTab, index: number): void {
@@ -946,21 +945,21 @@ export class TabbedPane extends Common.ObjectWrapper.eventMixin<EventTypes, type
   }
 
   leftToolbar(): Toolbar {
-    if (!this.leftToolbarInternal) {
-      this.leftToolbarInternal = document.createElement('devtools-toolbar');
-      this.leftToolbarInternal.classList.add('tabbed-pane-left-toolbar');
-      this.headerElementInternal.insertBefore(this.leftToolbarInternal, this.headerElementInternal.firstChild);
+    if (!this.#leftToolbar) {
+      this.#leftToolbar = document.createElement('devtools-toolbar');
+      this.#leftToolbar.classList.add('tabbed-pane-left-toolbar');
+      this.#headerElement.insertBefore(this.#leftToolbar, this.#headerElement.firstChild);
     }
-    return this.leftToolbarInternal;
+    return this.#leftToolbar;
   }
 
   rightToolbar(): Toolbar {
-    if (!this.rightToolbarInternal) {
-      this.rightToolbarInternal = document.createElement('devtools-toolbar');
-      this.rightToolbarInternal.classList.add('tabbed-pane-right-toolbar');
-      this.headerElementInternal.appendChild(this.rightToolbarInternal);
+    if (!this.#rightToolbar) {
+      this.#rightToolbar = document.createElement('devtools-toolbar');
+      this.#rightToolbar.classList.add('tabbed-pane-right-toolbar');
+      this.#headerElement.appendChild(this.#rightToolbar);
     }
-    return this.rightToolbarInternal;
+    return this.#rightToolbar;
   }
 
   setAllowTabReorder(allow: boolean, automatic?: boolean): void {
@@ -1039,50 +1038,50 @@ export class TabbedPaneTab {
   closeable: boolean;
   previewFeature = false;
   private readonly tabbedPane: TabbedPane;
-  idInternal: string;
-  private titleInternal: string;
-  private tooltipInternal: string|undefined;
-  private viewInternal: Widget;
+  #id: string;
+  #title: string;
+  #tooltip: string|undefined;
+  #view: Widget;
   shown: boolean;
   measuredWidth!: number|undefined;
-  private tabElementInternal!: HTMLElement|undefined;
+  #tabElement!: HTMLElement|undefined;
   private icon: IconButton.Icon.Icon|null = null;
   private suffixElement: HTMLElement|null = null;
-  private widthInternal?: number;
+  #width?: number;
   private delegate?: TabbedPaneTabDelegate;
   private titleElement?: HTMLElement;
   private dragStartX?: number;
-  private jslogContextInternal?: string;
+  #jslogContext?: string;
   constructor(
       tabbedPane: TabbedPane, id: string, title: string, closeable: boolean, previewFeature: boolean, view: Widget,
       tooltip?: string, jslogContext?: string) {
     this.closeable = closeable;
     this.previewFeature = previewFeature;
     this.tabbedPane = tabbedPane;
-    this.idInternal = id;
-    this.titleInternal = title;
-    this.tooltipInternal = tooltip;
-    this.viewInternal = view;
+    this.#id = id;
+    this.#title = title;
+    this.#tooltip = tooltip;
+    this.#view = view;
     this.shown = false;
-    this.jslogContextInternal = jslogContext;
+    this.#jslogContext = jslogContext;
   }
 
   get id(): string {
-    return this.idInternal;
+    return this.#id;
   }
 
   get title(): string {
-    return this.titleInternal;
+    return this.#title;
   }
 
   set title(title: string) {
-    if (title === this.titleInternal) {
+    if (title === this.#title) {
       return;
     }
-    this.titleInternal = title;
+    this.#title = title;
     if (this.titleElement) {
       this.titleElement.textContent = title;
-      const closeIconContainer = this.tabElementInternal?.querySelector('.close-button');
+      const closeIconContainer = this.#tabElement?.querySelector('.close-button');
       closeIconContainer?.setAttribute('title', i18nString(UIStrings.closeS, {PH1: title}));
       closeIconContainer?.setAttribute('aria-label', i18nString(UIStrings.closeS, {PH1: title}));
     }
@@ -1090,7 +1089,7 @@ export class TabbedPaneTab {
   }
 
   get jslogContext(): string {
-    return this.jslogContextInternal ?? (this.idInternal === 'console-view' ? 'console' : this.idInternal);
+    return this.#jslogContext ?? (this.#id === 'console-view' ? 'console' : this.#id);
   }
 
   isCloseable(): boolean {
@@ -1099,16 +1098,16 @@ export class TabbedPaneTab {
 
   setIcon(icon: IconButton.Icon.Icon|null): void {
     this.icon = icon;
-    if (this.tabElementInternal && this.titleElement) {
-      this.createIconElement(this.tabElementInternal, this.titleElement, false);
+    if (this.#tabElement && this.titleElement) {
+      this.createIconElement(this.#tabElement, this.titleElement, false);
     }
     delete this.measuredWidth;
   }
 
   setSuffixElement(suffixElement: HTMLElement|null): void {
     this.suffixElement = suffixElement;
-    if (this.tabElementInternal && this.titleElement) {
-      this.createSuffixElement(this.tabElementInternal, this.titleElement, false);
+    if (this.#tabElement && this.titleElement) {
+      this.createSuffixElement(this.#tabElement, this.titleElement, false);
     }
     delete this.measuredWidth;
   }
@@ -1125,39 +1124,39 @@ export class TabbedPaneTab {
   }
 
   get view(): Widget {
-    return this.viewInternal;
+    return this.#view;
   }
 
   set view(view: Widget) {
-    this.viewInternal = view;
+    this.#view = view;
   }
 
   get tooltip(): string|undefined {
-    return this.tooltipInternal;
+    return this.#tooltip;
   }
 
   set tooltip(tooltip: string|undefined) {
-    this.tooltipInternal = tooltip;
+    this.#tooltip = tooltip;
     if (this.titleElement) {
       Tooltip.install(this.titleElement, tooltip || '');
     }
   }
 
   get tabElement(): HTMLElement {
-    if (!this.tabElementInternal) {
-      this.tabElementInternal = this.createTabElement(false);
+    if (!this.#tabElement) {
+      this.#tabElement = this.createTabElement(false);
     }
 
-    return this.tabElementInternal;
+    return this.#tabElement;
   }
 
   width(): number {
-    return this.widthInternal || 0;
+    return this.#width || 0;
   }
 
   setWidth(width: number): void {
     this.tabElement.style.width = width === -1 ? '' : (width + 'px');
-    this.widthInternal = width;
+    this.#width = width;
   }
 
   setDelegate(delegate: TabbedPaneTabDelegate): void {
@@ -1213,7 +1212,7 @@ export class TabbedPaneTab {
   createTabElement(measuring: boolean): HTMLElement {
     const tabElement = document.createElement('div');
     tabElement.classList.add('tabbed-pane-header-tab');
-    tabElement.id = 'tab-' + this.idInternal;
+    tabElement.id = 'tab-' + this.#id;
     ARIAUtils.markAsTab(tabElement);
     ARIAUtils.setSelected(tabElement, false);
     ARIAUtils.setLabel(tabElement, this.title);
@@ -1393,8 +1392,8 @@ export class TabbedPaneTab {
       return false;
     }
     this.dragStartX = event.pageX;
-    if (this.tabElementInternal) {
-      this.tabElementInternal.classList.add('dragging');
+    if (this.#tabElement) {
+      this.#tabElement.classList.add('dragging');
     }
     this.tabbedPane.tabSlider.remove();
     return true;
@@ -1404,12 +1403,12 @@ export class TabbedPaneTab {
     const tabElements = this.tabbedPane.tabsElement.childNodes;
     for (let i = 0; i < tabElements.length; ++i) {
       let tabElement: HTMLElement = (tabElements[i] as HTMLElement);
-      if (!this.tabElementInternal || tabElement === this.tabElementInternal) {
+      if (!this.#tabElement || tabElement === this.#tabElement) {
         continue;
       }
 
-      const intersects = tabElement.offsetLeft + tabElement.clientWidth > this.tabElementInternal.offsetLeft &&
-          this.tabElementInternal.offsetLeft + this.tabElementInternal.clientWidth > tabElement.offsetLeft;
+      const intersects = tabElement.offsetLeft + tabElement.clientWidth > this.#tabElement.offsetLeft &&
+          this.#tabElement.offsetLeft + this.#tabElement.clientWidth > tabElement.offsetLeft;
       if (!intersects) {
         continue;
       }
@@ -1424,14 +1423,14 @@ export class TabbedPaneTab {
         ++i;
       }
 
-      const oldOffsetLeft = this.tabElementInternal.offsetLeft;
+      const oldOffsetLeft = this.#tabElement.offsetLeft;
       this.tabbedPane.insertBefore(this, i);
-      this.dragStartX = dragStartX + this.tabElementInternal.offsetLeft - oldOffsetLeft;
+      this.dragStartX = dragStartX + this.#tabElement.offsetLeft - oldOffsetLeft;
       break;
     }
 
     const dragStartX = (this.dragStartX as number);
-    const tabElement = (this.tabElementInternal as HTMLElement);
+    const tabElement = (this.#tabElement as HTMLElement);
     if (!tabElement.previousSibling && event.pageX - dragStartX < 0) {
       tabElement.style.setProperty('left', '0px');
       return;
@@ -1445,7 +1444,7 @@ export class TabbedPaneTab {
   }
 
   private endTabDragging(_event: Event): void {
-    const tabElement = (this.tabElementInternal as HTMLElement);
+    const tabElement = (this.#tabElement as HTMLElement);
     tabElement.classList.remove('dragging');
     tabElement.style.removeProperty('left');
     delete this.dragStartX;

package/front_end/ui/legacy/TextPrompt.ts

@@ -47,7 +47,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private proxyElement!: HTMLElement|undefined;
   private proxyElementDisplay: string;
   private autocompletionTimeout: number;
-  private titleInternal: string;
+  #title: string;
   private queryRange: TextUtils.TextRange.TextRange|null;
   private previousText: string;
   private currentSuggestion: Suggestion|null;
@@ -57,7 +57,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private loadCompletions!: (this: null, arg1: string, arg2: string, arg3?: boolean|undefined) => Promise<Suggestion[]>;
   private completionStopCharacters!: string;
   private usesSuggestionBuilder!: boolean;
-  private elementInternal?: Element;
+  #element?: Element;
   private boundOnKeyDown?: ((ev: KeyboardEvent) => void);
   private boundOnInput?: ((ev: Event) => void);
   private boundOnMouseWheel?: ((event: Event) => void);
@@ -70,14 +70,14 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private blurListener?: ((arg0: Event) => void);
   private oldTabIndex?: number;
   private completeTimeout?: number;
-  private disableDefaultSuggestionForEmptyInputInternal?: boolean;
+  #disableDefaultSuggestionForEmptyInput?: boolean;
   jslogContext: string|undefined = undefined;
 
   constructor() {
     super();
     this.proxyElementDisplay = 'inline-block';
     this.autocompletionTimeout = DefaultAutocompletionTimeout;
-    this.titleInternal = '';
+    this.#title = '';
     this.queryRange = null;
     this.previousText = '';
     this.currentSuggestion = null;
@@ -110,7 +110,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
    * they should use the result of this method to attach listeners for bubbling events.
    */
   attach(element: Element): Element {
-    return this.attachInternal(element);
+    return this.#attach(element);
   }
 
   /**
@@ -120,16 +120,16 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
    * (since the "blur" event does not bubble.)
    */
   attachAndStartEditing(element: Element, blurListener: (arg0: Event) => void): Element {
-    const proxyElement = this.attachInternal(element);
+    const proxyElement = this.#attach(element);
     this.startEditing(blurListener);
     return proxyElement;
   }
 
-  private attachInternal(element: Element): Element {
+  #attach(element: Element): Element {
     if (this.proxyElement) {
       throw new Error('Cannot attach an attached TextPrompt');
     }
-    this.elementInternal = element;
+    this.#element = element;
 
     this.boundOnKeyDown = this.onKeyDown.bind(this);
     this.boundOnInput = this.onInput.bind(this);
@@ -152,34 +152,34 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     if (this.jslogContext) {
       jslog = jslog.context(this.jslogContext);
     }
-    if (!this.elementInternal.hasAttribute('jslog')) {
-      this.elementInternal.setAttribute('jslog', `${jslog}`);
+    if (!this.#element.hasAttribute('jslog')) {
+      this.#element.setAttribute('jslog', `${jslog}`);
     }
-    this.elementInternal.classList.add('text-prompt');
-    ARIAUtils.markAsTextBox(this.elementInternal);
-    ARIAUtils.setAutocomplete(this.elementInternal, ARIAUtils.AutocompleteInteractionModel.BOTH);
-    ARIAUtils.setHasPopup(this.elementInternal, ARIAUtils.PopupRole.LIST_BOX);
-    this.elementInternal.setAttribute('contenteditable', 'plaintext-only');
+    this.#element.classList.add('text-prompt');
+    ARIAUtils.markAsTextBox(this.#element);
+    ARIAUtils.setAutocomplete(this.#element, ARIAUtils.AutocompleteInteractionModel.BOTH);
+    ARIAUtils.setHasPopup(this.#element, ARIAUtils.PopupRole.LIST_BOX);
+    this.#element.setAttribute('contenteditable', 'plaintext-only');
     this.element().addEventListener('keydown', this.boundOnKeyDown, false);
-    this.elementInternal.addEventListener('input', this.boundOnInput, false);
-    this.elementInternal.addEventListener('wheel', this.boundOnMouseWheel, false);
-    this.elementInternal.addEventListener('selectstart', this.boundClearAutocomplete, false);
-    this.elementInternal.addEventListener('blur', this.boundOnBlur, false);
+    this.#element.addEventListener('input', this.boundOnInput, false);
+    this.#element.addEventListener('wheel', this.boundOnMouseWheel, false);
+    this.#element.addEventListener('selectstart', this.boundClearAutocomplete, false);
+    this.#element.addEventListener('blur', this.boundOnBlur, false);
 
     this.suggestBox = new SuggestBox(this, 20);
 
-    if (this.titleInternal) {
-      Tooltip.install(this.proxyElement, this.titleInternal);
+    if (this.#title) {
+      Tooltip.install(this.proxyElement, this.#title);
     }
 
     return this.proxyElement;
   }
 
   element(): HTMLElement {
-    if (!this.elementInternal) {
+    if (!this.#element) {
       throw new Error('Expected an already attached element!');
     }
-    return this.elementInternal as HTMLElement;
+    return this.#element as HTMLElement;
   }
 
   detach(): void {
@@ -256,11 +256,11 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   title(): string {
-    return this.titleInternal;
+    return this.#title;
   }
 
   setTitle(title: string): void {
-    this.titleInternal = title;
+    this.#title = title;
     if (this.proxyElement) {
       Tooltip.install(this.proxyElement, title);
     }
@@ -448,7 +448,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
       result = this.suggestBox.acceptSuggestion();
     }
     if (!result) {
-      result = this.acceptSuggestionInternal();
+      result = this.#acceptSuggestion();
     }
     if (this.usesSuggestionBuilder && result) {
       // Trigger autocompletions for text prompts using suggestion builders
@@ -543,7 +543,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   disableDefaultSuggestionForEmptyInput(): void {
-    this.disableDefaultSuggestionForEmptyInputInternal = true;
+    this.#disableDefaultSuggestionForEmptyInput = true;
   }
 
   private boxForAnchorAtStart(selection: Selection, textRange: Range): AnchorBox {
@@ -604,7 +604,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
     this.queryRange = new TextUtils.TextRange.TextRange(
         0, beforeRange.toString().length, 0, beforeRange.toString().length + fullWordRange.toString().length);
 
-    const shouldSelect = !this.disableDefaultSuggestionForEmptyInputInternal || Boolean(this.text());
+    const shouldSelect = !this.#disableDefaultSuggestionForEmptyInput || Boolean(this.text());
     if (this.suggestBox) {
       this.suggestBox.updateSuggestions(
           this.boxForAnchorAtStart(selection, fullWordRange), completions, shouldSelect, !this.isCaretAtEndOfPrompt(),
@@ -621,10 +621,10 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   }
 
   acceptSuggestion(): void {
-    this.acceptSuggestionInternal();
+    this.#acceptSuggestion();
   }
 
-  private acceptSuggestionInternal(): boolean {
+  #acceptSuggestion(): boolean {
     if (!this.queryRange) {
       return false;
     }
@@ -696,7 +696,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
         foundNextText = true;
       }
 
-      node = node.traverseNextNode(this.elementInternal);
+      node = node.traverseNextNode(this.#element);
     }
 
     return true;

package/front_end/ui/legacy/Toolbar.ts

@@ -492,7 +492,7 @@ export interface ToolbarButtonOptions {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export class ToolbarItem<T = any, E extends HTMLElement = HTMLElement> extends Common.ObjectWrapper.ObjectWrapper<T> {
   element: E;
-  private visibleInternal: boolean;
+  #visible: boolean;
   enabled: boolean;
   toolbar: Toolbar|null;
   protected title?: string;
@@ -500,7 +500,7 @@ export class ToolbarItem<T = any, E extends HTMLElement = HTMLElement> extends C
   constructor(element: E) {
     super();
     this.element = element;
-    this.visibleInternal = true;
+    this.#visible = true;
     this.enabled = true;
 
     /**
@@ -537,15 +537,15 @@ export class ToolbarItem<T = any, E extends HTMLElement = HTMLElement> extends C
   }
 
   visible(): boolean {
-    return this.visibleInternal;
+    return this.#visible;
   }
 
   setVisible(x: boolean): void {
-    if (this.visibleInternal === x) {
+    if (this.#visible === x) {
       return;
     }
     this.element.classList.toggle('hidden', !x);
-    this.visibleInternal = x;
+    this.#visible = x;
     if (this.toolbar && !(this instanceof ToolbarSeparator)) {
       this.toolbar.hideSeparatorDupes();
     }
@@ -1225,7 +1225,6 @@ export class ToolbarComboBox extends ToolbarItem<void, HTMLSelectElement> {
   selectedIndex(): number {
     return this.element.selectedIndex;
   }
-
 }
 
 export interface Option {
@@ -1234,12 +1233,12 @@ export interface Option {
 }
 
 export class ToolbarSettingComboBox extends ToolbarComboBox {
-  private optionsInternal: Option[];
+  #options: Option[];
   private readonly setting: Common.Settings.Setting<string>;
   private muteSettingListener?: boolean;
   constructor(options: Option[], setting: Common.Settings.Setting<string>, accessibleName: string) {
     super(null, accessibleName, undefined, setting.name);
-    this.optionsInternal = options;
+    this.#options = options;
     this.setting = setting;
     this.element.addEventListener('change', this.onSelectValueChange.bind(this), false);
     this.setOptions(options);
@@ -1247,7 +1246,7 @@ export class ToolbarSettingComboBox extends ToolbarComboBox {
   }
 
   setOptions(options: Option[]): void {
-    this.optionsInternal = options;
+    this.#options = options;
     this.element.removeChildren();
     for (let i = 0; i < options.length; ++i) {
       const dataOption = options[i];
@@ -1260,7 +1259,7 @@ export class ToolbarSettingComboBox extends ToolbarComboBox {
   }
 
   value(): string {
-    return this.optionsInternal[this.selectedIndex()].value;
+    return this.#options[this.selectedIndex()].value;
   }
 
   override select(option: Element): void {
@@ -1270,7 +1269,7 @@ export class ToolbarSettingComboBox extends ToolbarComboBox {
 
   override setSelectedIndex(index: number): void {
     super.setSelectedIndex(index);
-    const option = this.optionsInternal.at(index);
+    const option = this.#options.at(index);
     if (option) {
       this.setTitle(option.label);
     }
@@ -1294,8 +1293,8 @@ export class ToolbarSettingComboBox extends ToolbarComboBox {
     }
 
     const value = this.setting.get();
-    for (let i = 0; i < this.optionsInternal.length; ++i) {
-      if (value === this.optionsInternal[i].value) {
+    for (let i = 0; i < this.#options.length; ++i) {
+      if (value === this.#options[i].value) {
         this.setSelectedIndex(i);
         break;
       }
@@ -1306,7 +1305,7 @@ export class ToolbarSettingComboBox extends ToolbarComboBox {
    * Run when the user interacts with the <select> element.
    */
   private onSelectValueChange(_event: Event): void {
-    const option = this.optionsInternal[this.selectedIndex()];
+    const option = this.#options[this.selectedIndex()];
     this.muteSettingListener = true;
     this.setting.set(option.value);
     this.muteSettingListener = false;