Bug 1912285 - [devtools] Display empty computed value in var tooltip. r=devtools-reviewers,jdescottes.

The #createNode function wasn't adding attribute if they
were empty, meaning that the data-variable-computed attribute
wouldn't be set for empty computed value (which are stil valid).

Note that this doesn't look great in the tooltip at the moment,
we may display empty values differently in Bug 1912267.

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

devtools/client/inspector/rules/test/browser_rules_variables_01.js

@@ -52,4 +52,9 @@ add_task(async function () {
     header: "--nested-with-function = var(--theme-color)",
     computed: "light-dark(chartreuse, seagreen)",
   });
+
+  await assertVariableTooltipForProperty(view, "div", "background", {
+    header: "--nested-with-empty = var(--empty)",
+    computed: "",
+  });
 });

devtools/client/inspector/rules/test/doc_variables_1.html

@@ -8,14 +8,17 @@
     * {
       --color: tomato;
       --bg: violet;
+      --empty: ;
       --nested: var(--color);
       --theme-color: light-dark(var(--color), var(--bg));
       --nested-with-function: var(--theme-color);
+      --nested-with-empty: var(--empty);
     }
 
     div {
       --color: chartreuse;
       color: var(--color, red);
+      background: var(--nested-with-empty);
       background-color: var(--not-set, var(--bg));
       outline-color: var(--nested);
       border-color: var(--nested-with-function);

devtools/client/shared/output-parser.js

@@ -2134,7 +2134,8 @@ class OutputParser {
     const attrs = Object.getOwnPropertyNames(attributes);
 
     for (const attr of attrs) {
-      if (attributes[attr]) {
+      const attrValue = attributes[attr];
+      if (attrValue !== null && attrValue !== undefined) {
         node.setAttribute(attr, attributes[attr]);
       }
     }
@@ -2263,20 +2264,20 @@ class OutputParser {
     const defaults = {
       useDefaultColorUnit: true,
       defaultColorUnit: "authored",
-      angleClass: "",
-      angleSwatchClass: "",
-      bezierClass: "",
-      bezierSwatchClass: "",
-      colorClass: "",
-      colorSwatchClass: "",
+      angleClass: null,
+      angleSwatchClass: null,
+      bezierClass: null,
+      bezierSwatchClass: null,
+      colorClass: null,
+      colorSwatchClass: null,
       filterSwatch: false,
-      flexClass: "",
-      gridClass: "",
-      shapeClass: "",
-      shapeSwatchClass: "",
+      flexClass: null,
+      gridClass: null,
+      shapeClass: null,
+      shapeSwatchClass: null,
       supportsColor: false,
-      urlClass: "",
-      fontFamilyClass: "",
+      urlClass: null,
+      fontFamilyClass: null,
       baseURI: undefined,
       getVariableData: null,
       unmatchedClass: null,

devtools/client/shared/test/browser_outputparser.js

@@ -907,6 +907,17 @@ function testParseVariable(doc, parser) {
           ')</span>' +
         '</span>',
     },
+    {
+      text: "var(--refers-empty)",
+      variables: {
+        "--refers-empty": { value: "var(--empty)", computedValue: "" },
+      },
+      expected:
+        // prettier-ignore
+        "<span>var(" +
+          '<span data-variable="--refers-empty = var(--empty)" data-variable-computed="">--refers-empty</span>)' +
+        "</span>",
+    },
   ];
 
   for (const test of TESTS) {