chrome-devtools-frontend 1.0.1512349 → 1.0.1513662

package/front_end/core/sdk/CSSMatchedStyles.ts

@@ -287,14 +287,14 @@ export class CSSRegisteredProperty {
 }
 
 export class CSSMatchedStyles {
-  #cssModelInternal: CSSModel;
-  #nodeInternal: DOMNode;
+  #cssModel: CSSModel;
+  #node: DOMNode;
   #addedStyles = new Map<CSSStyleDeclaration, DOMNode>();
   #matchingSelectors = new Map<number, Map<string, boolean>>();
-  #keyframesInternal: CSSKeyframesRule[] = [];
+  #keyframes: CSSKeyframesRule[] = [];
   #registeredProperties: CSSRegisteredProperty[];
   #registeredPropertyMap = new Map<string, CSSRegisteredProperty>();
-  #nodeForStyleInternal = new Map<CSSStyleDeclaration, DOMNode|null>();
+  #nodeForStyle = new Map<CSSStyleDeclaration, DOMNode|null>();
   #inheritedStyles = new Set<CSSStyleDeclaration>();
   #styleToDOMCascade = new Map<CSSStyleDeclaration, DOMInheritanceCascade>();
   #parentLayoutNodeId: Protocol.DOM.NodeId|undefined;
@@ -326,14 +326,14 @@ export class CSSMatchedStyles {
     activePositionFallbackIndex,
     functionRules,
   }: CSSMatchedStylesPayload) {
-    this.#cssModelInternal = cssModel;
-    this.#nodeInternal = node;
+    this.#cssModel = cssModel;
+    this.#node = node;
     this.#registeredProperties = [
       ...propertyRules.map(rule => new CSSPropertyRule(cssModel, rule)),
       ...cssPropertyRegistrations,
     ].map(r => new CSSRegisteredProperty(cssModel, r));
     if (animationsPayload) {
-      this.#keyframesInternal = animationsPayload.map(rule => new CSSKeyframesRule(cssModel, rule));
+      this.#keyframes = animationsPayload.map(rule => new CSSKeyframesRule(cssModel, rule));
     }
     this.#positionTryRules = positionTryRules.map(rule => new CSSPositionTryRule(cssModel, rule));
     this.#parentLayoutNodeId = parentLayoutNodeId;
