Bug 1900069 - [devtools] Show initial value of registered properties in computed panel. r=devtools-reviewers,bomsy.

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

devtools/client/inspector/computed/computed.js

@@ -1148,6 +1148,15 @@ class PropertyView {
     return this.#tree.computed[this.name].registeredPropertySyntax;
   }
 
+  /**
+   * If this is a registered property, return its initial-value
+   *
+   * @returns {Text|undefined}
+   */
+  get registeredPropertyInitialValue() {
+    return this.#tree.computed[this.name].registeredPropertyInitialValue;
+  }
+
   /**
    * Create DOM elements for a property
    *
@@ -1299,20 +1308,9 @@ class PropertyView {
 
     this.#tree.numVisibleProperties++;
 
-    const outputParser = this.#tree.outputParser;
-    const frag = outputParser.parseCssProperty(
-      this.propertyInfo.name,
-      this.propertyInfo.value,
-      {
-        colorSwatchClass: "computed-colorswatch",
-        colorClass: "computed-color",
-        urlClass: "theme-link",
-        fontFamilyClass: "computed-font-family",
-        // No need to use baseURI here as computed URIs are never relative.
-      }
-    );
     this.valueNode.innerHTML = "";
-    this.valueNode.appendChild(frag);
+    // No need to pass the baseURI argument here as computed URIs are never relative.
+    this.valueNode.appendChild(this.#parseValue(this.propertyInfo.value));
 
     this.refreshInvalidAtComputedValueTime();
     this.refreshMatchedSelectors();
@@ -1433,7 +1431,12 @@ class PropertyView {
         class:
           "fix-get-selection computed-other-property-value theme-fg-color1",
       });
-      valueDiv.appendChild(selector.outputFragment);
+      valueDiv.appendChild(
+        this.#parseValue(
+          selector.selectorInfo.value,
+          selector.selectorInfo.rule.href
+        )
+      );
 
       // If the value is invalid at computed value time (IACVT), display the same
       // warning icon that we have in the rules view for IACVT declarations.
@@ -1448,10 +1451,52 @@ class PropertyView {
       }
     }
 
+    if (this.registeredPropertyInitialValue !== undefined) {
+      const p = createChild(frag, "p");
+      const status = createChild(p, "span", {
+        dir: "ltr",
+        class: "rule-text theme-fg-color3",
+      });
+
+      createChild(status, "div", {
+        class: "fix-get-selection",
+        textContent: "initial-value",
+      });
+
+      const valueDiv = createChild(status, "div", {
+        class:
+          "fix-get-selection computed-other-property-value theme-fg-color1",
+      });
+      valueDiv.appendChild(
+        this.#parseValue(this.registeredPropertyInitialValue)
+      );
+    }
+
     this.matchedSelectorsContainer.innerHTML = "";
     this.matchedSelectorsContainer.appendChild(frag);
   }
 
+  /**
+   * Parse a property value using the OutputParser.
+   *
+   * @param {String} value
+   * @param {String} baseURI
+   * @returns {DocumentFragment}
+   */
+  #parseValue(value, baseURI) {
+    // Sadly, because this fragment is added to the template by DOM Templater
+    // we lose any events that are attached. This means that URLs will open in a
+    // new window. At some point we should fix this by stopping using the
+    // templater.
+    return this.#tree.outputParser.parseCssProperty(this.name, value, {
+      colorSwatchClass: "computed-colorswatch",
+      colorClass: "computed-color",
+      urlClass: "theme-link",
+      fontFamilyClass: "computed-font-family",
+      baseURI,
+    });
+  }
+
   /**
    * Provide access to the matched SelectorViews that we are currently
    * displaying.
@@ -1631,26 +1676,6 @@ class SelectorView {
     return this.selectorInfo.value;
   }
 
-  get outputFragment() {
-    // Sadly, because this fragment is added to the template by DOM Templater
-    // we lose any events that are attached. This means that URLs will open in a
-    // new window. At some point we should fix this by stopping using the
-    // templater.
-    const outputParser = this.#tree.outputParser;
-    const frag = outputParser.parseCssProperty(
-      this.selectorInfo.name,
-      this.selectorInfo.value,
-      {
-        colorSwatchClass: "computed-colorswatch",
-        colorClass: "computed-color",
-        urlClass: "theme-link",
-        fontFamilyClass: "computed-font-family",
-        baseURI: this.selectorInfo.rule.href,
-      }
-    );
-    return frag;
-  }
-
   /**
    * Update the text of the source link to reflect whether we're showing
    * original sources or not.  This is a callback for

devtools/client/inspector/computed/test/browser_computed_custom_properties.js

@@ -93,6 +93,11 @@ add_task(async function () {
           value: "1em",
           invalidAtComputedValueTime: true,
         },
+        {
+          selector: "initial-value",
+          value: "rgb(200, 100, 00)",
+          invalidAtComputedValueTime: false,
+        },
       ],
     },
   ]);
@@ -124,6 +129,11 @@ add_task(async function () {
           value: "1em",
           invalidAtComputedValueTime: true,
         },
+        {
+          selector: "initial-value",
+          value: "rgb(200, 100, 00)",
+          invalidAtComputedValueTime: false,
+        },
       ],
     },
   ]);
@@ -162,6 +172,11 @@ add_task(async function () {
           value: "1em",
           invalidAtComputedValueTime: true,
         },
+        {
+          selector: "initial-value",
+          value: "rgb(200, 100, 00)",
+          invalidAtComputedValueTime: false,
+        },
       ],
     },
   ]);
@@ -182,6 +197,13 @@ add_task(async function () {
     {
       name: "--registered-color",
       value: "rgb(0, 100, 200)",
+      matchedRules: [
+        {
+          selector: "initial-value",
+          value: "rgb(0, 100, 200)",
+          invalidAtComputedValueTime: false,
+        },
+      ],
     },
     {
       name: "--registered-color-secondary",
@@ -203,11 +225,23 @@ add_task(async function () {
           value: "1em",
           invalidAtComputedValueTime: true,
         },
+        {
+          selector: "initial-value",
+          value: "rgb(200, 100, 00)",
+          invalidAtComputedValueTime: false,
+        },
       ],
     },
     {
       name: "--registered-length",
       value: "10px",
+      matchedRules: [
+        {
+          selector: "initial-value",
+          value: "10px",
+          invalidAtComputedValueTime: false,
+        },
+      ],
     },
   ]);
 

devtools/server/actors/page-style.js

@@ -277,16 +277,19 @@ class PageStyleActor extends Actor {
           targetDocument,
           name
         );
-        if (
-          registeredProperty &&
-          !InspectorUtils.valueMatchesSyntax(
-            targetDocument,
-            ret[name].value,
-            registeredProperty.syntax
-          )
-        ) {
-          ret[name].invalidAtComputedValueTime = true;
-          ret[name].registeredPropertySyntax = registeredProperty.syntax;
+        if (registeredProperty) {
+          ret[name].registeredPropertyInitialValue =
+            registeredProperty.initialValue;
+          if (
+            !InspectorUtils.valueMatchesSyntax(
+              targetDocument,
+              ret[name].value,
+              registeredProperty.syntax
+            )
+          ) {
+            ret[name].invalidAtComputedValueTime = true;
+            ret[name].registeredPropertySyntax = registeredProperty.syntax;
+          }
         }
       }
     }