Bug 1869310 - [devtools] Make case-insensitive checks for functions in OutputParser. r=devtools-reviewers,ochameau.

We used to do a case sensitive check to handle some functions,
like circle, ellipse, cubic-bezier, … , but those functions can
be written in uppercase.

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

devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js

@@ -14,6 +14,7 @@ const COLOR_CLASS = "color-class";
 const URL_CLASS = "url-class";
 const CUBIC_BEZIER_CLASS = "bezier-class";
 const ANGLE_CLASS = "angle-class";
+const LINEAR_EASING_CLASS = "linear-easing-class";
 
 const TEST_DATA = [
   {
@@ -238,6 +239,14 @@ const TEST_DATA = [
       is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
     },
   },
+  {
+    name: "animation-timing-function",
+    value: "CUBIC-BEZIER(.1, 0.55, .9, -3.45)",
+    test: fragment => {
+      is(countCubicBeziers(fragment), 1);
+      is(getCubicBezier(fragment), "CUBIC-BEZIER(.1, 0.55, .9, -3.45)");
+    },
+  },
   {
     name: "animation",
     value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)",
@@ -254,6 +263,22 @@ const TEST_DATA = [
       is(getCubicBezier(fragment), "ease-in");
     },
   },
+  {
+    name: "animation-timing-function",
+    value: "linear(0, 1 50% 100%)",
+    test: fragment => {
+      is(countLinears(fragment), 1);
+      is(getLinear(fragment), "linear(0, 1 50% 100%)");
+    },
+  },
+  {
+    name: "animation-timing-function",
+    value: "LINEAR(0, 1 50% 100%)",
+    test: fragment => {
+      is(countLinears(fragment), 1);
+      is(getLinear(fragment), "LINEAR(0, 1 50% 100%)");
+    },
+  },
   {
     name: "transition",
     value: "top 3s steps(4, end)",
@@ -319,6 +344,7 @@ add_task(async function () {
         urlClass: URL_CLASS,
         bezierClass: CUBIC_BEZIER_CLASS,
         angleClass: ANGLE_CLASS,
+        linearEasingClass: LINEAR_EASING_CLASS,
       })
     );
   }
@@ -336,6 +362,9 @@ function countUrls(fragment) {
 function countCubicBeziers(fragment) {
   return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length;
 }
+function countLinears(fragment) {
+  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS).length;
+}
 function getColor(fragment, index) {
   return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent;
 }
@@ -346,3 +375,7 @@ function getCubicBezier(fragment, index) {
   return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0]
     .textContent;
 }
+function getLinear(fragment, index = 0) {
+  return fragment.querySelectorAll("." + LINEAR_EASING_CLASS)[index]
+    .textContent;
+}

devtools/client/shared/output-parser.js

