chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/ui/legacy/ViewManager.ts

@@ -583,16 +583,16 @@ const expandableContainerForView = new WeakMap<View, ExpandableContainerWidget>(
 class Location {
   protected readonly manager: ViewManager;
   private readonly revealCallback: (() => void)|undefined;
-  private readonly widgetInternal: Widget;
+  readonly #widget: Widget;
 
   constructor(manager: ViewManager, widget: Widget, revealCallback?: (() => void)) {
     this.manager = manager;
     this.revealCallback = revealCallback;
-    this.widgetInternal = widget;
+    this.#widget = widget;
   }
 
   widget(): Widget {
-    return this.widgetInternal;
+    return this.#widget;
   }
 
   reveal(): void {
@@ -623,7 +623,7 @@ type CloseableTabSetting = Record<string, boolean>;
 type TabOrderSetting = Record<string, number>;
 
 class TabbedLocation extends Location implements TabbedViewLocation {
-  private tabbedPaneInternal: TabbedPane;
+  #tabbedPane: TabbedPane;
   private readonly location: string;
   private readonly allowReorder: boolean|undefined;
   private readonly closeableTabSetting: Common.Settings.Setting<CloseableTabSetting>;
@@ -642,13 +642,12 @@ class TabbedLocation extends Location implements TabbedViewLocation {
 
     super(manager, tabbedPane, revealCallback);
     this.location = location;
-    this.tabbedPaneInternal = tabbedPane;
+    this.#tabbedPane = tabbedPane;
     this.allowReorder = allowReorder;
 
-    this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
-    this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabClosed, this.tabClosed, this);
-    this.tabbedPaneInternal.addEventListener(
-        TabbedPaneEvents.PaneVisibilityChanged, this.tabbedPaneVisibilityChanged, this);
+    this.#tabbedPane.addEventListener(TabbedPaneEvents.TabSelected, this.tabSelected, this);
+    this.#tabbedPane.addEventListener(TabbedPaneEvents.TabClosed, this.tabClosed, this);
+    this.#tabbedPane.addEventListener(TabbedPaneEvents.PaneVisibilityChanged, this.tabbedPaneVisibilityChanged, this);
 
     this.closeableTabSetting = Common.Settings.Settings.instance().createSetting('closeable-tabs', {});
     // As we give tabs the capability to be closed we also need to add them to the setting so they are still open
@@ -656,7 +655,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     this.setOrUpdateCloseableTabsSetting();
 
     this.tabOrderSetting = Common.Settings.Settings.instance().createSetting(location + '-tab-order', {});
-    this.tabbedPaneInternal.addEventListener(TabbedPaneEvents.TabOrderChanged, this.persistTabOrder, this);
+    this.#tabbedPane.addEventListener(TabbedPaneEvents.TabOrderChanged, this.persistTabOrder, this);
     if (restoreSelection) {
       this.lastSelectedTabSetting = Common.Settings.Settings.instance().createSetting(location + '-selected-tab', '');
     }
@@ -678,17 +677,17 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   }
 
   override widget(): Widget {
-    return this.tabbedPaneInternal;
+    return this.#tabbedPane;
   }
 
   tabbedPane(): TabbedPane {
-    return this.tabbedPaneInternal;
+    return this.#tabbedPane;
   }
 
   enableMoreTabsButton(): ToolbarMenuButton {
     const moreTabsButton = new ToolbarMenuButton(
         this.appendTabsToMenu.bind(this), /* isIconDropdown */ true, undefined, 'more-tabs', 'dots-vertical');
-    this.tabbedPaneInternal.leftToolbar().appendToolbarItem(moreTabsButton);
+    this.#tabbedPane.leftToolbar().appendToolbarItem(moreTabsButton);
     return moreTabsButton;
   }
 
@@ -720,9 +719,9 @@ class TabbedLocation extends Location implements TabbedViewLocation {
 
     // If a default tab was provided we open or select it
     if (this.defaultTab) {
-      if (this.tabbedPaneInternal.hasTab(this.defaultTab)) {
+      if (this.#tabbedPane.hasTab(this.defaultTab)) {
         // If the tabbed pane already has the tab we just have to select it
-        this.tabbedPaneInternal.selectTab(this.defaultTab);
+        this.#tabbedPane.selectTab(this.defaultTab);
       } else {
         // If the tab is not present already it can be because:
         // it doesn't correspond to this tabbed location
@@ -733,8 +732,8 @@ class TabbedLocation extends Location implements TabbedViewLocation {
           void this.showView(view);
         }
       }
-    } else if (this.lastSelectedTabSetting && this.tabbedPaneInternal.hasTab(this.lastSelectedTabSetting.get())) {
-      this.tabbedPaneInternal.selectTab(this.lastSelectedTabSetting.get());
+    } else if (this.lastSelectedTabSetting && this.#tabbedPane.hasTab(this.lastSelectedTabSetting.get())) {
+      this.#tabbedPane.selectTab(this.lastSelectedTabSetting.get());
     }
   }
 
@@ -790,18 +789,18 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   }
 
   private appendTab(view: View, index?: number): void {
-    this.tabbedPaneInternal.appendTab(
+    this.#tabbedPane.appendTab(
         view.viewId(), view.title(), new ContainerWidget(view), undefined, false,
         view.isCloseable() || view.isTransient(), view.isPreviewFeature(), index);
     const iconName = view.iconName();
     if (iconName) {
       const icon = IconButton.Icon.create(iconName);
-      this.tabbedPaneInternal.setTabIcon(view.viewId(), icon);
+      this.#tabbedPane.setTabIcon(view.viewId(), icon);
     }
   }
 
   appendView(view: View, insertBefore?: View|null): void {
-    if (this.tabbedPaneInternal.hasTab(view.viewId())) {
+    if (this.#tabbedPane.hasTab(view.viewId())) {
       return;
     }
     const oldLocation = locationForView.get(view);
@@ -812,7 +811,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
     this.manager.views.set(view.viewId(), view);
     this.views.set(view.viewId(), view);
     let index: number|undefined = undefined;
-    const tabIds = this.tabbedPaneInternal.tabIds();
+    const tabIds = this.#tabbedPane.tabIds();
     if (this.allowReorder) {
       const orderSetting = this.tabOrderSetting.get();
       const order = orderSetting[view.viewId()];
@@ -848,38 +847,38 @@ class TabbedLocation extends Location implements TabbedViewLocation {
       shouldSelectTab: boolean|undefined = true): Promise<void> {
     this.appendView(view, insertBefore);
     if (shouldSelectTab) {
-      this.tabbedPaneInternal.selectTab(view.viewId(), userGesture);
+      this.#tabbedPane.selectTab(view.viewId(), userGesture);
     }
     if (!omitFocus) {
-      this.tabbedPaneInternal.focus();
+      this.#tabbedPane.focus();
     }
-    const widget = (this.tabbedPaneInternal.tabView(view.viewId()) as ContainerWidget);
+    const widget = (this.#tabbedPane.tabView(view.viewId()) as ContainerWidget);
     await widget.materialize();
   }
 
   override removeView(view: View): void {
-    if (!this.tabbedPaneInternal.hasTab(view.viewId())) {
+    if (!this.#tabbedPane.hasTab(view.viewId())) {
       return;
     }
 
     locationForView.delete(view);
     this.manager.views.delete(view.viewId());
-    this.tabbedPaneInternal.closeTab(view.viewId());
+    this.#tabbedPane.closeTab(view.viewId());
     this.views.delete(view.viewId());
   }
 
   override isViewVisible(view: View): boolean {
-    return this.tabbedPaneInternal.isShowing() && this.tabbedPaneInternal?.selectedTabId === view.viewId();
+    return this.#tabbedPane.isShowing() && this.#tabbedPane?.selectedTabId === view.viewId();
   }
 
   private tabbedPaneVisibilityChanged(event: Common.EventTarget.EventTargetEvent<{isVisible: boolean}>): void {
-    if (!this.tabbedPaneInternal.selectedTabId) {
+    if (!this.#tabbedPane.selectedTabId) {
       return;
     }
     this.manager.dispatchEventToListeners(Events.VIEW_VISIBILITY_CHANGED, {
       location: this.location,
-      revealedViewId: event.data.isVisible ? this.tabbedPaneInternal.selectedTabId : undefined,
-      hiddenViewId: event.data.isVisible ? undefined : this.tabbedPaneInternal.selectedTabId,
+      revealedViewId: event.data.isVisible ? this.#tabbedPane.selectedTabId : undefined,
+      hiddenViewId: event.data.isVisible ? undefined : this.#tabbedPane.selectedTabId,
     });
   }
 
@@ -909,7 +908,7 @@ class TabbedLocation extends Location implements TabbedViewLocation {
   }
 
   private persistTabOrder(): void {
-    const tabIds = this.tabbedPaneInternal.tabIds();
+    const tabIds = this.#tabbedPane.tabIds();
     const tabOrders: Record<string, number> = {};
     for (let i = 0; i < tabIds.length; i++) {
       tabOrders[tabIds[i]] = (i + 1) * TabbedLocation.orderStep;

package/front_end/ui/legacy/Widget.ts

@@ -497,7 +497,7 @@ export class Widget {
       }
       this.attach(currentWidget);
     }
-    this.showWidgetInternal(parentElement, insertBefore);
+    this.#showWidget(parentElement, insertBefore);
   }
 
   private attach(parentWidget: Widget): void {
@@ -519,10 +519,10 @@ export class Widget {
     if (!this.element.parentElement) {
       throw new Error('Attempt to show widget that is not hidden using hideWidget().');
     }
-    this.showWidgetInternal(this.element.parentElement, this.element.nextSibling);
+    this.#showWidget(this.element.parentElement, this.element.nextSibling);
   }
 
-  private showWidgetInternal(parentElement: Element, insertBefore?: Node|null): void {
+  #showWidget(parentElement: Element, insertBefore?: Node|null): void {
     let currentParent: Element|null = parentElement;
     while (currentParent && !widgetMap.get(currentParent)) {
       currentParent = currentParent.parentElementOrShadowHost();
@@ -576,10 +576,10 @@ export class Widget {
     if (!this.#visible) {
       return;
     }
-    this.hideWidgetInternal(false);
+    this.#hideWidget(false);
   }
 
-  private hideWidgetInternal(removeFromDOM: boolean): void {
+  #hideWidget(removeFromDOM: boolean): void {
     this.#visible = false;
     const {parentElement} = this.element;
 
@@ -627,7 +627,7 @@ export class Widget {
     // responsibility for the consequences.
     const removeFromDOM = overrideHideOnDetach || !this.shouldHideOnDetach();
     if (this.#visible) {
-      this.hideWidgetInternal(removeFromDOM);
+      this.#hideWidget(removeFromDOM);
     } else if (removeFromDOM) {
       const {parentElement} = this.element;
       if (parentElement) {

package/front_end/ui/legacy/XLink.ts

@@ -20,7 +20,7 @@ import {
 import {XElement} from './XElement.js';
 
 export class XLink extends XElement {
-  hrefInternal: Platform.DevToolsPath.UrlString|null;
+  #href: Platform.DevToolsPath.UrlString|null;
   private clickable: boolean;
   private readonly onClick: (arg0: Event) => void;
   private readonly onKeyDown: (arg0: KeyboardEvent) => void;
@@ -49,21 +49,21 @@ export class XLink extends XElement {
     this.setAttribute('target', '_blank');
     this.setAttribute('rel', 'noopener');
 
-    this.hrefInternal = null;
+    this.#href = null;
     this.clickable = true;
 
     this.onClick = (event: Event) => {
       event.consume(true);
-      if (this.hrefInternal) {
-        openInNewTab(this.hrefInternal);
+      if (this.#href) {
+        openInNewTab(this.#href);
       }
       this.dispatchEvent(new Event('x-link-invoke'));
     };
     this.onKeyDown = (event: KeyboardEvent) => {
       if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         event.consume(true);
-        if (this.hrefInternal) {
-          openInNewTab(this.hrefInternal);
+        if (this.#href) {
+          openInNewTab(this.#href);
         }
       }
       this.dispatchEvent(new Event('x-link-invoke'));
@@ -76,7 +76,7 @@ export class XLink extends XElement {
   }
 
   get href(): Platform.DevToolsPath.UrlString|null {
-    return this.hrefInternal;
+    return this.#href;
   }
 
   override attributeChangedCallback(attr: string, oldValue: string|null, newValue: string|null): void {
@@ -100,7 +100,7 @@ export class XLink extends XElement {
       } catch {
       }
 
-      this.hrefInternal = href;
+      this.#href = href;
       if (!this.hasAttribute('title')) {
         Tooltip.install(this, newValue);
       }
@@ -119,7 +119,7 @@ export class XLink extends XElement {
   }
 
   private updateClick(): void {
-    if (this.hrefInternal !== null && this.clickable) {
+    if (this.#href !== null && this.clickable) {
       this.addEventListener('click', this.onClick, false);
       this.addEventListener('keydown', this.onKeyDown, false);
       this.style.setProperty('cursor', 'pointer');

package/front_end/ui/legacy/ZoomManager.ts

@@ -9,12 +9,12 @@ let zoomManagerInstance: ZoomManager|undefined;
 
 export class ZoomManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private frontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI;
-  private zoomFactorInternal: number;
+  #zoomFactor: number;
 
   private constructor(window: Window, frontendHost: Host.InspectorFrontendHostAPI.InspectorFrontendHostAPI) {
     super();
     this.frontendHost = frontendHost;
-    this.zoomFactorInternal = this.frontendHost.zoomFactor();
+    this.#zoomFactor = this.frontendHost.zoomFactor();
     window.addEventListener('resize', this.onWindowResize.bind(this), true);
   }
 
@@ -41,22 +41,22 @@ export class ZoomManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   zoomFactor(): number {
-    return this.zoomFactorInternal;
+    return this.#zoomFactor;
   }
 
   cssToDIP(value: number): number {
-    return value * this.zoomFactorInternal;
+    return value * this.#zoomFactor;
   }
 
   dipToCSS(valueDIP: number): number {
-    return valueDIP / this.zoomFactorInternal;
+    return valueDIP / this.#zoomFactor;
   }
 
   private onWindowResize(): void {
-    const oldZoomFactor = this.zoomFactorInternal;
-    this.zoomFactorInternal = this.frontendHost.zoomFactor();
-    if (oldZoomFactor !== this.zoomFactorInternal) {
-      this.dispatchEventToListeners(Events.ZOOM_CHANGED, {from: oldZoomFactor, to: this.zoomFactorInternal});
+    const oldZoomFactor = this.#zoomFactor;
+    this.#zoomFactor = this.frontendHost.zoomFactor();
+    if (oldZoomFactor !== this.#zoomFactor) {
+      this.dispatchEventToListeners(Events.ZOOM_CHANGED, {from: oldZoomFactor, to: this.#zoomFactor});
     }
   }
 }

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -67,15 +67,15 @@ const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/color_picker/Cont
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
   private contrastInfo: ContrastInfo;
-  private readonly elementInternal: HTMLElement;
+  readonly #element: HTMLElement;
   private readonly toggleMainColorPicker:
       (arg0?: boolean|undefined, arg1?: Common.EventTarget.EventTargetEvent<unknown>|undefined) => void;
   private readonly expandedChangedCallback: () => void;
   private readonly colorSelectedCallback: (arg0: Common.Color.Legacy) => void;
-  private expandedInternal: boolean;
+  #expanded: boolean;
   private passesAA: boolean;
   private contrastUnknown: boolean;
-  private visibleInternal: boolean;
+  #visible: boolean;
   private readonly noContrastInfoAvailable: Element;
   private readonly contrastValueBubble: HTMLElement;
   private contrastValue: HTMLElement;
@@ -101,7 +101,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       expandedChangedCallback: () => void, colorSelectedCallback: (arg0: Common.Color.Legacy) => void) {
     super();
     this.contrastInfo = contrastInfo;
-    this.elementInternal = contentElement.createChild('div', 'spectrum-contrast-details collapsed');
+    this.#element = contentElement.createChild('div', 'spectrum-contrast-details collapsed');
 
     this.toggleMainColorPicker = toggleMainColorPickerCallback;
 
@@ -109,7 +109,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     this.colorSelectedCallback = colorSelectedCallback;
 
-    this.expandedInternal = false;
+    this.#expanded = false;
 
     this.passesAA = true;
 
@@ -117,7 +117,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     // This will not be visible if we don't get ContrastInfo,
     // e.g. for a non-font color property such as border-color.
-    this.visibleInternal = false;
+    this.#visible = false;
 
     // No contrast info message is created to show if it's not possible to provide the extended details.
 
@@ -125,7 +125,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.noContrastInfoAvailable.textContent = i18nString(UIStrings.noContrastInformationAvailable);
     this.noContrastInfoAvailable.classList.add('hidden');
 
-    const contrastValueRow = this.elementInternal.createChild('div');
+    const contrastValueRow = this.#element.createChild('div');
     contrastValueRow.addEventListener('click', this.topRowClicked.bind(this));
     const contrastValueRowContents = contrastValueRow.createChild('div', 'container');
     UI.UIUtils.createTextChild(contrastValueRowContents, i18nString(UIStrings.contrastRatio));
@@ -147,7 +147,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     UI.ARIAUtils.setExpanded(this.expandButton.element, false);
     expandToolbar.appendToolbarItem(this.expandButton);
 
-    this.expandedDetails = this.elementInternal.createChild('div', 'expanded-details');
+    this.expandedDetails = this.#element.createChild('div', 'expanded-details');
     UI.ARIAUtils.setControls(this.expandButton.element, this.expandedDetails);
 
     this.contrastThresholds = this.expandedDetails.createChild('div', 'contrast-thresholds');
@@ -170,7 +170,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.bgColorPickerButton = new UI.Toolbar.ToolbarToggle(
         i18nString(UIStrings.toggleBackgroundColorPicker), 'color-picker', 'color-picker-filled');
     this.bgColorPickerButton.addEventListener(
-        UI.Toolbar.ToolbarButton.Events.CLICK, this.toggleBackgroundColorPickerInternal.bind(this, undefined, true));
+        UI.Toolbar.ToolbarButton.Events.CLICK, this.#toggleBackgroundColorPicker.bind(this, undefined, true));
     pickerToolbar.appendToolbarItem(this.bgColorPickerButton);
     this.bgColorPickedBound = this.bgColorPicked.bind(this);
 
@@ -286,7 +286,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
         }
       }
       labelAPCA.addEventListener('click', (_event: Event) => ContrastDetails.showHelp());
-      this.elementInternal.classList.toggle('contrast-fail', !passesAPCA);
+      this.#element.classList.toggle('contrast-fail', !passesAPCA);
       this.contrastValueBubble.classList.toggle('contrast-aa', passesAPCA);
       this.bgColorSwatch.setColors(fgColor, bgColor);
       return;
@@ -356,7 +356,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     [labelAA, labelAAA].forEach(e => e.addEventListener('click', () => ContrastDetails.showHelp()));
 
-    this.elementInternal.classList.toggle('contrast-fail', !this.passesAA);
+    this.#element.classList.toggle('contrast-fail', !this.passesAA);
     // show checkmark icon when passes AA, but not AAA
     this.contrastValueBubble.classList.toggle('contrast-aa', this.passesAA && !passesAAA);
     this.contrastValueBubble.classList.toggle('contrast-aaa', passesAAA);
@@ -367,16 +367,16 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   setVisible(visible: boolean): void {
-    this.visibleInternal = visible;
-    this.elementInternal.classList.toggle('hidden', !visible);
+    this.#visible = visible;
+    this.#element.classList.toggle('hidden', !visible);
   }
 
   visible(): boolean {
-    return this.visibleInternal;
+    return this.#visible;
   }
 
   element(): HTMLElement {
-    return this.elementInternal;
+    return this.#element;
   }
 
   private expandButtonClicked(): void {
@@ -397,18 +397,18 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   private toggleExpanded(): void {
-    this.expandedInternal = !this.expandedInternal;
-    UI.ARIAUtils.setExpanded(this.expandButton.element, this.expandedInternal);
-    this.elementInternal.classList.toggle('collapsed', !this.expandedInternal);
-    if (this.expandedInternal) {
+    this.#expanded = !this.#expanded;
+    UI.ARIAUtils.setExpanded(this.expandButton.element, this.#expanded);
+    this.#element.classList.toggle('collapsed', !this.#expanded);
+    if (this.#expanded) {
       this.toggleMainColorPicker(false);
       this.expandButton.setGlyph('chevron-up');
       this.expandButton.setTitle(i18nString(UIStrings.showLess));
       if (this.contrastUnknown) {
-        this.toggleBackgroundColorPickerInternal(true);
+        this.#toggleBackgroundColorPicker(true);
       }
     } else {
-      this.toggleBackgroundColorPickerInternal(false);
+      this.#toggleBackgroundColorPicker(false);
       this.expandButton.setGlyph('chevron-down');
       this.expandButton.setTitle(i18nString(UIStrings.showMore));
     }
@@ -416,13 +416,13 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   collapse(): void {
-    this.elementInternal.classList.remove('expanded');
-    this.toggleBackgroundColorPickerInternal(false);
+    this.#element.classList.remove('expanded');
+    this.#toggleBackgroundColorPicker(false);
     this.toggleMainColorPicker(false);
   }
 
   expanded(): boolean {
-    return this.expandedInternal;
+    return this.#expanded;
   }
 
   backgroundColorPickerEnabled(): boolean {
@@ -430,10 +430,10 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   toggleBackgroundColorPicker(enabled: boolean): void {
-    this.toggleBackgroundColorPickerInternal(enabled, false);
+    this.#toggleBackgroundColorPicker(enabled, false);
   }
 
-  private toggleBackgroundColorPickerInternal(enabled?: boolean, shouldTriggerEvent: boolean|undefined = true): void {
+  #toggleBackgroundColorPicker(enabled?: boolean, shouldTriggerEvent: boolean|undefined = true): void {
     if (enabled === undefined) {
       enabled = this.bgColorPickerButton.isToggled();
     }
@@ -458,7 +458,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     const rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
     const color = Common.Color.Legacy.fromRGBA(rgba);
     this.contrastInfo.setBgColor(color);
-    this.toggleBackgroundColorPickerInternal(false);
+    this.#toggleBackgroundColorPicker(false);
     this.bgColorPickerButton.toggled(false);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
   }

package/front_end/ui/legacy/components/color_picker/ContrastInfo.ts

@@ -5,23 +5,23 @@
 import * as Common from '../../../../core/common/common.js';
 
 export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  private readonly isNullInternal: boolean;
-  private contrastRatioInternal: number|null;
-  private contrastRatioAPCAInternal: number|null;
+  readonly #isNull: boolean;
+  #contrastRatio: number|null;
+  #contrastRatioAPCA: number|null;
   private contrastRatioThresholds: Record<string, number>|null;
-  private readonly contrastRatioAPCAThresholdInternal: number|null;
+  readonly #contrastRatioAPCAThreshold: number|null;
   private fgColor: Common.Color.Legacy|null;
-  private bgColorInternal: Common.Color.Legacy|null;
-  private colorFormatInternal: Common.Color.Format|undefined;
+  #bgColor: Common.Color.Legacy|null;
+  #colorFormat: Common.Color.Format|undefined;
   constructor(contrastInfo: ContrastInfoType|null) {
     super();
-    this.isNullInternal = true;
-    this.contrastRatioInternal = null;
-    this.contrastRatioAPCAInternal = null;
+    this.#isNull = true;
+    this.#contrastRatio = null;
+    this.#contrastRatioAPCA = null;
     this.contrastRatioThresholds = null;
-    this.contrastRatioAPCAThresholdInternal = 0;
+    this.#contrastRatioAPCAThreshold = 0;
     this.fgColor = null;
-    this.bgColorInternal = null;
+    this.#bgColor = null;
 
     if (!contrastInfo) {
       return;
@@ -31,10 +31,10 @@ export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    this.isNullInternal = false;
+    this.#isNull = false;
     this.contrastRatioThresholds =
         Common.ColorUtils.getContrastThreshold(contrastInfo.computedFontSize, contrastInfo.computedFontWeight);
-    this.contrastRatioAPCAThresholdInternal =
+    this.#contrastRatioAPCAThreshold =
         Common.ColorUtils.getAPCAThreshold(contrastInfo.computedFontSize, contrastInfo.computedFontWeight);
 
     if (!contrastInfo.backgroundColors || contrastInfo.backgroundColors.length !== 1) {
@@ -43,23 +43,23 @@ export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const bgColorText = contrastInfo.backgroundColors[0];
     const bgColor = Common.Color.parse(bgColorText)?.asLegacyColor();
     if (bgColor) {
-      this.setBgColorInternal(bgColor);
+      this.#setBgColor(bgColor);
     }
   }
 
   isNull(): boolean {
-    return this.isNullInternal;
+    return this.#isNull;
   }
 
   setColor(fgColor: Common.Color.Legacy, colorFormat?: Common.Color.Format): void {
     this.fgColor = fgColor;
-    this.colorFormatInternal = colorFormat;
+    this.#colorFormat = colorFormat;
     this.updateContrastRatio();
     this.dispatchEventToListeners(Events.CONTRAST_INFO_UPDATED);
   }
 
   colorFormat(): Common.Color.Format|undefined {
-    return this.colorFormatInternal;
+    return this.#colorFormat;
   }
 
   color(): Common.Color.Legacy|null {
@@ -67,24 +67,24 @@ export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   contrastRatio(): number|null {
-    return this.contrastRatioInternal;
+    return this.#contrastRatio;
   }
 
   contrastRatioAPCA(): number|null {
-    return this.contrastRatioAPCAInternal;
+    return this.#contrastRatioAPCA;
   }
 
   contrastRatioAPCAThreshold(): number|null {
-    return this.contrastRatioAPCAThresholdInternal;
+    return this.#contrastRatioAPCAThreshold;
   }
 
   setBgColor(bgColor: Common.Color.Legacy): void {
-    this.setBgColorInternal(bgColor);
+    this.#setBgColor(bgColor);
     this.dispatchEventToListeners(Events.CONTRAST_INFO_UPDATED);
   }
 
-  private setBgColorInternal(bgColor: Common.Color.Legacy): void {
-    this.bgColorInternal = bgColor;
+  #setBgColor(bgColor: Common.Color.Legacy): void {
+    this.#bgColor = bgColor;
 
     if (!this.fgColor) {
       return;
@@ -97,25 +97,23 @@ export class ContrastInfo extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     // the unknown background is the same color as the text.
     if (bgColor.hasAlpha()) {
       const blendedRGBA = Common.ColorUtils.blendColors(bgColor.rgba(), fgRGBA);
-      this.bgColorInternal = new Common.Color.Legacy(blendedRGBA, Common.Color.Format.RGBA);
+      this.#bgColor = new Common.Color.Legacy(blendedRGBA, Common.Color.Format.RGBA);
     }
 
-    this.contrastRatioInternal = Common.ColorUtils.contrastRatio(fgRGBA, this.bgColorInternal.rgba());
-    this.contrastRatioAPCAInternal =
-        Common.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(), this.bgColorInternal.rgba());
+    this.#contrastRatio = Common.ColorUtils.contrastRatio(fgRGBA, this.#bgColor.rgba());
+    this.#contrastRatioAPCA = Common.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(), this.#bgColor.rgba());
   }
 
   bgColor(): Common.Color.Legacy|null {
-    return this.bgColorInternal;
+    return this.#bgColor;
   }
 
   private updateContrastRatio(): void {
-    if (!this.bgColorInternal || !this.fgColor) {
+    if (!this.#bgColor || !this.fgColor) {
       return;
     }
-    this.contrastRatioInternal = Common.ColorUtils.contrastRatio(this.fgColor.rgba(), this.bgColorInternal.rgba());
-    this.contrastRatioAPCAInternal =
-        Common.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(), this.bgColorInternal.rgba());
+    this.#contrastRatio = Common.ColorUtils.contrastRatio(this.fgColor.rgba(), this.#bgColor.rgba());
+    this.#contrastRatioAPCA = Common.ColorUtils.contrastRatioAPCA(this.fgColor.rgba(), this.#bgColor.rgba());
   }
 
   contrastRatioThreshold(level: string): number|null {