summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/rules/models/element-style.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/inspector/rules/models/element-style.js')
-rw-r--r--devtools/client/inspector/rules/models/element-style.js122
1 files changed, 62 insertions, 60 deletions
diff --git a/devtools/client/inspector/rules/models/element-style.js b/devtools/client/inspector/rules/models/element-style.js
index e280a5e4a0..368a8ae953 100644
--- a/devtools/client/inspector/rules/models/element-style.js
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -57,7 +57,7 @@ class ElementStyle {
this.ruleView = ruleView;
this.store = store || {};
this.pageStyle = pageStyle;
- this.pseudoElements = [];
+ this.pseudoElementTypes = new Set();
this.showUserAgentStyles = showUserAgentStyles;
this.rules = [];
this.cssProperties = this.ruleView.cssProperties;
@@ -90,7 +90,7 @@ class ElementStyle {
}
this.destroyed = true;
- this.pseudoElements = [];
+ this.pseudoElementTypes.clear();
for (const rule of this.rules) {
if (rule.editor) {
@@ -141,9 +141,12 @@ class ElementStyle {
}
// Store a list of all pseudo-element types found in the matching rules.
- this.pseudoElements = this.rules
- .filter(r => r.pseudoElement)
- .map(r => r.pseudoElement);
+ this.pseudoElementTypes = new Set();
+ for (const rule of this.rules) {
+ if (rule.pseudoElement) {
+ this.pseudoElementTypes.add(rule.pseudoElement);
+ }
+ }
// Mark overridden computed styles.
this.onRuleUpdated();
@@ -275,7 +278,7 @@ class ElementStyle {
this.updateDeclarations();
// Update declarations for matching rules for pseudo-elements.
- for (const pseudo of this.pseudoElements) {
+ for (const pseudo of this.pseudoElementTypes) {
this.updateDeclarations(pseudo);
}
}
@@ -299,11 +302,6 @@ class ElementStyle {
updateDeclarations(pseudo = "") {
// Gather all text properties applicable to the selected element or pseudo-element.
const textProps = this._getDeclarations(pseudo);
- // Gather all the computed properties applied by those text properties.
- let computedProps = [];
- for (const textProp of textProps) {
- computedProps = computedProps.concat(textProp.computed);
- }
// CSS Variables inherits from the normal element in case of pseudo element.
const variables = new Map(pseudo ? this.variablesMap.get("") : null);
@@ -332,58 +330,62 @@ class ElementStyle {
// _overriddenDirty will be set on each prop, indicating whether its
// dirty status changed during this pass.
const taken = new Map();
- for (const computedProp of computedProps) {
- const earlier = taken.get(computedProp.name);
-
- // Prevent -webkit-gradient from being selected after unchecking
- // linear-gradient in this case:
- // -moz-linear-gradient: ...;
- // -webkit-linear-gradient: ...;
- // linear-gradient: ...;
- if (!computedProp.textProp.isValid()) {
- computedProp.overridden = true;
- continue;
- }
-
- let overridden;
- if (
- earlier &&
- computedProp.priority === "important" &&
- (earlier.priority !== "important" ||
- // Even if the earlier property was important, if the current rule is in a layer
- // it will take precedence, unless the earlier property rule was in the same layer.
- (computedProp.textProp.rule?.isInLayer() &&
- computedProp.textProp.rule.isInDifferentLayer(
- earlier.textProp.rule
- ))) &&
- // For !important only consider rules applying to the same parent node.
- computedProp.textProp.rule.inherited == earlier.textProp.rule.inherited
- ) {
- // New property is higher priority. Mark the earlier property
- // overridden (which will reverse its dirty state).
- earlier._overriddenDirty = !earlier._overriddenDirty;
- earlier.overridden = true;
- overridden = false;
- } else {
- overridden = !!earlier;
- }
-
- computedProp._overriddenDirty = !!computedProp.overridden !== overridden;
- computedProp.overridden = overridden;
-
- if (!computedProp.overridden && computedProp.textProp.enabled) {
- taken.set(computedProp.name, computedProp);
+ for (const textProp of textProps) {
+ for (const computedProp of textProp.computed) {
+ const earlier = taken.get(computedProp.name);
+
+ // Prevent -webkit-gradient from being selected after unchecking
+ // linear-gradient in this case:
+ // -moz-linear-gradient: ...;
+ // -webkit-linear-gradient: ...;
+ // linear-gradient: ...;
+ if (!computedProp.textProp.isValid()) {
+ computedProp.overridden = true;
+ continue;
+ }
- // At this point, we can get CSS variable from "inherited" rules.
- // When this is a registered custom property with `inherits` set to false,
- // the text prop is "invisible" (i.e. not shown in the rule view).
- // In such case, we don't want to get the value in the Map, and we'll rather
- // get the initial value from the registered property definition.
+ let overridden;
if (
- isCssVariable(computedProp.name) &&
- !computedProp.textProp.invisible
+ earlier &&
+ computedProp.priority === "important" &&
+ (earlier.priority !== "important" ||
+ // Even if the earlier property was important, if the current rule is in a layer
+ // it will take precedence, unless the earlier property rule was in the same layer.
+ (computedProp.textProp.rule?.isInLayer() &&
+ computedProp.textProp.rule.isInDifferentLayer(
+ earlier.textProp.rule
+ ))) &&
+ // For !important only consider rules applying to the same parent node.
+ computedProp.textProp.rule.inherited ==
+ earlier.textProp.rule.inherited
) {
- variables.set(computedProp.name, computedProp.value);
+ // New property is higher priority. Mark the earlier property
+ // overridden (which will reverse its dirty state).
+ earlier._overriddenDirty = !earlier._overriddenDirty;
+ earlier.overridden = true;
+ overridden = false;
+ } else {
+ overridden = !!earlier;
+ }
+
+ computedProp._overriddenDirty =
+ !!computedProp.overridden !== overridden;
+ computedProp.overridden = overridden;
+
+ if (!computedProp.overridden && computedProp.textProp.enabled) {
+ taken.set(computedProp.name, computedProp);
+
+ // At this point, we can get CSS variable from "inherited" rules.
+ // When this is a registered custom property with `inherits` set to false,
+ // the text prop is "invisible" (i.e. not shown in the rule view).
+ // In such case, we don't want to get the value in the Map, and we'll rather
+ // get the initial value from the registered property definition.
+ if (
+ isCssVariable(computedProp.name) &&
+ !computedProp.textProp.invisible
+ ) {
+ variables.set(computedProp.name, computedProp.value);
+ }
}
}
}