chrome-devtools-frontend 1.0.1512147 → 1.0.1513662

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -10,6 +10,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -1879,11 +1880,11 @@ export function getPropertyRenderers(
 
 export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private readonly style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
-  private matchedStylesInternal: SDK.CSSMatchedStyles.CSSMatchedStyles;
+  #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles;
   property: SDK.CSSProperty.CSSProperty;
-  private readonly inheritedInternal: boolean;
-  private overloadedInternal: boolean;
-  private parentPaneInternal: StylesSidebarPane;
+  readonly #inherited: boolean;
+  #overloaded: boolean;
+  #parentPane: StylesSidebarPane;
   #parentSection: StylePropertiesSection;
   isShorthand: boolean;
   private readonly applyStyleThrottler = new Common.Throttler.Throttler(0);
@@ -1910,12 +1911,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const jslogContext = property.name.startsWith('--') ? 'custom-property' : property.name;
     super('', isShorthand, jslogContext);
     this.style = property.ownerStyle;
-    this.matchedStylesInternal = matchedStyles;
+    this.#matchedStyles = matchedStyles;
     this.property = property;
-    this.inheritedInternal = inherited;
-    this.overloadedInternal = overloaded;
+    this.#inherited = inherited;
+    this.#overloaded = overloaded;
     this.selectable = false;
-    this.parentPaneInternal = stylesPane;
+    this.#parentPane = stylesPane;
     this.#parentSection = section;
     this.isShorthand = isShorthand;
     this.newProperty = newProperty;
@@ -1932,8 +1933,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (!SDK.CSSMetadata.cssMetadata().isGridNameAwareProperty(this.name)) {
       return new Set();
     }
-    for (let node = this.parentPaneInternal.node()?.parentNode; node; node = node?.parentNode) {
-      const style = await this.parentPaneInternal.cssModel()?.getComputedStyle(node.id);
+    for (let node = this.#parentPane.node()?.parentNode; node; node = node?.parentNode) {
+      const style = await this.#parentPane.cssModel()?.getComputedStyle(node.id);
       const display = style?.get('display');
       const isGrid = display === 'grid' || display === 'inline-grid';
       if (!isGrid) {
@@ -1966,7 +1967,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   matchedStyles(): SDK.CSSMatchedStyles.CSSMatchedStyles {
-    return this.matchedStylesInternal;
+    return this.#matchedStyles;
   }
 
   getLonghand(): StylePropertyTreeElement|null {
@@ -1979,18 +1980,18 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   inherited(): boolean {
-    return this.inheritedInternal;
+    return this.#inherited;
   }
 
   overloaded(): boolean {
-    return this.overloadedInternal;
+    return this.#overloaded;
   }
 
   setOverloaded(x: boolean): void {
-    if (x === this.overloadedInternal) {
+    if (x === this.#overloaded) {
       return;
     }
-    this.overloadedInternal = x;
+    this.#overloaded = x;
     this.updateState();
   }
 
@@ -2019,7 +2020,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateFilter(): boolean {
-    const regex = this.parentPaneInternal.filterRegex();
+    const regex = this.#parentPane.filterRegex();
     const matches = regex !== null && (regex.test(this.property.name) || regex.test(this.property.value));
     this.listItemElement.classList.toggle('filter-match', matches);
 
@@ -2094,11 +2095,11 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   node(): SDK.DOMModel.DOMNode|null {
-    return this.parentPaneInternal.node();
+    return this.#parentPane.node();
   }
 
   parentPane(): StylesSidebarPane {
-    return this.parentPaneInternal;
+    return this.#parentPane;
   }
 
   section(): StylePropertiesSection {
@@ -2115,14 +2116,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    this.parentPaneInternal.setUserOperation(true);
+    this.#parentPane.setUserOperation(true);
     const success = await this.property.setDisabled(disabled);
-    this.parentPaneInternal.setUserOperation(false);
+    this.#parentPane.setUserOperation(false);
 
     if (!success) {
       return;
     }
-    this.matchedStylesInternal.resetActiveProperties();
+    this.#matchedStyles.resetActiveProperties();
     this.updatePane();
     this.styleTextAppliedForTest();
   }
@@ -2139,7 +2140,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return staticLonghandProperties;
     }
 
-    const parsedLonghands = await this.parentPaneInternal.cssModel()?.agent.invoke_getLonghandProperties(
+    const parsedLonghands = await this.#parentPane.cssModel()?.agent.invoke_getLonghandProperties(
         {shorthandName: this.property.name, value: parsedProperty});
     if (!parsedLonghands || parsedLonghands.getError()) {
       return staticLonghandProperties;
@@ -2172,7 +2173,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       let overloaded = false;
 
       inherited = this.#parentSection.isPropertyInherited(name);
-      overloaded = this.matchedStylesInternal.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED;
+      overloaded = this.#matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED;
 
       const leadingProperty = leadingProperties.find(property => property.name === name && property.activeInStyle());
       if (leadingProperty) {
@@ -2180,9 +2181,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
 
       const item = new StylePropertyTreeElement({
-        stylesPane: this.parentPaneInternal,
+        stylesPane: this.#parentPane,
         section: this.#parentSection,
-        matchedStyles: this.matchedStylesInternal,
+        matchedStyles: this.#matchedStyles,
         property,
         isShorthand: false,
         inherited,
@@ -2200,7 +2201,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     this.listItemElement.addEventListener('mousedown', event => {
       if (event.button === 0) {
-        parentMap.set(this.parentPaneInternal, this);
+        parentMap.set(this.#parentPane, this);
       }
     }, false);
     this.listItemElement.addEventListener('mouseup', this.mouseUp.bind(this));
@@ -2247,9 +2248,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const matching: SDK.CSSPropertyParser.BottomUpTreeMatching = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, [
-      new SDK.CSSPropertyParserMatchers.VariableMatcher(this.matchedStylesInternal, style),
-      new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.matchedStylesInternal, style),
-      new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.matchedStylesInternal),
+      new SDK.CSSPropertyParserMatchers.VariableMatcher(this.#matchedStyles, style),
+      new SDK.CSSPropertyParserMatchers.AttributeMatcher(this.#matchedStyles, style),
+      new SDK.CSSPropertyParserMatchers.EnvFunctionMatcher(this.#matchedStyles),
     ]);
 
     const decl = SDK.CSSPropertyParser.ASTUtils.siblings(SDK.CSSPropertyParser.ASTUtils.declValue(matching.ast.tree));
@@ -2281,8 +2282,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const renderers = this.property.parsedOk ?
         getPropertyRenderers(
-            this.name, this.style, this.parentPaneInternal, this.matchedStylesInternal, this,
-            this.getComputedStyles() ?? new Map()) :
+            this.name, this.style, this.#parentPane, this.#matchedStyles, this, this.getComputedStyles() ?? new Map()) :
         [];
 
     if (Root.Runtime.experiments.isEnabled('font-editor') && this.property.parsedOk) {
@@ -2305,9 +2305,9 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     if (this.property.name.startsWith('--') &&
         !(this.property.ownerStyle.parentRule instanceof SDK.CSSRule.CSSFunctionRule)) {
-      const contents = this.parentPaneInternal.getVariablePopoverContents(
+      const contents = this.#parentPane.getVariablePopoverContents(
           this.matchedStyles(), this.property.name,
-          this.matchedStylesInternal.computeCSSVariable(this.style, this.property.name)?.value ?? null);
+          this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value ?? null);
       const tooltipId = this.getTooltipId('custom-property-decl');
       this.nameElement.setAttribute('aria-details', tooltipId);
       const tooltip = new Tooltips.Tooltip.Tooltip(
@@ -2315,7 +2315,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       tooltip.appendChild(contents);
       tooltip.onbeforetoggle = (e: Event) => {
         if ((e as ToggleEvent).newState === 'open') {
-          contents.value = this.matchedStylesInternal.computeCSSVariable(this.style, this.property.name)?.value;
+          contents.value = this.#matchedStyles.computeCSSVariable(this.style, this.property.name)?.value;
         }
       };
       this.listItemElement.appendChild(tooltip);
@@ -2338,7 +2338,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           return;
         }
 
-        const cssProperty = this.parentPaneInternal.webCustomData?.findCssProperty(this.name);
+        const cssProperty = this.#parentPane.webCustomData?.findCssProperty(this.name);
         if (!cssProperty) {
           event.consume(true);
           return;
@@ -2375,7 +2375,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       // Add a separate exclamation mark IMG element with a tooltip.
       this.listItemElement.insertBefore(
           this.createExclamationMark(
-              this.property, this.parentPaneInternal.getVariableParserError(this.matchedStyles(), this.property.name)),
+              this.property, this.#parentPane.getVariableParserError(this.matchedStyles(), this.property.name)),
           this.listItemElement.firstChild);
 
       // When the property is valid but the property value is invalid,
@@ -2549,7 +2549,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const cssModel = this.parentPaneInternal.cssModel();
+    const cssModel = this.#parentPane.cssModel();
     const fontFaces = cssModel?.fontFaces() || [];
 
     const localName = this.node()?.localName();
@@ -2579,8 +2579,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private mouseUp(event: MouseEvent): void {
-    const activeTreeElement = parentMap.get(this.parentPaneInternal);
-    parentMap.delete(this.parentPaneInternal);
+    const activeTreeElement = parentMap.get(this.#parentPane);
+    parentMap.delete(this.#parentPane);
     if (!activeTreeElement) {
       return;
     }
@@ -2629,7 +2629,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private handleContextMenuEvent(context: Context, event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (this.property.parsedOk && this.parent?.root) {
-      const sectionIndex = this.parentPaneInternal.focusedSectionIndex();
+      const sectionIndex = this.#parentPane.focusedSectionIndex();
       contextMenu.defaultSection().appendCheckboxItem(
           i18nString(UIStrings.togglePropertyAndContinueEditing), async () => {
             if (this.treeOutline) {
@@ -2638,7 +2638,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
               this.editingCancelled(context);
               await this.toggleDisabled(!this.property.disabled);
               event.consume();
-              this.parentPaneInternal.continueEditingElement(sectionIndex, propertyIndex);
+              this.#parentPane.continueEditingElement(sectionIndex, propertyIndex);
             }
           }, {checked: !this.property.disabled, jslogContext: 'toggle-property-and-continue-editing'});
     }
@@ -2853,7 +2853,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     this.originalPropertyText = this.property.propertyText || '';
 
-    this.parentPaneInternal.setEditingStyle(true);
+    this.#parentPane.setEditingStyle(true);
     selectedElement.parentElement?.scrollIntoViewIfNeeded(false);
 
     this.prompt = new CSSPropertyPrompt(this, context.isEditingName, Array.from(this.#gridNames ?? []));
@@ -2996,7 +2996,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private async applyFreeFlowStyleTextEdit(context: Context): Promise<void> {
-    if (!this.prompt || !this.parentPaneInternal.node()) {
+    if (!this.prompt || !this.#parentPane.node()) {
       return;
     }
 
@@ -3011,7 +3011,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
     // Prevent destructive side-effects during live-edit. crbug.com/433889
-    const parentNode = this.parentPaneInternal.node();
+    const parentNode = this.#parentPane.node();
     if (parentNode) {
       const isPseudo = Boolean(parentNode.pseudoType());
       if (isPseudo) {
@@ -3052,7 +3052,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       editedElement.parentElement.classList.remove('child-editing');
     }
 
-    this.parentPaneInternal.setEditingStyle(false);
+    this.#parentPane.setEditingStyle(false);
   }
 
   editingCancelled(context: Context): void {
@@ -3164,7 +3164,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         this: StylePropertyTreeElement, alreadyNew: boolean, valueChanged: boolean,
         section: StylePropertiesSection): void {
       if (!moveDirection) {
-        this.parentPaneInternal.resetFocus();
+        this.#parentPane.resetFocus();
         return;
       }
 
@@ -3278,8 +3278,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const currentNode = this.parentPaneInternal.node();
-    this.parentPaneInternal.setUserOperation(true);
+    const currentNode = this.#parentPane.node();
+    this.#parentPane.setUserOperation(true);
 
     styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
     styleText += ')'.repeat(Platform.StringUtilities.countUnmatchedLeftParentheses(styleText));
@@ -3292,12 +3292,16 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
 
     const overwriteProperty = !this.newProperty || hasBeenEditedIncrementally;
     let success: boolean = await this.property.setText(styleText, majorChange, overwriteProperty);
+    if (success && majorChange) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.CSS_RULE_MODIFIED);
+    }
+
     // Revert to the original text if applying the new text failed
     if (hasBeenEditedIncrementally && majorChange && !success) {
       majorChange = false;
       success = await this.property.setText(this.originalPropertyText, majorChange, overwriteProperty);
     }
-    this.parentPaneInternal.setUserOperation(false);
+    this.#parentPane.setUserOperation(false);
 
     // TODO: using this.property.index to access its containing StyleDeclaration's property will result in
     // off-by-1 errors when the containing StyleDeclaration's respective property has already been deleted.
@@ -3317,7 +3321,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    this.matchedStylesInternal.resetActiveProperties();
+    this.#matchedStyles.resetActiveProperties();
     this.hasBeenEditedIncrementally = true;
 
     // null check for updatedProperty before setting this.property as the code never expects this.property to be undefined or null.

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -172,7 +172,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private noMatchesElement: HTMLElement;
   private sectionsContainer: UI.Widget.Widget;
   sectionByElement = new WeakMap<Node, StylePropertiesSection>();
-  private readonly swatchPopoverHelperInternal = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
+  readonly #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
   readonly linkifier = new Components.Linkifier.Linkifier(MAX_LINK_LENGTH, /* useLinkDecorator */ true);
 
   private readonly decorator: StylePropertyHighlighter;
@@ -180,7 +180,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
   private userOperation = false;
   isEditingStyle = false;
-  private filterRegexInternal: RegExp|null = null;
+  #filterRegex: RegExp|null = null;
   private isActivePropertyHighlighted = false;
   private initialUpdateCompleted = false;
   hasMatchedStyles = false;
@@ -218,7 +218,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.sectionsContainer.contentElement.addEventListener(
         'focusout', this.sectionsContainerFocusChanged.bind(this), false);
 
-    this.swatchPopoverHelperInternal.addEventListener(
+    this.#swatchPopoverHelper.addEventListener(
         InlineEditor.SwatchPopoverHelper.Events.WILL_SHOW_POPOVER, this.hideAllPopovers, this);
     this.decorator = new StylePropertyHighlighter(this);
     this.contentElement.classList.add('styles-pane');
@@ -250,7 +250,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
-    return this.swatchPopoverHelperInternal;
+    return this.#swatchPopoverHelper;
   }
 
   setUserOperation(userOperation: boolean): void {
@@ -356,7 +356,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   forceUpdate(): void {
     this.needsForceUpdate = true;
-    this.swatchPopoverHelperInternal.hide();
+    this.#swatchPopoverHelper.hide();
     this.#updateAbortController?.abort();
     this.resetCache();
     this.update();
@@ -398,7 +398,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       }
     }
 
-    if (sectionToFocus && this.filterRegexInternal) {
+    if (sectionToFocus && this.#filterRegex) {
       sectionToFocus = sectionToFocus.findCurrentOrNextVisible(/* willIterateForward= */ willIterateForward);
     }
     if (sectionToFocus) {
@@ -476,7 +476,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
     this.lastFilterChange = Date.now();
-    this.filterRegexInternal = regex;
+    this.#filterRegex = regex;
     this.updateFilter();
     this.resetFocus();
     setTimeout(() => {
@@ -516,7 +516,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       section.update(section === editedSection);
     }
 
-    if (this.filterRegexInternal) {
+    if (this.#filterRegex) {
       this.updateFilter();
     }
     this.swatchPopoverHelper().reposition();
@@ -984,7 +984,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     this.sectionsContainerFocusChanged();
 
-    if (this.filterRegexInternal) {
+    if (this.#filterRegex) {
       this.updateFilter();
     } else {
       this.noMatchesElement.classList.toggle('hidden', this.sectionBlocks.length > 0);
@@ -1284,7 +1284,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   filterRegex(): RegExp|null {
-    return this.filterRegexInternal;
+    return this.#filterRegex;
   }
 
   private updateFilter(): void {
@@ -1311,7 +1311,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   hideAllPopovers(): void {
-    this.swatchPopoverHelperInternal.hide();
+    this.#swatchPopoverHelper.hide();
     this.imagePreviewPopover.hide();
     if (this.activeCSSAngle) {
       this.activeCSSAngle.minify();
@@ -1492,12 +1492,12 @@ export interface EventTypes {
 const MAX_LINK_LENGTH = 23;
 
 export class SectionBlock {
-  private readonly titleElementInternal: Element|null;
+  readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
   #expanded = false;
   #icon: IconButton.Icon.Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
-    this.titleElementInternal = titleElement;
+    this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
 
@@ -1514,12 +1514,12 @@ export class SectionBlock {
   }
 
   expand(expand: boolean): void {
-    if (!this.titleElementInternal || !this.#icon) {
+    if (!this.#titleElement || !this.#icon) {
       return;
     }
-    this.titleElementInternal.classList.toggle('empty-section', !expand);
+    this.#titleElement.classList.toggle('empty-section', !expand);
     this.#icon.name = expand ? 'triangle-down' : 'triangle-right';
-    UI.ARIAUtils.setExpanded(this.titleElementInternal, expand);
+    UI.ARIAUtils.setExpanded(this.#titleElement, expand);
     this.#expanded = expand;
     this.sections.forEach(section => section.element.classList.toggle('hidden', !expand));
   }
@@ -1631,14 +1631,14 @@ export class SectionBlock {
       numVisibleSections += section.updateFilter() ? 1 : 0;
       hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
     }
-    if (this.titleElementInternal) {
-      this.titleElementInternal.classList.toggle('hidden', !hasAnyVisibleSection);
+    if (this.#titleElement) {
+      this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
     }
     return numVisibleSections;
   }
 
   titleElement(): Element|null {
-    return this.titleElementInternal;
+    return this.#titleElement;
   }
 }
 

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -197,7 +197,7 @@ export class DeviceModeToolbar {
   private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
   private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
   private readonly lastMode: Map<EmulationModel.EmulatedDevices.EmulatedDevice, EmulationModel.EmulatedDevices.Mode>;
-  private readonly elementInternal: HTMLDivElement;
+  readonly #element: HTMLDivElement;
   private readonly emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
   private spanButton!: UI.Toolbar.ToolbarButton;
@@ -240,11 +240,11 @@ export class DeviceModeToolbar {
 
     this.lastMode = new Map();
 
-    this.elementInternal = document.createElement('div');
-    this.elementInternal.classList.add('device-mode-toolbar');
-    this.elementInternal.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
+    this.#element = document.createElement('div');
+    this.#element.classList.add('device-mode-toolbar');
+    this.#element.setAttribute('jslog', `${VisualLogging.toolbar('device-mode').track({resize: true})}`);
 
-    const mainToolbar = this.elementInternal.createChild('devtools-toolbar', 'main-toolbar');
+    const mainToolbar = this.#element.createChild('devtools-toolbar', 'main-toolbar');
     this.appendDeviceSelectMenu(mainToolbar);
 
     this.widthInput = new EmulationComponents.DeviceSizeInputElement.SizeInputElement(
@@ -269,7 +269,7 @@ export class DeviceModeToolbar {
 
     this.appendDisplaySettings(mainToolbar);
     this.appendDevicePositionItems(mainToolbar);
-    const optionsToolbar = this.elementInternal.createChild('devtools-toolbar', 'device-mode-toolbar-options');
+    const optionsToolbar = this.#element.createChild('devtools-toolbar', 'device-mode-toolbar-options');
     optionsToolbar.wrappable = true;
     this.fillOptionsToolbar(optionsToolbar);
 
@@ -711,7 +711,7 @@ export class DeviceModeToolbar {
   }
 
   element(): Element {
-    return this.elementInternal;
+    return this.#element;
   }
 
   update(): void {

package/front_end/panels/emulation/DeviceModeView.ts

@@ -566,7 +566,7 @@ export class DeviceModeView extends UI.Widget.VBox {
 }
 
 export class Ruler extends UI.Widget.VBox {
-  private contentElementInternal: HTMLElement;
+  #contentElement: HTMLElement;
   private readonly horizontal: boolean;
   private scale: number;
   private count: number;
@@ -577,7 +577,7 @@ export class Ruler extends UI.Widget.VBox {
   constructor(horizontal: boolean, applyCallback: (arg0: number) => void) {
     super({jslog: `${VisualLogging.deviceModeRuler().track({click: true})}`});
     this.element.classList.add('device-mode-ruler');
-    this.contentElementInternal =
+    this.#contentElement =
         this.element.createChild('div', 'device-mode-ruler-content').createChild('div', 'device-mode-ruler-inner');
     this.horizontal = horizontal;
     this.scale = 1;
@@ -597,10 +597,10 @@ export class Ruler extends UI.Widget.VBox {
 
   update(): void {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
-    const size = this.horizontal ? this.contentElementInternal.offsetWidth : this.contentElementInternal.offsetHeight;
+    const size = this.horizontal ? this.#contentElement.offsetWidth : this.#contentElement.offsetHeight;
 
     if (this.scale !== this.renderedScale || zoomFactor !== this.renderedZoomFactor) {
-      this.contentElementInternal.removeChildren();
+      this.#contentElement.removeChildren();
       this.count = 0;
       this.renderedScale = this.scale;
       this.renderedZoomFactor = zoomFactor;
@@ -627,7 +627,7 @@ export class Ruler extends UI.Widget.VBox {
 
     for (let i = count; i < this.count; i++) {
       if (!(i % step)) {
-        const lastChild = this.contentElementInternal.lastChild;
+        const lastChild = this.#contentElement.lastChild;
         if (lastChild) {
           lastChild.remove();
         }
@@ -638,7 +638,7 @@ export class Ruler extends UI.Widget.VBox {
       if (i % step) {
         continue;
       }
-      const marker = this.contentElementInternal.createChild('div', 'device-mode-ruler-marker');
+      const marker = this.#contentElement.createChild('div', 'device-mode-ruler-marker');
       if (i) {
         if (this.horizontal) {
           marker.style.left = (5 * i) * this.scale / zoomFactor + 'px';

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -355,24 +355,24 @@ export const enum Section {
 
 export class MediaQueryUIModel {
   private cssMedia: SDK.CSSMedia.CSSMedia;
-  private readonly minWidthExpressionInternal: SDK.CSSMedia.CSSMediaQueryExpression|null;
-  private readonly maxWidthExpressionInternal: SDK.CSSMedia.CSSMediaQueryExpression|null;
-  private readonly activeInternal: boolean;
-  private readonly sectionInternal: Section;
-  private rawLocationInternal?: SDK.CSSModel.CSSLocation|null;
+  readonly #minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
+  readonly #maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null;
+  readonly #active: boolean;
+  readonly #section: Section;
+  #rawLocation?: SDK.CSSModel.CSSLocation|null;
   constructor(
       cssMedia: SDK.CSSMedia.CSSMedia, minWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null,
       maxWidthExpression: SDK.CSSMedia.CSSMediaQueryExpression|null, active: boolean) {
     this.cssMedia = cssMedia;
-    this.minWidthExpressionInternal = minWidthExpression;
-    this.maxWidthExpressionInternal = maxWidthExpression;
-    this.activeInternal = active;
+    this.#minWidthExpression = minWidthExpression;
+    this.#maxWidthExpression = maxWidthExpression;
+    this.#active = active;
     if (maxWidthExpression && !minWidthExpression) {
-      this.sectionInternal = Section.MAX;
+      this.#section = Section.MAX;
     } else if (minWidthExpression && maxWidthExpression) {
-      this.sectionInternal = Section.MIN_MAX;
+      this.#section = Section.MIN_MAX;
     } else {
-      this.sectionInternal = Section.MIN;
+      this.#section = Section.MIN;
     }
   }
 
@@ -480,7 +480,7 @@ export class MediaQueryUIModel {
   }
 
   section(): Section {
-    return this.sectionInternal;
+    return this.#section;
   }
 
   mediaText(): string {
@@ -488,21 +488,21 @@ export class MediaQueryUIModel {
   }
 
   rawLocation(): SDK.CSSModel.CSSLocation|null {
-    if (!this.rawLocationInternal) {
-      this.rawLocationInternal = this.cssMedia.rawLocation();
+    if (!this.#rawLocation) {
+      this.#rawLocation = this.cssMedia.rawLocation();
     }
-    return this.rawLocationInternal;
+    return this.#rawLocation;
   }
 
   minWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
-    return this.minWidthExpressionInternal;
+    return this.#minWidthExpression;
   }
 
   maxWidthExpression(): SDK.CSSMedia.CSSMediaQueryExpression|null {
-    return this.maxWidthExpressionInternal;
+    return this.#maxWidthExpression;
   }
 
   active(): boolean {
-    return this.activeInternal;
+    return this.#active;
   }
 }