From 8dd16259287f58f9273002717ec4d27e97127719 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 12 Jun 2024 07:43:14 +0200 Subject: Merging upstream version 127.0. Signed-off-by: Daniel Baumann --- .../client/shared/widgets/CubicBezierWidget.js | 18 +++--- devtools/client/shared/widgets/FilterWidget.js | 69 +++++++++------------- .../shared/widgets/LinearEasingFunctionWidget.js | 16 ++--- 3 files changed, 45 insertions(+), 58 deletions(-) (limited to 'devtools/client/shared/widgets') diff --git a/devtools/client/shared/widgets/CubicBezierWidget.js b/devtools/client/shared/widgets/CubicBezierWidget.js index 39407d4711..df41949df5 100644 --- a/devtools/client/shared/widgets/CubicBezierWidget.js +++ b/devtools/client/shared/widgets/CubicBezierWidget.js @@ -31,7 +31,9 @@ const { PRESETS, DEFAULT_PRESET_CATEGORY, } = require("resource://devtools/client/shared/widgets/CubicBezierPresets.js"); -const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js"); +const { + InspectorCSSParserWrapper, +} = require("resource://devtools/shared/css/lexer.js"); const XHTML_NS = "http://www.w3.org/1999/xhtml"; /** @@ -918,13 +920,13 @@ function parseTimingFunction(value) { return PREDEFINED[value]; } - const tokenStream = getCSSLexer(value); + const tokenStream = new InspectorCSSParserWrapper(value); const getNextToken = () => { while (true) { const token = tokenStream.nextToken(); if ( !token || - (token.tokenType !== "whitespace" && token.tokenType !== "comment") + (token.tokenType !== "WhiteSpace" && token.tokenType !== "Comment") ) { return token; } @@ -932,24 +934,20 @@ function parseTimingFunction(value) { }; let token = getNextToken(); - if (token.tokenType !== "function" || token.text !== "cubic-bezier") { + if (token.tokenType !== "Function" || token.value !== "cubic-bezier") { return undefined; } const result = []; for (let i = 0; i < 4; ++i) { token = getNextToken(); - if (!token || token.tokenType !== "number") { + if (!token || token.tokenType !== "Number") { return undefined; } result.push(token.number); token = getNextToken(); - if ( - !token || - token.tokenType !== "symbol" || - token.text !== (i == 3 ? ")" : ",") - ) { + if (!token || token.tokenType !== (i == 3 ? "CloseParenthesis" : "Comma")) { return undefined; } } diff --git a/devtools/client/shared/widgets/FilterWidget.js b/devtools/client/shared/widgets/FilterWidget.js index bb23bdfeca..487cc9ad0b 100644 --- a/devtools/client/shared/widgets/FilterWidget.js +++ b/devtools/client/shared/widgets/FilterWidget.js @@ -814,7 +814,7 @@ CSSFilterEditorWidget.prototype = { return; } - for (let { name, value, quote } of tokenizeFilterValue(cssValue)) { + for (let { name, value } of tokenizeFilterValue(cssValue)) { // If the specified value is invalid, replace it with the // default. if (name !== "url") { @@ -823,7 +823,7 @@ CSSFilterEditorWidget.prototype = { } } - this.add(name, value, quote, true); + this.add(name, value, true); } this.emit("updated", this.getCssValue()); @@ -838,9 +838,6 @@ CSSFilterEditorWidget.prototype = { * @param {String} value * value of the filter (e.g. 30px, 20%) * If this is |null|, then a default value may be supplied. - * @param {String} quote - * For a url filter, the quoting style. This can be a - * single quote, a double quote, or empty. * @return {Number} * The index of the new filter in the current list of filters * @param {Boolean} @@ -848,7 +845,7 @@ CSSFilterEditorWidget.prototype = { * you're calling add in a loop and wait to emit a single event after * the loop yourself, set this parameter to true. */ - add(name, value, quote, noEvent) { + add(name, value, noEvent) { const def = this._definition(name); if (!def) { return false; @@ -868,11 +865,6 @@ CSSFilterEditorWidget.prototype = { } else { value = def.range[0] + unitLabel; } - - if (name === "url") { - // Default quote. - quote = '"'; - } } let unit = def.type === "string" ? "" : (/[a-zA-Z%]+/.exec(value) || [])[0]; @@ -894,7 +886,7 @@ CSSFilterEditorWidget.prototype = { } } - const index = this.filters.push({ value, unit, name, quote }) - 1; + const index = this.filters.push({ value, unit, name }) - 1; if (!noEvent) { this.emit("updated", this.getCssValue()); } @@ -916,22 +908,12 @@ CSSFilterEditorWidget.prototype = { return null; } - // Just return the value+unit for non-url functions. - if (filter.name !== "url") { - return filter.value + filter.unit; + // Just return the value url functions. + if (filter.name === "url") { + return filter.value; } - // url values need to be quoted and escaped. - if (filter.quote === "'") { - return "'" + filter.value.replace(/\'/g, "\\'") + "'"; - } else if (filter.quote === '"') { - return '"' + filter.value.replace(/\"/g, '\\"') + '"'; - } - - // Unquoted. This approach might change the original input -- for - // example the original might be over-quoted. But, this is - // correct and probably good enough. - return filter.value.replace(/[\\ \t()"']/g, "\\$&"); + return filter.value + filter.unit; }, removeAt(index) { @@ -1051,27 +1033,34 @@ function tokenizeFilterValue(css) { for (const token of cssTokenizer(css)) { switch (state) { case "initial": - if (token.tokenType === "function") { - name = token.text; + if (token.tokenType === "Function") { + name = token.value; contents = ""; state = "function"; depth = 1; - } else if (token.tokenType === "url" || token.tokenType === "bad_url") { - // Extract the quoting style from the url. - const originalText = css.substring( - token.startOffset, - token.endOffset - ); - const [, quote] = /^url\([ \t\r\n\f]*(["']?)/i.exec(originalText); - - filters.push({ name: "url", value: token.text.trim(), quote }); + } else if ( + token.tokenType === "UnquotedUrl" || + token.tokenType === "BadUrl" + ) { + const url = token.text + .substring( + // token text starts with `url(` + 4, + // unquoted url also include the closing parenthesis + token.tokenType == "UnquotedUrl" + ? token.text.length - 1 + : undefined + ) + .trim(); + + filters.push({ name: "url", value: url }); // Leave state as "initial" because the URL token includes // the trailing close paren. } break; case "function": - if (token.tokenType === "symbol" && token.text === ")") { + if (token.tokenType === "CloseParenthesis") { --depth; if (depth === 0) { filters.push({ name, value: contents.trim() }); @@ -1081,8 +1070,8 @@ function tokenizeFilterValue(css) { } contents += css.substring(token.startOffset, token.endOffset); if ( - token.tokenType === "function" || - (token.tokenType === "symbol" && token.text === "(") + token.tokenType === "Function" || + token.tokenType === "Parenthesis" ) { ++depth; } diff --git a/devtools/client/shared/widgets/LinearEasingFunctionWidget.js b/devtools/client/shared/widgets/LinearEasingFunctionWidget.js index e6d2e604df..5ea3b33d15 100644 --- a/devtools/client/shared/widgets/LinearEasingFunctionWidget.js +++ b/devtools/client/shared/widgets/LinearEasingFunctionWidget.js @@ -9,7 +9,7 @@ */ const EventEmitter = require("devtools/shared/event-emitter"); -const { getCSSLexer } = require("devtools/shared/css/lexer"); +const { InspectorCSSParserWrapper } = require("devtools/shared/css/lexer"); const { throttle } = require("devtools/shared/throttle"); const XHTML_NS = "http://www.w3.org/1999/xhtml"; const SVG_NS = "http://www.w3.org/2000/svg"; @@ -578,13 +578,13 @@ class TimingFunctionPreviewWidget { */ function parseTimingFunction(value) { value = value.trim(); - const tokenStream = getCSSLexer(value); + const tokenStream = new InspectorCSSParserWrapper(value); const getNextToken = () => { while (true) { const token = tokenStream.nextToken(); if ( !token || - (token.tokenType !== "whitespace" && token.tokenType !== "comment") + (token.tokenType !== "WhiteSpace" && token.tokenType !== "Comment") ) { return token; } @@ -592,7 +592,7 @@ function parseTimingFunction(value) { }; let token = getNextToken(); - if (!token || token.tokenType !== "function" || token.text !== "linear") { + if (!token || token.tokenType !== "Function" || token.value !== "linear") { return undefined; } @@ -601,11 +601,11 @@ function parseTimingFunction(value) { let largestInput = -Infinity; while ((token = getNextToken())) { - if (token.text === ")") { + if (token.tokenType === "CloseParenthesis") { break; } - if (token.tokenType === "number") { + if (token.tokenType === "Number") { // [parsing step 4.1] const point = { input: null, output: token.number }; // [parsing step 4.2] @@ -614,7 +614,7 @@ function parseTimingFunction(value) { // get nextToken to see if there's a linear stop length token = getNextToken(); // [parsing step 4.3] - if (token && token.tokenType === "percentage") { + if (token && token.tokenType === "Percentage") { // [parsing step 4.3.1] point.input = Math.max(token.number, largestInput); // [parsing step 4.3.2] @@ -624,7 +624,7 @@ function parseTimingFunction(value) { token = getNextToken(); // [parsing step 4.3.3] - if (token && token.tokenType === "percentage") { + if (token && token.tokenType === "Percentage") { // [parsing step 4.3.3.1] const extraPoint = { input: null, output: point.output }; // [parsing step 4.3.3.2] -- cgit v1.2.3