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;
         }