@@ -402,45 +402,45 @@ export class CSSMatchedStyles {
       if (!attributesPayload) {
         return;
       }
-      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, attributesPayload, Type.Attributes);
-      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+      const style = new CSSStyleDeclaration(this.#cssModel, null, attributesPayload, Type.Attributes);
+      this.#nodeForStyle.set(style, this.#node);
       nodeStyles.push(style);
     }
 
     // Transition styles take precedence over animation styles & inline styles.
     if (transitionsStylePayload) {
-      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, transitionsStylePayload, Type.Transition);
-      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+      const style = new CSSStyleDeclaration(this.#cssModel, null, transitionsStylePayload, Type.Transition);
+      this.#nodeForStyle.set(style, this.#node);
       nodeStyles.push(style);
     }
 
     // Animation styles take precedence over inline styles.
     for (const animationsStyle of animationStylesPayload) {
-      const style = new CSSStyleDeclaration(
-          this.#cssModelInternal, null, animationsStyle.style, Type.Animation, animationsStyle.name);
-      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+      const style =
+          new CSSStyleDeclaration(this.#cssModel, null, animationsStyle.style, Type.Animation, animationsStyle.name);
+      this.#nodeForStyle.set(style, this.#node);
       nodeStyles.push(style);
     }
 
     // Inline style takes precedence over regular and inherited rules.
-    if (inlinePayload && this.#nodeInternal.nodeType() === Node.ELEMENT_NODE) {
-      const style = new CSSStyleDeclaration(this.#cssModelInternal, null, inlinePayload, Type.Inline);
-      this.#nodeForStyleInternal.set(style, this.#nodeInternal);
+    if (inlinePayload && this.#node.nodeType() === Node.ELEMENT_NODE) {
+      const style = new CSSStyleDeclaration(this.#cssModel, null, inlinePayload, Type.Inline);
+      this.#nodeForStyle.set(style, this.#node);
       nodeStyles.push(style);
     }
 
     // Add rules in reverse order to match the cascade order.
     let addedAttributesStyle;
     for (let i = matchedPayload.length - 1; i >= 0; --i) {
-      const rule = new CSSStyleRule(this.#cssModelInternal, matchedPayload[i].rule);
+      const rule = new CSSStyleRule(this.#cssModel, matchedPayload[i].rule);
       if ((rule.isInjected() || rule.isUserAgent()) && !addedAttributesStyle) {
         // Show element's Style Attributes after all author rules.
         addedAttributesStyle = true;
         addAttributesStyle.call(this);
       }
-      this.#nodeForStyleInternal.set(rule.style, this.#nodeInternal);
+      this.#nodeForStyle.set(rule.style, this.#node);
       nodeStyles.push(rule.style);
-      this.addMatchingSelectors(this.#nodeInternal, rule, matchedPayload[i].matchingSelectors);
+      this.addMatchingSelectors(this.#node, rule, matchedPayload[i].matchingSelectors);
     }
 
     if (!addedAttributesStyle) {
@@ -449,7 +449,7 @@ export class CSSMatchedStyles {
     nodeCascades.push(new NodeCascade(this, nodeStyles, false /* #isInherited */));
 
     // Walk the node structure and identify styles with inherited properties.
-    let parentNode: (DOMNode|null) = this.#nodeInternal.parentNode;
+    let parentNode: (DOMNode|null) = this.#node.parentNode;
     const traverseParentInFlatTree = async(node: DOMNode): Promise<DOMNode|null> => {
       if (node.hasAssignedSlot()) {
         return await node.assignedSlot?.deferredNode.resolvePromise() ?? null;
@@ -463,19 +463,19 @@ export class CSSMatchedStyles {
       const entryPayload = inheritedPayload[i];
       const inheritedAnimatedEntryPayload = inheritedAnimatedPayload[i];
       const inheritedInlineStyle = entryPayload.inlineStyle ?
-          new CSSStyleDeclaration(this.#cssModelInternal, null, entryPayload.inlineStyle, Type.Inline) :
+          new CSSStyleDeclaration(this.#cssModel, null, entryPayload.inlineStyle, Type.Inline) :
           null;
       const inheritedTransitionsStyle = inheritedAnimatedEntryPayload?.transitionsStyle ?
           new CSSStyleDeclaration(
-              this.#cssModelInternal, null, inheritedAnimatedEntryPayload?.transitionsStyle, Type.Transition) :
+              this.#cssModel, null, inheritedAnimatedEntryPayload?.transitionsStyle, Type.Transition) :
           null;
       const inheritedAnimationStyles =
           inheritedAnimatedEntryPayload?.animationStyles?.map(
               animationStyle => new CSSStyleDeclaration(
-                  this.#cssModelInternal, null, animationStyle.style, Type.Animation, animationStyle.name)) ??
+                  this.#cssModel, null, animationStyle.style, Type.Animation, animationStyle.name)) ??
           [];
       if (inheritedTransitionsStyle && containsInherited(inheritedTransitionsStyle)) {
-        this.#nodeForStyleInternal.set(inheritedTransitionsStyle, parentNode);
+        this.#nodeForStyle.set(inheritedTransitionsStyle, parentNode);
         inheritedStyles.push(inheritedTransitionsStyle);
         this.#inheritedStyles.add(inheritedTransitionsStyle);
       }
@@ -485,20 +485,20 @@ export class CSSMatchedStyles {
           continue;
         }
 
-        this.#nodeForStyleInternal.set(inheritedAnimationsStyle, parentNode);
+        this.#nodeForStyle.set(inheritedAnimationsStyle, parentNode);
         inheritedStyles.push(inheritedAnimationsStyle);
         this.#inheritedStyles.add(inheritedAnimationsStyle);
       }
 
       if (inheritedInlineStyle && containsInherited(inheritedInlineStyle)) {
-        this.#nodeForStyleInternal.set(inheritedInlineStyle, parentNode);
+        this.#nodeForStyle.set(inheritedInlineStyle, parentNode);
         inheritedStyles.push(inheritedInlineStyle);
         this.#inheritedStyles.add(inheritedInlineStyle);
       }
 
       const inheritedMatchedCSSRules = entryPayload.matchedCSSRules || [];
       for (let j = inheritedMatchedCSSRules.length - 1; j >= 0; --j) {
-        const inheritedRule = new CSSStyleRule(this.#cssModelInternal, inheritedMatchedCSSRules[j].rule);
+        const inheritedRule = new CSSStyleRule(this.#cssModel, inheritedMatchedCSSRules[j].rule);
         this.addMatchingSelectors(parentNode, inheritedRule, inheritedMatchedCSSRules[j].matchingSelectors);
         if (!containsInherited(inheritedRule.style)) {
           continue;
@@ -509,7 +509,7 @@ export class CSSMatchedStyles {
             continue;
           }
         }
-        this.#nodeForStyleInternal.set(inheritedRule.style, parentNode);
+        this.#nodeForStyle.set(inheritedRule.style, parentNode);
         inheritedStyles.push(inheritedRule.style);
         this.#inheritedStyles.add(inheritedRule.style);
       }
@@ -538,8 +538,8 @@ export class CSSMatchedStyles {
       const highlightNamesToMatchingSelectorIndices = customHighlightNamesToMatchingSelectorIndices(rules[j]);
 
       for (const [highlightName, matchingSelectors] of highlightNamesToMatchingSelectorIndices) {
-        const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
-        this.#nodeForStyleInternal.set(pseudoRule.style, node);
+        const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
+        this.#nodeForStyle.set(pseudoRule.style, node);
         if (isInherited) {
           this.#inheritedStyles.add(pseudoRule.style);
         }
@@ -580,20 +580,20 @@ export class CSSMatchedStyles {
     for (let i = 0; i < pseudoPayload.length; ++i) {
       const entryPayload = pseudoPayload[i];
       // PseudoElement nodes are not created unless "content" css property is set.
-      const pseudoElement = this.#nodeInternal.pseudoElements().get(entryPayload.pseudoType)?.at(-1) || null;
+      const pseudoElement = this.#node.pseudoElements().get(entryPayload.pseudoType)?.at(-1) || null;
       const pseudoStyles = [];
       const rules = entryPayload.matches || [];
 
       if (entryPayload.pseudoType === Protocol.DOM.PseudoType.Highlight) {
         this.buildSplitCustomHighlightCascades(
-            rules, this.#nodeInternal, false /* #isInherited */, customHighlightPseudoCascades);
+            rules, this.#node, false /* #isInherited */, customHighlightPseudoCascades);
       } else {
         for (let j = rules.length - 1; j >= 0; --j) {
-          const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[j].rule);
+          const pseudoRule = new CSSStyleRule(this.#cssModel, rules[j].rule);
           pseudoStyles.push(pseudoRule.style);
           const nodeForStyle =
-              cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#nodeInternal : pseudoElement;
-          this.#nodeForStyleInternal.set(pseudoRule.style, nodeForStyle);
+              cssMetadata().isHighlightPseudoType(entryPayload.pseudoType) ? this.#node : pseudoElement;
+          this.#nodeForStyle.set(pseudoRule.style, nodeForStyle);
           if (nodeForStyle) {
             this.addMatchingSelectors(nodeForStyle, pseudoRule, rules[j].matchingSelectors);
           }
@@ -606,7 +606,7 @@ export class CSSMatchedStyles {
     }
 
     if (inheritedPseudoPayload) {
-      let parentNode: (DOMNode|null) = this.#nodeInternal.parentNode;
+      let parentNode: (DOMNode|null) = this.#node.parentNode;
       for (let i = 0; parentNode && i < inheritedPseudoPayload.length; ++i) {
         const inheritedPseudoMatches = inheritedPseudoPayload[i].pseudoElements;
         for (let j = 0; j < inheritedPseudoMatches.length; ++j) {
@@ -619,9 +619,9 @@ export class CSSMatchedStyles {
           } else {
             const pseudoStyles = [];
             for (let k = rules.length - 1; k >= 0; --k) {
-              const pseudoRule = new CSSStyleRule(this.#cssModelInternal, rules[k].rule);
+              const pseudoRule = new CSSStyleRule(this.#cssModel, rules[k].rule);
               pseudoStyles.push(pseudoRule.style);
-              this.#nodeForStyleInternal.set(pseudoRule.style, parentNode);
+              this.#nodeForStyle.set(pseudoRule.style, parentNode);
               this.#inheritedStyles.add(pseudoRule.style);
               this.addMatchingSelectors(parentNode, pseudoRule, rules[k].matchingSelectors);
             }
@@ -668,11 +668,11 @@ export class CSSMatchedStyles {
   }
 
   node(): DOMNode {
-    return this.#nodeInternal;
+    return this.#node;
   }
 
   cssModel(): CSSModel {
-    return this.#cssModelInternal;
+    return this.#cssModel;
   }
 
   hasMatchingSelectors(rule: CSSStyleRule): boolean {
@@ -729,7 +729,7 @@ export class CSSMatchedStyles {
       if (typeof ownerDocument.id !== 'number') {
         return;
       }
-      const matchingNodeIds = await this.#nodeInternal.domModel().querySelectorAll(ownerDocument.id, selectorText);
+      const matchingNodeIds = await this.#node.domModel().querySelectorAll(ownerDocument.id, selectorText);
 
       if (matchingNodeIds) {
         if (typeof node.id === 'number') {
@@ -799,7 +799,7 @@ export class CSSMatchedStyles {
   }
 
   keyframes(): CSSKeyframesRule[] {
-    return this.#keyframesInternal;
+    return this.#keyframes;
   }
 
   positionTryRules(): CSSPositionTryRule[] {
@@ -833,7 +833,7 @@ export class CSSMatchedStyles {
   }
 
   nodeForStyle(style: CSSStyleDeclaration): DOMNode|null {
-    return this.#addedStyles.get(style) || this.#nodeForStyleInternal.get(style) || null;
+    return this.#addedStyles.get(style) || this.#nodeForStyle.get(style) || null;
   }
 
   availableCSSVariables(style: CSSStyleDeclaration): string[] {

package/front_end/core/sdk/CSSMedia.ts

@@ -9,13 +9,13 @@ import type {CSSModel} from './CSSModel.js';
 import {CSSQuery} from './CSSQuery.js';
 
 export class CSSMediaQuery {
-  readonly #activeInternal: boolean;
-  readonly #expressionsInternal: CSSMediaQueryExpression[]|null;
+  readonly #active: boolean;
+  readonly #expressions: CSSMediaQueryExpression[]|null;
   constructor(payload: Protocol.CSS.MediaQuery) {
-    this.#activeInternal = payload.active;
-    this.#expressionsInternal = [];
+    this.#active = payload.active;
+    this.#expressions = [];
     for (let j = 0; j < payload.expressions.length; ++j) {
-      this.#expressionsInternal.push(CSSMediaQueryExpression.parsePayload(payload.expressions[j]));
+      this.#expressions.push(CSSMediaQueryExpression.parsePayload(payload.expressions[j]));
     }
   }
 
@@ -24,26 +24,26 @@ export class CSSMediaQuery {
   }
 
   active(): boolean {
-    return this.#activeInternal;
+    return this.#active;
   }
 
   expressions(): CSSMediaQueryExpression[]|null {
-    return this.#expressionsInternal;
+    return this.#expressions;
   }
 }
 
 export class CSSMediaQueryExpression {
-  readonly #valueInternal: number;
-  readonly #unitInternal: string;
-  readonly #featureInternal: string;
-  readonly #valueRangeInternal: TextUtils.TextRange.TextRange|null;
-  readonly #computedLengthInternal: number|null;
+  readonly #value: number;
+  readonly #unit: string;
+  readonly #feature: string;
+  readonly #valueRange: TextUtils.TextRange.TextRange|null;
+  readonly #computedLength: number|null;
   constructor(payload: Protocol.CSS.MediaQueryExpression) {
-    this.#valueInternal = payload.value;
-    this.#unitInternal = payload.unit;
-    this.#featureInternal = payload.feature;
-    this.#valueRangeInternal = payload.valueRange ? TextUtils.TextRange.TextRange.fromObject(payload.valueRange) : null;
-    this.#computedLengthInternal = payload.computedLength || null;
+    this.#value = payload.value;
+    this.#unit = payload.unit;
+    this.#feature = payload.feature;
+    this.#valueRange = payload.valueRange ? TextUtils.TextRange.TextRange.fromObject(payload.valueRange) : null;
+    this.#computedLength = payload.computedLength || null;
   }
 
   static parsePayload(payload: Protocol.CSS.MediaQueryExpression): CSSMediaQueryExpression {
@@ -51,23 +51,23 @@ export class CSSMediaQueryExpression {
   }
 
   value(): number {
-    return this.#valueInternal;
+    return this.#value;
   }
 
   unit(): string {
-    return this.#unitInternal;
+    return this.#unit;
   }
 
   feature(): string {
-    return this.#featureInternal;
+    return this.#feature;
   }
 
   valueRange(): TextUtils.TextRange.TextRange|null {
-    return this.#valueRangeInternal;
+    return this.#valueRange;
   }
 
   computedLength(): number|null {
-    return this.#computedLengthInternal;
+    return this.#computedLength;
   }
 }
 

package/front_end/core/sdk/CSSModel.ts

@@ -1020,13 +1020,13 @@ export class Edit {
 }
 
 export class CSSLocation {
-  readonly #cssModelInternal: CSSModel;
+  readonly #cssModel: CSSModel;
   styleSheetId: Protocol.CSS.StyleSheetId;
   url: Platform.DevToolsPath.UrlString;
   lineNumber: number;
   columnNumber: number;
   constructor(header: CSSStyleSheetHeader, lineNumber: number, columnNumber?: number) {
-    this.#cssModelInternal = header.cssModel();
+    this.#cssModel = header.cssModel();
     this.styleSheetId = header.id;
     this.url = header.resourceURL();
     this.lineNumber = lineNumber;
@@ -1034,11 +1034,11 @@ export class CSSLocation {
   }
 
   cssModel(): CSSModel {
-    return this.#cssModelInternal;
+    return this.#cssModel;
   }
 
   header(): CSSStyleSheetHeader|null {
-    return this.#cssModelInternal.styleSheetHeaderForId(this.styleSheetId);
+    return this.#cssModel.styleSheetHeaderForId(this.styleSheetId);
   }
 }
 

package/front_end/core/sdk/CSSProperty.ts

@@ -42,8 +42,8 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   text: string|null|undefined;
   range: TextUtils.TextRange.TextRange|null;
   #active: boolean;
-  #nameRangeInternal: TextUtils.TextRange.TextRange|null;
-  #valueRangeInternal: TextUtils.TextRange.TextRange|null;
+  #nameRange: TextUtils.TextRange.TextRange|null;
+  #valueRange: TextUtils.TextRange.TextRange|null;
   #invalidString?: Common.UIString.LocalizedString;
   #longhandProperties: CSSProperty[] = [];
 
@@ -63,8 +63,8 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.text = text;
     this.range = range ? TextUtils.TextRange.TextRange.fromObject(range) : null;
     this.#active = true;
-    this.#nameRangeInternal = null;
-    this.#valueRangeInternal = null;
+    this.#nameRange = null;
+    this.#valueRange = null;
 
     if (longhandProperties && longhandProperties.length > 0) {
       for (const property of longhandProperties) {
@@ -125,7 +125,7 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   private ensureRanges(): void {
-    if (this.#nameRangeInternal && this.#valueRangeInternal) {
+    if (this.#nameRange && this.#valueRange) {
       return;
     }
     const range = this.range;
@@ -143,8 +143,8 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const nameSourceRange = new TextUtils.TextRange.SourceRange(nameIndex, this.name.length);
     const valueSourceRange = new TextUtils.TextRange.SourceRange(valueIndex, this.value.length);
 
-    this.#nameRangeInternal = rebase(text.toTextRange(nameSourceRange), range.startLine, range.startColumn);
-    this.#valueRangeInternal = rebase(text.toTextRange(valueSourceRange), range.startLine, range.startColumn);
+    this.#nameRange = rebase(text.toTextRange(nameSourceRange), range.startLine, range.startColumn);
+    this.#valueRange = rebase(text.toTextRange(valueSourceRange), range.startLine, range.startColumn);
 
     function rebase(oneLineRange: TextUtils.TextRange.TextRange, lineOffset: number, columnOffset: number):
         TextUtils.TextRange.TextRange {
@@ -160,12 +160,12 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   nameRange(): TextUtils.TextRange.TextRange|null {
     this.ensureRanges();
-    return this.#nameRangeInternal;
+    return this.#nameRange;
   }
 
   valueRange(): TextUtils.TextRange.TextRange|null {
     this.ensureRanges();
-    return this.#valueRangeInternal;
+    return this.#valueRange;
   }
 
   rebase(edit: Edit): void {

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -74,8 +74,6 @@ export function stripComments(value: string): string {
   return value.replaceAll(/(\/\*(?:.|\s)*?\*\/)/g, '');
 }
 
-const cssParser = CodeMirror.css.cssLanguage.parser;
-
 function nodeText(node: CodeMirror.SyntaxNode, text: string): string {
   return nodeTextRange(node, node, text);
 }
@@ -577,6 +575,7 @@ export namespace ASTUtils {
 }
 
 function declaration(rule: string): CodeMirror.SyntaxNode|null {
+  const cssParser = CodeMirror.css.cssLanguage.parser;
   return cssParser.parse(rule).topNode.getChild('RuleSet')?.getChild('Block')?.getChild('Declaration') ?? null;
 }
 

package/front_end/core/sdk/CSSRule.ts

@@ -265,10 +265,10 @@ export class CSSFontPaletteValuesRule extends CSSRule {
 
 export class CSSKeyframesRule {
   readonly #animationName: CSSValue;
-  readonly #keyframesInternal: CSSKeyframeRule[];
+  readonly #keyframes: CSSKeyframeRule[];
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSKeyframesRule) {
     this.#animationName = new CSSValue(payload.animationName);
-    this.#keyframesInternal =
+    this.#keyframes =
         payload.keyframes.map(keyframeRule => new CSSKeyframeRule(cssModel, keyframeRule, this.#animationName.text));
   }
 
@@ -277,7 +277,7 @@ export class CSSKeyframesRule {
   }
 
   keyframes(): CSSKeyframeRule[] {
-    return this.#keyframesInternal;
+    return this.#keyframes;
   }
 }
 

package/front_end/core/sdk/CSSStyleDeclaration.ts

@@ -12,16 +12,16 @@ import type {CSSRule} from './CSSRule.js';
 import type {Target} from './Target.js';
 
 export class CSSStyleDeclaration {
-  readonly #cssModelInternal: CSSModel;
+  readonly #cssModel: CSSModel;
   parentRule: CSSRule|null;
-  #allPropertiesInternal!: CSSProperty[];
+  #allProperties!: CSSProperty[];
   styleSheetId?: Protocol.CSS.StyleSheetId;
   range!: TextUtils.TextRange.TextRange|null;
   cssText?: string;
   #shorthandValues = new Map<string, string>();
   #shorthandIsImportant = new Set<string>();
   #activePropertyMap = new Map<string, CSSProperty>();
-  #leadingPropertiesInternal!: CSSProperty[]|null;
+  #leadingProperties!: CSSProperty[]|null;
   type: Type;
   // For CSSStyles coming from animations,
   // This holds the name of the animation.
@@ -29,7 +29,7 @@ export class CSSStyleDeclaration {
   constructor(
       cssModel: CSSModel, parentRule: CSSRule|null, payload: Protocol.CSS.CSSStyle, type: Type,
       animationName?: string) {
-    this.#cssModelInternal = cssModel;
+    this.#cssModel = cssModel;
     this.parentRule = parentRule;
     this.#reinitialize(payload);
     this.type = type;
@@ -44,8 +44,8 @@ export class CSSStyleDeclaration {
       this.#reinitialize((edit.payload as Protocol.CSS.CSSStyle));
     } else {
       this.range = this.range.rebaseAfterTextEdit(edit.oldRange, edit.newRange);
-      for (let i = 0; i < this.#allPropertiesInternal.length; ++i) {
-        this.#allPropertiesInternal[i].rebase(edit);
+      for (let i = 0; i < this.#allProperties.length; ++i) {
+        this.#allProperties[i].rebase(edit);
       }
     }
   }
@@ -68,7 +68,7 @@ export class CSSStyleDeclaration {
       }
     }
 
-    this.#allPropertiesInternal = [];
+    this.#allProperties = [];
 
     if (payload.cssText && this.range) {
       const longhands = [];
@@ -77,20 +77,19 @@ export class CSSStyleDeclaration {
         if (!range) {
           continue;
         }
-        const parsedProperty = CSSProperty.parsePayload(this, this.#allPropertiesInternal.length, cssProperty);
-        this.#allPropertiesInternal.push(parsedProperty);
+        const parsedProperty = CSSProperty.parsePayload(this, this.#allProperties.length, cssProperty);
+        this.#allProperties.push(parsedProperty);
         for (const longhand of parsedProperty.getLonghandProperties()) {
           longhands.push(longhand);
         }
       }
       for (const longhand of longhands) {
-        longhand.index = this.#allPropertiesInternal.length;
-        this.#allPropertiesInternal.push(longhand);
+        longhand.index = this.#allProperties.length;
+        this.#allProperties.push(longhand);
       }
     } else {
       for (const cssProperty of payload.cssProperties) {
-        this.#allPropertiesInternal.push(
-            CSSProperty.parsePayload(this, this.#allPropertiesInternal.length, cssProperty));
+        this.#allProperties.push(CSSProperty.parsePayload(this, this.#allProperties.length, cssProperty));
       }
     }
 
@@ -100,7 +99,7 @@ export class CSSStyleDeclaration {
     // TODO(changhaohan): verify if this #activePropertyMap is still necessary, or if it is
     // providing different information against the activeness in allPropertiesInternal.
     this.#activePropertyMap = new Map();
-    for (const property of this.#allPropertiesInternal) {
+    for (const property of this.#allProperties) {
       if (!property.activeInStyle()) {
         continue;
       }
@@ -108,7 +107,7 @@ export class CSSStyleDeclaration {
     }
 
     this.cssText = payload.cssText;
-    this.#leadingPropertiesInternal = null;
+    this.#leadingProperties = null;
   }
 
   #generateSyntheticPropertiesIfNeeded(): void {
@@ -121,13 +120,13 @@ export class CSSStyleDeclaration {
     }
 
     const propertiesSet = new Set<string>();
-    for (const property of this.#allPropertiesInternal) {
+    for (const property of this.#allProperties) {
       propertiesSet.add(property.name);
     }
 
     const generatedProperties = [];
     // For style-based properties, generate #shorthands with values when possible.
-    for (const property of this.#allPropertiesInternal) {
+    for (const property of this.#allProperties) {
       // For style-based properties, try generating #shorthands.
       const shorthands = cssMetadata().getShorthands(property.name) || [];
       for (const shorthand of shorthands) {
@@ -147,7 +146,7 @@ export class CSSStyleDeclaration {
         propertiesSet.add(shorthand);
       }
     }
-    this.#allPropertiesInternal = this.#allPropertiesInternal.concat(generatedProperties);
+    this.#allProperties = this.#allProperties.concat(generatedProperties);
   }
 
   #computeLeadingProperties(): CSSProperty[] {
@@ -156,11 +155,11 @@ export class CSSStyleDeclaration {
     }
 
     if (this.range) {
-      return this.#allPropertiesInternal.filter(propertyHasRange);
+      return this.#allProperties.filter(propertyHasRange);
     }
 
     const leadingProperties = [];
-    for (const property of this.#allPropertiesInternal) {
+    for (const property of this.#allProperties) {
       const shorthands = cssMetadata().getShorthands(property.name) || [];
       let belongToAnyShorthand = false;
       for (const shorthand of shorthands) {
@@ -178,18 +177,18 @@ export class CSSStyleDeclaration {
   }
 
   leadingProperties(): CSSProperty[] {
-    if (!this.#leadingPropertiesInternal) {
-      this.#leadingPropertiesInternal = this.#computeLeadingProperties();
+    if (!this.#leadingProperties) {
+      this.#leadingProperties = this.#computeLeadingProperties();
     }
-    return this.#leadingPropertiesInternal;
+    return this.#leadingProperties;
   }
 
   target(): Target {
-    return this.#cssModelInternal.target();
+    return this.#cssModel.target();
   }
 
   cssModel(): CSSModel {
-    return this.#cssModelInternal;
+    return this.#cssModel;
   }
 
   #computeInactiveProperties(): void {
@@ -198,7 +197,7 @@ export class CSSStyleDeclaration {
     // 1. regular property, including shorthands
     // 2. longhand components from shorthands, in the order of their shorthands.
     const processedLonghands = new Set();
-    for (const property of this.#allPropertiesInternal) {
+    for (const property of this.#allProperties) {
       const metadata = cssMetadata();
       const canonicalName = metadata.canonicalPropertyName(property.name);
       if (property.disabled || !property.parsedOk) {
@@ -239,7 +238,7 @@ export class CSSStyleDeclaration {
   }
 
   allProperties(): CSSProperty[] {
-    return this.#allPropertiesInternal;
+    return this.#allProperties;
   }
 
   hasActiveProperty(name: string): boolean {
@@ -290,7 +289,7 @@ export class CSSStyleDeclaration {
     if (!this.range || !this.styleSheetId) {
       return Promise.resolve(false);
     }
-    return this.#cssModelInternal.setStyleText(this.styleSheetId, this.range, text, majorChange);
+    return this.#cssModel.setStyleText(this.styleSheetId, this.range, text, majorChange);
   }
 
   insertPropertyAt(index: number, name: string, value: string, userCallback?: ((arg0: boolean) => void)): void {