chrome-devtools-frontend 1.0.927127 → 1.0.928589

package/front_end/core/sdk/OverlayModel.ts

@@ -52,96 +52,97 @@ export interface Hinge {
 }
 
 export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyApi.OverlayDispatcher {
-  private readonly domModel: DOMModel;
+  readonly #domModel: DOMModel;
   overlayAgent: ProtocolProxyApi.OverlayApi;
-  private readonly debuggerModel: DebuggerModel|null;
-  private inspectModeEnabledInternal: boolean;
-  private hideHighlightTimeout: number|null;
-  private defaultHighlighter: Highlighter;
-  private highlighter: Highlighter;
+  readonly #debuggerModel: DebuggerModel|null;
+  #inspectModeEnabledInternal: boolean;
+  #hideHighlightTimeout: number|null;
+  #defaultHighlighter: Highlighter;
+  #highlighter: Highlighter;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showPaintRectsSetting: Common.Settings.Setting<any>;
+  #showPaintRectsSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showLayoutShiftRegionsSetting: Common.Settings.Setting<any>;
+  #showLayoutShiftRegionsSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showAdHighlightsSetting: Common.Settings.Setting<any>;
+  #showAdHighlightsSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showDebugBordersSetting: Common.Settings.Setting<any>;
+  #showDebugBordersSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showFPSCounterSetting: Common.Settings.Setting<any>;
+  #showFPSCounterSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showScrollBottleneckRectsSetting: Common.Settings.Setting<any>;
+  #showScrollBottleneckRectsSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showHitTestBordersSetting: Common.Settings.Setting<any>;
+  #showHitTestBordersSetting: Common.Settings.Setting<any>;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private showWebVitalsSetting: Common.Settings.Setting<any>;
-  private registeredListeners: Common.EventTarget.EventDescriptor[];
-  private showViewportSizeOnResize: boolean;
-  private persistentHighlighter: OverlayPersistentHighlighter|null;
-  private readonly sourceOrderHighlighter: SourceOrderHighlighter;
-  private sourceOrderModeActiveInternal: boolean;
+  #showWebVitalsSetting: Common.Settings.Setting<any>;
+  #registeredListeners: Common.EventTarget.EventDescriptor[];
+  #showViewportSizeOnResize: boolean;
+  #persistentHighlighter: OverlayPersistentHighlighter|null;
+  readonly #sourceOrderHighlighter: SourceOrderHighlighter;
+  #sourceOrderModeActiveInternal: boolean;
 
   constructor(target: Target) {
     super(target);
-    this.domModel = (target.model(DOMModel) as DOMModel);
+    this.#domModel = (target.model(DOMModel) as DOMModel);
 
     target.registerOverlayDispatcher(this);
     this.overlayAgent = target.overlayAgent();
 
-    this.debuggerModel = target.model(DebuggerModel);
-    if (this.debuggerModel) {
+    this.#debuggerModel = target.model(DebuggerModel);
+    if (this.#debuggerModel) {
       Common.Settings.Settings.instance()
           .moduleSetting('disablePausedStateOverlay')
           .addChangeListener(this.updatePausedInDebuggerMessage, this);
-      this.debuggerModel.addEventListener(DebuggerModelEvents.DebuggerPaused, this.updatePausedInDebuggerMessage, this);
-      this.debuggerModel.addEventListener(
+      this.#debuggerModel.addEventListener(
+          DebuggerModelEvents.DebuggerPaused, this.updatePausedInDebuggerMessage, this);
+      this.#debuggerModel.addEventListener(
           DebuggerModelEvents.DebuggerResumed, this.updatePausedInDebuggerMessage, this);
       // TODO(dgozman): we should get DebuggerResumed on navigations instead of listening to GlobalObjectCleared.
-      this.debuggerModel.addEventListener(
+      this.#debuggerModel.addEventListener(
           DebuggerModelEvents.GlobalObjectCleared, this.updatePausedInDebuggerMessage, this);
     }
 
-    this.inspectModeEnabledInternal = false;
+    this.#inspectModeEnabledInternal = false;
 
-    this.hideHighlightTimeout = null;
-    this.defaultHighlighter = new DefaultHighlighter(this);
-    this.highlighter = this.defaultHighlighter;
+    this.#hideHighlightTimeout = null;
+    this.#defaultHighlighter = new DefaultHighlighter(this);
+    this.#highlighter = this.#defaultHighlighter;
 
-    this.showPaintRectsSetting = Common.Settings.Settings.instance().moduleSetting('showPaintRects');
-    this.showLayoutShiftRegionsSetting = Common.Settings.Settings.instance().moduleSetting('showLayoutShiftRegions');
-    this.showAdHighlightsSetting = Common.Settings.Settings.instance().moduleSetting('showAdHighlights');
-    this.showDebugBordersSetting = Common.Settings.Settings.instance().moduleSetting('showDebugBorders');
-    this.showFPSCounterSetting = Common.Settings.Settings.instance().moduleSetting('showFPSCounter');
-    this.showScrollBottleneckRectsSetting =
+    this.#showPaintRectsSetting = Common.Settings.Settings.instance().moduleSetting('showPaintRects');
+    this.#showLayoutShiftRegionsSetting = Common.Settings.Settings.instance().moduleSetting('showLayoutShiftRegions');
+    this.#showAdHighlightsSetting = Common.Settings.Settings.instance().moduleSetting('showAdHighlights');
+    this.#showDebugBordersSetting = Common.Settings.Settings.instance().moduleSetting('showDebugBorders');
+    this.#showFPSCounterSetting = Common.Settings.Settings.instance().moduleSetting('showFPSCounter');
+    this.#showScrollBottleneckRectsSetting =
         Common.Settings.Settings.instance().moduleSetting('showScrollBottleneckRects');
-    this.showHitTestBordersSetting = Common.Settings.Settings.instance().moduleSetting('showHitTestBorders');
-    this.showWebVitalsSetting = Common.Settings.Settings.instance().moduleSetting('showWebVitals');
+    this.#showHitTestBordersSetting = Common.Settings.Settings.instance().moduleSetting('showHitTestBorders');
+    this.#showWebVitalsSetting = Common.Settings.Settings.instance().moduleSetting('showWebVitals');
 
-    this.registeredListeners = [];
-    this.showViewportSizeOnResize = true;
+    this.#registeredListeners = [];
+    this.#showViewportSizeOnResize = true;
     if (!target.suspended()) {
       this.overlayAgent.invoke_enable();
       this.wireAgentToSettings();
     }
 
-    this.persistentHighlighter = new OverlayPersistentHighlighter(this);
-    this.domModel.addEventListener(DOMModelEvents.NodeRemoved, () => {
-      this.persistentHighlighter && this.persistentHighlighter.refreshHighlights();
+    this.#persistentHighlighter = new OverlayPersistentHighlighter(this);
+    this.#domModel.addEventListener(DOMModelEvents.NodeRemoved, () => {
+      this.#persistentHighlighter && this.#persistentHighlighter.refreshHighlights();
     });
-    this.domModel.addEventListener(DOMModelEvents.DocumentUpdated, () => {
-      this.persistentHighlighter && this.persistentHighlighter.hideAllInOverlay();
+    this.#domModel.addEventListener(DOMModelEvents.DocumentUpdated, () => {
+      this.#persistentHighlighter && this.#persistentHighlighter.hideAllInOverlay();
     });
 
-    this.sourceOrderHighlighter = new SourceOrderHighlighter(this);
-    this.sourceOrderModeActiveInternal = false;
+    this.#sourceOrderHighlighter = new SourceOrderHighlighter(this);
+    this.#sourceOrderModeActiveInternal = false;
   }
 
   static highlightObjectAsDOMNode(object: RemoteObject): void {
@@ -178,7 +179,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   getDOMModel(): DOMModel {
-    return this.domModel;
+    return this.#domModel;
   }
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -197,58 +198,59 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   private async wireAgentToSettings(): Promise<void> {
-    this.registeredListeners = [
-      this.showPaintRectsSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowPaintRects({result: this.showPaintRectsSetting.get()})),
-      this.showLayoutShiftRegionsSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowLayoutShiftRegions({result: this.showLayoutShiftRegionsSetting.get()})),
-      this.showAdHighlightsSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowAdHighlights({show: this.showAdHighlightsSetting.get()})),
-      this.showDebugBordersSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowDebugBorders({show: this.showDebugBordersSetting.get()})),
-      this.showFPSCounterSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowFPSCounter({show: this.showFPSCounterSetting.get()})),
-      this.showScrollBottleneckRectsSetting.addChangeListener(
+    this.#registeredListeners = [
+      this.#showPaintRectsSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowPaintRects({result: this.#showPaintRectsSetting.get()})),
+      this.#showLayoutShiftRegionsSetting.addChangeListener(
+          () =>
+              this.overlayAgent.invoke_setShowLayoutShiftRegions({result: this.#showLayoutShiftRegionsSetting.get()})),
+      this.#showAdHighlightsSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowAdHighlights({show: this.#showAdHighlightsSetting.get()})),
+      this.#showDebugBordersSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowDebugBorders({show: this.#showDebugBordersSetting.get()})),
+      this.#showFPSCounterSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowFPSCounter({show: this.#showFPSCounterSetting.get()})),
+      this.#showScrollBottleneckRectsSetting.addChangeListener(
           () => this.overlayAgent.invoke_setShowScrollBottleneckRects(
-              {show: this.showScrollBottleneckRectsSetting.get()})),
-      this.showHitTestBordersSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowHitTestBorders({show: this.showHitTestBordersSetting.get()})),
-      this.showWebVitalsSetting.addChangeListener(
-          () => this.overlayAgent.invoke_setShowWebVitals({show: this.showWebVitalsSetting.get()})),
+              {show: this.#showScrollBottleneckRectsSetting.get()})),
+      this.#showHitTestBordersSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowHitTestBorders({show: this.#showHitTestBordersSetting.get()})),
+      this.#showWebVitalsSetting.addChangeListener(
+          () => this.overlayAgent.invoke_setShowWebVitals({show: this.#showWebVitalsSetting.get()})),
     ];
 
-    if (this.showPaintRectsSetting.get()) {
+    if (this.#showPaintRectsSetting.get()) {
       this.overlayAgent.invoke_setShowPaintRects({result: true});
     }
-    if (this.showLayoutShiftRegionsSetting.get()) {
+    if (this.#showLayoutShiftRegionsSetting.get()) {
       this.overlayAgent.invoke_setShowLayoutShiftRegions({result: true});
     }
-    if (this.showAdHighlightsSetting.get()) {
+    if (this.#showAdHighlightsSetting.get()) {
       this.overlayAgent.invoke_setShowAdHighlights({show: true});
     }
-    if (this.showDebugBordersSetting.get()) {
+    if (this.#showDebugBordersSetting.get()) {
       this.overlayAgent.invoke_setShowDebugBorders({show: true});
     }
-    if (this.showFPSCounterSetting.get()) {
+    if (this.#showFPSCounterSetting.get()) {
       this.overlayAgent.invoke_setShowFPSCounter({show: true});
     }
-    if (this.showScrollBottleneckRectsSetting.get()) {
+    if (this.#showScrollBottleneckRectsSetting.get()) {
       this.overlayAgent.invoke_setShowScrollBottleneckRects({show: true});
     }
-    if (this.showHitTestBordersSetting.get()) {
+    if (this.#showHitTestBordersSetting.get()) {
       this.overlayAgent.invoke_setShowHitTestBorders({show: true});
     }
-    if (this.showWebVitalsSetting.get()) {
+    if (this.#showWebVitalsSetting.get()) {
       this.overlayAgent.invoke_setShowWebVitals({show: true});
     }
-    if (this.debuggerModel && this.debuggerModel.isPaused()) {
+    if (this.#debuggerModel && this.#debuggerModel.isPaused()) {
       this.updatePausedInDebuggerMessage();
     }
-    await this.overlayAgent.invoke_setShowViewportSizeOnResize({show: this.showViewportSizeOnResize});
+    await this.overlayAgent.invoke_setShowViewportSizeOnResize({show: this.#showViewportSizeOnResize});
   }
 
   async suspendModel(): Promise<void> {
-    Common.EventTarget.removeEventListeners(this.registeredListeners);
+    Common.EventTarget.removeEventListeners(this.#registeredListeners);
     await this.overlayAgent.invoke_disable();
   }
 
@@ -257,11 +259,11 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   setShowViewportSizeOnResize(show: boolean): void {
-    if (this.showViewportSizeOnResize === show) {
+    if (this.#showViewportSizeOnResize === show) {
       return;
     }
 
-    this.showViewportSizeOnResize = show;
+    this.#showViewportSizeOnResize = show;
     if (this.target().suspended()) {
       return;
     }
@@ -272,7 +274,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
     if (this.target().suspended()) {
       return;
     }
-    const message = this.debuggerModel && this.debuggerModel.isPaused() &&
+    const message = this.#debuggerModel && this.#debuggerModel.isPaused() &&
             !Common.Settings.Settings.instance().moduleSetting('disablePausedStateOverlay').get() ?
         i18nString(UIStrings.pausedInDebugger) :
         undefined;
@@ -280,36 +282,36 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   setHighlighter(highlighter: Highlighter|null): void {
-    this.highlighter = highlighter || this.defaultHighlighter;
+    this.#highlighter = highlighter || this.#defaultHighlighter;
   }
 
   async setInspectMode(mode: Protocol.Overlay.InspectMode, showDetailedTooltip: boolean|undefined = true):
       Promise<void> {
-    await this.domModel.requestDocument();
-    this.inspectModeEnabledInternal = mode !== Protocol.Overlay.InspectMode.None;
+    await this.#domModel.requestDocument();
+    this.#inspectModeEnabledInternal = mode !== Protocol.Overlay.InspectMode.None;
     this.dispatchEventToListeners(Events.InspectModeWillBeToggled, this);
-    this.highlighter.setInspectMode(mode, this.buildHighlightConfig('all', showDetailedTooltip));
+    this.#highlighter.setInspectMode(mode, this.buildHighlightConfig('all', showDetailedTooltip));
   }
 
   inspectModeEnabled(): boolean {
-    return this.inspectModeEnabledInternal;
+    return this.#inspectModeEnabledInternal;
   }
 
   highlightInOverlay(data: HighlightData, mode?: string, showInfo?: boolean): void {
-    if (this.sourceOrderModeActiveInternal) {
+    if (this.#sourceOrderModeActiveInternal) {
       // Return early if the source order is currently being shown the in the
       // overlay, so that it is not cleared by the highlight
       return;
     }
-    if (this.hideHighlightTimeout) {
-      clearTimeout(this.hideHighlightTimeout);
-      this.hideHighlightTimeout = null;
+    if (this.#hideHighlightTimeout) {
+      clearTimeout(this.#hideHighlightTimeout);
+      this.#hideHighlightTimeout = null;
     }
     const highlightConfig = this.buildHighlightConfig(mode);
     if (typeof showInfo !== 'undefined') {
       highlightConfig.showInfo = showInfo;
     }
-    this.highlighter.highlightInOverlay(data, highlightConfig);
+    this.#highlighter.highlightInOverlay(data, highlightConfig);
   }
 
   highlightInOverlayForTwoSeconds(data: HighlightData): void {
@@ -318,94 +320,94 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   highlightGridInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.highlightGridInOverlay(nodeId);
+    this.#persistentHighlighter.highlightGridInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentGridOverlayStateChanged, {nodeId, enabled: true});
   }
 
   isHighlightedGridInPersistentOverlay(nodeId: Protocol.DOM.NodeId): boolean {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return false;
     }
-    return this.persistentHighlighter.isGridHighlighted(nodeId);
+    return this.#persistentHighlighter.isGridHighlighted(nodeId);
   }
 
   hideGridInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.hideGridInOverlay(nodeId);
+    this.#persistentHighlighter.hideGridInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentGridOverlayStateChanged, {nodeId, enabled: false});
   }
 
   highlightScrollSnapInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.highlightScrollSnapInOverlay(nodeId);
+    this.#persistentHighlighter.highlightScrollSnapInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentScrollSnapOverlayStateChanged, {nodeId, enabled: true});
   }
 
   isHighlightedScrollSnapInPersistentOverlay(nodeId: Protocol.DOM.NodeId): boolean {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return false;
     }
-    return this.persistentHighlighter.isScrollSnapHighlighted(nodeId);
+    return this.#persistentHighlighter.isScrollSnapHighlighted(nodeId);
   }
 
   hideScrollSnapInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.hideScrollSnapInOverlay(nodeId);
+    this.#persistentHighlighter.hideScrollSnapInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentScrollSnapOverlayStateChanged, {nodeId, enabled: false});
   }
 
   highlightFlexContainerInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.highlightFlexInOverlay(nodeId);
+    this.#persistentHighlighter.highlightFlexInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentFlexContainerOverlayStateChanged, {nodeId, enabled: true});
   }
 
   isHighlightedFlexContainerInPersistentOverlay(nodeId: Protocol.DOM.NodeId): boolean {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return false;
     }
-    return this.persistentHighlighter.isFlexHighlighted(nodeId);
+    return this.#persistentHighlighter.isFlexHighlighted(nodeId);
   }
 
   hideFlexContainerInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.hideFlexInOverlay(nodeId);
+    this.#persistentHighlighter.hideFlexInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentFlexContainerOverlayStateChanged, {nodeId, enabled: false});
   }
 
   highlightContainerQueryInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.highlightContainerQueryInOverlay(nodeId);
+    this.#persistentHighlighter.highlightContainerQueryInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentContainerQueryOverlayStateChanged, {nodeId, enabled: true});
   }
 
   isHighlightedContainerQueryInPersistentOverlay(nodeId: Protocol.DOM.NodeId): boolean {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return false;
     }
-    return this.persistentHighlighter.isContainerQueryHighlighted(nodeId);
+    return this.#persistentHighlighter.isContainerQueryHighlighted(nodeId);
   }
 
   hideContainerQueryInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.hideContainerQueryInOverlay(nodeId);
+    this.#persistentHighlighter.hideContainerQueryInOverlay(nodeId);
     this.dispatchEventToListeners(Events.PersistentContainerQueryOverlayStateChanged, {nodeId, enabled: false});
   }
 
@@ -414,92 +416,92 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       parentOutlineColor: Common.Color.SourceOrderHighlight.ParentOutline.toProtocolRGBA(),
       childOutlineColor: Common.Color.SourceOrderHighlight.ChildOutline.toProtocolRGBA(),
     };
-    this.sourceOrderHighlighter.highlightSourceOrderInOverlay(node, sourceOrderConfig);
+    this.#sourceOrderHighlighter.highlightSourceOrderInOverlay(node, sourceOrderConfig);
   }
 
   colorOfGridInPersistentOverlay(nodeId: Protocol.DOM.NodeId): string|null {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return null;
     }
-    return this.persistentHighlighter.colorOfGrid(nodeId).asString(Common.Color.Format.HEX);
+    return this.#persistentHighlighter.colorOfGrid(nodeId).asString(Common.Color.Format.HEX);
   }
 
   setColorOfGridInPersistentOverlay(nodeId: Protocol.DOM.NodeId, colorStr: string): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
     const color = Common.Color.Color.parse(colorStr);
     if (!color) {
       return;
     }
-    this.persistentHighlighter.setColorOfGrid(nodeId, color);
-    this.persistentHighlighter.resetOverlay();
+    this.#persistentHighlighter.setColorOfGrid(nodeId, color);
+    this.#persistentHighlighter.resetOverlay();
   }
 
   colorOfFlexInPersistentOverlay(nodeId: Protocol.DOM.NodeId): string|null {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return null;
     }
-    return this.persistentHighlighter.colorOfFlex(nodeId).asString(Common.Color.Format.HEX);
+    return this.#persistentHighlighter.colorOfFlex(nodeId).asString(Common.Color.Format.HEX);
   }
 
   setColorOfFlexInPersistentOverlay(nodeId: Protocol.DOM.NodeId, colorStr: string): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
     const color = Common.Color.Color.parse(colorStr);
     if (!color) {
       return;
     }
-    this.persistentHighlighter.setColorOfFlex(nodeId, color);
-    this.persistentHighlighter.resetOverlay();
+    this.#persistentHighlighter.setColorOfFlex(nodeId, color);
+    this.#persistentHighlighter.resetOverlay();
   }
 
   hideSourceOrderInOverlay(): void {
-    this.sourceOrderHighlighter.hideSourceOrderHighlight();
+    this.#sourceOrderHighlighter.hideSourceOrderHighlight();
   }
 
   setSourceOrderActive(isActive: boolean): void {
-    this.sourceOrderModeActiveInternal = isActive;
+    this.#sourceOrderModeActiveInternal = isActive;
   }
 
   sourceOrderModeActive(): boolean {
-    return this.sourceOrderModeActiveInternal;
+    return this.#sourceOrderModeActiveInternal;
   }
 
   highlightIsolatedElementInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.highlightIsolatedElementInOverlay(nodeId);
+    this.#persistentHighlighter.highlightIsolatedElementInOverlay(nodeId);
   }
 
   hideIsolatedElementInPersistentOverlay(nodeId: Protocol.DOM.NodeId): void {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return;
     }
-    this.persistentHighlighter.hideIsolatedElementInOverlay(nodeId);
+    this.#persistentHighlighter.hideIsolatedElementInOverlay(nodeId);
   }
 
   isHighlightedIsolatedElementInPersistentOverlay(nodeId: Protocol.DOM.NodeId): boolean {
-    if (!this.persistentHighlighter) {
+    if (!this.#persistentHighlighter) {
       return false;
     }
-    return this.persistentHighlighter.isIsolatedElementHighlighted(nodeId);
+    return this.#persistentHighlighter.isIsolatedElementHighlighted(nodeId);
   }
 
   private delayedHideHighlight(delay: number): void {
-    if (this.hideHighlightTimeout === null) {
-      this.hideHighlightTimeout = window.setTimeout(() => this.highlightInOverlay({clear: true}), delay);
+    if (this.#hideHighlightTimeout === null) {
+      this.#hideHighlightTimeout = window.setTimeout(() => this.highlightInOverlay({clear: true}), delay);
     }
   }
 
   highlightFrame(frameId: Protocol.Page.FrameId): void {
-    if (this.hideHighlightTimeout) {
-      clearTimeout(this.hideHighlightTimeout);
-      this.hideHighlightTimeout = null;
+    if (this.#hideHighlightTimeout) {
+      clearTimeout(this.#hideHighlightTimeout);
+      this.#hideHighlightTimeout = null;
     }
-    this.highlighter.highlightFrame(frameId);
+    this.#highlighter.highlightFrame(frameId);
   }
 
   showHingeForDualScreen(hinge: Hinge|null): void {
@@ -749,7 +751,7 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   nodeHighlightRequested({nodeId}: Protocol.Overlay.NodeHighlightRequestedEvent): void {
-    const node = this.domModel.nodeForId(nodeId);
+    const node = this.#domModel.nodeForId(nodeId);
     if (node) {
       this.dispatchEventToListeners(Events.HighlightNodeRequested, node);
     }
@@ -827,9 +829,9 @@ export interface Highlighter {
 }
 
 class DefaultHighlighter implements Highlighter {
-  private readonly model: OverlayModel;
+  readonly #model: OverlayModel;
   constructor(model: OverlayModel) {
-    this.model = model;
+    this.#model = model;
   }
 
   highlightInOverlay(data: HighlightData, highlightConfig: Protocol.Overlay.HighlightConfig): void {
@@ -839,20 +841,20 @@ class DefaultHighlighter implements Highlighter {
     const backendNodeId = deferredNode ? deferredNode.backendNodeId() : undefined;
     const objectId = object ? object.objectId : undefined;
     if (nodeId || backendNodeId || objectId) {
-      this.model.target().overlayAgent().invoke_highlightNode(
+      this.#model.target().overlayAgent().invoke_highlightNode(
           {highlightConfig, nodeId, backendNodeId, objectId, selector: selectorList});
     } else {
-      this.model.target().overlayAgent().invoke_hideHighlight();
+      this.#model.target().overlayAgent().invoke_hideHighlight();
     }
   }
 
   async setInspectMode(mode: Protocol.Overlay.InspectMode, highlightConfig: Protocol.Overlay.HighlightConfig):
       Promise<void> {
-    await this.model.target().overlayAgent().invoke_setInspectMode({mode, highlightConfig});
+    await this.#model.target().overlayAgent().invoke_setInspectMode({mode, highlightConfig});
   }
 
   highlightFrame(frameId: Protocol.Page.FrameId): void {
-    this.model.target().overlayAgent().invoke_highlightFrame({
+    this.#model.target().overlayAgent().invoke_highlightFrame({
       frameId,
       contentColor: Common.Color.PageHighlight.Content.toProtocolRGBA(),
       contentOutlineColor: Common.Color.PageHighlight.ContentOutline.toProtocolRGBA(),
@@ -861,21 +863,21 @@ class DefaultHighlighter implements Highlighter {
 }
 
 export class SourceOrderHighlighter {
-  private readonly model: OverlayModel;
+  readonly #model: OverlayModel;
   constructor(model: OverlayModel) {
-    this.model = model;
+    this.#model = model;
   }
 
   highlightSourceOrderInOverlay(node: DOMNode, sourceOrderConfig: Protocol.Overlay.SourceOrderConfig): void {
-    this.model.setSourceOrderActive(true);
-    this.model.setShowViewportSizeOnResize(false);
-    this.model.getOverlayAgent().invoke_highlightSourceOrder({sourceOrderConfig, nodeId: node.id});
+    this.#model.setSourceOrderActive(true);
+    this.#model.setShowViewportSizeOnResize(false);
+    this.#model.getOverlayAgent().invoke_highlightSourceOrder({sourceOrderConfig, nodeId: node.id});
   }
 
   hideSourceOrderHighlight(): void {
-    this.model.setSourceOrderActive(false);
-    this.model.setShowViewportSizeOnResize(true);
-    this.model.clearHighlight();
+    this.#model.setSourceOrderActive(false);
+    this.#model.setShowViewportSizeOnResize(true);
+    this.#model.clearHighlight();
   }
 }