[cleanup] Use JS private and move declarations to constructor

Also removes `Internal` suffixes and `inner` prefixes,
as the `#` indicates that they are private.

Bug: none
Bypass-Check-License: Only updates files, no new files are added.
Change-Id: I7428a699d7ff0df78420ceb360a200acdcf6a786
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6862694
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/ui/legacy/ResizerWidget.ts

@@ -7,55 +7,54 @@ import * as Common from '../../core/common/common.js';
 import {elementDragStart} from './UIUtils.js';
 
 export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private isEnabledInternal = true;
-  private elementsInternal = new Set<HTMLElement>();
-  private readonly installDragOnMouseDownBound: (event: Event) => false | undefined;
-  private cursorInternal: string;
-  private startX?: number;
-  private startY?: number;
+  #isEnabled = true;
+  #elements = new Set<HTMLElement>();
+  readonly #installDragOnMouseDownBound: (event: Event) => false | undefined;
+  #cursor = 'nwse-resize';
+  #startX?: number;
+  #startY?: number;
 
   constructor() {
     super();
 
-    this.installDragOnMouseDownBound = this.installDragOnMouseDown.bind(this);
-    this.cursorInternal = 'nwse-resize';
+    this.#installDragOnMouseDownBound = this.#installDragOnMouseDown.bind(this);
   }
 
   isEnabled(): boolean {
-    return this.isEnabledInternal;
+    return this.#isEnabled;
   }
 
   setEnabled(enabled: boolean): void {
-    this.isEnabledInternal = enabled;
+    this.#isEnabled = enabled;
     this.updateElementCursors();
   }
 
   elements(): Element[] {
-    return [...this.elementsInternal];
+    return [...this.#elements];
   }
 
   addElement(element: HTMLElement): void {
-    if (!this.elementsInternal.has(element)) {
-      this.elementsInternal.add(element);
-      element.addEventListener('pointerdown', this.installDragOnMouseDownBound, false);
-      this.updateElementCursor(element);
+    if (!this.#elements.has(element)) {
+      this.#elements.add(element);
+      element.addEventListener('pointerdown', this.#installDragOnMouseDownBound, false);
+      this.#updateElementCursor(element);
     }
   }
 
   removeElement(element: HTMLElement): void {
-    if (this.elementsInternal.has(element)) {
-      this.elementsInternal.delete(element);
-      element.removeEventListener('pointerdown', this.installDragOnMouseDownBound, false);
+    if (this.#elements.has(element)) {
+      this.#elements.delete(element);
+      element.removeEventListener('pointerdown', this.#installDragOnMouseDownBound, false);
       element.style.removeProperty('cursor');
     }
   }
 
   updateElementCursors(): void {
-    this.elementsInternal.forEach(this.updateElementCursor.bind(this));
+    this.#elements.forEach(this.#updateElementCursor.bind(this));
   }
 
-  private updateElementCursor(element: HTMLElement): void {
-    if (this.isEnabledInternal) {
+  #updateElementCursor(element: HTMLElement): void {
+    if (this.#isEnabled) {
       element.style.setProperty('cursor', this.cursor());
       element.style.setProperty('touch-action', 'none');
     } else {
@@ -65,46 +64,46 @@ export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes
   }
 
   cursor(): string {
-    return this.cursorInternal;
+    return this.#cursor;
   }
 
   setCursor(cursor: string): void {
-    this.cursorInternal = cursor;
+    this.#cursor = cursor;
     this.updateElementCursors();
   }
 
-  private installDragOnMouseDown(event: Event): false|undefined {
+  #installDragOnMouseDown(event: Event): false|undefined {
     const element = (event.target as HTMLElement);
     // Only handle drags of the nodes specified.
-    if (!this.elementsInternal.has(element)) {
+    if (!this.#elements.has(element)) {
       return false;
     }
-    elementDragStart(element, this.dragStart.bind(this), event => {
-      this.drag(event);
-    }, this.dragEnd.bind(this), this.cursor(), event);
+    elementDragStart(element, this.#dragStart.bind(this), event => {
+      this.#drag(event);
+    }, this.#dragEnd.bind(this), this.cursor(), event);
     return undefined;
   }
 
-  private dragStart(event: MouseEvent): boolean {
-    if (!this.isEnabledInternal) {
+  #dragStart(event: MouseEvent): boolean {
+    if (!this.#isEnabled) {
       return false;
     }
-    this.startX = event.pageX;
-    this.startY = event.pageY;
-    this.sendDragStart(this.startX, this.startY);
+    this.#startX = event.pageX;
+    this.#startY = event.pageY;
+    this.sendDragStart(this.#startX, this.#startY);
     return true;
   }
 
   sendDragStart(x: number, y: number): void {
     this.dispatchEventToListeners(Events.RESIZE_START, {startX: x, currentX: x, startY: y, currentY: y});
   }
 
-  private drag(event: MouseEvent): boolean {
-    if (!this.isEnabledInternal) {
-      this.dragEnd(event);
+  #drag(event: MouseEvent): boolean {
+    if (!this.#isEnabled) {
+      this.#dragEnd(event);
       return true;  // Cancel drag.
     }
-    this.sendDragMove((this.startX as number), event.pageX, (this.startY as number), event.pageY, event.shiftKey);
+    this.sendDragMove((this.#startX as number), event.pageX, (this.#startY as number), event.pageY, event.shiftKey);
     event.preventDefault();
     return false;  // Continue drag.
   }
@@ -113,10 +112,10 @@ export class ResizerWidget extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.dispatchEventToListeners(Events.RESIZE_UPDATE_XY, {startX, currentX, startY, currentY, shiftKey});
   }
 
-  private dragEnd(_event: MouseEvent): void {
+  #dragEnd(_event: MouseEvent): void {
     this.dispatchEventToListeners(Events.RESIZE_END);
-    delete this.startX;
-    delete this.startY;
+    this.#startX = undefined;
+    this.#startY = undefined;
   }
 }
 
@@ -161,35 +160,31 @@ export interface EventTypes {
 }
 
 export class SimpleResizerWidget extends ResizerWidget {
-  private isVerticalInternal: boolean;
-  constructor() {
-    super();
-    this.isVerticalInternal = true;
-  }
+  #isVertical = true;
 
   isVertical(): boolean {
-    return this.isVerticalInternal;
+    return this.#isVertical;
   }
 
   /**
    * Vertical widget resizes height (along y-axis).
    */
   setVertical(vertical: boolean): void {
-    this.isVerticalInternal = vertical;
+    this.#isVertical = vertical;
     this.updateElementCursors();
   }
 
   override cursor(): string {
-    return this.isVerticalInternal ? 'ns-resize' : 'ew-resize';
+    return this.#isVertical ? 'ns-resize' : 'ew-resize';
   }
 
   override sendDragStart(x: number, y: number): void {
-    const position = this.isVerticalInternal ? y : x;
+    const position = this.#isVertical ? y : x;
     this.dispatchEventToListeners(Events.RESIZE_START, {startPosition: position, currentPosition: position});
   }
 
   override sendDragMove(startX: number, currentX: number, startY: number, currentY: number, shiftKey: boolean): void {
-    if (this.isVerticalInternal) {
+    if (this.#isVertical) {
       this.dispatchEventToListeners(
           Events.RESIZE_UPDATE_POSITION, {startPosition: startY, currentPosition: currentY, shiftKey});
     } else {