Bug 1878615 - [devtools] Restrict impact of CSS variable autocomplete in rules view. r=devtools-reviewers,ochameau.

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

devtools/client/inspector/rules/models/element-style.js

@@ -873,23 +873,27 @@ class ElementStyle {
    *                              value if the property is not defined)
    */
   getAllCustomProperties(pseudo = "") {
-    const customProperties = new Map();
-
-    const variables = this.variablesMap.get(pseudo);
-    if (variables) {
-      for (const [name, value] of variables) {
-        customProperties.set(name, value);
-      }
-    }
+    let customProperties = this.variablesMap.get(pseudo);
 
     const registeredPropertiesMap =
       this.ruleView.getRegisteredPropertiesForSelectedNodeTarget();
-    if (registeredPropertiesMap) {
-      for (const [name, propertyDefinition] of registeredPropertiesMap) {
-        // Only set the registered property if it's not defined (i.e. not in variablesMap)
-        if (!customProperties.has(name)) {
-          customProperties.set(name, propertyDefinition.initialValue);
+
+    // If there's no registered properties, we can return the Map as is
+    if (!registeredPropertiesMap || registeredPropertiesMap.size === 0) {
+      return customProperties;
+    }
+
+    let newMapCreated = false;
+    for (const [name, propertyDefinition] of registeredPropertiesMap) {
+      // Only set the registered property if it's not defined (i.e. not in this.variablesMap)
+      if (!customProperties.has(name)) {
+        // Since we want to return registered property, we need to create a new Map
+        // to not modify the one in this.variablesMap.
+        if (!newMapCreated) {
+          customProperties = new Map(customProperties);
+          newMapCreated = true;
         }
+        customProperties.set(name, propertyDefinition.initialValue);
       }
     }
 

devtools/client/inspector/rules/views/rule-editor.js

@@ -831,10 +831,9 @@ RuleEditor.prototype = {
       popup: this.ruleView.popup,
       cssProperties: this.rule.cssProperties,
       inputAriaLabel: NEW_PROPERTY_NAME_INPUT_LABEL,
-      cssVariables:
-        this.rule.elementStyle.getAllCustomProperties(
-          this.rule.pseudoElement
-        ) || new Map(),
+      cssVariables: this.rule.elementStyle.getAllCustomProperties(
+        this.rule.pseudoElement
+      ),
     });
 
     // Auto-close the input if multiple rules get pasted into new property.

devtools/client/inspector/rules/views/text-property-editor.js

@@ -314,6 +314,10 @@ TextPropertyEditor.prototype = {
         }
       });
 
+      const cssVariables = this.rule.elementStyle.getAllCustomProperties(
+        this.rule.pseudoElement
+      );
+
       editableField({
         start: this._onStartEditing,
         element: this.nameSpan,
@@ -323,10 +327,7 @@ TextPropertyEditor.prototype = {
         contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
         popup: this.popup,
         cssProperties: this.cssProperties,
-        cssVariables:
-          this.rule.elementStyle.getAllCustomProperties(
-            this.rule.pseudoElement
-          ) || new Map(),
+        cssVariables,
         // (Shift+)Tab will move the focus to the previous/next editable field (so property value
         // or new selector).
         focusEditableFieldAfterApply: true,
@@ -425,10 +426,7 @@ TextPropertyEditor.prototype = {
         multiline: true,
         maxWidth: () => this.container.getBoundingClientRect().width,
         cssProperties: this.cssProperties,
-        cssVariables:
-          this.rule.elementStyle.getAllCustomProperties(
-            this.rule.pseudoElement
-          ) || new Map(),
+        cssVariables,
         getGridLineNames: this.getGridlineNames,
         showSuggestCompletionOnEmpty: true,
         // (Shift+)Tab will move the focus to the previous/next editable field (so property name,