Bug 1524024 - Extract RuleRewriter into its own module. r=pbro
☠☠ backed out by 729628913bbf ☠ ☠
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 01 Feb 2019 11:07:25 -0500
changeset 456652 3d835071d1604e99978933b2ae98611580a728dc
parent 456651 10f6c4319f6c7f6fd8820091ca56a603d524425e
child 456653 0bf6dc15543905faed5da227903febefa69ab575
push id35499
push userccoroiu@mozilla.com
push dateMon, 04 Feb 2019 21:42:59 +0000
treeherdermozilla-central@a27965fa7374 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1524024
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1524024 - Extract RuleRewriter into its own module. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D18359
devtools/client/shared/test/unit/test_escapeCSSComment.js
devtools/shared/css/parsing-utils.js
devtools/shared/fronts/inspector/moz.build
devtools/shared/fronts/inspector/rule-rewriter.js
devtools/shared/fronts/styles.js
--- a/devtools/client/shared/test/unit/test_escapeCSSComment.js
+++ b/devtools/client/shared/test/unit/test_escapeCSSComment.js
@@ -1,15 +1,15 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 const {require} = ChromeUtils.import("resource://devtools/shared/Loader.jsm");
-const {escapeCSSComment, _unescapeCSSComment} = require("devtools/shared/css/parsing-utils");
+const {escapeCSSComment, unescapeCSSComment} = require("devtools/shared/css/parsing-utils");
 
 const TEST_DATA = [
   {
     input: "simple",
     expected: "simple",
   },
   {
     input: "/* comment */",
@@ -28,12 +28,12 @@ const TEST_DATA = [
 function run_test() {
   let i = 0;
   for (const test of TEST_DATA) {
     ++i;
     info("Test #" + i);
 
     const escaped = escapeCSSComment(test.input);
     equal(escaped, test.expected);
-    const unescaped = _unescapeCSSComment(escaped);
+    const unescaped = unescapeCSSComment(escaped);
     equal(unescaped, test.input);
   }
 }
--- a/devtools/shared/css/parsing-utils.js
+++ b/devtools/shared/css/parsing-utils.js
@@ -2,47 +2,35 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // This file holds various CSS parsing and rewriting utilities.
 // Some entry points of note are:
 // parseDeclarations - parse a CSS rule into declarations
-// RuleRewriter - rewrite CSS rule text
 // parsePseudoClassesAndAttributes - parse selector and extract
 //     pseudo-classes
 // parseSingleValue - parse a single CSS property value
 
 "use strict";
 
-const promise = require("promise");
 const {getCSSLexer} = require("devtools/shared/css/lexer");
 
 loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/constants", true);
 
 const SELECTOR_ATTRIBUTE = exports.SELECTOR_ATTRIBUTE = 1;
 const SELECTOR_ELEMENT = exports.SELECTOR_ELEMENT = 2;
 const SELECTOR_PSEUDO_CLASS = exports.SELECTOR_PSEUDO_CLASS = 3;
 
-// Used to test whether a newline appears anywhere in some text.
-const NEWLINE_RX = /[\r\n]/;
-// Used to test whether a bit of text starts an empty comment, either
-// an "ordinary" /* ... */ comment, or a "heuristic bypass" comment
-// like /*! ... */.
-const EMPTY_COMMENT_START_RX = /^\/\*!?[ \r\n\t\f]*$/;
-// Used to test whether a bit of text ends an empty comment.
-const EMPTY_COMMENT_END_RX = /^[ \r\n\t\f]*\*\//;
-// Used to test whether a string starts with a blank line.
-const BLANK_LINE_RX = /^[ \t]*(?:\r\n|\n|\r|\f|$)/;
-
 // When commenting out a declaration, we put this character into the
 // comment opener so that future parses of the commented text know to
 // bypass the property name validity heuristic.
-const COMMENT_PARSING_HEURISTIC_BYPASS_CHAR = "!";
+const COMMENT_PARSING_HEURISTIC_BYPASS_CHAR =
+  exports.COMMENT_PARSING_HEURISTIC_BYPASS_CHAR = "!";
 
 /**
  * A generator function that lexes a CSS source string, yielding the
  * CSS tokens.  Comment tokens are dropped.
  *
  * @param {String} CSS source string
  * @yield {CSSToken} The next CSSToken that is lexed
  * @see CSSToken for details about the returned tokens
@@ -254,27 +242,16 @@ function cssTrim(str) {
   const match = /^[ \t\r\n\f]*(.*?)[ \t\r\n\f]*$/.exec(str);
   if (match) {
     return match[1];
   }
   return str;
 }
 
 /**
- * Like trimRight, but only trims CSS-allowed whitespace.
- */
-function cssTrimRight(str) {
-  const match = /^(.*?)[ \t\r\n\f]*$/.exec(str);
-  if (match) {
-    return match[1];
-  }
-  return str;
-}
-
-/**
  * A helper function that does all the parsing work for
  * parseDeclarations.  This is separate because it has some arguments
  * that don't make sense in isolation.
  *
  * The return value and arguments are like parseDeclarations, with
  * these additional arguments.
  *
  * @param {Function} isCssPropertyKnown
@@ -514,644 +491,16 @@ function parseDeclarations(isCssProperty
  */
 function parseNamedDeclarations(isCssPropertyKnown, inputString,
                                 parseComments = false) {
   return parseDeclarations(isCssPropertyKnown, inputString, parseComments)
          .filter(item => !!item.name);
 }
 
 /**
- * Return an object that can be used to rewrite declarations in some
- * source text.  The source text and parsing are handled in the same
- * way as @see parseNamedDeclarations, with |parseComments| being true.
- * Rewriting is done by calling one of the modification functions like
- * setPropertyEnabled.  The returned object has the same interface
- * as @see RuleModificationList.
- *
- * An example showing how to disable the 3rd property in a rule:
- *
- *    let rewriter = new RuleRewriter(isCssPropertyKnown, ruleActor,
- *                                    ruleActor.authoredText);
- *    rewriter.setPropertyEnabled(3, "color", false);
- *    rewriter.apply().then(() => { ... the change is made ... });
- *
- * The exported rewriting methods are |renameProperty|, |setPropertyEnabled|,
- * |createProperty|, |setProperty|, and |removeProperty|.  The |apply|
- * method can be used to send the edited text to the StyleRuleActor;
- * |getDefaultIndentation| is useful for the methods requiring a
- * default indentation value; and |getResult| is useful for testing.
- *
- * Additionally, editing will set the |changedDeclarations| property
- * on this object.  This property has the same form as the |changed|
- * property of the object returned by |getResult|.
- *
- * @param {Function} isCssPropertyKnown
- *        A function to check if the CSS property is known. This is either an
- *        internal server function or from the CssPropertiesFront.
- *        that are supported by the server. Note that if Bug 1222047
- *        is completed then isCssPropertyKnown will not need to be passed in.
- *        The CssProperty front will be able to obtained directly from the
- *        RuleRewriter.
- * @param {StyleRuleFront} rule The style rule to use.  Note that this
- *        is only needed by the |apply| and |getDefaultIndentation| methods;
- *        and in particular for testing it can be |null|.
- * @param {String} inputString The CSS source text to parse and modify.
- * @return {Object} an object that can be used to rewrite the input text.
- */
-function RuleRewriter(isCssPropertyKnown, rule, inputString) {
-  this.rule = rule;
-  this.isCssPropertyKnown = isCssPropertyKnown;
-  // The RuleRewriter sends CSS rules as text to the server, but with this modifications
-  // array, it also sends the list of changes so the server doesn't have to re-parse the
-  // rule if it needs to track what changed.
-  this.modifications = [];
-
-  // Keep track of which any declarations we had to rewrite while
-  // performing the requested action.
-  this.changedDeclarations = {};
-
-  // If not null, a promise that must be wait upon before |apply| can
-  // do its work.
-  this.editPromise = null;
-
-  // If the |defaultIndentation| property is set, then it is used;
-  // otherwise the RuleRewriter will try to compute the default
-  // indentation based on the style sheet's text.  This override
-  // facility is for testing.
-  this.defaultIndentation = null;
-
-  this.startInitialization(inputString);
-}
-
-RuleRewriter.prototype = {
-  /**
-   * An internal function to initialize the rewriter with a given
-   * input string.
-   *
-   * @param {String} inputString the input to use
-   */
-  startInitialization: function(inputString) {
-    this.inputString = inputString;
-    // Whether there are any newlines in the input text.
-    this.hasNewLine = /[\r\n]/.test(this.inputString);
-    // The declarations.
-    this.declarations = parseNamedDeclarations(this.isCssPropertyKnown, this.inputString,
-                                               true);
-    this.decl = null;
-    this.result = null;
-  },
-
-  /**
-   * An internal function to complete initialization and set some
-   * properties for further processing.
-   *
-   * @param {Number} index The index of the property to modify
-   */
-  completeInitialization: function(index) {
-    if (index < 0) {
-      throw new Error("Invalid index " + index + ". Expected positive integer");
-    }
-    // |decl| is the declaration to be rewritten, or null if there is no
-    // declaration corresponding to |index|.
-    // |result| is used to accumulate the result text.
-    if (index < this.declarations.length) {
-      this.decl = this.declarations[index];
-      this.result = this.inputString.substring(0, this.decl.offsets[0]);
-    } else {
-      this.decl = null;
-      this.result = this.inputString;
-    }
-  },
-
-  /**
-   * A helper function to compute the indentation of some text.  This
-   * examines the rule's existing text to guess the indentation to use;
-   * unlike |getDefaultIndentation|, which examines the entire style
-   * sheet.
-   *
-   * @param {String} string the input text
-   * @param {Number} offset the offset at which to compute the indentation
-   * @return {String} the indentation at the indicated position
-   */
-  getIndentation: function(string, offset) {
-    let originalOffset = offset;
-    for (--offset; offset >= 0; --offset) {
-      const c = string[offset];
-      if (c === "\r" || c === "\n" || c === "\f") {
-        return string.substring(offset + 1, originalOffset);
-      }
-      if (c !== " " && c !== "\t") {
-        // Found some non-whitespace character before we found a newline
-        // -- let's reset the starting point and keep going, as we saw
-        // something on the line before the declaration.
-        originalOffset = offset;
-      }
-    }
-    // Ran off the end.
-    return "";
-  },
-
-  /**
-   * Modify a property value to ensure it is "lexically safe" for
-   * insertion into a style sheet.  This function doesn't attempt to
-   * ensure that the resulting text is a valid value for the given
-   * property; but rather just that inserting the text into the style
-   * sheet will not cause unwanted changes to other rules or
-   * declarations.
-   *
-   * @param {String} text The input text.  This should include the trailing ";".
-   * @return {Array} An array of the form [anySanitized, text], where
-   *                 |anySanitized| is a boolean that indicates
-   *                  whether anything substantive has changed; and
-   *                  where |text| is the text that has been rewritten
-   *                  to be "lexically safe".
-   */
-  sanitizePropertyValue: function(text) {
-    // Start by stripping any trailing ";".  This is done here to
-    // avoid the case where the user types "url(" (which is turned
-    // into "url(;" by the rule view before coming here), being turned
-    // into "url(;)" by this code -- due to the way "url(...)" is
-    // parsed as a single token.
-    text = text.replace(/;$/, "");
-    const lexer = getCSSLexer(text);
-
-    let result = "";
-    let previousOffset = 0;
-    const parenStack = [];
-    let anySanitized = false;
-
-    // Push a closing paren on the stack.
-    const pushParen = (token, closer) => {
-      result = result + text.substring(previousOffset, token.startOffset) +
-        text.substring(token.startOffset, token.endOffset);
-      // We set the location of the paren in a funny way, to handle
-      // the case where we've seen a function token, where the paren
-      // appears at the end.
-      parenStack.push({closer, offset: result.length - 1});
-      previousOffset = token.endOffset;
-    };
-
-    // Pop a closing paren from the stack.
-    const popSomeParens = (closer) => {
-      while (parenStack.length > 0) {
-        const paren = parenStack.pop();
-
-        if (paren.closer === closer) {
-          return true;
-        }
-
-        // Found a non-matching closing paren, so quote it.  Note that
-        // these are processed in reverse order.
-        result = result.substring(0, paren.offset) + "\\" +
-          result.substring(paren.offset);
-        anySanitized = true;
-      }
-      return false;
-    };
-
-    while (true) {
-      const token = lexer.nextToken();
-      if (!token) {
-        break;
-      }
-
-      if (token.tokenType === "symbol") {
-        switch (token.text) {
-          case ";":
-            // We simply drop the ";" here.  This lets us cope with
-            // declarations that don't have a ";" and also other
-            // termination.  The caller handles adding the ";" again.
-            result += text.substring(previousOffset, token.startOffset);
-            previousOffset = token.endOffset;
-            break;
-
-          case "{":
-            pushParen(token, "}");
-            break;
-
-          case "(":
-            pushParen(token, ")");
-            break;
-
-          case "[":
-            pushParen(token, "]");
-            break;
-
-          case "}":
-          case ")":
-          case "]":
-            // Did we find an unmatched close bracket?
-            if (!popSomeParens(token.text)) {
-              // Copy out text from |previousOffset|.
-              result += text.substring(previousOffset, token.startOffset);
-              // Quote the offending symbol.
-              result += "\\" + token.text;
-              previousOffset = token.endOffset;
-              anySanitized = true;
-            }
-            break;
-        }
-      } else if (token.tokenType === "function") {
-        pushParen(token, ")");
-      }
-    }
-
-    // Fix up any unmatched parens.
-    popSomeParens(null);
-
-    // Copy out any remaining text, then any needed terminators.
-    result += text.substring(previousOffset, text.length);
-    const eofFixup = lexer.performEOFFixup("", true);
-    if (eofFixup) {
-      anySanitized = true;
-      result += eofFixup;
-    }
-    return [anySanitized, result];
-  },
-
-  /**
-   * Start at |index| and skip whitespace
-   * backward in |string|.  Return the index of the first
-   * non-whitespace character, or -1 if the entire string was
-   * whitespace.
-   * @param {String} string the input string
-   * @param {Number} index the index at which to start
-   * @return {Number} index of the first non-whitespace character, or -1
-   */
-  skipWhitespaceBackward: function(string, index) {
-    for (--index;
-         index >= 0 && (string[index] === " " || string[index] === "\t");
-         --index) {
-      // Nothing.
-    }
-    return index;
-  },
-
-  /**
-   * Terminate a given declaration, if needed.
-   *
-   * @param {Number} index The index of the rule to possibly
-   *                       terminate.  It might be invalid, so this
-   *                       function must check for that.
-   */
-  maybeTerminateDecl: function(index) {
-    if (index < 0 || index >= this.declarations.length
-        // No need to rewrite declarations in comments.
-        || ("commentOffsets" in this.declarations[index])) {
-      return;
-    }
-
-    const termDecl = this.declarations[index];
-    let endIndex = termDecl.offsets[1];
-    // Due to an oddity of the lexer, we might have gotten a bit of
-    // extra whitespace in a trailing bad_url token -- so be sure to
-    // skip that as well.
-    endIndex = this.skipWhitespaceBackward(this.result, endIndex) + 1;
-
-    const trailingText = this.result.substring(endIndex);
-    if (termDecl.terminator) {
-      // Insert the terminator just at the end of the declaration,
-      // before any trailing whitespace.
-      this.result = this.result.substring(0, endIndex) + termDecl.terminator +
-        trailingText;
-      // In a couple of cases, we may have had to add something to
-      // terminate the declaration, but the termination did not
-      // actually affect the property's value -- and at this spot, we
-      // only care about reporting value changes.  In particular, we
-      // might have added a plain ";", or we might have terminated a
-      // comment with "*/;".  Neither of these affect the value.
-      if (termDecl.terminator !== ";" && termDecl.terminator !== "*/;") {
-        this.changedDeclarations[index] =
-          termDecl.value + termDecl.terminator.slice(0, -1);
-      }
-    }
-    // If the rule generally has newlines, but this particular
-    // declaration doesn't have a trailing newline, insert one now.
-    // Maybe this style is too weird to bother with.
-    if (this.hasNewLine && !NEWLINE_RX.test(trailingText)) {
-      this.result += "\n";
-    }
-  },
-
-  /**
-   * Sanitize the given property value and return the sanitized form.
-   * If the property is rewritten during sanitization, make a note in
-   * |changedDeclarations|.
-   *
-   * @param {String} text The property text.
-   * @param {Number} index The index of the property.
-   * @return {String} The sanitized text.
-   */
-  sanitizeText: function(text, index) {
-    const [anySanitized, sanitizedText] = this.sanitizePropertyValue(text);
-    if (anySanitized) {
-      this.changedDeclarations[index] = sanitizedText;
-    }
-    return sanitizedText;
-  },
-
-  /**
-   * Rename a declaration.
-   *
-   * @param {Number} index index of the property in the rule.
-   * @param {String} name current name of the property
-   * @param {String} newName new name of the property
-   */
-  renameProperty: function(index, name, newName) {
-    this.completeInitialization(index);
-    this.result += CSS.escape(newName);
-    // We could conceivably compute the name offsets instead so we
-    // could preserve white space and comments on the LHS of the ":".
-    this.completeCopying(this.decl.colonOffsets[0]);
-    this.modifications.push({ type: "set", index, name, newName });
-  },
-
-  /**
-   * Enable or disable a declaration
-   *
-   * @param {Number} index index of the property in the rule.
-   * @param {String} name current name of the property
-   * @param {Boolean} isEnabled true if the property should be enabled;
-   *                        false if it should be disabled
-   */
-  setPropertyEnabled: function(index, name, isEnabled) {
-    this.completeInitialization(index);
-    const decl = this.decl;
-    const priority = decl.priority;
-    let copyOffset = decl.offsets[1];
-    if (isEnabled) {
-      // Enable it.  First see if the comment start can be deleted.
-      const commentStart = decl.commentOffsets[0];
-      if (EMPTY_COMMENT_START_RX.test(this.result.substring(commentStart))) {
-        this.result = this.result.substring(0, commentStart);
-      } else {
-        this.result += "*/ ";
-      }
-
-      // Insert the name and value separately, so we can report
-      // sanitization changes properly.
-      const commentNamePart =
-          this.inputString.substring(decl.offsets[0],
-                                     decl.colonOffsets[1]);
-      this.result += unescapeCSSComment(commentNamePart);
-
-      // When uncommenting, we must be sure to sanitize the text, to
-      // avoid things like /* decl: }; */, which will be accepted as
-      // a property but which would break the entire style sheet.
-      let newText = this.inputString.substring(decl.colonOffsets[1],
-                                               decl.offsets[1]);
-      newText = cssTrimRight(unescapeCSSComment(newText));
-      this.result += this.sanitizeText(newText, index) + ";";
-
-      // See if the comment end can be deleted.
-      const trailingText = this.inputString.substring(decl.offsets[1]);
-      if (EMPTY_COMMENT_END_RX.test(trailingText)) {
-        copyOffset = decl.commentOffsets[1];
-      } else {
-        this.result += " /*";
-      }
-    } else {
-      // Disable it.  Note that we use our special comment syntax
-      // here.
-      const declText = this.inputString.substring(decl.offsets[0],
-                                                decl.offsets[1]);
-      this.result += "/*" + COMMENT_PARSING_HEURISTIC_BYPASS_CHAR +
-        " " + escapeCSSComment(declText) + " */";
-    }
-    this.completeCopying(copyOffset);
-
-    if (isEnabled) {
-      this.modifications.push({ type: "set", index, name, value: decl.value, priority });
-    } else {
-      this.modifications.push({ type: "disable", index, name });
-    }
-  },
-
-  /**
-   * Return a promise that will be resolved to the default indentation
-   * of the rule.  This is a helper for internalCreateProperty.
-   *
-   * @return {Promise} a promise that will be resolved to a string
-   *         that holds the default indentation that should be used
-   *         for edits to the rule.
-   */
-  getDefaultIndentation: function() {
-    return this.rule.parentStyleSheet.guessIndentation();
-  },
-
-  /**
-   * An internal function to create a new declaration.  This does all
-   * the work of |createProperty|.
-   *
-   * @param {Number} index index of the property in the rule.
-   * @param {String} name name of the new property
-   * @param {String} value value of the new property
-   * @param {String} priority priority of the new property; either
-   *                          the empty string or "important"
-   * @param {Boolean} enabled True if the new property should be
-   *                          enabled, false if disabled
-   * @return {Promise} a promise that is resolved when the edit has
-   *                   completed
-   */
-  async internalCreateProperty(index, name, value, priority, enabled) {
-    this.completeInitialization(index);
-    let newIndentation = "";
-    if (this.hasNewLine) {
-      if (this.declarations.length > 0) {
-        newIndentation = this.getIndentation(this.inputString,
-                                             this.declarations[0].offsets[0]);
-      } else if (this.defaultIndentation) {
-        newIndentation = this.defaultIndentation;
-      } else {
-        newIndentation = await this.getDefaultIndentation();
-      }
-    }
-
-    this.maybeTerminateDecl(index - 1);
-
-    // If we generally have newlines, and if skipping whitespace
-    // backward stops at a newline, then insert our text before that
-    // whitespace.  This ensures the indentation we computed is what
-    // is actually used.
-    let savedWhitespace = "";
-    if (this.hasNewLine) {
-      const wsOffset = this.skipWhitespaceBackward(this.result,
-                                                 this.result.length);
-      if (this.result[wsOffset] === "\r" || this.result[wsOffset] === "\n") {
-        savedWhitespace = this.result.substring(wsOffset + 1);
-        this.result = this.result.substring(0, wsOffset + 1);
-      }
-    }
-
-    let newText = CSS.escape(name) + ": " + this.sanitizeText(value, index);
-    if (priority === "important") {
-      newText += " !important";
-    }
-    newText += ";";
-
-    if (!enabled) {
-      newText = "/*" + COMMENT_PARSING_HEURISTIC_BYPASS_CHAR + " " +
-        escapeCSSComment(newText) + " */";
-    }
-
-    this.result += newIndentation + newText;
-    if (this.hasNewLine) {
-      this.result += "\n";
-    }
-    this.result += savedWhitespace;
-
-    if (this.decl) {
-      // Still want to copy in the declaration previously at this
-      // index.
-      this.completeCopying(this.decl.offsets[0]);
-    }
-  },
-
-  /**
-   * Create a new declaration.
-   *
-   * @param {Number} index index of the property in the rule.
-   * @param {String} name name of the new property
-   * @param {String} value value of the new property
-   * @param {String} priority priority of the new property; either
-   *                          the empty string or "important"
-   * @param {Boolean} enabled True if the new property should be
-   *                          enabled, false if disabled
-   */
-  createProperty: function(index, name, value, priority, enabled) {
-    this.editPromise = this.internalCreateProperty(index, name, value, priority, enabled);
-    // Log the modification only if the created property is enabled.
-    if (enabled) {
-      this.modifications.push({ type: "set", index, name, value, priority });
-    }
-  },
-
-  /**
-   * Set a declaration's value.
-   *
-   * @param {Number} index index of the property in the rule.
-   *                       This can be -1 in the case where
-   *                       the rule does not support setRuleText;
-   *                       generally for setting properties
-   *                       on an element's style.
-   * @param {String} name the property's name
-   * @param {String} value the property's value
-   * @param {String} priority the property's priority, either the empty
-   *                          string or "important"
-   */
-  setProperty: function(index, name, value, priority) {
-    this.completeInitialization(index);
-    // We might see a "set" on a previously non-existent property; in
-    // that case, act like "create".
-    if (!this.decl) {
-      this.createProperty(index, name, value, priority, true);
-      return;
-    }
-
-    // Note that this assumes that "set" never operates on disabled
-    // properties.
-    this.result += this.inputString.substring(this.decl.offsets[0],
-                                              this.decl.colonOffsets[1]) +
-      this.sanitizeText(value, index);
-
-    if (priority === "important") {
-      this.result += " !important";
-    }
-    this.result += ";";
-    this.completeCopying(this.decl.offsets[1]);
-    this.modifications.push({ type: "set", index, name, value, priority });
-  },
-
-  /**
-   * Remove a declaration.
-   *
-   * @param {Number} index index of the property in the rule.
-   * @param {String} name the name of the property to remove
-   */
-  removeProperty: function(index, name) {
-    this.completeInitialization(index);
-
-    // If asked to remove a property that does not exist, bail out.
-    if (!this.decl) {
-      return;
-    }
-
-    // If the property is disabled, then first enable it, and then
-    // delete it.  We take this approach because we want to remove the
-    // entire comment if possible; but the logic for dealing with
-    // comments is hairy and already implemented in
-    // setPropertyEnabled.
-    if (this.decl.commentOffsets) {
-      this.setPropertyEnabled(index, name, true);
-      this.startInitialization(this.result);
-      this.completeInitialization(index);
-    }
-
-    let copyOffset = this.decl.offsets[1];
-    // Maybe removing this rule left us with a completely blank
-    // line.  In this case, we'll delete the whole thing.  We only
-    // bother with this if we're looking at sources that already
-    // have a newline somewhere.
-    if (this.hasNewLine) {
-      const nlOffset = this.skipWhitespaceBackward(this.result,
-                                                 this.decl.offsets[0]);
-      if (nlOffset < 0 || this.result[nlOffset] === "\r" ||
-          this.result[nlOffset] === "\n") {
-        const trailingText = this.inputString.substring(copyOffset);
-        const match = BLANK_LINE_RX.exec(trailingText);
-        if (match) {
-          this.result = this.result.substring(0, nlOffset + 1);
-          copyOffset += match[0].length;
-        }
-      }
-    }
-    this.completeCopying(copyOffset);
-    this.modifications.push({ type: "remove", index, name });
-  },
-
-  /**
-   * An internal function to copy any trailing text to the output
-   * string.
-   *
-   * @param {Number} copyOffset Offset into |inputString| of the
-   *        final text to copy to the output string.
-   */
-  completeCopying: function(copyOffset) {
-    // Add the trailing text.
-    this.result += this.inputString.substring(copyOffset);
-  },
-
-  /**
-   * Apply the modifications in this object to the associated rule.
-   *
-   * @return {Promise} A promise which will be resolved when the modifications
-   *         are complete.
-   */
-  apply: function() {
-    return promise.resolve(this.editPromise).then(() => {
-      return this.rule.setRuleText(this.result, this.modifications);
-    });
-  },
-
-  /**
-   * Get the result of the rewriting.  This is used for testing.
-   *
-   * @return {object} an object of the form {changed: object, text: string}
-   *                  |changed| is an object where each key is
-   *                  the index of a property whose value had to be
-   *                  rewritten during the sanitization process, and
-   *                  whose value is the new text of the property.
-   *                  |text| is the rewritten text of the rule.
-   */
-  getResult: function() {
-    return {changed: this.changedDeclarations, text: this.result};
-  },
-};
-
-/**
  * Returns an array of the parsed CSS selector value and type given a string.
  *
  * The components making up the CSS selector can be extracted into 3 different
  * types: element, attribute and pseudoclass. The object that is appended to
  * the returned array contains the value related to one of the 3 types described
  * along with the actual type.
  *
  * The following are the 3 types that can be returned in the object signature:
@@ -1291,18 +640,16 @@ function getAngleValueInDegrees(angleVal
     default:
       throw new Error("No matched angle unit.");
   }
 }
 
 exports.cssTokenizer = cssTokenizer;
 exports.cssTokenizerWithLineColumn = cssTokenizerWithLineColumn;
 exports.escapeCSSComment = escapeCSSComment;
-// unescapeCSSComment is exported for testing.
-exports._unescapeCSSComment = unescapeCSSComment;
+exports.unescapeCSSComment = unescapeCSSComment;
 exports.parseDeclarations = parseDeclarations;
 exports.parseNamedDeclarations = parseNamedDeclarations;
 // parseCommentDeclarations is exported for testing.
 exports._parseCommentDeclarations = parseCommentDeclarations;
-exports.RuleRewriter = RuleRewriter;
 exports.parsePseudoClassesAndAttributes = parsePseudoClassesAndAttributes;
 exports.parseSingleValue = parseSingleValue;
 exports.getAngleValueInDegrees = getAngleValueInDegrees;
--- a/devtools/shared/fronts/inspector/moz.build
+++ b/devtools/shared/fronts/inspector/moz.build
@@ -1,10 +1,11 @@
 # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*-
 # vim: set filetype=python:
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'node-picker.js',
+    'rule-rewriter.js',
 )
 
copy from devtools/shared/css/parsing-utils.js
copy to devtools/shared/fronts/inspector/rule-rewriter.js
--- a/devtools/shared/css/parsing-utils.js
+++ b/devtools/shared/fronts/inspector/rule-rewriter.js
@@ -10,519 +10,35 @@
 // RuleRewriter - rewrite CSS rule text
 // parsePseudoClassesAndAttributes - parse selector and extract
 //     pseudo-classes
 // parseSingleValue - parse a single CSS property value
 
 "use strict";
 
 const promise = require("promise");
-const {getCSSLexer} = require("devtools/shared/css/lexer");
-
-loader.lazyRequireGetter(this, "CSS_ANGLEUNIT", "devtools/shared/css/constants", true);
-
-const SELECTOR_ATTRIBUTE = exports.SELECTOR_ATTRIBUTE = 1;
-const SELECTOR_ELEMENT = exports.SELECTOR_ELEMENT = 2;
-const SELECTOR_PSEUDO_CLASS = exports.SELECTOR_PSEUDO_CLASS = 3;
+const { getCSSLexer } = require("devtools/shared/css/lexer");
+const {
+  COMMENT_PARSING_HEURISTIC_BYPASS_CHAR,
+  escapeCSSComment,
+  parseNamedDeclarations,
+  unescapeCSSComment,
+} = require("devtools/shared/css/parsing-utils");
 
 // Used to test whether a newline appears anywhere in some text.
 const NEWLINE_RX = /[\r\n]/;
 // Used to test whether a bit of text starts an empty comment, either
 // an "ordinary" /* ... */ comment, or a "heuristic bypass" comment
 // like /*! ... */.
 const EMPTY_COMMENT_START_RX = /^\/\*!?[ \r\n\t\f]*$/;
 // Used to test whether a bit of text ends an empty comment.
 const EMPTY_COMMENT_END_RX = /^[ \r\n\t\f]*\*\//;
 // Used to test whether a string starts with a blank line.
 const BLANK_LINE_RX = /^[ \t]*(?:\r\n|\n|\r|\f|$)/;
 
-// When commenting out a declaration, we put this character into the
-// comment opener so that future parses of the commented text know to
-// bypass the property name validity heuristic.
-const COMMENT_PARSING_HEURISTIC_BYPASS_CHAR = "!";
-
-/**
- * A generator function that lexes a CSS source string, yielding the
- * CSS tokens.  Comment tokens are dropped.
- *
- * @param {String} CSS source string
- * @yield {CSSToken} The next CSSToken that is lexed
- * @see CSSToken for details about the returned tokens
- */
-function* cssTokenizer(string) {
-  const lexer = getCSSLexer(string);
-  while (true) {
-    const token = lexer.nextToken();
-    if (!token) {
-      break;
-    }
-    // None of the existing consumers want comments.
-    if (token.tokenType !== "comment") {
-      yield token;
-    }
-  }
-}
-
-/**
- * Pass |string| to the CSS lexer and return an array of all the
- * returned tokens.  Comment tokens are not included.  In addition to
- * the usual information, each token will have starting and ending
- * line and column information attached.  Specifically, each token
- * has an additional "loc" attribute.  This attribute is an object
- * of the form {line: L, column: C}.  Lines and columns are both zero
- * based.
- *
- * It's best not to add new uses of this function.  In general it is
- * simpler and better to use the CSSToken offsets, rather than line
- * and column.  Also, this function lexes the entire input string at
- * once, rather than lazily yielding a token stream.  Use
- * |cssTokenizer| or |getCSSLexer| instead.
- *
- * @param{String} string The input string.
- * @return {Array} An array of tokens (@see CSSToken) that have
- *        line and column information.
- */
-function cssTokenizerWithLineColumn(string) {
-  const lexer = getCSSLexer(string);
-  const result = [];
-  let prevToken = undefined;
-  while (true) {
-    const token = lexer.nextToken();
-    const lineNumber = lexer.lineNumber;
-    const columnNumber = lexer.columnNumber;
-
-    if (prevToken) {
-      prevToken.loc.end = {
-        line: lineNumber,
-        column: columnNumber,
-      };
-    }
-
-    if (!token) {
-      break;
-    }
-
-    if (token.tokenType === "comment") {
-      // We've already dealt with the previous token's location.
-      prevToken = undefined;
-    } else {
-      const startLoc = {
-        line: lineNumber,
-        column: columnNumber,
-      };
-      token.loc = {start: startLoc};
-
-      result.push(token);
-      prevToken = token;
-    }
-  }
-
-  return result;
-}
-
-/**
- * Escape a comment body.  Find the comment start and end strings in a
- * string and inserts backslashes so that the resulting text can
- * itself be put inside a comment.
- *
- * @param {String} inputString
- *                 input string
- * @return {String} the escaped result
- */
-function escapeCSSComment(inputString) {
-  const result = inputString.replace(/\/(\\*)\*/g, "/\\$1*");
-  return result.replace(/\*(\\*)\//g, "*\\$1/");
-}
-
-/**
- * Un-escape a comment body.  This undoes any comment escaping that
- * was done by escapeCSSComment.  That is, given input like "/\*
- * comment *\/", it will strip the backslashes.
- *
- * @param {String} inputString
- *                 input string
- * @return {String} the un-escaped result
- */
-function unescapeCSSComment(inputString) {
-  const result = inputString.replace(/\/\\(\\*)\*/g, "/$1*");
-  return result.replace(/\*\\(\\*)\//g, "*$1/");
-}
-
-/**
- * A helper function for @see parseDeclarations that handles parsing
- * of comment text.  This wraps a recursive call to parseDeclarations
- * with the processing needed to ensure that offsets in the result
- * refer back to the original, unescaped, input string.
- *
- * @param {Function} isCssPropertyKnown
- *        A function to check if the CSS property is known. This is either an
- *        internal server function or from the CssPropertiesFront.
- * @param {String} commentText The text of the comment, without the
- *                             delimiters.
- * @param {Number} startOffset The offset of the comment opener
- *                             in the original text.
- * @param {Number} endOffset The offset of the comment closer
- *                           in the original text.
- * @return {array} Array of declarations of the same form as returned
- *                 by parseDeclarations.
- */
-function parseCommentDeclarations(isCssPropertyKnown, commentText, startOffset,
-                                  endOffset) {
-  let commentOverride = false;
-  if (commentText === "") {
-    return [];
-  } else if (commentText[0] === COMMENT_PARSING_HEURISTIC_BYPASS_CHAR) {
-    // This is the special sign that the comment was written by
-    // rewriteDeclarations and so we should bypass the usual
-    // heuristic.
-    commentOverride = true;
-    commentText = commentText.substring(1);
-  }
-
-  const rewrittenText = unescapeCSSComment(commentText);
-
-  // We might have rewritten an embedded comment.  For example
-  // /\* ... *\/ would turn into /* ... */.
-  // This rewriting is necessary for proper lexing, but it means
-  // that the offsets we get back can be off.  So now we compute
-  // a map so that we can rewrite offsets later.  The map is the same
-  // length as |rewrittenText| and tells us how to map an index
-  // into |rewrittenText| to an index into |commentText|.
-  //
-  // First, we find the location of each comment starter or closer in
-  // |rewrittenText|.  At these spots we put a 1 into |rewrites|.
-  // Then we walk the array again, using the elements to compute a
-  // delta, which we use to make the final mapping.
-  //
-  // Note we allocate one extra entry because we can see an ending
-  // offset that is equal to the length.
-  const rewrites = new Array(rewrittenText.length + 1).fill(0);
-
-  const commentRe = /\/\\*\*|\*\\*\//g;
-  while (true) {
-    const matchData = commentRe.exec(rewrittenText);
-    if (!matchData) {
-      break;
-    }
-    rewrites[matchData.index] = 1;
-  }
-
-  let delta = 0;
-  for (let i = 0; i <= rewrittenText.length; ++i) {
-    delta += rewrites[i];
-    // |startOffset| to add the offset from the comment starter, |+2|
-    // for the length of the "/*", then |i| and |delta| as described
-    // above.
-    rewrites[i] = startOffset + 2 + i + delta;
-    if (commentOverride) {
-      ++rewrites[i];
-    }
-  }
-
-  // Note that we pass "false" for parseComments here.  It doesn't
-  // seem worthwhile to support declarations in comments-in-comments
-  // here, as there's no way to generate those using the tools, and
-  // users would be crazy to write such things.
-  const newDecls = parseDeclarationsInternal(isCssPropertyKnown, rewrittenText,
-                                           false, true, commentOverride);
-  for (const decl of newDecls) {
-    decl.offsets[0] = rewrites[decl.offsets[0]];
-    decl.offsets[1] = rewrites[decl.offsets[1]];
-    decl.colonOffsets[0] = rewrites[decl.colonOffsets[0]];
-    decl.colonOffsets[1] = rewrites[decl.colonOffsets[1]];
-    decl.commentOffsets = [startOffset, endOffset];
-  }
-  return newDecls;
-}
-
-/**
- * A helper function for parseDeclarationsInternal that creates a new
- * empty declaration.
- *
- * @return {object} an empty declaration of the form returned by
- *                  parseDeclarations
- */
-function getEmptyDeclaration() {
-  return {name: "", value: "", priority: "",
-          terminator: "",
-          offsets: [undefined, undefined],
-          colonOffsets: false};
-}
-
-/**
- * Like trim, but only trims CSS-allowed whitespace.
- */
-function cssTrim(str) {
-  const match = /^[ \t\r\n\f]*(.*?)[ \t\r\n\f]*$/.exec(str);
-  if (match) {
-    return match[1];
-  }
-  return str;
-}
-
-/**
- * Like trimRight, but only trims CSS-allowed whitespace.
- */
-function cssTrimRight(str) {
-  const match = /^(.*?)[ \t\r\n\f]*$/.exec(str);
-  if (match) {
-    return match[1];
-  }
-  return str;
-}
-
-/**
- * A helper function that does all the parsing work for
- * parseDeclarations.  This is separate because it has some arguments
- * that don't make sense in isolation.
- *
- * The return value and arguments are like parseDeclarations, with
- * these additional arguments.
- *
- * @param {Function} isCssPropertyKnown
- *        Function to check if the CSS property is known.
- * @param {Boolean} inComment
- *        If true, assume that this call is parsing some text
- *        which came from a comment in another declaration.
- *        In this case some heuristics are used to avoid parsing
- *        text which isn't obviously a series of declarations.
- * @param {Boolean} commentOverride
- *        This only makes sense when inComment=true.
- *        When true, assume that the comment was generated by
- *        rewriteDeclarations, and skip the usual name-checking
- *        heuristic.
- */
-function parseDeclarationsInternal(isCssPropertyKnown, inputString,
-                                   parseComments, inComment, commentOverride) {
-  if (inputString === null || inputString === undefined) {
-    throw new Error("empty input string");
-  }
-
-  const lexer = getCSSLexer(inputString);
-
-  let declarations = [getEmptyDeclaration()];
-  let lastProp = declarations[0];
-
-  // This tracks the "!important" parsing state.  The states are:
-  // 0 - haven't seen anything
-  // 1 - have seen "!", looking for "important" next (possibly after
-  //     whitespace).
-  // 2 - have seen "!important"
-  let importantState = 0;
-  // This is true if we saw whitespace or comments between the "!" and
-  // the "important".
-  let importantWS = false;
-  let current = "";
-  while (true) {
-    const token = lexer.nextToken();
-    if (!token) {
-      break;
-    }
-
-    // Update the start and end offsets of the declaration, but only
-    // when we see a significant token.
-    if (token.tokenType !== "whitespace" && token.tokenType !== "comment") {
-      if (lastProp.offsets[0] === undefined) {
-        lastProp.offsets[0] = token.startOffset;
-      }
-      lastProp.offsets[1] = token.endOffset;
-    } else if (lastProp.name && !current && !importantState &&
-               !lastProp.priority && lastProp.colonOffsets[1]) {
-      // Whitespace appearing after the ":" is attributed to it.
-      lastProp.colonOffsets[1] = token.endOffset;
-    } else if (importantState === 1) {
-      importantWS = true;
-    }
-
-    if (token.tokenType === "symbol" && token.text === ":") {
-      // Either way, a "!important" we've seen is no longer valid now.
-      importantState = 0;
-      importantWS = false;
-      if (!lastProp.name) {
-        // Set the current declaration name if there's no name yet
-        lastProp.name = cssTrim(current);
-        lastProp.colonOffsets = [token.startOffset, token.endOffset];
-        current = "";
-
-        // When parsing a comment body, if the left-hand-side is not a
-        // valid property name, then drop it and stop parsing.
-        if (inComment && !commentOverride &&
-            !isCssPropertyKnown(lastProp.name)) {
-          lastProp.name = null;
-          break;
-        }
-      } else {
-        // Otherwise, just append ':' to the current value (declaration value
-        // with colons)
-        current += ":";
-      }
-    } else if (token.tokenType === "symbol" && token.text === ";") {
-      lastProp.terminator = "";
-      // When parsing a comment, if the name hasn't been set, then we
-      // have probably just seen an ordinary semicolon used in text,
-      // so drop this and stop parsing.
-      if (inComment && !lastProp.name) {
-        current = "";
-        break;
-      }
-      if (importantState === 2) {
-        lastProp.priority = "important";
-      } else if (importantState === 1) {
-        current += "!";
-        if (importantWS) {
-          current += " ";
-        }
-      }
-      lastProp.value = cssTrim(current);
-      current = "";
-      importantState = 0;
-      importantWS = false;
-      declarations.push(getEmptyDeclaration());
-      lastProp = declarations[declarations.length - 1];
-    } else if (token.tokenType === "ident") {
-      if (token.text === "important" && importantState === 1) {
-        importantState = 2;
-      } else {
-        if (importantState > 0) {
-          current += "!";
-          if (importantWS) {
-            current += " ";
-          }
-          if (importantState === 2) {
-            current += "important ";
-          }
-          importantState = 0;
-          importantWS = false;
-        }
-        // Re-escape the token to avoid dequoting problems.
-        // See bug 1287620.
-        current += CSS.escape(token.text);
-      }
-    } else if (token.tokenType === "symbol" && token.text === "!") {
-      importantState = 1;
-    } else if (token.tokenType === "whitespace") {
-      if (current !== "") {
-        current = current.trimRight() + " ";
-      }
-    } else if (token.tokenType === "comment") {
-      if (parseComments && !lastProp.name && !lastProp.value) {
-        const commentText = inputString.substring(token.startOffset + 2,
-                                                token.endOffset - 2);
-        const newDecls = parseCommentDeclarations(isCssPropertyKnown, commentText,
-                                                token.startOffset,
-                                                token.endOffset);
-
-        // Insert the new declarations just before the final element.
-        const lastDecl = declarations.pop();
-        declarations = [...declarations, ...newDecls, lastDecl];
-      } else {
-        current = current.trimRight() + " ";
-      }
-    } else {
-      if (importantState > 0) {
-        current += "!";
-        if (importantWS) {
-          current += " ";
-        }
-        if (importantState === 2) {
-          current += "important ";
-        }
-        importantState = 0;
-        importantWS = false;
-      }
-      current += inputString.substring(token.startOffset, token.endOffset);
-    }
-  }
-
-  // Handle whatever trailing properties or values might still be there
-  if (current) {
-    if (!lastProp.name) {
-      // Ignore this case in comments.
-      if (!inComment) {
-        // Trailing property found, e.g. p1:v1;p2:v2;p3
-        lastProp.name = cssTrim(current);
-      }
-    } else {
-      // Trailing value found, i.e. value without an ending ;
-      if (importantState === 2) {
-        lastProp.priority = "important";
-      } else if (importantState === 1) {
-        current += "!";
-      }
-      lastProp.value = cssTrim(current);
-      const terminator = lexer.performEOFFixup("", true);
-      lastProp.terminator = terminator + ";";
-      // If the input was unterminated, attribute the remainder to
-      // this property.  This avoids some bad behavior when rewriting
-      // an unterminated comment.
-      if (terminator) {
-        lastProp.offsets[1] = inputString.length;
-      }
-    }
-  }
-
-  // Remove declarations that have neither a name nor a value
-  declarations = declarations.filter(prop => prop.name || prop.value);
-
-  return declarations;
-}
-
-/**
- * Returns an array of CSS declarations given a string.
- * For example, parseDeclarations(isCssPropertyKnown, "width: 1px; height: 1px")
- * would return:
- * [{name:"width", value: "1px"}, {name: "height", "value": "1px"}]
- *
- * The input string is assumed to only contain declarations so { and }
- * characters will be treated as part of either the property or value,
- * depending where it's found.
- *
- * @param {Function} isCssPropertyKnown
- *        A function to check if the CSS property is known. This is either an
- *        internal server function or from the CssPropertiesFront.
- *        that are supported by the server.
- * @param {String} inputString
- *        An input string of CSS
- * @param {Boolean} parseComments
- *        If true, try to parse the contents of comments as well.
- *        A comment will only be parsed if it occurs outside of
- *        the body of some other declaration.
- * @return {Array} an array of objects with the following signature:
- *         [{"name": string, "value": string, "priority": string,
- *           "terminator": string,
- *           "offsets": [start, end], "colonOffsets": [start, end]},
- *          ...]
- *         Here, "offsets" holds the offsets of the start and end
- *         of the declaration text, in a form suitable for use with
- *         String.substring.
- *         "terminator" is a string to use to terminate the declaration,
- *         usually "" to mean no additional termination is needed.
- *         "colonOffsets" holds the start and end locations of the
- *         ":" that separates the property name from the value.
- *         If the declaration appears in a comment, then there will
- *         be an additional {"commentOffsets": [start, end] property
- *         on the object, which will hold the offsets of the start
- *         and end of the enclosing comment.
- */
-function parseDeclarations(isCssPropertyKnown, inputString,
-                           parseComments = false) {
-  return parseDeclarationsInternal(isCssPropertyKnown, inputString,
-                                   parseComments, false, false);
-}
-
-/**
- * Like @see parseDeclarations, but removes properties that do not
- * have a name.
- */
-function parseNamedDeclarations(isCssPropertyKnown, inputString,
-                                parseComments = false) {
-  return parseDeclarations(isCssPropertyKnown, inputString, parseComments)
-         .filter(item => !!item.name);
-}
-
 /**
  * Return an object that can be used to rewrite declarations in some
  * source text.  The source text and parsing are handled in the same
  * way as @see parseNamedDeclarations, with |parseComments| being true.
  * Rewriting is done by calling one of the modification functions like
  * setPropertyEnabled.  The returned object has the same interface
  * as @see RuleModificationList.
  *
@@ -1142,167 +658,19 @@ RuleRewriter.prototype = {
    *                  |text| is the rewritten text of the rule.
    */
   getResult: function() {
     return {changed: this.changedDeclarations, text: this.result};
   },
 };
 
 /**
- * Returns an array of the parsed CSS selector value and type given a string.
- *
- * The components making up the CSS selector can be extracted into 3 different
- * types: element, attribute and pseudoclass. The object that is appended to
- * the returned array contains the value related to one of the 3 types described
- * along with the actual type.
- *
- * The following are the 3 types that can be returned in the object signature:
- * (1) SELECTOR_ATTRIBUTE
- * (2) SELECTOR_ELEMENT
- * (3) SELECTOR_PSEUDO_CLASS
- *
- * @param {String} value
- *        The CSS selector text.
- * @return {Array} an array of objects with the following signature:
- *         [{ "value": string, "type": integer }, ...]
+ * Like trimRight, but only trims CSS-allowed whitespace.
  */
-function parsePseudoClassesAndAttributes(value) {
-  if (!value) {
-    throw new Error("empty input string");
+function cssTrimRight(str) {
+  const match = /^(.*?)[ \t\r\n\f]*$/.exec(str);
+  if (match) {
+    return match[1];
   }
-
-  const tokens = cssTokenizer(value);
-  const result = [];
-  let current = "";
-  let functionCount = 0;
-  let hasAttribute = false;
-  let hasColon = false;
-
-  for (const token of tokens) {
-    if (token.tokenType === "ident") {
-      current += value.substring(token.startOffset, token.endOffset);
-
-      if (hasColon && !functionCount) {
-        if (current) {
-          result.push({ value: current, type: SELECTOR_PSEUDO_CLASS });
-        }
-
-        current = "";
-        hasColon = false;
-      }
-    } else if (token.tokenType === "symbol" && token.text === ":") {
-      if (!hasColon) {
-        if (current) {
-          result.push({ value: current, type: SELECTOR_ELEMENT });
-        }
-
-        current = "";
-        hasColon = true;
-      }
-
-      current += token.text;
-    } else if (token.tokenType === "function") {
-      current += value.substring(token.startOffset, token.endOffset);
-      functionCount++;
-    } else if (token.tokenType === "symbol" && token.text === ")") {
-      current += token.text;
-
-      if (hasColon && functionCount == 1) {
-        if (current) {
-          result.push({ value: current, type: SELECTOR_PSEUDO_CLASS });
-        }
-
-        current = "";
-        functionCount--;
-        hasColon = false;
-      } else {
-        functionCount--;
-      }
-    } else if (token.tokenType === "symbol" && token.text === "[") {
-      if (!hasAttribute && !functionCount) {
-        if (current) {
-          result.push({ value: current, type: SELECTOR_ELEMENT });
-        }
-
-        current = "";
-        hasAttribute = true;
-      }
-
-      current += token.text;
-    } else if (token.tokenType === "symbol" && token.text === "]") {
-      current += token.text;
-
-      if (hasAttribute && !functionCount) {
-        if (current) {
-          result.push({ value: current, type: SELECTOR_ATTRIBUTE });
-        }
-
-        current = "";
-        hasAttribute = false;
-      }
-    } else {
-      current += value.substring(token.startOffset, token.endOffset);
-    }
-  }
-
-  if (current) {
-    result.push({ value: current, type: SELECTOR_ELEMENT });
-  }
-
-  return result;
+  return str;
 }
 
-/**
- * Expects a single CSS value to be passed as the input and parses the value
- * and priority.
- *
- * @param {Function} isCssPropertyKnown
- *        A function to check if the CSS property is known. This is either an
- *        internal server function or from the CssPropertiesFront.
- *        that are supported by the server.
- * @param {String} value
- *        The value from the text editor.
- * @return {Object} an object with 'value' and 'priority' properties.
- */
-function parseSingleValue(isCssPropertyKnown, value) {
-  const declaration = parseDeclarations(isCssPropertyKnown,
-                                      "a: " + value + ";")[0];
-  return {
-    value: declaration ? declaration.value : "",
-    priority: declaration ? declaration.priority : "",
-  };
-}
-
-/**
- * Convert an angle value to degree.
- *
- * @param {Number} angleValue The angle value.
- * @param {CSS_ANGLEUNIT} angleUnit The angleValue's angle unit.
- * @return {Number} An angle value in degree.
- */
-function getAngleValueInDegrees(angleValue, angleUnit) {
-  switch (angleUnit) {
-    case CSS_ANGLEUNIT.deg:
-      return angleValue;
-    case CSS_ANGLEUNIT.grad:
-      return angleValue * 0.9;
-    case CSS_ANGLEUNIT.rad:
-      return angleValue * 180 / Math.PI;
-    case CSS_ANGLEUNIT.turn:
-      return angleValue * 360;
-    default:
-      throw new Error("No matched angle unit.");
-  }
-}
-
-exports.cssTokenizer = cssTokenizer;
-exports.cssTokenizerWithLineColumn = cssTokenizerWithLineColumn;
-exports.escapeCSSComment = escapeCSSComment;
-// unescapeCSSComment is exported for testing.
-exports._unescapeCSSComment = unescapeCSSComment;
-exports.parseDeclarations = parseDeclarations;
-exports.parseNamedDeclarations = parseNamedDeclarations;
-// parseCommentDeclarations is exported for testing.
-exports._parseCommentDeclarations = parseCommentDeclarations;
-exports.RuleRewriter = RuleRewriter;
-exports.parsePseudoClassesAndAttributes = parsePseudoClassesAndAttributes;
-exports.parseSingleValue = parseSingleValue;
-exports.getAngleValueInDegrees = getAngleValueInDegrees;
+module.exports = RuleRewriter;
--- a/devtools/shared/fronts/styles.js
+++ b/devtools/shared/fronts/styles.js
@@ -8,18 +8,17 @@ const {
   registerFront,
 } = require("devtools/shared/protocol");
 const {
   pageStyleSpec,
   styleRuleSpec,
 } = require("devtools/shared/specs/styles");
 const promise = require("promise");
 
-loader.lazyRequireGetter(this, "RuleRewriter",
-  "devtools/shared/css/parsing-utils", true);
+loader.lazyRequireGetter(this, "RuleRewriter", "devtools/shared/fronts/inspector/rule-rewriter.js");
 
 /**
  * PageStyleFront, the front object for the PageStyleActor
  */
 class PageStyleFront extends FrontClassWithSpec(pageStyleSpec) {
   constructor(conn) {
     super(conn);
     this.inspector = this.parent();