tor-browser

commit af6f02062b85096c597260f89ecc858cc834ed5c
parent fda7b6b114a65a723ab2bf64e6f11599b049c5d2
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Mon, 13 Oct 2025 14:41:20 +0000

Bug 1993187 - [devtools] Directly add created TextProperty to userProperties. r=devtools-reviewers,jdescottes.

We used to only add properties created from the UI to userProperties only once their value was set.
This can cause different issue as we use the presence of a declaration in userProperties to know
if that's a TextProperty that was added by the user, and we might need this information straight away.

For example when adding empty CSS variable, as when we validate the empty value, the TextProp value
didn't changed from when it was created, we weren't setting the prop in userProperties.
We could have a special case just for empty variables, but it doesn't seem like
there's drawback doing it for all properties.

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

Diffstat:
M
devtools/client/inspector/rules/models/rule.js
 | 
3
+++
M
devtools/client/inspector/rules/test/browser_rules_add-property_02.js
 | 
15
+++++++++++++++
M
devtools/client/inspector/rules/test/head.js
 | 
8
++++++++

3 files changed, 26 insertions(+), 0 deletions(-)
diff --git a/devtools/client/inspector/rules/models/rule.js b/devtools/client/inspector/rules/models/rule.js
@@ -300,6 +300,9 @@ class Rule {
 
     this.applyProperties(modifications => {
       modifications.createProperty(ind, name, value, priority, enabled);
+
+      this.store.userProperties.setProperty(this.domRule, name, value);
+
       // Now that the rule has been updated, the server might have given us data
       // that changes the state of the property. Update it now.
       prop.updateEditor();
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
@@ -120,6 +120,21 @@ add_task(async function () {
     3,
     "We still have the same number of text properties."
   );
+
+  await checkRuleViewContent(view, [
+    {
+      selector: "element",
+      declarations: [],
+    },
+    {
+      selector: "#testid",
+      declarations: [
+        { name: "color", value: "blue" },
+        { name: "background-color", value: "purple", dirty: true },
+        { name: "--x", value: "", dirty: true },
+      ],
+    },
+  ]);
 });
 
 add_task(async function addDeclarationInRuleWithNestedRule() {
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
@@ -1381,6 +1381,9 @@ function getSmallIncrementKey() {
  *        overridden by another the declaration. Defaults to false.
  * @param {Boolean|undefined} expectedElements[].declarations[].valid - Is the declaration valid.
  *        Defaults to true.
+ * @param {Boolean|undefined} expectedElements[].declarations[].dirty - Is the declaration dirty,
+ *        i.e. was it added/modified by the user (should have a left green border).
+ *        Defaults to false
  * @param {String} expectedElements[].header - If we're expecting a header (Inherited from,
  *        Pseudo-elements, …), the text of said header.
  */
@@ -1470,6 +1473,11 @@ function checkRuleViewContent(view, expectedElements) {
         !!expectedDeclaration?.valid,
         `"${selector}" ${propName.innerText} is ${expectedDeclaration?.valid === false ? "not valid" : "valid"}`
       );
+      is(
+        !!ruleViewPropertyElement.hasAttribute("dirty"),
+        !!expectedDeclaration?.dirty,
+        `"${selector}" ${propName.innerText} is ${expectedDeclaration?.dirty ? "dirty" : "not dirty"}`
+      );
     }
   }
 }