diff options
Diffstat (limited to 'devtools/client/shared/widgets/FilterWidget.js')
-rw-r--r-- | devtools/client/shared/widgets/FilterWidget.js | 69 |
1 files changed, 29 insertions, 40 deletions
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; } |