chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -278,7 +278,7 @@ export class EventListenersTreeElement extends UI.TreeOutline.TreeElement {
 }
 
 export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
-  private eventListenerInternal: SDK.DOMDebuggerModel.EventListener;
+  #eventListener: SDK.DOMDebuggerModel.EventListener;
   editable: boolean;
   private readonly changeCallback: () => void;
   private valueTitle?: Element;
@@ -286,7 +286,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       eventListener: SDK.DOMDebuggerModel.EventListener, object: SDK.RemoteObject.RemoteObject,
       linkifier: Components.Linkifier.Linkifier, changeCallback: () => void) {
     super('', true);
-    this.eventListenerInternal = eventListener;
+    this.#eventListener = eventListener;
     this.editable = false;
     this.setTitle(object, linkifier);
     this.changeCallback = changeCallback;
@@ -294,7 +294,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
   override async onpopulate(): Promise<void> {
     const properties = [];
-    const eventListener = this.eventListenerInternal;
+    const eventListener = this.#eventListener;
     const runtimeModel = eventListener.domDebuggerModel().runtimeModel();
     properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture()));
     properties.push(runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive()));
@@ -314,7 +314,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
     this.valueTitle = propertyValue.element;
     title.appendChild(this.valueTitle);
 
-    if (this.eventListenerInternal.canRemove()) {
+    if (this.#eventListener.canRemove()) {
       const deleteButton = new Buttons.Button.Button();
       deleteButton.data = {
         variant: Buttons.Button.Variant.ICON,
@@ -330,7 +330,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       title.appendChild(deleteButton);
     }
 
-    if (this.eventListenerInternal.isScrollBlockingType() && this.eventListenerInternal.canTogglePassive()) {
+    if (this.#eventListener.isScrollBlockingType() && this.#eventListener.canTogglePassive()) {
       const passiveButton = title.createChild('button', 'event-listener-button');
       passiveButton.textContent = i18nString(UIStrings.togglePassive);
       passiveButton.setAttribute('jslog', `${VisualLogging.action('passive').track({click: true})}`);
@@ -343,8 +343,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
     }
 
     const subtitle = title.createChild('span', 'event-listener-tree-subtitle');
-    const linkElement =
-        linkifier.linkifyRawLocation(this.eventListenerInternal.location(), this.eventListenerInternal.sourceURL());
+    const linkElement = linkifier.linkifyRawLocation(this.#eventListener.location(), this.#eventListener.sourceURL());
     subtitle.appendChild(linkElement);
 
     this.listItemElement.addEventListener('contextmenu', event => {
@@ -359,10 +358,10 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       }
       menu.defaultSection().appendItem(
           i18nString(UIStrings.deleteEventListener), this.removeListener.bind(this),
-          {disabled: !this.eventListenerInternal.canRemove(), jslogContext: 'delete-event-listener'});
+          {disabled: !this.#eventListener.canRemove(), jslogContext: 'delete-event-listener'});
       menu.defaultSection().appendCheckboxItem(i18nString(UIStrings.passive), this.togglePassiveListener.bind(this), {
-        checked: this.eventListenerInternal.passive(),
-        disabled: !this.eventListenerInternal.canTogglePassive(),
+        checked: this.#eventListener.passive(),
+        disabled: !this.#eventListener.canTogglePassive(),
         jslogContext: 'passive',
       });
       void menu.show();
@@ -371,11 +370,11 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
 
   private removeListener(): void {
     this.removeListenerBar();
-    void this.eventListenerInternal.remove();
+    void this.#eventListener.remove();
   }
 
   private togglePassiveListener(): void {
-    void this.eventListenerInternal.togglePassive().then(() => this.changeCallback());
+    void this.#eventListener.togglePassive().then(() => this.changeCallback());
   }
 
   private removeListenerBar(): void {
@@ -397,7 +396,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
   }
 
   eventListener(): SDK.DOMDebuggerModel.EventListener {
-    return this.eventListenerInternal;
+    return this.#eventListener;
   }
 
   override onenter(): boolean {
@@ -410,7 +409,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
   }
 
   override ondelete(): boolean {
-    if (this.eventListenerInternal.canRemove()) {
+    if (this.#eventListener.canRemove()) {
       this.removeListener();
       return true;
     }

package/front_end/panels/layer_viewer/LayerTreeOutline.ts

@@ -284,12 +284,12 @@ export interface EventTypes {
 export class LayerTreeElement extends UI.TreeOutline.TreeElement {
   // Watch out: This is different from treeOutline that
   // LayerTreeElement inherits from UI.TreeOutline.TreeElement.
-  treeOutlineInternal: LayerTreeOutline;
+  #treeOutline: LayerTreeOutline;
   layer: SDK.LayerTreeBase.Layer;
 
   constructor(tree: LayerTreeOutline, layer: SDK.LayerTreeBase.Layer) {
     super();
-    this.treeOutlineInternal = tree;
+    this.#treeOutline = tree;
     this.layer = layer;
     layerToTreeElement.set(layer, this);
     this.update();
@@ -306,7 +306,7 @@ export class LayerTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onselect(): boolean {
-    this.treeOutlineInternal.selectedNodeChanged(this);
+    this.#treeOutline.selectedNodeChanged(this);
     return false;
   }
 

package/front_end/panels/layer_viewer/LayerViewHost.ts

@@ -24,11 +24,11 @@ export abstract class LayerView {
 
 export class Selection {
   readonly typeInternal: Type;
-  private readonly layerInternal: SDK.LayerTreeBase.Layer;
+  readonly #layer: SDK.LayerTreeBase.Layer;
 
   constructor(type: Type, layer: SDK.LayerTreeBase.Layer) {
     this.typeInternal = type;
-    this.layerInternal = layer;
+    this.#layer = layer;
   }
 
   static isEqual(a: Selection|null, b: Selection|null): boolean {
@@ -40,7 +40,7 @@ export class Selection {
   }
 
   layer(): SDK.LayerTreeBase.Layer {
-    return this.layerInternal;
+    return this.#layer;
   }
 
   isEqual(_other: Selection): boolean {
@@ -79,19 +79,19 @@ export class ScrollRectSelection extends Selection {
 }
 
 export class SnapshotSelection extends Selection {
-  private readonly snapshotInternal: SDK.PaintProfiler.SnapshotWithRect;
+  readonly #snapshot: SDK.PaintProfiler.SnapshotWithRect;
   constructor(layer: SDK.LayerTreeBase.Layer, snapshot: SDK.PaintProfiler.SnapshotWithRect) {
     super(Type.SNAPSHOT, layer);
-    this.snapshotInternal = snapshot;
+    this.#snapshot = snapshot;
   }
 
   override isEqual(other: Selection): boolean {
     return other.typeInternal === Type.SNAPSHOT && this.layer().id() === other.layer().id() &&
-        this.snapshotInternal === (other as SnapshotSelection).snapshotInternal;
+        this.#snapshot === (other as SnapshotSelection).#snapshot;
   }
 
   snapshot(): SDK.PaintProfiler.SnapshotWithRect {
-    return this.snapshotInternal;
+    return this.#snapshot;
   }
 }
 
@@ -99,13 +99,13 @@ export class LayerViewHost {
   private readonly views: LayerView[];
   private selectedObject: Selection|null;
   private hoveredObject: Selection|null;
-  private showInternalLayersSettingInternal: Common.Settings.Setting<boolean>;
+  #showInternalLayersSetting: Common.Settings.Setting<boolean>;
   private snapshotLayers: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
   constructor() {
     this.views = [];
     this.selectedObject = null;
     this.hoveredObject = null;
-    this.showInternalLayersSettingInternal =
+    this.#showInternalLayersSetting =
         Common.Settings.Settings.instance().createSetting('layers-show-internal-layers', false);
     this.snapshotLayers = new Map();
   }
@@ -168,8 +168,8 @@ export class LayerViewHost {
   showContextMenu(contextMenu: UI.ContextMenu.ContextMenu, selection: Selection|null): void {
     contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.showInternalLayers), this.toggleShowInternalLayers.bind(this), {
-          checked: this.showInternalLayersSettingInternal.get(),
-          jslogContext: this.showInternalLayersSettingInternal.name,
+          checked: this.#showInternalLayersSetting.get(),
+          jslogContext: this.#showInternalLayersSetting.name,
         });
     const node = selection?.layer()?.nodeForSelfOrAncestor();
     if (node) {
@@ -179,11 +179,11 @@ export class LayerViewHost {
   }
 
   showInternalLayersSetting(): Common.Settings.Setting<boolean> {
-    return this.showInternalLayersSettingInternal;
+    return this.#showInternalLayersSetting;
   }
 
   private toggleShowInternalLayers(): void {
-    this.showInternalLayersSettingInternal.set(!this.showInternalLayersSettingInternal.get());
+    this.#showInternalLayersSetting.set(!this.#showInternalLayersSetting.get());
   }
 
   private toggleNodeHighlight(node: SDK.DOMModel.DOMNode|null): void {

package/front_end/panels/layer_viewer/PaintProfilerView.ts

@@ -84,7 +84,7 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
   private readonly showImageCallback: (arg0?: string|undefined) => void;
   private canvas: HTMLCanvasElement;
   private context: CanvasRenderingContext2D;
-  private readonly selectionWindowInternal: PerfUI.OverviewGrid.Window;
+  readonly #selectionWindow: PerfUI.OverviewGrid.Window;
   private readonly innerBarWidth: number;
   private minBarHeight: number;
   private readonly barPaddingWidth: number;
@@ -114,9 +114,8 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     this.showImageCallback = showImageCallback;
     this.canvas = this.canvasContainer.createChild('canvas', 'fill');
     this.context = this.canvas.getContext('2d') as CanvasRenderingContext2D;
-    this.selectionWindowInternal = new PerfUI.OverviewGrid.Window(this.canvasContainer);
-    this.selectionWindowInternal.addEventListener(
-        PerfUI.OverviewGrid.Events.WINDOW_CHANGED, this.onWindowChanged, this);
+    this.#selectionWindow = new PerfUI.OverviewGrid.Window(this.canvasContainer);
+    this.#selectionWindow.addEventListener(PerfUI.OverviewGrid.Events.WINDOW_CHANGED, this.onWindowChanged, this);
 
     this.innerBarWidth = 4 * window.devicePixelRatio;
     this.minBarHeight = window.devicePixelRatio;
@@ -220,11 +219,11 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     if (!snapshot) {
       this.update();
       this.populatePieChart(0, []);
-      this.selectionWindowInternal.setResizeEnabled(false);
+      this.#selectionWindow.setResizeEnabled(false);
       return;
     }
 
-    this.selectionWindowInternal.setResizeEnabled(true);
+    this.#selectionWindow.setResizeEnabled(true);
     this.progressBanner.classList.remove('hidden');
     this.updateImage();
 
@@ -373,8 +372,8 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
       return null;
     }
 
-    const screenLeft = (this.selectionWindowInternal.windowLeftRatio || 0) * this.canvas.width;
-    const screenRight = (this.selectionWindowInternal.windowRightRatio || 0) * this.canvas.width;
+    const screenLeft = (this.#selectionWindow.windowLeftRatio || 0) * this.canvas.width;
+    const screenRight = (this.#selectionWindow.windowRightRatio || 0) * this.canvas.width;
     const barLeft = Math.floor(screenLeft / this.outerBarWidth);
     const barRight = Math.floor((screenRight + this.innerBarWidth - this.barPaddingWidth / 2) / this.outerBarWidth);
     const stepLeft = Platform.NumberUtilities.clamp(barLeft * this.samplesPerBar, 0, this.log.length - 1);
@@ -411,8 +410,8 @@ export class PaintProfilerView extends Common.ObjectWrapper.eventMixin<EventType
     }
     this.snapshot = null;
     this.profiles = null;
-    this.selectionWindowInternal.reset();
-    this.selectionWindowInternal.setResizeEnabled(false);
+    this.#selectionWindow.reset();
+    this.#selectionWindow.setResizeEnabled(false);
   }
 }
 

package/front_end/panels/layer_viewer/TransformController.ts

@@ -29,11 +29,11 @@ const str_ = i18n.i18n.registerUIStrings('panels/layer_viewer/TransformControlle
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TransformController extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private mode!: Modes;
-  private scaleInternal: number;
-  private offsetXInternal: number;
-  private offsetYInternal: number;
-  private rotateXInternal: number;
-  private rotateYInternal: number;
+  #scale: number;
+  #offsetX: number;
+  #offsetY: number;
+  #rotateX: number;
+  #rotateY: number;
   private oldRotateX: number;
   private oldRotateY: number;
   private originX: number;
@@ -50,11 +50,11 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
    */
   constructor(element: HTMLElement, disableRotate?: boolean, preventDefaultOnMouseDown = true) {
     super();
-    this.scaleInternal = 1;
-    this.offsetXInternal = 0;
-    this.offsetYInternal = 0;
-    this.rotateXInternal = 0;
-    this.rotateYInternal = 0;
+    this.#scale = 1;
+    this.#offsetX = 0;
+    this.#offsetY = 0;
+    this.#rotateX = 0;
+    this.#rotateY = 0;
     this.oldRotateX = 0;
     this.oldRotateY = 0;
     this.originX = 0;
@@ -128,11 +128,11 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
   }
 
   private reset(): void {
-    this.scaleInternal = 1;
-    this.offsetXInternal = 0;
-    this.offsetYInternal = 0;
-    this.rotateXInternal = 0;
-    this.rotateYInternal = 0;
+    this.#scale = 1;
+    this.#offsetX = 0;
+    this.#offsetY = 0;
+    this.#rotateX = 0;
+    this.#rotateY = 0;
   }
 
   private setMode(mode: Modes): void {
@@ -161,52 +161,51 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
   setScaleConstraints(minScale: number, maxScale: number): void {
     this.minScale = minScale;
     this.maxScale = maxScale;
-    this.scaleInternal = Platform.NumberUtilities.clamp(this.scaleInternal, minScale, maxScale);
+    this.#scale = Platform.NumberUtilities.clamp(this.#scale, minScale, maxScale);
   }
 
   clampOffsets(minX: number, maxX: number, minY: number, maxY: number): void {
-    this.offsetXInternal = Platform.NumberUtilities.clamp(this.offsetXInternal, minX, maxX);
-    this.offsetYInternal = Platform.NumberUtilities.clamp(this.offsetYInternal, minY, maxY);
+    this.#offsetX = Platform.NumberUtilities.clamp(this.#offsetX, minX, maxX);
+    this.#offsetY = Platform.NumberUtilities.clamp(this.#offsetY, minY, maxY);
   }
 
   scale(): number {
-    return this.scaleInternal;
+    return this.#scale;
   }
 
   offsetX(): number {
-    return this.offsetXInternal;
+    return this.#offsetX;
   }
 
   offsetY(): number {
-    return this.offsetYInternal;
+    return this.#offsetY;
   }
 
   rotateX(): number {
-    return this.rotateXInternal;
+    return this.#rotateX;
   }
 
   rotateY(): number {
-    return this.rotateYInternal;
+    return this.#rotateY;
   }
 
   private onScale(scaleFactor: number, x: number, y: number): void {
-    scaleFactor = Platform.NumberUtilities.clamp(this.scaleInternal * scaleFactor, this.minScale, this.maxScale) /
-        this.scaleInternal;
-    this.scaleInternal *= scaleFactor;
-    this.offsetXInternal -= (x - this.offsetXInternal) * (scaleFactor - 1);
-    this.offsetYInternal -= (y - this.offsetYInternal) * (scaleFactor - 1);
+    scaleFactor = Platform.NumberUtilities.clamp(this.#scale * scaleFactor, this.minScale, this.maxScale) / this.#scale;
+    this.#scale *= scaleFactor;
+    this.#offsetX -= (x - this.#offsetX) * (scaleFactor - 1);
+    this.#offsetY -= (y - this.#offsetY) * (scaleFactor - 1);
     this.postChangeEvent();
   }
 
   private onPan(offsetX: number, offsetY: number): void {
-    this.offsetXInternal += offsetX;
-    this.offsetYInternal += offsetY;
+    this.#offsetX += offsetX;
+    this.#offsetY += offsetY;
     this.postChangeEvent();
   }
 
   private onRotate(rotateX: number, rotateY: number): void {
-    this.rotateXInternal = rotateX;
-    this.rotateYInternal = rotateY;
+    this.#rotateX = rotateX;
+    this.#rotateY = rotateY;
     this.postChangeEvent();
   }
 
@@ -222,8 +221,7 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
     if (this.mode === Modes.ROTATE) {
       // Sic! onRotate treats X and Y as "rotate around X" and "rotate around Y", so swap X/Y multipliers.
       this.onRotate(
-          this.rotateXInternal + yMultiplier * rotateStepInDegrees,
-          this.rotateYInternal + xMultiplier * rotateStepInDegrees);
+          this.#rotateX + yMultiplier * rotateStepInDegrees, this.#rotateY + xMultiplier * rotateStepInDegrees);
     } else {
       this.onPan(xMultiplier * panStepInPixels, yMultiplier * panStepInPixels);
     }
@@ -259,8 +257,8 @@ export class TransformController extends Common.ObjectWrapper.ObjectWrapper<Even
     this.element.focus();
     this.originX = event.clientX;
     this.originY = event.clientY;
-    this.oldRotateX = this.rotateXInternal;
-    this.oldRotateY = this.rotateYInternal;
+    this.oldRotateX = this.#rotateX;
+    this.oldRotateY = this.#rotateY;
     return true;
   }
 

package/front_end/panels/layers/LayerTreeModel.ts

@@ -37,7 +37,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
   readonly layerTreeAgent: ProtocolProxyApi.LayerTreeApi;
   readonly paintProfilerModel: SDK.PaintProfiler.PaintProfilerModel;
-  private layerTreeInternal: SDK.LayerTreeBase.LayerTreeBase|null;
+  #layerTree: SDK.LayerTreeBase.LayerTreeBase|null;
   private readonly throttler: Common.Throttler.Throttler;
   private enabled?: boolean;
   private lastPaintRectByLayerId?: Map<string, Protocol.DOM.Rect>;
@@ -53,7 +53,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
       resourceTreeModel.addEventListener(
           SDK.ResourceTreeModel.Events.PrimaryPageChanged, this.onPrimaryPageChanged, this);
     }
-    this.layerTreeInternal = null;
+    this.#layerTree = null;
     this.throttler = new Common.Throttler.Throttler(20);
   }
 
@@ -75,14 +75,14 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
 
   private async forceEnable(): Promise<void> {
     this.lastPaintRectByLayerId = new Map();
-    if (!this.layerTreeInternal) {
-      this.layerTreeInternal = new AgentLayerTree(this);
+    if (!this.#layerTree) {
+      this.#layerTree = new AgentLayerTree(this);
     }
     await this.layerTreeAgent.invoke_enable();
   }
 
   layerTree(): SDK.LayerTreeBase.LayerTreeBase|null {
-    return this.layerTreeInternal;
+    return this.#layerTree;
   }
 
   async layerTreeChanged(layers: Protocol.LayerTree.Layer[]|null): Promise<void> {
@@ -93,7 +93,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   private async innerSetLayers(layers: Protocol.LayerTree.Layer[]|null): Promise<void> {
-    const layerTree = this.layerTreeInternal as AgentLayerTree;
+    const layerTree = this.#layerTree as AgentLayerTree;
 
     await layerTree.setLayers(layers);
 
@@ -118,7 +118,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
     if (!this.enabled) {
       return;
     }
-    const layerTree = this.layerTreeInternal as AgentLayerTree;
+    const layerTree = this.#layerTree as AgentLayerTree;
     const layer = layerTree.layerById(layerId) as AgentLayer;
     if (!layer) {
       if (!this.lastPaintRectByLayerId) {
@@ -133,7 +133,7 @@ export class LayerTreeModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 
   private onPrimaryPageChanged(): void {
-    this.layerTreeInternal = null;
+    this.#layerTree = null;
     if (this.enabled) {
       void this.forceEnable();
     }
@@ -227,16 +227,17 @@ export class AgentLayerTree extends SDK.LayerTreeBase.LayerTreeBase {
 }
 
 export class AgentLayer implements SDK.LayerTreeBase.Layer {
+  // Used in Web tests
   private scrollRectsInternal!: Protocol.LayerTree.ScrollRect[];
-  private quadInternal!: number[];
-  private childrenInternal!: AgentLayer[];
-  private parentInternal!: AgentLayer|null;
+  #quad!: number[];
+  #children!: AgentLayer[];
+  #parent!: AgentLayer|null;
   private layerPayload!: Protocol.LayerTree.Layer;
   private layerTreeModel: LayerTreeModel;
-  private nodeInternal?: SDK.DOMModel.DOMNode|null;
-  lastPaintRectInternal?: Protocol.DOM.Rect;
-  private paintCountInternal?: number;
-  private stickyPositionConstraintInternal?: SDK.LayerTreeBase.StickyPositionConstraint|null;
+  #node?: SDK.DOMModel.DOMNode|null;
+  #lastPaintRect?: Protocol.DOM.Rect;
+  #paintCount?: number;
+  #stickyPositionConstraint?: SDK.LayerTreeBase.StickyPositionConstraint|null;
   constructor(layerTreeModel: LayerTreeModel, layerPayload: Protocol.LayerTree.Layer) {
     this.layerTreeModel = layerTreeModel;
     this.reset(layerPayload);
@@ -251,7 +252,7 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   parent(): SDK.LayerTreeBase.Layer|null {
-    return this.parentInternal;
+    return this.#parent;
   }
 
   isRoot(): boolean {
@@ -259,31 +260,31 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   children(): SDK.LayerTreeBase.Layer[] {
-    return this.childrenInternal;
+    return this.#children;
   }
 
   addChild(childParam: SDK.LayerTreeBase.Layer): void {
     const child = childParam as AgentLayer;
-    if (child.parentInternal) {
+    if (child.#parent) {
       console.assert(false, 'Child already has a parent');
     }
-    this.childrenInternal.push(child);
-    child.parentInternal = this;
+    this.#children.push(child);
+    child.#parent = this;
   }
 
   setNode(node: SDK.DOMModel.DOMNode|null): void {
-    this.nodeInternal = node;
+    this.#node = node;
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.nodeInternal || null;
+    return this.#node || null;
   }
 
   nodeForSelfOrAncestor(): SDK.DOMModel.DOMNode|null {
     let layer: (AgentLayer|null)|this = this;
-    for (; layer; layer = layer.parentInternal) {
-      if (layer.nodeInternal) {
-        return layer.nodeInternal;
+    for (; layer; layer = layer.#parent) {
+      if (layer.#node) {
+        return layer.#node;
       }
     }
     return null;
@@ -310,7 +311,7 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   quad(): number[] {
-    return this.quadInternal;
+    return this.#quad;
   }
 
   anchorPoint(): number[] {
@@ -326,15 +327,15 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   paintCount(): number {
-    return this.paintCountInternal || this.layerPayload.paintCount;
+    return this.#paintCount || this.layerPayload.paintCount;
   }
 
   lastPaintRect(): Protocol.DOM.Rect|null {
-    return this.lastPaintRectInternal || null;
+    return this.#lastPaintRect || null;
   }
 
   setLastPaintRect(lastPaintRect?: Protocol.DOM.Rect): void {
-    this.lastPaintRectInternal = lastPaintRect;
+    this.#lastPaintRect = lastPaintRect;
   }
 
   scrollRects(): Protocol.LayerTree.ScrollRect[] {
@@ -342,7 +343,7 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   stickyPositionConstraint(): SDK.LayerTreeBase.StickyPositionConstraint|null {
-    return this.stickyPositionConstraintInternal || null;
+    return this.#stickyPositionConstraint || null;
   }
 
   async requestCompositingReasons(): Promise<string[]> {
@@ -375,18 +376,18 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
   }
 
   didPaint(rect: Protocol.DOM.Rect): void {
-    this.lastPaintRectInternal = rect;
-    this.paintCountInternal = this.paintCount() + 1;
+    this.#lastPaintRect = rect;
+    this.#paintCount = this.paintCount() + 1;
   }
 
   reset(layerPayload: Protocol.LayerTree.Layer): void {
-    this.nodeInternal = null;
-    this.childrenInternal = [];
-    this.parentInternal = null;
-    this.paintCountInternal = 0;
+    this.#node = null;
+    this.#children = [];
+    this.#parent = null;
+    this.#paintCount = 0;
     this.layerPayload = layerPayload;
     this.scrollRectsInternal = this.layerPayload.scrollRects || [];
-    this.stickyPositionConstraintInternal = this.layerPayload.stickyPositionConstraint ?
+    this.#stickyPositionConstraint = this.layerPayload.stickyPositionConstraint ?
         new SDK.LayerTreeBase.StickyPositionConstraint(
             this.layerTreeModel.layerTree(), this.layerPayload.stickyPositionConstraint) :
         null;
@@ -423,19 +424,19 @@ export class AgentLayer implements SDK.LayerTreeBase.Layer {
 
   calculateQuad(parentTransform: DOMMatrix): void {
     const matrix = this.calculateTransformToViewport(parentTransform);
-    this.quadInternal = [];
+    this.#quad = [];
     const vertices = this.createVertexArrayForRect(this.layerPayload.width, this.layerPayload.height);
     for (let i = 0; i < 4; ++i) {
       const point = Geometry.multiplyVectorByMatrixAndNormalize(
           new Geometry.Vector(vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]), matrix);
-      this.quadInternal.push(point.x, point.y);
+      this.#quad.push(point.x, point.y);
     }
 
     function calculateQuadForLayer(layer: AgentLayer): void {
       layer.calculateQuad(matrix);
     }
 
-    this.childrenInternal.forEach(calculateQuadForLayer);
+    this.#children.forEach(calculateQuadForLayer);
   }
 }