@@ -376,6 +376,7 @@ class OutputParser {
       if (!token) {
         break;
       }
+      const lowerCaseTokenText = token.text?.toLowerCase();
 
       if (token.tokenType === "comment") {
         // This doesn't change spaceNeeded, because we didn't emit
@@ -385,12 +386,11 @@ class OutputParser {
 
       switch (token.tokenType) {
         case "function": {
-          const isColorTakingFunction = COLOR_TAKING_FUNCTIONS.includes(
-            token.text
-          );
+          const isColorTakingFunction =
+            COLOR_TAKING_FUNCTIONS.includes(lowerCaseTokenText);
           if (
             isColorTakingFunction ||
-            ANGLE_TAKING_FUNCTIONS.includes(token.text)
+            ANGLE_TAKING_FUNCTIONS.includes(lowerCaseTokenText)
           ) {
             // The function can accept a color or an angle argument, and we know
             // it isn't special in some other way. So, we let it
@@ -406,7 +406,7 @@ class OutputParser {
               colorFunctions.push({ parenDepth, functionName: token.text });
             }
             ++parenDepth;
-          } else if (token.text === "var" && options.getVariableValue) {
+          } else if (lowerCaseTokenText === "var" && options.getVariableValue) {
             const { node: variableNode, value } = this.#parseVariable(
               token,
               text,
@@ -451,11 +451,14 @@ class OutputParser {
               // to DOM accordingly.
               const functionText = functionName + functionData.join("") + ")";
 
-              if (options.expectCubicBezier && token.text === "cubic-bezier") {
+              if (
+                options.expectCubicBezier &&
+                lowerCaseTokenText === "cubic-bezier"
+              ) {
                 this.#appendCubicBezier(functionText, options);
               } else if (
                 options.expectLinearEasing &&
-                token.text === "linear"
+                lowerCaseTokenText === "linear"
               ) {
                 this.#appendLinear(functionText, options);
               } else if (
@@ -468,7 +471,7 @@ class OutputParser {
                 });
               } else if (
                 options.expectShape &&
-                BASIC_SHAPE_FUNCTIONS.includes(token.text)
+                BASIC_SHAPE_FUNCTIONS.includes(lowerCaseTokenText)
               ) {
                 this.#appendShape(functionText, options);
               } else {
@@ -482,10 +485,13 @@ class OutputParser {
         case "ident":
           if (
             options.expectCubicBezier &&
-            BEZIER_KEYWORDS.includes(token.text)
+            BEZIER_KEYWORDS.includes(lowerCaseTokenText)
           ) {
             this.#appendCubicBezier(token.text, options);
-          } else if (options.expectLinearEasing && token.text == "linear") {
+          } else if (
+            options.expectLinearEasing &&
+            lowerCaseTokenText == "linear"
+          ) {
             this.#appendLinear(token.text, options);
           } else if (this.#isDisplayFlex(text, token, options)) {
             this.#appendHighlighterToggle(token.text, options.flexClass);
@@ -805,8 +811,9 @@ class OutputParser {
       role: "button",
     });
 
+    const lowerCaseShape = shape.toLowerCase();
     for (const { prefix, coordParser } of shapeTypes) {
-      if (shape.includes(prefix)) {
+      if (lowerCaseShape.includes(prefix)) {
         const coordsBegin = prefix.length;
         const coordsEnd = shape.lastIndexOf(")");
         let valContainer = this.#createNode("span", {

devtools/client/shared/test/browser_outputparser.js

@@ -428,6 +428,13 @@ function testParseShape(doc, parser) {
         "12em var(--variable), 100% 100%) margin-box",
       spanCount: 18,
     },
+    {
+      desc: "POLYGON()",
+      definition:
+        "POLYGON(evenodd, 0px 0px, 10%200px,30%30% , calc(250px - 10px) 0 ,\n " +
+        "12em var(--variable), 100% 100%) margin-box",
+      spanCount: 18,
+    },
     {
       desc: "Invalid polygon shape",
       definition: "polygon(0px 0px 100px 20px, 20% 20%)",
@@ -463,6 +470,11 @@ function testParseShape(doc, parser) {
       definition: "circle(25%at 30% 30%)",
       spanCount: 4,
     },
+    {
+      desc: "CIRCLE",
+      definition: "CIRCLE(12em)",
+      spanCount: 1,
+    },
     {
       desc: "Invalid circle shape",
       definition: "circle(25%at30%30%)",
@@ -493,6 +505,11 @@ function testParseShape(doc, parser) {
       definition: "ellipse()",
       spanCount: 0,
     },
+    {
+      desc: "ELLIPSE()",
+      definition: "ELLIPSE(200px 10em)",
+      spanCount: 2,
+    },
     {
       desc: "Invalid ellipse shape",
       definition: "ellipse(200px100px at 30$ 20%)",
@@ -523,6 +540,11 @@ function testParseShape(doc, parser) {
       definition: "inset()",
       spanCount: 0,
     },
+    {
+      desc: "INSET()",
+      definition: "INSET(200px)",
+      spanCount: 1,
+    },
     {
       desc: "offset-path property with inset shape value",
       property: "offset-path",