зеркало из https://github.com/mozilla/gecko-dev.git
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
This commit is contained in:
Родитель
4742739586
Коммит
bf8b1bcd09
|
@ -14,6 +14,7 @@ const COLOR_CLASS = "color-class";
|
||||||
const URL_CLASS = "url-class";
|
const URL_CLASS = "url-class";
|
||||||
const CUBIC_BEZIER_CLASS = "bezier-class";
|
const CUBIC_BEZIER_CLASS = "bezier-class";
|
||||||
const ANGLE_CLASS = "angle-class";
|
const ANGLE_CLASS = "angle-class";
|
||||||
|
const LINEAR_EASING_CLASS = "linear-easing-class";
|
||||||
|
|
||||||
const TEST_DATA = [
|
const TEST_DATA = [
|
||||||
{
|
{
|
||||||
|
@ -238,6 +239,14 @@ const TEST_DATA = [
|
||||||
is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)");
|
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",
|
name: "animation",
|
||||||
value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)",
|
value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)",
|
||||||
|
@ -254,6 +263,22 @@ const TEST_DATA = [
|
||||||
is(getCubicBezier(fragment), "ease-in");
|
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",
|
name: "transition",
|
||||||
value: "top 3s steps(4, end)",
|
value: "top 3s steps(4, end)",
|
||||||
|
@ -319,6 +344,7 @@ add_task(async function () {
|
||||||
urlClass: URL_CLASS,
|
urlClass: URL_CLASS,
|
||||||
bezierClass: CUBIC_BEZIER_CLASS,
|
bezierClass: CUBIC_BEZIER_CLASS,
|
||||||
angleClass: ANGLE_CLASS,
|
angleClass: ANGLE_CLASS,
|
||||||
|
linearEasingClass: LINEAR_EASING_CLASS,
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -336,6 +362,9 @@ function countUrls(fragment) {
|
||||||
function countCubicBeziers(fragment) {
|
function countCubicBeziers(fragment) {
|
||||||
return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length;
|
return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length;
|
||||||
}
|
}
|
||||||
|
function countLinears(fragment) {
|
||||||
|
return fragment.querySelectorAll("." + LINEAR_EASING_CLASS).length;
|
||||||
|
}
|
||||||
function getColor(fragment, index) {
|
function getColor(fragment, index) {
|
||||||
return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent;
|
return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent;
|
||||||
}
|
}
|
||||||
|
@ -346,3 +375,7 @@ function getCubicBezier(fragment, index) {
|
||||||
return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0]
|
return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0]
|
||||||
.textContent;
|
.textContent;
|
||||||
}
|
}
|
||||||
|
function getLinear(fragment, index = 0) {
|
||||||
|
return fragment.querySelectorAll("." + LINEAR_EASING_CLASS)[index]
|
||||||
|
.textContent;
|
||||||
|
}
|
||||||
|
|
|
@ -376,6 +376,7 @@ class OutputParser {
|
||||||
if (!token) {
|
if (!token) {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
const lowerCaseTokenText = token.text?.toLowerCase();
|
||||||
|
|
||||||
if (token.tokenType === "comment") {
|
if (token.tokenType === "comment") {
|
||||||
// This doesn't change spaceNeeded, because we didn't emit
|
// This doesn't change spaceNeeded, because we didn't emit
|
||||||
|
@ -385,12 +386,11 @@ class OutputParser {
|
||||||
|
|
||||||
switch (token.tokenType) {
|
switch (token.tokenType) {
|
||||||
case "function": {
|
case "function": {
|
||||||
const isColorTakingFunction = COLOR_TAKING_FUNCTIONS.includes(
|
const isColorTakingFunction =
|
||||||
token.text
|
COLOR_TAKING_FUNCTIONS.includes(lowerCaseTokenText);
|
||||||
);
|
|
||||||
if (
|
if (
|
||||||
isColorTakingFunction ||
|
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
|
// 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
|
// it isn't special in some other way. So, we let it
|
||||||
|
@ -406,7 +406,7 @@ class OutputParser {
|
||||||
colorFunctions.push({ parenDepth, functionName: token.text });
|
colorFunctions.push({ parenDepth, functionName: token.text });
|
||||||
}
|
}
|
||||||
++parenDepth;
|
++parenDepth;
|
||||||
} else if (token.text === "var" && options.getVariableValue) {
|
} else if (lowerCaseTokenText === "var" && options.getVariableValue) {
|
||||||
const { node: variableNode, value } = this.#parseVariable(
|
const { node: variableNode, value } = this.#parseVariable(
|
||||||
token,
|
token,
|
||||||
text,
|
text,
|
||||||
|
@ -451,11 +451,14 @@ class OutputParser {
|
||||||
// to DOM accordingly.
|
// to DOM accordingly.
|
||||||
const functionText = functionName + functionData.join("") + ")";
|
const functionText = functionName + functionData.join("") + ")";
|
||||||
|
|
||||||
if (options.expectCubicBezier && token.text === "cubic-bezier") {
|
if (
|
||||||
|
options.expectCubicBezier &&
|
||||||
|
lowerCaseTokenText === "cubic-bezier"
|
||||||
|
) {
|
||||||
this.#appendCubicBezier(functionText, options);
|
this.#appendCubicBezier(functionText, options);
|
||||||
} else if (
|
} else if (
|
||||||
options.expectLinearEasing &&
|
options.expectLinearEasing &&
|
||||||
token.text === "linear"
|
lowerCaseTokenText === "linear"
|
||||||
) {
|
) {
|
||||||
this.#appendLinear(functionText, options);
|
this.#appendLinear(functionText, options);
|
||||||
} else if (
|
} else if (
|
||||||
|
@ -468,7 +471,7 @@ class OutputParser {
|
||||||
});
|
});
|
||||||
} else if (
|
} else if (
|
||||||
options.expectShape &&
|
options.expectShape &&
|
||||||
BASIC_SHAPE_FUNCTIONS.includes(token.text)
|
BASIC_SHAPE_FUNCTIONS.includes(lowerCaseTokenText)
|
||||||
) {
|
) {
|
||||||
this.#appendShape(functionText, options);
|
this.#appendShape(functionText, options);
|
||||||
} else {
|
} else {
|
||||||
|
@ -482,10 +485,13 @@ class OutputParser {
|
||||||
case "ident":
|
case "ident":
|
||||||
if (
|
if (
|
||||||
options.expectCubicBezier &&
|
options.expectCubicBezier &&
|
||||||
BEZIER_KEYWORDS.includes(token.text)
|
BEZIER_KEYWORDS.includes(lowerCaseTokenText)
|
||||||
) {
|
) {
|
||||||
this.#appendCubicBezier(token.text, options);
|
this.#appendCubicBezier(token.text, options);
|
||||||
} else if (options.expectLinearEasing && token.text == "linear") {
|
} else if (
|
||||||
|
options.expectLinearEasing &&
|
||||||
|
lowerCaseTokenText == "linear"
|
||||||
|
) {
|
||||||
this.#appendLinear(token.text, options);
|
this.#appendLinear(token.text, options);
|
||||||
} else if (this.#isDisplayFlex(text, token, options)) {
|
} else if (this.#isDisplayFlex(text, token, options)) {
|
||||||
this.#appendHighlighterToggle(token.text, options.flexClass);
|
this.#appendHighlighterToggle(token.text, options.flexClass);
|
||||||
|
@ -805,8 +811,9 @@ class OutputParser {
|
||||||
role: "button",
|
role: "button",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const lowerCaseShape = shape.toLowerCase();
|
||||||
for (const { prefix, coordParser } of shapeTypes) {
|
for (const { prefix, coordParser } of shapeTypes) {
|
||||||
if (shape.includes(prefix)) {
|
if (lowerCaseShape.includes(prefix)) {
|
||||||
const coordsBegin = prefix.length;
|
const coordsBegin = prefix.length;
|
||||||
const coordsEnd = shape.lastIndexOf(")");
|
const coordsEnd = shape.lastIndexOf(")");
|
||||||
let valContainer = this.#createNode("span", {
|
let valContainer = this.#createNode("span", {
|
||||||
|
|
|
@ -428,6 +428,13 @@ function testParseShape(doc, parser) {
|
||||||
"12em var(--variable), 100% 100%) margin-box",
|
"12em var(--variable), 100% 100%) margin-box",
|
||||||
spanCount: 18,
|
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",
|
desc: "Invalid polygon shape",
|
||||||
definition: "polygon(0px 0px 100px 20px, 20% 20%)",
|
definition: "polygon(0px 0px 100px 20px, 20% 20%)",
|
||||||
|
@ -463,6 +470,11 @@ function testParseShape(doc, parser) {
|
||||||
definition: "circle(25%at 30% 30%)",
|
definition: "circle(25%at 30% 30%)",
|
||||||
spanCount: 4,
|
spanCount: 4,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
desc: "CIRCLE",
|
||||||
|
definition: "CIRCLE(12em)",
|
||||||
|
spanCount: 1,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
desc: "Invalid circle shape",
|
desc: "Invalid circle shape",
|
||||||
definition: "circle(25%at30%30%)",
|
definition: "circle(25%at30%30%)",
|
||||||
|
@ -493,6 +505,11 @@ function testParseShape(doc, parser) {
|
||||||
definition: "ellipse()",
|
definition: "ellipse()",
|
||||||
spanCount: 0,
|
spanCount: 0,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
desc: "ELLIPSE()",
|
||||||
|
definition: "ELLIPSE(200px 10em)",
|
||||||
|
spanCount: 2,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
desc: "Invalid ellipse shape",
|
desc: "Invalid ellipse shape",
|
||||||
definition: "ellipse(200px100px at 30$ 20%)",
|
definition: "ellipse(200px100px at 30$ 20%)",
|
||||||
|
@ -523,6 +540,11 @@ function testParseShape(doc, parser) {
|
||||||
definition: "inset()",
|
definition: "inset()",
|
||||||
spanCount: 0,
|
spanCount: 0,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
desc: "INSET()",
|
||||||
|
definition: "INSET(200px)",
|
||||||
|
spanCount: 1,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
desc: "offset-path property with inset shape value",
|
desc: "offset-path property with inset shape value",
|
||||||
property: "offset-path",
|
property: "offset-path",
|
||||||
|
|
Загрузка…
Ссылка в новой задаче