Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 57 insertions, 19 deletions

diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js
index fc1afca5a0..bd514096b3 100644
--- a/devtools/client/shared/output-parser.js
+++ b/devtools/client/shared/output-parser.js
@@ -217,8 +217,13 @@ class OutputParser {
         options.getVariableValue
       ) {
         sawVariable = true;
-        const { node } = this.#parseVariable(token, text, tokenStream, options);
-        functionData.push(node);
+        const { node, value, fallbackValue } = this.#parseVariable(
+          token,
+          text,
+          tokenStream,
+          options
+        );
+        functionData.push({ node, value, fallbackValue });
       } else if (token.tokenType === "function") {
         ++depth;
       }
@@ -278,6 +283,7 @@ class OutputParser {
     const secondOpts = {};
 
     let varValue;
+    let varFallbackValue;
 
     // Get the variable value if it is in use.
     if (tokens && tokens.length === 1) {
@@ -324,11 +330,16 @@ class OutputParser {
 
       const span = this.#createNode("span", secondOpts);
       span.appendChild(rest);
+      varFallbackValue = span.textContent;
       variableNode.appendChild(span);
     }
     variableNode.appendChild(this.#doc.createTextNode(")"));
 
-    return { node: variableNode, value: varValue };
+    return {
+      node: variableNode,
+      value: varValue,
+      fallbackValue: varFallbackValue,
+    };
   }
 
   /**
@@ -435,17 +446,43 @@ class OutputParser {
             );
 
             if (sawVariable) {
-              // If function contains variable, we need to add both strings
-              // and nodes.
-              this.#appendTextNode(functionName);
-              for (const data of functionData) {
-                if (typeof data === "string") {
-                  this.#appendTextNode(data);
-                } else if (data) {
-                  this.#parsed.push(data);
+              const computedFunctionText =
+                functionName +
+                functionData
+                  .map(data => {
+                    if (typeof data === "string") {
+                      return data;
+                    }
+                    return data.value ?? data.fallbackValue;
+                  })
+                  .join("") +
+                ")";
+              if (
+                colorOK() &&
+                InspectorUtils.isValidCSSColor(computedFunctionText)
+              ) {
+                this.#appendColor(computedFunctionText, {
+                  ...options,
+                  colorFunction: colorFunctions.at(-1)?.functionName,
+                  valueParts: [
+                    functionName,
+                    ...functionData.map(data => data.node || data),
+                    ")",
+                  ],
+                });
+              } else {
+                // If function contains variable, we need to add both strings
+                // and nodes.
+                this.#appendTextNode(functionName);
+                for (const data of functionData) {
+                  if (typeof data === "string") {
+                    this.#appendTextNode(data);
+                  } else if (data) {
+                    this.#parsed.push(data.node);
+                  }
                 }
+                this.#appendTextNode(")");
               }
-              this.#appendTextNode(")");
             } else {
               // If no variable in function, join the text together and add
               // to DOM accordingly.
@@ -1598,13 +1635,14 @@ class OutputParser {
         container.appendChild(options.variableContainer);
       } else {
         // Otherwise we create a new element with the `color` as textContent.
-        const value = this.#createNode(
-          "span",
-          {
-            class: options.colorClass,
-          },
-          color
-        );
+        const value = this.#createNode("span", {
+          class: options.colorClass,
+        });
+        if (options.valueParts) {
+          value.append(...options.valueParts);
+        } else {
+          value.append(this.#doc.createTextNode(color));
+        }
 
         container.appendChild(value);
       }