commit 57a10b3ef1f07fe112c88e4e555c7298a5d9357b
parent c12f09de89f268c52b55ecc07e6f9533da4b9877
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 5 Dec 2025 16:12:19 +0000
Bug 2003846 - [devtools] Use proper private properties and methods in css-logic.js r=devtools-reviewers,jdescottes
Differential Revision: https://phabricator.services.mozilla.com/D274949
Diffstat:
1 file changed, 211 insertions(+), 203 deletions(-)
diff --git a/devtools/server/actors/inspector/css-logic.js b/devtools/server/actors/inspector/css-logic.js
@@ -47,10 +47,6 @@ const COMPAREMODE = {
};
class CssLogic {
- constructor() {
- this._propertyInfos = {};
- }
-
/**
* If the element has an id, return '#id'. Otherwise return 'tagname[n]' where
* n is the index of this element in its siblings.
@@ -163,50 +159,54 @@ class CssLogic {
*/
static hasVisitedState = hasVisitedState;
+ // Used for tracking matched CssSelector objects.
+ matchId = 0;
+
+ // Used for tracking unique CssSheet/CssRule/CssSelector objects, in a run of
+ // processMatchedSelectors().
+ passId = 0;
+
// Both setup by highlight().
viewedElement = null;
viewedDocument = null;
+ #propertyInfos = {};
+
// The cache of the known sheets.
- _sheets = null;
+ #sheets = null;
// Have the sheets been cached?
- _sheetsCached = false;
+ #sheetsCached = false;
+
+ #sheetIndex = 0;
// The total number of rules, in all stylesheets, after filtering.
- _ruleCount = 0;
+ #ruleCount = 0;
// The computed styles for the viewedElement.
- _computedStyle = null;
+ #computedStyle = null;
// Source filter. Only display properties coming from the given source
- _sourceFilter = FILTER.USER;
-
- // Used for tracking unique CssSheet/CssRule/CssSelector objects, in a run of
- // processMatchedSelectors().
- _passId = 0;
-
- // Used for tracking matched CssSelector objects.
- _matchId = 0;
+ #sourceFilter = FILTER.USER;
- _matchedRules = null;
- _matchedSelectors = null;
+ #matchedRules = null;
+ #matchedSelectors = null;
// Cached keyframes rules in all stylesheets
- _keyframesRules = null;
+ #keyframesRules = null;
/**
* Reset various properties
*/
reset() {
- this._propertyInfos = {};
- this._ruleCount = 0;
- this._sheetIndex = 0;
- this._sheets = {};
- this._sheetsCached = false;
- this._matchedRules = null;
- this._matchedSelectors = null;
- this._keyframesRules = [];
+ this.#propertyInfos = {};
+ this.#ruleCount = 0;
+ this.#sheetIndex = 0;
+ this.#sheets = {};
+ this.#sheetsCached = false;
+ this.#matchedRules = null;
+ this.#matchedSelectors = null;
+ this.#keyframesRules = [];
}
/**
@@ -219,7 +219,7 @@ class CssLogic {
if (!viewedElement) {
this.viewedElement = null;
this.viewedDocument = null;
- this._computedStyle = null;
+ this.#computedStyle = null;
this.reset();
return;
}
@@ -236,15 +236,15 @@ class CssLogic {
this.viewedDocument = doc;
// Hunt down top level stylesheets, and cache them.
- this._cacheSheets();
+ this.#cacheSheets();
} else {
// Clear cached data in the CssPropertyInfo objects.
- this._propertyInfos = {};
+ this.#propertyInfos = {};
}
- this._matchedRules = null;
- this._matchedSelectors = null;
- this._computedStyle = CssLogic.getComputedStyle(this.viewedElement);
+ this.#matchedRules = null;
+ this.#matchedSelectors = null;
+ this.#computedStyle = CssLogic.getComputedStyle(this.viewedElement);
}
/**
@@ -254,7 +254,7 @@ class CssLogic {
* @returns {object} The computed CSS properties for a selected element
*/
get computedStyle() {
- return this._computedStyle;
+ return this.#computedStyle;
}
/**
@@ -263,7 +263,7 @@ class CssLogic {
* @returns {string} The source filter being used.
*/
get sourceFilter() {
- return this._sourceFilter;
+ return this.#sourceFilter;
}
/**
@@ -274,8 +274,8 @@ class CssLogic {
* @see FILTER.*
*/
set sourceFilter(value) {
- const oldValue = this._sourceFilter;
- this._sourceFilter = value;
+ const oldValue = this.#sourceFilter;
+ this.#sourceFilter = value;
let ruleCount = 0;
@@ -286,20 +286,20 @@ class CssLogic {
}
}, this);
- this._ruleCount = ruleCount;
+ this.#ruleCount = ruleCount;
// Full update is needed because the this.processMatchedSelectors() method
// skips UA stylesheets if the filter does not allow such sheets.
const needFullUpdate = oldValue == FILTER.UA || value == FILTER.UA;
if (needFullUpdate) {
- this._matchedRules = null;
- this._matchedSelectors = null;
- this._propertyInfos = {};
+ this.#matchedRules = null;
+ this.#matchedSelectors = null;
+ this.#propertyInfos = {};
} else {
// Update the CssPropertyInfo objects.
- for (const property in this._propertyInfos) {
- this._propertyInfos[property].needRefilter = true;
+ for (const property in this.#propertyInfos) {
+ this.#propertyInfos[property].needRefilter = true;
}
}
}
@@ -318,10 +318,10 @@ class CssLogic {
return {};
}
- let info = this._propertyInfos[property];
+ let info = this.#propertyInfos[property];
if (!info) {
info = new CssPropertyInfo(this, property);
- this._propertyInfos[property] = info;
+ this.#propertyInfos[property] = info;
}
return info;
@@ -332,8 +332,8 @@ class CssLogic {
*
* @private
*/
- _cacheSheets() {
- this._passId++;
+ #cacheSheets() {
+ this.passId++;
this.reset();
// styleSheets isn't an array, but forEach can work on it anyway
@@ -341,9 +341,9 @@ class CssLogic {
this.viewedDocument,
true
);
- Array.prototype.forEach.call(styleSheets, this._cacheSheet, this);
+ Array.prototype.forEach.call(styleSheets, this.#cacheSheet, this);
- this._sheetsCached = true;
+ this.#sheetsCached = true;
}
/**
@@ -355,7 +355,7 @@ class CssLogic {
* @private
* @param {CSSStyleSheet} domSheet the CSSStyleSheet object to cache.
*/
- _cacheSheet(domSheet) {
+ #cacheSheet(domSheet) {
if (domSheet.disabled) {
return;
}
@@ -366,9 +366,9 @@ class CssLogic {
}
// Cache the sheet.
- const cssSheet = this.getSheet(domSheet, this._sheetIndex++);
- if (cssSheet._passId != this._passId) {
- cssSheet._passId = this._passId;
+ const cssSheet = this.getSheet(domSheet, this.#sheetIndex++);
+ if (cssSheet.passId != this.passId) {
+ cssSheet.passId = this.passId;
// Find import and keyframes rules. We loop through all the stylesheet recursively,
// so we can go through nested rules.
@@ -380,9 +380,9 @@ class CssLogic {
aDomRule.styleSheet &&
this.mediaMatches(aDomRule)
) {
- this._cacheSheet(aDomRule.styleSheet);
+ this.#cacheSheet(aDomRule.styleSheet);
} else if (ruleClassName === "CSSKeyframesRule") {
- this._keyframesRules.push(aDomRule);
+ this.#keyframesRules.push(aDomRule);
}
if (aDomRule.cssRules) {
@@ -401,8 +401,8 @@ class CssLogic {
* @return {Array} the list of stylesheets in the document.
*/
get sheets() {
- if (!this._sheetsCached) {
- this._cacheSheets();
+ if (!this.#sheetsCached) {
+ this.#cacheSheets();
}
const sheets = [];
@@ -421,10 +421,10 @@ class CssLogic {
* @ return {array} the list of keyframes rules in the document.
*/
get keyframesRules() {
- if (!this._sheetsCached) {
- this._cacheSheets();
+ if (!this.#sheetsCached) {
+ this.#cacheSheets();
}
- return this._keyframesRules;
+ return this.#keyframesRules;
}
/**
@@ -449,8 +449,8 @@ class CssLogic {
let sheet = null;
let sheetFound = false;
- if (cacheId in this._sheets) {
- for (sheet of this._sheets[cacheId]) {
+ if (cacheId in this.#sheets) {
+ for (sheet of this.#sheets[cacheId]) {
if (sheet.domSheet === domSheet) {
if (index != -1) {
sheet.index = index;
@@ -462,16 +462,16 @@ class CssLogic {
}
if (!sheetFound) {
- if (!(cacheId in this._sheets)) {
- this._sheets[cacheId] = [];
+ if (!(cacheId in this.#sheets)) {
+ this.#sheets[cacheId] = [];
}
sheet = new CssSheet(this, domSheet, index);
if (sheet.sheetAllowed && sheet.authorSheet) {
- this._ruleCount += sheet.ruleCount;
+ this.#ruleCount += sheet.ruleCount;
}
- this._sheets[cacheId].push(sheet);
+ this.#sheets[cacheId].push(sheet);
}
return sheet;
@@ -486,8 +486,8 @@ class CssLogic {
* will be the this object when callback executes.
*/
forEachSheet(callback, scope) {
- for (const cacheId in this._sheets) {
- const sheets = this._sheets[cacheId];
+ for (const cacheId in this.#sheets) {
+ const sheets = this.#sheets[cacheId];
for (let i = 0; i < sheets.length; i++) {
// We take this as an opportunity to clean dead sheets
try {
@@ -518,11 +518,11 @@ class CssLogic {
* @return {number} the number of CSSRule (all rules).
*/
get ruleCount() {
- if (!this._sheetsCached) {
- this._cacheSheets();
+ if (!this.#sheetsCached) {
+ this.#cacheSheets();
}
- return this._ruleCount;
+ return this.#ruleCount;
}
/**
@@ -542,43 +542,43 @@ class CssLogic {
* will be the this object when callback executes.
*/
processMatchedSelectors(callback, scope) {
- if (this._matchedSelectors) {
+ if (this.#matchedSelectors) {
if (callback) {
- this._passId++;
- this._matchedSelectors.forEach(function (value) {
+ this.passId++;
+ this.#matchedSelectors.forEach(function (value) {
callback.call(scope, value[0], value[1]);
- value[0].cssRule._passId = this._passId;
+ value[0].cssRule.passId = this.passId;
}, this);
}
return;
}
- if (!this._matchedRules) {
- this._buildMatchedRules();
+ if (!this.#matchedRules) {
+ this.#buildMatchedRules();
}
- this._matchedSelectors = [];
- this._passId++;
+ this.#matchedSelectors = [];
+ this.passId++;
- for (const matchedRule of this._matchedRules) {
+ for (const matchedRule of this.#matchedRules) {
const [rule, status, distance] = matchedRule;
rule.selectors.forEach(function (selector) {
if (
- selector._matchId !== this._matchId &&
+ selector.matchId !== this.matchId &&
(rule.domRule.declarationOrigin === "style-attribute" ||
rule.domRule.declarationOrigin === "pres-hints" ||
this.selectorMatchesElement(rule.domRule, selector.selectorIndex))
) {
- selector._matchId = this._matchId;
- this._matchedSelectors.push([selector, status, distance]);
+ selector.matchId = this.matchId;
+ this.#matchedSelectors.push([selector, status, distance]);
if (callback) {
callback.call(scope, selector, status, distance);
}
}
}, this);
- rule._passId = this._passId;
+ rule.passId = this.passId;
}
}
@@ -628,13 +628,13 @@ class CssLogic {
* @return {Set<string>} A Set containing the properties that do have matched selectors.
*/
hasMatchedSelectors(properties) {
- if (!this._matchedRules) {
- this._buildMatchedRules();
+ if (!this.#matchedRules) {
+ this.#buildMatchedRules();
}
const result = new Set();
- for (const [rule, status] of this._matchedRules) {
+ for (const [rule, status] of this.#matchedRules) {
// Getting the rule cssText can be costly, so cache it
let cssText;
const getCssText = () => {
@@ -686,7 +686,7 @@ class CssLogic {
*
* @private
*/
- _buildMatchedRules() {
+ #buildMatchedRules() {
let domRules;
let element = this.viewedElement;
const filter = this.sourceFilter;
@@ -699,9 +699,9 @@ class CssLogic {
// etc.
let distance = 0;
- this._matchId++;
- this._passId++;
- this._matchedRules = [];
+ this.matchId++;
+ this.passId++;
+ this.#matchedRules = [];
if (!element) {
return;
@@ -742,16 +742,16 @@ class CssLogic {
},
element
);
- rule._matchId = this._matchId;
- rule._passId = this._passId;
- this._matchedRules.push([rule, status, distance]);
+ rule.matchId = this.matchId;
+ rule.passId = this.passId;
+ this.#matchedRules.push([rule, status, distance]);
continue;
}
const sheet = this.getSheet(domRule.parentStyleSheet, -1);
- if (sheet._passId !== this._passId) {
+ if (sheet.passId !== this.passId) {
sheet.index = sheetIndex++;
- sheet._passId = this._passId;
+ sheet.passId = this.passId;
}
if (filter === FILTER.USER && !sheet.authorSheet) {
@@ -759,13 +759,13 @@ class CssLogic {
}
const rule = sheet.getRule(domRule);
- if (rule._passId === this._passId) {
+ if (rule.passId === this.passId) {
continue;
}
- rule._matchId = this._matchId;
- rule._passId = this._passId;
- this._matchedRules.push([rule, status, distance]);
+ rule.matchId = this.matchId;
+ rule.passId = this.passId;
+ this.#matchedRules.push([rule, status, distance]);
}
}
@@ -806,28 +806,30 @@ class CssSheet {
* main document.
*/
constructor(cssLogic, domSheet, index) {
- this._cssLogic = cssLogic;
+ this.#cssLogic = cssLogic;
this.domSheet = domSheet;
this.index = this.authorSheet ? index : -100 * index;
+ }
- // Cache of the sheets href. Cached by the getter.
- this._href = null;
- // Short version of href for use in select boxes etc. Cached by getter.
- this._shortSource = null;
+ #cssLogic;
+ // Cache of the sheets href. Cached by the getter.
+ #href = null;
- // null for uncached.
- this._sheetAllowed = null;
+ // Short version of href for use in select boxes etc. Cached by getter.
+ #shortSource = null;
- // Cached CssRules from the given stylesheet.
- this._rules = {};
+ // Cached CssRules from the given stylesheet.
+ #rules = {};
- this._ruleCount = -1;
- }
+ // null for uncached.
+ #sheetAllowed = null;
+
+ #ruleCount = -1;
- _passId = null;
- _agentSheet = null;
- _authorSheet = null;
- _userSheet = null;
+ passId = null;
+ #agentSheet = null;
+ #authorSheet = null;
+ #userSheet = null;
/**
* Check if the stylesheet is an agent stylesheet (provided by the browser).
@@ -835,10 +837,10 @@ class CssSheet {
* @return {boolean} true if this is an agent stylesheet, false otherwise.
*/
get agentSheet() {
- if (this._agentSheet === null) {
- this._agentSheet = isAgentStylesheet(this.domSheet);
+ if (this.#agentSheet === null) {
+ this.#agentSheet = isAgentStylesheet(this.domSheet);
}
- return this._agentSheet;
+ return this.#agentSheet;
}
/**
@@ -847,10 +849,10 @@ class CssSheet {
* @return {boolean} true if this is an author stylesheet, false otherwise.
*/
get authorSheet() {
- if (this._authorSheet === null) {
- this._authorSheet = isAuthorStylesheet(this.domSheet);
+ if (this.#authorSheet === null) {
+ this.#authorSheet = isAuthorStylesheet(this.domSheet);
}
- return this._authorSheet;
+ return this.#authorSheet;
}
/**
@@ -860,10 +862,10 @@ class CssSheet {
* @return {boolean} true if this is a user stylesheet, false otherwise.
*/
get userSheet() {
- if (this._userSheet === null) {
- this._userSheet = isUserStylesheet(this.domSheet);
+ if (this.#userSheet === null) {
+ this.#userSheet = isUserStylesheet(this.domSheet);
}
- return this._userSheet;
+ return this.#userSheet;
}
/**
@@ -881,12 +883,12 @@ class CssSheet {
* @return {string} the address of the stylesheet.
*/
get href() {
- if (this._href) {
- return this._href;
+ if (this.#href) {
+ return this.#href;
}
- this._href = CssLogic.href(this.domSheet);
- return this._href;
+ this.#href = CssLogic.href(this.domSheet);
+ return this.#href;
}
/**
@@ -895,12 +897,12 @@ class CssSheet {
* @return {string} the shorthand source of the stylesheet.
*/
get shortSource() {
- if (this._shortSource) {
- return this._shortSource;
+ if (this.#shortSource) {
+ return this.#shortSource;
}
- this._shortSource = shortSource(this.domSheet);
- return this._shortSource;
+ this.#shortSource = shortSource(this.domSheet);
+ return this.#shortSource;
}
/**
@@ -910,21 +912,21 @@ class CssSheet {
* false otherwise.
*/
get sheetAllowed() {
- if (this._sheetAllowed !== null) {
- return this._sheetAllowed;
+ if (this.#sheetAllowed !== null) {
+ return this.#sheetAllowed;
}
- this._sheetAllowed = true;
+ this.#sheetAllowed = true;
- const filter = this._cssLogic.sourceFilter;
+ const filter = this.#cssLogic.sourceFilter;
if (filter === FILTER.USER && !this.authorSheet) {
- this._sheetAllowed = false;
+ this.#sheetAllowed = false;
}
if (filter !== FILTER.USER && filter !== FILTER.UA) {
- this._sheetAllowed = filter === this.href;
+ this.#sheetAllowed = filter === this.href;
}
- return this._sheetAllowed;
+ return this.#sheetAllowed;
}
/**
@@ -934,7 +936,7 @@ class CssSheet {
*/
get ruleCount() {
try {
- return this._ruleCount > -1 ? this._ruleCount : this.getCssRules().length;
+ return this.#ruleCount > -1 ? this.#ruleCount : this.getCssRules().length;
} catch (e) {
return 0;
}
@@ -972,8 +974,8 @@ class CssSheet {
let rule = null;
let ruleFound = false;
- if (cacheId in this._rules) {
- for (rule of this._rules[cacheId]) {
+ if (cacheId in this.#rules) {
+ for (rule of this.#rules[cacheId]) {
if (rule.domRule === domRule) {
ruleFound = true;
break;
@@ -982,12 +984,12 @@ class CssSheet {
}
if (!ruleFound) {
- if (!(cacheId in this._rules)) {
- this._rules[cacheId] = [];
+ if (!(cacheId in this.#rules)) {
+ this.#rules[cacheId] = [];
}
rule = new CssRule(this, domRule);
- this._rules[cacheId].push(rule);
+ this.#rules[cacheId].push(rule);
}
return rule;
@@ -1013,18 +1015,18 @@ class CssRule {
* @constructor
*/
constructor(cssSheet, domRule, element) {
- this._cssSheet = cssSheet;
+ this.#cssSheet = cssSheet;
this.domRule = domRule;
- if (this._cssSheet) {
+ if (this.#cssSheet) {
// parse domRule.selectorText on call to this.selectors
- this._selectors = null;
+ this.#selectors = null;
this.line = InspectorUtils.getRelativeRuleLine(this.domRule);
this.column = InspectorUtils.getRuleColumn(this.domRule);
- this.href = this._cssSheet.href;
- this.authorRule = this._cssSheet.authorSheet;
- this.userRule = this._cssSheet.userSheet;
- this.agentRule = this._cssSheet.agentSheet;
+ this.href = this.#cssSheet.href;
+ this.authorRule = this.#cssSheet.authorSheet;
+ this.userRule = this.#cssSheet.userSheet;
+ this.agentRule = this.#cssSheet.agentSheet;
} else if (element) {
let selector = "";
if (domRule.declarationOrigin === "style-attribute") {
@@ -1033,7 +1035,7 @@ class CssRule {
selector = "@element.attributesStyle";
}
- this._selectors = [new CssSelector(this, selector, 0)];
+ this.#selectors = [new CssSelector(this, selector, 0)];
this.line = -1;
this.href = "#";
this.authorRule = true;
@@ -1043,7 +1045,10 @@ class CssRule {
}
}
- _passId = null;
+ passId = null;
+
+ #cssSheet;
+ #selectors;
/**
* Check if the parent stylesheet is allowed by the CssLogic.sourceFilter.
@@ -1052,7 +1057,7 @@ class CssRule {
* sourceFilter, or false otherwise.
*/
get sheetAllowed() {
- return this._cssSheet ? this._cssSheet.sheetAllowed : true;
+ return this.#cssSheet ? this.#cssSheet.sheetAllowed : true;
}
/**
@@ -1062,7 +1067,7 @@ class CssRule {
* document.
*/
get sheetIndex() {
- return this._cssSheet ? this._cssSheet.index : 0;
+ return this.#cssSheet ? this.#cssSheet.index : 0;
}
/**
@@ -1108,24 +1113,24 @@ class CssRule {
* @return {Array} the array hold the CssSelector objects.
*/
get selectors() {
- if (this._selectors) {
- return this._selectors;
+ if (this.#selectors) {
+ return this.#selectors;
}
// Parse the CSSStyleRule.selectorText string.
- this._selectors = [];
+ this.#selectors = [];
if (!this.domRule.selectorText) {
- return this._selectors;
+ return this.#selectors;
}
const selectors = CssLogic.getSelectors(this.domRule);
for (let i = 0, len = selectors.length; i < len; i++) {
- this._selectors.push(new CssSelector(this, selectors[i], i));
+ this.#selectors.push(new CssSelector(this, selectors[i], i));
}
- return this._selectors;
+ return this.#selectors;
}
toString() {
@@ -1147,11 +1152,12 @@ class CssSelector {
this.cssRule = cssRule;
this.text = selector;
this.inlineStyle = cssRule.domRule?.declarationOrigin === "style-attribute";
- this._specificity = null;
this.selectorIndex = index;
}
- _matchId = null;
+ matchId = null;
+
+ #specificity = null;
/**
* Retrieve the CssSelector source element, which is the source of the CssRule
@@ -1267,13 +1273,13 @@ class CssSelector {
return 0;
}
- if (typeof this._specificity !== "number") {
- this._specificity = this.cssRule.domRule.selectorSpecificityAt(
+ if (typeof this.#specificity !== "number") {
+ this.#specificity = this.cssRule.domRule.selectorSpecificityAt(
this.selectorIndex
);
}
- return this._specificity;
+ return this.#specificity;
}
toString() {
@@ -1286,7 +1292,7 @@ class CssPropertyInfo {
* A cache of information about the matched rules, selectors and values attached
* to a CSS property, for the highlighted element.
*
- * The heart of the CssPropertyInfo object is the _findMatchedSelectors()
+ * The heart of the CssPropertyInfo object is the #findMatchedSelectors()
* method. This are invoked when the PropertyView tries to access the
* .matchedSelectors array.
* Results are cached, for later reuse.
@@ -1296,17 +1302,19 @@ class CssPropertyInfo {
* @constructor
*/
constructor(cssLogic, property) {
- this._cssLogic = cssLogic;
+ this.#cssLogic = cssLogic;
this.property = property;
- this._value = "";
-
- // An array holding CssSelectorInfo objects for each of the matched selectors
- // that are inside a CSS rule. Only rules that hold the this.property are
- // counted. This includes rules that come from filtered stylesheets (those
- // that have sheetAllowed = false).
- this._matchedSelectors = null;
}
+ // An array holding CssSelectorInfo objects for each of the matched selectors
+ // that are inside a CSS rule. Only rules that hold the this.property are
+ // counted. This includes rules that come from filtered stylesheets (those
+ // that have sheetAllowed = false).
+ #matchedSelectors = null;
+
+ #cssLogic;
+ #value = "";
+
/**
* Retrieve the computed style value for the current property, for the
* highlighted element.
@@ -1315,9 +1323,9 @@ class CssPropertyInfo {
* highlighted element.
*/
get value() {
- if (!this._value && this._cssLogic.computedStyle) {
+ if (!this.#value && this.#cssLogic.computedStyle) {
try {
- this._value = this._cssLogic.computedStyle.getPropertyValue(
+ this.#value = this.#cssLogic.computedStyle.getPropertyValue(
this.property
);
} catch (ex) {
@@ -1325,7 +1333,7 @@ class CssPropertyInfo {
console.log(ex);
}
}
- return this._value;
+ return this.#value;
}
/**
@@ -1337,40 +1345,40 @@ class CssPropertyInfo {
* the highlighted element and its parents.
*/
get matchedSelectors() {
- if (!this._matchedSelectors) {
- this._findMatchedSelectors();
+ if (!this.#matchedSelectors) {
+ this.#findMatchedSelectors();
} else if (this.needRefilter) {
- this._refilterSelectors();
+ this.#refilterSelectors();
}
- return this._matchedSelectors;
+ return this.#matchedSelectors;
}
/**
* Find the selectors that match the highlighted element and its parents.
* Uses CssLogic.processMatchedSelectors() to find the matched selectors,
- * passing in a reference to CssPropertyInfo._processMatchedSelector() to
+ * passing in a reference to CssPropertyInfo.#processMatchedSelector() to
* create CssSelectorInfo objects, which we then sort
*
* @private
*/
- _findMatchedSelectors() {
- this._matchedSelectors = [];
+ #findMatchedSelectors() {
+ this.#matchedSelectors = [];
this.needRefilter = false;
- this._cssLogic.processMatchedSelectors(this._processMatchedSelector, this);
+ this.#cssLogic.processMatchedSelectors(this.#processMatchedSelector, this);
// Sort the selectors by how well they match the given element.
- this._matchedSelectors.sort((selectorInfo1, selectorInfo2) =>
- selectorInfo1.compareTo(selectorInfo2, this._matchedSelectors)
+ this.#matchedSelectors.sort((selectorInfo1, selectorInfo2) =>
+ selectorInfo1.compareTo(selectorInfo2, this.#matchedSelectors)
);
// Now we know which of the matches is best, we can mark it BEST_MATCH.
if (
- this._matchedSelectors.length &&
- this._matchedSelectors[0].status > STATUS.UNMATCHED
+ this.#matchedSelectors.length &&
+ this.#matchedSelectors[0].status > STATUS.UNMATCHED
) {
- this._matchedSelectors[0].status = STATUS.BEST;
+ this.#matchedSelectors[0].status = STATUS.BEST;
}
}
@@ -1380,9 +1388,9 @@ class CssPropertyInfo {
* @private
* @param {CssSelector} selector: the matched CssSelector object.
* @param {STATUS} status: the CssSelector match status.
- * @param {Int} distance: See CssLogic._buildMatchedRules for definition.
+ * @param {Int} distance: See CssLogic.#buildMatchedRules for definition.
*/
- _processMatchedSelector(selector, status, distance) {
+ #processMatchedSelector(selector, status, distance) {
const cssRule = selector.cssRule;
const value = cssRule.getPropertyValue(this.property);
if (
@@ -1390,7 +1398,7 @@ class CssPropertyInfo {
(status == STATUS.MATCHED ||
(status == STATUS.PARENT_MATCH &&
InspectorUtils.isInheritedProperty(
- this._cssLogic.viewedDocument,
+ this.#cssLogic.viewedDocument,
this.property
)))
) {
@@ -1401,7 +1409,7 @@ class CssPropertyInfo {
status,
distance
);
- this._matchedSelectors.push(selectorInfo);
+ this.#matchedSelectors.push(selectorInfo);
}
}
@@ -1411,18 +1419,18 @@ class CssPropertyInfo {
*
* @private
*/
- _refilterSelectors() {
- const passId = ++this._cssLogic._passId;
+ #refilterSelectors() {
+ const passId = ++this.#cssLogic.passId;
const iterator = function (selectorInfo) {
const cssRule = selectorInfo.selector.cssRule;
- if (cssRule._passId != passId) {
- cssRule._passId = passId;
+ if (cssRule.passId != passId) {
+ cssRule.passId = passId;
}
};
- if (this._matchedSelectors) {
- this._matchedSelectors.forEach(iterator);
+ if (this.#matchedSelectors) {
+ this.#matchedSelectors.forEach(iterator);
}
this.needRefilter = false;
@@ -1449,7 +1457,7 @@ class CssSelectorInfo {
* @param {string} value The property value from the CssRule that owns
* the selector.
* @param {STATUS} status The selector match status.
- * @param {number} distance See CssLogic._buildMatchedRules for definition.
+ * @param {number} distance See CssLogic.#buildMatchedRules for definition.
* @constructor
*/
constructor(selector, property, value, status, distance) {
