From bf8b1bcd095801543b9ab64a8ea639b59178b710 Mon Sep 17 00:00:00 2001 From: Nicolas Chevobbe Date: Tue, 2 Jan 2024 15:33:55 +0000 Subject: [PATCH] Bug 1869310 - [devtools] Make case-insensitive checks for functions in OutputParser. r=devtools-reviewers,ochameau. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../browser_styleinspector_output-parser.js | 33 +++++++++++++++++++ devtools/client/shared/output-parser.js | 29 +++++++++------- .../shared/test/browser_outputparser.js | 22 +++++++++++++ 3 files changed, 73 insertions(+), 11 deletions(-) diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js index dba383a1fcfa..1aa2879ee235 100644 --- a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js +++ b/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; +} diff --git a/devtools/client/shared/output-parser.js b/devtools/client/shared/output-parser.js index 5ef39ca82a20..4ae1a60b114a 100644 --- a/devtools/client/shared/output-parser.js +++ b/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", { diff --git a/devtools/client/shared/test/browser_outputparser.js b/devtools/client/shared/test/browser_outputparser.js index 26131773c1b0..555091568108 100644 --- a/devtools/client/shared/test/browser_outputparser.js +++ b/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",