tor-browser

commit 19db3bf02015ce95a67727a16b66b9f8023e2363
parent 8a09ee0f8cd84f87ffb6777a75d9b924e9c9de21
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Wed, 17 Dec 2025 13:38:23 +0000

Bug 1262425 - [devtools] Fix displaying shorthand computed properties whose value depends on longhand using CSS variable. r=devtools-reviewers,bomsy

When setting a longhand property value using CSS variable, the property value
we get for the shorthand from the rule CSSStyleDeclaration is an empty string.
In such case, we don't want to filter out the property if the "Browser styles"
checkbox is not checked.
In order to fix this, we check for the presence of the property in the CSSStyleDeclaration
using the chrome-only `hasLonghandProperty` method that is added in the previous commit
of this stack.
We also change a similar check to make sure we include the matched selector, even
if we can't display a meaningful value to the user (see Bug 2003264).

Because of these changes, browser_computed_custom_properties.js needed to be
updated. We change the `border` we were using to `outline` because it gives
us less longhand properties to check.

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

Diffstat:
M
devtools/client/inspector/computed/test/browser_computed_custom_properties.js
 | 
35
++++++++++++++++++++++++++++++++++-
M
devtools/server/actors/inspector/css-logic.js
 | 
21
+++++++++++++++++----
M
devtools/server/tests/chrome/test_css-logic-specificity.html
 | 
2
+-

3 files changed, 52 insertions(+), 6 deletions(-)
diff --git a/devtools/client/inspector/computed/test/browser_computed_custom_properties.js b/devtools/client/inspector/computed/test/browser_computed_custom_properties.js
@@ -58,7 +58,7 @@ const TEST_URI = `
       --custom-property-2: cyan;
       --custom-property-empty: ;
       --registered-color-secondary: rgb(13, 17, 23);
-      border: var(--registered-length) solid var( /* color */ --registered-color );
+      outline: var(--registered-length) solid var( /* color */ --registered-color );
     }
   </style>
   <main>
@@ -188,6 +188,18 @@ add_task(async function () {
       value: "rgb(255, 215, 0)",
     },
     {
+      name: "outline-color",
+      value: "rgb(0, 100, 200)",
+    },
+    {
+      name: "outline-style",
+      value: "solid",
+    },
+    {
+      name: "outline-width",
+      value: "10px",
+    },
+    {
       name: "--custom-property-2",
       value: "cyan",
     },
@@ -250,6 +262,27 @@ add_task(async function () {
     },
   ]);
 
+  info(
+    "Checking matched selectors for shorthand property defined in longhand with CSS variable"
+  );
+  const container = await getComputedViewMatchedRules(view, "outline-color");
+  Assert.deepEqual(
+    [...container.querySelectorAll("p")].map(matchEl =>
+      [...matchEl.querySelectorAll("div")].map(el => el.textContent)
+    ),
+    [
+      [
+        "#match-2",
+
+        // FIXME: At the moment, we only have an empty string value, which is the result of
+        // `CSSStyleDeclaration.getPropertyValue`.
+        // See Bug 2003264.
+        "",
+      ],
+    ],
+    "Got the expected matched selectors"
+  );
+
   await assertComputedPropertiesForNode(inspector, view, "html", []);
 });
 
diff --git a/devtools/server/actors/inspector/css-logic.js b/devtools/server/actors/inspector/css-logic.js
@@ -670,7 +670,7 @@ class CssLogic {
         // the viewedElement (or its parents).
         if (
           // check if the property is assigned
-          (rule.getPropertyValue(property) ||
+          (rule.isPropertyAssigned(property) ||
             // or if this is a css variable, if it's being used in the rule.
             (property.startsWith("--") &&
               // we may have false positive for dashed ident or the variable being
@@ -1114,6 +1114,16 @@ class CssRule {
   }
 
   /**
+   * Returns whether or not the given property is set in the current CSSStyleRule.
+   *
+   * @param {string} property the CSS property name
+   * @return {boolean}
+   */
+  isPropertyAssigned(property) {
+    return this.getStyle().hasLonghandProperty(property);
+  }
+
+  /**
    * Retrieve the style property priority from the current CSSStyleRule.
    *
    * @param {string} property the CSS property name for which you want the
@@ -1410,9 +1420,8 @@ class CssPropertyInfo {
    */
   #processMatchedSelector(selector, status, distance) {
     const cssRule = selector.cssRule;
-    const value = cssRule.getPropertyValue(this.property);
     if (
-      value &&
+      cssRule.isPropertyAssigned(this.property) &&
       (status == STATUS.MATCHED ||
         (status == STATUS.PARENT_MATCH &&
           InspectorUtils.isInheritedProperty(
@@ -1423,7 +1432,11 @@ class CssPropertyInfo {
       const selectorInfo = new CssSelectorInfo(
         selector,
         this.property,
-        value,
+        // FIXME: If this is a property that is coming from a longhand property which is
+        // using CSS variables, we would get an empty string at this point.
+        // It would be nice to try to display a value that would make sense to the user.
+        // See Bug 2003264
+        cssRule.getPropertyValue(this.property),
         status,
         distance
       );
diff --git a/devtools/server/tests/chrome/test_css-logic-specificity.html b/devtools/server/tests/chrome/test_css-logic-specificity.html
@@ -73,7 +73,7 @@ Test that css-logic calculates CSS specificity properly
     }
 
     info("Testing specificity of element.style");
-    const colorProp = cssLogic.getPropertyInfo("background");
+    const colorProp = cssLogic.getPropertyInfo("background-color");
     is(colorProp.matchedSelectors[0].specificity, 0x40000000,
        "Element styles have specificity of 0x40000000 (1073741824).");