tor-browser

commit 3e26fc1cb82cef3dd9506e4a9fc7f27e9ed5b76f
parent 5a7bbc46f6da90fa42b9e0746231ff20510367f1
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Wed, 10 Dec 2025 16:17:05 +0000

Bug 1895179 - [devtools] Mark declaration with !important values as invalid in @position-try rules. r=devtools-reviewers,ochameau.

-

Differential Revision: https://phabricator.services.mozilla.com/D275193

Diffstat:
M
devtools/client/inspector/rules/test/browser_rules_position-try.js
 | 
3
+++
M
devtools/server/actors/style-rule.js
 | 
13
+++++++++++--

2 files changed, 14 insertions(+), 2 deletions(-)
diff --git a/devtools/client/inspector/rules/test/browser_rules_position-try.js b/devtools/client/inspector/rules/test/browser_rules_position-try.js
@@ -41,6 +41,7 @@ const TEST_URI = `https://example.org/document-builder.sjs?html=${encodeURICompo
     @position-try --custom-right {
       top: anchor(bottom);
       left: anchor(right);
+      left: 10px !important;
       color: tomato;
       --m: 10px;
     }
@@ -177,6 +178,7 @@ add_task(async function () {
       declarations: [
         { name: "top", value: "anchor(bottom)" },
         { name: "left", value: "anchor(right)" },
+        { name: "left", value: "10px !important", valid: false },
         // we have this here to make sure it's not marked as overridden / does not override
         // color declaration for regular rules.
         { name: "color", value: "tomato", inactiveCSS: true },
@@ -214,6 +216,7 @@ add_task(async function () {
       declarations: [
         { name: "top", value: "anchor(bottom)" },
         { name: "left", value: "anchor(right)" },
+        { name: "left", value: "10px !important", valid: false },
         { name: "color", value: "tomato", inactiveCSS: true },
         { name: "--m", value: "10px", inactiveCSS: true },
       ],
diff --git a/devtools/server/actors/style-rule.js b/devtools/server/actors/style-rule.js
@@ -547,10 +547,19 @@ class StyleRuleActor extends Actor {
           // In such case InspectorUtils.supports() would return false, but that would be
           // odd to show "invalid" pres hints declaration in the UI.
           this.ruleClassName === PRES_HINTS ||
-          InspectorUtils.supports(
+          (InspectorUtils.supports(
             `${decl.name}:${decl.value}`,
             supportsOptions
-          );
+          ) &&
+            // !important values are not valid in @position-try and @keyframes
+            // TODO: We might extend InspectorUtils.supports to take the actual rule
+            // so we wouldn't have to hardcode this, but this does come with some
+            // challenges (see Bug 2004379).
+            !(
+              decl.priority === "important" &&
+              (this.ruleClassName === "CSSPositionTryRule" ||
+                this.ruleClassName === "CSSKeyframesRule")
+            ));
         const inactiveCssData = getInactiveCssDataForProperty(
           el,
           style,