Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

349 files changed, 35428 insertions, 0 deletions

diff --git a/devtools/client/inspector/rules/constants.js b/devtools/client/inspector/rules/constants.js
new file mode 100644
index 0000000000..7414014cb2
--- /dev/null
+++ b/devtools/client/inspector/rules/constants.js
@@ -0,0 +1,19 @@
+/* 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/. */
+
+"use strict";
+
+// Compatibility tooltip message id shared between the
+// models/text-property.js and the tooltip tests
+exports.COMPATIBILITY_TOOLTIP_MESSAGE = {
+  default: "css-compatibility-default-message",
+  deprecated: "css-compatibility-deprecated-message",
+  "deprecated-experimental":
+    "css-compatibility-deprecated-experimental-message",
+  "deprecated-experimental-supported":
+    "css-compatibility-deprecated-experimental-supported-message",
+  "deprecated-supported": "css-compatibility-deprecated-supported-message",
+  experimental: "css-compatibility-experimental-message",
+  "experimental-supported": "css-compatibility-experimental-supported-message",
+};
diff --git a/devtools/client/inspector/rules/models/class-list.js b/devtools/client/inspector/rules/models/class-list.js
new file mode 100644
index 0000000000..9173977382
--- /dev/null
+++ b/devtools/client/inspector/rules/models/class-list.js
@@ -0,0 +1,271 @@
+/* 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/. */
+
+"use strict";
+
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+
+// This serves as a local cache for the classes applied to each of the node we care about
+// here.
+// The map is indexed by NodeFront. Any time a new node is selected in the inspector, an
+// entry is added here, indexed by the corresponding NodeFront.
+// The value for each entry is an array of each of the class this node has. Items of this
+// array are objects like: { name, isApplied } where the name is the class itself, and
+// isApplied is a Boolean indicating if the class is applied on the node or not.
+const CLASSES = new WeakMap();
+
+/**
+ * Manages the list classes per DOM elements we care about.
+ * The actual list is stored in the CLASSES const, indexed by NodeFront objects.
+ * The responsibility of this class is to be the source of truth for anyone who wants to
+ * know which classes a given NodeFront has, and which of these are enabled and which are
+ * disabled.
+ * It also reacts to DOM mutations so the list of classes is up to date with what is in
+ * the DOM.
+ * It can also be used to enable/disable a given class, or add classes.
+ *
+ * @param {Inspector} inspector
+ *        The current inspector instance.
+ */
+class ClassList {
+  constructor(inspector) {
+    EventEmitter.decorate(this);
+
+    this.inspector = inspector;
+
+    this.onMutations = this.onMutations.bind(this);
+    this.inspector.on("markupmutation", this.onMutations);
+
+    this.classListProxyNode = this.inspector.panelDoc.createElement("div");
+    this.previewClasses = [];
+    this.unresolvedStateChanges = [];
+  }
+
+  destroy() {
+    this.inspector.off("markupmutation", this.onMutations);
+    this.inspector = null;
+    this.classListProxyNode = null;
+  }
+
+  /**
+   * The current node selection (which only returns if the node is an ELEMENT_NODE type
+   * since that's the only type this model can work with.)
+   */
+  get currentNode() {
+    if (
+      this.inspector.selection.isElementNode() &&
+      !this.inspector.selection.isPseudoElementNode()
+    ) {
+      return this.inspector.selection.nodeFront;
+    }
+    return null;
+  }
+
+  /**
+   * The class states for the current node selection. See the documentation of the CLASSES
+   * constant.
+   */
+  get currentClasses() {
+    if (!this.currentNode) {
+      return [];
+    }
+
+    if (!CLASSES.has(this.currentNode)) {
+      // Use the proxy node to get a clean list of classes.
+      this.classListProxyNode.className = this.currentNode.className;
+      const nodeClasses = [...new Set([...this.classListProxyNode.classList])]
+        .filter(
+          className =>
+            !this.previewClasses.some(
+              previewClass =>
+                previewClass.className === className &&
+                !previewClass.wasAppliedOnNode
+            )
+        )
+        .map(name => {
+          return { name, isApplied: true };
+        });
+
+      CLASSES.set(this.currentNode, nodeClasses);
+    }
+
+    return CLASSES.get(this.currentNode);
+  }
+
+  /**
+   * Same as currentClasses, but returns it in the form of a className string, where only
+   * enabled classes are added.
+   */
+  get currentClassesPreview() {
+    const currentClasses = this.currentClasses
+      .filter(({ isApplied }) => isApplied)
+      .map(({ name }) => name);
+    const previewClasses = this.previewClasses
+      .filter(previewClass => !currentClasses.includes(previewClass.className))
+      .filter(item => item !== "")
+      .map(({ className }) => className);
+
+    return currentClasses.concat(previewClasses).join(" ").trim();
+  }
+
+  /**
+   * Set the state for a given class on the current node.
+   *
+   * @param {String} name
+   *        The class which state should be changed.
+   * @param {Boolean} isApplied
+   *        True if the class should be enabled, false otherwise.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  setClassState(name, isApplied) {
+    // Do the change in our local model.
+    const nodeClasses = this.currentClasses;
+    nodeClasses.find(({ name: cName }) => cName === name).isApplied = isApplied;
+
+    return this.applyClassState();
+  }
+
+  /**
+   * Add several classes to the current node at once.
+   *
+   * @param {String} classNameString
+   *        The string that contains all classes.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  addClassName(classNameString) {
+    this.classListProxyNode.className = classNameString;
+    this.eraseClassPreview();
+    return Promise.all(
+      [...new Set([...this.classListProxyNode.classList])].map(name => {
+        return this.addClass(name);
+      })
+    );
+  }
+
+  /**
+   * Add a class to the current node at once.
+   *
+   * @param {String} name
+   *        The class to be added.
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  addClass(name) {
+    // Avoid adding the same class again.
+    if (this.currentClasses.some(({ name: cName }) => cName === name)) {
+      return Promise.resolve();
+    }
+
+    // Change the local model, so we retain the state of the existing classes.
+    this.currentClasses.push({ name, isApplied: true });
+
+    return this.applyClassState();
+  }
+
+  /**
+   * Used internally by other functions like addClass or setClassState. Actually applies
+   * the class change to the DOM.
+   *
+   * @return {Promise} Resolves when the change has been made in the DOM.
+   */
+  applyClassState() {
+    // If there is no valid inspector selection, bail out silently. No need to report an
+    // error here.
+    if (!this.currentNode) {
+      return Promise.resolve();
+    }
+
+    // Remember which node & className we applied until their mutation event is received, so we
+    // can filter out dom mutations that are caused by us in onMutations, even in situations when
+    // a new change is applied before that the event of the previous one has been received yet
+    this.unresolvedStateChanges.push({
+      node: this.currentNode,
+      className: this.currentClassesPreview,
+    });
+
+    // Apply the change to the node.
+    const mod = this.currentNode.startModifyingAttributes();
+    mod.setAttribute("class", this.currentClassesPreview);
+    return mod.apply();
+  }
+
+  onMutations(mutations) {
+    for (const { type, target, attributeName } of mutations) {
+      // Only care if this mutation is for the class attribute.
+      if (type !== "attributes" || attributeName !== "class") {
+        continue;
+      }
+
+      const isMutationForOurChange = this.unresolvedStateChanges.some(
+        previousStateChange =>
+          previousStateChange.node === target &&
+          previousStateChange.className === target.className
+      );
+
+      if (!isMutationForOurChange) {
+        CLASSES.delete(target);
+        if (target === this.currentNode) {
+          this.emit("current-node-class-changed");
+        }
+      } else {
+        this.removeResolvedStateChanged(target, target.className);
+      }
+    }
+  }
+
+  /**
+   * Get the available classNames in the document where the current selected node lives:
+   * - the one already used on elements of the document
+   * - the one defined in Stylesheets of the document
+   *
+   * @param {String} filter: A string the classNames should start with (an insensitive
+   *                         case matching will be done).
+   * @returns {Promise<Array<String>>} A promise that resolves with an array of strings
+   *                                   matching the passed filter.
+   */
+  getClassNames(filter) {
+    return this.currentNode.inspectorFront.pageStyle.getAttributesInOwnerDocument(
+      filter,
+      "class",
+      this.currentNode
+    );
+  }
+
+  previewClass(inputClasses) {
+    if (
+      this.previewClasses
+        .map(previewClass => previewClass.className)
+        .join(" ") !== inputClasses
+    ) {
+      this.previewClasses = [];
+      inputClasses.split(" ").forEach(className => {
+        this.previewClasses.push({
+          className,
+          wasAppliedOnNode: this.isClassAlreadyApplied(className),
+        });
+      });
+      this.applyClassState();
+    }
+  }
+
+  eraseClassPreview() {
+    this.previewClass("");
+  }
+
+  removeResolvedStateChanged(currentNode, currentClassesPreview) {
+    this.unresolvedStateChanges.splice(
+      0,
+      this.unresolvedStateChanges.findIndex(
+        previousState =>
+          previousState.node === currentNode &&
+          previousState.className === currentClassesPreview
+      ) + 1
+    );
+  }
+
+  isClassAlreadyApplied(className) {
+    return this.currentClasses.some(({ name }) => name === className);
+  }
+}
+
+module.exports = ClassList;
diff --git a/devtools/client/inspector/rules/models/element-style.js b/devtools/client/inspector/rules/models/element-style.js
new file mode 100644
index 0000000000..0de235fe96
--- /dev/null
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -0,0 +1,818 @@
+/* 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/. */
+
+"use strict";
+
+const Rule = require("resource://devtools/client/inspector/rules/models/rule.js");
+const UserProperties = require("resource://devtools/client/inspector/rules/models/user-properties.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "promiseWarn",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["parseDeclarations", "parseNamedDeclarations", "parseSingleValue"],
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "isCssVariable",
+  "resource://devtools/client/fronts/css-properties.js",
+  true
+);
+
+const PREF_INACTIVE_CSS_ENABLED = "devtools.inspector.inactive.css.enabled";
+
+/**
+ * ElementStyle is responsible for the following:
+ *   Keeps track of which properties are overridden.
+ *   Maintains a list of Rule objects for a given element.
+ */
+class ElementStyle {
+  /**
+   * @param  {Element} element
+   *         The element whose style we are viewing.
+   * @param  {CssRuleView} ruleView
+   *         The instance of the rule-view panel.
+   * @param  {Object} store
+   *         The ElementStyle can use this object to store metadata
+   *         that might outlast the rule view, particularly the current
+   *         set of disabled properties.
+   * @param  {PageStyleFront} pageStyle
+   *         Front for the page style actor that will be providing
+   *         the style information.
+   * @param  {Boolean} showUserAgentStyles
+   *         Should user agent styles be inspected?
+   */
+  constructor(element, ruleView, store, pageStyle, showUserAgentStyles) {
+    this.element = element;
+    this.ruleView = ruleView;
+    this.store = store || {};
+    this.pageStyle = pageStyle;
+    this.pseudoElements = [];
+    this.showUserAgentStyles = showUserAgentStyles;
+    this.rules = [];
+    this.cssProperties = this.ruleView.cssProperties;
+    this.variablesMap = new Map();
+
+    // We don't want to overwrite this.store.userProperties so we only create it
+    // if it doesn't already exist.
+    if (!("userProperties" in this.store)) {
+      this.store.userProperties = new UserProperties();
+    }
+
+    if (!("disabled" in this.store)) {
+      this.store.disabled = new WeakMap();
+    }
+  }
+
+  get unusedCssEnabled() {
+    if (!this._unusedCssEnabled) {
+      this._unusedCssEnabled = Services.prefs.getBoolPref(
+        PREF_INACTIVE_CSS_ENABLED,
+        false
+      );
+    }
+    return this._unusedCssEnabled;
+  }
+
+  destroy() {
+    if (this.destroyed) {
+      return;
+    }
+
+    this.destroyed = true;
+    this.pseudoElements = [];
+
+    for (const rule of this.rules) {
+      if (rule.editor) {
+        rule.editor.destroy();
+      }
+
+      rule.destroy();
+    }
+  }
+
+  /**
+   * Called by the Rule object when it has been changed through the
+   * setProperty* methods.
+   */
+  _changed() {
+    if (this.onChanged) {
+      this.onChanged();
+    }
+  }
+
+  /**
+   * Refresh the list of rules to be displayed for the active element.
+   * Upon completion, this.rules[] will hold a list of Rule objects.
+   *
+   * Returns a promise that will be resolved when the elementStyle is
+   * ready.
+   */
+  populate() {
+    const populated = this.pageStyle
+      .getApplied(this.element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: this.showUserAgentStyles ? "ua" : undefined,
+      })
+      .then(entries => {
+        if (this.destroyed || this.populated !== populated) {
+          return Promise.resolve(undefined);
+        }
+
+        // Store the current list of rules (if any) during the population
+        // process. They will be reused if possible.
+        const existingRules = this.rules;
+
+        this.rules = [];
+
+        for (const entry of entries) {
+          this._maybeAddRule(entry, existingRules);
+        }
+
+        // Store a list of all pseudo-element types found in the matching rules.
+        this.pseudoElements = this.rules
+          .filter(r => r.pseudoElement)
+          .map(r => r.pseudoElement);
+
+        // Mark overridden computed styles.
+        this.onRuleUpdated();
+
+        this._sortRulesForPseudoElement();
+
+        // We're done with the previous list of rules.
+        for (const r of existingRules) {
+          if (r?.editor) {
+            r.editor.destroy();
+          }
+
+          r.destroy();
+        }
+
+        return undefined;
+      })
+      .catch(e => {
+        // populate is often called after a setTimeout,
+        // the connection may already be closed.
+        if (this.destroyed) {
+          return Promise.resolve(undefined);
+        }
+        return promiseWarn(e);
+      });
+    this.populated = populated;
+    return this.populated;
+  }
+
+  /**
+   * Returns the Rule object of the given rule id.
+   *
+   * @param  {String|null} id
+   *         The id of the Rule object.
+   * @return {Rule|undefined} of the given rule id or undefined if it cannot be found.
+   */
+  getRule(id) {
+    return id
+      ? this.rules.find(rule => rule.domRule.actorID === id)
+      : undefined;
+  }
+
+  /**
+   * Get the font families in use by the element.
+   *
+   * Returns a promise that will be resolved to a list of CSS family
+   * names. The list might have duplicates.
+   */
+  getUsedFontFamilies() {
+    return new Promise((resolve, reject) => {
+      this.ruleView.styleWindow.requestIdleCallback(async () => {
+        if (this.element.isDestroyed()) {
+          resolve([]);
+          return;
+        }
+        try {
+          const fonts = await this.pageStyle.getUsedFontFaces(this.element, {
+            includePreviews: false,
+          });
+          resolve(fonts.map(font => font.CSSFamilyName));
+        } catch (e) {
+          reject(e);
+        }
+      });
+    });
+  }
+
+  /**
+   * Put pseudo elements in front of others.
+   */
+  _sortRulesForPseudoElement() {
+    this.rules = this.rules.sort((a, b) => {
+      return (a.pseudoElement || "z") > (b.pseudoElement || "z");
+    });
+  }
+
+  /**
+   * Add a rule if it's one we care about. Filters out duplicates and
+   * inherited styles with no inherited properties.
+   *
+   * @param  {Object} options
+   *         Options for creating the Rule, see the Rule constructor.
+   * @param  {Array} existingRules
+   *         Rules to reuse if possible. If a rule is reused, then it
+   *         it will be deleted from this array.
+   * @return {Boolean} true if we added the rule.
+   */
+  _maybeAddRule(options, existingRules) {
+    // If we've already included this domRule (for example, when a
+    // common selector is inherited), ignore it.
+    if (
+      options.system ||
+      (options.rule && this.rules.some(rule => rule.domRule === options.rule))
+    ) {
+      return false;
+    }
+
+    let rule = null;
+
+    // If we're refreshing and the rule previously existed, reuse the
+    // Rule object.
+    if (existingRules) {
+      const ruleIndex = existingRules.findIndex(r => r.matches(options));
+      if (ruleIndex >= 0) {
+        rule = existingRules[ruleIndex];
+        rule.refresh(options);
+        existingRules.splice(ruleIndex, 1);
+      }
+    }
+
+    // If this is a new rule, create its Rule object.
+    if (!rule) {
+      rule = new Rule(this, options);
+    }
+
+    // Ignore inherited rules with no visible properties.
+    if (options.inherited && !rule.hasAnyVisibleProperties()) {
+      return false;
+    }
+
+    this.rules.push(rule);
+    return true;
+  }
+
+  /**
+   * Calls updateDeclarations with all supported pseudo elements
+   */
+  onRuleUpdated() {
+    this.updateDeclarations();
+
+    // Update declarations for matching rules for pseudo-elements.
+    for (const pseudo of this.pseudoElements) {
+      this.updateDeclarations(pseudo);
+    }
+  }
+
+  /**
+   * Go over all CSS rules matching the selected element and mark the CSS declarations
+   * (aka TextProperty instances) with an `overridden` Boolean flag if an earlier or
+   * higher priority declaration overrides it. Rules are already ordered by specificity.
+   *
+   * If a pseudo-element type is passed (ex: ::before, ::first-line, etc),
+   * restrict the operation only to declarations in rules matching that pseudo-element.
+   *
+   * At the end, update the declaration's view (TextPropertyEditor instance) so it relects
+   * the latest state. Use this opportunity to also trigger checks for the "inactive"
+   * state of the declaration (whether it has effect or not).
+   *
+   * @param  {String} pseudo
+   *         Optional pseudo-element for which to restrict marking CSS declarations as
+   *         overridden.
+   */
+  updateDeclarations(pseudo = "") {
+    // Gather all text properties applicable to the selected element or pseudo-element.
+    const textProps = this._getDeclarations(pseudo);
+    // Gather all the computed properties applied by those text properties.
+    let computedProps = [];
+    for (const textProp of textProps) {
+      computedProps = computedProps.concat(textProp.computed);
+    }
+
+    // CSS Variables inherits from the normal element in case of pseudo element.
+    const variables = new Map(pseudo ? this.variablesMap.get("") : null);
+
+    // Walk over the computed properties. As we see a property name
+    // for the first time, mark that property's name as taken by this
+    // property.
+    //
+    // If we come across a property whose name is already taken, check
+    // its priority against the property that was found first:
+    //
+    //   If the new property is a higher priority, mark the old
+    //   property overridden and mark the property name as taken by
+    //   the new property.
+    //
+    //   If the new property is a lower or equal priority, mark it as
+    //   overridden.
+    //
+    // _overriddenDirty will be set on each prop, indicating whether its
+    // dirty status changed during this pass.
+    const taken = {};
+    for (const computedProp of computedProps) {
+      const earlier = taken[computedProp.name];
+
+      // Prevent -webkit-gradient from being selected after unchecking
+      // linear-gradient in this case:
+      //  -moz-linear-gradient: ...;
+      //  -webkit-linear-gradient: ...;
+      //  linear-gradient: ...;
+      if (!computedProp.textProp.isValid()) {
+        computedProp.overridden = true;
+        continue;
+      }
+
+      let overridden;
+      if (
+        earlier &&
+        computedProp.priority === "important" &&
+        earlier.priority !== "important" &&
+        // For !important only consider rules applying to the same parent node.
+        computedProp.textProp.rule.inherited == earlier.textProp.rule.inherited
+      ) {
+        // New property is higher priority. Mark the earlier property
+        // overridden (which will reverse its dirty state).
+        earlier._overriddenDirty = !earlier._overriddenDirty;
+        earlier.overridden = true;
+        overridden = false;
+      } else {
+        overridden = !!earlier;
+      }
+
+      computedProp._overriddenDirty = !!computedProp.overridden !== overridden;
+      computedProp.overridden = overridden;
+
+      if (!computedProp.overridden && computedProp.textProp.enabled) {
+        taken[computedProp.name] = computedProp;
+
+        if (isCssVariable(computedProp.name)) {
+          variables.set(computedProp.name, computedProp.value);
+        }
+      }
+    }
+
+    // Find the CSS variables that have been updated.
+    const previousVariablesMap = new Map(this.variablesMap.get(pseudo));
+    const changedVariableNamesSet = new Set(
+      [...variables.keys(), ...previousVariablesMap.keys()].filter(
+        k => variables.get(k) !== previousVariablesMap.get(k)
+      )
+    );
+
+    this.variablesMap.set(pseudo, variables);
+
+    // For each TextProperty, mark it overridden if all of its computed
+    // properties are marked overridden. Update the text property's associated
+    // editor, if any. This will clear the _overriddenDirty state on all
+    // computed properties. For each editor we also show or hide the inactive
+    // CSS icon as needed.
+    for (const textProp of textProps) {
+      // _updatePropertyOverridden will return true if the
+      // overridden state has changed for the text property.
+      // _hasUpdatedCSSVariable will return true if the declaration contains any
+      // of the updated CSS variable names.
+      if (
+        this._updatePropertyOverridden(textProp) ||
+        this._hasUpdatedCSSVariable(textProp, changedVariableNamesSet)
+      ) {
+        textProp.updateEditor();
+      }
+
+      // For each editor show or hide the inactive CSS icon as needed.
+      if (textProp.editor && this.unusedCssEnabled) {
+        textProp.editor.updatePropertyState();
+      }
+    }
+  }
+
+  /**
+   * Returns true if the given declaration's property value contains a CSS variable
+   * matching any of the updated CSS variable names.
+   *
+   * @param {TextProperty} declaration
+   *        A TextProperty of a rule.
+   * @param {Set<>String} variableNamesSet
+   *        A Set of CSS variable names that have been updated.
+   */
+  _hasUpdatedCSSVariable(declaration, variableNamesSet) {
+    for (const variableName of variableNamesSet) {
+      if (declaration.hasCSSVariable(variableName)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  /**
+   * Helper for |this.updateDeclarations()| to mark CSS declarations as overridden.
+   *
+   * Returns an array of CSS declarations (aka TextProperty instances) from all rules
+   * applicable to the selected element ordered from more- to less-specific.
+   *
+   * If a pseudo-element type is given, restrict the result only to declarations
+   * applicable to that pseudo-element.
+   *
+   * NOTE: this method skips CSS declarations in @keyframes rules because a number of
+   * criteria such as time and animation delay need to be checked in order to determine
+   * if the property is overridden at runtime.
+   *
+   * @param  {String} pseudo
+   *         Optional pseudo-element for which to restrict marking CSS declarations as
+   *         overridden. If omitted, only declarations for regular style rules are
+   *         returned (no pseudo-element style rules).
+   *
+   * @return {Array}
+   *         Array of TextProperty instances.
+   */
+  _getDeclarations(pseudo = "") {
+    const textProps = [];
+
+    for (const rule of this.rules) {
+      // Skip @keyframes rules
+      if (rule.keyframes) {
+        continue;
+      }
+
+      // Style rules must be considered only when they have selectors that match the node.
+      // When renaming a selector, the unmatched rule lingers in the Rule view, but it no
+      // longer matches the node. This strict check avoids accidentally causing
+      // declarations to be overridden in the remaining matching rules.
+      const isStyleRule =
+        rule.pseudoElement === "" && !!rule.matchedSelectors.length;
+
+      // Style rules for pseudo-elements must always be considered, regardless if their
+      // selector matches the node. As a convenience, declarations in rules for
+      // pseudo-elements show up in a separate Pseudo-elements accordion when selecting
+      // the host node (instead of the pseudo-element node directly, which is sometimes
+      // impossible, for example with ::selection or ::first-line).
+      // Loosening the strict check on matched selectors ensures these declarations
+      // participate in the algorithm below to mark them as overridden.
+      const isPseudoElementRule =
+        rule.pseudoElement !== "" && rule.pseudoElement === pseudo;
+
+      const isElementStyle = rule.domRule.type === ELEMENT_STYLE;
+
+      const filterCondition =
+        pseudo === "" ? isStyleRule || isElementStyle : isPseudoElementRule;
+
+      // Collect all relevant CSS declarations (aka TextProperty instances).
+      if (filterCondition) {
+        for (const textProp of rule.textProps.slice(0).reverse()) {
+          if (textProp.enabled) {
+            textProps.push(textProp);
+          }
+        }
+      }
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Adds a new declaration to the rule.
+   *
+   * @param  {String} ruleId
+   *         The id of the Rule to be modified.
+   * @param  {String} value
+   *         The new declaration value.
+   */
+  addNewDeclaration(ruleId, value) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declarationsToAdd = parseNamedDeclarations(
+      this.cssProperties.isKnown,
+      value,
+      true
+    );
+    if (!declarationsToAdd.length) {
+      return;
+    }
+
+    this._addMultipleDeclarations(rule, declarationsToAdd);
+  }
+
+  /**
+   * Adds a new rule. The rules view is updated from a "stylesheet-updated" event
+   * emitted the PageStyleActor as a result of the rule being inserted into the
+   * the stylesheet.
+   */
+  async addNewRule() {
+    await this.pageStyle.addNewRule(
+      this.element,
+      this.element.pseudoClassLocks
+    );
+  }
+
+  /**
+   * Given the id of the rule and the new declaration name, modifies the existing
+   * declaration name to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   * @param  {String} name
+   *         The new declaration name.
+   */
+  async modifyDeclarationName(ruleId, declarationId, name) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration || declaration.name === name) {
+      return;
+    }
+
+    // Adding multiple rules inside of name field overwrites the current
+    // property with the first, then adds any more onto the property list.
+    const declarations = parseDeclarations(this.cssProperties.isKnown, name);
+    if (!declarations.length) {
+      return;
+    }
+
+    await declaration.setName(declarations[0].name);
+
+    if (!declaration.enabled) {
+      await declaration.setEnabled(true);
+    }
+  }
+
+  /**
+   * Helper function to addNewDeclaration() and modifyDeclarationValue() for
+   * adding multiple declarations to a rule.
+   *
+   * @param  {Rule} rule
+   *         The Rule object to write new declarations to.
+   * @param  {Array<Object>} declarationsToAdd
+   *         An array of object containg the parsed declaration data to be added.
+   * @param  {TextProperty|null} siblingDeclaration
+   *         Optional declaration next to which the new declaration will be added.
+   */
+  _addMultipleDeclarations(rule, declarationsToAdd, siblingDeclaration = null) {
+    for (const { commentOffsets, name, value, priority } of declarationsToAdd) {
+      const isCommented = Boolean(commentOffsets);
+      const enabled = !isCommented;
+      siblingDeclaration = rule.createProperty(
+        name,
+        value,
+        priority,
+        enabled,
+        siblingDeclaration
+      );
+    }
+  }
+
+  /**
+   * Parse a value string and break it into pieces, starting with the
+   * first value, and into an array of additional declarations (if any).
+   *
+   * Example: Calling with "red; width: 100px" would return
+   * { firstValue: "red", propertiesToAdd: [{ name: "width", value: "100px" }] }
+   *
+   * @param  {String} value
+   *         The string to parse.
+   * @return {Object} An object with the following properties:
+   *         firstValue: A string containing a simple value, like
+   *                     "red" or "100px!important"
+   *         declarationsToAdd: An array with additional declarations, following the
+   *                            parseDeclarations format of { name, value, priority }
+   */
+  _getValueAndExtraProperties(value) {
+    // The inplace editor will prevent manual typing of multiple declarations,
+    // but we need to deal with the case during a paste event.
+    // Adding multiple declarations inside of value editor sets value with the
+    // first, then adds any more onto the declaration list (below this declarations).
+    let firstValue = value;
+    let declarationsToAdd = [];
+
+    const declarations = parseDeclarations(this.cssProperties.isKnown, value);
+
+    // Check to see if the input string can be parsed as multiple declarations
+    if (declarations.length) {
+      // Get the first property value (if any), and any remaining
+      // declarations (if any)
+      if (!declarations[0].name && declarations[0].value) {
+        firstValue = declarations[0].value;
+        declarationsToAdd = declarations.slice(1);
+      } else if (declarations[0].name && declarations[0].value) {
+        // In some cases, the value could be a property:value pair
+        // itself.  Join them as one value string and append
+        // potentially following declarations
+        firstValue = declarations[0].name + ": " + declarations[0].value;
+        declarationsToAdd = declarations.slice(1);
+      }
+    }
+
+    return {
+      declarationsToAdd,
+      firstValue,
+    };
+  }
+
+  /**
+   * Given the id of the rule and the new declaration value, modifies the existing
+   * declaration value to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   * @param  {String} value
+   *         The new declaration value.
+   */
+  async modifyDeclarationValue(ruleId, declarationId, value) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration) {
+      return;
+    }
+
+    const { declarationsToAdd, firstValue } =
+      this._getValueAndExtraProperties(value);
+    const parsedValue = parseSingleValue(
+      this.cssProperties.isKnown,
+      firstValue
+    );
+
+    if (
+      !declarationsToAdd.length &&
+      declaration.value === parsedValue.value &&
+      declaration.priority === parsedValue.priority
+    ) {
+      return;
+    }
+
+    // First, set this declaration value (common case, only modified a property)
+    await declaration.setValue(parsedValue.value, parsedValue.priority);
+
+    if (!declaration.enabled) {
+      await declaration.setEnabled(true);
+    }
+
+    this._addMultipleDeclarations(rule, declarationsToAdd, declaration);
+  }
+
+  /**
+   * Modifies the existing rule's selector to the new given value.
+   *
+   * @param  {String} ruleId
+   *         The id of the Rule to be modified.
+   * @param  {String} selector
+   *         The new selector value.
+   */
+  async modifySelector(ruleId, selector) {
+    try {
+      const rule = this.getRule(ruleId);
+      if (!rule) {
+        return;
+      }
+
+      const response = await rule.domRule.modifySelector(
+        this.element,
+        selector
+      );
+      const { ruleProps, isMatching } = response;
+
+      if (!ruleProps) {
+        // Notify for changes, even when nothing changes, just to allow tests
+        // being able to track end of this request.
+        this.ruleView.emit("ruleview-invalid-selector");
+        return;
+      }
+
+      const newRule = new Rule(this, {
+        ...ruleProps,
+        isUnmatched: !isMatching,
+      });
+
+      // Recompute the list of applied styles because editing a
+      // selector might cause this rule's position to change.
+      const appliedStyles = await this.pageStyle.getApplied(this.element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: this.showUserAgentStyles ? "ua" : undefined,
+      });
+      const newIndex = appliedStyles.findIndex(r => r.rule == ruleProps.rule);
+      const oldIndex = this.rules.indexOf(rule);
+
+      // Remove the old rule and insert the new rule according to where it appears
+      // in the list of applied styles.
+      this.rules.splice(oldIndex, 1);
+      // If the selector no longer matches, then we leave the rule in
+      // the same relative position.
+      this.rules.splice(newIndex === -1 ? oldIndex : newIndex, 0, newRule);
+
+      // Recompute, mark and update the UI for any properties that are
+      // overridden or contain inactive CSS according to the new list of rules.
+      this.onRuleUpdated();
+
+      // In order to keep the new rule in place of the old in the rules view, we need
+      // to remove the rule again if the rule was inserted to its new index according
+      // to the list of applied styles.
+      // Note: you might think we would replicate the list-modification logic above,
+      // but that is complicated due to the way the UI installs pseudo-element rules
+      // and the like.
+      if (newIndex !== -1) {
+        this.rules.splice(newIndex, 1);
+        this.rules.splice(oldIndex, 0, newRule);
+      }
+      this._changed();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  /**
+   * Toggles the enabled state of the given CSS declaration.
+   *
+   * @param  {String} ruleId
+   *         The Rule id of the given CSS declaration.
+   * @param  {String} declarationId
+   *         The TextProperty id for the CSS declaration.
+   */
+  toggleDeclaration(ruleId, declarationId) {
+    const rule = this.getRule(ruleId);
+    if (!rule) {
+      return;
+    }
+
+    const declaration = rule.getDeclaration(declarationId);
+    if (!declaration) {
+      return;
+    }
+
+    declaration.setEnabled(!declaration.enabled);
+  }
+
+  /**
+   * Mark a given TextProperty as overridden or not depending on the
+   * state of its computed properties. Clears the _overriddenDirty state
+   * on all computed properties.
+   *
+   * @param  {TextProperty} prop
+   *         The text property to update.
+   * @return {Boolean} true if the TextProperty's overridden state (or any of
+   *         its computed properties overridden state) changed.
+   */
+  _updatePropertyOverridden(prop) {
+    let overridden = true;
+    let dirty = false;
+
+    for (const computedProp of prop.computed) {
+      if (!computedProp.overridden) {
+        overridden = false;
+      }
+
+      dirty = computedProp._overriddenDirty || dirty;
+      delete computedProp._overriddenDirty;
+    }
+
+    dirty = !!prop.overridden !== overridden || dirty;
+    prop.overridden = overridden;
+    return dirty;
+  }
+
+  /**
+   * Returns the current value of a CSS variable; or null if the
+   * variable is not defined.
+   *
+   * @param  {String} name
+   *         The name of the variable.
+   * @param  {String} pseudo
+   *         The pseudo-element name of the rule.
+   * @return {String} the variable's value or null if the variable is
+   *         not defined.
+   */
+  getVariable(name, pseudo = "") {
+    const variables = this.variablesMap.get(pseudo);
+    return variables ? variables.get(name) : null;
+  }
+}
+
+module.exports = ElementStyle;
diff --git a/devtools/client/inspector/rules/models/moz.build b/devtools/client/inspector/rules/models/moz.build
new file mode 100644
index 0000000000..7a5561e213
--- /dev/null
+++ b/devtools/client/inspector/rules/models/moz.build
@@ -0,0 +1,13 @@
+# -*- 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(
+    "class-list.js",
+    "element-style.js",
+    "rule.js",
+    "text-property.js",
+    "user-properties.js",
+)
diff --git a/devtools/client/inspector/rules/models/rule.js b/devtools/client/inspector/rules/models/rule.js
new file mode 100644
index 0000000000..626ef883d6
--- /dev/null
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -0,0 +1,831 @@
+/* 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/. */
+
+"use strict";
+
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const CssLogic = require("resource://devtools/shared/inspector/css-logic.js");
+const TextProperty = require("resource://devtools/client/inspector/rules/models/text-property.js");
+
+loader.lazyRequireGetter(
+  this,
+  "promiseWarn",
+  "resource://devtools/client/inspector/shared/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "parseNamedDeclarations",
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+
+/**
+ * Rule is responsible for the following:
+ *   Manages a single style declaration or rule.
+ *   Applies changes to the properties in a rule.
+ *   Maintains a list of TextProperty objects.
+ */
+class Rule {
+  /**
+   * @param {ElementStyle} elementStyle
+   *        The ElementStyle to which this rule belongs.
+   * @param {Object} options
+   *        The information used to construct this rule. Properties include:
+   *          rule: A StyleRuleActor
+   *          inherited: An element this rule was inherited from. If omitted,
+   *            the rule applies directly to the current element.
+   *          isSystem: Is this a user agent style?
+   *          isUnmatched: True if the rule does not match the current selected
+   *            element, otherwise, false.
+   */
+  constructor(elementStyle, options) {
+    this.elementStyle = elementStyle;
+    this.domRule = options.rule;
+    this.compatibilityIssues = null;
+    this.matchedSelectors = options.matchedSelectors || [];
+    this.pseudoElement = options.pseudoElement || "";
+    this.isSystem = options.isSystem;
+    this.isUnmatched = options.isUnmatched || false;
+    this.inherited = options.inherited || null;
+    this.keyframes = options.keyframes || null;
+
+    this.cssProperties = this.elementStyle.ruleView.cssProperties;
+    this.inspector = this.elementStyle.ruleView.inspector;
+    this.store = this.elementStyle.ruleView.store;
+
+    // Populate the text properties with the style's current authoredText
+    // value, and add in any disabled properties from the store.
+    this.textProps = this._getTextProperties();
+    this.textProps = this.textProps.concat(this._getDisabledProperties());
+
+    this.getUniqueSelector = this.getUniqueSelector.bind(this);
+    this.onStyleRuleFrontUpdated = this.onStyleRuleFrontUpdated.bind(this);
+
+    this.domRule.on("rule-updated", this.onStyleRuleFrontUpdated);
+  }
+
+  destroy() {
+    if (this._unsubscribeSourceMap) {
+      this._unsubscribeSourceMap();
+    }
+
+    this.domRule.off("rule-updated", this.onStyleRuleFrontUpdated);
+    this.compatibilityIssues = null;
+    this.destroyed = true;
+  }
+
+  get declarations() {
+    return this.textProps;
+  }
+
+  get inheritance() {
+    if (!this.inherited) {
+      return null;
+    }
+
+    return {
+      inherited: this.inherited,
+      inheritedSource: this.inheritedSource,
+    };
+  }
+
+  get selector() {
+    return {
+      getUniqueSelector: this.getUniqueSelector,
+      matchedSelectors: this.matchedSelectors,
+      selectors: this.domRule.selectors,
+      selectorText: this.keyframes ? this.domRule.keyText : this.selectorText,
+    };
+  }
+
+  get sourceMapURLService() {
+    return this.inspector.toolbox.sourceMapURLService;
+  }
+
+  get title() {
+    let title = CssLogic.shortSource(this.sheet);
+    if (this.domRule.type !== ELEMENT_STYLE && this.ruleLine > 0) {
+      title += ":" + this.ruleLine;
+    }
+
+    return title;
+  }
+
+  get inheritedSource() {
+    if (this._inheritedSource) {
+      return this._inheritedSource;
+    }
+    this._inheritedSource = "";
+    if (this.inherited) {
+      let eltText = this.inherited.displayName;
+      if (this.inherited.id) {
+        eltText += "#" + this.inherited.id;
+      }
+      this._inheritedSource = STYLE_INSPECTOR_L10N.getFormatStr(
+        "rule.inheritedFrom",
+        eltText
+      );
+    }
+    return this._inheritedSource;
+  }
+
+  get keyframesName() {
+    if (this._keyframesName) {
+      return this._keyframesName;
+    }
+    this._keyframesName = "";
+    if (this.keyframes) {
+      this._keyframesName = STYLE_INSPECTOR_L10N.getFormatStr(
+        "rule.keyframe",
+        this.keyframes.name
+      );
+    }
+    return this._keyframesName;
+  }
+
+  get keyframesRule() {
+    if (!this.keyframes) {
+      return null;
+    }
+
+    return {
+      id: this.keyframes.actorID,
+      keyframesName: this.keyframesName,
+    };
+  }
+
+  get selectorText() {
+    return this.domRule.selectors
+      ? this.domRule.selectors.join(", ")
+      : CssLogic.l10n("rule.sourceElement");
+  }
+
+  /**
+   * The rule's stylesheet.
+   */
+  get sheet() {
+    return this.domRule ? this.domRule.parentStyleSheet : null;
+  }
+
+  /**
+   * The rule's line within a stylesheet
+   */
+  get ruleLine() {
+    return this.domRule ? this.domRule.line : -1;
+  }
+
+  /**
+   * The rule's column within a stylesheet
+   */
+  get ruleColumn() {
+    return this.domRule ? this.domRule.column : null;
+  }
+
+  /**
+   * Get the declaration block issues from the compatibility actor
+   * @returns A promise that resolves with an array of objects in following form:
+   *    {
+   *      // Type of compatibility issue
+   *      type: <string>,
+   *      // The CSS declaration that has compatibility issues
+   *      property: <string>,
+   *      // Alias to the given CSS property
+   *      alias: <Array>,
+   *      // Link to MDN documentation for the particular CSS rule
+   *      url: <string>,
+   *      deprecated: <boolean>,
+   *      experimental: <boolean>,
+   *      // An array of all the browsers that don't support the given CSS rule
+   *      unsupportedBrowsers: <Array>,
+   *    }
+   */
+  async getCompatibilityIssues() {
+    if (!this.compatibilityIssues) {
+      this.compatibilityIssues =
+        this.inspector.commands.inspectorCommand.getCSSDeclarationBlockIssues(
+          this.domRule.declarations
+        );
+    }
+
+    return this.compatibilityIssues;
+  }
+
+  /**
+   * Returns the TextProperty with the given id or undefined if it cannot be found.
+   *
+   * @param {String|null} id
+   *        A TextProperty id.
+   * @return {TextProperty|undefined} with the given id in the current Rule or undefined
+   * if it cannot be found.
+   */
+  getDeclaration(id) {
+    return id ? this.textProps.find(textProp => textProp.id === id) : undefined;
+  }
+
+  /**
+   * Returns an unique selector for the CSS rule.
+   */
+  async getUniqueSelector() {
+    let selector = "";
+
+    if (this.domRule.selectors) {
+      // This is a style rule with a selector.
+      selector = this.domRule.selectors.join(", ");
+    } else if (this.inherited) {
+      // This is an inline style from an inherited rule. Need to resolve the unique
+      // selector from the node which rule this is inherited from.
+      selector = await this.inherited.getUniqueSelector();
+    } else {
+      // This is an inline style from the current node.
+      selector = await this.inspector.selection.nodeFront.getUniqueSelector();
+    }
+
+    return selector;
+  }
+
+  /**
+   * Returns true if the rule matches the creation options
+   * specified.
+   *
+   * @param {Object} options
+   *        Creation options. See the Rule constructor for documentation.
+   */
+  matches(options) {
+    return this.domRule === options.rule;
+  }
+
+  /**
+   * Create a new TextProperty to include in the rule.
+   *
+   * @param {String} name
+   *        The text property name (such as "background" or "border-top").
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @param {Boolean} enabled
+   *        True if the property should be enabled.
+   * @param {TextProperty} siblingProp
+   *        Optional, property next to which the new property will be added.
+   */
+  createProperty(name, value, priority, enabled, siblingProp) {
+    const prop = new TextProperty(this, name, value, priority, enabled);
+
+    let ind;
+    if (siblingProp) {
+      ind = this.textProps.indexOf(siblingProp) + 1;
+      this.textProps.splice(ind, 0, prop);
+    } else {
+      ind = this.textProps.length;
+      this.textProps.push(prop);
+    }
+
+    this.applyProperties(modifications => {
+      modifications.createProperty(ind, name, value, priority, enabled);
+      // Now that the rule has been updated, the server might have given us data
+      // that changes the state of the property. Update it now.
+      prop.updateEditor();
+    });
+
+    return prop;
+  }
+
+  /**
+   * Helper function for applyProperties that is called when the actor
+   * does not support as-authored styles.  Store disabled properties
+   * in the element style's store.
+   */
+  _applyPropertiesNoAuthored(modifications) {
+    this.elementStyle.onRuleUpdated();
+
+    const disabledProps = [];
+
+    for (const prop of this.textProps) {
+      if (prop.invisible) {
+        continue;
+      }
+      if (!prop.enabled) {
+        disabledProps.push({
+          name: prop.name,
+          value: prop.value,
+          priority: prop.priority,
+        });
+        continue;
+      }
+      if (prop.value.trim() === "") {
+        continue;
+      }
+
+      modifications.setProperty(-1, prop.name, prop.value, prop.priority);
+
+      prop.updateComputed();
+    }
+
+    // Store disabled properties in the disabled store.
+    const disabled = this.elementStyle.store.disabled;
+    if (disabledProps.length) {
+      disabled.set(this.domRule, disabledProps);
+    } else {
+      disabled.delete(this.domRule);
+    }
+
+    return modifications.apply().then(() => {
+      const cssProps = {};
+      // Note that even though StyleRuleActors normally provide parsed
+      // declarations already, _applyPropertiesNoAuthored is only used when
+      // connected to older backend that do not provide them. So parse here.
+      for (const cssProp of parseNamedDeclarations(
+        this.cssProperties.isKnown,
+        this.domRule.authoredText
+      )) {
+        cssProps[cssProp.name] = cssProp;
+      }
+
+      for (const textProp of this.textProps) {
+        if (!textProp.enabled) {
+          continue;
+        }
+        let cssProp = cssProps[textProp.name];
+
+        if (!cssProp) {
+          cssProp = {
+            name: textProp.name,
+            value: "",
+            priority: "",
+          };
+        }
+
+        textProp.priority = cssProp.priority;
+      }
+    });
+  }
+
+  /**
+   * A helper for applyProperties that applies properties in the "as
+   * authored" case; that is, when the StyleRuleActor supports
+   * setRuleText.
+   */
+  _applyPropertiesAuthored(modifications) {
+    return modifications.apply().then(() => {
+      // The rewriting may have required some other property values to
+      // change, e.g., to insert some needed terminators.  Update the
+      // relevant properties here.
+      for (const index in modifications.changedDeclarations) {
+        const newValue = modifications.changedDeclarations[index];
+        this.textProps[index].updateValue(newValue);
+      }
+      // Recompute and redisplay the computed properties.
+      for (const prop of this.textProps) {
+        if (!prop.invisible && prop.enabled) {
+          prop.updateComputed();
+          prop.updateEditor();
+        }
+      }
+    });
+  }
+
+  /**
+   * Reapply all the properties in this rule, and update their
+   * computed styles.  Will re-mark overridden properties.  Sets the
+   * |_applyingModifications| property to a promise which will resolve
+   * when the edit has completed.
+   *
+   * @param {Function} modifier a function that takes a RuleModificationList
+   *        (or RuleRewriter) as an argument and that modifies it
+   *        to apply the desired edit
+   * @return {Promise} a promise which will resolve when the edit
+   *        is complete
+   */
+  applyProperties(modifier) {
+    // If there is already a pending modification, we have to wait
+    // until it settles before applying the next modification.
+    const resultPromise = Promise.resolve(this._applyingModifications)
+      .then(() => {
+        const modifications = this.domRule.startModifyingProperties(
+          this.cssProperties
+        );
+        modifier(modifications);
+        if (this.domRule.canSetRuleText) {
+          return this._applyPropertiesAuthored(modifications);
+        }
+        return this._applyPropertiesNoAuthored(modifications);
+      })
+      .then(() => {
+        this.elementStyle.onRuleUpdated();
+
+        if (resultPromise === this._applyingModifications) {
+          this._applyingModifications = null;
+          this.elementStyle._changed();
+        }
+      })
+      .catch(promiseWarn);
+
+    this._applyingModifications = resultPromise;
+    return resultPromise;
+  }
+
+  /**
+   * Renames a property.
+   *
+   * @param {TextProperty} property
+   *        The property to rename.
+   * @param {String} name
+   *        The new property name (such as "background" or "border-top").
+   * @return {Promise}
+   */
+  setPropertyName(property, name) {
+    if (name === property.name) {
+      return Promise.resolve();
+    }
+
+    const oldName = property.name;
+    property.name = name;
+    const index = this.textProps.indexOf(property);
+    return this.applyProperties(modifications => {
+      modifications.renameProperty(index, oldName, name);
+    });
+  }
+
+  /**
+   * Sets the value and priority of a property, then reapply all properties.
+   *
+   * @param {TextProperty} property
+   *        The property to manipulate.
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @return {Promise}
+   */
+  setPropertyValue(property, value, priority) {
+    if (value === property.value && priority === property.priority) {
+      return Promise.resolve();
+    }
+
+    property.value = value;
+    property.priority = priority;
+
+    const index = this.textProps.indexOf(property);
+    return this.applyProperties(modifications => {
+      modifications.setProperty(index, property.name, value, priority);
+    });
+  }
+
+  /**
+   * Just sets the value and priority of a property, in order to preview its
+   * effect on the content document.
+   *
+   * @param {TextProperty} property
+   *        The property which value will be previewed
+   * @param {String} value
+   *        The value to be used for the preview
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   **@return {Promise}
+   */
+  previewPropertyValue(property, value, priority) {
+    this.elementStyle.ruleView.emitForTests("start-preview-property-value");
+    const modifications = this.domRule.startModifyingProperties(
+      this.cssProperties
+    );
+    modifications.setProperty(
+      this.textProps.indexOf(property),
+      property.name,
+      value,
+      priority
+    );
+    return modifications.apply().then(() => {
+      // Ensure dispatching a ruleview-changed event
+      // also for previews
+      this.elementStyle._changed();
+    });
+  }
+
+  /**
+   * Disables or enables given TextProperty.
+   *
+   * @param {TextProperty} property
+   *        The property to enable/disable
+   * @param {Boolean} value
+   */
+  setPropertyEnabled(property, value) {
+    if (property.enabled === !!value) {
+      return;
+    }
+    property.enabled = !!value;
+    const index = this.textProps.indexOf(property);
+    this.applyProperties(modifications => {
+      modifications.setPropertyEnabled(index, property.name, property.enabled);
+    });
+  }
+
+  /**
+   * Remove a given TextProperty from the rule and update the rule
+   * accordingly.
+   *
+   * @param {TextProperty} property
+   *        The property to be removed
+   */
+  removeProperty(property) {
+    const index = this.textProps.indexOf(property);
+    this.textProps.splice(index, 1);
+    // Need to re-apply properties in case removing this TextProperty
+    // exposes another one.
+    this.applyProperties(modifications => {
+      modifications.removeProperty(index, property.name);
+    });
+  }
+
+  /**
+   * Event handler for "rule-updated" event fired by StyleRuleActor.
+   *
+   * @param {StyleRuleFront} front
+   */
+  onStyleRuleFrontUpdated(front) {
+    // Overwritting this reference is not required, but it's here to avoid confusion.
+    // Whenever an actor is passed over the protocol, either as a return value or as
+    // payload on an event, the `form` of its corresponding front will be automatically
+    // updated. No action required.
+    // Even if this `domRule` reference here is not explicitly updated, lookups of
+    // `this.domRule.declarations` will point to the latest state of declarations set
+    // on the actor. Everything on `StyleRuleForm.form` will point to the latest state.
+    this.domRule = front;
+  }
+
+  /**
+   * Get the list of TextProperties from the style. Needs
+   * to parse the style's authoredText.
+   */
+  _getTextProperties() {
+    const textProps = [];
+    const store = this.elementStyle.store;
+
+    for (const prop of this.domRule.declarations) {
+      const name = prop.name;
+      // In an inherited rule, we only show inherited properties.
+      // However, we must keep all properties in order for rule
+      // rewriting to work properly.  So, compute the "invisible"
+      // property here.
+      const invisible = this.inherited && !this.cssProperties.isInherited(name);
+      const value = store.userProperties.getProperty(
+        this.domRule,
+        name,
+        prop.value
+      );
+      const textProp = new TextProperty(
+        this,
+        name,
+        value,
+        prop.priority,
+        !("commentOffsets" in prop),
+        invisible
+      );
+      textProps.push(textProp);
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Return the list of disabled properties from the store for this rule.
+   */
+  _getDisabledProperties() {
+    const store = this.elementStyle.store;
+
+    // Include properties from the disabled property store, if any.
+    const disabledProps = store.disabled.get(this.domRule);
+    if (!disabledProps) {
+      return [];
+    }
+
+    const textProps = [];
+
+    for (const prop of disabledProps) {
+      const value = store.userProperties.getProperty(
+        this.domRule,
+        prop.name,
+        prop.value
+      );
+      const textProp = new TextProperty(this, prop.name, value, prop.priority);
+      textProp.enabled = false;
+      textProps.push(textProp);
+    }
+
+    return textProps;
+  }
+
+  /**
+   * Reread the current state of the rules and rebuild text
+   * properties as needed.
+   */
+  refresh(options) {
+    this.matchedSelectors = options.matchedSelectors || [];
+    const newTextProps = this._getTextProperties();
+
+    // The element style rule behaves differently on refresh. We basically need to update
+    // it to reflect the new text properties exactly. The order might have changed, some
+    // properties might have been removed, etc. And we don't need to mark anything as
+    // disabled here. The element style rule should always reflect the content of the
+    // style attribute.
+    if (this.domRule.type === ELEMENT_STYLE) {
+      this.textProps = newTextProps;
+
+      if (this.editor) {
+        this.editor.populate(true);
+      }
+
+      return;
+    }
+
+    // Update current properties for each property present on the style.
+    // This will mark any touched properties with _visited so we
+    // can detect properties that weren't touched (because they were
+    // removed from the style).
+    // Also keep track of properties that didn't exist in the current set
+    // of properties.
+    const brandNewProps = [];
+    for (const newProp of newTextProps) {
+      if (!this._updateTextProperty(newProp)) {
+        brandNewProps.push(newProp);
+      }
+    }
+
+    // Refresh editors and disabled state for all the properties that
+    // were updated.
+    for (const prop of this.textProps) {
+      // Properties that weren't touched during the update
+      // process must no longer exist on the node.  Mark them disabled.
+      if (!prop._visited) {
+        prop.enabled = false;
+        prop.updateEditor();
+      } else {
+        delete prop._visited;
+      }
+    }
+
+    // Add brand new properties.
+    this.textProps = this.textProps.concat(brandNewProps);
+
+    // Refresh the editor if one already exists.
+    if (this.editor) {
+      this.editor.populate();
+    }
+  }
+
+  /**
+   * Update the current TextProperties that match a given property
+   * from the authoredText.  Will choose one existing TextProperty to update
+   * with the new property's value, and will disable all others.
+   *
+   * When choosing the best match to reuse, properties will be chosen
+   * by assigning a rank and choosing the highest-ranked property:
+   *   Name, value, and priority match, enabled. (6)
+   *   Name, value, and priority match, disabled. (5)
+   *   Name and value match, enabled. (4)
+   *   Name and value match, disabled. (3)
+   *   Name matches, enabled. (2)
+   *   Name matches, disabled. (1)
+   *
+   * If no existing properties match the property, nothing happens.
+   *
+   * @param {TextProperty} newProp
+   *        The current version of the property, as parsed from the
+   *        authoredText in Rule._getTextProperties().
+   * @return {Boolean} true if a property was updated, false if no properties
+   *         were updated.
+   */
+  _updateTextProperty(newProp) {
+    const match = { rank: 0, prop: null };
+
+    for (const prop of this.textProps) {
+      if (prop.name !== newProp.name) {
+        continue;
+      }
+
+      // Mark this property visited.
+      prop._visited = true;
+
+      // Start at rank 1 for matching name.
+      let rank = 1;
+
+      // Value and Priority matches add 2 to the rank.
+      // Being enabled adds 1.  This ranks better matches higher,
+      // with priority breaking ties.
+      if (prop.value === newProp.value) {
+        rank += 2;
+        if (prop.priority === newProp.priority) {
+          rank += 2;
+        }
+      }
+
+      if (prop.enabled) {
+        rank += 1;
+      }
+
+      if (rank > match.rank) {
+        if (match.prop) {
+          // We outrank a previous match, disable it.
+          match.prop.enabled = false;
+          match.prop.updateEditor();
+        }
+        match.rank = rank;
+        match.prop = prop;
+      } else if (rank) {
+        // A previous match outranks us, disable ourself.
+        prop.enabled = false;
+        prop.updateEditor();
+      }
+    }
+
+    // If we found a match, update its value with the new text property
+    // value.
+    if (match.prop) {
+      match.prop.set(newProp);
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Jump between editable properties in the UI. If the focus direction is
+   * forward, begin editing the next property name if available or focus the
+   * new property editor otherwise. If the focus direction is backward,
+   * begin editing the previous property value or focus the selector editor if
+   * this is the first element in the property list.
+   *
+   * @param {TextProperty} textProperty
+   *        The text property that will be left to focus on a sibling.
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  editClosestTextProperty(textProperty, direction) {
+    let index = this.textProps.indexOf(textProperty);
+
+    if (direction === Services.focus.MOVEFOCUS_FORWARD) {
+      for (++index; index < this.textProps.length; ++index) {
+        if (!this.textProps[index].invisible) {
+          break;
+        }
+      }
+      if (index === this.textProps.length) {
+        textProperty.rule.editor.closeBrace.click();
+      } else {
+        this.textProps[index].editor.nameSpan.click();
+      }
+    } else if (direction === Services.focus.MOVEFOCUS_BACKWARD) {
+      for (--index; index >= 0; --index) {
+        if (!this.textProps[index].invisible) {
+          break;
+        }
+      }
+      if (index < 0) {
+        textProperty.editor.ruleEditor.selectorText.click();
+      } else {
+        this.textProps[index].editor.valueSpan.click();
+      }
+    }
+  }
+
+  /**
+   * Return a string representation of the rule.
+   */
+  stringifyRule() {
+    const selectorText = this.selectorText;
+    let cssText = "";
+    const terminator = Services.appinfo.OS === "WINNT" ? "\r\n" : "\n";
+
+    for (const textProp of this.textProps) {
+      if (!textProp.invisible) {
+        cssText += "\t" + textProp.stringifyProperty() + terminator;
+      }
+    }
+
+    return selectorText + " {" + terminator + cssText + "}";
+  }
+
+  /**
+   * See whether this rule has any non-invisible properties.
+   * @return {Boolean} true if there is any visible property, or false
+   *         if all properties are invisible
+   */
+  hasAnyVisibleProperties() {
+    for (const prop of this.textProps) {
+      if (!prop.invisible) {
+        return true;
+      }
+    }
+    return false;
+  }
+}
+
+module.exports = Rule;
diff --git a/devtools/client/inspector/rules/models/text-property.js b/devtools/client/inspector/rules/models/text-property.js
new file mode 100644
index 0000000000..d7568f74f3
--- /dev/null
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -0,0 +1,400 @@
+/* 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/. */
+
+"use strict";
+
+const { generateUUID } = require("resource://devtools/shared/generate-uuid.js");
+const {
+  COMPATIBILITY_TOOLTIP_MESSAGE,
+} = require("resource://devtools/client/inspector/rules/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "escapeCSSComment",
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+
+loader.lazyRequireGetter(
+  this,
+  "getCSSVariables",
+  "resource://devtools/client/inspector/rules/utils/utils.js",
+  true
+);
+
+/**
+ * TextProperty is responsible for the following:
+ *   Manages a single property from the authoredText attribute of the
+ *     relevant declaration.
+ *   Maintains a list of computed properties that come from this
+ *     property declaration.
+ *   Changes to the TextProperty are sent to its related Rule for
+ *     application.
+ */
+class TextProperty {
+  /**
+   * @param {Rule} rule
+   *        The rule this TextProperty came from.
+   * @param {String} name
+   *        The text property name (such as "background" or "border-top").
+   * @param {String} value
+   *        The property's value (not including priority).
+   * @param {String} priority
+   *        The property's priority (either "important" or an empty string).
+   * @param {Boolean} enabled
+   *        Whether the property is enabled.
+   * @param {Boolean} invisible
+   *        Whether the property is invisible. In an inherited rule, only show
+   *        the inherited declarations. The other declarations are considered
+   *        invisible and does not show up in the UI. These are needed so that
+   *        the index of a property in Rule.textProps is the same as the index
+   *        coming from parseDeclarations.
+   */
+  constructor(rule, name, value, priority, enabled = true, invisible = false) {
+    this.id = name + "_" + generateUUID().toString();
+    this.rule = rule;
+    this.name = name;
+    this.value = value;
+    this.priority = priority;
+    this.enabled = !!enabled;
+    this.invisible = invisible;
+    this.elementStyle = this.rule.elementStyle;
+    this.cssProperties = this.elementStyle.ruleView.cssProperties;
+    this.panelDoc = this.elementStyle.ruleView.inspector.panelDoc;
+    this.userProperties = this.elementStyle.store.userProperties;
+    // Names of CSS variables used in the value of this declaration.
+    this.usedVariables = new Set();
+
+    this.updateComputed();
+    this.updateUsedVariables();
+  }
+
+  get computedProperties() {
+    return this.computed
+      .filter(computed => computed.name !== this.name)
+      .map(computed => {
+        return {
+          isOverridden: computed.overridden,
+          name: computed.name,
+          priority: computed.priority,
+          value: computed.value,
+        };
+      });
+  }
+
+  /**
+   * Returns whether or not the declaration's name is known.
+   *
+   * @return {Boolean} true if the declaration name is known, false otherwise.
+   */
+  get isKnownProperty() {
+    return this.cssProperties.isKnown(this.name);
+  }
+
+  /**
+   * Returns whether or not the declaration is changed by the user.
+   *
+   * @return {Boolean} true if the declaration is changed by the user, false
+   * otherwise.
+   */
+  get isPropertyChanged() {
+    return this.userProperties.contains(this.rule.domRule, this.name);
+  }
+
+  /**
+   * Update the editor associated with this text property,
+   * if any.
+   */
+  updateEditor() {
+    // When the editor updates, reset the saved
+    // compatibility issues list as any updates
+    // may alter the compatibility status of declarations
+    this.rule.compatibilityIssues = null;
+    if (this.editor) {
+      this.editor.update();
+    }
+  }
+
+  /**
+   * Update the list of computed properties for this text property.
+   */
+  updateComputed() {
+    if (!this.name) {
+      return;
+    }
+
+    // This is a bit funky.  To get the list of computed properties
+    // for this text property, we'll set the property on a dummy element
+    // and see what the computed style looks like.
+    const dummyElement = this.elementStyle.ruleView.dummyElement;
+    const dummyStyle = dummyElement.style;
+    dummyStyle.cssText = "";
+    dummyStyle.setProperty(this.name, this.value, this.priority);
+
+    this.computed = [];
+
+    // Manually get all the properties that are set when setting a value on
+    // this.name and check the computed style on dummyElement for each one.
+    // If we just read dummyStyle, it would skip properties when value === "".
+    const subProps = this.cssProperties.getSubproperties(this.name);
+
+    for (const prop of subProps) {
+      this.computed.push({
+        textProp: this,
+        name: prop,
+        value: dummyStyle.getPropertyValue(prop),
+        priority: dummyStyle.getPropertyPriority(prop),
+      });
+    }
+  }
+
+  /**
+   * Extract all CSS variable names used in this declaration's value into a Set for
+   * easy querying. Call this method any time the declaration's value changes.
+   */
+  updateUsedVariables() {
+    this.usedVariables.clear();
+
+    for (const variable of getCSSVariables(this.value)) {
+      this.usedVariables.add(variable);
+    }
+  }
+
+  /**
+   * Set all the values from another TextProperty instance into
+   * this TextProperty instance.
+   *
+   * @param {TextProperty} prop
+   *        The other TextProperty instance.
+   */
+  set(prop) {
+    let changed = false;
+    for (const item of ["name", "value", "priority", "enabled"]) {
+      if (this[item] !== prop[item]) {
+        this[item] = prop[item];
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      this.updateUsedVariables();
+      this.updateEditor();
+    }
+  }
+
+  setValue(value, priority, force = false) {
+    if (value !== this.value || force) {
+      this.userProperties.setProperty(this.rule.domRule, this.name, value);
+    }
+    return this.rule.setPropertyValue(this, value, priority).then(() => {
+      this.updateUsedVariables();
+      this.updateEditor();
+    });
+  }
+
+  /**
+   * Called when the property's value has been updated externally, and
+   * the property and editor should update to reflect that value.
+   *
+   * @param {String} value
+   *        Property value
+   */
+  updateValue(value) {
+    if (value !== this.value) {
+      this.value = value;
+      this.updateUsedVariables();
+      this.updateEditor();
+    }
+  }
+
+  async setName(name) {
+    if (name !== this.name) {
+      this.userProperties.setProperty(this.rule.domRule, name, this.value);
+    }
+
+    await this.rule.setPropertyName(this, name);
+    this.updateEditor();
+  }
+
+  setEnabled(value) {
+    this.rule.setPropertyEnabled(this, value);
+    this.updateEditor();
+  }
+
+  remove() {
+    this.rule.removeProperty(this);
+  }
+
+  /**
+   * Return a string representation of the rule property.
+   */
+  stringifyProperty() {
+    // Get the displayed property value
+    let declaration = this.name + ": " + this.value;
+
+    if (this.priority) {
+      declaration += " !" + this.priority;
+    }
+
+    declaration += ";";
+
+    // Comment out property declarations that are not enabled
+    if (!this.enabled) {
+      declaration = "/* " + escapeCSSComment(declaration) + " */";
+    }
+
+    return declaration;
+  }
+
+  /**
+   * Validate this property. Does it make sense for this value to be assigned
+   * to this property name?
+   *
+   * @return {Boolean} true if the whole CSS declaration is valid, false otherwise.
+   */
+  isValid() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+
+    // When adding a new property in the rule-view, the TextProperty object is
+    // created right away before the rule gets updated on the server, so we're
+    // not going to find the corresponding declaration object yet. Default to
+    // true.
+    if (!this.rule.domRule.declarations[selfIndex]) {
+      return true;
+    }
+
+    return this.rule.domRule.declarations[selfIndex].isValid;
+  }
+
+  isUsed() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+    const declarations = this.rule.domRule.declarations;
+
+    // StyleRuleActor's declarations may have a isUsed flag (if the server is the right
+    // version). Just return true if the information is missing.
+    if (
+      !declarations ||
+      !declarations[selfIndex] ||
+      !declarations[selfIndex].isUsed
+    ) {
+      return { used: true };
+    }
+
+    return declarations[selfIndex].isUsed;
+  }
+
+  /**
+   * Get compatibility issue linked with the textProp.
+   *
+   * @returns  A JSON objects with compatibility information in following form:
+   *    {
+   *      // A boolean to denote the compatibility status
+   *      isCompatible: <boolean>,
+   *      // The CSS declaration that has compatibility issues
+   *      property: <string>,
+   *      // The un-aliased root CSS declaration for the given property
+   *      rootProperty: <string>,
+   *      // The l10n message id for the tooltip message
+   *      msgId: <string>,
+   *      // Link to MDN documentation for the rootProperty
+   *      url: <string>,
+   *      // An array of all the browsers that don't support the given CSS rule
+   *      unsupportedBrowsers: <Array>,
+   *    }
+   */
+  async isCompatible() {
+    // This is a workaround for Bug 1648339
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1648339
+    // that makes the tooltip icon inconsistent with the
+    // position of the rule it is associated with. Once solved,
+    // the compatibility data can be directly accessed from the
+    // declaration and this logic can be used to set isCompatible
+    // property directly to domRule in StyleRuleActor's form() method.
+    if (!this.enabled) {
+      return { isCompatible: true };
+    }
+
+    const compatibilityIssues = await this.rule.getCompatibilityIssues();
+    if (!compatibilityIssues.length) {
+      return { isCompatible: true };
+    }
+
+    const property = this.name;
+    const indexOfProperty = compatibilityIssues.findIndex(
+      issue => issue.property === property || issue.aliases?.includes(property)
+    );
+
+    if (indexOfProperty < 0) {
+      return { isCompatible: true };
+    }
+
+    const {
+      property: rootProperty,
+      deprecated,
+      experimental,
+      specUrl,
+      url,
+      unsupportedBrowsers,
+    } = compatibilityIssues[indexOfProperty];
+
+    let msgId = COMPATIBILITY_TOOLTIP_MESSAGE.default;
+    if (deprecated && experimental && !unsupportedBrowsers.length) {
+      msgId =
+        COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-experimental-supported"];
+    } else if (deprecated && experimental) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-experimental"];
+    } else if (deprecated && !unsupportedBrowsers.length) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"];
+    } else if (deprecated) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE.deprecated;
+    } else if (experimental && !unsupportedBrowsers.length) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"];
+    } else if (experimental) {
+      msgId = COMPATIBILITY_TOOLTIP_MESSAGE.experimental;
+    }
+
+    return {
+      isCompatible: false,
+      property,
+      rootProperty,
+      msgId,
+      specUrl,
+      url,
+      unsupportedBrowsers,
+    };
+  }
+
+  /**
+   * Validate the name of this property.
+   *
+   * @return {Boolean} true if the property name is valid, false otherwise.
+   */
+  isNameValid() {
+    const selfIndex = this.rule.textProps.indexOf(this);
+
+    // When adding a new property in the rule-view, the TextProperty object is
+    // created right away before the rule gets updated on the server, so we're
+    // not going to find the corresponding declaration object yet. Default to
+    // true.
+    if (!this.rule.domRule.declarations[selfIndex]) {
+      return true;
+    }
+
+    return this.rule.domRule.declarations[selfIndex].isNameValid;
+  }
+
+  /**
+   * Returns true if the property value is a CSS variables and contains the given variable
+   * name, and false otherwise.
+   *
+   * @param {String}
+   *        CSS variable name (e.g. "--color")
+   * @return {Boolean}
+   */
+  hasCSSVariable(name) {
+    return this.usedVariables.has(name);
+  }
+}
+
+module.exports = TextProperty;
diff --git a/devtools/client/inspector/rules/models/user-properties.js b/devtools/client/inspector/rules/models/user-properties.js
new file mode 100644
index 0000000000..381b800e59
--- /dev/null
+++ b/devtools/client/inspector/rules/models/user-properties.js
@@ -0,0 +1,85 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * Store of CSSStyleDeclarations mapped to properties that have been changed by
+ * the user.
+ */
+class UserProperties {
+  constructor() {
+    this.map = new Map();
+  }
+
+  /**
+   * Get a named property for a given CSSStyleDeclaration.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property is mapped.
+   * @param {String} name
+   *        The name of the property to get.
+   * @param {String} value
+   *        Default value.
+   * @return {String}
+   *        The property value if it has previously been set by the user, null
+   *        otherwise.
+   */
+  getProperty(style, name, value) {
+    const key = this.getKey(style);
+    const entry = this.map.get(key, null);
+
+    if (entry && name in entry) {
+      return entry[name];
+    }
+    return value;
+  }
+
+  /**
+   * Set a named property for a given CSSStyleDeclaration.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property is to be mapped.
+   * @param {String} name
+   *        The name of the property to set.
+   * @param {String} userValue
+   *        The value of the property to set.
+   */
+  setProperty(style, name, userValue) {
+    const key = this.getKey(style, name);
+    const entry = this.map.get(key, null);
+
+    if (entry) {
+      entry[name] = userValue;
+    } else {
+      const props = {};
+      props[name] = userValue;
+      this.map.set(key, props);
+    }
+  }
+
+  /**
+   * Check whether a named property for a given CSSStyleDeclaration is stored.
+   *
+   * @param {CSSStyleDeclaration} style
+   *        The CSSStyleDeclaration against which the property would be mapped.
+   * @param {String} name
+   *        The name of the property to check.
+   */
+  contains(style, name) {
+    const key = this.getKey(style, name);
+    const entry = this.map.get(key, null);
+    return !!entry && name in entry;
+  }
+
+  getKey(style, name) {
+    return style.actorID + ":" + name;
+  }
+
+  clear() {
+    this.map.clear();
+  }
+}
+
+module.exports = UserProperties;
diff --git a/devtools/client/inspector/rules/moz.build b/devtools/client/inspector/rules/moz.build
new file mode 100644
index 0000000000..0cc40dab81
--- /dev/null
+++ b/devtools/client/inspector/rules/moz.build
@@ -0,0 +1,25 @@
+# -*- 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/.
+
+DIRS += [
+    "models",
+    "utils",
+    "views",
+]
+
+DevToolsModules(
+    "constants.js",
+    "rules.js",
+    "types.js",
+)
+
+BROWSER_CHROME_MANIFESTS += [
+    "test/browser_part1.ini",
+    "test/browser_part2.ini",
+]
+
+with Files("**"):
+    BUG_COMPONENT = ("DevTools", "Inspector: Rules")
diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
new file mode 100644
index 0000000000..5ddef719d5
--- /dev/null
+++ b/devtools/client/inspector/rules/rules.js
@@ -0,0 +1,2199 @@
+/* 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/. */
+
+"use strict";
+
+const flags = require("resource://devtools/shared/flags.js");
+const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const OutputParser = require("resource://devtools/client/shared/output-parser.js");
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+const ElementStyle = require("resource://devtools/client/inspector/rules/models/element-style.js");
+const RuleEditor = require("resource://devtools/client/inspector/rules/views/rule-editor.js");
+const TooltipsOverlay = require("resource://devtools/client/inspector/shared/tooltips-overlay.js");
+const {
+  createChild,
+  promiseWarn,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const DOUBLESPACE = "  ";
+
+loader.lazyRequireGetter(
+  this,
+  ["flashElementOn", "flashElementOff"],
+  "resource://devtools/client/inspector/markup/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "ClassListPreviewer",
+  "resource://devtools/client/inspector/rules/views/class-list-previewer.js"
+);
+loader.lazyRequireGetter(
+  this,
+  ["getNodeInfo", "getNodeCompatibilityInfo", "getRuleFromNode"],
+  "resource://devtools/client/inspector/rules/utils/utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "StyleInspectorMenu",
+  "resource://devtools/client/inspector/shared/style-inspector-menu.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "AutocompletePopup",
+  "resource://devtools/client/shared/autocomplete-popup.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "KeyShortcuts",
+  "resource://devtools/client/shared/key-shortcuts.js"
+);
+loader.lazyRequireGetter(
+  this,
+  "clipboardHelper",
+  "resource://devtools/shared/platform/clipboard.js"
+);
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+const PREF_DEFAULT_COLOR_UNIT = "devtools.defaultColorUnit";
+const PREF_DRAGGABLE = "devtools.inspector.draggable_properties";
+const FILTER_CHANGED_TIMEOUT = 150;
+// Removes the flash-out class from an element after 1 second.
+const PROPERTY_FLASHING_DURATION = 1000;
+
+// This is used to parse user input when filtering.
+const FILTER_PROP_RE = /\s*([^:\s]*)\s*:\s*(.*?)\s*;?$/;
+// This is used to parse the filter search value to see if the filter
+// should be strict or not
+const FILTER_STRICT_RE = /\s*`(.*?)`\s*$/;
+
+/**
+ * Our model looks like this:
+ *
+ * ElementStyle:
+ *   Responsible for keeping track of which properties are overridden.
+ *   Maintains a list of Rule objects that apply to the element.
+ * Rule:
+ *   Manages a single style declaration or rule.
+ *   Responsible for applying changes to the properties in a rule.
+ *   Maintains a list of TextProperty objects.
+ * TextProperty:
+ *   Manages a single property from the authoredText attribute of the
+ *     relevant declaration.
+ *   Maintains a list of computed properties that come from this
+ *     property declaration.
+ *   Changes to the TextProperty are sent to its related Rule for
+ *     application.
+ *
+ * View hierarchy mostly follows the model hierarchy.
+ *
+ * CssRuleView:
+ *   Owns an ElementStyle and creates a list of RuleEditors for its
+ *    Rules.
+ * RuleEditor:
+ *   Owns a Rule object and creates a list of TextPropertyEditors
+ *     for its TextProperties.
+ *   Manages creation of new text properties.
+ * TextPropertyEditor:
+ *   Owns a TextProperty object.
+ *   Manages changes to the TextProperty.
+ *   Can be expanded to display computed properties.
+ *   Can mark a property disabled or enabled.
+ */
+
+/**
+ * CssRuleView is a view of the style rules and declarations that
+ * apply to a given element.  After construction, the 'element'
+ * property will be available with the user interface.
+ *
+ * @param {Inspector} inspector
+ *        Inspector toolbox panel
+ * @param {Document} document
+ *        The document that will contain the rule view.
+ * @param {Object} store
+ *        The CSS rule view can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
+ */
+function CssRuleView(inspector, document, store) {
+  EventEmitter.decorate(this);
+
+  this.inspector = inspector;
+  this.cssProperties = inspector.cssProperties;
+  this.styleDocument = document;
+  this.styleWindow = this.styleDocument.defaultView;
+  this.store = store || {};
+
+  // Allow tests to override debouncing behavior, as this can cause intermittents.
+  this.debounce = debounce;
+
+  // Variable used to stop the propagation of mouse events to children
+  // when we are updating a value by dragging the mouse and we then release it
+  this.childHasDragged = false;
+
+  this._outputParser = new OutputParser(document, this.cssProperties);
+
+  this._onAddRule = this._onAddRule.bind(this);
+  this._onContextMenu = this._onContextMenu.bind(this);
+  this._onCopy = this._onCopy.bind(this);
+  this._onFilterStyles = this._onFilterStyles.bind(this);
+  this._onClearSearch = this._onClearSearch.bind(this);
+  this._onTogglePseudoClassPanel = this._onTogglePseudoClassPanel.bind(this);
+  this._onTogglePseudoClass = this._onTogglePseudoClass.bind(this);
+  this._onToggleClassPanel = this._onToggleClassPanel.bind(this);
+  this._onToggleLightColorSchemeSimulation =
+    this._onToggleLightColorSchemeSimulation.bind(this);
+  this._onToggleDarkColorSchemeSimulation =
+    this._onToggleDarkColorSchemeSimulation.bind(this);
+  this._onTogglePrintSimulation = this._onTogglePrintSimulation.bind(this);
+  this.highlightElementRule = this.highlightElementRule.bind(this);
+  this.highlightProperty = this.highlightProperty.bind(this);
+  this.refreshPanel = this.refreshPanel.bind(this);
+
+  const doc = this.styleDocument;
+  // Delegate bulk handling of events happening within the DOM tree of the Rules view
+  // to this.handleEvent(). Listening on the capture phase of the event bubbling to be
+  // able to stop event propagation on a case-by-case basis and prevent event target
+  // ancestor nodes from handling them.
+  this.styleDocument.addEventListener("click", this, { capture: true });
+  this.element = doc.getElementById("ruleview-container-focusable");
+  this.addRuleButton = doc.getElementById("ruleview-add-rule-button");
+  this.searchField = doc.getElementById("ruleview-searchbox");
+  this.searchClearButton = doc.getElementById("ruleview-searchinput-clear");
+  this.pseudoClassPanel = doc.getElementById("pseudo-class-panel");
+  this.pseudoClassToggle = doc.getElementById("pseudo-class-panel-toggle");
+  this.classPanel = doc.getElementById("ruleview-class-panel");
+  this.classToggle = doc.getElementById("class-panel-toggle");
+  this.colorSchemeLightSimulationButton = doc.getElementById(
+    "color-scheme-simulation-light-toggle"
+  );
+  this.colorSchemeDarkSimulationButton = doc.getElementById(
+    "color-scheme-simulation-dark-toggle"
+  );
+  this.printSimulationButton = doc.getElementById("print-simulation-toggle");
+
+  this._initSimulationFeatures();
+
+  this.searchClearButton.hidden = true;
+
+  this.onHighlighterShown = data =>
+    this.handleHighlighterEvent("highlighter-shown", data);
+  this.onHighlighterHidden = data =>
+    this.handleHighlighterEvent("highlighter-hidden", data);
+  this.inspector.highlighters.on("highlighter-shown", this.onHighlighterShown);
+  this.inspector.highlighters.on(
+    "highlighter-hidden",
+    this.onHighlighterHidden
+  );
+
+  this.shortcuts = new KeyShortcuts({ window: this.styleWindow });
+  this._onShortcut = this._onShortcut.bind(this);
+  this.shortcuts.on("Escape", event => this._onShortcut("Escape", event));
+  this.shortcuts.on("Return", event => this._onShortcut("Return", event));
+  this.shortcuts.on("Space", event => this._onShortcut("Space", event));
+  this.shortcuts.on("CmdOrCtrl+F", event =>
+    this._onShortcut("CmdOrCtrl+F", event)
+  );
+  this.element.addEventListener("copy", this._onCopy);
+  this.element.addEventListener("contextmenu", this._onContextMenu);
+  this.addRuleButton.addEventListener("click", this._onAddRule);
+  this.searchField.addEventListener("input", this._onFilterStyles);
+  this.searchClearButton.addEventListener("click", this._onClearSearch);
+  this.pseudoClassToggle.addEventListener(
+    "click",
+    this._onTogglePseudoClassPanel
+  );
+  this.classToggle.addEventListener("click", this._onToggleClassPanel);
+  // The "change" event bubbles up from checkbox inputs nested within the panel container.
+  this.pseudoClassPanel.addEventListener("change", this._onTogglePseudoClass);
+
+  if (flags.testing) {
+    // In tests, we start listening immediately to avoid having to simulate a mousemove.
+    this.highlighters.addToView(this);
+  } else {
+    this.element.addEventListener(
+      "mousemove",
+      () => {
+        this.highlighters.addToView(this);
+      },
+      { once: true }
+    );
+  }
+
+  this._handlePrefChange = this._handlePrefChange.bind(this);
+  this._handleUAStylePrefChange = this._handleUAStylePrefChange.bind(this);
+  this._handleDefaultColorUnitPrefChange =
+    this._handleDefaultColorUnitPrefChange.bind(this);
+  this._handleDraggablePrefChange = this._handleDraggablePrefChange.bind(this);
+
+  this._prefObserver = new PrefObserver("devtools.");
+  this._prefObserver.on(PREF_UA_STYLES, this._handleUAStylePrefChange);
+  this._prefObserver.on(
+    PREF_DEFAULT_COLOR_UNIT,
+    this._handleDefaultColorUnitPrefChange
+  );
+  this._prefObserver.on(PREF_DRAGGABLE, this._handleDraggablePrefChange);
+  // Initialize value of this.draggablePropertiesEnabled
+  this._handleDraggablePrefChange();
+
+  this.pseudoClassCheckboxes = this._createPseudoClassCheckboxes();
+  this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
+
+  // Add the tooltips and highlighters to the view
+  this.tooltips = new TooltipsOverlay(this);
+}
+
+CssRuleView.prototype = {
+  // The element that we're inspecting.
+  _viewedElement: null,
+
+  // Used for cancelling timeouts in the style filter.
+  _filterChangedTimeout: null,
+
+  // Empty, unconnected element of the same type as this node, used
+  // to figure out how shorthand properties will be parsed.
+  _dummyElement: null,
+
+  get popup() {
+    if (!this._popup) {
+      // The popup will be attached to the toolbox document.
+      this._popup = new AutocompletePopup(this.inspector.toolbox.doc, {
+        autoSelect: true,
+      });
+    }
+
+    return this._popup;
+  },
+
+  get classListPreviewer() {
+    if (!this._classListPreviewer) {
+      this._classListPreviewer = new ClassListPreviewer(
+        this.inspector,
+        this.classPanel
+      );
+    }
+
+    return this._classListPreviewer;
+  },
+
+  get contextMenu() {
+    if (!this._contextMenu) {
+      this._contextMenu = new StyleInspectorMenu(this, { isRuleView: true });
+    }
+
+    return this._contextMenu;
+  },
+
+  // Get the dummy elemenet.
+  get dummyElement() {
+    return this._dummyElement;
+  },
+
+  // Get the highlighters overlay from the Inspector.
+  get highlighters() {
+    if (!this._highlighters) {
+      // highlighters is a lazy getter in the inspector.
+      this._highlighters = this.inspector.highlighters;
+    }
+
+    return this._highlighters;
+  },
+
+  // Get the filter search value.
+  get searchValue() {
+    return this.searchField.value.toLowerCase();
+  },
+
+  get rules() {
+    return this._elementStyle ? this._elementStyle.rules : [];
+  },
+
+  get currentTarget() {
+    return this.inspector.toolbox.target;
+  },
+
+  /**
+   * Highlight/unhighlight all the nodes that match a given selector
+   * inside the document of the current selected node.
+   * Only one selector can be highlighted at a time, so calling the method a
+   * second time with a different selector will first unhighlight the previously
+   * highlighted nodes.
+   * Calling the method a second time with the same selector will just
+   * unhighlight the highlighted nodes.
+   *
+   * @param {String} selector
+   *        Elements matching this selector will be highlighted on the page.
+   */
+  async toggleSelectorHighlighter(selector) {
+    if (this.isSelectorHighlighted(selector)) {
+      await this.inspector.highlighters.hideHighlighterType(
+        this.inspector.highlighters.TYPES.SELECTOR
+      );
+    } else {
+      await this.inspector.highlighters.showHighlighterTypeForNode(
+        this.inspector.highlighters.TYPES.SELECTOR,
+        this.inspector.selection.nodeFront,
+        {
+          hideInfoBar: true,
+          hideGuides: true,
+          selector,
+        }
+      );
+    }
+  },
+
+  isPanelVisible() {
+    if (this.inspector.is3PaneModeEnabled) {
+      return true;
+    }
+    return (
+      this.inspector.toolbox &&
+      this.inspector.sidebar &&
+      this.inspector.toolbox.currentToolId === "inspector" &&
+      this.inspector.sidebar.getCurrentTabID() == "ruleview"
+    );
+  },
+
+  /**
+   * Check whether a SelectorHighlighter is active for the given selector text.
+   *
+   * @param {String} selector
+   * @return {Boolean}
+   */
+  isSelectorHighlighted(selector) {
+    const options = this.inspector.highlighters.getOptionsForActiveHighlighter(
+      this.inspector.highlighters.TYPES.SELECTOR
+    );
+
+    return options?.selector === selector;
+  },
+
+  /**
+   * Delegate handler for events happening within the DOM tree of the Rules view.
+   * Itself delegates to specific handlers by event type.
+   *
+   * Use this instead of attaching specific event handlers when:
+   * - there are many elements with the same event handler (eases memory pressure)
+   * - you want to avoid having to remove event handlers manually
+   * - elements are added/removed from the DOM tree arbitrarily over time
+   *
+   * @param {MouseEvent|UIEvent} event
+   */
+  handleEvent(event) {
+    if (this.childHasDragged) {
+      this.childHasDragged = false;
+      event.stopPropagation();
+      return;
+    }
+    switch (event.type) {
+      case "click":
+        this.handleClickEvent(event);
+        break;
+      default:
+    }
+  },
+
+  /**
+   * Delegate handler for click events happening within the DOM tree of the Rules view.
+   * Stop propagation of click event wrapping a CSS rule or CSS declaration to avoid
+   * triggering the prompt to add a new CSS declaration or to edit the existing one.
+   *
+   * @param {MouseEvent} event
+   */
+  async handleClickEvent(event) {
+    const target = event.target;
+
+    // Handle click on the icon next to a CSS selector.
+    if (target.classList.contains("js-toggle-selector-highlighter")) {
+      event.stopPropagation();
+      let selector = target.dataset.selector;
+      // dataset.selector will be empty for inline styles (inherited or not)
+      // Rules associated with a regular selector should have this data-attirbute
+      // set in devtools/client/inspector/rules/views/rule-editor.js
+      if (selector === "") {
+        try {
+          const rule = getRuleFromNode(target, this._elementStyle);
+          if (rule.inherited) {
+            // This is an inline style from an inherited rule. Need to resolve the
+            // unique selector from the node which this rule is inherited from.
+            selector = await rule.inherited.getUniqueSelector();
+          } else {
+            // This is an inline style from the current node.
+            selector =
+              await this.inspector.selection.nodeFront.getUniqueSelector();
+          }
+
+          // Now that the selector was computed, we can store it in
+          // dataset.selector for subsequent usage.
+          target.dataset.selector = selector;
+        } finally {
+          // Could not resolve a unique selector for the inline style.
+        }
+      }
+
+      this.toggleSelectorHighlighter(selector);
+    }
+
+    // Handle click on swatches next to flex and inline-flex CSS properties
+    if (target.classList.contains("js-toggle-flexbox-highlighter")) {
+      event.stopPropagation();
+      this.inspector.highlighters.toggleFlexboxHighlighter(
+        this.inspector.selection.nodeFront,
+        "rule"
+      );
+    }
+
+    // Handle click on swatches next to grid CSS properties
+    if (target.classList.contains("js-toggle-grid-highlighter")) {
+      event.stopPropagation();
+      this.inspector.highlighters.toggleGridHighlighter(
+        this.inspector.selection.nodeFront,
+        "rule"
+      );
+    }
+  },
+
+  /**
+   * Delegate handler for highlighter events.
+   *
+   * This is the place to observe for highlighter events, check the highlighter type and
+   * event name, then react to specific events, for example by modifying the DOM.
+   *
+   * @param {String} eventName
+   *        Highlighter event name. One of: "highlighter-hidden", "highlighter-shown"
+   * @param {Object} data
+   *        Object with data associated with the highlighter event.
+   */
+  handleHighlighterEvent(eventName, data) {
+    switch (data.type) {
+      // Toggle the "highlighted" class on selector icons in the Rules view when
+      // the SelectorHighlighter is shown/hidden for a certain CSS selector.
+      case this.inspector.highlighters.TYPES.SELECTOR:
+        {
+          const selector = data?.options?.selector;
+          if (!selector) {
+            return;
+          }
+
+          const query = `.js-toggle-selector-highlighter[data-selector='${selector}']`;
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            node.classList.toggle(
+              "highlighted",
+              eventName == "highlighter-shown"
+            );
+          }
+        }
+        break;
+
+      // Toggle the "active" class on swatches next to flex and inline-flex CSS properties
+      // when the FlexboxHighlighter is shown/hidden for the currently selected node.
+      case this.inspector.highlighters.TYPES.FLEXBOX:
+        {
+          const query = ".js-toggle-flexbox-highlighter";
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            node.classList.toggle("active", eventName == "highlighter-shown");
+          }
+        }
+        break;
+
+      // Toggle the "active" class on swatches next to grid CSS properties
+      // when the GridHighlighter is shown/hidden for the currently selected node.
+      case this.inspector.highlighters.TYPES.GRID:
+        {
+          const query = ".js-toggle-grid-highlighter";
+          for (const node of this.styleDocument.querySelectorAll(query)) {
+            // From the Layout panel, we can toggle grid highlighters for nodes which are
+            // not currently selected. The Rules view shows `display: grid` declarations
+            // only for the selected node. Avoid mistakenly marking them as "active".
+            if (data.nodeFront === this.inspector.selection.nodeFront) {
+              node.classList.toggle("active", eventName == "highlighter-shown");
+            }
+
+            // When the max limit of grid highlighters is reached (default 3),
+            // mark inactive grid swatches as disabled.
+            node.toggleAttribute(
+              "disabled",
+              !this.inspector.highlighters.canGridHighlighterToggle(
+                this.inspector.selection.nodeFront
+              )
+            );
+          }
+        }
+        break;
+    }
+  },
+
+  /**
+   * Enables the print and color scheme simulation only for local and remote tab debugging.
+   */
+  async _initSimulationFeatures() {
+    if (!this.inspector.commands.descriptorFront.isTabDescriptor) {
+      return;
+    }
+    this.colorSchemeLightSimulationButton.removeAttribute("hidden");
+    this.colorSchemeDarkSimulationButton.removeAttribute("hidden");
+    this.printSimulationButton.removeAttribute("hidden");
+    this.printSimulationButton.addEventListener(
+      "click",
+      this._onTogglePrintSimulation
+    );
+    this.colorSchemeLightSimulationButton.addEventListener(
+      "click",
+      this._onToggleLightColorSchemeSimulation
+    );
+    this.colorSchemeDarkSimulationButton.addEventListener(
+      "click",
+      this._onToggleDarkColorSchemeSimulation
+    );
+  },
+
+  /**
+   * Get the type of a given node in the rule-view
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
+   * @return {Object|null} containing the following props:
+   * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+   *   client/inspector/shared/node-types.
+   * - rule {Rule} The Rule object.
+   * - value {Object} Depends on the type of the node.
+   * Otherwise, returns null if the node isn't anything we care about.
+   */
+  getNodeInfo(node) {
+    return getNodeInfo(node, this._elementStyle);
+  },
+
+  /**
+   * Get the node's compatibility issues
+   *
+   * @param {DOMNode} node
+   *        The node which we want information about
+   * @return {Object|null} containing the following props:
+   * - type {String} Compatibility issue type.
+   * - property {string} The incompatible rule
+   * - alias {Array} The browser specific alias of rule
+   * - url {string} Link to MDN documentation
+   * - deprecated {bool} True if the rule is deprecated
+   * - experimental {bool} True if rule is experimental
+   * - unsupportedBrowsers {Array} Array of unsupported browser
+   * Otherwise, returns null if the node has cross-browser compatible CSS
+   */
+  async getNodeCompatibilityInfo(node) {
+    const compatibilityInfo = await getNodeCompatibilityInfo(
+      node,
+      this._elementStyle
+    );
+
+    return compatibilityInfo;
+  },
+
+  /**
+   * Context menu handler.
+   */
+  _onContextMenu(event) {
+    if (
+      event.originalTarget.closest("input[type=text]") ||
+      event.originalTarget.closest("input:not([type])") ||
+      event.originalTarget.closest("textarea")
+    ) {
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.contextMenu.show(event);
+  },
+
+  /**
+   * Callback for copy event. Copy the selected text.
+   *
+   * @param {Event} event
+   *        copy event object.
+   */
+  _onCopy(event) {
+    if (event) {
+      this.copySelection(event.target);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+
+  /**
+   * Copy the current selection. The current target is necessary
+   * if the selection is inside an input or a textarea
+   *
+   * @param {DOMNode} target
+   *        DOMNode target of the copy action
+   */
+  copySelection(target) {
+    try {
+      let text = "";
+
+      const nodeName = target?.nodeName;
+      const targetType = target?.type;
+
+      if (
+        // The target can be the enable/disable rule checkbox here (See Bug 1680893).
+        (nodeName === "input" && targetType !== "checkbox") ||
+        nodeName == "textarea"
+      ) {
+        const start = Math.min(target.selectionStart, target.selectionEnd);
+        const end = Math.max(target.selectionStart, target.selectionEnd);
+        const count = end - start;
+        text = target.value.substr(start, count);
+      } else {
+        text = this.styleWindow.getSelection().toString();
+
+        // Remove any double newlines.
+        text = text.replace(/(\r?\n)\r?\n/g, "$1");
+
+        // Replace 4 space indentation with 2 Spaces.
+        text = text.replace(/\ {4}/g, DOUBLESPACE);
+      }
+
+      clipboardHelper.copyString(text);
+    } catch (e) {
+      console.error(e);
+    }
+  },
+
+  /**
+   * Add a new rule to the current element.
+   */
+  _onAddRule() {
+    const elementStyle = this._elementStyle;
+    const element = elementStyle.element;
+    const pseudoClasses = element.pseudoClassLocks;
+
+    // Adding a new rule with authored styles will cause the actor to
+    // emit an event, which will in turn cause the rule view to be
+    // updated.  So, we wait for this update and for the rule creation
+    // request to complete, and then focus the new rule's selector.
+    const eventPromise = this.once("ruleview-refreshed");
+    const newRulePromise = this.pageStyle.addNewRule(element, pseudoClasses);
+    Promise.all([eventPromise, newRulePromise]).then(values => {
+      const options = values[1];
+      // Be sure the reference the correct |rules| here.
+      for (const rule of this._elementStyle.rules) {
+        if (options.rule === rule.domRule) {
+          rule.editor.selectorText.click();
+          elementStyle._changed();
+          break;
+        }
+      }
+    });
+  },
+
+  /**
+   * Disables add rule button when needed
+   */
+  refreshAddRuleButtonState() {
+    const shouldBeDisabled =
+      !this._viewedElement ||
+      !this.inspector.selection.isElementNode() ||
+      this.inspector.selection.isAnonymousNode();
+    this.addRuleButton.disabled = shouldBeDisabled;
+  },
+
+  /**
+   * Return {Boolean} true if the rule view currently has an input
+   * editor visible.
+   */
+  get isEditing() {
+    return (
+      this.tooltips.isEditing ||
+      !!this.element.querySelectorAll(".styleinspector-propertyeditor").length
+    );
+  },
+
+  _handleUAStylePrefChange() {
+    this.showUserAgentStyles = Services.prefs.getBoolPref(PREF_UA_STYLES);
+    this._handlePrefChange(PREF_UA_STYLES);
+  },
+
+  _handleDefaultColorUnitPrefChange() {
+    this._handlePrefChange(PREF_DEFAULT_COLOR_UNIT);
+  },
+
+  _handleDraggablePrefChange() {
+    this.draggablePropertiesEnabled = Services.prefs.getBoolPref(
+      PREF_DRAGGABLE,
+      false
+    );
+    // This event is consumed by text-property-editor instances in order to
+    // update their draggable behavior. Preferences observer are costly, so
+    // we are forwarding the preference update via the EventEmitter.
+    this.emit("draggable-preference-updated");
+  },
+
+  _handlePrefChange(pref) {
+    // Reselect the currently selected element
+    const refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
+    if (refreshOnPrefs.indexOf(pref) > -1) {
+      this.selectElement(this._viewedElement, true);
+    }
+  },
+
+  /**
+   * Set the filter style search value.
+   * @param {String} value
+   *        The search value.
+   */
+  setFilterStyles(value = "") {
+    this.searchField.value = value;
+    this.searchField.focus();
+    this._onFilterStyles();
+  },
+
+  /**
+   * Called when the user enters a search term in the filter style search box.
+   */
+  _onFilterStyles() {
+    if (this._filterChangedTimeout) {
+      clearTimeout(this._filterChangedTimeout);
+    }
+
+    const filterTimeout = this.searchValue.length ? FILTER_CHANGED_TIMEOUT : 0;
+    this.searchClearButton.hidden = this.searchValue.length === 0;
+
+    this._filterChangedTimeout = setTimeout(() => {
+      this.searchData = {
+        searchPropertyMatch: FILTER_PROP_RE.exec(this.searchValue),
+        searchPropertyName: this.searchValue,
+        searchPropertyValue: this.searchValue,
+        strictSearchValue: "",
+        strictSearchPropertyName: false,
+        strictSearchPropertyValue: false,
+        strictSearchAllValues: false,
+      };
+
+      if (this.searchData.searchPropertyMatch) {
+        // Parse search value as a single property line and extract the
+        // property name and value. If the parsed property name or value is
+        // contained in backquotes (`), extract the value within the backquotes
+        // and set the corresponding strict search for the property to true.
+        if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[1])) {
+          this.searchData.strictSearchPropertyName = true;
+          this.searchData.searchPropertyName = FILTER_STRICT_RE.exec(
+            this.searchData.searchPropertyMatch[1]
+          )[1];
+        } else {
+          this.searchData.searchPropertyName =
+            this.searchData.searchPropertyMatch[1];
+        }
+
+        if (FILTER_STRICT_RE.test(this.searchData.searchPropertyMatch[2])) {
+          this.searchData.strictSearchPropertyValue = true;
+          this.searchData.searchPropertyValue = FILTER_STRICT_RE.exec(
+            this.searchData.searchPropertyMatch[2]
+          )[1];
+        } else {
+          this.searchData.searchPropertyValue =
+            this.searchData.searchPropertyMatch[2];
+        }
+
+        // Strict search for stylesheets will match the property line regex.
+        // Extract the search value within the backquotes to be used
+        // in the strict search for stylesheets in _highlightStyleSheet.
+        if (FILTER_STRICT_RE.test(this.searchValue)) {
+          this.searchData.strictSearchValue = FILTER_STRICT_RE.exec(
+            this.searchValue
+          )[1];
+        }
+      } else if (FILTER_STRICT_RE.test(this.searchValue)) {
+        // If the search value does not correspond to a property line and
+        // is contained in backquotes, extract the search value within the
+        // backquotes and set the flag to perform a strict search for all
+        // the values (selector, stylesheet, property and computed values).
+        const searchValue = FILTER_STRICT_RE.exec(this.searchValue)[1];
+        this.searchData.strictSearchAllValues = true;
+        this.searchData.searchPropertyName = searchValue;
+        this.searchData.searchPropertyValue = searchValue;
+        this.searchData.strictSearchValue = searchValue;
+      }
+
+      this._clearHighlight(this.element);
+      this._clearRules();
+      this._createEditors();
+
+      this.inspector.emit("ruleview-filtered");
+
+      this._filterChangeTimeout = null;
+    }, filterTimeout);
+  },
+
+  /**
+   * Called when the user clicks on the clear button in the filter style search
+   * box. Returns true if the search box is cleared and false otherwise.
+   */
+  _onClearSearch() {
+    if (this.searchField.value) {
+      this.setFilterStyles("");
+      return true;
+    }
+
+    return false;
+  },
+
+  destroy() {
+    this.isDestroyed = true;
+    this.clear();
+
+    this._dummyElement = null;
+    // off handlers must have the same reference as their on handlers
+    this._prefObserver.off(PREF_UA_STYLES, this._handleUAStylePrefChange);
+    this._prefObserver.off(
+      PREF_DEFAULT_COLOR_UNIT,
+      this._handleDefaultColorUnitPrefChange
+    );
+    this._prefObserver.off(PREF_DRAGGABLE, this._handleDraggablePrefChange);
+    this._prefObserver.destroy();
+
+    this._outputParser = null;
+
+    if (this._classListPreviewer) {
+      this._classListPreviewer.destroy();
+      this._classListPreviewer = null;
+    }
+
+    if (this._contextMenu) {
+      this._contextMenu.destroy();
+      this._contextMenu = null;
+    }
+
+    if (this._highlighters) {
+      this._highlighters.removeFromView(this);
+      this._highlighters = null;
+    }
+
+    // Clean-up for simulations.
+    this.colorSchemeLightSimulationButton.removeEventListener(
+      "click",
+      this._onToggleLightColorSchemeSimulation
+    );
+    this.colorSchemeDarkSimulationButton.removeEventListener(
+      "click",
+      this._onToggleDarkColorSchemeSimulation
+    );
+    this.printSimulationButton.removeEventListener(
+      "click",
+      this._onTogglePrintSimulation
+    );
+
+    this.colorSchemeLightSimulationButton = null;
+    this.colorSchemeDarkSimulationButton = null;
+    this.printSimulationButton = null;
+
+    this.tooltips.destroy();
+
+    // Remove bound listeners
+    this.shortcuts.destroy();
+    this.styleDocument.removeEventListener("click", this, { capture: true });
+    this.element.removeEventListener("copy", this._onCopy);
+    this.element.removeEventListener("contextmenu", this._onContextMenu);
+    this.addRuleButton.removeEventListener("click", this._onAddRule);
+    this.searchField.removeEventListener("input", this._onFilterStyles);
+    this.searchClearButton.removeEventListener("click", this._onClearSearch);
+    this.pseudoClassPanel.removeEventListener(
+      "change",
+      this._onTogglePseudoClass
+    );
+    this.pseudoClassToggle.removeEventListener(
+      "click",
+      this._onTogglePseudoClassPanel
+    );
+    this.classToggle.removeEventListener("click", this._onToggleClassPanel);
+    this.inspector.highlighters.off(
+      "highlighter-shown",
+      this.onHighlighterShown
+    );
+    this.inspector.highlighters.off(
+      "highlighter-hidden",
+      this.onHighlighterHidden
+    );
+
+    this.searchField = null;
+    this.searchClearButton = null;
+    this.pseudoClassPanel = null;
+    this.pseudoClassToggle = null;
+    this.pseudoClassCheckboxes = null;
+    this.classPanel = null;
+    this.classToggle = null;
+
+    this.inspector = null;
+    this.styleDocument = null;
+    this.styleWindow = null;
+
+    if (this.element.parentNode) {
+      this.element.remove();
+    }
+
+    if (this._elementStyle) {
+      this._elementStyle.destroy();
+    }
+
+    if (this._popup) {
+      this._popup.destroy();
+      this._popup = null;
+    }
+  },
+
+  /**
+   * Mark the view as selecting an element, disabling all interaction, and
+   * visually clearing the view after a few milliseconds to avoid confusion
+   * about which element's styles the rule view shows.
+   */
+  _startSelectingElement() {
+    this.element.classList.add("non-interactive");
+  },
+
+  /**
+   * Mark the view as no longer selecting an element, re-enabling interaction.
+   */
+  _stopSelectingElement() {
+    this.element.classList.remove("non-interactive");
+  },
+
+  /**
+   * Update the view with a new selected element.
+   *
+   * @param {NodeActor} element
+   *        The node whose style rules we'll inspect.
+   * @param {Boolean} allowRefresh
+   *        Update the view even if the element is the same as last time.
+   */
+  selectElement(element, allowRefresh = false) {
+    const refresh = this._viewedElement === element;
+    if (refresh && !allowRefresh) {
+      return Promise.resolve(undefined);
+    }
+
+    if (this._popup && this.popup.isOpen) {
+      this.popup.hidePopup();
+    }
+
+    this.clear(false);
+    this._viewedElement = element;
+
+    this.clearPseudoClassPanel();
+    this.refreshAddRuleButtonState();
+
+    if (!this._viewedElement) {
+      this._stopSelectingElement();
+      this._clearRules();
+      this._showEmpty();
+      this.refreshPseudoClassPanel();
+      if (this.pageStyle) {
+        this.pageStyle.off("stylesheet-updated", this.refreshPanel);
+        this.pageStyle = null;
+      }
+      return Promise.resolve(undefined);
+    }
+
+    this.pageStyle = element.inspectorFront.pageStyle;
+    this.pageStyle.on("stylesheet-updated", this.refreshPanel);
+
+    // To figure out how shorthand properties are interpreted by the
+    // engine, we will set properties on a dummy element and observe
+    // how their .style attribute reflects them as computed values.
+    const dummyElementPromise = Promise.resolve(this.styleDocument)
+      .then(document => {
+        // ::before and ::after do not have a namespaceURI
+        const namespaceURI =
+          this.element.namespaceURI || document.documentElement.namespaceURI;
+        this._dummyElement = document.createElementNS(
+          namespaceURI,
+          this.element.tagName
+        );
+      })
+      .catch(promiseWarn);
+
+    const elementStyle = new ElementStyle(
+      element,
+      this,
+      this.store,
+      this.pageStyle,
+      this.showUserAgentStyles
+    );
+    this._elementStyle = elementStyle;
+
+    this._startSelectingElement();
+
+    return dummyElementPromise
+      .then(() => {
+        if (this._elementStyle === elementStyle) {
+          return this._populate();
+        }
+        return undefined;
+      })
+      .then(() => {
+        if (this._elementStyle === elementStyle) {
+          if (!refresh) {
+            this.element.scrollTop = 0;
+          }
+          this._stopSelectingElement();
+          this._elementStyle.onChanged = () => {
+            this._changed();
+          };
+        }
+      })
+      .catch(e => {
+        if (this._elementStyle === elementStyle) {
+          this._stopSelectingElement();
+          this._clearRules();
+        }
+        console.error(e);
+      });
+  },
+
+  /**
+   * Update the rules for the currently highlighted element.
+   */
+  refreshPanel() {
+    // Ignore refreshes when the panel is hidden, or during editing or when no element is selected.
+    if (!this.isPanelVisible() || this.isEditing || !this._elementStyle) {
+      return Promise.resolve(undefined);
+    }
+
+    // Repopulate the element style once the current modifications are done.
+    const promises = [];
+    for (const rule of this._elementStyle.rules) {
+      if (rule._applyingModifications) {
+        promises.push(rule._applyingModifications);
+      }
+    }
+
+    return Promise.all(promises).then(() => {
+      return this._populate();
+    });
+  },
+
+  /**
+   * Clear the pseudo class options panel by removing the checked and disabled
+   * attributes for each checkbox.
+   */
+  clearPseudoClassPanel() {
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.checked = false;
+      checkbox.disabled = false;
+    });
+  },
+
+  /**
+   * For each item in PSEUDO_CLASSES, create a checkbox input element for toggling a
+   * pseudo-class on the selected element and append it to the pseudo-class panel.
+   *
+   * Returns an array with the checkbox input elements for pseudo-classes.
+   *
+   * @return {Array}
+   */
+  _createPseudoClassCheckboxes() {
+    const doc = this.styleDocument;
+    const fragment = doc.createDocumentFragment();
+
+    for (const pseudo of PSEUDO_CLASSES) {
+      const label = doc.createElement("label");
+      const checkbox = doc.createElement("input");
+      checkbox.setAttribute("tabindex", "-1");
+      checkbox.setAttribute("type", "checkbox");
+      checkbox.setAttribute("value", pseudo);
+
+      label.append(checkbox, pseudo);
+      fragment.append(label);
+    }
+
+    this.pseudoClassPanel.append(fragment);
+    return Array.from(
+      this.pseudoClassPanel.querySelectorAll("input[type=checkbox]")
+    );
+  },
+
+  /**
+   * Update the pseudo class options for the currently highlighted element.
+   */
+  refreshPseudoClassPanel() {
+    if (!this._elementStyle || !this.inspector.selection.isElementNode()) {
+      this.pseudoClassCheckboxes.forEach(checkbox => {
+        checkbox.disabled = true;
+      });
+      return;
+    }
+
+    const pseudoClassLocks = this._elementStyle.element.pseudoClassLocks;
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.disabled = false;
+      checkbox.checked = pseudoClassLocks.includes(checkbox.value);
+    });
+  },
+
+  _populate() {
+    const elementStyle = this._elementStyle;
+    return this._elementStyle
+      .populate()
+      .then(() => {
+        if (this._elementStyle !== elementStyle || this.isDestroyed) {
+          return null;
+        }
+
+        this._clearRules();
+        const onEditorsReady = this._createEditors();
+        this.refreshPseudoClassPanel();
+
+        // Notify anyone that cares that we refreshed.
+        return onEditorsReady.then(() => {
+          this.emit("ruleview-refreshed");
+        }, console.error);
+      })
+      .catch(promiseWarn);
+  },
+
+  /**
+   * Show the user that the rule view has no node selected.
+   */
+  _showEmpty() {
+    if (this.styleDocument.getElementById("ruleview-no-results")) {
+      return;
+    }
+
+    createChild(this.element, "div", {
+      id: "ruleview-no-results",
+      class: "devtools-sidepanel-no-result",
+      textContent: l10n("rule.empty"),
+    });
+  },
+
+  /**
+   * Clear the rules.
+   */
+  _clearRules() {
+    this.element.innerHTML = "";
+  },
+
+  /**
+   * Clear the rule view.
+   */
+  clear(clearDom = true) {
+    if (clearDom) {
+      this._clearRules();
+    }
+    this._viewedElement = null;
+
+    if (this._elementStyle) {
+      this._elementStyle.destroy();
+      this._elementStyle = null;
+    }
+
+    if (this.pageStyle) {
+      this.pageStyle.off("stylesheet-updated", this.refreshPanel);
+      this.pageStyle = null;
+    }
+  },
+
+  /**
+   * Called when the user has made changes to the ElementStyle.
+   * Emits an event that clients can listen to.
+   */
+  _changed() {
+    this.emit("ruleview-changed");
+  },
+
+  /**
+   * Text for header that shows above rules for this element
+   */
+  get selectedElementLabel() {
+    if (this._selectedElementLabel) {
+      return this._selectedElementLabel;
+    }
+    this._selectedElementLabel = l10n("rule.selectedElement");
+    return this._selectedElementLabel;
+  },
+
+  /**
+   * Text for header that shows above rules for pseudo elements
+   */
+  get pseudoElementLabel() {
+    if (this._pseudoElementLabel) {
+      return this._pseudoElementLabel;
+    }
+    this._pseudoElementLabel = l10n("rule.pseudoElement");
+    return this._pseudoElementLabel;
+  },
+
+  get showPseudoElements() {
+    if (this._showPseudoElements === undefined) {
+      this._showPseudoElements = Services.prefs.getBoolPref(
+        "devtools.inspector.show_pseudo_elements"
+      );
+    }
+    return this._showPseudoElements;
+  },
+
+  /**
+   * Creates an expandable container in the rule view
+   *
+   * @param  {String} label
+   *         The label for the container header
+   * @param  {Boolean} isPseudo
+   *         Whether or not the container will hold pseudo element rules
+   * @return {DOMNode} The container element
+   */
+  createExpandableContainer(label, isPseudo = false) {
+    const header = this.styleDocument.createElementNS(HTML_NS, "div");
+    header.className = this._getRuleViewHeaderClassName(true);
+    header.setAttribute("role", "heading");
+    header.textContent = label;
+
+    const twisty = this.styleDocument.createElementNS(HTML_NS, "span");
+    twisty.className = "ruleview-expander theme-twisty";
+    twisty.setAttribute("open", "true");
+    twisty.setAttribute("role", "button");
+    twisty.setAttribute("aria-label", l10n("rule.twistyCollapse.label"));
+
+    header.insertBefore(twisty, header.firstChild);
+    this.element.appendChild(header);
+
+    const container = this.styleDocument.createElementNS(HTML_NS, "div");
+    container.classList.add("ruleview-expandable-container");
+    container.hidden = false;
+    this.element.appendChild(container);
+
+    header.addEventListener("click", () => {
+      this._toggleContainerVisibility(
+        twisty,
+        container,
+        isPseudo,
+        !this.showPseudoElements
+      );
+    });
+
+    if (isPseudo) {
+      container.id = "pseudo-elements-container";
+      twisty.id = "pseudo-elements-header-twisty";
+      this._toggleContainerVisibility(
+        twisty,
+        container,
+        isPseudo,
+        this.showPseudoElements
+      );
+    }
+
+    return container;
+  },
+
+  /**
+   * Toggle the visibility of an expandable container
+   *
+   * @param  {DOMNode}  twisty
+   *         Clickable toggle DOM Node
+   * @param  {DOMNode}  container
+   *         Expandable container DOM Node
+   * @param  {Boolean}  isPseudo
+   *         Whether or not the container will hold pseudo element rules
+   * @param  {Boolean}  showPseudo
+   *         Whether or not pseudo element rules should be displayed
+   */
+  _toggleContainerVisibility(twisty, container, isPseudo, showPseudo) {
+    let isOpen = twisty.getAttribute("open");
+
+    if (isPseudo) {
+      this._showPseudoElements = !!showPseudo;
+
+      Services.prefs.setBoolPref(
+        "devtools.inspector.show_pseudo_elements",
+        this.showPseudoElements
+      );
+
+      container.hidden = !this.showPseudoElements;
+      isOpen = !this.showPseudoElements;
+    } else {
+      container.hidden = !container.hidden;
+    }
+
+    if (isOpen) {
+      twisty.removeAttribute("open");
+      twisty.setAttribute("aria-label", l10n("rule.twistyExpand.label"));
+    } else {
+      twisty.setAttribute("open", "true");
+      twisty.setAttribute("aria-label", l10n("rule.twistyCollapse.label"));
+    }
+  },
+
+  _getRuleViewHeaderClassName(isPseudo) {
+    const baseClassName = "ruleview-header";
+    return isPseudo
+      ? baseClassName + " ruleview-expandable-header"
+      : baseClassName;
+  },
+
+  /**
+   * Creates editor UI for each of the rules in _elementStyle.
+   */
+  // eslint-disable-next-line complexity
+  _createEditors() {
+    // Run through the current list of rules, attaching
+    // their editors in order.  Create editors if needed.
+    let lastInheritedSource = "";
+    let lastKeyframes = null;
+    let seenPseudoElement = false;
+    let seenNormalElement = false;
+    let seenSearchTerm = false;
+    let container = null;
+
+    if (!this._elementStyle.rules) {
+      return Promise.resolve();
+    }
+
+    const editorReadyPromises = [];
+    for (const rule of this._elementStyle.rules) {
+      if (rule.domRule.system) {
+        continue;
+      }
+
+      // Initialize rule editor
+      if (!rule.editor) {
+        rule.editor = new RuleEditor(this, rule);
+        editorReadyPromises.push(rule.editor.once("source-link-updated"));
+      }
+
+      // Filter the rules and highlight any matches if there is a search input
+      if (this.searchValue && this.searchData) {
+        if (this.highlightRule(rule)) {
+          seenSearchTerm = true;
+        } else if (rule.domRule.type !== ELEMENT_STYLE) {
+          continue;
+        }
+      }
+
+      // Only print header for this element if there are pseudo elements
+      if (seenPseudoElement && !seenNormalElement && !rule.pseudoElement) {
+        seenNormalElement = true;
+        const div = this.styleDocument.createElementNS(HTML_NS, "div");
+        div.className = this._getRuleViewHeaderClassName();
+        div.setAttribute("role", "heading");
+        div.textContent = this.selectedElementLabel;
+        this.element.appendChild(div);
+      }
+
+      const inheritedSource = rule.inherited;
+      if (inheritedSource && inheritedSource !== lastInheritedSource) {
+        const div = this.styleDocument.createElementNS(HTML_NS, "div");
+        div.className = this._getRuleViewHeaderClassName();
+        div.setAttribute("role", "heading");
+        div.setAttribute("aria-level", "3");
+        div.textContent = rule.inheritedSource;
+        lastInheritedSource = inheritedSource;
+        this.element.appendChild(div);
+      }
+
+      if (!seenPseudoElement && rule.pseudoElement) {
+        seenPseudoElement = true;
+        container = this.createExpandableContainer(
+          this.pseudoElementLabel,
+          true
+        );
+      }
+
+      const keyframes = rule.keyframes;
+      if (keyframes && keyframes !== lastKeyframes) {
+        lastKeyframes = keyframes;
+        container = this.createExpandableContainer(rule.keyframesName);
+      }
+
+      rule.editor.element.setAttribute("role", "article");
+      if (container && (rule.pseudoElement || keyframes)) {
+        container.appendChild(rule.editor.element);
+      } else {
+        this.element.appendChild(rule.editor.element);
+      }
+    }
+
+    const searchBox = this.searchField.parentNode;
+    searchBox.classList.toggle(
+      "devtools-searchbox-no-match",
+      this.searchValue && !seenSearchTerm
+    );
+
+    return Promise.all(editorReadyPromises);
+  },
+
+  /**
+   * Highlight rules that matches the filter search value and returns a
+   * boolean indicating whether or not rules were highlighted.
+   *
+   * @param  {Rule} rule
+   *         The rule object we're highlighting if its rule selectors or
+   *         property values match the search value.
+   * @return {Boolean} true if the rule was highlighted, false otherwise.
+   */
+  highlightRule(rule) {
+    const isRuleSelectorHighlighted = this._highlightRuleSelector(rule);
+    const isStyleSheetHighlighted = this._highlightStyleSheet(rule);
+    const isAncestorRulesHighlighted = this._highlightAncestorRules(rule);
+    let isHighlighted =
+      isRuleSelectorHighlighted ||
+      isStyleSheetHighlighted ||
+      isAncestorRulesHighlighted;
+
+    // Highlight search matches in the rule properties
+    for (const textProp of rule.textProps) {
+      if (!textProp.invisible && this._highlightProperty(textProp.editor)) {
+        isHighlighted = true;
+      }
+    }
+
+    return isHighlighted;
+  },
+
+  /**
+   * Highlights the rule selector that matches the filter search value and
+   * returns a boolean indicating whether or not the selector was highlighted.
+   *
+   * @param  {Rule} rule
+   *         The Rule object.
+   * @return {Boolean} true if the rule selector was highlighted,
+   *         false otherwise.
+   */
+  _highlightRuleSelector(rule) {
+    let isSelectorHighlighted = false;
+
+    let selectorNodes = [...rule.editor.selectorText.childNodes];
+    if (rule.domRule.type === CSSRule.KEYFRAME_RULE) {
+      selectorNodes = [rule.editor.selectorText];
+    } else if (rule.domRule.type === ELEMENT_STYLE) {
+      selectorNodes = [];
+    }
+
+    // Highlight search matches in the rule selectors
+    for (const selectorNode of selectorNodes) {
+      const selector = selectorNode.textContent.toLowerCase();
+      if (
+        (this.searchData.strictSearchAllValues &&
+          selector === this.searchData.strictSearchValue) ||
+        (!this.searchData.strictSearchAllValues &&
+          selector.includes(this.searchValue))
+      ) {
+        selectorNode.classList.add("ruleview-highlight");
+        isSelectorHighlighted = true;
+      }
+    }
+
+    return isSelectorHighlighted;
+  },
+
+  /**
+   * Highlights the ancestor rules data (@media / @layer) that matches the filter search
+   * value and returns a boolean indicating whether or not element was highlighted.
+   *
+   * @return {Boolean} true if the element was highlighted, false otherwise.
+   */
+  _highlightAncestorRules(rule) {
+    const element = rule.editor.ancestorDataEl;
+    if (!element) {
+      return false;
+    }
+
+    let isHighlighted = false;
+    for (let i = 0; i < element.childNodes.length; i++) {
+      const child = element.childNodes[i];
+      const dataText = child.innerText.toLowerCase();
+      const matches = this.searchData.strictSearchValue
+        ? dataText === this.searchData.strictSearchValue
+        : dataText.includes(this.searchValue);
+      if (matches) {
+        isHighlighted = true;
+        child.classList.add("ruleview-highlight");
+      }
+    }
+
+    return isHighlighted;
+  },
+
+  /**
+   * Highlights the stylesheet source that matches the filter search value and
+   * returns a boolean indicating whether or not the stylesheet source was
+   * highlighted.
+   *
+   * @return {Boolean} true if the stylesheet source was highlighted, false
+   *         otherwise.
+   */
+  _highlightStyleSheet(rule) {
+    const styleSheetSource = rule.title.toLowerCase();
+    const isStyleSheetHighlighted = this.searchData.strictSearchValue
+      ? styleSheetSource === this.searchData.strictSearchValue
+      : styleSheetSource.includes(this.searchValue);
+
+    if (isStyleSheetHighlighted) {
+      rule.editor.source.classList.add("ruleview-highlight");
+    }
+
+    return isStyleSheetHighlighted;
+  },
+
+  /**
+   * Highlights the rule properties and computed properties that match the
+   * filter search value and returns a boolean indicating whether or not the
+   * property or computed property was highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the property or computed property was
+   *         highlighted, false otherwise.
+   */
+  _highlightProperty(editor) {
+    const isPropertyHighlighted = this._highlightRuleProperty(editor);
+    const isComputedHighlighted = this._highlightComputedProperty(editor);
+
+    // Expand the computed list if a computed property is highlighted and the
+    // property rule is not highlighted
+    if (
+      !isPropertyHighlighted &&
+      isComputedHighlighted &&
+      !editor.computed.hasAttribute("user-open")
+    ) {
+      editor.expandForFilter();
+    }
+
+    return isPropertyHighlighted || isComputedHighlighted;
+  },
+
+  /**
+   * Called when TextPropertyEditor is updated and updates the rule property
+   * highlight.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   */
+  _updatePropertyHighlight(editor) {
+    if (!this.searchValue || !this.searchData) {
+      return;
+    }
+
+    this._clearHighlight(editor.element);
+
+    if (this._highlightProperty(editor)) {
+      this.searchField.classList.remove("devtools-style-searchbox-no-match");
+    }
+  },
+
+  /**
+   * Highlights the rule property that matches the filter search value
+   * and returns a boolean indicating whether or not the property was
+   * highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the rule property was highlighted,
+   *         false otherwise.
+   */
+  _highlightRuleProperty(editor) {
+    // Get the actual property value displayed in the rule view
+    const propertyName = editor.prop.name.toLowerCase();
+    const propertyValue = editor.valueSpan.textContent.toLowerCase();
+
+    return this._highlightMatches(
+      editor.container,
+      propertyName,
+      propertyValue
+    );
+  },
+
+  /**
+   * Highlights the computed property that matches the filter search value and
+   * returns a boolean indicating whether or not the computed property was
+   * highlighted.
+   *
+   * @param  {TextPropertyEditor} editor
+   *         The rule property TextPropertyEditor object.
+   * @return {Boolean} true if the computed property was highlighted, false
+   *         otherwise.
+   */
+  _highlightComputedProperty(editor) {
+    let isComputedHighlighted = false;
+
+    // Highlight search matches in the computed list of properties
+    editor._populateComputed();
+    for (const computed of editor.prop.computed) {
+      if (computed.element) {
+        // Get the actual property value displayed in the computed list
+        const computedName = computed.name.toLowerCase();
+        const computedValue = computed.parsedValue.toLowerCase();
+
+        isComputedHighlighted = this._highlightMatches(
+          computed.element,
+          computedName,
+          computedValue
+        )
+          ? true
+          : isComputedHighlighted;
+      }
+    }
+
+    return isComputedHighlighted;
+  },
+
+  /**
+   * Helper function for highlightRules that carries out highlighting the given
+   * element if the search terms match the property, and returns a boolean
+   * indicating whether or not the search terms match.
+   *
+   * @param  {DOMNode} element
+   *         The node to highlight if search terms match
+   * @param  {String} propertyName
+   *         The property name of a rule
+   * @param  {String} propertyValue
+   *         The property value of a rule
+   * @return {Boolean} true if the given search terms match the property, false
+   *         otherwise.
+   */
+  _highlightMatches(element, propertyName, propertyValue) {
+    const {
+      searchPropertyName,
+      searchPropertyValue,
+      searchPropertyMatch,
+      strictSearchPropertyName,
+      strictSearchPropertyValue,
+      strictSearchAllValues,
+    } = this.searchData;
+    let matches = false;
+
+    // If the inputted search value matches a property line like
+    // `font-family: arial`, then check to make sure the name and value match.
+    // Otherwise, just compare the inputted search string directly against the
+    // name and value of the rule property.
+    const hasNameAndValue =
+      searchPropertyMatch && searchPropertyName && searchPropertyValue;
+    const isMatch = (value, query, isStrict) => {
+      return isStrict ? value === query : query && value.includes(query);
+    };
+
+    if (hasNameAndValue) {
+      matches =
+        isMatch(propertyName, searchPropertyName, strictSearchPropertyName) &&
+        isMatch(propertyValue, searchPropertyValue, strictSearchPropertyValue);
+    } else {
+      matches =
+        isMatch(
+          propertyName,
+          searchPropertyName,
+          strictSearchPropertyName || strictSearchAllValues
+        ) ||
+        isMatch(
+          propertyValue,
+          searchPropertyValue,
+          strictSearchPropertyValue || strictSearchAllValues
+        );
+    }
+
+    if (matches) {
+      element.classList.add("ruleview-highlight");
+    }
+
+    return matches;
+  },
+
+  /**
+   * Clear all search filter highlights in the panel, and close the computed
+   * list if toggled opened
+   */
+  _clearHighlight(element) {
+    for (const el of element.querySelectorAll(".ruleview-highlight")) {
+      el.classList.remove("ruleview-highlight");
+    }
+
+    for (const computed of element.querySelectorAll(
+      ".ruleview-computedlist[filter-open]"
+    )) {
+      computed.parentNode._textPropertyEditor.collapseForFilter();
+    }
+  },
+
+  /**
+   * Called when the pseudo class panel button is clicked and toggles
+   * the display of the pseudo class panel.
+   */
+  _onTogglePseudoClassPanel() {
+    if (this.pseudoClassPanel.hidden) {
+      this.showPseudoClassPanel();
+    } else {
+      this.hidePseudoClassPanel();
+    }
+  },
+
+  showPseudoClassPanel() {
+    this.hideClassPanel();
+
+    this.pseudoClassToggle.classList.add("checked");
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.setAttribute("tabindex", "0");
+    });
+    this.pseudoClassPanel.hidden = false;
+  },
+
+  hidePseudoClassPanel() {
+    this.pseudoClassToggle.classList.remove("checked");
+    this.pseudoClassCheckboxes.forEach(checkbox => {
+      checkbox.setAttribute("tabindex", "-1");
+    });
+    this.pseudoClassPanel.hidden = true;
+  },
+
+  /**
+   * Called when a pseudo class checkbox is clicked and toggles
+   * the pseudo class for the current selected element.
+   */
+  _onTogglePseudoClass(event) {
+    const target = event.target;
+    this.inspector.togglePseudoClass(target.value);
+  },
+
+  /**
+   * Called when the class panel button is clicked and toggles the display of the class
+   * panel.
+   */
+  _onToggleClassPanel() {
+    if (this.classPanel.hidden) {
+      this.showClassPanel();
+    } else {
+      this.hideClassPanel();
+    }
+  },
+
+  showClassPanel() {
+    this.hidePseudoClassPanel();
+
+    this.classToggle.classList.add("checked");
+    this.classPanel.hidden = false;
+
+    this.classListPreviewer.focusAddClassField();
+  },
+
+  hideClassPanel() {
+    this.classToggle.classList.remove("checked");
+    this.classPanel.hidden = true;
+  },
+
+  /**
+   * Handle the keypress event in the rule view.
+   */
+  _onShortcut(name, event) {
+    if (!event.target.closest("#sidebar-panel-ruleview")) {
+      return;
+    }
+
+    if (name === "CmdOrCtrl+F") {
+      this.searchField.focus();
+      event.preventDefault();
+    } else if (
+      (name === "Return" || name === "Space") &&
+      this.element.classList.contains("non-interactive")
+    ) {
+      event.preventDefault();
+    } else if (
+      name === "Escape" &&
+      event.target === this.searchField &&
+      this._onClearSearch()
+    ) {
+      // Handle the search box's keypress event. If the escape key is pressed,
+      // clear the search box field.
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+
+  async _onToggleLightColorSchemeSimulation() {
+    const shouldSimulateLightScheme =
+      this.colorSchemeLightSimulationButton.classList.toggle("checked");
+
+    const darkColorSchemeEnabled =
+      this.colorSchemeDarkSimulationButton.classList.contains("checked");
+    if (shouldSimulateLightScheme && darkColorSchemeEnabled) {
+      this.colorSchemeDarkSimulationButton.classList.toggle("checked");
+    }
+
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        colorSchemeSimulation: shouldSimulateLightScheme ? "light" : null,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  async _onToggleDarkColorSchemeSimulation() {
+    const shouldSimulateDarkScheme =
+      this.colorSchemeDarkSimulationButton.classList.toggle("checked");
+
+    const lightColorSchemeEnabled =
+      this.colorSchemeLightSimulationButton.classList.contains("checked");
+    if (shouldSimulateDarkScheme && lightColorSchemeEnabled) {
+      this.colorSchemeLightSimulationButton.classList.toggle("checked");
+    }
+
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        colorSchemeSimulation: shouldSimulateDarkScheme ? "dark" : null,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  async _onTogglePrintSimulation() {
+    const enabled = this.printSimulationButton.classList.toggle("checked");
+    await this.inspector.commands.targetConfigurationCommand.updateConfiguration(
+      {
+        printSimulationEnabled: enabled,
+      }
+    );
+    // Refresh the current element's rules in the panel.
+    this.refreshPanel();
+  },
+
+  /**
+   * Temporarily flash the given element.
+   *
+   * @param  {Element} element
+   *         The element.
+   */
+  _flashElement(element) {
+    flashElementOn(element, {
+      backgroundClass: "theme-bg-contrast",
+    });
+
+    if (this._flashMutationTimer) {
+      clearTimeout(this._removeFlashOutTimer);
+      this._flashMutationTimer = null;
+    }
+
+    this._flashMutationTimer = setTimeout(() => {
+      flashElementOff(element, {
+        backgroundClass: "theme-bg-contrast",
+      });
+
+      // Emit "scrolled-to-property" for use by tests.
+      this.emit("scrolled-to-element");
+    }, PROPERTY_FLASHING_DURATION);
+  },
+
+  /**
+   * Scrolls to the top of either the rule or declaration. The view will try to scroll to
+   * the rule if both can fit in the viewport. If not, then scroll to the declaration.
+   *
+   * @param  {Element} rule
+   *         The rule to scroll to.
+   * @param  {Element|null} declaration
+   *         Optional. The declaration to scroll to.
+   * @param  {String} scrollBehavior
+   *         Optional. The transition animation when scrolling. If prefers-reduced-motion
+   *         system pref is set, then the scroll behavior will be overridden to "auto".
+   */
+  _scrollToElement(rule, declaration, scrollBehavior = "smooth") {
+    let elementToScrollTo = rule;
+
+    if (declaration) {
+      const { offsetTop, offsetHeight } = declaration;
+      // Get the distance between both the rule and declaration. If the distance is
+      // greater than the height of the rule view, then only scroll to the declaration.
+      const distance = offsetTop + offsetHeight - rule.offsetTop;
+
+      if (this.element.parentNode.offsetHeight <= distance) {
+        elementToScrollTo = declaration;
+      }
+    }
+
+    // Ensure that smooth scrolling is disabled when the user prefers reduced motion.
+    const win = elementToScrollTo.ownerGlobal;
+    const reducedMotion = win.matchMedia("(prefers-reduced-motion)").matches;
+    scrollBehavior = reducedMotion ? "auto" : scrollBehavior;
+
+    elementToScrollTo.scrollIntoView({ behavior: scrollBehavior });
+  },
+
+  /**
+   * Toggles the visibility of the pseudo element rule's container.
+   */
+  _togglePseudoElementRuleContainer() {
+    const container = this.styleDocument.getElementById(
+      "pseudo-elements-container"
+    );
+    const twisty = this.styleDocument.getElementById(
+      "pseudo-elements-header-twisty"
+    );
+    this._toggleContainerVisibility(twisty, container, true, true);
+  },
+
+  /**
+   * Finds the rule with the matching actorID and highlights it.
+   *
+   * @param  {String} ruleId
+   *         The actorID of the rule.
+   */
+  highlightElementRule(ruleId) {
+    let scrollBehavior = "smooth";
+
+    const rule = this.rules.find(r => r.domRule.actorID === ruleId);
+
+    if (!rule) {
+      return;
+    }
+
+    if (rule.domRule.actorID === ruleId) {
+      // If using 2-Pane mode, then switch to the Rules tab first.
+      if (!this.inspector.is3PaneModeEnabled) {
+        this.inspector.sidebar.select("ruleview");
+      }
+
+      if (rule.pseudoElement.length && !this.showPseudoElements) {
+        scrollBehavior = "auto";
+        this._togglePseudoElementRuleContainer();
+      }
+
+      const {
+        editor: { element },
+      } = rule;
+
+      // Scroll to the top of the rule and highlight it.
+      this._scrollToElement(element, null, scrollBehavior);
+      this._flashElement(element);
+    }
+  },
+
+  /**
+   * Finds the specified TextProperty name in the rule view. If found, scroll to and
+   * flash the TextProperty.
+   *
+   * @param  {String} name
+   *         The property name to scroll to and highlight.
+   * @return {Boolean} true if the TextProperty name is found, and false otherwise.
+   */
+  highlightProperty(name) {
+    for (const rule of this.rules) {
+      for (const textProp of rule.textProps) {
+        if (textProp.overridden || textProp.invisible || !textProp.enabled) {
+          continue;
+        }
+
+        const {
+          editor: { selectorText },
+        } = rule;
+        let scrollBehavior = "smooth";
+
+        // First, search for a matching authored property.
+        if (textProp.name === name) {
+          // If using 2-Pane mode, then switch to the Rules tab first.
+          if (!this.inspector.is3PaneModeEnabled) {
+            this.inspector.sidebar.select("ruleview");
+          }
+
+          // If the property is being applied by a pseudo element rule, expand the pseudo
+          // element list container.
+          if (rule.pseudoElement.length && !this.showPseudoElements) {
+            // Set the scroll behavior to "auto" to avoid timing issues between toggling
+            // the pseudo element container and scrolling smoothly to the rule.
+            scrollBehavior = "auto";
+            this._togglePseudoElementRuleContainer();
+          }
+
+          // Scroll to the top of the property's rule so that both the property and its
+          // rule are visible.
+          this._scrollToElement(
+            selectorText,
+            textProp.editor.element,
+            scrollBehavior
+          );
+          this._flashElement(textProp.editor.element);
+
+          return true;
+        }
+
+        // If there is no matching property, then look in computed properties.
+        for (const computed of textProp.computed) {
+          if (computed.overridden) {
+            continue;
+          }
+
+          if (computed.name === name) {
+            if (!this.inspector.is3PaneModeEnabled) {
+              this.inspector.sidebar.select("ruleview");
+            }
+
+            if (
+              textProp.rule.pseudoElement.length &&
+              !this.showPseudoElements
+            ) {
+              scrollBehavior = "auto";
+              this._togglePseudoElementRuleContainer();
+            }
+
+            // Expand the computed list.
+            textProp.editor.expandForFilter();
+
+            this._scrollToElement(
+              selectorText,
+              computed.element,
+              scrollBehavior
+            );
+            this._flashElement(computed.element);
+
+            return true;
+          }
+        }
+      }
+    }
+
+    return false;
+  },
+};
+
+function RuleViewTool(inspector, window) {
+  this.inspector = inspector;
+  this.document = window.document;
+
+  this.view = new CssRuleView(this.inspector, this.document);
+
+  this._onResourceAvailable = this._onResourceAvailable.bind(this);
+  this.refresh = this.refresh.bind(this);
+  this.onDetachedFront = this.onDetachedFront.bind(this);
+  this.onPanelSelected = this.onPanelSelected.bind(this);
+  this.onDetachedFront = this.onDetachedFront.bind(this);
+  this.onSelected = this.onSelected.bind(this);
+  this.onViewRefreshed = this.onViewRefreshed.bind(this);
+
+  this.view.on("ruleview-refreshed", this.onViewRefreshed);
+  this.inspector.selection.on("detached-front", this.onDetachedFront);
+  this.inspector.selection.on("new-node-front", this.onSelected);
+  this.inspector.selection.on("pseudoclass", this.refresh);
+  this.inspector.ruleViewSideBar.on("ruleview-selected", this.onPanelSelected);
+  this.inspector.sidebar.on("ruleview-selected", this.onPanelSelected);
+  this.inspector.styleChangeTracker.on("style-changed", this.refresh);
+
+  this.inspector.commands.resourceCommand.watchResources(
+    [this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
+    {
+      onAvailable: this._onResourceAvailable,
+      ignoreExistingResources: true,
+    }
+  );
+
+  // At the moment `readyPromise` is only consumed in tests (see `openRuleView`) to be
+  // notified when the ruleview was first populated to match the initial selected node.
+  this.readyPromise = this.onSelected();
+}
+
+RuleViewTool.prototype = {
+  isPanelVisible() {
+    if (!this.view) {
+      return false;
+    }
+    return this.view.isPanelVisible();
+  },
+
+  onDetachedFront() {
+    this.onSelected(false);
+  },
+
+  onSelected(selectElement = true) {
+    // Ignore the event if the view has been destroyed, or if it's inactive.
+    // But only if the current selection isn't null. If it's been set to null,
+    // let the update go through as this is needed to empty the view on
+    // navigation.
+    if (!this.view) {
+      return null;
+    }
+
+    const isInactive =
+      !this.isPanelVisible() && this.inspector.selection.nodeFront;
+    if (isInactive) {
+      return null;
+    }
+
+    if (
+      !this.inspector.selection.isConnected() ||
+      !this.inspector.selection.isElementNode()
+    ) {
+      return this.view.selectElement(null);
+    }
+
+    if (!selectElement) {
+      return null;
+    }
+
+    const done = this.inspector.updating("rule-view");
+    return this.view
+      .selectElement(this.inspector.selection.nodeFront)
+      .then(done, done);
+  },
+
+  refresh() {
+    if (this.isPanelVisible()) {
+      this.view.refreshPanel();
+    }
+  },
+
+  _onResourceAvailable(resources) {
+    for (const resource of resources) {
+      if (
+        resource.resourceType ===
+          this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT &&
+        resource.name === "will-navigate" &&
+        resource.targetFront.isTopLevel
+      ) {
+        this.clearUserProperties();
+      }
+    }
+  },
+
+  clearUserProperties() {
+    if (this.view && this.view.store && this.view.store.userProperties) {
+      this.view.store.userProperties.clear();
+    }
+  },
+
+  onPanelSelected() {
+    if (this.inspector.selection.nodeFront === this.view._viewedElement) {
+      this.refresh();
+    } else {
+      this.onSelected();
+    }
+  },
+
+  onViewRefreshed() {
+    this.inspector.emit("rule-view-refreshed");
+  },
+
+  destroy() {
+    this.inspector.styleChangeTracker.off("style-changed", this.refresh);
+    this.inspector.selection.off("detached-front", this.onDetachedFront);
+    this.inspector.selection.off("pseudoclass", this.refresh);
+    this.inspector.selection.off("new-node-front", this.onSelected);
+    this.inspector.currentTarget.off("navigate", this.clearUserProperties);
+    this.inspector.sidebar.off("ruleview-selected", this.onPanelSelected);
+
+    this.inspector.commands.resourceCommand.unwatchResources(
+      [this.inspector.commands.resourceCommand.TYPES.DOCUMENT_EVENT],
+      {
+        onAvailable: this._onResourceAvailable,
+      }
+    );
+
+    this.view.off("ruleview-refreshed", this.onViewRefreshed);
+
+    this.view.destroy();
+
+    this.view = this.document = this.inspector = this.readyPromise = null;
+  },
+};
+
+exports.CssRuleView = CssRuleView;
+exports.RuleViewTool = RuleViewTool;
diff --git a/devtools/client/inspector/rules/test/browser_part1.ini b/devtools/client/inspector/rules/test/browser_part1.ini
new file mode 100644
index 0000000000..b31e7765a0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_part1.ini
@@ -0,0 +1,172 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  doc_blob_stylesheet.html
+  doc_copystyles.css
+  doc_copystyles.html
+  doc_class_panel_autocomplete_stylesheet.css
+  doc_class_panel_autocomplete.html
+  doc_conditional_import.css
+  doc_cssom.html
+  doc_custom.html
+  doc_edit_imported_selector.html
+  doc_imported_named_layer.css
+  doc_imported_no_layer.css
+  doc_test_image.png
+  doc_variables_4.html
+  head.js
+  !/devtools/client/inspector/test/head.js
+  !/devtools/client/inspector/test/shared-head.js
+  !/devtools/client/shared/test/shared-head.js
+  !/devtools/client/shared/test/telemetry-test-helpers.js
+  !/devtools/client/shared/test/highlighter-test-actor.js
+
+[browser_rules_add-property-and-reselect.js]
+skip-if = http3 # Bug 1829298
+[browser_rules_add-property-cancel_01.js]
+[browser_rules_add-property-cancel_02.js]
+[browser_rules_add-property-cancel_03.js]
+[browser_rules_add-property-commented.js]
+skip-if =
+  verify && debug && os == "win"
+[browser_rules_add-property_01.js]
+[browser_rules_add-property_02.js]
+[browser_rules_add-property-invalid-identifier.js]
+[browser_rules_add-property-svg.js]
+[browser_rules_add-rule-and-property.js]
+[browser_rules_add-rule-and-remove-style-node.js]
+[browser_rules_add-rule-button-state.js]
+[browser_rules_add-rule-csp.js]
+[browser_rules_add-rule-edit-selector.js]
+[browser_rules_add-rule-iframes.js]
+[browser_rules_add-rule-namespace-elements.js]
+[browser_rules_add-rule-pseudo-class.js]
+[browser_rules_add-rule-then-property-edit-selector.js]
+[browser_rules_add-rule-with-menu.js]
+[browser_rules_add-rule.js]
+[browser_rules_authored.js]
+[browser_rules_authored_color.js]
+skip-if =
+  os == "linux" && os_version == '18.04' && !debug # Bug 1559315
+  apple_catalina # Bug 1713158
+  win10_2004 # Bug 1559315, 1723573
+  win11_2009 # Bug 1797751
+[browser_rules_authored_override.js]
+[browser_rules_blob_stylesheet.js]
+[browser_rules_class_panel_add.js]
+[browser_rules_class_panel_autocomplete.js]
+[browser_rules_class_panel_content.js]
+[browser_rules_class_panel_edit.js]
+[browser_rules_class_panel_invalid_nodes.js]
+[browser_rules_class_panel_mutation.js]
+[browser_rules_class_panel_state_preserved.js]
+[browser_rules_class_panel_toggle.js]
+[browser_rules_color_scheme_simulation_bfcache.js]
+[browser_rules_color_scheme_simulation_meta.js]
+[browser_rules_color_scheme_simulation_rdm.js]
+skip-if =
+  win10_2004 # Bug 1723573
+[browser_rules_color_scheme_simulation.js]
+skip-if =
+  os == "win" && !debug # Bug 1703465
+[browser_rules_colorpicker-and-image-tooltip_01.js]
+[browser_rules_colorpicker-and-image-tooltip_02.js]
+[browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js]
+[browser_rules_colorpicker-commit-on-ENTER.js]
+[browser_rules_colorpicker-contrast-ratio.js]
+[browser_rules_colorpicker-edit-gradient.js]
+[browser_rules_colorpicker-element-without-quads.js]
+[browser_rules_colorpicker-hides-element-picker.js]
+[browser_rules_colorpicker-hides-on-tooltip.js]
+[browser_rules_colorpicker-multiple-changes.js]
+[browser_rules_colorpicker-release-outside-frame.js]
+[browser_rules_colorpicker-revert-on-ESC.js]
+[browser_rules_colorpicker-swatch-displayed.js]
+[browser_rules_colorpicker-works-with-css-vars.js]
+[browser_rules_colorpicker-wrap-focus.js]
+[browser_rules_colorUnit.js]
+[browser_rules_completion-existing-property_01.js]
+[browser_rules_completion-existing-property_02.js]
+[browser_rules_completion-new-property_01.js]
+[browser_rules_completion-new-property_02.js]
+skip-if =
+  verify && !debug && os == "win"
+[browser_rules_completion-new-property_03.js]
+[browser_rules_completion-new-property_04.js]
+[browser_rules_completion-new-property_multiline.js]
+[browser_rules_completion-on-empty.js]
+[browser_rules_completion-shortcut.js]
+[browser_rules_computed-lists_01.js]
+[browser_rules_computed-lists_02.js]
+[browser_rules_computed-lists_03.js]
+[browser_rules_completion-popup-hidden-after-navigation.js]
+[browser_rules_conditional_import.js]
+[browser_rules_container-queries.js]
+[browser_rules_content_01.js]
+[browser_rules_content_02.js]
+[browser_rules_variables-in-pseudo-element_01.js]
+[browser_rules_variables-in-pseudo-element_02.js]
+[browser_rules_variables_01.js]
+[browser_rules_variables_02.js]
+skip-if = debug # Bug 1250058 - Docshell leak on debug
+[browser_rules_variables_03-case-sensitive.js]
+[browser_rules_variables_04-valid-chars.js]
+[browser_rules_copy_styles.js]
+[browser_rules_cssom.js]
+[browser_rules_cubicbezier-appears-on-swatch-click.js]
+[browser_rules_cubicbezier-commit-on-ENTER.js]
+[browser_rules_cubicbezier-revert-on-ESC.js]
+[browser_rules_custom.js]
+[browser_rules_cycle-angle.js]
+[browser_rules_cycle-color.js]
+[browser_rules_edit-display-grid-property.js]
+[browser_rules_edit-property-cancel.js]
+[browser_rules_edit-property-click.js]
+[browser_rules_edit-property-commit.js]
+[browser_rules_edit-property-computed.js]
+[browser_rules_edit-property-increments.js]
+[browser_rules_edit-property-order.js]
+[browser_rules_edit-property-remove_01.js]
+skip-if =
+  verify && debug && os == "win"
+[browser_rules_edit-property-remove_02.js]
+[browser_rules_edit-property-remove_03.js]
+[browser_rules_edit-property-remove_04.js]
+[browser_rules_edit-property_01.js]
+[browser_rules_edit-property_02.js]
+[browser_rules_edit-property_03.js]
+[browser_rules_edit-property_04.js]
+[browser_rules_edit-property_05.js]
+[browser_rules_edit-property_06.js]
+[browser_rules_edit-property_07.js]
+[browser_rules_edit-property_08.js]
+[browser_rules_edit-property_09.js]
+[browser_rules_edit-property_10.js]
+[browser_rules_edit-selector-click.js]
+[browser_rules_edit-selector-click-on-scrollbar.js]
+skip-if = os == "mac" # Bug 1245996 : click on scrollbar not working on OSX
+[browser_rules_edit-selector-commit.js]
+[browser_rules_edit-selector_01.js]
+[browser_rules_edit-selector_02.js]
+[browser_rules_edit-selector_03.js]
+[browser_rules_edit-selector_04.js]
+[browser_rules_edit-selector_05.js]
+[browser_rules_edit-selector_06.js]
+[browser_rules_edit-selector_07.js]
+[browser_rules_edit-selector_08.js]
+[browser_rules_edit-selector_09.js]
+[browser_rules_edit-selector_10.js]
+[browser_rules_edit-selector_11.js]
+[browser_rules_edit-selector_12.js]
+[browser_rules_edit-size-property-dragging.js]
+[browser_rules_edit-value-after-name_01.js]
+[browser_rules_edit-value-after-name_02.js]
+[browser_rules_edit-value-after-name_03.js]
+[browser_rules_edit-value-after-name_04.js]
+[browser_rules_edit-variable.js]
+[browser_rules_edit-variable-add.js]
+[browser_rules_edit-variable-remove.js]
+[browser_rules_editable-field-focus_01.js]
+[browser_rules_editable-field-focus_02.js]
+[browser_rules_eyedropper.js]
diff --git a/devtools/client/inspector/rules/test/browser_part2.ini b/devtools/client/inspector/rules/test/browser_part2.ini
new file mode 100644
index 0000000000..3d245f2e2c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_part2.ini
@@ -0,0 +1,223 @@
+[DEFAULT]
+tags = devtools
+subsuite = devtools
+support-files =
+  doc_author-sheet.html
+  doc_content_stylesheet.html
+  doc_content_stylesheet_imported.css
+  doc_content_stylesheet_imported2.css
+  doc_content_stylesheet_linked.css
+  doc_content_stylesheet_script.css
+  doc_filter.html
+  doc_grid_names.html
+  doc_grid_area_gridline_names.html
+  doc_inline_sourcemap.html
+  doc_invalid_sourcemap.css
+  doc_invalid_sourcemap.html
+  doc_keyframeanimation.css
+  doc_keyframeanimation.html
+  doc_keyframeLineNumbers.html
+  doc_media_queries.html
+  doc_print_media_simulation.html
+  doc_pseudoelement.html
+  doc_ruleLineNumbers.html
+  doc_rules_imported_stylesheet_edit.html
+  doc_sourcemaps.css
+  doc_sourcemaps.css.map
+  doc_sourcemaps.html
+  doc_sourcemaps.scss
+  doc_sourcemaps2.css
+  doc_sourcemaps2.css^headers^
+  doc_sourcemaps2.html
+  doc_style_editor_link.css
+  doc_test_image.png
+  doc_urls_clickable.css
+  doc_urls_clickable.html
+  doc_variables_1.html
+  doc_variables_2.html
+  doc_variables_3.html
+  doc_visited.html
+  doc_visited_in_media_query.html
+  doc_visited_with_style_attribute.html
+  doc_imported_anonymous_layer.css
+  doc_imported_named_layer.css
+  doc_imported_no_layer.css
+  doc_inactive_css_xul.xhtml
+  head.js
+  sjs_imported_stylesheet_edit.sjs
+  square_svg.sjs
+  !/devtools/client/inspector/test/head.js
+  !/devtools/client/inspector/test/shared-head.js
+  !/devtools/client/shared/test/shared-head.js
+  !/devtools/client/shared/test/telemetry-test-helpers.js
+  !/devtools/client/shared/test/highlighter-test-actor.js
+  !/devtools/client/webconsole/test/browser/shared-head.js
+
+[browser_rules_css-compatibility-add-rename-rule.js]
+skip-if =
+  os == "linux" #bug 1657807
+  os == "win" #bug 1657807
+[browser_rules_css-compatibility-check-add-fix.js]
+[browser_rules_css-compatibility-learn-more-link.js]
+[browser_rules_css-compatibility-toggle-rules.js]
+[browser_rules_css-compatibility-tooltip-telemetry.js]
+[browser_rules_filtereditor-appears-on-swatch-click.js]
+[browser_rules_filtereditor-commit-on-ENTER.js]
+[browser_rules_filtereditor-revert-on-ESC.js]
+skip-if =
+  os == "win" && debug # bug 963492: win.
+[browser_rules_flexbox-highlighter-on-mutation.js]
+[browser_rules_flexbox-highlighter-on-navigate.js]
+[browser_rules_flexbox-highlighter-on-reload.js]
+[browser_rules_flexbox-highlighter-restored-after-reload.js]
+[browser_rules_flexbox-toggle-telemetry.js]
+[browser_rules_flexbox-toggle_01.js]
+[browser_rules_flexbox-toggle_01b.js]
+[browser_rules_flexbox-toggle_02.js]
+[browser_rules_flexbox-toggle_03.js]
+[browser_rules_flexbox-toggle_04.js]
+[browser_rules_font-family-parsing.js]
+[browser_rules_grid-highlighter-on-mutation.js]
+[browser_rules_grid-highlighter-on-navigate.js]
+[browser_rules_grid-highlighter-on-reload.js]
+[browser_rules_grid-highlighter-restored-after-reload.js]
+[browser_rules_grid-template-areas.js]
+[browser_rules_grid-toggle-telemetry.js]
+[browser_rules_grid-toggle_01.js]
+[browser_rules_grid-toggle_01b.js]
+[browser_rules_grid-toggle_02.js]
+[browser_rules_grid-toggle_03.js]
+[browser_rules_grid-toggle_04.js]
+[browser_rules_grid-toggle_05.js]
+[browser_rules_gridline-names-autocomplete.js]
+skip-if =
+  win10_2004 # Bug 1723573
+  os == "mac" && !debug # Bug 1675592; high frequency with/out fission
+[browser_rules_gridline-names-are-shown-correctly.js]
+skip-if = os == "linux" # focusEditableField times out consistently on linux.
+[browser_rules_guessIndentation.js]
+[browser_rules_highlight-element-rule.js]
+[browser_rules_highlight-property.js]
+[browser_rules_highlight-used-fonts.js]
+[browser_rules_imported_stylesheet_edit.js]
+skip-if = http3 # Bug 1829298
+[browser_rules_inactive_css_display-justify.js]
+[browser_rules_inactive_css_flexbox.js]
+[browser_rules_inactive_css_grid.js]
+[browser_rules_inactive_css_inline.js]
+[browser_rules_inactive_css_split-condition.js]
+[browser_rules_inactive_css_visited.js]
+[browser_rules_inactive_css_xul.js]
+[browser_rules_inherited-properties_01.js]
+[browser_rules_inherited-properties_02.js]
+[browser_rules_inherited-properties_03.js]
+[browser_rules_inherited-properties_04.js]
+[browser_rules_inline-source-map.js]
+[browser_rules_inline-style-order.js]
+[browser_rules_invalid.js]
+[browser_rules_invalid-source-map.js]
+[browser_rules_keybindings.js]
+[browser_rules_keyframes-rule-shadowdom.js]
+[browser_rules_keyframes-rule_01.js]
+[browser_rules_keyframes-rule_02.js]
+[browser_rules_keyframeLineNumbers.js]
+[browser_rules_large_base64_background_image.js]
+[browser_rules_layer.js]
+[browser_rules_linear-easing-swatch.js]
+[browser_rules_lineNumbers.js]
+[browser_rules_livepreview.js]
+[browser_rules_mark_overridden_01.js]
+[browser_rules_mark_overridden_02.js]
+[browser_rules_mark_overridden_03.js]
+[browser_rules_mark_overridden_04.js]
+[browser_rules_mark_overridden_05.js]
+[browser_rules_mark_overridden_06.js]
+[browser_rules_mark_overridden_07.js]
+[browser_rules_mark_overridden_08.js]
+[browser_rules_mathml-element.js]
+disabled = bug 1231085 # This should be rewritten now that MathMLElement.style is available.
+[browser_rules_media-queries_reload.js]
+skip-if =
+  ccov && os == "win" # Bug 1516686
+[browser_rules_media-queries.js]
+[browser_rules_multiple-properties-duplicates.js]
+[browser_rules_multiple-properties-priority.js]
+[browser_rules_multiple-properties-unfinished_01.js]
+[browser_rules_multiple-properties-unfinished_02.js]
+[browser_rules_multiple_properties_01.js]
+[browser_rules_multiple_properties_02.js]
+[browser_rules_nested_at_rules.js]
+[browser_rules_non_ascii.js]
+[browser_rules_original-source-link.js]
+skip-if =
+  ccov #Bug 1432176
+  http3 # Bug 1829298
+[browser_rules_original-source-link2.js]
+skip-if =
+  ccov # Bug 1432176
+  http3 # Bug 1829298
+[browser_rules_preview-tooltips-sizes.js]
+[browser_rules_print_media_simulation.js]
+[browser_rules_pseudo-element_01.js]
+[browser_rules_pseudo-element_02.js]
+[browser_rules_pseudo-visited.js]
+[browser_rules_pseudo-visited_in_media-query.js]
+[browser_rules_pseudo-visited_with_style-attribute.js]
+[browser_rules_pseudo_lock_options.js]
+[browser_rules_refresh-no-flicker.js]
+[browser_rules_refresh-on-attribute-change_01.js]
+[browser_rules_refresh-on-style-change.js]
+[browser_rules_search-filter-computed-list_01.js]
+[browser_rules_search-filter-computed-list_02.js]
+[browser_rules_search-filter-computed-list_03.js]
+[browser_rules_search-filter-computed-list_04.js]
+[browser_rules_search-filter-computed-list_expander.js]
+[browser_rules_search-filter-media-queries-layers.js]
+[browser_rules_search-filter-overridden-property.js]
+[browser_rules_search-filter_01.js]
+[browser_rules_search-filter_02.js]
+[browser_rules_search-filter_03.js]
+[browser_rules_search-filter_04.js]
+[browser_rules_search-filter_05.js]
+[browser_rules_search-filter_06.js]
+[browser_rules_search-filter_07.js]
+[browser_rules_search-filter_08.js]
+[browser_rules_search-filter_09.js]
+[browser_rules_search-filter_10.js]
+[browser_rules_search-filter_context-menu.js]
+[browser_rules_search-filter_escape-keypress.js]
+[browser_rules_select-and-copy-styles.js]
+[browser_rules_selector-highlighter-iframe-picker.js]
+[browser_rules_selector-highlighter-on-navigate.js]
+[browser_rules_selector-highlighter_01.js]
+[browser_rules_selector-highlighter_02.js]
+[browser_rules_selector-highlighter_03.js]
+[browser_rules_selector-highlighter_04.js]
+[browser_rules_selector-highlighter_05.js]
+[browser_rules_selector-highlighter_order.js]
+[browser_rules_selector_highlight.js]
+[browser_rules_shadowdom_slot_rules.js]
+[browser_rules_shapes-toggle_01.js]
+[browser_rules_shapes-toggle_02.js]
+[browser_rules_shapes-toggle_03.js]
+[browser_rules_shapes-toggle_04.js]
+[browser_rules_shapes-toggle_05.js]
+[browser_rules_shapes-toggle_06.js]
+[browser_rules_shapes-toggle_07.js]
+fail-if = a11y_checks # bug 1687723 ruleview-shapeswatch is not accessible
+[browser_rules_shapes-toggle_basic-shapes-default.js]
+[browser_rules_shorthand-overridden-lists.js]
+[browser_rules_shorthand-overridden-lists_01.js]
+[browser_rules_strict-search-filter-computed-list_01.js]
+[browser_rules_strict-search-filter_01.js]
+[browser_rules_strict-search-filter_02.js]
+[browser_rules_strict-search-filter_03.js]
+[browser_rules_style-editor-link.js]
+[browser_rules_update_mask_image_cors.js]
+[browser_rules_url-click-opens-new-tab.js]
+[browser_rules_urls-clickable.js]
+[browser_rules_user-agent-styles.js]
+[browser_rules_user-agent-styles-uneditable.js]
+[browser_rules_user-property-reset.js]
+skip-if =
+  os == "win" && debug # bug 1758768, frequent leaks on win debug
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js b/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
new file mode 100644
index 0000000000..d71af090cf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-and-reselect.js
@@ -0,0 +1,63 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding properties to rules work and reselecting the element still
+// show them.
+
+const TEST_URI = URL_ROOT + "doc_content_stylesheet.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  info("Setting a font-weight property on all rules");
+  await setPropertyOnAllRules(view, inspector);
+
+  info("Reselecting the element");
+  await selectNode("body", inspector);
+  await selectNode("#target", inspector);
+
+  checkPropertyOnAllRules(view);
+});
+
+async function setPropertyOnAllRules(view, inspector) {
+  // Set the inline style rule first independently because it needs to wait for specific
+  // events and the DOM mutation that it causes refreshes the rules view, so we need to
+  // get the list of rules again later.
+  info("Adding font-weight:bold in the inline style rule");
+  const inlineStyleRuleEditor = view._elementStyle.rules[0].editor;
+
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewRefreshed = view.once("ruleview-refreshed");
+
+  inlineStyleRuleEditor.addProperty("font-weight", "bold", "", true);
+
+  await Promise.all([onMutation, onRuleViewRefreshed]);
+
+  // Now set the other rules after having retrieved the list.
+  const allRules = view._elementStyle.rules;
+
+  for (let i = 1; i < allRules.length; i++) {
+    info(`Adding font-weight:bold in rule ${i}`);
+    const rule = allRules[i];
+    const ruleEditor = rule.editor;
+
+    const onRuleViewChanged = view.once("ruleview-changed");
+
+    ruleEditor.addProperty("font-weight", "bold", "", true);
+
+    await onRuleViewChanged;
+  }
+}
+
+function checkPropertyOnAllRules(view) {
+  for (const rule of view._elementStyle.rules) {
+    const lastProperty = rule.textProps[rule.textProps.length - 1];
+
+    is(lastProperty.name, "font-weight", "Last property name is font-weight");
+    is(lastProperty.value, "bold", "Last property value is bold");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
new file mode 100644
index 0000000000..9131da6423
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_01.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the new empty property name editor.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(elementRuleEditor);
+  is(
+    inplaceEditor(elementRuleEditor.newPropSpan),
+    editor,
+    "The new property editor got focused"
+  );
+
+  info("Escape the new property editor");
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onBlur;
+
+  info("Checking the state of cancelling a new property name editor");
+  is(
+    elementRuleEditor.rule.textProps.length,
+    0,
+    "Should have cancelled creating a new text property."
+  );
+  ok(
+    !elementRuleEditor.propertyList.hasChildNodes(),
+    "Should not have any properties."
+  );
+
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
new file mode 100644
index 0000000000..e47023e8f3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_02.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the new empty property value editor.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Test creating a new property and escaping");
+  await addProperty(view, 1, "color", "red", {
+    commitValueWith: "VK_ESCAPE",
+    blurNewProperty: false,
+  });
+
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  is(
+    elementRuleEditor.rule.textProps.length,
+    1,
+    "Removed the new text property."
+  );
+  is(
+    elementRuleEditor.propertyList.children.length,
+    1,
+    "Removed the property editor."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
new file mode 100644
index 0000000000..ebaa27ae4c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-cancel_03.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new property and escapes the property name editor with a
+// value.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      background-color: blue;
+    }
+  </style>
+  <div>Test node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  // Add a property to the element's style declaration, add some text,
+  // then press escape.
+
+  const elementRuleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusNewRuleViewProperty(elementRuleEditor);
+
+  is(
+    inplaceEditor(elementRuleEditor.newPropSpan),
+    editor,
+    "Next focused editor should be the new property editor."
+  );
+
+  EventUtils.sendString("background", view.styleWindow);
+
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await onBlur;
+
+  is(
+    elementRuleEditor.rule.textProps.length,
+    1,
+    "Should have canceled creating a new text property."
+  );
+  is(
+    view.styleDocument.activeElement,
+    view.styleDocument.body,
+    "Correct element has focus"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js b/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js
new file mode 100644
index 0000000000..eebade7d70
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-commented.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that commented properties can be added and are disabled.
+
+const TEST_URI = "<div id='testid'></div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testCreateNewSetOfCommentedAndUncommentedProperties(view);
+});
+
+async function testCreateNewSetOfCommentedAndUncommentedProperties(view) {
+  info("Test creating a new set of commented and uncommented properties");
+
+  info("Focusing a new property name in the rule-view");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusEditableField(view, ruleEditor.closeBrace);
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "The new property editor has focus"
+  );
+
+  info(
+    "Entering a commented property/value pair into the property name editor"
+  );
+  const input = editor.input;
+  input.value = `color: blue;
+                 /* background-color: yellow; */
+                 width: 200px;
+                 height: 100px;
+                 /* padding-bottom: 1px; */`;
+
+  info("Pressing return to commit and focus the new value field");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onModifications;
+
+  const textProps = ruleEditor.rule.textProps;
+  ok(textProps[0].enabled, "The 'color' property is enabled.");
+  ok(!textProps[1].enabled, "The 'background-color' property is disabled.");
+  ok(textProps[2].enabled, "The 'width' property is enabled.");
+  ok(textProps[3].enabled, "The 'height' property is enabled.");
+  ok(!textProps[4].enabled, "The 'padding-bottom' property is disabled.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js b/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js
new file mode 100644
index 0000000000..e4a4b0fba1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-invalid-identifier.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding properties that are invalid identifiers.
+
+const TEST_URI = "<div id='testid'>Styled Node</div>";
+const TEST_DATA = [
+  { name: "1", value: "100" },
+  { name: "-1", value: "100" },
+  { name: "1a", value: "100" },
+  { name: "-11a", value: "100" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const { name, value } of TEST_DATA) {
+    info(`Test creating a new property ${name}: ${value}`);
+    const declaration = await addProperty(view, 0, name, value);
+
+    is(declaration.name, name, "Property name should have been changed.");
+    is(declaration.value, value, "Property value should have been changed.");
+    is(
+      declaration.editor.isValid(),
+      false,
+      "The declaration should be invalid."
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
new file mode 100644
index 0000000000..f286d6f427
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property-svg.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests editing SVG styles using the rules view.
+
+var TEST_URL = "chrome://devtools/skin/images/alert.svg";
+var TEST_SELECTOR = "path";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+  await selectNode(TEST_SELECTOR, inspector);
+
+  info("Test creating a new property");
+  await addProperty(view, 0, "fill", "red");
+
+  is(
+    await getComputedStyleProperty(TEST_SELECTOR, null, "fill"),
+    "rgb(255, 0, 0)",
+    "The fill was changed to red"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_01.js b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
new file mode 100644
index 0000000000..34c6a2066d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_01.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding an invalid property.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Test creating a new property");
+  const textProp = await addProperty(view, 0, "background-color", "#XYZ");
+
+  is(textProp.value, "#XYZ", "Text prop should have been changed.");
+  is(textProp.overridden, true, "Property should be overridden");
+  is(textProp.editor.isValid(), false, "#XYZ should not be a valid entry");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-property_02.js b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
new file mode 100644
index 0000000000..fbe38c92ef
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-property_02.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding a valid property to a CSS rule, and navigating through the fields
+// by pressing ENTER.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Focus the new property name field");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  const input = editor.input;
+
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "Next focused editor should be the new property editor."
+  );
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
+  EventUtils.synthesizeMouse(input, 1, 1, {}, view.styleWindow);
+  input.select();
+
+  info("Entering the property name");
+  editor.input.value = "background-color";
+
+  info("Pressing RETURN and waiting for the value field focus");
+  const onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onNameAdded;
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have created a property editor."
+  );
+  const textProp = ruleEditor.rule.textProps[1];
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "Should be editing the value span now."
+  );
+
+  info("Entering the property value");
+  const onValueAdded = view.once("ruleview-changed");
+  editor.input.value = "purple";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onValueAdded;
+
+  is(textProp.value, "purple", "Text prop should have been changed.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js
new file mode 100644
index 0000000000..ddb99464e8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-property.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new rule and a new property in this rule.
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8,<div id='testid'>Styled Node</div>"
+  );
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info("Adding a new rule for this node and blurring the new selector field");
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property for this rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  ruleEditor.addProperty("font-weight", "bold", "", true);
+  await onRuleViewChanged;
+
+  const textProps = ruleEditor.rule.textProps;
+  const prop = textProps[textProps.length - 1];
+  is(prop.name, "font-weight", "The last property name is font-weight");
+  is(prop.value, "bold", "The last property value is bold");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js
new file mode 100644
index 0000000000..1505f70c32
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-and-remove-style-node.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that bug 1736412 is fixed
+// We press "add new rule", then we remove the style node
+// We then try to press "add new rule again"
+
+const TEST_URI = '<div id="testid">Test Node</div>';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await addNewRule(inspector, view);
+  await testNewRule(view, 1);
+  await testRemoveStyleNode();
+  await addNewRule(inspector, view);
+  await testNewRule(view, 1);
+});
+
+function testNewRule(view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(editor.value, "#testid", "Selector editor value is as expected");
+  info("Escaping from the selector field the change");
+  EventUtils.synthesizeKey("KEY_Escape");
+}
+
+async function testRemoveStyleNode() {
+  info("Removing the style node from the dom");
+  const nbStyleSheets = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      content.document.styleSheets[0].ownerNode.remove();
+      return content.document.styleSheets.length;
+    }
+  );
+  is(nbStyleSheets, 0, "Style node has been removed");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js
new file mode 100644
index 0000000000..578f50c5a8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-button-state.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests if the `Add rule` button disables itself properly for non-element nodes
+// and anonymous element.
+
+const TEST_URI = `
+  <style type="text/css">
+    #pseudo::before {
+      content: "before";
+    }
+  </style>
+  <div id="pseudo"></div>
+  <div id="testid">Test Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await testDisabledButton(inspector, view);
+});
+
+async function testDisabledButton(inspector, view) {
+  const node = "#testid";
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Select a null element");
+  await view.selectElement(null);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+
+  info("Selecting a pseudo element");
+  const pseudo = await getNodeFront("#pseudo", inspector);
+  const children = await inspector.walker.children(pseudo);
+  const before = children.nodes[0];
+  await selectNode(before, inspector);
+  ok(view.addRuleButton.disabled, "Add rule button should be disabled");
+
+  info("Selecting a real element");
+  await selectNode(node, inspector);
+  ok(!view.addRuleButton.disabled, "Add rule button should be enabled");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
new file mode 100644
index 0000000000..85d91a621d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-csp.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+<!doctype html>
+<html>
+  <head>
+    <meta http-equiv="Content-Security-Policy" content="style-src 'none'">
+  </head>
+  <body>
+    <div id="testid"></div>
+  </body>
+</html>
+`;
+
+// Tests adding a new rule works on a page with CSP style-src none.
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,${encodeURIComponent(TEST_URI)}`);
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info("Adding a new rule for this node and blurring the new selector field");
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property for this rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  ruleEditor.addProperty("color", "red", "", true);
+  await onRuleViewChanged;
+
+  const textProps = ruleEditor.rule.textProps;
+  const prop = textProps[textProps.length - 1];
+  is(prop.name, "color", "The last property name is color");
+  is(prop.value, "red", "The last property value is red");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js
new file mode 100644
index 0000000000..c5323983fc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-edit-selector.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule to the rule view and editing
+// its selector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addNewRule(inspector, view);
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector field");
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = idRuleEditor.selectorText.ownerDocument.activeElement;
+
+  info("Entering a new selector name and committing");
+  editor.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js
new file mode 100644
index 0000000000..5a46978bb7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-iframes.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a rule on elements nested in iframes.
+
+const TEST_URI = `<div>outer</div>
+  <iframe id="frame1" src="data:text/html;charset=utf-8,<div>inner1</div>">
+  </iframe>
+  <iframe id="frame2" src="data:text/html;charset=utf-8,<div>inner2</div>">
+  </iframe>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "red");
+
+  await selectNodeInFrames(["#frame1", "div"], inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "blue");
+
+  await selectNodeInFrames(["#frame2", "div"], inspector);
+  await addNewRuleAndDismissEditor(inspector, view, "div", 1);
+  await addNewProperty(view, 1, "color", "green");
+});
+
+/**
+ * Add a new property in the rule at the provided index in the rule view.
+ *
+ * @param {RuleView} view
+ * @param {Number} index
+ *        The index of the rule in which we should add a new property.
+ * @param {String} name
+ *        The name of the new property.
+ * @param {String} value
+ *        The value of the new property.
+ */
+async function addNewProperty(view, index, name, value) {
+  const idRuleEditor = getRuleViewRuleEditor(view, index);
+  info(`Adding new property "${name}: ${value};"`);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  idRuleEditor.addProperty(name, value, "", true);
+  await onRuleViewChanged;
+
+  const textProps = idRuleEditor.rule.textProps;
+  const lastProperty = textProps[textProps.length - 1];
+  is(lastProperty.name, name, "Last property has the expected name");
+  is(lastProperty.value, value, "Last property has the expected value");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
new file mode 100644
index 0000000000..ef3a958875
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-namespace-elements.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule using the add rule button
+// on namespaced elements.
+
+const XHTML = `
+  <!DOCTYPE html>
+  <html xmlns="http://www.w3.org/1999/xhtml"
+        xmlns:svg="http://www.w3.org/2000/svg">
+    <body>
+      <svg:svg width="100" height="100">
+        <svg:clipPath>
+          <svg:rect x="0" y="0" width="10" height="5"></svg:rect>
+        </svg:clipPath>
+        <svg:circle cx="0" cy="0" r="5"></svg:circle>
+      </svg:svg>
+    </body>
+  </html>
+`;
+const TEST_URI = "data:application/xhtml+xml;charset=utf-8," + encodeURI(XHTML);
+
+const TEST_DATA = [
+  { node: "clipPath", expected: "clipPath" },
+  { node: "rect", expected: "rect" },
+  { node: "circle", expected: "circle" },
+];
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    const { node, expected } = data;
+    await selectNode(node, inspector);
+    await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js
new file mode 100644
index 0000000000..2963da9034
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-pseudo-class.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a rule with pseudo class locks on.
+
+const TEST_URI = "<p id='element'>Test element</p>";
+
+const EXPECTED_SELECTOR = "#element";
+const TEST_DATA = [
+  [],
+  [":hover"],
+  [":hover", ":active"],
+  [":hover", ":active", ":focus"],
+  [":active"],
+  [":active", ":focus"],
+  [":focus"],
+  [":focus-within"],
+  [":hover", ":focus-within"],
+  [":hover", ":active", ":focus-within"],
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#element", inspector);
+
+  for (const data of TEST_DATA) {
+    await runTestData(inspector, view, data);
+  }
+});
+
+async function runTestData(inspector, view, pseudoClasses) {
+  await setPseudoLocks(inspector, view, pseudoClasses);
+
+  const expected = EXPECTED_SELECTOR + pseudoClasses.join("");
+  await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+
+  await resetPseudoLocks(inspector, view);
+}
+
+async function setPseudoLocks(inspector, view, pseudoClasses) {
+  if (!pseudoClasses.length) {
+    return;
+  }
+
+  for (const pseudoClass of pseudoClasses) {
+    const checkbox = getPseudoClassCheckbox(view, pseudoClass);
+    if (checkbox) {
+      checkbox.click();
+    }
+    await inspector.once("rule-view-refreshed");
+  }
+}
+
+async function resetPseudoLocks(inspector, view) {
+  for (const checkbox of view.pseudoClassCheckboxes) {
+    if (checkbox.checked) {
+      checkbox.click();
+      await inspector.once("rule-view-refreshed");
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js
new file mode 100644
index 0000000000..e9647f8351
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-then-property-edit-selector.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the behaviour of adding a new rule to the rule view, adding a new
+// property and editing the selector.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      text-align: center;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addNewRuleAndDismissEditor(inspector, view, "#testid", 1);
+
+  info("Adding a new property to the new rule");
+  await testAddingProperty(view, 1);
+
+  info("Editing existing selector field");
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element");
+  await selectNode("span", inspector);
+
+  info("Check new rule and property exist in the modified element");
+  await checkModifiedElement(view, "span", 1);
+});
+
+function testAddingProperty(view, index) {
+  const ruleEditor = getRuleViewRuleEditor(view, index);
+  ruleEditor.addProperty("font-weight", "bold", "", true);
+  const textProps = ruleEditor.rule.textProps;
+  const lastRule = textProps[textProps.length - 1];
+  is(lastRule.name, "font-weight", "Last rule name is font-weight");
+  is(lastRule.value, "bold", "Last rule value is bold");
+}
+
+async function testEditSelector(view, name) {
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name: " + name);
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+}
+
+function checkModifiedElement(view, name, index) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+
+  const idRuleEditor = getRuleViewRuleEditor(view, index);
+  const textProps = idRuleEditor.rule.textProps;
+  const lastRule = textProps[textProps.length - 1];
+  is(lastRule.name, "font-weight", "Last rule name is font-weight");
+  is(lastRule.value, "bold", "Last rule value is bold");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js b/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js
new file mode 100644
index 0000000000..b3b23a6ae9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule-with-menu.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the a new CSS rule can be added using the context menu.
+
+const TEST_URI = '<div id="testid">Test Node</div>';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await addNewRuleFromContextMenu(inspector, view);
+  await testNewRule(view);
+});
+
+async function addNewRuleFromContextMenu(inspector, view) {
+  info("Waiting for context menu to be shown");
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, view.element);
+  const menuitemAddRule = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.addNewRule")
+  );
+
+  ok(menuitemAddRule.visible, "Add rule is visible");
+
+  info("Adding the new rule and expecting a ruleview-changed event");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  menuitemAddRule.click();
+  await onRuleViewChanged;
+}
+
+function testNewRule(view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(editor.value, "#testid", "Selector editor value is as expected");
+
+  info("Escaping from the selector field the change");
+  EventUtils.synthesizeKey("KEY_Escape");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_add-rule.js b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
new file mode 100644
index 0000000000..19315e33e2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_add-rule.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests adding a new rule using the add rule button.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span class="testclass2">This is a span</span>
+  <span class="class1 class2">Multiple classes</span>
+  <span class="class3      class4">Multiple classes</span>
+  <p>Empty<p>
+  <h1 class="asd@@@@a!!!!:::@asd">Invalid characters in class</h1>
+  <h2 id="asd@@@a!!2a">Invalid characters in id</h2>
+  <svg viewBox="0 0 10 10">
+    <circle cx="5" cy="5" r="5" fill="blue"></circle>
+  </svg>
+`;
+
+const TEST_DATA = [
+  { node: "#testid", expected: "#testid" },
+  { node: ".testclass2", expected: ".testclass2" },
+  { node: ".class1.class2", expected: ".class1.class2" },
+  { node: ".class3.class4", expected: ".class3.class4" },
+  { node: "p", expected: "p" },
+  { node: "h1", expected: ".asd\\@\\@\\@\\@a\\!\\!\\!\\!\\:\\:\\:\\@asd" },
+  { node: "h2", expected: "#asd\\@\\@\\@a\\!\\!2a" },
+  { node: "circle", expected: "circle" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    const { node, expected } = data;
+    await selectNode(node, inspector);
+    await addNewRuleAndDismissEditor(inspector, view, expected, 1);
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored.js b/devtools/client/inspector/rules/test/browser_rules_authored.js
new file mode 100644
index 0000000000..406e03d69c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored styles.
+
+async function createTestContent(style) {
+  const html = `<style type="text/css">
+      ${style}
+      </style>
+      <div id="testid" class="testclass">Styled Node</div>`;
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  return view;
+}
+
+add_task(async function () {
+  const view = await createTestContent(
+    "#testid {" +
+      // Invalid property.
+      "  something: random;" +
+      // Invalid value.
+      "  color: orang;" +
+      // Override.
+      "  background-color: blue;" +
+      "  background-color: #f06;" +
+      "} "
+  );
+
+  const elementStyle = view._elementStyle;
+
+  const expected = [
+    { name: "something", overridden: true, isNameValid: false, isValid: false },
+    { name: "color", overridden: true, isNameValid: true, isValid: false },
+    {
+      name: "background-color",
+      overridden: true,
+      isNameValid: true,
+      isValid: true,
+    },
+    {
+      name: "background-color",
+      overridden: false,
+      isNameValid: true,
+      isValid: true,
+    },
+  ];
+
+  const rule = elementStyle.rules[1];
+
+  for (let i = 0; i < expected.length; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, expected[i].name, "Check name for prop " + i);
+    is(
+      prop.overridden,
+      expected[i].overridden,
+      "Check overridden for prop " + i
+    );
+    is(
+      prop.isNameValid(),
+      expected[i].isNameValid,
+      "Check if property name is valid for prop " + i
+    );
+    is(
+      prop.isValid(),
+      expected[i].isValid,
+      "Check if whole declaration is valid for prop " + i
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored_color.js b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
new file mode 100644
index 0000000000..ea163d509d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_color.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored color styles.
+
+/**
+ * Array of test color objects:
+ *   {String} name: name of the used & expected color format.
+ *   {String} id: id of the element that will be created to test this color.
+ *   {String} color: initial value of the color property applied to the test element.
+ *   {String} result: expected value of the color property after edition.
+ */
+const colors = [
+  { name: "hex", id: "test1", color: "#f06", result: "#0f0" },
+  {
+    name: "rgb",
+    id: "test2",
+    color: "rgb(0,128,250)",
+    result: "rgb(0, 255, 0)",
+  },
+  // Test case preservation.
+  { name: "hex", id: "test3", color: "#F06", result: "#0F0" },
+];
+
+add_task(async function () {
+  Services.prefs.setCharPref("devtools.defaultColorUnit", "authored");
+
+  let html = "";
+  for (const { color, id } of colors) {
+    html += `<div id="${id}" style="color: ${color}">Styled Node</div>`;
+  }
+
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(html)
+  );
+
+  const { inspector, view } = await openRuleView();
+
+  for (const color of colors) {
+    const selector = "#" + color.id;
+    await selectNode(selector, inspector);
+
+    const swatch = getRuleViewProperty(
+      view,
+      "element",
+      "color"
+    ).valueSpan.querySelector(".ruleview-colorswatch");
+    const cPicker = view.tooltips.getTooltip("colorPicker");
+    const onColorPickerReady = cPicker.once("ready");
+    swatch.click();
+    await onColorPickerReady;
+
+    await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
+      selector,
+      name: "color",
+      value: "rgb(0, 255, 0)",
+    });
+
+    const spectrum = cPicker.spectrum;
+    const onHidden = cPicker.tooltip.once("hidden");
+    // Validating the color change ends up updating the rule view twice
+    const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+    focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+    await onHidden;
+    await onRuleViewChanged;
+
+    is(
+      getRuleViewPropertyValue(view, "element", "color"),
+      color.result,
+      "changing the color preserved the unit for " + color.name
+    );
+  }
+
+  await gDevTools.closeToolboxForTab(tab);
+  gBrowser.removeCurrentTab();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_authored_override.js b/devtools/client/inspector/rules/test/browser_rules_authored_override.js
new file mode 100644
index 0000000000..d8067d5dc2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_authored_override.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for as-authored styles.
+
+async function createTestContent(style) {
+  const html = `<style type="text/css">
+      ${style}
+      </style>
+      <div id="testid" class="testclass">Styled Node</div>`;
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  return view;
+}
+
+add_task(async function () {
+  const gradientText1 = "(orange, blue);";
+  const gradientText2 = "(pink, teal);";
+
+  const view = await createTestContent(
+    "#testid {" +
+      "  background-image: linear-gradient" +
+      gradientText1 +
+      "  background-image: -ms-linear-gradient" +
+      gradientText2 +
+      "  background-image: linear-gradient" +
+      gradientText2 +
+      "} "
+  );
+
+  const elementStyle = view._elementStyle;
+  const rule = elementStyle.rules[1];
+
+  // Initially the last property should be active.
+  for (let i = 0; i < 3; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, "background-image", "check the property name");
+    is(prop.overridden, i !== 2, "check overridden for " + i);
+  }
+
+  await togglePropStatus(view, rule.textProps[2]);
+
+  // Now the first property should be active.
+  for (let i = 0; i < 3; ++i) {
+    const prop = rule.textProps[i];
+    is(
+      prop.overridden || !prop.enabled,
+      i !== 0,
+      "post-change check overridden for " + i
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js b/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js
new file mode 100644
index 0000000000..4042695eaa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_blob_stylesheet.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct for stylesheet generated
+// with createObjectURL(cssBlob)
+const TEST_URL = URL_ROOT + "doc_blob_stylesheet.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+  is(
+    view.element.querySelectorAll("#noResults").length,
+    0,
+    "The no-results element is not displayed"
+  );
+
+  is(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    2,
+    "There are 2 displayed rules"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
new file mode 100644
index 0000000000..dfba3a63bf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_add.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be added in the class panel
+
+// This array contains the list of test cases. Each test case contains these properties:
+// - {String} textEntered The text to be entered in the field
+// - {Boolean} expectNoMutation Set to true if we shouldn't wait for a DOM mutation
+// - {Array} expectedClasses The expected list of classes to be applied to the DOM and to
+//   be found in the class panel
+const TEST_ARRAY = [
+  {
+    textEntered: "",
+    expectNoMutation: true,
+    expectedClasses: [],
+  },
+  {
+    textEntered: "class",
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "class",
+    expectNoMutation: true,
+    expectedClasses: ["class"],
+  },
+  {
+    textEntered: "a a a a a a a a a a",
+    expectedClasses: ["class", "a"],
+  },
+  {
+    textEntered: "class2 class3",
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "                       ",
+    expectNoMutation: true,
+    expectedClasses: ["class", "a", "class2", "class3"],
+  },
+  {
+    textEntered: "          class4",
+    expectedClasses: ["class", "a", "class2", "class3", "class4"],
+  },
+  {
+    textEntered: "    \t      class5      \t \t\t             ",
+    expectedClasses: ["class", "a", "class2", "class3", "class4", "class5"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,");
+  const { inspector, view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  const textField = inspector.panelDoc.querySelector(
+    "#ruleview-class-panel .add-class"
+  );
+  ok(textField, "The input field exists in the class panel");
+
+  textField.focus();
+
+  let onMutation;
+  for (const { textEntered, expectNoMutation, expectedClasses } of TEST_ARRAY) {
+    if (!expectNoMutation) {
+      onMutation = inspector.once("markupmutation");
+    }
+
+    info(`Enter the test string in the field: ${textEntered}`);
+    for (const key of textEntered.split("")) {
+      const onPreviewMutation = inspector.once("markupmutation");
+      EventUtils.synthesizeKey(key, {}, view.styleWindow);
+      await onPreviewMutation;
+    }
+
+    info("Submit the change and wait for the textfield to become empty");
+    const onEmpty = waitForFieldToBeEmpty(textField);
+    EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+    if (!expectNoMutation) {
+      info("Wait for the DOM to change");
+      await onMutation;
+    }
+
+    await onEmpty;
+
+    info("Check the state of the DOM node");
+    const className = await getContentPageElementAttribute("body", "class");
+    const expectedClassName = expectedClasses.length
+      ? expectedClasses.join(" ")
+      : null;
+    is(className, expectedClassName, "The DOM node has the right className");
+
+    info("Check the content of the class panel");
+    checkClassPanelContent(
+      view,
+      expectedClasses.map(name => {
+        return { name, state: true };
+      })
+    );
+  }
+});
+
+function waitForFieldToBeEmpty(textField) {
+  return waitForSuccess(() => !textField.value);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js
new file mode 100644
index 0000000000..9cd7993244
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_autocomplete.js
@@ -0,0 +1,266 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the autocomplete for the class panel input behaves as expected. The test also
+// checks that we're using the cache to retrieve the data when we can do so, and that the
+// cache gets cleared, and we're getting data from the server, when there's mutation on
+// the page.
+
+const TEST_URI = `${URL_ROOT}doc_class_panel_autocomplete.html`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  const { addEl: textInput } = view.classListPreviewer;
+  await selectNode("#auto-div-id-3", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  textInput.focus();
+
+  info("Type a letter and check that the popup has the expected items");
+  const allClasses = [
+    "auto-body-class-1",
+    "auto-body-class-2",
+    "auto-bold",
+    "auto-cssom-primary-color",
+    "auto-div-class-1",
+    "auto-div-class-2",
+    "auto-html-class-1",
+    "auto-html-class-2",
+    "auto-inline-class-1",
+    "auto-inline-class-2",
+    "auto-inline-class-3",
+    "auto-inline-class-4",
+    "auto-inline-class-5",
+    "auto-stylesheet-class-1",
+    "auto-stylesheet-class-2",
+    "auto-stylesheet-class-3",
+    "auto-stylesheet-class-4",
+    "auto-stylesheet-class-5",
+  ];
+
+  const { autocompletePopup } = view.classListPreviewer;
+  let onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("a", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-class-1", "#auto-div-id-3");
+  await onPopupOpened;
+  await checkAutocompleteItems(
+    autocompletePopup,
+    allClasses,
+    "The autocomplete popup has all the classes used in the DOM and in stylesheets"
+  );
+
+  info(
+    "Test that typing more letters filters the autocomplete popup and uses the cache mechanism"
+  );
+  EventUtils.sendString("uto-b", view.styleWindow);
+  await waitForClassApplied("auto-body-class-1", "#auto-div-id-3");
+
+  await checkAutocompleteItems(
+    autocompletePopup,
+    allClasses.filter(cls => cls.startsWith("auto-b")),
+    "The autocomplete popup was filtered with the content of the input"
+  );
+  ok(true, "The results were retrieved from the cache mechanism");
+
+  info("Test that autocomplete shows up-to-date results");
+  // Modify the content page and assert that the new class is displayed in the
+  // autocomplete if the user types a new letter.
+  const onNewMutation = inspector.inspectorFront.walker.once("new-mutations");
+  await ContentTask.spawn(gBrowser.selectedBrowser, null, async function () {
+    content.document.body.classList.add("auto-body-added-by-script");
+  });
+  await onNewMutation;
+  await waitForClassApplied("auto-body-added-by-script", "body");
+
+  // close & reopen the autocomplete so it picks up the added to another element while autocomplete was opened
+  let onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onPopupClosed;
+
+  // input is now auto-body
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.sendString("ody", view.styleWindow);
+  await onPopupOpened;
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [
+      ...allClasses.filter(cls => cls.startsWith("auto-body")),
+      "auto-body-added-by-script",
+    ].sort(),
+    "The autocomplete popup was filtered with the content of the input"
+  );
+
+  info(
+    "Test that typing a letter that won't match any of the item closes the popup"
+  );
+  // input is now auto-bodyy
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("y", {}, view.styleWindow);
+  await waitForClassApplied("auto-bodyy", "#auto-div-id-3");
+  await onPopupClosed;
+  ok(true, "The popup was closed as expected");
+  await checkAutocompleteItems(autocompletePopup, [], "The popup was cleared");
+
+  info("Clear the input and try to autocomplete again");
+  textInput.select();
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  // Wait a bit so the debounced function can be executed
+  await wait(200);
+
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("a", {}, view.styleWindow);
+  await onPopupOpened;
+
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [...allClasses, "auto-body-added-by-script"].sort(),
+    "The autocomplete popup was updated with the new class added to the DOM"
+  );
+
+  info("Test keyboard shortcut when the popup is displayed");
+  // Escape to hide
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onPopupClosed;
+  ok(true, "The popup was closed when hitting escape");
+
+  // Ctrl + space to show again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, view.styleWindow);
+  await onPopupOpened;
+  ok(true, "Popup was opened again with Ctrl+Space");
+  await checkAutocompleteItems(
+    autocompletePopup,
+    [...allClasses, "auto-body-added-by-script"].sort()
+  );
+
+  // Arrow left to hide
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_ArrowLeft", {}, view.styleWindow);
+  await onPopupClosed;
+  ok(true, "The popup was closed as when hitting ArrowLeft");
+
+  // Arrow right and Ctrl + space to show again, and Arrow Right to accept
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  EventUtils.synthesizeKey(" ", { ctrlKey: true }, view.styleWindow);
+  await onPopupOpened;
+
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+
+  // Backspace to show the list again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupOpened;
+  is(
+    textInput.value,
+    "auto-body-added-by-scrip",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+  await checkAutocompleteItems(
+    autocompletePopup,
+    ["auto-body-added-by-script"],
+    "The autocomplete does show the matching items after hitting backspace"
+  );
+
+  // Enter to accept
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Enter", {}, view.styleWindow);
+  await waitForClassRemoved("auto-body-added-by-scrip");
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "Enter puts the selected item in the input and closes the popup"
+  );
+
+  // Backspace to show again
+  onPopupOpened = autocompletePopup.once("popup-opened");
+  EventUtils.synthesizeKey("KEY_Backspace", {}, view.styleWindow);
+  await waitForClassApplied("auto-body-added-by-script", "#auto-div-id-3");
+  await onPopupOpened;
+  is(
+    textInput.value,
+    "auto-body-added-by-scrip",
+    "ArrowRight puts the selected item in the input and closes the popup"
+  );
+  await checkAutocompleteItems(
+    autocompletePopup,
+    ["auto-body-added-by-script"],
+    "The autocomplete does show the matching items after hitting backspace"
+  );
+
+  // Tab to accept
+  onPopupClosed = autocompletePopup.once("popup-closed");
+  EventUtils.synthesizeKey("KEY_Tab", {}, view.styleWindow);
+  await onPopupClosed;
+  is(
+    textInput.value,
+    "auto-body-added-by-script",
+    "Tab puts the selected item in the input and closes the popup"
+  );
+  await waitForClassRemoved("auto-body-added-by-scrip");
+});
+
+async function checkAutocompleteItems(
+  autocompletePopup,
+  expectedItems,
+  assertionMessage
+) {
+  await waitForSuccess(
+    () =>
+      getAutocompleteItems(autocompletePopup).length === expectedItems.length
+  );
+  const items = getAutocompleteItems(autocompletePopup);
+  const formatList = list => `\n${list.join("\n")}\n`;
+  is(formatList(items), formatList(expectedItems), assertionMessage);
+}
+
+function getAutocompleteItems(autocompletePopup) {
+  return Array.from(autocompletePopup._panel.querySelectorAll("li")).map(
+    el => el.textContent
+  );
+}
+
+async function waitForClassApplied(cls, selector) {
+  info("Wait for class to be applied: " + cls);
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [cls, selector],
+    async (_cls, _selector) => {
+      return ContentTaskUtils.waitForCondition(() =>
+        content.document.querySelector(_selector).classList.contains(_cls)
+      );
+    }
+  );
+  // Wait for debounced functions to be executed
+  await wait(200);
+}
+
+async function waitForClassRemoved(cls) {
+  info("Wait for class to be removed: " + cls);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [cls], async _cls => {
+    return ContentTaskUtils.waitForCondition(
+      () =>
+        !content.document
+          .querySelector("#auto-div-id-3")
+          .classList.contains(_cls)
+    );
+  });
+  // Wait for debounced functions to be executed
+  await wait(200);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
new file mode 100644
index 0000000000..52d490b1d0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_content.js
@@ -0,0 +1,124 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class panel shows the right content when selecting various nodes.
+
+// This array contains the list of test cases. Each test case contains these properties:
+// - {String} inputClassName The className on a node
+// - {Array} expectedClasses The expected list of classes in the class panel
+const TEST_ARRAY = [
+  {
+    inputClassName: "",
+    expectedClasses: [],
+  },
+  {
+    inputClassName: "         a a a a           a a a      a   a",
+    expectedClasses: ["a"],
+  },
+  {
+    inputClassName: "c1 c2 c3 c4 c5",
+    expectedClasses: ["c1", "c2", "c3", "c4", "c5"],
+  },
+  {
+    inputClassName: "a a b b c c a a b b c c",
+    expectedClasses: ["a", "b", "c"],
+  },
+  {
+    inputClassName:
+      "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+    expectedClasses: [
+      "ajdhfkasjhdkjashdkjghaskdgkauhkbdhvliashdlghaslidghasldgliashdglhasli",
+    ],
+  },
+  {
+    inputClassName:
+      "c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 " +
+      "c10 c11 c12 c13 c14 c15 c16 c17 c18 c19 " +
+      "c20 c21 c22 c23 c24 c25 c26 c27 c28 c29 " +
+      "c30 c31 c32 c33 c34 c35 c36 c37 c38 c39 " +
+      "c40 c41 c42 c43 c44 c45 c46 c47 c48 c49",
+    expectedClasses: [
+      "c0",
+      "c1",
+      "c2",
+      "c3",
+      "c4",
+      "c5",
+      "c6",
+      "c7",
+      "c8",
+      "c9",
+      "c10",
+      "c11",
+      "c12",
+      "c13",
+      "c14",
+      "c15",
+      "c16",
+      "c17",
+      "c18",
+      "c19",
+      "c20",
+      "c21",
+      "c22",
+      "c23",
+      "c24",
+      "c25",
+      "c26",
+      "c27",
+      "c28",
+      "c29",
+      "c30",
+      "c31",
+      "c32",
+      "c33",
+      "c34",
+      "c35",
+      "c36",
+      "c37",
+      "c38",
+      "c39",
+      "c40",
+      "c41",
+      "c42",
+      "c43",
+      "c44",
+      "c45",
+      "c46",
+      "c47",
+      "c48",
+      "c49",
+    ],
+  },
+  {
+    inputClassName: "  \n  \n class1  \t   class2 \t\tclass3\t",
+    expectedClasses: ["class1", "class2", "class3"],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div>");
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  for (const { inputClassName, expectedClasses } of TEST_ARRAY) {
+    info(`Apply the '${inputClassName}' className to the node`);
+    const onMutation = inspector.once("markupmutation");
+    await setContentPageElementAttribute("div", "class", inputClassName);
+    await onMutation;
+
+    info("Check the content of the class panel");
+    checkClassPanelContent(
+      view,
+      expectedClasses.map(name => {
+        return { name, state: true };
+      })
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
new file mode 100644
index 0000000000..f43a5fd487
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be toggled in the class panel
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<body class='class1 class2'>");
+  const { view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info(
+    "Click on class1 and check that the checkbox is unchecked and the DOM is updated"
+  );
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  let newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and check the same thing");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: false },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and checks that the class is added again");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("And finally, click on class1 again and checks it is added again");
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: true },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(
+    newClassName,
+    "class1 class2",
+    "The class attribute has been updated in the DOM"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js
new file mode 100644
index 0000000000..24a0dfbcfc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_invalid_nodes.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the class panel shows a message when invalid nodes are selected.
+// text nodes, pseudo-elements, DOCTYPE, comment nodes.
+
+add_task(async function () {
+  await addTab(`data:text/html;charset=utf-8,
+    <body>
+    <style>div::after {content: "test";}</style>
+    <!-- comment -->
+    Some text
+    <div></div>
+    </body>`);
+
+  info("Open the class panel");
+  const { inspector, view } = await openRuleView();
+  view.showClassPanel();
+
+  info("Selecting the DOCTYPE node");
+  const { nodes } = await inspector.walker.children(inspector.walker.rootNode);
+  await selectNode(nodes[0], inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the comment node");
+  const styleNode = await getNodeFront("style", inspector);
+  const commentNode = await inspector.walker.nextSibling(styleNode);
+  await selectNode(commentNode, inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the text node");
+  const textNode = await inspector.walker.nextSibling(commentNode);
+  await selectNode(textNode, inspector);
+  checkMessageIsDisplayed(view);
+
+  info("Selecting the ::after pseudo-element");
+  const divNode = await getNodeFront("div", inspector);
+  const pseudoElement = (await inspector.walker.children(divNode)).nodes[0];
+  await selectNode(pseudoElement, inspector);
+  checkMessageIsDisplayed(view);
+});
+
+function checkMessageIsDisplayed(view) {
+  ok(
+    view.classListPreviewer.classesEl.querySelector(".no-classes"),
+    "The message is displayed"
+  );
+  checkClassPanelContent(view, []);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
new file mode 100644
index 0000000000..4d3340b2ea
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_mutation.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class panel updates on markup mutations
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<div class='c1 c2'>");
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info("Trigger an unrelated mutation on the div (id attribute change)");
+  let onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "id", "test-id");
+  await onMutation;
+
+  info("Check that the panel still contains the right classes");
+  checkClassPanelContent(view, [
+    { name: "c1", state: true },
+    { name: "c2", state: true },
+  ]);
+
+  info("Trigger a class mutation on a different, unknown, node");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("body", "class", "test-class");
+  await onMutation;
+
+  info("Check that the panel still contains the right classes");
+  checkClassPanelContent(view, [
+    { name: "c1", state: true },
+    { name: "c2", state: true },
+  ]);
+
+  info("Trigger a class mutation on the current node");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "class", "c3 c4");
+  await onMutation;
+
+  info("Check that the panel now contains the new classes");
+  checkClassPanelContent(view, [
+    { name: "c3", state: true },
+    { name: "c4", state: true },
+  ]);
+
+  info("Change the state of one of the new classes");
+  await toggleClassPanelCheckBox(view, "c4");
+  checkClassPanelContent(view, [
+    { name: "c3", state: true },
+    { name: "c4", state: false },
+  ]);
+
+  info("Select another node");
+  await selectNode("body", inspector);
+
+  info("Trigger a class mutation on the div");
+  onMutation = view.inspector.once("markupmutation");
+  await setContentPageElementAttribute("div", "class", "c5 c6 c7");
+  await onMutation;
+
+  info(
+    "Go back to the previous node and check the content of the class panel." +
+      "Even if hidden, it should have refreshed when we changed the DOM"
+  );
+  await selectNode("div", inspector);
+  checkClassPanelContent(view, [
+    { name: "c5", state: true },
+    { name: "c6", state: true },
+    { name: "c7", state: true },
+  ]);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js
new file mode 100644
index 0000000000..c4c20e3976
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_state_preserved.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that class states are preserved when switching to other nodes
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8,<body class='class1 class2 class3'><div>"
+  );
+  const { inspector, view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info("With the <body> selected, uncheck class2 and class3 in the panel");
+  await toggleClassPanelCheckBox(view, "class2");
+  await toggleClassPanelCheckBox(view, "class3");
+
+  info("Now select the <div> so the panel gets refreshed");
+  await selectNode("div", inspector);
+  is(
+    view.classPanel.querySelectorAll("[type=checkbox]").length,
+    0,
+    "The panel content doesn't contain any checkboxes anymore"
+  );
+
+  info("Select the <body> again");
+  await selectNode("body", inspector);
+  const checkBoxes = view.classPanel.querySelectorAll("[type=checkbox]");
+
+  is(checkBoxes[0].dataset.name, "class1", "The first checkbox is class1");
+  is(checkBoxes[0].checked, true, "The first checkbox is still checked");
+
+  is(checkBoxes[1].dataset.name, "class2", "The second checkbox is class2");
+  is(checkBoxes[1].checked, false, "The second checkbox is still unchecked");
+
+  is(checkBoxes[2].dataset.name, "class3", "The third checkbox is class3");
+  is(checkBoxes[2].checked, false, "The third checkbox is still unchecked");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js
new file mode 100644
index 0000000000..42b411481f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_toggle.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the class panel can be toggled.
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<body class='class1 class2'>");
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the toggle button exists");
+  const button = inspector.panelDoc.querySelector("#class-panel-toggle");
+  ok(button, "The class panel toggle button exists");
+  is(view.classToggle, button, "The rule-view refers to the right element");
+
+  info("Check that the panel exists and is hidden by default");
+  const panel = inspector.panelDoc.querySelector("#ruleview-class-panel");
+  ok(panel, "The class panel exists");
+  is(view.classPanel, panel, "The rule-view refers to the right element");
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+
+  info("Click on the button to show the panel");
+  button.click();
+  ok(!panel.hasAttribute("hidden"), "The panel is shown");
+  ok(button.classList.contains("checked"), "The button is checked");
+
+  info("Click again to hide the panel");
+  button.click();
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+  ok(!button.classList.contains("checked"), "The button is unchecked");
+
+  info("Open the pseudo-class panel first, then the class panel");
+  view.pseudoClassToggle.click();
+  ok(
+    !view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is shown"
+  );
+  button.click();
+  ok(!panel.hasAttribute("hidden"), "The panel is shown");
+  ok(
+    view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is hidden"
+  );
+
+  info("Click again on the pseudo-class button");
+  view.pseudoClassToggle.click();
+  ok(panel.hasAttribute("hidden"), "The panel is hidden");
+  ok(
+    !view.pseudoClassPanel.hasAttribute("hidden"),
+    "The pseudo-class panel is shown"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorUnit.js b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
new file mode 100644
index 0000000000..d7d92f8a8f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorUnit.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that color selection respects the user pref.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      color: blue;
+    }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  const TESTS = [
+    { name: "hex", result: "#0f0" },
+    { name: "rgb", result: "rgb(0, 255, 0)" },
+  ];
+
+  for (const { name, result } of TESTS) {
+    info("starting test for " + name);
+    Services.prefs.setCharPref("devtools.defaultColorUnit", name);
+
+    const tab = await addTab(
+      "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+    );
+    const { inspector, view } = await openRuleView();
+
+    await selectNode("#testid", inspector);
+    await basicTest(view, name, result);
+
+    await gDevTools.closeToolboxForTab(tab);
+    gBrowser.removeCurrentTab();
+  }
+});
+
+async function basicTest(view, name, result) {
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const swatch = getRuleViewProperty(
+    view,
+    "#testid",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(view, cPicker, [0, 255, 0, 1], {
+    selector: "#testid",
+    name: "color",
+    value: "rgb(0, 255, 0)",
+  });
+
+  const spectrum = cPicker.spectrum;
+  const onHidden = cPicker.tooltip.once("hidden");
+  // Validating the color change ends up updating the rule view twice
+  const onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onRuleViewChanged;
+
+  is(
+    getRuleViewPropertyValue(view, "#testid", "color"),
+    result,
+    "changing the color used the " + name + " unit"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
new file mode 100644
index 0000000000..172acebcaf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation.js
@@ -0,0 +1,159 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation.
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view, toolbox } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(lightButton, "The light color scheme simulation button exists");
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  is(
+    isButtonChecked(lightButton),
+    false,
+    "At first, the light button isn't checked"
+  );
+  is(
+    isButtonChecked(darkButton),
+    false,
+    "At first, the dark button isn't checked"
+  );
+
+  // Define functions checking if the rule view display the expected property.
+  const divHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+  const divHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+  const iframeElHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:cyan");
+  const iframeHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background:darkred");
+
+  info(
+    "Select the div that will change according to conditions in prefered color scheme"
+  );
+  await selectNode("div", inspector);
+  ok(
+    await divHasDefaultStyling(),
+    "The rule view shows the expected initial rule"
+  );
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(() => isButtonChecked(darkButton));
+  ok(true, "The dark button is checked");
+  is(
+    isButtonChecked(lightButton),
+    false,
+    "the light button state didn't change when enabling dark mode"
+  );
+
+  await waitFor(() => divHasDarkSchemeStyling());
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The rules view was updated with the rule from the dark scheme media query"
+  );
+
+  info("Select the node from the remote iframe");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  ok(
+    await iframeHasDarkSchemeStyling(),
+    "The simulation is also applied on the remote iframe"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is displayed"
+  );
+
+  info("Select the top level div again");
+  await selectNode("div", inspector);
+
+  info("Click the light button simulate light mode");
+  lightButton.click();
+  await waitFor(() => isButtonChecked(lightButton));
+  ok(true, "The button has the expected light state");
+  // TODO: Actually simulate light mode. This might require to set the OS-level preference
+  // to dark as the default state might consume the rule from the like scheme media query.
+
+  is(
+    isButtonChecked(darkButton),
+    false,
+    "the dark button was unchecked when enabling light mode"
+  );
+
+  await waitFor(() => divHasDefaultStyling());
+
+  info("Click the light button to disable simulation");
+  lightButton.click();
+  await waitFor(() => !isButtonChecked(lightButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Select the node from the remote iframe again");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeElHasDefaultStyling());
+  ok(true, "The simulation stopped on the remote iframe as well");
+
+  info("Check that reloading keep the selected simulation");
+  await selectNode("div", inspector);
+  darkButton.click();
+  await waitFor(() => divHasDarkSchemeStyling());
+
+  await navigateTo(TEST_URI);
+  await selectNode("div", inspector);
+  await waitFor(() => view.element.children[1]);
+  ok(
+    await divHasDarkSchemeStyling(),
+    "dark mode is still simulated after reloading the page"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is displayed on the rule after reloading"
+  );
+
+  await selectNodeInFrames(["iframe", "html"], inspector);
+  await waitFor(() => iframeHasDarkSchemeStyling());
+  ok(true, "simulation is still applied to the iframe after reloading");
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media (prefers-color-scheme: dark)",
+    "The prefers-color-scheme media query is still displayed on the rule for the element in iframe after reloading"
+  );
+
+  info("Check that closing DevTools reset the simulation");
+  await toolbox.destroy();
+  const matchesPrefersDarkColorSchemeMedia = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
+      return matches;
+    }
+  );
+  is(
+    matchesPrefersDarkColorSchemeMedia,
+    false,
+    "color scheme simulation is disabled after closing DevTools"
+  );
+});
+
+function isButtonChecked(el) {
+  return el.classList.contains("checked");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js
new file mode 100644
index 0000000000..c4995a3cb3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_bfcache.js
@@ -0,0 +1,103 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation.
+const TEST_URI = URL_ROOT_SSL + "doc_media_queries.html";
+
+add_task(async function testBfCacheNavigationWithDevTools() {
+  await addTab(TEST_URI);
+  const { inspector, toolbox } = await openRuleView();
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(async () => isSimulationEnabled());
+  is(await isSimulationEnabled(), true, "color scheme simulation is enabled");
+
+  info("Navigate to a different URL and disable the color simulation");
+  await navigateTo(TEST_URI + "?someparameter");
+  darkButton.click();
+  await waitFor(async () => !(await isSimulationEnabled()));
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  info(
+    "Perform a bfcache navigation and check that the simulation is still disabled"
+  );
+  const waitForDevToolsReload = await watchForDevToolsReload(
+    gBrowser.selectedBrowser
+  );
+  gBrowser.goBack();
+  await waitForDevToolsReload();
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  await toolbox.destroy();
+});
+
+add_task(async function testBfCacheNavigationAfterClosingDevTools() {
+  await addTab(TEST_URI);
+  const { inspector, toolbox } = await openRuleView();
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+  ok(darkButton, "The dark color scheme simulation button exists");
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(async () => isSimulationEnabled());
+  is(await isSimulationEnabled(), true, "color scheme simulation is enabled");
+
+  // Wait for the iframe target to be processed before destroying the toolbox,
+  // to avoid unhandled promise rejections.
+  // The iframe URL starts with https://example.org/document-builder.sjs
+  let onIframeProcessed;
+
+  // Do not wait for the additional target in the noeft-nofis flavor.
+  const isNoEFTNoFis = !isFissionEnabled() && !isEveryFrameTargetEnabled();
+  if (!isNoEFTNoFis) {
+    const iframeURL = "https://example.org/document-builder.sjs";
+    onIframeProcessed = waitForTargetProcessed(toolbox.commands, targetFront =>
+      targetFront.url.startsWith(iframeURL)
+    );
+  }
+
+  info("Navigate to a different URL");
+  await navigateTo(TEST_URI + "?someparameter");
+
+  info("Wait for the iframe target to be processed by target-command");
+  await onIframeProcessed;
+
+  info("Close DevTools to disable the simulation");
+  await toolbox.destroy();
+  await waitFor(async () => !(await isSimulationEnabled()));
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+
+  info(
+    "Perform a bfcache navigation and check that the simulation is still disabled"
+  );
+  const awaitPageShow = BrowserTestUtils.waitForContentEvent(
+    gBrowser.selectedBrowser,
+    "pageshow"
+  );
+  gBrowser.goBack();
+  await awaitPageShow;
+
+  is(await isSimulationEnabled(), false, "color scheme simulation is disabled");
+});
+
+function isSimulationEnabled() {
+  return SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const { matches } = content.matchMedia("(prefers-color-scheme: dark)");
+    return matches;
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js
new file mode 100644
index 0000000000..ba8163f1c0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_meta.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// This test page should follow the overall color scheme.
+// Default colors / background colors should change depending on the scheme.
+const TEST_URI = `https://example.com/document-builder.sjs?html=
+  <!DOCTYPE html>
+    <html lang=en>
+      <meta charset=utf-8>
+      <meta name=color-scheme content="dark light">
+      Hello!
+`;
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector } = await openRuleView();
+
+  // Retrieve light and dark scheme buttons.
+  const lightButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-light-toggle"
+  );
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+
+  // Read the color scheme to know if we should click on the light or dark button
+  // to trigger a change.
+  info("Retrieve the default color scheme");
+  let isDarkScheme = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return content.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
+  );
+
+  // Clicks on the simulation button which triggers a color-scheme change.
+  // If current scheme is light, click on dark and vice-versa.
+  function toggleScheme() {
+    info(`Switch color scheme to ${isDarkScheme ? "light" : "dark"} mode`);
+    isDarkScheme ? lightButton.click() : darkButton.click();
+    isDarkScheme = !isDarkScheme;
+  }
+
+  info("Retrieve the initial (text) color of the page");
+  const initialColor = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      return content.getComputedStyle(content.document.body).color;
+    }
+  );
+
+  toggleScheme();
+
+  info("Wait until the color of the page changes");
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [initialColor],
+    _initialColor => {
+      return ContentTaskUtils.waitForCondition(() => {
+        const newColor = content.getComputedStyle(content.document.body).color;
+        return newColor !== _initialColor;
+      });
+    }
+  );
+
+  toggleScheme();
+
+  info("Wait until the color of the page goes back to the initial value");
+  await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [initialColor],
+    _initialColor => {
+      return ContentTaskUtils.waitForCondition(() => {
+        const newColor = content.getComputedStyle(content.document.body).color;
+        return newColor === _initialColor;
+      });
+    }
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
new file mode 100644
index 0000000000..5045b9c675
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_color_scheme_simulation_rdm.js
@@ -0,0 +1,90 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test color scheme simulation when RDM is toggled
+const TEST_URI = URL_ROOT + "doc_media_queries.html";
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the color scheme simulation buttons exist");
+  const darkButton = inspector.panelDoc.querySelector(
+    "#color-scheme-simulation-dark-toggle"
+  );
+
+  // Define functions checking if the rule view display the expected property.
+  const divHasDefaultStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:yellow");
+  const divHasDarkSchemeStyling = async () =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:darkblue");
+
+  info(
+    "Select the div that will change according to conditions in prefered color scheme"
+  );
+  await selectNode("div", inspector);
+  ok(
+    await divHasDefaultStyling(),
+    "The rule view shows the expected initial rule"
+  );
+
+  info("Open responsive design mode");
+  await openRDM(tab);
+
+  info("Click on the dark button");
+  darkButton.click();
+  await waitFor(() => isButtonChecked(darkButton));
+  ok(true, "The dark button is checked");
+
+  await waitFor(() => divHasDarkSchemeStyling());
+  ok(
+    true,
+    "The rules view was updated with the rule view from the dark scheme media query"
+  );
+
+  info("Close responsive design mode");
+  await closeRDM(tab);
+
+  info("Wait for a bit before checking dark mode is still enabled");
+  await wait(1000);
+  ok(isButtonChecked(darkButton), "button is still checked");
+  ok(
+    await divHasDarkSchemeStyling(),
+    "dark mode color-scheme simulation is still enabled"
+  );
+
+  info("Click the button to disable simulation");
+  darkButton.click();
+  await waitFor(() => !isButtonChecked(darkButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Check that enabling dark-mode simulation before RDM does work as well");
+  darkButton.click();
+  await waitFor(() => isButtonChecked(darkButton));
+  await waitFor(() => divHasDarkSchemeStyling());
+  ok(
+    true,
+    "The rules view was updated with the rule view from the dark scheme media query"
+  );
+
+  info("Open responsive design mode again");
+  await openRDM(tab);
+
+  info("Click the button to disable simulation while RDM is still opened");
+  darkButton.click();
+  await waitFor(() => !isButtonChecked(darkButton));
+  ok(true, "The button isn't checked anymore");
+  await waitFor(() => divHasDefaultStyling());
+  ok(true, "We're not simulating color-scheme anymore");
+
+  info("Close responsive design mode");
+  await closeRDM(tab);
+});
+
+function isButtonChecked(el) {
+  return el.classList.contains("checked");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
new file mode 100644
index 0000000000..3a2c553f13
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_01.js
@@ -0,0 +1,73 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that after a color change, the image preview tooltip in the same
+// property is displayed and positioned correctly.
+// See bug 979292
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: url("chrome://branding/content/icon64.png"), linear-gradient(white, #F06 400px);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  // Bug 1767679 - Use { wait: true } to avoid frequent intermittents on linux.
+  const property = await getRuleViewProperty(view, "body", "background", {
+    wait: true,
+  });
+
+  const value = property.valueSpan;
+  const swatch = value.querySelectorAll(".ruleview-colorswatch")[0];
+  const url = value.querySelector(".theme-link");
+  await testImageTooltipAfterColorChange(swatch, url, view);
+});
+
+async function testImageTooltipAfterColorChange(swatch, url, ruleView) {
+  info("First, verify that the image preview tooltip works");
+  let previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+
+  info("Open the color picker tooltip and change the color");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
+    selector: "body",
+    name: "background-image",
+    value:
+      'url("chrome://branding/content/icon64.png"), linear-gradient(rgb(0, 0, 0), rgb(255, 0, 102) 400px)',
+  });
+
+  const spectrum = picker.spectrum;
+  const onHidden = picker.tooltip.once("hidden");
+
+  // On "RETURN", `ruleview-changed` is triggered when the SwatchBasedEditorTooltip calls
+  // its `commit` method, and then another event is emitted when the editor is hidden.
+  const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModifications;
+
+  info("Verify again that the image preview tooltip works");
+  // After a color change, the property is re-populated, we need to get the new
+  // dom node
+  url = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".theme-link");
+  previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
new file mode 100644
index 0000000000..3262349274
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-and-image-tooltip_02.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that after a color change, opening another tooltip, like the image
+// preview doesn't revert the color change in the rule view.
+// This used to happen when the activeSwatch wasn't reset when the colorpicker
+// would hide.
+// See bug 979292
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red url("chrome://branding/content/icon64.png")
+        no-repeat center center;
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testColorChangeIsntRevertedWhenOtherTooltipIsShown(view);
+});
+
+async function testColorChangeIsntRevertedWhenOtherTooltipIsShown(ruleView) {
+  let swatch = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Open the color picker tooltip and change the color");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, picker, [0, 0, 0, 1], {
+    selector: "body",
+    name: "background-color",
+    value: "rgb(0, 0, 0)",
+  });
+
+  const spectrum = picker.spectrum;
+
+  const onModifications = waitForNEvents(ruleView, "ruleview-changed", 2);
+  const onHidden = picker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModifications;
+
+  info("Open the image preview tooltip");
+  const value = getRuleViewProperty(ruleView, "body", "background").valueSpan;
+  const url = value.querySelector(".theme-link");
+  const previewTooltip = await assertShowPreviewTooltip(ruleView, url);
+
+  info("Image tooltip is shown, verify that the swatch is still correct");
+  swatch = value.querySelector(".ruleview-colorswatch");
+  is(swatch.style.backgroundColor, "black", "The swatch's color is correct");
+  is(swatch.nextSibling.textContent, "black", "The color name is correct");
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, url);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js
new file mode 100644
index 0000000000..0a44f4813f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-appears-on-swatch-click-or-keyboard-activation.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color pickers appear when clicking or using keyboard on color swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const propertiesToTest = ["color", "background-color", "border"];
+
+  for (const property of propertiesToTest) {
+    info(`Test that the colorpicker appears on swatch click for ${property}`);
+    await testColorPickerAppearsOnColorSwatchActivation(view, property);
+
+    info(
+      `Test that swatch is focusable and colorpicker can be activated with a keyboard for ${property}`
+    );
+    await testColorPickerAppearsOnColorSwatchActivation(view, property, true);
+  }
+});
+
+async function testColorPickerAppearsOnColorSwatchActivation(
+  view,
+  property,
+  withKeyboard = false
+) {
+  const value = getRuleViewProperty(view, "body", property).valueSpan;
+  const swatch = value.querySelector(".ruleview-colorswatch");
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  if (withKeyboard) {
+    // Focus on the property value span
+    const doc = value.ownerDocument;
+    value.focus();
+
+    // Tab to focus on the color swatch
+    EventUtils.sendKey("Tab");
+    is(doc.activeElement, swatch, "Swatch successfully receives focus.");
+
+    // Press enter on the swatch to simulate click and open color picker
+    EventUtils.sendKey("Return");
+  } else {
+    swatch.click();
+  }
+  await onColorPickerReady;
+
+  info("The color picker was displayed");
+  ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't displayed");
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
new file mode 100644
index 0000000000..5649d050d2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-commit-on-ENTER.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a color change in the color picker is committed when ENTER is
+// pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "border"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+  await testPressingEnterCommitsChanges(swatch, view);
+});
+
+async function testPressingEnterCommitsChanges(swatch, ruleView) {
+  const cPicker = ruleView.tooltips.getTooltip("colorPicker");
+
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(ruleView, cPicker, [0, 255, 0, 0.5], {
+    selector: "body",
+    name: "border-left-color",
+    value: "rgba(0, 255, 0, 0.5)",
+  });
+
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was updated"
+  );
+  is(
+    getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
+    "2em solid rgba(0, 255, 0, 0.5)",
+    "The text of the border css property was updated"
+  );
+
+  const onModified = ruleView.once("ruleview-changed");
+  const spectrum = cPicker.spectrum;
+  const onHidden = cPicker.tooltip.once("hidden");
+  focusAndSendKey(spectrum.element.ownerDocument.defaultView, "RETURN");
+  await onHidden;
+  await onModified;
+
+  is(
+    await getComputedStyleProperty("body", null, "border-left-color"),
+    "rgba(0, 255, 0, 0.5)",
+    "The element's border was kept after RETURN"
+  );
+  is(
+    swatch.style.backgroundColor,
+    "rgba(0, 255, 0, 0.5)",
+    "The color swatch's background was kept after RETURN"
+  );
+  is(
+    getRuleViewProperty(ruleView, "body", "border").valueSpan.textContent,
+    "2em solid rgba(0, 255, 0, 0.5)",
+    "The text of the border css property was kept after RETURN"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
new file mode 100644
index 0000000000..a0280e7106
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-contrast-ratio.js
@@ -0,0 +1,232 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests color pickers displays expected contrast ratio information.
+
+const TEST_URI = `
+  <style type="text/css">
+    :root {
+      --title-color: #000;
+    }
+
+    body {
+      color: #eee;
+      background-color: #eee;
+    }
+
+    h1 {
+      color: var(--title-color);
+    }
+
+    div {
+      color: var(--title-color);
+      /* Try to to have consistent results over different platforms:
+         - using hardstop-ish gradient so the min and max contrast are computed against white and black background
+         - having min-content width will make sure we get the gradient only cover the text, and not the whole screen width
+      */
+      background-image: linear-gradient(to right, black, white);
+      width: min-content;
+      font-size: 100px;
+    }
+
+    section {
+      color: color-mix(in srgb, blue, var(--title-color) 50%);
+    }
+  </style>
+  <h1>Testing the color picker contrast ratio data</h1>
+  <div>————</div>
+  <section>mixed colors</section>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.color-mix.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await checkColorPickerConstrastData({
+    view,
+    label: "Displays contrast information on color property",
+    ruleViewPropertyEl: getRuleViewProperty(view, "body", "color"),
+    expectVisibleContrast: true,
+    expectedContrastValueResult: "FAIL",
+    expectedContrastValueTitle:
+      "Does not meet WCAG standards for accessible text. Calculated against background: rgba(238,238,238,1)",
+    expectedContrastValueScore: "1.00",
+  });
+
+  await checkColorPickerConstrastData({
+    view,
+    label: "Does not display contrast information on background-color property",
+    ruleViewPropertyEl: getRuleViewProperty(view, "body", "background-color"),
+    expectVisibleContrast: false,
+  });
+
+  await selectNode("h1", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label: "Displays contrast information on color from CSS variable",
+    ruleViewPropertyEl: getRuleViewProperty(view, "h1", "color"),
+    expectVisibleContrast: true,
+    expectedContrastValueResult: "AAA",
+    expectedContrastValueTitle:
+      "Meets WCAG AAA standards for accessible text. Calculated against background: rgba(238,238,238,1)",
+    expectedContrastValueScore: "18.10",
+  });
+
+  await selectNode("div", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Displays range contrast information on color against gradient background",
+    ruleViewPropertyEl: getRuleViewProperty(view, "div", "color"),
+    expectVisibleContrast: true,
+    expectContrastRange: true,
+    expectedMinContrastValueResult: "FAIL",
+    expectedMinContrastValueTitle:
+      "Does not meet WCAG standards for accessible text. Calculated against background: rgba(0,0,0,1)",
+    expectedMinContrastValueScore: "1.00",
+    expectedMaxContrastValueResult: "AAA",
+    expectedMaxContrastValueTitle:
+      "Meets WCAG AAA standards for accessible text. Calculated against background: rgba(255,255,255,1)",
+    expectedMaxContrastValueScore: "19.77",
+  });
+
+  await selectNode("section", inspector);
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Does not displays contrast information on color within color-mix function (#1)",
+    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    swatchIndex: 0,
+    expectVisibleContrast: false,
+  });
+  await checkColorPickerConstrastData({
+    view,
+    label:
+      "Does not displays contrast information on color within color-mix function (#2)",
+    ruleViewPropertyEl: getRuleViewProperty(view, "section", "color"),
+    swatchIndex: 1,
+    expectVisibleContrast: false,
+  });
+});
+
+async function checkColorPickerConstrastData({
+  view,
+  ruleViewPropertyEl,
+  label,
+  swatchIndex = 0,
+  expectVisibleContrast,
+  expectedContrastValueResult,
+  expectedContrastValueTitle,
+  expectedContrastValueScore,
+  expectContrastRange = false,
+  expectedMinContrastValueResult,
+  expectedMinContrastValueTitle,
+  expectedMinContrastValueScore,
+  expectedMaxContrastValueResult,
+  expectedMaxContrastValueTitle,
+  expectedMaxContrastValueScore,
+}) {
+  info(`Checking color picker: "${label}"`);
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const colorSwatch = ruleViewPropertyEl.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[swatchIndex];
+
+  const onColorPickerReady = cPicker.once("ready");
+  colorSwatch.click();
+  await onColorPickerReady;
+  ok(true, "The color picker was displayed");
+
+  const contrastEl = cPickerPanel.querySelector(".spectrum-color-contrast");
+
+  if (!expectVisibleContrast) {
+    ok(
+      !contrastEl.classList.contains("visible"),
+      "Contrast information is not displayed, as expected"
+    );
+    await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+    return;
+  }
+
+  ok(
+    contrastEl.classList.contains("visible"),
+    "Contrast information is displayed"
+  );
+  is(
+    contrastEl.classList.contains("range"),
+    expectContrastRange,
+    `Contrast information ${
+      expectContrastRange ? "has" : "does not have"
+    } a result range`
+  );
+
+  if (expectContrastRange) {
+    const minContrastValueEl = contrastEl.querySelector(
+      ".contrast-ratio-range .contrast-ratio-min .accessibility-contrast-value"
+    );
+    ok(
+      minContrastValueEl.classList.contains(expectedMinContrastValueResult),
+      `min contrast value has expected "${expectedMinContrastValueResult}" class`
+    );
+    // Scores vary from platform to platform, disable for now.
+    // This should be re-enabled as part of  Bug 1780736
+    // is(
+    //   minContrastValueEl.title,
+    //   expectedMinContrastValueTitle,
+    //   "min contrast value has expected title"
+    // );
+    // is(
+    //   minContrastValueEl.textContent,
+    //   expectedMinContrastValueScore,
+    //   "min contrast value shows expected score"
+    // );
+
+    const maxContrastValueEl = contrastEl.querySelector(
+      ".contrast-ratio-range .contrast-ratio-max .accessibility-contrast-value"
+    );
+    ok(
+      maxContrastValueEl.classList.contains(expectedMaxContrastValueResult),
+      `max contrast value has expected "${expectedMaxContrastValueResult}" class`
+    );
+    // Scores vary from platform to platform, disable for now.
+    // This should be re-enabled as part of  Bug 1780736
+    // is(
+    //   maxContrastValueEl.title,
+    //   expectedMaxContrastValueTitle,
+    //   "max contrast value has expected title"
+    // );
+    // is(
+    //   maxContrastValueEl.textContent,
+    //   expectedMaxContrastValueScore,
+    //   "max contrast value shows expected score"
+    // );
+  } else {
+    const contrastValueEl = contrastEl.querySelector(
+      ".accessibility-contrast-value"
+    );
+    ok(
+      contrastValueEl.classList.contains(expectedContrastValueResult),
+      `contrast value has expected "${expectedContrastValueResult}" class`
+    );
+    is(
+      contrastValueEl.title,
+      expectedContrastValueTitle,
+      "contrast value has expected title"
+    );
+    is(
+      contrastValueEl.textContent,
+      expectedContrastValueScore,
+      "contrast value shows expected score"
+    );
+  }
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
new file mode 100644
index 0000000000..c5eef9d670
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-edit-gradient.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changing a color in a gradient css declaration using the tooltip
+// color picker works.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-image: linear-gradient(to left, #f06 25%, #333 95%, #000 100%);
+    }
+  </style>
+  Updating a gradient declaration with the color picker tooltip
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Testing that the colors in gradient properties are parsed correctly");
+  testColorParsing(view);
+
+  info("Testing that changing one of the colors of a gradient property works");
+  await testPickingNewColor(view);
+});
+
+function testColorParsing(view) {
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  ok(ruleEl, "The background-image gradient declaration was found");
+
+  const swatchEls = ruleEl.valueSpan.querySelectorAll(".ruleview-colorswatch");
+  ok(swatchEls, "The color swatch elements were found");
+  is(swatchEls.length, 3, "There are 3 color swatches");
+
+  const colorEls = ruleEl.valueSpan.querySelectorAll(".ruleview-color");
+  ok(colorEls, "The color elements were found");
+  is(colorEls.length, 3, "There are 3 color values");
+
+  const colors = ["#f06", "#333", "#000"];
+  for (let i = 0; i < colors.length; i++) {
+    is(colorEls[i].textContent, colors[i], "The right color value was found");
+  }
+}
+
+async function testPickingNewColor(view) {
+  // Grab the first color swatch and color in the gradient
+  const ruleEl = getRuleViewProperty(view, "body", "background-image");
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+
+  info("Get the color picker tooltip and clicking on the swatch to show it");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  const change = {
+    selector: "body",
+    name: "background-image",
+    value:
+      "linear-gradient(to left, rgb(1, 1, 1) 25%, " +
+      "rgb(51, 51, 51) 95%, rgb(0, 0, 0) 100%)",
+  };
+  await simulateColorPickerChange(view, cPicker, [1, 1, 1, 1], change);
+
+  is(
+    swatchEl.style.backgroundColor,
+    "rgb(1, 1, 1)",
+    "The color swatch's background was updated"
+  );
+  is(colorEl.textContent, "#010101", "The color text was updated");
+  is(
+    await getComputedStyleProperty("body", null, "background-image"),
+    "linear-gradient(to left, rgb(1, 1, 1) 25%, rgb(51, 51, 51) 95%, " +
+      "rgb(0, 0, 0) 100%)",
+    "The gradient has been updated correctly"
+  );
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js
new file mode 100644
index 0000000000..f8012ab56b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-element-without-quads.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+  <style type="text/css">
+    button {
+      color: tomato;
+      background-color: green;
+    }
+  </style>
+  <!-- The space as text context for the button is mandatory here, so that the
+       firstChild of the button is an whitespace text node -->
+  <button id="button-with-no-quads"> </button>
+`;
+
+/**
+ * Check that we can still open the color picker on elements for which getQuads
+ * returns an empty array, which is used to compute the background-color
+ * contrast.
+ */
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const hasEmptyQuads = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [],
+    () => {
+      const button = content.document.querySelector("button");
+      const quads = button.firstChild.getBoxQuads({
+        box: "content",
+        relativeTo: content.document,
+        createFramesForSuppressedWhitespace: false,
+      });
+      return quads.length === 0;
+    }
+  );
+  ok(hasEmptyQuads, "The test element has empty quads");
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("button", inspector);
+
+  const ruleEl = getRuleViewProperty(view, "button", "color");
+  ok(ruleEl, "The color declaration was found");
+
+  const swatchEl = ruleEl.valueSpan.querySelector(".ruleview-colorswatch");
+  const colorEl = ruleEl.valueSpan.querySelector(".ruleview-color");
+  is(colorEl.textContent, "tomato", "The right color value was found");
+
+  info("Open the color picker");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+  swatchEl.click();
+  await onColorPickerReady;
+
+  info("Check that the background color of the button was correctly detected");
+  const contrastEl = cPicker.tooltip.container.querySelector(
+    ".contrast-value-and-swatch.contrast-ratio-single"
+  );
+  ok(
+    contrastEl.style.cssText.includes(
+      "--accessibility-contrast-bg: rgba(0,128,0,1)"
+    ),
+    "The background color contains the expected value"
+  );
+
+  info("Check that the color picker can be used");
+  await simulateColorPickerChange(view, cPicker, [255, 0, 0, 1], {
+    selector: "button",
+    name: "color",
+    value: "rgb(255, 0, 0)",
+  });
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js
new file mode 100644
index 0000000000..53442989c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-element-picker.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that on selecting colorpicker eyedropper stops picker
+// if the picker is already selected.
+
+const TEST_URI = `<style>body{background:red}</style>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { toolbox, view } = await openRuleView();
+  const pickerStopped = toolbox.nodePicker.once("picker-stopped");
+
+  await startPicker(toolbox);
+
+  info("Get the background property from the rule-view");
+  const property = getRuleViewProperty(view, "body", "background");
+  const swatch = property.valueSpan.querySelector(".ruleview-colorswatch");
+  ok(swatch, "Color swatch is displayed for the background property");
+
+  info("Open the eyedropper from the colorpicker tooltip");
+  await openEyedropper(view, swatch);
+
+  info("Waiting for the picker-stopped event to be fired");
+  await pickerStopped;
+
+  ok(true, "picker-stopped event fired after eyedropper was clicked");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
new file mode 100644
index 0000000000..e1d290c005
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-hides-on-tooltip.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the color picker tooltip hides when an image tooltip appears.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  const bgImageSpan = getRuleViewProperty(
+    view,
+    "body",
+    "background-image"
+  ).valueSpan;
+  const uriSpan = bgImageSpan.querySelector(".theme-link");
+
+  const colorPicker = view.tooltips.getTooltip("colorPicker");
+  info("Showing the color picker tooltip by clicking on the color swatch");
+  const onColorPickerReady = colorPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Now showing the image preview tooltip to hide the color picker");
+  const onHidden = colorPicker.tooltip.once("hidden");
+  // Hiding the color picker refreshes the value.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const previewTooltip = await assertShowPreviewTooltip(view, uriSpan);
+  await onHidden;
+  await onRuleViewChanged;
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, uriSpan);
+
+  ok(true, "The color picker closed when the image preview tooltip appeared");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
new file mode 100644
index 0000000000..f641745fd2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-multiple-changes.js
@@ -0,0 +1,110 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the color in the colorpicker tooltip can be changed several times.
+// without causing error in various cases:
+// - simple single-color property (color)
+// - color and image property (background-image)
+// - overridden property
+// See bug 979292 and bug 980225
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: green;
+      background: red url("chrome://branding/content/icon64.png")
+        no-repeat center center;
+    }
+    p {
+      color: blue;
+    }
+  </style>
+  <p>Testing the color picker tooltip!</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await testSimpleMultipleColorChanges(inspector, view);
+  await testComplexMultipleColorChanges(inspector, view);
+});
+
+async function testSimpleMultipleColorChanges(inspector, ruleView) {
+  await selectNode("p", inspector);
+
+  info("Getting the <p> tag's color property");
+  const swatch = getRuleViewProperty(
+    ruleView,
+    "p",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Opening the color picker");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Changing the color several times");
+  const colors = [
+    { rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)" },
+    { rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)" },
+    { rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)" },
+  ];
+  for (const { rgba, computed } of colors) {
+    await simulateColorPickerChange(ruleView, picker, rgba, {
+      selector: "p",
+      name: "color",
+      value: computed,
+    });
+  }
+
+  is(
+    await getComputedStyleProperty("p", null, "color"),
+    "rgb(200, 200, 200)",
+    "The color of the P tag is correct"
+  );
+}
+
+async function testComplexMultipleColorChanges(inspector, ruleView) {
+  await selectNode("body", inspector);
+
+  info("Getting the <body> tag's color property");
+  const swatch = getRuleViewProperty(
+    ruleView,
+    "body",
+    "background"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  info("Opening the color picker");
+  const picker = ruleView.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  info("Changing the color several times");
+  const colors = [
+    { rgba: [0, 0, 0, 1], computed: "rgb(0, 0, 0)" },
+    { rgba: [100, 100, 100, 1], computed: "rgb(100, 100, 100)" },
+    { rgba: [200, 200, 200, 1], computed: "rgb(200, 200, 200)" },
+  ];
+  for (const { rgba, computed } of colors) {
+    await simulateColorPickerChange(ruleView, picker, rgba, {
+      selector: "body",
+      name: "background-color",
+      value: computed,
+    });
+  }
+
+  info("Closing the color picker");
+  await hideTooltipAndWaitForRuleViewChanged(picker, ruleView);
+
+  is(
+    await getComputedStyleProperty("p", null, "color"),
+    "rgb(200, 200, 200)",
+    "The color of the P tag is still correct"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
new file mode 100644
index 0000000000..f992e93094
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-release-outside-frame.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color pickers stops following the pointer if the pointer is
+// released outside the tooltip frame (bug 1160720).
+
+const TEST_URI = "<body style='color: red'>Test page for bug 1160720";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const cSwatch = getRuleViewProperty(
+    view,
+    "element",
+    "color"
+  ).valueSpan.querySelector(".ruleview-colorswatch");
+
+  const picker = await openColorPickerForSwatch(cSwatch, view);
+  const spectrum = picker.spectrum;
+  const change = spectrum.once("changed");
+
+  info("Pressing mouse down over color picker.");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    spectrum.dragger,
+    {
+      type: "mousedown",
+    },
+    spectrum.dragger.ownerDocument.defaultView
+  );
+  await onRuleViewChanged;
+
+  const value = await change;
+  info(`Color changed to ${value} on mousedown.`);
+
+  // If the mousemove below fails to detect that the button is no longer pressed
+  // the spectrum will update and emit changed event synchronously after calling
+  // synthesizeMouse so this handler is executed before the test ends.
+  spectrum.once("changed", newValue => {
+    is(newValue, value, "Value changed on mousemove without a button pressed.");
+  });
+
+  // Releasing the button pressed by mousedown above on top of a different frame
+  // does not make sense in this test as EventUtils doesn't preserve the context
+  // i.e. the buttons that were pressed down between events.
+
+  info("Moving mouse over color picker without any buttons pressed.");
+
+  EventUtils.synthesizeMouse(
+    spectrum.dragger,
+    10,
+    10,
+    {
+      // -1 = no buttons are pressed down
+      button: -1,
+      type: "mousemove",
+    },
+    spectrum.dragger.ownerDocument.defaultView
+  );
+});
+
+async function openColorPickerForSwatch(swatch, view) {
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  ok(true, "The color picker was shown on click of the color swatch");
+
+  return cPicker;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
new file mode 100644
index 0000000000..47a39d0518
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-revert-on-ESC.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a color change in the color picker is reverted when ESC is
+// pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-color: #EDEDED;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const { swatch, propEditor, cPicker } = await openColorPickerAndSelectColor(
+    view,
+    1,
+    0,
+    [0, 0, 0, 1],
+    {
+      selector: "body",
+      name: "background-color",
+      value: "rgb(0, 0, 0)",
+    }
+  );
+
+  is(
+    swatch.style.backgroundColor,
+    "rgb(0, 0, 0)",
+    "The color swatch's background was updated"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "#000",
+    "The text of the background-color css property was updated"
+  );
+
+  const spectrum = cPicker.spectrum;
+
+  info("Pressing ESCAPE to close the tooltip");
+  const onHidden = cPicker.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", spectrum.element.ownerDocument.defaultView);
+  await onHidden;
+  await onModifications;
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "background-color",
+    "rgb(237, 237, 237)"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "#EDEDED",
+    "Got expected property value."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js
new file mode 100644
index 0000000000..74b483172d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-swatch-displayed.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that color swatches are displayed next to colors in the rule-view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+    * {
+      color: blue;
+      background: linear-gradient(
+          to right,
+          #f00,
+          #f008,
+          #00ff00,
+          #00ff0080,
+          rgb(31,170,217),
+          rgba(31,170,217,.5),
+          hsl(5, 5%, 5%),
+          hsla(5, 5%, 5%, 0.25),
+          #F00,
+          #F008,
+          #00FF00,
+          #00FF0080,
+          RGB(31,170,217),
+          RGBA(31,170,217,.5),
+          HSL(5, 5%, 5%),
+          HSLA(5, 5%, 5%, 0.25)
+        ),
+        radial-gradient(
+          red,
+          blue
+        ),
+        conic-gradient(
+          from 90deg at 0 0,
+          lemonchiffon,
+          peachpuff
+        ),
+        repeating-linear-gradient(blue, pink),
+        repeating-radial-gradient(limegreen, bisque),
+        repeating-conic-gradient(chocolate, olive);
+      box-shadow: inset 0 0 2px 20px red, inset 0 0 2px 40px blue;
+      filter: drop-shadow(2px 2px 2px salmon);
+      text-shadow: 2px 2px color-mix(
+        in srgb,
+        color-mix(in srgb, tomato 30%, #FA8072),
+        hsla(5, 5%, 5%, 0.25) 5%
+      );
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+// Tests that properties in the rule-view contain color swatches.
+// Each entry in the test array should contain:
+// {
+//   selector: the rule-view selector to look for the property in
+//   propertyName: the property to test
+//   nb: the number of color swatches this property should have
+// }
+const TESTS = [
+  { selector: "body", propertyName: "color", nb: 1 },
+  { selector: "body", propertyName: "background-color", nb: 1 },
+  { selector: "body", propertyName: "border", nb: 1 },
+  { selector: "*", propertyName: "color", nb: 1 },
+  { selector: "*", propertyName: "background", nb: 26 },
+  { selector: "*", propertyName: "box-shadow", nb: 2 },
+  { selector: "*", propertyName: "filter", nb: 1 },
+  { selector: "*", propertyName: "text-shadow", nb: 3 },
+];
+
+add_task(async function () {
+  await pushPref("layout.css.color-mix.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  for (const { selector, propertyName, nb } of TESTS) {
+    info(
+      "Looking for color swatches in property " +
+        propertyName +
+        " in selector " +
+        selector
+    );
+
+    const prop = (
+      await getRuleViewProperty(view, selector, propertyName, { wait: true })
+    ).valueSpan;
+    const swatches = prop.querySelectorAll(".ruleview-colorswatch");
+
+    ok(swatches.length, "Swatches found in the property");
+    is(swatches.length, nb, "Correct number of swatches found in the property");
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js
new file mode 100644
index 0000000000..6e28426b20
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-works-with-css-vars.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests color pickers work with CSS variables.
+
+const TEST_URI = `
+  <style type="text/css">
+    :root {
+      --main-bg-color: coral;
+    }
+    body {
+      color: red;
+      background-color: var(--main-bg-color);
+      border: 1px solid var(--main-bg-color);
+    }
+  </style>
+  Testing the color picker tooltip with CSS variables!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  const propertiesToTest = ["color", "background-color", "border"];
+
+  for (const property of propertiesToTest) {
+    info(`Test that the colorpicker appears on swatch click for ${property}`);
+    await testColorPickerAppearsOnColorSwatchActivation(view, property);
+
+    info(
+      `Test that swatch is focusable and colorpicker can be activated with a keyboard for ${property}`
+    );
+    await testColorPickerAppearsOnColorSwatchActivation(view, property, true);
+  }
+});
+
+async function testColorPickerAppearsOnColorSwatchActivation(
+  view,
+  property,
+  withKeyboard = false
+) {
+  const value = (
+    await getRuleViewProperty(view, "body", property, { wait: true })
+  ).valueSpan;
+  const swatch = value.querySelector(".ruleview-colorswatch");
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  ok(cPicker, "The rule-view has an expected colorPicker widget");
+
+  const cPickerPanel = cPicker.tooltip.panel;
+  ok(cPickerPanel, "The XUL panel for the color picker exists");
+
+  const onColorPickerReady = cPicker.once("ready");
+  if (withKeyboard) {
+    // Focus on the property value span
+    const doc = value.ownerDocument;
+    value.focus();
+
+    // Tab to focus on the color swatch
+    EventUtils.sendKey("Tab");
+    is(doc.activeElement, swatch, "Swatch successfully receives focus.");
+
+    // Press enter on the swatch to simulate click and open color picker
+    EventUtils.sendKey("Return");
+  } else {
+    swatch.click();
+  }
+  await onColorPickerReady;
+
+  info("The color picker was displayed");
+  ok(!inplaceEditor(swatch.parentNode), "The inplace editor wasn't displayed");
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js b/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js
new file mode 100644
index 0000000000..36ef6f15cb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_colorpicker-wrap-focus.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that focus stays inside color picker on TAB and Shift + TAB
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: red;
+      background-color: #ededed;
+      background-image: url(chrome://branding/content/icon64.png);
+      border: 2em solid rgba(120, 120, 120, .5);
+    }
+  </style>
+  Testing the color picker tooltip!
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Focus on the property value span");
+  getRuleViewProperty(view, "body", "color").valueSpan.focus();
+
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = cPicker.once("ready");
+
+  info(
+    "Tab to focus on the color swatch and press enter to simulate a click event"
+  );
+  EventUtils.sendKey("Tab");
+  EventUtils.sendKey("Return");
+
+  await onColorPickerReady;
+  const doc = cPicker.spectrum.element.ownerDocument;
+  ok(
+    doc.activeElement.classList.contains("spectrum-color"),
+    "Focus is initially on the spectrum dragger when color picker is shown."
+  );
+
+  info("Test that tabbing should move focus to the next focusable elements.");
+  testFocusOnTab(doc, "devtools-button");
+  testFocusOnTab(doc, "spectrum-hue-input");
+  testFocusOnTab(doc, "spectrum-alpha-input");
+  testFocusOnTab(doc, "learn-more");
+
+  info(
+    "Test that tabbing on the last element wraps focus to the first element."
+  );
+  testFocusOnTab(doc, "spectrum-color");
+
+  info(
+    "Test that shift tabbing on the first element wraps focus to the last element."
+  );
+  testFocusOnTab(doc, "learn-more", true);
+
+  info(
+    "Test that shift tabbing should move focus to the previous focusable elements."
+  );
+  testFocusOnTab(doc, "spectrum-alpha-input", true);
+  testFocusOnTab(doc, "spectrum-hue-input", true);
+  testFocusOnTab(doc, "devtools-button", true);
+  testFocusOnTab(doc, "spectrum-color", true);
+
+  await hideTooltipAndWaitForRuleViewChanged(cPicker, view);
+});
+
+function testFocusOnTab(doc, expectedClass, shiftKey = false) {
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey });
+  ok(
+    doc.activeElement.classList.contains(expectedClass),
+    "Focus is on the correct element."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js
new file mode 100644
index 0000000000..d9333fe40c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_01.js
@@ -0,0 +1,148 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names are autocompleted and cycled correctly when
+// editing an existing property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//  ]
+
+const OPEN = true,
+  SELECTED = true;
+var testData = [
+  ["VK_RIGHT", "font", !OPEN, !SELECTED],
+  ["-", "font-size", OPEN, SELECTED],
+  ["f", "font-family", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "font-f", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "font-", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "font", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "fon", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "fo", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "f", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["d", "display", OPEN, SELECTED],
+  ["VK_DOWN", "dominant-baseline", OPEN, SELECTED],
+  ["VK_DOWN", "d", OPEN, SELECTED],
+  ["VK_DOWN", "direction", OPEN, SELECTED],
+  ["VK_DOWN", "display", OPEN, SELECTED],
+  ["VK_UP", "direction", OPEN, SELECTED],
+  ["VK_UP", "d", OPEN, SELECTED],
+  ["VK_UP", "dominant-baseline", OPEN, SELECTED],
+  ["VK_UP", "display", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["i", "display", OPEN, SELECTED],
+  ["s", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["VK_HOME", "", !OPEN, !SELECTED],
+  ["VK_END", "", !OPEN, !SELECTED],
+  ["VK_PAGE_UP", "", !OPEN, !SELECTED],
+  ["VK_PAGE_DOWN", "", !OPEN, !SELECTED],
+  ["d", "display", OPEN, SELECTED],
+  ["VK_HOME", "display", !OPEN, !SELECTED],
+  ["VK_END", "display", !OPEN, !SELECTED],
+  // Press right key to ensure caret move to end of the input on Mac OS since
+  // Mac OS doesn't move caret after pressing HOME / END.
+  ["VK_RIGHT", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "displa", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "displ", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "disp", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["f", "font-size", OPEN, SELECTED],
+  ["i", "filter", OPEN, SELECTED],
+  ["VK_LEFT", "filter", !OPEN, !SELECTED],
+  ["VK_LEFT", "filter", !OPEN, !SELECTED],
+  ["i", "fiilter", !OPEN, !SELECTED],
+  ["VK_ESCAPE", null, !OPEN, !SELECTED],
+];
+
+const TEST_URI = "<h1 style='font: 24px serif'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyname"
+  )[0];
+  const editor = await focusEditableField(view, propertyName);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    if (!testData[i].length) {
+      continue;
+    }
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion([key, completion, open, selected], editor, view) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  // Listening for the right event that will tell us when the key has been
+  // entered and processed.
+  let onSuggest;
+  if (/(left|right|back_space|escape|home|end|page_up|page_down)/gi.test(key)) {
+    info(
+      "Adding event listener for " +
+        "left|right|back_space|escape|home|end|page_up|page_down keys"
+    );
+    onSuggest = once(editor.input, "keypress");
+  } else {
+    info("Waiting for after-suggest event on the editor");
+    onSuggest = editor.once("after-suggest");
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key);
+  EventUtils.synthesizeKey(key, {}, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onSuggest;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
new file mode 100644
index 0000000000..0d0546bc8d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-existing-property_02.js
@@ -0,0 +1,128 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing existing properties in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+var testData = [
+  ["b", {}, "beige", OPEN, SELECTED, CHANGE],
+  ["l", {}, "black", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "blanchedalmond", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "blue", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "blue", !OPEN, !SELECTED, !CHANGE],
+  [" ", {}, "blue aliceblue", OPEN, SELECTED, CHANGE],
+  ["!", {}, "blue !important", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue !", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue ", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "blue", !OPEN, !SELECTED, CHANGE],
+  ["VK_TAB", { shiftKey: true }, "color", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
+  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "blue", !OPEN, !SELECTED, CHANGE],
+  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["VK_RETURN", {}, null, !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URI = "<h1 style='color: red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  const prop = getTextProperty(view, 0, { color: "red" });
+
+  info("Focusing the css property editable value");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  // The key might have been a TAB or shift-TAB, in which case the editor will
+  // be a new one
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js
new file mode 100644
index 0000000000..139c825db0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_01.js
@@ -0,0 +1,112 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names are autocompleted and cycled correctly when
+// creating a new property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//  ]
+const OPEN = true,
+  SELECTED = true;
+var testData = [
+  ["d", "display", OPEN, SELECTED],
+  ["VK_DOWN", "dominant-baseline", OPEN, SELECTED],
+  ["VK_DOWN", "d", OPEN, SELECTED],
+  ["VK_DOWN", "direction", OPEN, SELECTED],
+  ["VK_DOWN", "display", OPEN, SELECTED],
+  ["VK_UP", "direction", OPEN, SELECTED],
+  ["VK_UP", "d", OPEN, SELECTED],
+  ["VK_UP", "dominant-baseline", OPEN, SELECTED],
+  ["VK_UP", "display", OPEN, SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["i", "display", OPEN, SELECTED],
+  ["s", "display", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "dis", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "di", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "d", !OPEN, !SELECTED],
+  ["VK_BACK_SPACE", "", !OPEN, !SELECTED],
+  ["f", "font-size", OPEN, SELECTED],
+  ["i", "filter", OPEN, SELECTED],
+  ["VK_ESCAPE", null, !OPEN, !SELECTED],
+];
+
+const TEST_URI = "<h1 style='border: 1px solid red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    if (!testData[i].length) {
+      continue;
+    }
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, completion, open, isSelected],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + isSelected);
+
+  let onSuggest;
+
+  if (/(right|back_space|escape)/gi.test(key)) {
+    info("Adding event listener for right|back_space|escape keys");
+    onSuggest = once(editor.input, "keypress");
+  } else {
+    info("Waiting for after-suggest event on the editor");
+    onSuggest = editor.once("after-suggest");
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key);
+  EventUtils.synthesizeKey(key, {}, view.styleWindow);
+
+  await onSuggest;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, isSelected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
new file mode 100644
index 0000000000..60df90e410
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_02.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property names and values are autocompleted and cycled
+// correctly when editing new properties in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+const testData = [
+  ["d", {}, "display", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "", OPEN, !SELECTED, CHANGE],
+  ["VK_DOWN", {}, "block", OPEN, SELECTED, CHANGE],
+  ["n", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["VK_TAB", { shiftKey: true }, "display", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", !OPEN, !SELECTED, !CHANGE],
+  ["o", {}, "overflow", OPEN, SELECTED, !CHANGE],
+  ["u", {}, "outline", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "outline-color", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "none", !OPEN, !SELECTED, CHANGE],
+  ["r", {}, "rebeccapurple", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "red", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rgb", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rgba", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "rosybrown", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "royalblue", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "royalblue", !OPEN, !SELECTED, !CHANGE],
+  [" ", {}, "royalblue aliceblue", OPEN, SELECTED, CHANGE],
+  ["!", {}, "royalblue !important", !OPEN, !SELECTED, CHANGE],
+  ["VK_ESCAPE", {}, null, !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URI = `
+  <style type="text/css">
+    h1 {
+      border: 1px solid red;
+    }
+  </style>
+  <h1>Test element</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion after 1st page load");
+  await runAutocompletionTest(toolbox, inspector, view);
+
+  info("Test autocompletion after page navigation");
+  await reloadBrowser();
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing a new css property editable property");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Starting to test for css property completion");
+  for (let i = 0; i < testData.length; i++) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(testData[i], editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  info("Checking the state");
+  if (completion !== null) {
+    // The key might have been a TAB or shift-TAB, in which case the editor will
+    // be a new one
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js
new file mode 100644
index 0000000000..4f5577a21e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for a case where completing gave the wrong answer.
+// See bug 1179318.
+
+const TEST_URI = "<h1 style='color: red'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion for background-color");
+  await runAutocompletionTest(toolbox, inspector, view);
+});
+
+async function runAutocompletionTest(toolbox, inspector, view) {
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the new property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info('Sending "background" to the editable field');
+  for (const key of "background") {
+    const onSuggest = editor.once("after-suggest");
+    EventUtils.synthesizeKey(key, {}, view.styleWindow);
+    await onSuggest;
+  }
+
+  const itemIndex = 4;
+
+  const bgcItem = editor.popup.getItemAtIndex(itemIndex);
+  is(
+    bgcItem.label,
+    "background-color",
+    "check the expected completion element"
+  );
+
+  editor.popup.selectedIndex = itemIndex;
+
+  const node = editor.popup._list.childNodes[itemIndex];
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  is(editor.input.value, "background-color", "Correct value is autocompleted");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js
new file mode 100644
index 0000000000..9002f89822
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_04.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a new property editor supports the following flow:
+// - type first character of property name
+// - select an autocomplete suggestion !!with a mouse click!!
+// - press RETURN to move to the property value
+// - blur the input to commit
+
+const TEST_URI =
+  "<style>.title {color: red;}</style>" + "<h1 class=title>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the new property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info('Sending "background" to the editable field.');
+  for (const key of "background") {
+    const onSuggest = editor.once("after-suggest");
+    EventUtils.synthesizeKey(key, {}, view.styleWindow);
+    await onSuggest;
+  }
+
+  const itemIndex = 4;
+  const bgcItem = editor.popup.getItemAtIndex(itemIndex);
+  is(
+    bgcItem.label,
+    "background-color",
+    "Check the expected completion element is background-color."
+  );
+  editor.popup.selectItemAtIndex(itemIndex);
+
+  info("Select the background-color suggestion with a mouse click.");
+  const onSuggest = editor.once("after-suggest");
+  const node = editor.popup.elements.get(bgcItem);
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  await onSuggest;
+  is(editor.input.value, "background-color", "Correct value is autocompleted");
+
+  info("Press RETURN to move the focus to a property value editor.");
+  let onModifications = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onModifications;
+
+  // Getting the new value editor after focus
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const textProp = ruleEditor.rule.textProps[1];
+
+  is(ruleEditor.rule.textProps.length, 2, "Created a new text property.");
+  is(ruleEditor.propertyList.children.length, 2, "Created a property editor.");
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "Editing the value span now."
+  );
+
+  info("Entering a value and blurring the field to expect a rule change");
+  onModifications = view.once("ruleview-changed");
+
+  EventUtils.sendString("#F00");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onModifications;
+
+  is(textProp.value, "#F00", "Text prop should have been changed.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
new file mode 100644
index 0000000000..a899b03c7a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
@@ -0,0 +1,140 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the behaviour of the CSS autocomplete for CSS value displayed on
+// multiple lines. Expected behavior is:
+// - UP/DOWN should navigate in the input and not increment/decrement numbers
+// - typing a new value should still trigger the autocomplete
+// - UP/DOWN when the autocomplete popup is displayed should cycle through
+//   suggestions
+
+const LONG_CSS_VALUE =
+  "transparent linear-gradient(0deg, blue 0%, white 5%, red 10%, blue 15%, " +
+  "white 20%, red 25%, blue 30%, white 35%, red 40%, blue 45%, white 50%, " +
+  "red 55%, blue 60%, white 65%, red 70%, blue 75%, white 80%, red 85%, " +
+  "blue 90%, white 95% ) repeat scroll 0% 0%";
+
+const EXPECTED_CSS_VALUE = LONG_CSS_VALUE.replace("95%", "95%, red");
+
+const TEST_URI = `<style>
+    .title {
+      background: ${LONG_CSS_VALUE};
+    }
+  </style>
+  <h1 class=title>Header</h1>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the property editable field");
+  const prop = getTextProperty(view, 1, { background: LONG_CSS_VALUE });
+
+  // Calculate offsets to click in the middle of the first box quad.
+  const rect = prop.editor.valueSpan.getBoundingClientRect();
+  const firstQuadBounds = prop.editor.valueSpan.getBoxQuads()[0].getBounds();
+  // For a multiline value, the first quad left edge is not aligned with the
+  // bounding rect left edge. The offsets expected by focusEditableField are
+  // relative to the bouding rectangle, so we need to translate the x-offset.
+  const x = firstQuadBounds.left - rect.left + firstQuadBounds.width / 2;
+  // The first quad top edge is aligned with the bounding top edge, no
+  // translation needed here.
+  const y = firstQuadBounds.height / 2;
+
+  info("Focusing the css property editable value");
+  const editor = await focusEditableField(view, prop.editor.valueSpan, x, y);
+
+  info("Moving the caret next to a number");
+  let pos = editor.input.value.indexOf("0deg") + 1;
+  editor.input.setSelectionRange(pos, pos);
+  is(
+    editor.input.value[editor.input.selectionStart - 1],
+    "0",
+    "Input caret is after a 0"
+  );
+
+  info("Check that UP/DOWN navigates in the input, even when next to a number");
+  EventUtils.synthesizeKey("VK_DOWN", {}, view.styleWindow);
+  ok(editor.input.selectionStart !== pos, "Input caret moved");
+  is(editor.input.value, LONG_CSS_VALUE, "Input value was not decremented.");
+
+  info("Move the caret to the end of the gradient definition.");
+  pos = editor.input.value.indexOf("95%") + 3;
+  editor.input.setSelectionRange(pos, pos);
+
+  info('Sending ", re" to the editable field.');
+  for (const key of ", re") {
+    await synthesizeKeyForAutocomplete(key, editor, view.styleWindow);
+  }
+
+  info("Check the autocomplete can still be displayed.");
+  ok(editor.popup && editor.popup.isOpen, "Autocomplete popup is displayed.");
+  is(
+    editor.popup.selectedIndex,
+    0,
+    "Autocomplete has an item selected by default"
+  );
+
+  let item = editor.popup.getItemAtIndex(editor.popup.selectedIndex);
+  is(
+    item.label,
+    "rebeccapurple",
+    "Check autocomplete displays expected value."
+  );
+
+  info("Check autocomplete suggestions can be cycled using UP/DOWN arrows.");
+
+  await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 1, "Using DOWN cycles autocomplete values.");
+  await synthesizeKeyForAutocomplete("VK_DOWN", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 2, "Using DOWN cycles autocomplete values.");
+  await synthesizeKeyForAutocomplete("VK_UP", editor, view.styleWindow);
+  is(editor.popup.selectedIndex, 1, "Using UP cycles autocomplete values.");
+  item = editor.popup.getItemAtIndex(editor.popup.selectedIndex);
+  is(item.label, "red", "Check autocomplete displays expected value.");
+
+  info("Select the background-color suggestion with a mouse click.");
+  let onRuleviewChanged = view.once("ruleview-changed");
+  const onSuggest = editor.once("after-suggest");
+
+  const node = editor.popup._list.childNodes[editor.popup.selectedIndex];
+  EventUtils.synthesizeMouseAtCenter(node, {}, editor.popup._window);
+
+  view.debounce.flush();
+  await onSuggest;
+  await onRuleviewChanged;
+
+  is(
+    editor.input.value,
+    EXPECTED_CSS_VALUE,
+    "Input value correctly autocompleted"
+  );
+
+  info("Press ESCAPE to leave the input.");
+  onRuleviewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onRuleviewChanged;
+});
+
+/**
+ * Send the provided key to the currently focused input of the provided window.
+ * Wait for the editor to emit "after-suggest" to make sure the autocompletion
+ * process is finished.
+ *
+ * @param {String} key
+ *        The key to send to the input.
+ * @param {InplaceEditor} editor
+ *        The inplace editor which owns the focused input.
+ * @param {Window} win
+ *        Window in which the key event will be dispatched.
+ */
+async function synthesizeKeyForAutocomplete(key, editor, win) {
+  const onSuggest = editor.once("after-suggest");
+  EventUtils.synthesizeKey(key, {}, win);
+  await onSuggest;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js b/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js
new file mode 100644
index 0000000000..9a3348783f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-on-empty.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the suggest completion popup behavior of CSS property field.
+
+const TEST_URI = "<h1 style='color: lime'>Header</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  const prop = getTextProperty(view, 0, { color: "lime" });
+
+  info("Test with css property value field");
+  await testCompletion(view, prop.editor.valueSpan, true);
+
+  info("Test with css property name field");
+  await testCompletion(view, prop.editor.nameSpan, false);
+});
+
+async function testCompletion(view, target, isExpectedOpenPopup) {
+  const editor = await focusEditableField(view, target);
+
+  info(
+    "Check the suggest completion popup visibility after clearing the field"
+  );
+
+  const onChanged = view.once("ruleview-changed");
+  const popupEvent = isExpectedOpenPopup ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen === isExpectedOpenPopup
+      ? Promise.resolve()
+      : once(view.popup, popupEvent);
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, view.styleWindow);
+
+  // Flush the debounce to update the preview text.
+  view.debounce.flush();
+
+  await Promise.all([onChanged, onPopupEvent]);
+  is(
+    editor.popup.isOpen,
+    isExpectedOpenPopup,
+    "The popup visibility is correct"
+  );
+
+  if (editor.popup.isOpen) {
+    info("Close the suggest completion popup");
+    const closingEvents = [
+      view.once("ruleview-changed"),
+      once(view.popup, "popup-closed"),
+    ];
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+    await Promise.all(closingEvents);
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js b/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js
new file mode 100644
index 0000000000..6f22ab0d17
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-popup-hidden-after-navigation.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the ruleview autocomplete popup is hidden after page navigation.
+
+const TEST_URI = "<h1 style='font: 24px serif'></h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test autocompletion popup is hidden after page navigation");
+
+  info("Selecting the test node");
+  await selectNode("h1", inspector);
+
+  info("Focusing the css property editable field");
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyname"
+  )[0];
+  const editor = await focusEditableField(view, propertyName);
+
+  info("Pressing key VK_DOWN");
+  const onSuggest = once(editor.input, "keypress");
+  const onPopupOpened = once(editor.popup, "popup-opened");
+
+  EventUtils.synthesizeKey("VK_DOWN", {}, view.styleWindow);
+
+  info("Waiting for autocomplete popup to be displayed");
+  await onSuggest;
+  await onPopupOpened;
+
+  ok(view.popup && view.popup.isOpen, "Popup should be opened");
+
+  info("Reloading the page");
+  await reloadBrowser();
+
+  ok(!(view.popup && view.popup.isOpen), "Popup should be closed");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js b/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js
new file mode 100644
index 0000000000..2d81a770ff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-shortcut.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the shortcut key for the suggest completion popup.
+
+const TEST_URI = "<h1 style='colo: lim'>Header</h1>";
+const TEST_SHORTCUTS = [
+  {
+    key: " ",
+    modifiers: { ctrlKey: true },
+  },
+  {
+    key: "VK_DOWN",
+    modifiers: {},
+  },
+];
+
+add_task(async function () {
+  for (const shortcut of TEST_SHORTCUTS) {
+    info(
+      "Start to test for the shortcut " +
+        `key: "${shortcut.key}" modifiers: ${Object.keys(shortcut.modifiers)}`
+    );
+
+    const tab = await addTab(
+      "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+    );
+    const { inspector, view } = await openRuleView();
+
+    info("Selecting the test node");
+    await selectNode("h1", inspector);
+
+    const prop = getTextProperty(view, 0, { colo: "lim" });
+
+    info("Test with css property name field");
+    const nameEditor = await focusEditableField(view, prop.editor.nameSpan);
+    await testCompletion(shortcut, view, nameEditor, "color");
+
+    info("Test with css property value field");
+    const valueEditor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(shortcut, view, valueEditor, "lime");
+
+    await removeTab(tab);
+  }
+});
+
+async function testCompletion(shortcut, view, editor, expectedValue) {
+  const spanEl = editor.elt;
+
+  info("Move cursor to the end");
+  EventUtils.synthesizeKey("VK_RIGHT", {}, view.styleWindow);
+  await waitUntil(
+    () => editor.input.selectionStart === editor.input.selectionEnd
+  );
+
+  info("Check whether the popup opens after sending the shortcut key");
+  const onPopupOpened = once(view.popup, "popup-opened");
+  EventUtils.synthesizeKey(shortcut.key, shortcut.modifiers, view.styleWindow);
+  await onPopupOpened;
+  ok(view.popup.isOpen, "The popup opened correctly");
+
+  info("Commit the suggestion");
+  const onChanged = view.once("ruleview-changed");
+  const onPopupClosed = once(view.popup, "popup-closed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await Promise.all([onChanged, onPopupClosed]);
+  is(spanEl.textContent, expectedValue, "The value is set correctly");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
new file mode 100644
index 0000000000..af7c03220a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_01.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view shows expanders for properties with computed lists.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px;
+      top: 0px;
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testExpandersShown(inspector, view);
+});
+
+function testExpandersShown(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  info("Check that the correct rules are visible");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(rule.textProps[0].name, "margin", "First property is margin.");
+  is(rule.textProps[1].name, "top", "Second property is top.");
+
+  info("Check that the expanders are shown correctly");
+  is(
+    rule.textProps[0].editor.expander.style.display,
+    "inline-block",
+    "margin expander is displayed."
+  );
+  is(
+    rule.textProps[1].editor.expander.style.display,
+    "none",
+    "top expander is hidden."
+  );
+  ok(
+    !rule.textProps[0].editor.expander.hasAttribute("open"),
+    "margin computed list is closed."
+  );
+  ok(
+    !rule.textProps[1].editor.expander.hasAttribute("open"),
+    "top computed list is closed."
+  );
+  ok(
+    !rule.textProps[0].editor.computed.hasChildNodes(),
+    "margin computed list is empty before opening."
+  );
+  ok(
+    !rule.textProps[1].editor.computed.hasChildNodes(),
+    "top computed list is empty."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
new file mode 100644
index 0000000000..3d59baea68
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_02.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view computed lists can be expanded/collapsed,
+// and contain the right subproperties.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 0px 1px 2px 3px;
+      top: 0px;
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testComputedList(inspector, view);
+});
+
+function testComputedList(inspector, view) {
+  const prop = getTextProperty(view, 1, { margin: "0px 1px 2px 3px" });
+  const propEditor = prop.editor;
+  const expander = propEditor.expander;
+
+  ok(!expander.hasAttribute("open"), "margin computed list is closed");
+
+  info("Opening the computed list of margin property");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open");
+
+  const computed = propEditor.prop.computed;
+  const computedDom = propEditor.computed;
+  const propNames = [
+    "margin-top",
+    "margin-right",
+    "margin-bottom",
+    "margin-left",
+  ];
+
+  is(computed.length, propNames.length, "There should be 4 computed values");
+  is(
+    computedDom.children.length,
+    propNames.length,
+    "There should be 4 nodes in the DOM"
+  );
+
+  propNames.forEach((propName, i) => {
+    const propValue = i + "px";
+    is(
+      computed[i].name,
+      propName,
+      "Computed property #" + i + " has name " + propName
+    );
+    is(
+      computed[i].value,
+      propValue,
+      "Computed property #" + i + " has value " + propValue
+    );
+    is(
+      computedDom.querySelectorAll(".ruleview-propertyname")[i].textContent,
+      propName,
+      "Computed property #" + i + " in DOM has correct name"
+    );
+    is(
+      computedDom.querySelectorAll(".ruleview-propertyvalue")[i].textContent,
+      propValue,
+      "Computed property #" + i + " in DOM has correct value"
+    );
+  });
+
+  info("Closing the computed list of margin property");
+  expander.click();
+  ok(!expander.hasAttribute("open"), "margin computed list is closed");
+
+  info("Opening the computed list of margin property");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open");
+  is(computed.length, propNames.length, "Still 4 computed values");
+  is(computedDom.children.length, propNames.length, "Still 4 nodes in the DOM");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js b/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js
new file mode 100644
index 0000000000..f002a77c8b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_computed-lists_03.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view does not show expanders for property values that contain
+// variables.
+// This should, in theory, be able to work, but the complexity outlined in
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1535315#c2 made us hide the expander
+// instead. Also, this is what Chrome does too.
+
+var TEST_URI = `
+  <style type="text/css">
+    #testid {
+      --primary-color: black;
+      background: var(--primary-color, red);
+    }
+  </style>
+  <h1 id="testid">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(
+    rule.textProps[0].name,
+    "--primary-color",
+    "The first property is the variable"
+  );
+  is(rule.textProps[1].name, "background", "The second property is background");
+
+  info("Check that the expander is hidden for the background property");
+  is(
+    rule.textProps[1].editor.expander.style.display,
+    "none",
+    "Expander is hidden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_conditional_import.js b/devtools/client/inspector/rules/test/browser_rules_conditional_import.js
new file mode 100644
index 0000000000..86494cf676
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_conditional_import.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content displays @import conditions.
+
+const TEST_URI = `
+  <style type="text/css">
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer) (height > 42px);
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex);
+    @import url(${URL_ROOT_COM_SSL}doc_conditional_import.css) supports(display: flex) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayerTwo) supports(display: flex) screen and (width > 10px);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
+  </style>
+  <h1>Hello @import!</h1>
+`;
+
+add_task(async function () {
+  // Enable the pref for @import supports()
+  await pushPref("layout.css.import-supports.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    {
+      // Checking that we don't show @import for rules from imported stylesheet with no conditions
+      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
+      ancestorRulesData: null,
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px)",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: ["@import supports(display: flex)"],
+    },
+    {
+      selector: `h1, [test-hint="imported-conditional"]`,
+      ancestorRulesData: ["@import screen and (width > 10px)"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px)",
+        "@layer importedLayerTwo",
+        "@media screen",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import supports(display: flex) screen and (width > 10px)",
+        "@layer importedLayerTwo",
+        "@media screen",
+        "@layer in-imported-stylesheet",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: [
+        "@import (height > 42px)",
+        "@layer importedLayer",
+        "@media screen",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@import (height > 42px)",
+        "@layer importedLayer",
+        "@media screen",
+        "@layer in-imported-stylesheet",
+      ],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_container-queries.js b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
new file mode 100644
index 0000000000..63a13dbe47
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_container-queries.js
@@ -0,0 +1,308 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines container queries.
+const TEST_URI = `
+  <!DOCTYPE html>
+  <style type="text/css">
+    body {
+      container: mycontainer / size;
+    }
+
+    section {
+      container: mycontainer / inline-size;
+    }
+
+    @container (width > 0px) {
+      h1, [test-hint="nocontainername"]{
+        outline-color: chartreuse;
+      }
+    }
+
+    @container unknowncontainer (min-width: 2vw) {
+      h1, [test-hint="unknowncontainer"] {
+        border-color: salmon;
+      }
+    }
+
+    @container mycontainer (1px < width < 10000px) {
+      h1, [test-hint="container"] {
+        color: tomato;
+      }
+
+      section, [test-hint="container-duplicate-name--body"] {
+        color: gold;
+      }
+
+      div, [test-hint="container-duplicate-name--section"] {
+        color: salmon;
+      }
+    }
+  </style>
+  <body id=myBody class="a-container test">
+    <h1>Hello @container!</h1>
+    <section>
+      <div>
+        <h2>You rock</h2>
+      </div>
+    </section>
+  </body>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.container-queries.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+  assertContainerQueryData(view, [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="container"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px)"],
+    },
+    {
+      selector: `h1, [test-hint="nocontainername"]`,
+      ancestorRulesData: ["@container (width > 0px)"],
+    },
+  ]);
+
+  info("Check that the query container tooltip works as expected");
+  // Retrieve query containers sizes
+  const { bodyInlineSize, bodyBlockSize, sectionInlineSize } =
+    await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+      const body = content.document.body;
+      const section = content.document.querySelector("section");
+      return {
+        bodyInlineSize: content.getComputedStyle(body).inlineSize,
+        bodyBlockSize: content.getComputedStyle(body).blockSize,
+        sectionInlineSize: content.getComputedStyle(section).inlineSize,
+      };
+    });
+
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 1,
+    expectedHeaderText: "<body#myBody.a-container.test>",
+    expectedBodyText: [
+      "container-type: size",
+      `inline-size: ${bodyInlineSize}`,
+      `block-size: ${bodyBlockSize}`,
+    ],
+  });
+
+  info("Check that the 'jump to container' button works as expected");
+  await assertJumpToContainerButton(inspector, view, 1, "body");
+
+  info("Check that inherited rules display container query data as expected");
+  await selectNode("h2", inspector);
+
+  assertContainerQueryData(view, [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `div, [test-hint="container-duplicate-name--section"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px)"],
+    },
+    {
+      selector: `section, [test-hint="container-duplicate-name--body"]`,
+      ancestorRulesData: ["@container mycontainer (1px < width < 10000px)"],
+    },
+  ]);
+
+  info(
+    "Check that the query container tooltip works as expected for inherited rules as well"
+  );
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 1,
+    expectedHeaderText: "<section>",
+    expectedBodyText: [
+      "container-type: inline-size",
+      `inline-size: ${sectionInlineSize}`,
+    ],
+  });
+  await assertQueryContainerTooltip({
+    inspector,
+    view,
+    ruleIndex: 2,
+    expectedHeaderText: "<body#myBody.a-container.test>",
+    expectedBodyText: [
+      "container-type: size",
+      `inline-size: ${bodyInlineSize}`,
+      `block-size: ${bodyBlockSize}`,
+    ],
+  });
+
+  info(
+    "Check that the 'jump to container' button works as expected for inherited rules"
+  );
+  await assertJumpToContainerButton(inspector, view, 1, "section");
+
+  await selectNode("h2", inspector);
+  await assertJumpToContainerButton(inspector, view, 2, "body");
+});
+
+function assertContainerQueryData(view, expectedRules) {
+  const rulesInView = Array.from(
+    view.element.querySelectorAll(".ruleview-rule")
+  );
+
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    const ancestorDataEl = getRuleViewAncestorRulesDataElementByIndex(view, i);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        ancestorDataEl,
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        ancestorDataEl?.innerText,
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+      ok(
+        ancestorDataEl.querySelector(".container-query .open-inspector") !==
+          null,
+        "An icon is displayed to select the container in the markup view"
+      );
+    }
+  }
+}
+
+async function assertJumpToContainerButton(
+  inspector,
+  view,
+  ruleIndex,
+  expectedSelectedNodeAfterClick
+) {
+  const selectContainerButton = getRuleViewAncestorRulesDataElementByIndex(
+    view,
+    ruleIndex
+  ).querySelector(".open-inspector");
+
+  // Ensure that the button can be targetted from EventUtils.
+  selectContainerButton.scrollIntoView();
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    selectContainerButton,
+    { type: "mouseover" },
+    selectContainerButton.ownerDocument.defaultView
+  );
+  const { nodeFront: highlightedNodeFront } = await onNodeHighlight;
+  is(
+    highlightedNodeFront.displayName,
+    expectedSelectedNodeAfterClick,
+    "The correct node was highlighted"
+  );
+
+  const onceNewNodeFront = inspector.selection.once("new-node-front");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  EventUtils.synthesizeMouseAtCenter(
+    selectContainerButton,
+    {},
+    selectContainerButton.ownerDocument.defaultView
+  );
+
+  const nodeFront = await onceNewNodeFront;
+  is(
+    nodeFront.displayName,
+    expectedSelectedNodeAfterClick,
+    "The correct node has been selected"
+  );
+
+  await onNodeUnhighlight;
+  ok("Highlighter was hidden when clicking on icon");
+}
+
+async function assertQueryContainerTooltip({
+  inspector,
+  view,
+  ruleIndex,
+  expectedHeaderText,
+  expectedBodyText,
+}) {
+  const tooltipTriggerEl = getRuleViewAncestorRulesDataElementByIndex(
+    view,
+    ruleIndex
+  ).querySelector(".container-query-declaration");
+
+  // Ensure that the element can be targetted from EventUtils.
+  tooltipTriggerEl.scrollIntoView();
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  const onNodeHighlight = waitForHighlighterTypeShown(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+
+  const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+  const onTooltipReady = tooltip.once("shown");
+  EventUtils.synthesizeMouseAtCenter(
+    tooltipTriggerEl,
+    { type: "mousemove" },
+    tooltipTriggerEl.ownerDocument.defaultView
+  );
+  await onTooltipReady;
+  await onNodeHighlight;
+
+  is(
+    tooltip.panel.querySelector("header").textContent,
+    expectedHeaderText,
+    "Tooltip has expected header content"
+  );
+
+  const lis = Array.from(tooltip.panel.querySelectorAll("li")).map(
+    li => li.textContent
+  );
+  Assert.deepEqual(lis, expectedBodyText, "Tooltip has expected body items");
+
+  info("Hide the tooltip");
+  const onHidden = tooltip.once("hidden");
+  const onNodeUnhighlight = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.BOXMODEL
+  );
+  // Move the mouse elsewhere to hide the tooltip
+  EventUtils.synthesizeMouse(
+    tooltipTriggerEl.ownerDocument.body,
+    1,
+    1,
+    { type: "mousemove" },
+    tooltipTriggerEl.ownerDocument.defaultView
+  );
+  await onHidden;
+  await onNodeUnhighlight;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_content_01.js b/devtools/client/inspector/rules/test/browser_rules_content_01.js
new file mode 100644
index 0000000000..ef3acbfd5c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_content_01.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct
+
+const TEST_URI = `
+  <style type="text/css">
+    @media screen and (min-width: 10px) {
+      #testid {
+        background-color: blue;
+      }
+    }
+    .testclass, .unmatched {
+      background-color: green;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  is(
+    view.element.querySelectorAll("#ruleview-no-results").length,
+    0,
+    "After a highlight, no longer has a no-results element."
+  );
+
+  await clearCurrentNodeSelection(inspector);
+  is(
+    view.element.querySelectorAll("#ruleview-no-results").length,
+    1,
+    "After highlighting null, has a no-results element again."
+  );
+
+  await selectNode("#testid", inspector);
+
+  let linkText = getRuleViewLinkTextByIndex(view, 1);
+  is(linkText, "inline:3", "link text at index 1 has expected content.");
+
+  const mediaText = getRuleViewAncestorRulesDataTextByIndex(view, 1);
+  is(
+    mediaText,
+    "@media screen and (min-width: 10px)",
+    "media text at index 1 has expected content"
+  );
+
+  linkText = getRuleViewLinkTextByIndex(view, 2);
+  is(linkText, "inline:7", "link text at index 2 has expected content.");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 2),
+    null,
+    "There is no media text element for rule at index 2"
+  );
+
+  const selector = getRuleViewRuleEditor(view, 2).selectorText;
+  is(
+    selector.querySelector(".ruleview-selector-matched").textContent,
+    ".testclass",
+    ".textclass should be matched."
+  );
+  is(
+    selector.querySelector(".ruleview-selector-unmatched").textContent,
+    ".unmatched",
+    ".unmatched should not be matched."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_content_02.js b/devtools/client/inspector/rules/test/browser_rules_content_02.js
new file mode 100644
index 0000000000..5e48169625
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_content_02.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the rule-view content when the inspector gets opened via the page
+// ctx-menu "inspect element"
+
+const CONTENT = `
+  <body style="color:red;">
+    <div style="color:blue;">
+      <p style="color:green;">
+        <span style="color:yellow;">test element</span>
+      </p>
+    </div>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + CONTENT);
+
+  // const commands = await CommandsFactory.forTab(tab);
+  // // Initialize the TargetCommands which require some async stuff to be done
+  // // before being fully ready. This will define the `targetCommand.targetFront` attribute.
+  // await commands.targetCommand.startListening();
+  const inspector = await clickOnInspectMenuItem("span");
+
+  checkRuleViewContent(inspector.getPanel("ruleview").view);
+});
+
+function checkRuleViewContent({ styleDocument }) {
+  info("Making sure the rule-view contains the expected content");
+
+  const headers = [...styleDocument.querySelectorAll(".ruleview-header")];
+  is(headers.length, 3, "There are 3 headers for inherited rules");
+
+  is(
+    headers[0].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "p"),
+    "The first header is correct"
+  );
+  is(
+    headers[1].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "div"),
+    "The second header is correct"
+  );
+  is(
+    headers[2].textContent,
+    STYLE_INSPECTOR_L10N.getFormatStr("rule.inheritedFrom", "body"),
+    "The third header is correct"
+  );
+
+  const rules = styleDocument.querySelectorAll(".ruleview-rule");
+  is(rules.length, 4, "There are 4 rules in the view");
+
+  for (const rule of rules) {
+    const selector = rule.querySelector(".ruleview-selectorcontainer");
+    is(
+      selector.textContent,
+      STYLE_INSPECTOR_L10N.getStr("rule.sourceElement"),
+      "The rule's selector is correct"
+    );
+
+    const propertyNames = [...rule.querySelectorAll(".ruleview-propertyname")];
+    is(propertyNames.length, 1, "There's only one property name, as expected");
+
+    const propertyValues = [
+      ...rule.querySelectorAll(".ruleview-propertyvalue"),
+    ];
+    is(
+      propertyValues.length,
+      1,
+      "There's only one property value, as expected"
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_copy_styles.js b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
new file mode 100644
index 0000000000..01fe365841
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_copy_styles.js
@@ -0,0 +1,359 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Tests the behaviour of the copy styles context menu items in the rule
+ * view.
+ */
+
+const osString = Services.appinfo.OS;
+
+const TEST_URI = URL_ROOT_SSL + "doc_copystyles.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  const data = [
+    {
+      desc: "Test Copy Property Name",
+      node: ruleEditor.rule.textProps[0].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyName",
+      expectedPattern: "color",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Value",
+      node: ruleEditor.rule.textProps[2].editor.valueSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
+      expectedPattern: "12px",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: false,
+        copyPropertyValue: true,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Value with Priority",
+      node: ruleEditor.rule.textProps[3].editor.valueSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyPropertyValue",
+      expectedPattern: "#00F !important",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: false,
+        copyPropertyValue: true,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "font-size: 12px;",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration with Priority",
+      node: ruleEditor.rule.textProps[3].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "border-color: #00F !important;",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Rule",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\tcolor: #F00;[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t--var: "\\*/";[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Selector",
+      node: ruleEditor.selectorText,
+      menuItemLabel: "styleinspector.contextmenu.copySelector",
+      expectedPattern: "html, body, #testid",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: false,
+        copyPropertyName: false,
+        copyPropertyValue: false,
+        copySelector: true,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Location",
+      node: ruleEditor.source,
+      menuItemLabel: "styleinspector.contextmenu.copyLocation",
+      expectedPattern:
+        "https://example.com/browser/devtools/client/" +
+        "inspector/rules/test/doc_copystyles.css",
+      visible: {
+        copyLocation: true,
+        copyDeclaration: false,
+        copyPropertyName: false,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      async setup() {
+        await disableProperty(view, 0);
+      },
+      desc: "Test Copy Rule with Disabled Property",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\t/\\* color: #F00; \\*/[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t--var: "\\*/";[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      async setup() {
+        await disableProperty(view, 4);
+      },
+      desc: "Test Copy Rule with Disabled Property with Comment",
+      node: ruleEditor.rule.textProps[2].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyRule",
+      expectedPattern:
+        "#testid {[\\r\\n]+" +
+        "\t/\\* color: #F00; \\*/[\\r\\n]+" +
+        "\tbackground-color: #00F;[\\r\\n]+" +
+        "\tfont-size: 12px;[\\r\\n]+" +
+        "\tborder-color: #00F !important;[\\r\\n]+" +
+        '\t/\\* --var: "\\*\\\\/"; \\*/[\\r\\n]+' +
+        "}",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+    {
+      desc: "Test Copy Property Declaration with Disabled Property",
+      node: ruleEditor.rule.textProps[0].editor.nameSpan,
+      menuItemLabel: "styleinspector.contextmenu.copyDeclaration",
+      expectedPattern: "/\\* color: #F00; \\*/",
+      visible: {
+        copyLocation: false,
+        copyDeclaration: true,
+        copyPropertyName: true,
+        copyPropertyValue: false,
+        copySelector: false,
+        copyRule: true,
+      },
+    },
+  ];
+
+  for (const {
+    setup,
+    desc,
+    node,
+    menuItemLabel,
+    expectedPattern,
+    visible,
+  } of data) {
+    if (setup) {
+      await setup();
+    }
+
+    info(desc);
+    await checkCopyStyle(view, node, menuItemLabel, expectedPattern, visible);
+  }
+});
+
+async function checkCopyStyle(
+  view,
+  node,
+  menuItemLabel,
+  expectedPattern,
+  visible
+) {
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, node);
+  const menuItem = allMenuItems.find(
+    item => item.label === STYLE_INSPECTOR_L10N.getStr(menuItemLabel)
+  );
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+  const menuitemCopyLocation = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyLocation")
+  );
+  const menuitemCopyDeclaration = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyDeclaration")
+  );
+  const menuitemCopyPropertyName = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyPropertyName")
+  );
+  const menuitemCopyPropertyValue = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr(
+        "styleinspector.contextmenu.copyPropertyValue"
+      )
+  );
+  const menuitemCopySelector = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copySelector")
+  );
+  const menuitemCopyRule = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copyRule")
+  );
+
+  ok(menuitemCopy.disabled, "Copy disabled is as expected: true");
+  ok(menuitemCopy.visible, "Copy visible is as expected: true");
+
+  is(
+    menuitemCopyLocation.visible,
+    visible.copyLocation,
+    "Copy Location visible attribute is as expected: " + visible.copyLocation
+  );
+
+  is(
+    menuitemCopyDeclaration.visible,
+    visible.copyDeclaration,
+    "Copy Property Declaration visible attribute is as expected: " +
+      visible.copyDeclaration
+  );
+
+  is(
+    menuitemCopyPropertyName.visible,
+    visible.copyPropertyName,
+    "Copy Property Name visible attribute is as expected: " +
+      visible.copyPropertyName
+  );
+
+  is(
+    menuitemCopyPropertyValue.visible,
+    visible.copyPropertyValue,
+    "Copy Property Value visible attribute is as expected: " +
+      visible.copyPropertyValue
+  );
+
+  is(
+    menuitemCopySelector.visible,
+    visible.copySelector,
+    "Copy Selector visible attribute is as expected: " + visible.copySelector
+  );
+
+  is(
+    menuitemCopyRule.visible,
+    visible.copyRule,
+    "Copy Rule visible attribute is as expected: " + visible.copyRule
+  );
+
+  try {
+    await waitForClipboardPromise(
+      () => menuItem.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+async function disableProperty(view, index) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const textProp = ruleEditor.rule.textProps[index];
+  await togglePropStatus(view, textProp);
+}
+
+function checkClipboardData(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failedClipboard(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = osString == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  ok(
+    false,
+    "Clipboard text does not match expected " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js
new file mode 100644
index 0000000000..510a558e7b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-add-rename-rule.js
@@ -0,0 +1,125 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Add and rename rules
+// Test the correctness of the compatibility
+// status when the incompatible rules are added
+// or renamed to another universally compatible
+// rule
+
+const TEST_URI = `
+<style>
+  body {
+    user-select: none;
+    text-decoration-skip: none;
+    clip: auto;
+  }
+</style>
+<body>
+</body>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: "body",
+    rules: [
+      {},
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_ADD_RULE = [
+  {
+    selector: "body",
+    rules: [
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_RENAME_RULE = [
+  {
+    selector: "body",
+    rules: [
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+      {
+        "background-color": {
+          value: "green",
+        },
+        "text-decoration-skip": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+        clip: {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["deprecated-supported"],
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref(
+    "devtools.inspector.ruleview.inline-compatibility-warning.enabled",
+    true
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  const userSelect = { "user-select": "none" };
+  const backgroundColor = { "background-color": "green" };
+
+  info("Check initial compatibility issues");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    "Add an inheritable incompatible rule and check the compatibility status"
+  );
+  await addProperty(view, 0, "-moz-float-edge", "content-box");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_ADD_RULE);
+
+  info("Rename user-select to color and check the compatibility status");
+  await updateDeclaration(view, 1, userSelect, backgroundColor);
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_RENAME_RULE);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js
new file mode 100644
index 0000000000..17069756e2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-check-add-fix.js
@@ -0,0 +1,134 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Add fix for incompatible property
+// For properties like "user-select", there exists an alias
+// "-webkit-user-select", that is supported on all platform
+// as a result of its popularity. If such a universally
+// compatible alias exists, we shouldn't show compatibility
+// warning for the base declaration.
+// In this case "user-select" is marked compatible because the
+// universally compatible alias "-webkit-user-select" exists
+// alongside.
+
+const TARGET_BROWSERS = [
+  {
+    // Chrome doesn't need any prefix for both user-select and text-size-adjust.
+    id: "chrome",
+    status: "current",
+  },
+  {
+    // The safari_ios needs -webkit prefix for both properties.
+    id: "safari_ios",
+    status: "current",
+  },
+];
+
+const TEST_URI = `
+<style>
+  div {
+    color: green;
+    background-color: black;
+    user-select: none;
+    text-size-adjust: none;
+  }
+</style>
+<div>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_FIX_USER_SELECT = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": { value: "none" },
+        "-webkit-user-select": { value: "none" },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.experimental,
+        },
+      },
+    ],
+  },
+];
+
+// text-size-adjust is an experimental property with aliases.
+// Adding -webkit makes it compatible on all platforms but will
+// still show an inline warning for its experimental status.
+const TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED = [
+  {
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "user-select": { value: "none" },
+        "-webkit-user-select": { value: "none" },
+        "text-size-adjust": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE["experimental-supported"],
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref(
+    "devtools.inspector.compatibility.target-browsers",
+    JSON.stringify(TARGET_BROWSERS)
+  );
+  await pushPref(
+    "devtools.inspector.ruleview.inline-compatibility-warning.enabled",
+    true
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // We're only looking for properties on this single node so select it here instead of
+  // passing `selector` to `runCSSCompatibilityTests` (otherwise addition requests are sent
+  // to the server and we may end up with pending promises when the toolbox closes).
+  await selectNode("div", inspector);
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    'Add -webkit-user-select: "none" which solves the compatibility issue from user-select'
+  );
+  await addProperty(view, 1, "-webkit-user-select", "none");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_FIX_USER_SELECT);
+
+  info(
+    'Add -webkit-text-size-adjust: "none" fixing issue but leaving an inline warning of an experimental property'
+  );
+  await addProperty(view, 1, "-webkit-text-size-adjust", "none");
+  await runCSSCompatibilityTests(
+    view,
+    inspector,
+    TEST_DATA_FIX_EXPERIMENTAL_SUPPORTED
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js
new file mode 100644
index 0000000000..08e86e6202
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-learn-more-link.js
@@ -0,0 +1,66 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the Learn More link is displayed when possible,
+// and that it links to MDN or the spec if no MDN url is provided.
+
+const TEST_URI = `
+<style>
+  body {
+    user-select: none;
+    hyphenate-limit-chars: auto;
+    overflow-clip-box: padding-box;
+  }
+</style>
+<body>
+</body>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: "body",
+    rules: [
+      {},
+      {
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          // MDN url
+          expectedLearnMoreUrl:
+            "https://developer.mozilla.org/docs/Web/CSS/user-select?utm_source=devtools&utm_medium=inspector-css-compatibility&utm_campaign=default",
+        },
+        "hyphenate-limit-chars": {
+          value: "auto",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          // No MDN url, but a spec one
+          expectedLearnMoreUrl:
+            "https://drafts.csswg.org/css-text-4/#propdef-hyphenate-limit-chars",
+        },
+        "overflow-clip-box": {
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+          value: "padding-box",
+          // No MDN nor spec url
+          expectedLearnMoreUrl: null,
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref(
+    "devtools.inspector.ruleview.inline-compatibility-warning.enabled",
+    true
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // If the test fail because the properties used are no longer in the dataset, or they
+  // now have mdn/spec url although we expected them not to, uncomment the next line
+  // to get all the properties in the dataset that don't have a MDN url.
+  // logCssCompatDataPropertiesWithoutMDNUrl()
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js
new file mode 100644
index 0000000000..7209adbc2e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-toggle-rules.js
@@ -0,0 +1,150 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Toggling rules linked to the element and the class
+// Checking whether the compatibility warning icon is displayed
+// correctly.
+// If a rule is disabled, it is marked compatible to keep
+// consistency with compatibility panel.
+// We test both the compatible and incompatible rules here
+
+const TEST_URI = `
+<style>
+  div {
+    color: green;
+    background-color: black;
+    -moz-float-edge: content-box;
+  }
+</style>
+<div class="test-inline" style="color:pink; user-select:none;"></div>
+<div class="test-class-linked"></div>`;
+
+const TEST_DATA_INITIAL = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_TOGGLE_CLASS_DECLARATION = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": {
+          value: "none",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.default,
+        },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+];
+
+const TEST_DATA_TOGGLE_INLINE = [
+  {
+    selector: ".test-class-linked",
+    rules: [
+      {},
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+  {
+    selector: ".test-inline",
+    rules: [
+      {
+        color: { value: "pink" },
+        "user-select": { value: "none" },
+      },
+      {
+        color: { value: "green" },
+        "background-color": { value: "black" },
+        "-moz-float-edge": { value: "content-box" },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref(
+    "devtools.inspector.ruleview.inline-compatibility-warning.enabled",
+    true
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  const mozFloatEdge = { "-moz-float-edge": "content-box" };
+  const userSelect = { "user-select": "none" };
+
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_INITIAL);
+
+  info(
+    'Disable -moz-float-edge: "content-box" which is not cross browser compatible declaration'
+  );
+  await toggleDeclaration(view, 1, mozFloatEdge);
+  await runCSSCompatibilityTests(
+    view,
+    inspector,
+    TEST_DATA_TOGGLE_CLASS_DECLARATION
+  );
+
+  info(
+    'Toggle inline declaration "user-select": "none" and check the compatibility status'
+  );
+  await selectNode(".test-inline", inspector);
+  await toggleDeclaration(view, 0, userSelect);
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA_TOGGLE_INLINE);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js
new file mode 100644
index 0000000000..4580f819aa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_css-compatibility-tooltip-telemetry.js
@@ -0,0 +1,58 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test - Toggling rules linked to the element and the class
+// Checking whether the compatibility warning icon is displayed
+// correctly.
+// If a rule is disabled, it is marked compatible to keep
+// consistency with compatibility panel.
+// We test both the compatible and incompatible rules here
+
+const TEST_URI = `
+<style>
+  div {
+    -moz-float-edge: content-box;
+  }
+</style>
+<div></div>`;
+
+const TEST_DATA = [
+  {
+    selector: "div",
+    rules: [
+      {},
+      {
+        "-moz-float-edge": {
+          value: "content-box",
+          expected: COMPATIBILITY_TOOLTIP_MESSAGE.deprecated,
+        },
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  startTelemetry();
+
+  await pushPref(
+    "devtools.inspector.ruleview.inline-compatibility-warning.enabled",
+    true
+  );
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Check correctness of data by toggling tooltip open");
+  await runCSSCompatibilityTests(view, inspector, TEST_DATA);
+
+  checkResults();
+});
+
+function checkResults() {
+  info(
+    'Check the telemetry against "devtools.tooltip.shown" for label "css-compatibility" and ensure it is set'
+  );
+  checkTelemetry("devtools.tooltip.shown", "", 1, "css-compatibility");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cssom.js b/devtools/client/inspector/rules/test/browser_rules_cssom.js
new file mode 100644
index 0000000000..37a1214a52
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cssom.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test to ensure that CSSOM doesn't make the rule view blow up.
+// https://bugzilla.mozilla.org/show_bug.cgi?id=1224121
+
+const TEST_URI = URL_ROOT + "doc_cssom.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const elementStyle = view._elementStyle;
+  let rule;
+
+  rule = elementStyle.rules[1];
+  is(rule.textProps.length, 1, "rule 1 should have one property");
+  is(rule.textProps[0].name, "color", "the property should be 'color'");
+  is(rule.ruleLine, -1, "the property has no source line");
+
+  rule = elementStyle.rules[2];
+  is(rule.textProps.length, 1, "rule 2 should have one property");
+  is(
+    rule.textProps[0].name,
+    "font-weight",
+    "the property should be 'font-weight'"
+  );
+  is(rule.ruleLine, -1, "the property has no source line");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
new file mode 100644
index 0000000000..8a967e1a8a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-appears-on-swatch-click.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that cubic-bezier pickers appear when clicking on cubic-bezier
+// swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      animation: move 3s linear;
+      transition: top 4s cubic-bezier(.1, 1.45, 1, -1.2);
+    }
+    .test {
+      animation-timing-function: ease-in-out;
+      transition-timing-function: ease-out;
+    }
+  </style>
+  <div class="test">Testing the cubic-bezier tooltip!</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const swatches = [];
+  swatches.push(
+    getRuleViewProperty(view, "div", "animation").valueSpan.querySelector(
+      ".ruleview-bezierswatch"
+    )
+  );
+  swatches.push(
+    getRuleViewProperty(view, "div", "transition").valueSpan.querySelector(
+      ".ruleview-bezierswatch"
+    )
+  );
+  swatches.push(
+    getRuleViewProperty(
+      view,
+      ".test",
+      "animation-timing-function"
+    ).valueSpan.querySelector(".ruleview-bezierswatch")
+  );
+  swatches.push(
+    getRuleViewProperty(
+      view,
+      ".test",
+      "transition-timing-function"
+    ).valueSpan.querySelector(".ruleview-bezierswatch")
+  );
+
+  for (const swatch of swatches) {
+    info("Testing that the cubic-bezier appears on cubicswatch click");
+    await testAppears(view, swatch);
+  }
+});
+
+async function testAppears(view, swatch) {
+  ok(swatch, "The cubic-swatch exists");
+
+  const bezier = view.tooltips.getTooltip("cubicBezier");
+  ok(bezier, "The rule-view has the expected cubicBezier property");
+
+  const bezierPanel = bezier.tooltip.panel;
+  ok(bezierPanel, "The XUL panel for the cubic-bezier tooltip exists");
+
+  const onBezierWidgetReady = bezier.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  ok(true, "The cubic-bezier tooltip was shown on click of the cibuc swatch");
+  ok(
+    !inplaceEditor(swatch.parentNode),
+    "The inplace editor wasn't shown as a result of the cibuc swatch click"
+  );
+  await hideTooltipAndWaitForRuleViewChanged(bezier, view);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
new file mode 100644
index 0000000000..5fbd1da25b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-commit-on-ENTER.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a curve change in the cubic-bezier tooltip is committed when ENTER
+// is pressed.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      transition: top 2s linear;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+
+  info("Getting the bezier swatch element");
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "transition"
+  ).valueSpan.querySelector(".ruleview-bezierswatch");
+
+  await testPressingEnterCommitsChanges(swatch, view);
+});
+
+async function testPressingEnterCommitsChanges(swatch, ruleView) {
+  const bezierTooltip = ruleView.tooltips.getTooltip("cubicBezier");
+
+  info("Showing the tooltip");
+  const onBezierWidgetReady = bezierTooltip.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  const widget = await bezierTooltip.widget;
+  info("Simulating a change of curve in the widget");
+  widget.coordinates = [0.1, 2, 0.9, -1];
+  const expected = "cubic-bezier(0.1, 2, 0.9, -1)";
+
+  await waitForSuccess(async function () {
+    const func = await getComputedStyleProperty(
+      "body",
+      null,
+      "transition-timing-function"
+    );
+    return func === expected;
+  }, "Waiting for the change to be previewed on the element");
+
+  ok(
+    getRuleViewProperty(
+      ruleView,
+      "body",
+      "transition"
+    ).valueSpan.textContent.includes("cubic-bezier("),
+    "The text of the timing-function was updated"
+  );
+
+  info("Sending RETURN key within the tooltip document");
+  // Pressing RETURN ends up doing 2 rule-view updates, one for the preview and
+  // one for the commit when the tooltip closes.
+  const onRuleViewChanged = waitForNEvents(ruleView, "ruleview-changed", 2);
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "RETURN");
+  await onRuleViewChanged;
+
+  const style = await getComputedStyleProperty(
+    "body",
+    null,
+    "transition-timing-function"
+  );
+  is(style, expected, "The element's timing-function was kept after RETURN");
+
+  const ruleViewStyle = getRuleViewProperty(
+    ruleView,
+    "body",
+    "transition"
+  ).valueSpan.textContent.includes("cubic-bezier(");
+  ok(ruleViewStyle, "The text of the timing-function was kept after RETURN");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
new file mode 100644
index 0000000000..91371fa548
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cubicbezier-revert-on-ESC.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changes made to the cubic-bezier timing-function in the
+// cubic-bezier tooltip are reverted when ESC is pressed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    body {
+      animation-timing-function: linear;
+    }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const { propEditor } = await openCubicBezierAndChangeCoords(
+    view,
+    1,
+    0,
+    [0.1, 2, 0.9, -1],
+    {
+      selector: "body",
+      name: "animation-timing-function",
+      value: "cubic-bezier(0.1, 2, 0.9, -1)",
+    }
+  );
+
+  is(
+    propEditor.valueSpan.textContent,
+    "cubic-bezier(.1,2,.9,-1)",
+    "Got expected property value."
+  );
+
+  await escapeTooltip(view);
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "animation-timing-function",
+    "linear"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "linear",
+    "Got expected property value."
+  );
+}
+
+async function escapeTooltip(view) {
+  info("Pressing ESCAPE to close the tooltip");
+
+  const bezierTooltip = view.tooltips.getTooltip("cubicBezier");
+  const widget = await bezierTooltip.widget;
+  const onHidden = bezierTooltip.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
+  await onHidden;
+  await onModifications;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_custom.js b/devtools/client/inspector/rules/test/browser_rules_custom.js
new file mode 100644
index 0000000000..084a870eb8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_custom.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = URL_ROOT + "doc_custom.html";
+
+// Tests the display of custom declarations in the rule-view.
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await simpleCustomOverride(inspector, view);
+  await importantCustomOverride(inspector, view);
+  await disableCustomOverride(inspector, view);
+});
+
+async function simpleCustomOverride(inspector, view) {
+  await selectNode("#testidSimple", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+
+  is(
+    idRuleProp.name,
+    "--background-color",
+    "First ID prop should be --background-color"
+  );
+  ok(!idRuleProp.overridden, "ID prop should not be overridden.");
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+
+  is(
+    classRuleProp.name,
+    "--background-color",
+    "First class prop should be --background-color"
+  );
+  ok(classRuleProp.overridden, "Class property should be overridden.");
+
+  // Override --background-color by changing the element style.
+  const elementProp = await addProperty(
+    view,
+    0,
+    "--background-color",
+    "purple"
+  );
+
+  is(
+    classRuleProp.name,
+    "--background-color",
+    "First element prop should now be --background-color"
+  );
+  ok(
+    !elementProp.overridden,
+    "Element style property should not be overridden"
+  );
+  ok(idRuleProp.overridden, "ID property should be overridden");
+  ok(classRuleProp.overridden, "Class property should be overridden");
+}
+
+async function importantCustomOverride(inspector, view) {
+  await selectNode("#testidImportant", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+  ok(idRuleProp.overridden, "Not-important rule should be overridden.");
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+  ok(!classRuleProp.overridden, "Important rule should not be overridden.");
+}
+
+async function disableCustomOverride(inspector, view) {
+  await selectNode("#testidDisable", inspector);
+
+  const idRule = getRuleViewRuleEditor(view, 1).rule;
+  const idRuleProp = idRule.textProps[0];
+
+  await togglePropStatus(view, idRuleProp);
+
+  const classRule = getRuleViewRuleEditor(view, 2).rule;
+  const classRuleProp = classRule.textProps[0];
+  ok(
+    !classRuleProp.overridden,
+    "Class prop should not be overridden after id prop was disabled."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
new file mode 100644
index 0000000000..be85867c94
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-angle.js
@@ -0,0 +1,122 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test cycling angle units in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    .turn {
+      filter: hue-rotate(1turn);
+    }
+    .deg {
+      filter: hue-rotate(180deg);
+    }
+  </style>
+  <body><div class=turn>Test turn</div><div class=deg>Test deg</div>cycling angle units in the rule view!</body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await checkAngleCycling(inspector, view);
+  await checkAngleCyclingPersist(inspector, view);
+});
+
+async function checkAngleCycling(inspector, view) {
+  await selectNode(".turn", inspector);
+
+  const container = (
+    await getRuleViewProperty(view, ".turn", "filter", { wait: true })
+  ).valueSpan;
+  const valueNode = container.querySelector(".ruleview-angle");
+  const win = view.styleWindow;
+
+  // turn
+  is(valueNode.textContent, "1turn", "Angle displayed as a turn value.");
+
+  const tests = [
+    {
+      value: "360deg",
+      comment: "Angle displayed as a degree value.",
+    },
+    {
+      value: `${Math.round(Math.PI * 2 * 10000) / 10000}rad`,
+      comment: "Angle displayed as a radian value.",
+    },
+    {
+      value: "400grad",
+      comment: "Angle displayed as a gradian value.",
+    },
+    {
+      value: "1turn",
+      comment: "Angle displayed as a turn value again.",
+    },
+  ];
+
+  for (const test of tests) {
+    await checkSwatchShiftClick(container, win, test.value, test.comment);
+  }
+}
+
+async function checkAngleCyclingPersist(inspector, view) {
+  await selectNode(".deg", inspector);
+  let container = (
+    await getRuleViewProperty(view, ".deg", "filter", { wait: true })
+  ).valueSpan;
+  let valueNode = container.querySelector(".ruleview-angle");
+  const win = view.styleWindow;
+
+  is(valueNode.textContent, "180deg", "Angle displayed as a degree value.");
+
+  await checkSwatchShiftClick(
+    container,
+    win,
+    `${Math.round(Math.PI * 10000) / 10000}rad`,
+    "Angle displayed as a radian value."
+  );
+
+  // Select the .turn div and reselect the .deg div to see
+  // if the new angle unit persisted
+  await selectNode(".turn", inspector);
+  await selectNode(".deg", inspector);
+
+  // We have to query for the container and the swatch because
+  // they've been re-generated
+  container = (
+    await getRuleViewProperty(view, ".deg", "filter", { wait: true })
+  ).valueSpan;
+  valueNode = container.querySelector(".ruleview-angle");
+  is(
+    valueNode.textContent,
+    `${Math.round(Math.PI * 10000) / 10000}rad`,
+    "Angle still displayed as a radian value."
+  );
+}
+
+async function checkSwatchShiftClick(container, win, expectedValue, comment) {
+  // Wait for 500ms before attempting a click to workaround frequent
+  // intermittents.
+  //
+  // See intermittent bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1721938
+  // See potentially related bugs:
+  // - browserLoaded + synthesizeMouse timeouts https://bugzilla.mozilla.org/show_bug.cgi?id=1727749
+  // - mochitest general synthesize events issue https://bugzilla.mozilla.org/show_bug.cgi?id=1720248
+  await wait(500);
+
+  const swatch = container.querySelector(".ruleview-angleswatch");
+  const valueNode = container.querySelector(".ruleview-angle");
+
+  const onUnitChange = swatch.once("unit-change");
+  EventUtils.synthesizeMouseAtCenter(
+    swatch,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    win
+  );
+  await onUnitChange;
+  is(valueNode.textContent, expectedValue, comment);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_cycle-color.js b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
new file mode 100644
index 0000000000..3d8349ebc8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_cycle-color.js
@@ -0,0 +1,225 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test cycling color types in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      color: #f00;
+    }
+    span {
+      color: blue;
+      border-color: #ff000080;
+    }
+    div {
+      color: green;
+    }
+    p {
+      color: blue;
+    }
+  </style>
+  <body>
+    <span>Test</span>
+    <div>cycling color types in the rule view!</div>
+    <p>cycling color and using the color picker</p>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await checkColorCycling(view);
+  await checkAlphaColorCycling(inspector, view);
+  await checkColorCyclingWithDifferentDefaultType(inspector, view);
+  await checkColorCyclingWithColorPicker(inspector, view);
+});
+
+async function checkColorCycling(view) {
+  const { valueSpan } = getRuleViewProperty(view, "body", "color");
+
+  checkColorValue(
+    valueSpan,
+    "#f00",
+    "Color displayed as a hex value, its authored type"
+  );
+
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value",
+    },
+    {
+      value: "rgb(255, 0, 0)",
+      comment: "Color displayed as an RGB value",
+    },
+    {
+      value: "hwb(0 0% 0%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "red",
+      comment: "Color displayed as a color name",
+    },
+    {
+      value: "#f00",
+      comment: "Color displayed as an authored value",
+    },
+    {
+      value: "hsl(0, 100%, 50%)",
+      comment: "Color displayed as an HSL value again",
+    },
+  ]);
+}
+
+async function checkAlphaColorCycling(inspector, view) {
+  await selectNode("span", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "span", "border-color");
+
+  checkColorValue(
+    valueSpan,
+    "#ff000080",
+    "Color displayed as an alpha hex value, its authored type"
+  );
+
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsla(0, 100%, 50%, 0.5)",
+      comment: "Color displayed as an HSLa value",
+    },
+    {
+      value: "rgba(255, 0, 0, 0.5)",
+      comment: "Color displayed as an RGBa value",
+    },
+    {
+      value: "hwb(0 0% 0% / 0.5)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "#ff000080",
+      comment: "Color displayed as an alpha hex value again",
+    },
+  ]);
+}
+
+async function checkColorCyclingWithDifferentDefaultType(inspector, view) {
+  info("Change the default color type pref to hex");
+  await pushPref("devtools.defaultColorUnit", "hex");
+
+  info(
+    "Select a new node that would normally have a color with a different type"
+  );
+  await selectNode("div", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "div", "color");
+
+  checkColorValue(
+    valueSpan,
+    "#008000",
+    "Color displayed as a hex value, which is the type just selected"
+  );
+
+  info("Cycle through color types again");
+  await runSwatchShiftClickTests(view, valueSpan, [
+    {
+      value: "hsl(120, 100%, 25.1%)",
+      comment: "Color displayed as an HSL value",
+    },
+    {
+      value: "rgb(0, 128, 0)",
+      comment: "Color displayed as an RGB value",
+    },
+    {
+      value: "hwb(120 0% 49.8%)",
+      comment: "Color displayed as an HWB value.",
+    },
+    {
+      value: "green",
+      comment: "Color displayed as a color name",
+    },
+    {
+      value: "#008000",
+      comment: "Color displayed as an authored value",
+    },
+    {
+      value: "hsl(120, 100%, 25.1%)",
+      comment: "Color displayed as an HSL value again",
+    },
+  ]);
+}
+
+async function checkColorCyclingWithColorPicker(inspector, view) {
+  // Enforce hex format for this test
+  await pushPref("devtools.defaultColorUnit", "hex");
+
+  info("Select a new node for this test");
+  await selectNode("p", inspector);
+  const { valueSpan } = getRuleViewProperty(view, "p", "color");
+
+  checkColorValue(valueSpan, "#00f", "Color has the expected initial value");
+
+  checkSwatchShiftClick(
+    view,
+    valueSpan,
+    "hsl(240, 100%, 50%)",
+    "Color has the expected value after a shift+click"
+  );
+
+  info("Opening the color picker");
+  const swatchElement = valueSpan.querySelector(".ruleview-colorswatch");
+  const picker = view.tooltips.getTooltip("colorPicker");
+  const onColorPickerReady = picker.once("ready");
+  swatchElement.click();
+  await onColorPickerReady;
+
+  info("Hide the color picker with escape");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+  const { spectrum } = cPicker;
+  const onHidden = cPicker.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", spectrum.element.ownerDocument.defaultView);
+  await onHidden;
+  await onModifications;
+
+  is(
+    swatchElement.parentNode.dataset.color,
+    "hsl(240, 100%, 50%)",
+    "data-color is still using the correct format"
+  );
+}
+
+async function runSwatchShiftClickTests(view, valueSpan, tests) {
+  for (const { value, comment } of tests) {
+    await checkSwatchShiftClick(view, valueSpan, value, comment);
+  }
+}
+
+async function checkSwatchShiftClick(view, valueSpan, expectedValue, comment) {
+  const swatchNode = valueSpan.querySelector(".ruleview-colorswatch");
+  const colorNode = valueSpan.querySelector(".ruleview-color");
+
+  info(
+    "Shift-click the color swatch and wait for the color type and ruleview to update"
+  );
+  const onUnitChange = swatchNode.once("unit-change");
+
+  EventUtils.synthesizeMouseAtCenter(
+    swatchNode,
+    {
+      type: "mousedown",
+      shiftKey: true,
+    },
+    view.styleWindow
+  );
+
+  await onUnitChange;
+
+  is(colorNode.textContent, expectedValue, comment);
+}
+
+function checkColorValue(valueSpan, expectedColorValue, comment) {
+  const colorNode = valueSpan.querySelector(".ruleview-color");
+  is(colorNode.textContent, expectedColorValue, comment);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js b/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js
new file mode 100644
index 0000000000..e3556ed8ff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-display-grid-property.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and modifying the 'display: grid'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = (
+    await getRuleViewProperty(view, "#grid", "display", { wait: true })
+  ).valueSpan;
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info("Edit the 'grid' property value to 'block'.");
+  const editor = await focusEditableField(view, container);
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "block;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onHighlighterHidden;
+  await onDone;
+
+  info("Check the grid highlighter and grid toggle button are hidden.");
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+  ok(!gridToggle, "Grid highlighter toggle is not visible.");
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
new file mode 100644
index 0000000000..443f8432f8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-cancel.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests editing a property name or value and escaping will revert the
+// changes and restore the original value.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const prop = getTextProperty(view, 1, { "background-color": "#00F" });
+  const propEditor = prop.editor;
+
+  await focusEditableField(view, propEditor.nameSpan);
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "ESCAPE"]);
+
+  is(
+    propEditor.nameSpan.textContent,
+    "background-color",
+    "'background-color' property name is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "#00F background color is set."
+  );
+
+  await focusEditableField(view, propEditor.valueSpan);
+  const onValueDeleted = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "ESCAPE"]);
+  await onValueDeleted;
+
+  is(
+    propEditor.valueSpan.textContent,
+    "#00F",
+    "'#00F' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(0, 0, 255)",
+    "#00F background color is set."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
new file mode 100644
index 0000000000..78fa56eb35
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-click.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the property name and value editors can be triggered when
+// clicking on the property-name, the property-value, the colon or semicolon.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    margin: 0;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testEditPropertyAndCancel(inspector, view);
+});
+
+async function testEditPropertyAndCancel(inspector, view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = getTextProperty(view, 1, { margin: "0" }).editor;
+
+  info("Test editor is created when clicking on property name");
+  await focusEditableField(view, propEditor.nameSpan);
+  ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+
+  info("Test editor is created when clicking on ':' next to property name");
+  const nameRect = propEditor.nameSpan.getBoundingClientRect();
+  await focusEditableField(view, propEditor.nameSpan, nameRect.width + 1);
+  ok(propEditor.nameSpan.inplaceEditor, "Editor created for property name");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+
+  info("Test editor is created when clicking on property value");
+  await focusEditableField(view, propEditor.valueSpan);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // a modification to make sure the property is back to its original value
+  // => need to wait on "ruleview-changed" to avoid unhandled promises
+  let onRuleviewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+  await onRuleviewChanged;
+
+  info("Test editor is created when clicking on ';' next to property value");
+  const valueRect = propEditor.valueSpan.getBoundingClientRect();
+  await focusEditableField(view, propEditor.valueSpan, valueRect.width + 1);
+  ok(propEditor.valueSpan.inplaceEditor, "Editor created for property value");
+  // When cancelling a value edition, the text-property-editor will trigger
+  // a modification to make sure the property is back to its original value
+  // => need to wait on "ruleview-changed" to avoid unhandled promises
+  onRuleviewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["ESCAPE"]);
+  await onRuleviewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
new file mode 100644
index 0000000000..c27395a18d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-commit.js
@@ -0,0 +1,101 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test original value is correctly displayed when ESCaping out of the
+// inplace editor in the style inspector.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+// Test data format
+// {
+//  value: what char sequence to type,
+//  commitKey: what key to type to "commit" the change,
+//  modifiers: commitKey modifiers,
+//  expected: what value is expected as a result
+// }
+const testData = [
+  {
+    value: "red",
+    commitKey: "VK_ESCAPE",
+    modifiers: {},
+    expected: "#00F",
+  },
+  {
+    value: "red",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "red",
+  },
+  {
+    value: "invalid",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: "invalid",
+  },
+  {
+    value: "blue",
+    commitKey: "VK_TAB",
+    modifiers: { shiftKey: true },
+    expected: "blue",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const data of testData) {
+    await runTestData(view, data);
+  }
+});
+
+async function runTestData(view, { value, commitKey, modifiers, expected }) {
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = idRuleEditor.rule.textProps[0].editor;
+
+  info("Focusing the inplace editor field");
+
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "Focused editor should be the value span."
+  );
+
+  info("Entering test data " + value);
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendString(value, view.styleWindow);
+  view.debounce.flush();
+  await onRuleViewChanged;
+
+  info("Entering the commit key " + commitKey + " " + modifiers);
+  onRuleViewChanged = view.once("ruleview-changed");
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey(commitKey, modifiers);
+  await onBlur;
+  await onRuleViewChanged;
+
+  if (commitKey === "VK_ESCAPE") {
+    is(
+      propEditor.valueSpan.textContent,
+      expected,
+      "Value is as expected: " + expected
+    );
+  } else {
+    is(
+      propEditor.valueSpan.textContent,
+      expected,
+      "Value is as expected: " + expected
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
new file mode 100644
index 0000000000..cbcbc506fe
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed values of a style (the shorthand expansion) are
+// properly updated after the style is changed.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      padding: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await editAndCheck(view);
+});
+
+async function editAndCheck(view) {
+  const prop = getTextProperty(view, 1, { padding: "10px" });
+  const propEditor = prop.editor;
+  const newPaddingValue = "20px";
+
+  info("Focusing the inplace editor field");
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "Focused editor should be the value span."
+  );
+
+  const onPropertyChange = waitForComputedStyleProperty(
+    "#testid",
+    null,
+    "padding-top",
+    newPaddingValue
+  );
+  const onRefreshAfterPreview = once(view, "ruleview-changed");
+
+  info("Entering a new value");
+  EventUtils.sendString(newPaddingValue, view.styleWindow);
+
+  info(
+    "Waiting for the debounced previewValue to apply the " +
+      "changes to document"
+  );
+
+  view.debounce.flush();
+  await onPropertyChange;
+
+  info("Waiting for ruleview-refreshed after previewValue was applied.");
+  await onRefreshAfterPreview;
+
+  const onBlur = once(editor.input, "blur");
+
+  info("Entering the commit key and finishing edit");
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  info("Waiting for blur on the field");
+  await onBlur;
+
+  info("Waiting for the style changes to be applied");
+  await once(view, "ruleview-changed");
+
+  const computed = prop.computed;
+  const propNames = [
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+  ];
+
+  is(computed.length, propNames.length, "There should be 4 computed values");
+  propNames.forEach((propName, i) => {
+    is(
+      computed[i].name,
+      propName,
+      "Computed property #" + i + " has name " + propName
+    );
+    is(
+      computed[i].value,
+      newPaddingValue,
+      "Computed value of " + propName + " is as expected"
+    );
+  });
+
+  propEditor.expander.click();
+  const computedDom = propEditor.computed;
+  is(
+    computedDom.children.length,
+    propNames.length,
+    "There should be 4 nodes in the DOM"
+  );
+  propNames.forEach((propName, i) => {
+    is(
+      computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
+        .textContent,
+      newPaddingValue,
+      "Computed value of " + propName + " in DOM is as expected"
+    );
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
new file mode 100644
index 0000000000..2072ea5f96
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-increments.js
@@ -0,0 +1,820 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that increasing/decreasing values in rule view using
+// arrow keys works correctly.
+
+// Bug 1275446 - This test happen to hit the default timeout on linux32
+requestLongerTimeout(2);
+
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
+});
+
+const TEST_URI = `
+  <style>
+    #test {
+      margin-top: 0px;
+      padding-top: 0px;
+      color: #000000;
+      background-color: #000000;
+      background: none;
+      transition: initial;
+      z-index: 0;
+      opacity: 1;
+      line-height: 1;
+      --custom: 0;
+    }
+  </style>
+  <div id="test"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test", inspector);
+
+  await testMarginIncrements(view);
+  await testVariousUnitIncrements(view);
+  await testHexIncrements(view);
+  await testAlphaHexIncrements(view);
+  await testRgbIncrements(view);
+  await testHslIncrements(view);
+  await testRgbCss4Increments(view);
+  await testHslCss4Increments(view);
+  await testHwbIncrements(view);
+  await testShorthandIncrements(view);
+  await testOddCases(view);
+  await testZeroValueIncrements(view);
+  await testOpacityIncrements(view);
+  await testLineHeightIncrements(view);
+  await testCssVariableIncrements(view);
+});
+
+async function testMarginIncrements(view) {
+  info("Testing keyboard increments on the margin property");
+
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-top": "0px",
+  }).editor;
+
+  await runIncrementTest(marginPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "0.1px",
+      selectAll: true,
+    },
+    2: { start: "0px", end: "1px", selectAll: true },
+    3: { shift: true, start: "0px", end: "10px", selectAll: true },
+    4: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0.1px",
+      end: "0px",
+      selectAll: true,
+    },
+    5: { down: true, start: "0px", end: "-1px", selectAll: true },
+    6: { down: true, shift: true, start: "0px", end: "-10px", selectAll: true },
+    7: {
+      pageUp: true,
+      shift: true,
+      start: "0px",
+      end: "100px",
+      selectAll: true,
+    },
+    8: {
+      pageDown: true,
+      shift: true,
+      start: "0px",
+      end: "-100px",
+      selectAll: true,
+    },
+    9: { start: "0", end: "1px", selectAll: true },
+    10: { down: true, start: "0", end: "-1px", selectAll: true },
+  });
+}
+
+async function testVariousUnitIncrements(view) {
+  info("Testing keyboard increments on values with various units");
+
+  const paddingPropEditor = getTextProperty(view, 1, {
+    "padding-top": "0px",
+  }).editor;
+
+  await runIncrementTest(paddingPropEditor, view, {
+    1: { start: "0px", end: "1px", selectAll: true },
+    2: { start: "0pt", end: "1pt", selectAll: true },
+    3: { start: "0pc", end: "1pc", selectAll: true },
+    4: { start: "0em", end: "1em", selectAll: true },
+    5: { start: "0%", end: "1%", selectAll: true },
+    6: { start: "0in", end: "1in", selectAll: true },
+    7: { start: "0cm", end: "1cm", selectAll: true },
+    8: { start: "0mm", end: "1mm", selectAll: true },
+    9: { start: "0ex", end: "1ex", selectAll: true },
+    10: { start: "0", end: "1px", selectAll: true },
+    11: { down: true, start: "0", end: "-1px", selectAll: true },
+  });
+}
+
+async function testHexIncrements(view) {
+  info("Testing keyboard increments with hex colors");
+
+  const hexColorPropEditor = getTextProperty(view, 1, {
+    color: "#000000",
+  }).editor;
+
+  await runIncrementTest(hexColorPropEditor, view, {
+    1: { start: "#CCCCCC", end: "#CDCDCD", selectAll: true },
+    2: { shift: true, start: "#CCCCCC", end: "#DCDCDC", selectAll: true },
+    3: { start: "#CCCCCC", end: "#CDCCCC", selection: [1, 3] },
+    4: { shift: true, start: "#CCCCCC", end: "#DCCCCC", selection: [1, 3] },
+    5: { start: "#FFFFFF", end: "#FFFFFF", selectAll: true },
+    6: {
+      down: true,
+      shift: true,
+      start: "#000000",
+      end: "#000000",
+      selectAll: true,
+    },
+  });
+}
+
+async function testAlphaHexIncrements(view) {
+  info("Testing keyboard increments with alpha hex colors");
+
+  const hexColorPropEditor = getTextProperty(view, 1, {
+    color: "#000000",
+  }).editor;
+
+  await runIncrementTest(hexColorPropEditor, view, {
+    1: { start: "#CCCCCCAA", end: "#CDCDCDAB", selectAll: true },
+    2: { shift: true, start: "#CCCCCCAA", end: "#DCDCDCBA", selectAll: true },
+    3: { start: "#CCCCCCAA", end: "#CDCCCCAA", selection: [1, 3] },
+    4: { shift: true, start: "#CCCCCCAA", end: "#DCCCCCAA", selection: [1, 3] },
+    5: { start: "#FFFFFFFF", end: "#FFFFFFFF", selectAll: true },
+    6: {
+      down: true,
+      shift: true,
+      start: "#00000000",
+      end: "#00000000",
+      selectAll: true,
+    },
+  });
+}
+
+async function testRgbIncrements(view) {
+  info("Testing keyboard increments with rgb(a) colors");
+
+  const rgbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(rgbColorPropEditor, view, {
+    1: { start: "rgb(0,0,0)", end: "rgb(0,1,0)", selection: [6, 7] },
+    2: {
+      shift: true,
+      start: "rgb(0,0,0)",
+      end: "rgb(0,10,0)",
+      selection: [6, 7],
+    },
+    3: { start: "rgb(0,255,0)", end: "rgb(0,255,0)", selection: [6, 9] },
+    4: {
+      shift: true,
+      start: "rgb(0,250,0)",
+      end: "rgb(0,255,0)",
+      selection: [6, 9],
+    },
+    5: {
+      down: true,
+      start: "rgb(0,0,0)",
+      end: "rgb(0,0,0)",
+      selection: [6, 7],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "rgb(0,5,0)",
+      end: "rgb(0,0,0)",
+      selection: [6, 7],
+    },
+    7: {
+      start: "rgba(0,0,0,1)",
+      end: "rgba(0,0,0,1)",
+      selection: [11, 12],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "rgba(0,0,0,0.5)",
+      end: "rgba(0,0,0,0.6)",
+      selection: [12, 13],
+    },
+    9: {
+      down: true,
+      start: "rgba(0,0,0,0)",
+      end: "rgba(0,0,0,0)",
+      selection: [11, 12],
+    },
+  });
+}
+
+async function testHslIncrements(view) {
+  info("Testing keyboard increments with hsl(a) colors");
+
+  const hslColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hslColorPropEditor, view, {
+    1: { start: "hsl(0,0%,0%)", end: "hsl(0,1%,0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hsl(0,0%,0%)",
+      end: "hsl(0,10%,0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hsl(0,100%,0%)", end: "hsl(0,100%,0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hsl(0,95%,0%)",
+      end: "hsl(0,100%,0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hsl(0,0%,0%)",
+      end: "hsl(0,0%,0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hsl(0,5%,0%)",
+      end: "hsl(0,0%,0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hsla(0,0%,0%,1)",
+      end: "hsla(0,0%,0%,1)",
+      selection: [13, 14],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hsla(0,0%,0%,0.5)",
+      end: "hsla(0,0%,0%,0.6)",
+      selection: [14, 15],
+    },
+    9: {
+      down: true,
+      start: "hsla(0,0%,0%,0)",
+      end: "hsla(0,0%,0%,0)",
+      selection: [13, 14],
+    },
+  });
+}
+
+async function testRgbCss4Increments(view) {
+  info("Testing keyboard increments with rgb colors using CSS 4 Color syntax");
+
+  const rgbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(rgbColorPropEditor, view, {
+    1: { start: "rgb(0 0 0)", end: "rgb(0 1 0)", selection: [6, 7] },
+    2: {
+      shift: true,
+      start: "rgb(0 0 0)",
+      end: "rgb(0 10 0)",
+      selection: [6, 7],
+    },
+    3: { start: "rgb(0 255 0)", end: "rgb(0 255 0)", selection: [6, 9] },
+    4: {
+      shift: true,
+      start: "rgb(0 250 0)",
+      end: "rgb(0 255 0)",
+      selection: [6, 9],
+    },
+    5: {
+      down: true,
+      start: "rgb(0 0 0)",
+      end: "rgb(0 0 0)",
+      selection: [6, 7],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "rgb(0 5 0)",
+      end: "rgb(0 0 0)",
+      selection: [6, 7],
+    },
+    7: {
+      start: "rgb(0 0 0/1)",
+      end: "rgb(0 0 0/1)",
+      selection: [10, 11],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "rgb(0 0 0/0.5)",
+      end: "rgb(0 0 0/0.6)",
+      selection: [11, 12],
+    },
+    9: {
+      down: true,
+      start: "rgb(0 0 0/0)",
+      end: "rgb(0 0 0/0)",
+      selection: [10, 11],
+    },
+  });
+}
+
+async function testHslCss4Increments(view) {
+  info("Testing keyboard increments with hsl colors using CSS 4 Color syntax");
+
+  const hslColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hslColorPropEditor, view, {
+    1: { start: "hsl(0 0% 0%)", end: "hsl(0 1% 0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hsl(0 0% 0%)",
+      end: "hsl(0 10% 0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hsl(0 100% 0%)", end: "hsl(0 100% 0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hsl(0 95% 0%)",
+      end: "hsl(0 100% 0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hsl(0 0% 0%)",
+      end: "hsl(0 0% 0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hsl(0 5% 0%)",
+      end: "hsl(0 0% 0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hsl(0 0% 0%/1)",
+      end: "hsl(0 0% 0%/1)",
+      selection: [12, 13],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hsl(0 0% 0%/0.5)",
+      end: "hsl(0 0% 0%/0.6)",
+      selection: [13, 14],
+    },
+    9: {
+      down: true,
+      start: "hsl(0 0% 0%/0)",
+      end: "hsl(0 0% 0%/0)",
+      selection: [12, 13],
+    },
+  });
+}
+
+async function testHwbIncrements(view) {
+  info("Testing keyboard increments with hwb colors");
+
+  const hwbColorPropEditor = getTextProperty(view, 1, {
+    "background-color": "#000000",
+  }).editor;
+
+  await runIncrementTest(hwbColorPropEditor, view, {
+    1: { start: "hwb(0 0% 0%)", end: "hwb(0 1% 0%)", selection: [6, 8] },
+    2: {
+      shift: true,
+      start: "hwb(0 0% 0%)",
+      end: "hwb(0 10% 0%)",
+      selection: [6, 8],
+    },
+    3: { start: "hwb(0 100% 0%)", end: "hwb(0 100% 0%)", selection: [6, 10] },
+    4: {
+      shift: true,
+      start: "hwb(0 95% 0%)",
+      end: "hwb(0 100% 0%)",
+      selection: [6, 10],
+    },
+    5: {
+      down: true,
+      start: "hwb(0 0% 0%)",
+      end: "hwb(0 0% 0%)",
+      selection: [6, 8],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "hwb(0 5% 0%)",
+      end: "hwb(0 0% 0%)",
+      selection: [6, 8],
+    },
+    7: {
+      start: "hwb(0 0% 0%/1)",
+      end: "hwb(0 0% 0%/1)",
+      selection: [12, 13],
+    },
+    8: {
+      ...getSmallIncrementKey(),
+      start: "hwb(0 0% 0%/0.5)",
+      end: "hwb(0 0% 0%/0.6)",
+      selection: [13, 14],
+    },
+    9: {
+      down: true,
+      start: "hwb(0 0% 0%/0)",
+      end: "hwb(0 0% 0%/0)",
+      selection: [12, 13],
+    },
+  });
+}
+
+async function testShorthandIncrements(view) {
+  info("Testing keyboard increments within shorthand values");
+
+  const paddingPropEditor = getTextProperty(view, 1, {
+    "padding-top": "0px",
+  }).editor;
+
+  await runIncrementTest(paddingPropEditor, view, {
+    1: { start: "0px 0px 0px 0px", end: "0px 1px 0px 0px", selection: [4, 7] },
+    2: {
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "0px 10px 0px 0px",
+      selection: [4, 7],
+    },
+    3: { start: "0px 0px 0px 0px", end: "1px 0px 0px 0px", selectAll: true },
+    4: {
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "10px 0px 0px 0px",
+      selectAll: true,
+    },
+    5: {
+      down: true,
+      start: "0px 0px 0px 0px",
+      end: "0px 0px -1px 0px",
+      selection: [8, 11],
+    },
+    6: {
+      down: true,
+      shift: true,
+      start: "0px 0px 0px 0px",
+      end: "-10px 0px 0px 0px",
+      selectAll: true,
+    },
+    7: {
+      up: true,
+      start: "0.1em .1em 0em 0em",
+      end: "0.1em 1.1em 0em 0em",
+      selection: [6, 9],
+    },
+    8: {
+      up: true,
+      ...getSmallIncrementKey(),
+      start: "0.1em .9em 0em 0em",
+      end: "0.1em 1em 0em 0em",
+      selection: [6, 9],
+    },
+    9: {
+      up: true,
+      shift: true,
+      start: "0.2em .2em 0em 0em",
+      end: "0.2em 10.2em 0em 0em",
+      selection: [6, 9],
+    },
+  });
+}
+
+async function testOddCases(view) {
+  info("Testing some more odd cases");
+
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-top": "0px",
+  }).editor;
+
+  await runIncrementTest(marginPropEditor, view, {
+    1: { start: "98.7%", end: "99.7%", selection: [3, 3] },
+    2: {
+      ...getSmallIncrementKey(),
+      start: "98.7%",
+      end: "98.8%",
+      selection: [3, 3],
+    },
+    3: { start: "0", end: "1px" },
+    4: { down: true, start: "0", end: "-1px" },
+    5: { start: "'a=-1'", end: "'a=0'", selection: [4, 4] },
+    6: { start: "0 -1px", end: "0 0px", selection: [2, 2] },
+    7: { start: "url(-1)", end: "url(-1)", selection: [4, 4] },
+    8: {
+      start: "url('test1.1.png')",
+      end: "url('test1.2.png')",
+      selection: [11, 11],
+    },
+    9: {
+      start: "url('test1.png')",
+      end: "url('test2.png')",
+      selection: [9, 9],
+    },
+    10: {
+      shift: true,
+      start: "url('test1.1.png')",
+      end: "url('test11.1.png')",
+      selection: [9, 9],
+    },
+    11: {
+      down: true,
+      start: "url('test-1.png')",
+      end: "url('test-2.png')",
+      selection: [9, 11],
+    },
+    12: {
+      start: "url('test1.1.png')",
+      end: "url('test1.2.png')",
+      selection: [11, 12],
+    },
+    13: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "url('test-0.png')",
+      end: "url('test--0.1.png')",
+      selection: [10, 11],
+    },
+    14: {
+      ...getSmallIncrementKey(),
+      start: "url('test--0.1.png')",
+      end: "url('test-0.png')",
+      selection: [10, 14],
+    },
+  });
+}
+
+async function testZeroValueIncrements(view) {
+  info("Testing a valid unit is added when incrementing from 0");
+
+  const backgroundPropEditor = getTextProperty(view, 1, {
+    background: "none",
+  }).editor;
+  await runIncrementTest(backgroundPropEditor, view, {
+    1: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-0.png) no-repeat 1px 0",
+      selection: [26, 26],
+    },
+    2: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-0.png) no-repeat 0 1px",
+      selection: [28, 28],
+    },
+    3: {
+      start: "url(test-0.png) no-repeat center/0",
+      end: "url(test-0.png) no-repeat center/1px",
+      selection: [34, 34],
+    },
+    4: {
+      start: "url(test-0.png) no-repeat 0 0",
+      end: "url(test-1.png) no-repeat 0 0",
+      selection: [10, 10],
+    },
+    5: {
+      start: "linear-gradient(0, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 0, blue 0)",
+      selection: [17, 17],
+    },
+    6: {
+      start: "linear-gradient(1deg, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 1px, blue 0)",
+      selection: [27, 27],
+    },
+    7: {
+      start: "linear-gradient(1deg, red 0, blue 0)",
+      end: "linear-gradient(1deg, red 0, blue 1px)",
+      selection: [35, 35],
+    },
+  });
+
+  const transitionPropEditor = getTextProperty(view, 1, {
+    transition: "initial",
+  }).editor;
+  await runIncrementTest(transitionPropEditor, view, {
+    1: { start: "all 0 ease-out", end: "all 1s ease-out", selection: [5, 5] },
+    2: {
+      start: "margin 4s, color 0",
+      end: "margin 4s, color 1s",
+      selection: [18, 18],
+    },
+  });
+
+  const zIndexPropEditor = getTextProperty(view, 1, { "z-index": "0" }).editor;
+  await runIncrementTest(zIndexPropEditor, view, {
+    1: { start: "0", end: "1", selection: [1, 1] },
+  });
+}
+
+async function testOpacityIncrements(view) {
+  info("Testing keyboard increments on the opacity property");
+
+  const opacityPropEditor = getTextProperty(view, 1, { opacity: "1" }).editor;
+
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0.5",
+      end: "0.51",
+      selectAll: true,
+    },
+    2: { start: "0", end: "0.1", selectAll: true },
+    3: { shift: true, start: "0", end: "1", selectAll: true },
+    4: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0.1",
+      end: "0.09",
+      selectAll: true,
+    },
+    5: { down: true, start: "0", end: "-0.1", selectAll: true },
+    6: { down: true, shift: true, start: "0", end: "-1", selectAll: true },
+    7: { pageUp: true, shift: true, start: "0", end: "10", selectAll: true },
+    8: { pageDown: true, shift: true, start: "0", end: "-10", selectAll: true },
+    9: { start: "0.7", end: "0.8", selectAll: true },
+    10: { down: true, start: "0", end: "-0.1", selectAll: true },
+  });
+}
+
+async function testLineHeightIncrements(view) {
+  info("Testing keyboard increments on the line height property");
+
+  const opacityPropEditor = getTextProperty(view, 1, {
+    "line-height": "1",
+  }).editor;
+
+  // line-height accepts both values with or without units, check that we don't
+  // force using a unit if none was specified.
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "0.1",
+      selectAll: true,
+    },
+    2: {
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "0.1px",
+      selectAll: true,
+    },
+    3: {
+      start: "0",
+      end: "1",
+      selectAll: true,
+    },
+    4: {
+      start: "0px",
+      end: "1px",
+      selectAll: true,
+    },
+    5: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "-0.1",
+      selectAll: true,
+    },
+    6: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0px",
+      end: "-0.1px",
+      selectAll: true,
+    },
+    7: {
+      down: true,
+      start: "0",
+      end: "-1",
+      selectAll: true,
+    },
+    8: {
+      down: true,
+      start: "0px",
+      end: "-1px",
+      selectAll: true,
+    },
+  });
+}
+
+async function testCssVariableIncrements(view) {
+  info("Testing keyboard increments on the css variable property");
+
+  const opacityPropEditor = getTextProperty(view, 1, {
+    "--custom": "0",
+  }).editor;
+
+  await runIncrementTest(opacityPropEditor, view, {
+    1: {
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "0.1",
+      selectAll: true,
+    },
+    2: {
+      start: "0",
+      end: "1",
+      selectAll: true,
+    },
+    3: {
+      down: true,
+      ...getSmallIncrementKey(),
+      start: "0",
+      end: "-0.1",
+      selectAll: true,
+    },
+    4: {
+      down: true,
+      start: "0",
+      end: "-1",
+      selectAll: true,
+    },
+  });
+}
+
+async function runIncrementTest(propertyEditor, view, tests) {
+  propertyEditor.valueSpan.scrollIntoView();
+  const editor = await focusEditableField(view, propertyEditor.valueSpan);
+
+  for (const test in tests) {
+    await testIncrement(editor, tests[test], view, propertyEditor);
+  }
+
+  // Blur the field to put back the UI in its initial state (and avoid pending
+  // requests when the test ends).
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  view.debounce.flush();
+  await onRuleViewChanged;
+}
+
+async function testIncrement(editor, options, view) {
+  editor.input.value = options.start;
+  const input = editor.input;
+
+  if (options.selectAll) {
+    input.select();
+  } else if (options.selection) {
+    input.setSelectionRange(options.selection[0], options.selection[1]);
+  }
+
+  is(input.value, options.start, "Value initialized at " + options.start);
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onKeyUp = once(input, "keyup");
+
+  let key;
+  key = options.down ? "VK_DOWN" : "VK_UP";
+  if (options.pageDown) {
+    key = "VK_PAGE_DOWN";
+  } else if (options.pageUp) {
+    key = "VK_PAGE_UP";
+  }
+
+  let smallIncrementKey = { ctrlKey: options.ctrl };
+  if (lazy.AppConstants.platform === "macosx") {
+    smallIncrementKey = { altKey: options.alt };
+  }
+
+  EventUtils.synthesizeKey(
+    key,
+    { ...smallIncrementKey, shiftKey: options.shift },
+    view.styleWindow
+  );
+
+  await onKeyUp;
+
+  // Only expect a change if the value actually changed!
+  if (options.start !== options.end) {
+    view.debounce.flush();
+    await onRuleViewChanged;
+  }
+
+  is(input.value, options.end, "Value changed to " + options.end);
+}
+
+function getSmallIncrementKey() {
+  if (lazy.AppConstants.platform === "macosx") {
+    return { alt: true };
+  }
+  return { ctrl: true };
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
new file mode 100644
index 0000000000..172c01d511
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-order.js
@@ -0,0 +1,130 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Checking properties orders and overrides in the rule-view.
+
+const TEST_URI = "<style>#testid {}</style><div id='testid'>Styled Node</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const elementStyle = view._elementStyle;
+  const elementRule = elementStyle.rules[1];
+
+  info("Checking rules insertion order and checking the applied style");
+  const firstProp = await addProperty(view, 1, "background-color", "green");
+  let secondProp = await addProperty(view, 1, "background-color", "blue");
+
+  is(elementRule.textProps[0], firstProp, "Rules should be in addition order.");
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules should be in addition order."
+  );
+
+  // rgb(0, 0, 255) = blue
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Second property should have been used."
+  );
+
+  info("Removing the second property and checking the applied style again");
+  await removeProperty(view, secondProp);
+  // rgb(0, 128, 0) = green
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 128, 0)",
+    "After deleting second property, first should be used."
+  );
+
+  info(
+    "Creating a new second property and checking that the insertion order " +
+      "is still the same"
+  );
+
+  secondProp = await addProperty(view, 1, "background-color", "blue");
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "New property should be used."
+  );
+  is(
+    elementRule.textProps[0],
+    firstProp,
+    "Rules shouldn't have switched places."
+  );
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules shouldn't have switched places."
+  );
+
+  info("Disabling the second property and checking the applied style");
+  await togglePropStatus(view, secondProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 128, 0)",
+    "After disabling second property, first value should be used"
+  );
+
+  info("Disabling the first property too and checking the applied style");
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgba(0, 0, 0, 0)",
+    "After disabling both properties, value should be empty."
+  );
+
+  info("Re-enabling the second propertyt and checking the applied style");
+  await togglePropStatus(view, secondProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Value should be set correctly after re-enabling"
+  );
+
+  info(
+    "Re-enabling the first property and checking the insertion order " +
+      "is still respected"
+  );
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Re-enabling an earlier property shouldn't make it override " +
+      "a later property."
+  );
+  is(
+    elementRule.textProps[0],
+    firstProp,
+    "Rules shouldn't have switched places."
+  );
+  is(
+    elementRule.textProps[1],
+    secondProp,
+    "Rules shouldn't have switched places."
+  );
+  info("Modifying the first property and checking the applied style");
+  await setProperty(view, firstProp, "purple");
+
+  is(
+    await getValue("#testid", "background-color"),
+    "rgb(0, 0, 255)",
+    "Modifying an earlier property shouldn't override a later property."
+  );
+});
+
+async function getValue(selector, propName) {
+  const value = await getComputedStyleProperty(selector, null, propName);
+  return value;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js
new file mode 100644
index 0000000000..c929d252da
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_01.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property name and pressing the
+// return key, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the first property in the #testid rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[0];
+
+  info("Deleting the name of that property to remove the property");
+  await removeProperty(view, prop, false);
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info("Getting the new first property in the rule");
+  prop = rule.textProps[0];
+
+  let editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Focus should have moved to the next property name"
+  );
+
+  info("Deleting the name of that property to remove the property");
+  view.styleDocument.activeElement.blur();
+  await removeProperty(view, prop, false);
+
+  newValue = await getRulePropertyValue(0, 0, "color");
+  is(newValue, "", "color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.newPropSpan),
+    editor,
+    "Focus should have moved to the new property span"
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  is(
+    rule.editor.propertyList.children.length,
+    1,
+    "Should have the new property span."
+  );
+
+  view.styleDocument.activeElement.blur();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js
new file mode 100644
index 0000000000..b5f0673b5d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_02.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property value and pressing the
+// return key, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the first property in the rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[0];
+
+  info("Clearing the property value");
+  await setProperty(view, prop, null, { blurNewProperty: false });
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info("Getting the new first property in the rule");
+  prop = rule.textProps[0];
+
+  let editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Focus should have moved to the next property name"
+  );
+  view.styleDocument.activeElement.blur();
+
+  info("Clearing the property value");
+  await setProperty(view, prop, null, { blurNewProperty: false });
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.newPropSpan),
+    editor,
+    "Focus should have moved to the new property span"
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  is(
+    rule.editor.propertyList.children.length,
+    1,
+    "Should have the new property span."
+  );
+
+  view.styleDocument.activeElement.blur();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js
new file mode 100644
index 0000000000..d5bc376dd4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_03.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests removing a property by clearing the property name and pressing shift
+// and tab keys, and checks if the focus is moved to the appropriate editable
+// field.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: #00F;
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Getting the second property in the rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  let prop = rule.textProps[1];
+
+  info("Clearing the property value and pressing shift-tab");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+  const onValueDone = view.once("ruleview-changed");
+  editor.input.value = "";
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onValueDone;
+
+  let newValue = await getRulePropertyValue(0, 0, "color");
+  is(newValue, "", "color should have been unset.");
+  is(
+    prop.editor.valueSpan.textContent,
+    "",
+    "'' property value is correctly set."
+  );
+
+  info("Pressing shift-tab again to focus the previous property value");
+  const onValueFocused = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onValueFocused;
+
+  info("Getting the first property in the rule");
+  prop = rule.textProps[0];
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(prop.editor.valueSpan),
+    editor,
+    "Focus should have moved to the previous property value"
+  );
+
+  info("Pressing shift-tab again to focus the property name");
+  const onNameFocused = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onNameFocused;
+
+  info("Removing the name and pressing shift-tab to focus the selector");
+  const onNameDeleted = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+  EventUtils.synthesizeKey("VK_TAB", { shiftKey: true }, view.styleWindow);
+  await onNameDeleted;
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  is(
+    inplaceEditor(rule.editor.selectorText),
+    editor,
+    "Focus should have moved to the selector text."
+  );
+  is(rule.textProps.length, 0, "All properties should have been removed.");
+  ok(
+    !rule.editor.propertyList.hasChildNodes(),
+    "Should not have any properties."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js
new file mode 100644
index 0000000000..0d9915285c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-remove_04.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that removing the only declaration from a rule and unselecting then re-selecting
+// the element will not restore the removed declaration. Bug 1512956
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    color: #00F;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+  <div id='empty'></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Select original node");
+  await selectNode("#testid", inspector);
+
+  info("Get the first property in the #testid rule");
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Delete the property name to remove the declaration");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await removeProperty(view, prop, false);
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(rule.textProps.length, 0, "No CSS properties left on the rule");
+
+  info("Select another node");
+  await selectNode("#empty", inspector);
+
+  info("Select original node again");
+  await selectNode("#testid", inspector);
+
+  is(rule.textProps.length, 0, "Still no CSS properties on the rule");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js
new file mode 100644
index 0000000000..258c0a0f88
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_01.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing adding new properties via the inplace-editors in the rule
+// view.
+// FIXME: some of the inplace-editor focus/blur/commit/revert stuff
+// should be factored out in head.js
+
+const ALL_CHANNELS = Ci.nsITelemetry.DATASET_ALL_CHANNELS;
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+var BACKGROUND_IMAGE_URL = 'url("' + URL_ROOT + 'doc_test_image.png")';
+
+var TEST_DATA = [
+  { name: "border-color", value: "red", isValid: true },
+  { name: "background-image", value: BACKGROUND_IMAGE_URL, isValid: true },
+  { name: "border", value: "solid 1px foo", isValid: false },
+];
+
+const DATA = [
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+  {
+    timestamp: null,
+    category: "devtools.main",
+    method: "edit_rule",
+    object: "ruleview",
+  },
+];
+
+add_task(async function () {
+  // Let's reset the counts.
+  Services.telemetry.clearEvents();
+
+  // Ensure no events have been logged
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  ok(!snapshot.parent, "No events have been logged for the main process");
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  for (const { name, value, isValid } of TEST_DATA) {
+    await testEditProperty(view, rule, name, value, isValid);
+  }
+
+  checkResults();
+});
+
+async function testEditProperty(view, rule, name, value, isValid) {
+  info("Test editing existing property name/value fields");
+
+  const doc = rule.editor.doc;
+  const prop = rule.textProps[0];
+
+  info("Focusing an existing property name in the rule-view");
+  let editor = await focusEditableField(view, prop.editor.nameSpan, 32, 1);
+
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "The property name editor got focused"
+  );
+  let input = editor.input;
+
+  info(
+    "Entering a new property name, including : to commit and " +
+      "focus the value"
+  );
+  const onValueFocus = once(rule.editor.element, "focus", true);
+  const onNameDone = view.once("ruleview-changed");
+  EventUtils.sendString(name + ":", doc.defaultView);
+  await onValueFocus;
+  await onNameDone;
+
+  // Getting the value editor after focus
+  editor = inplaceEditor(doc.activeElement);
+  input = editor.input;
+  is(inplaceEditor(prop.editor.valueSpan), editor, "Focus moved to the value.");
+
+  info("Entering a new value, including ; to commit and blur the value");
+  const onValueDone = view.once("ruleview-changed");
+  const onBlur = once(input, "blur");
+  EventUtils.sendString(value + ";", doc.defaultView);
+  await onBlur;
+  await onValueDone;
+
+  is(
+    prop.editor.isValid(),
+    isValid,
+    value + " is " + isValid ? "valid" : "invalid"
+  );
+
+  info("Checking that the style property was changed on the content page");
+  const propValue = await getRulePropertyValue(0, 0, name);
+  if (isValid) {
+    is(propValue, value, name + " should have been set.");
+  } else {
+    isnot(propValue, value, name + " shouldn't have been set.");
+  }
+}
+
+function checkResults() {
+  const snapshot = Services.telemetry.snapshotEvents(ALL_CHANNELS, true);
+  const events = snapshot.parent.filter(
+    event =>
+      event[1] === "devtools.main" &&
+      event[2] === "edit_rule" &&
+      event[3] === "ruleview"
+  );
+
+  for (const i in DATA) {
+    const [timestamp, category, method, object] = events[i];
+    const expected = DATA[i];
+
+    // ignore timestamp
+    ok(timestamp > 0, "timestamp is greater than 0");
+    is(category, expected.category, "category is correct");
+    is(method, expected.method, "method is correct");
+    is(object, expected.object, "object is correct");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
new file mode 100644
index 0000000000..373f78eab6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
@@ -0,0 +1,143 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test several types of rule-view property edition
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await testEditProperty(inspector, view);
+  await testDisableProperty(inspector, view);
+  await testPropertyStillMarkedDirty(inspector, view);
+});
+
+async function testEditProperty(inspector, ruleView) {
+  const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
+
+  let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
+  let input = editor.input;
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Next focused editor should be the name editor."
+  );
+
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
+  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
+  input.select();
+
+  info(
+    'Entering property name "border-color" followed by a colon to ' +
+      "focus the value"
+  );
+  const onNameDone = ruleView.once("ruleview-changed");
+  const onFocus = once(idRule.editor.element, "focus", true);
+  EventUtils.sendString("border-color:", ruleView.styleWindow);
+  await onFocus;
+  await onNameDone;
+
+  info("Verifying that the focused field is the valueSpan");
+  editor = inplaceEditor(ruleView.styleDocument.activeElement);
+  input = editor.input;
+  is(
+    inplaceEditor(prop.editor.valueSpan),
+    editor,
+    "Focus should have moved to the value."
+  );
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  info("Entering a value following by a semi-colon to commit it");
+  const onBlur = once(editor.input, "blur");
+  // Use sendChar() to pass each character as a string so that we can test
+  // prop.editor.warning.hidden after each character.
+  for (const ch of "red;") {
+    const onPreviewDone = ruleView.once("ruleview-changed");
+    EventUtils.sendChar(ch, ruleView.styleWindow);
+    ruleView.debounce.flush();
+    await onPreviewDone;
+    is(
+      prop.editor.warning.hidden,
+      true,
+      "warning triangle is hidden or shown as appropriate"
+    );
+  }
+  await onBlur;
+
+  const newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "border-color should have been set.");
+
+  ruleView.styleDocument.activeElement.blur();
+  await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}
+
+async function testDisableProperty(inspector, ruleView) {
+  const prop = getTextProperty(ruleView, 1, {
+    "border-color": "red",
+    color: "red",
+  });
+
+  info("Disabling a property");
+  await togglePropStatus(ruleView, prop);
+
+  let newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "", "Border-color should have been unset.");
+
+  info("Enabling the property again");
+  await togglePropStatus(ruleView, prop);
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "Border-color should have been reset.");
+}
+
+async function testPropertyStillMarkedDirty(inspector, ruleView) {
+  // Select an unstyled node.
+  await selectNode("#testid2", inspector);
+
+  // Select the original node again.
+  await selectNode("#testid", inspector);
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
new file mode 100644
index 0000000000..e6ec0aef33
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that emptying out an existing value removes the property and
+// doesn't cause any other issues.  See also Bug 1150780.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background-color: blue;
+    font-size: 12px;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = getTextProperty(view, 1, {
+    "background-color": "blue",
+  }).editor;
+
+  await focusEditableField(view, propEditor.valueSpan);
+
+  info("Deleting all the text out of a value field");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["DELETE", "RETURN"]);
+  await onRuleViewChanged;
+
+  info("Pressing enter a couple times to cycle through editors");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
+  onRuleViewChanged = view.once("ruleview-changed");
+  await sendKeysAndWaitForFocus(view, ruleEditor.element, ["RETURN"]);
+  await onRuleViewChanged;
+
+  isnot(propEditor.nameSpan.style.display, "none", "The name span is visible");
+  is(ruleEditor.rule.textProps.length, 2, "Correct number of props");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js
new file mode 100644
index 0000000000..070832710b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_04.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a disabled property remains disabled when the escaping out of
+// the property editor.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+
+  info("Disabling a property");
+  await togglePropStatus(view, prop);
+
+  const newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  await testEditDisableProperty(view, prop, "name", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_ESCAPE");
+  await testEditDisableProperty(view, prop, "value", "VK_TAB");
+  await testEditDisableProperty(view, prop, "value", "VK_RETURN");
+});
+
+async function testEditDisableProperty(view, prop, fieldType, commitKey) {
+  const field =
+    fieldType === "name" ? prop.editor.nameSpan : prop.editor.valueSpan;
+
+  const editor = await focusEditableField(view, field);
+
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "property is not overridden."
+  );
+  is(
+    prop.editor.enable.style.visibility,
+    "hidden",
+    "property enable checkbox is hidden."
+  );
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should remain unset.");
+
+  let onChangeDone;
+  if (fieldType === "value") {
+    onChangeDone = view.once("ruleview-changed");
+  }
+
+  const onBlur = once(editor.input, "blur");
+  EventUtils.synthesizeKey(commitKey, {}, view.styleWindow);
+  await onBlur;
+  await onChangeDone;
+
+  ok(!prop.enabled, "property is disabled.");
+  ok(
+    prop.editor.element.classList.contains("ruleview-overridden"),
+    "property is overridden."
+  );
+  is(
+    prop.editor.enable.style.visibility,
+    "visible",
+    "property enable checkbox is visible."
+  );
+  ok(
+    !prop.editor.enable.getAttribute("checked"),
+    "property enable checkbox is not checked."
+  );
+
+  newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should remain unset.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js
new file mode 100644
index 0000000000..9bfc002a4a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_05.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a disabled property is re-enabled if the property name or value is
+// modified
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+
+  info("Disabling background-color property");
+  await togglePropStatus(view, prop);
+
+  let newValue = await getRulePropertyValue(0, 0, "background-color");
+  is(newValue, "", "background-color should have been unset.");
+
+  info(
+    "Entering a new property name, including : to commit and " +
+      "focus the value"
+  );
+
+  await focusEditableField(view, prop.editor.nameSpan);
+  const onNameDone = view.once("ruleview-changed");
+  EventUtils.sendString("border-color:", view.styleWindow);
+  await onNameDone;
+
+  info("Escape editing the property value");
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onValueDone;
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "blue", "border-color should have been set.");
+
+  ok(prop.enabled, "border-color property is enabled.");
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "border-color is not overridden"
+  );
+
+  info("Disabling border-color property");
+  await togglePropStatus(view, prop);
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "", "border-color should have been unset.");
+
+  info("Enter a new property value for the border-color property");
+  await setProperty(view, prop, "red");
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "new border-color should have been set.");
+
+  ok(prop.enabled, "border-color property is enabled.");
+  ok(
+    !prop.editor.element.classList.contains("ruleview-overridden"),
+    "border-color is not overridden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js
new file mode 100644
index 0000000000..1b9a04ba5d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_06.js
@@ -0,0 +1,68 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that editing a property's priority is behaving correctly, and disabling
+// and editing the property will re-enable the property.
+
+const TEST_URI = `
+  <style type='text/css'>
+  body {
+    background-color: green !important;
+  }
+  body {
+    background-color: red;
+  }
+  </style>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("body", inspector);
+
+  const prop = getTextProperty(view, 1, { "background-color": "red" });
+
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+
+  await setProperty(view, prop, "red !important");
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red !important",
+    "'red !important' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "red background color is set."
+  );
+
+  info("Disabling red background color property");
+  await togglePropStatus(view, prop);
+
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+
+  await setProperty(view, prop, "red");
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red",
+    "'red' property value is correctly set."
+  );
+  ok(prop.enabled, "red background-color property is enabled.");
+  is(
+    await getComputedStyleProperty("body", null, "background-color"),
+    "rgb(0, 128, 0)",
+    "green background color is set."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
new file mode 100644
index 0000000000..9edd910fa6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding multiple values will enable the property even if the
+// property does not change, and that the extra values are added correctly.
+
+const STYLE = "#testid { background-color: #f00 }";
+
+const TEST_URI_INLINE_SHEET = `
+  <style>${STYLE}</style>
+  <div id='testid'>Styled Node</div>
+`;
+
+const TEST_URI_CONSTRUCTED_SHEET = `
+  <div id='testid'>Styled Node</div>
+  <script>
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync("${STYLE}");
+    document.adoptedStyleSheets.push(sheet);
+  </script>
+`;
+
+async function runTest(testUri) {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(testUri));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Disabling red background color property");
+  await togglePropStatus(view, prop);
+  ok(!prop.enabled, "red background-color property is disabled.");
+
+  const editor = await focusEditableField(view, prop.editor.valueSpan);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "red; color: red;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onDone;
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red",
+    "'red' property value is correctly set."
+  );
+  ok(prop.enabled, "red background-color property is enabled.");
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "red background color is set."
+  );
+
+  const propEditor = rule.textProps[1].editor;
+  is(
+    propEditor.nameSpan.textContent,
+    "color",
+    "new 'color' property name is correctly set."
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "red",
+    "new 'red' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "color"),
+    "rgb(255, 0, 0)",
+    "red color is set."
+  );
+}
+
+add_task(async function test_inline_sheet() {
+  await runTest(TEST_URI_INLINE_SHEET);
+});
+
+add_task(async function test_constructed_sheet() {
+  await runTest(TEST_URI_CONSTRUCTED_SHEET);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js
new file mode 100644
index 0000000000..d00a7c2c24
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_08.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that renaming a property works.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: #FFF;
+  }
+  </style>
+  <div style='color: red' id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Get the color property editor");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  is(ruleEditor.rule.textProps[0].name, "color");
+
+  info("Focus the property name field");
+  await focusEditableField(ruleEditor.ruleView, propEditor.nameSpan, 32, 1);
+
+  info("Rename the property to background-color");
+  // Expect 3 events: the value editor being focused, the ruleview-changed event
+  // which signals that the new value has been previewed (fires once when the
+  // value gets focused), and the markupmutation event since we're modifying an
+  // inline style.
+  const onValueFocus = once(ruleEditor.element, "focus", true);
+  let onRuleViewChanged = ruleEditor.ruleView.once("ruleview-changed");
+  const onMutation = inspector.once("markupmutation");
+  EventUtils.sendString("background-color:", ruleEditor.doc.defaultView);
+  await onValueFocus;
+  await onRuleViewChanged;
+  await onMutation;
+
+  is(ruleEditor.rule.textProps[0].name, "background-color");
+  await waitForComputedStyleProperty(
+    "#testid",
+    null,
+    "background-color",
+    "rgb(255, 0, 0)"
+  );
+
+  is(
+    await getComputedStyleProperty("#testid", null, "color"),
+    "rgb(255, 255, 255)",
+    "color is white"
+  );
+
+  // The value field is still focused. Blur it now and wait for the
+  // ruleview-changed event to avoid pending requests.
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await onRuleViewChanged;
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js
new file mode 100644
index 0000000000..ab54c98729
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_09.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a newProperty editor is only created if no other editor was
+// previously displayed.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      background-color: blue;
+    }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testClickOnEmptyAreaToCloseEditor(inspector, view);
+});
+
+function synthesizeMouseOnEmptyArea(view) {
+  // any text property editor will do
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
+  const valueContainer = propEditor.valueContainer;
+  const valueRect = valueContainer.getBoundingClientRect();
+  // click right next to the ";" at the end of valueContainer
+  EventUtils.synthesizeMouse(
+    valueContainer,
+    valueRect.width + 1,
+    1,
+    {},
+    view.styleWindow
+  );
+}
+
+async function testClickOnEmptyAreaToCloseEditor(inspector, view) {
+  // Start at the beginning: start to add a rule to the element's style
+  // declaration, add some text, then press escape.
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const prop = getTextProperty(view, 1, { "background-color": "blue" });
+  const propEditor = prop.editor;
+
+  info("Create a property value editor");
+  let editor = await focusEditableField(view, propEditor.valueSpan);
+  ok(editor.input, "The inplace-editor field is ready");
+
+  info(
+    "Close the property value editor by clicking on an empty area " +
+      "in the rule editor"
+  );
+  const onRuleViewChanged = view.once("ruleview-changed");
+  let onBlur = once(editor.input, "blur");
+  synthesizeMouseOnEmptyArea(view);
+  await onBlur;
+  await onRuleViewChanged;
+  ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");
+
+  info("Create new newProperty editor by clicking again on the empty area");
+  const onFocus = once(ruleEditor.element, "focus", true);
+  synthesizeMouseOnEmptyArea(view);
+  await onFocus;
+  editor = inplaceEditor(ruleEditor.element.ownerDocument.activeElement);
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    editor,
+    "New property editor was created"
+  );
+
+  info("Close the newProperty editor by clicking again on the empty area");
+  onBlur = once(editor.input, "blur");
+  synthesizeMouseOnEmptyArea(view);
+  await onBlur;
+
+  ok(!view.isEditing, "No inplace editor should be displayed in the ruleview");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
new file mode 100644
index 0000000000..3db2164b0c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_10.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+  <style>
+    div {
+      color: red;
+      width: 10; /* This document is in quirks mode so this value should be valid */
+    }
+  </style>
+  <div></div>
+`;
+
+// Test that CSS property names are case insensitive when validating, and that
+// quirks mode is accounted for when validating.
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView } = await openRuleView();
+
+  await selectNode("div", inspector);
+  let prop = getTextProperty(ruleView, 1, { color: "red" });
+
+  let onRuleViewChanged;
+
+  info(`Rename the CSS property name to "Color"`);
+  onRuleViewChanged = ruleView.once("ruleview-changed");
+  await renameProperty(ruleView, prop, "Color");
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(prop.overridden, false, "Titlecase property is not overriden");
+  is(prop.enabled, true, "Titlecase property is enabled");
+  is(prop.isNameValid(), true, "Titlecase property is valid");
+
+  info(`Rename the CSS property name to "COLOR"`);
+  onRuleViewChanged = ruleView.once("ruleview-changed");
+  await renameProperty(ruleView, prop, "COLOR");
+  info("Wait for Rule view to update");
+  await onRuleViewChanged;
+
+  is(prop.overridden, false, "Uppercase property is not overriden");
+  is(prop.enabled, true, "Uppercase property is enabled");
+  is(prop.isNameValid(), true, "Uppercase property is valid");
+
+  info(`Checking width validity`);
+  prop = getTextProperty(ruleView, 1, { width: "10" });
+  is(prop.isNameValid(), true, "width is a valid property");
+  is(prop.isValid(), true, "10 is a valid property value in quirks mode");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
new file mode 100644
index 0000000000..52e11097cc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click-on-scrollbar.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing ruleview inplace-editor is not blurred when clicking on the ruleview
+// container scrollbar.
+
+const TEST_URI = `
+  <style type="text/css">
+    div.testclass {
+      color: black;
+    }
+    .a {
+      color: #aaa;
+    }
+    .b {
+      color: #bbb;
+    }
+    .c {
+      color: #ccc;
+    }
+    .d {
+      color: #ddd;
+    }
+    .e {
+      color: #eee;
+    }
+    .f {
+      color: #fff;
+    }
+  </style>
+  <div class="testclass a b c d e f">Styled Node</div>
+`;
+
+add_task(async function () {
+  info("Toolbox height should be small enough to force scrollbars to appear");
+  await new Promise(done => {
+    const options = { set: [["devtools.toolbox.footer.height", 200]] };
+    SpecialPowers.pushPrefEnv(options, done);
+  });
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+
+  info("Check we have an overflow on the ruleview container.");
+  const container = view.element;
+  const hasScrollbar = container.offsetHeight < container.scrollHeight;
+  ok(hasScrollbar, "The rule view container should have a vertical scrollbar.");
+
+  info("Focusing an existing selector name in the rule-view.");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor is focused."
+  );
+
+  info("Click on the scrollbar element.");
+  await clickOnRuleviewScrollbar(view);
+
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused."
+  );
+
+  info("Check a new value can still be committed in the editable field");
+  const newValue = ".testclass.a.b.c.d.e.f";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Enter new value and commit.");
+  editor.input.value = newValue;
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+  ok(getRuleViewRule(view, newValue), "Rule with '" + newValue + " 'exists.");
+});
+
+async function clickOnRuleviewScrollbar(view) {
+  const container = view.element.parentNode;
+  const onScroll = once(container, "scroll");
+  const rect = container.getBoundingClientRect();
+  // click 5 pixels before the bottom-right corner should hit the scrollbar
+  EventUtils.synthesizeMouse(
+    container,
+    rect.width - 5,
+    rect.height - 5,
+    {},
+    view.styleWindow
+  );
+  await onScroll;
+
+  ok(true, "The rule view container scrolled after clicking on the scrollbar.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js
new file mode 100644
index 0000000000..e3c1822201
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor remains available and focused after clicking
+// in its input.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testClickOnSelectorEditorInput(view);
+});
+
+async function testClickOnSelectorEditorInput(view) {
+  info("Test clicking inside the selector editor input");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  const editorInput = editor.input;
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Click inside the editor input");
+  const onClick = once(editorInput, "click");
+  EventUtils.synthesizeMouse(editor.input, 2, 1, {}, view.styleWindow);
+  await onClick;
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused"
+  );
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Doubleclick inside the editor input");
+  const onDoubleClick = once(editorInput, "dblclick");
+  EventUtils.synthesizeMouse(
+    editor.input,
+    2,
+    1,
+    { clickCount: 2 },
+    view.styleWindow
+  );
+  await onDoubleClick;
+  is(
+    editor.input,
+    view.styleDocument.activeElement,
+    "The editor input should still be focused"
+  );
+  ok(!ruleEditor.newPropSpan, "No newProperty editor was created");
+
+  info("Click outside the editor input");
+  const onBlur = once(editorInput, "blur");
+  const rect = editorInput.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    editorInput,
+    rect.width + 5,
+    rect.height / 2,
+    {},
+    view.styleWindow
+  );
+  await onBlur;
+
+  isnot(
+    editorInput,
+    view.styleDocument.activeElement,
+    "The editor input should no longer be focused"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js
new file mode 100644
index 0000000000..ffed882701
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector-commit.js
@@ -0,0 +1,136 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test selector value is correctly displayed when committing the inplace editor
+// with ENTER, ESC, SHIFT+TAB and TAB
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid1 {
+      text-align: center;
+    }
+    #testid2 {
+      text-align: center;
+    }
+    #testid3 {
+    }
+  </style>
+  <div id='testid1'>Styled Node</div>
+  <div id='testid2'>Styled Node</div>
+  <div id='testid3'>Styled Node</div>
+`;
+
+const TEST_DATA = [
+  {
+    node: "#testid1",
+    value: ".testclass",
+    commitKey: "VK_ESCAPE",
+    modifiers: {},
+    expected: "#testid1",
+  },
+  {
+    node: "#testid1",
+    value: ".testclass1",
+    commitKey: "VK_RETURN",
+    modifiers: {},
+    expected: ".testclass1",
+  },
+  {
+    node: "#testid2",
+    value: ".testclass2",
+    commitKey: "VK_TAB",
+    modifiers: {},
+    expected: ".testclass2",
+  },
+  {
+    node: "#testid3",
+    value: ".testclass3",
+    commitKey: "VK_TAB",
+    modifiers: { shiftKey: true },
+    expected: ".testclass3",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const data of TEST_DATA) {
+    await runTestData(inspector, view, data);
+  }
+});
+
+async function runTestData(inspector, view, data) {
+  const { node, value, commitKey, modifiers, expected } = data;
+
+  info(
+    "Updating " +
+      node +
+      " to " +
+      value +
+      " and committing with " +
+      commitKey +
+      ". Expecting: " +
+      expected
+  );
+
+  info("Selecting the test element");
+  await selectNode(node, inspector);
+
+  let idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Enter the new selector value: " + value);
+  editor.input.value = value;
+
+  info("Entering the commit key " + commitKey + " " + modifiers);
+  EventUtils.synthesizeKey(commitKey, modifiers);
+
+  const activeElement = view.styleDocument.activeElement;
+
+  if (commitKey === "VK_ESCAPE") {
+    is(
+      idRuleEditor.rule.selectorText,
+      expected,
+      "Value is as expected: " + expected
+    );
+    is(idRuleEditor.isEditing, false, "Selector is not being edited.");
+    is(idRuleEditor.selectorText, activeElement, "Focus is on selector span.");
+    return;
+  }
+
+  await once(view, "ruleview-changed");
+
+  ok(
+    getRuleViewRule(view, expected),
+    "Rule with " + expected + " selector exists."
+  );
+
+  if (modifiers.shiftKey) {
+    idRuleEditor = getRuleViewRuleEditor(view, 0);
+  }
+
+  const rule = idRuleEditor.rule;
+  if (rule.textProps.length) {
+    is(
+      inplaceEditor(rule.textProps[0].editor.nameSpan).input,
+      activeElement,
+      "Focus is on the first property name span."
+    );
+  } else {
+    is(
+      inplaceEditor(idRuleEditor.newPropSpan).input,
+      activeElement,
+      "Focus is on the new property span."
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js
new file mode 100644
index 0000000000..be18919f68
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_01.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <span>This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const idRuleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js
new file mode 100644
index 0000000000..70b58d4e42
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_02.js
@@ -0,0 +1,92 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with pseudo
+// classes.
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+    #testid3::first-letter {
+      text-decoration: "italic"
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+  <div class="testclass2">A</div>
+  <div id="testid3">B</div>
+`;
+
+const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
+
+add_task(async function () {
+  // Expand the pseudo-elements section by default.
+  Services.prefs.setBoolPref(PSEUDO_PREF, true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode(".testclass", inspector);
+  await testEditSelector(view, "div:nth-child(1)");
+
+  info("Selecting the modified element");
+  await selectNode("#testid", inspector);
+  await checkModifiedElement(view, "div:nth-child(1)");
+
+  info("Selecting the test element");
+  await selectNode("#testid3", inspector);
+  await testEditSelector(view, ".testclass2::first-letter");
+
+  info("Selecting the modified element");
+  await selectNode(".testclass2", inspector);
+  await checkModifiedElement(view, ".testclass2::first-letter");
+
+  // Reset the pseudo-elements section pref to its default value.
+  Services.prefs.clearUserPref(PSEUDO_PREF);
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const idRuleEditor =
+    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name: " + name);
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rule.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+
+  const newRuleEditor =
+    getRuleViewRuleEditor(view, 1) || getRuleViewRuleEditor(view, 1, 0);
+  ok(
+    newRuleEditor.element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js
new file mode 100644
index 0000000000..bbc9175568
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_03.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with invalid
+// selectors
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testEditSelector(view, "asd@:::!");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+  const onRuleViewChanged = once(view, "ruleview-invalid-selector");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRule(view, name),
+    undefined,
+    "Rule with " + name + " selector should not exist."
+  );
+  ok(
+    getRuleViewRule(view, ".testclass"),
+    "Rule with .testclass selector exists."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js
new file mode 100644
index 0000000000..02a1feaac3
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_04.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the selector highlighter is removed when modifying a selector and
+// the selector highlighter works for the newly added unmatched rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    p {
+      background: red;
+    }
+  </style>
+  <p>Test the selector highlighter</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("p", inspector);
+
+  await testSelectorHighlight(view, "p");
+  await testEditSelector(inspector, view, "body");
+  await testSelectorHighlight(view, "body");
+});
+
+async function testSelectorHighlight(view, selector) {
+  info("Test creating selector highlighter");
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, selector);
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+}
+
+async function testEditSelector(inspector, view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const { waitForHighlighterTypeHidden } = getHighlighterTestHelpers(inspector);
+  const onSelectorHighlighterHidden = waitForHighlighterTypeHidden(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  info("Waiting for Rules view to update");
+  await onRuleViewChanged;
+  await onSelectorHighlighterHidden;
+  const highlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  ok(!highlighter, "The highlighter instance was removed");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
new file mode 100644
index 0000000000..30d945608d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_05.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding a new property of an unmatched rule works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+    }
+    .testclass {
+      background-color: white;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+  await testAddProperty(view);
+
+  info("Selecting the modified element with the new rule");
+  await selectNode("span", inspector);
+  await checkModifiedElement(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+
+  // Escape the new property editor after editing the selector
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  await onBlur;
+}
+
+function checkModifiedElement(view, name) {
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+}
+
+async function testAddProperty(view) {
+  info("Test creating a new property");
+  const textProp = await addProperty(view, 1, "text-align", "center");
+
+  is(textProp.value, "center", "Text prop should have been changed.");
+  ok(!textProp.overridden, "Property should not be overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js
new file mode 100644
index 0000000000..8f418d2320
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_06.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Testing selector inplace-editor behaviors in the rule-view with unmatched
+// selectors
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      text-align: center;
+    }
+    div {
+    }
+  </style>
+  <div class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testEditClassSelector(view);
+  await testEditDivSelector(view);
+});
+
+async function testEditClassSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "body";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(ruleEditor.element.getAttribute("unmatched"), "Rule editor is unmatched.");
+  is(
+    getRuleViewRule(view, ".testclass"),
+    undefined,
+    "Rule with .testclass selector should not exist."
+  );
+  ok(getRuleViewRule(view, "body"), "Rule with body selector exists.");
+  is(
+    inplaceEditor(propEditor.nameSpan),
+    inplaceEditor(view.styleDocument.activeElement),
+    "Focus should have moved to the property name."
+  );
+}
+
+async function testEditDivSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 2);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "asdf";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(ruleEditor.element.getAttribute("unmatched"), "Rule editor is unmatched.");
+  is(
+    getRuleViewRule(view, "div"),
+    undefined,
+    "Rule with div selector should not exist."
+  );
+  ok(getRuleViewRule(view, "asdf"), "Rule with asdf selector exists.");
+  is(
+    inplaceEditor(ruleEditor.newPropSpan),
+    inplaceEditor(view.styleDocument.activeElement),
+    "Focus should have moved to the property name."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js
new file mode 100644
index 0000000000..0949a966e8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_07.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view overridden search filter does not appear for an
+// unmatched rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      height: 0px;
+    }
+    #testid {
+      height: 1px;
+    }
+    .testclass {
+      height: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Entering the commit key");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const textPropEditor = rule.textProps[0].editor;
+
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    ruleEditor.element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+  ok(textPropEditor.filterProperty.hidden, "Overridden search is hidden.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js
new file mode 100644
index 0000000000..112e2c83c7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_08.js
@@ -0,0 +1,78 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that reverting a selector edit does the right thing.
+// Bug 1241046.
+
+const TEST_URI = `
+  <style type="text/css">
+    span {
+      color: chartreuse;
+    }
+  </style>
+  <span>
+    <div id="testid" class="testclass">Styled Node</div>
+  </span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test element");
+  await selectNode("#testid", inspector);
+
+  let idRuleEditor = getRuleViewRuleEditor(view, 2);
+
+  info("Focusing an existing selector name in the rule-view");
+  let editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(
+    inplaceEditor(idRuleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = "pre";
+
+  info("Waiting for rule view to update");
+  let onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  info("Re-focusing the selector name in the rule-view");
+  idRuleEditor = getRuleViewRuleEditor(view, 2);
+  editor = await focusEditableField(view, idRuleEditor.selectorText);
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, "pre"), "Rule with pre selector exists.");
+  is(
+    getRuleViewRuleEditor(view, 2).element.getAttribute("unmatched"),
+    "true",
+    "Rule with pre does not match the current element."
+  );
+
+  // Now change it back.
+  info("Re-entering original selector name and committing");
+  editor.input.value = "span";
+
+  info("Waiting for rule view to update");
+  onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  ok(getRuleViewRule(view, "span"), "Rule with span selector exists.");
+  is(
+    getRuleViewRuleEditor(view, 2).element.getAttribute("unmatched"),
+    "false",
+    "Rule with span matches the current element."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js
new file mode 100644
index 0000000000..f9ee73098c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_09.js
@@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that editing a selector to an unmatched rule does set up the correct
+// property on the rule, and that settings property in said rule does not
+// lead to overriding properties from matched rules.
+// Test that having a rule with both matched and unmatched selectors does work
+// correctly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      color: black;
+    }
+    .testclass {
+      background-color: white;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+  <span class="testclass">This is a span</span>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  await testEditSelector(view, "span");
+  await testAddImportantProperty(view);
+  await testAddMatchedRule(view, "span, div");
+});
+
+async function testEditSelector(view, name) {
+  info("Test editing existing selector fields");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(getRuleViewRule(view, name), "Rule with " + name + " selector exists.");
+  ok(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "Rule with " + name + " does not match the current element."
+  );
+
+  // Escape the new property editor after editing the selector
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onBlur;
+}
+
+async function testAddImportantProperty(view) {
+  info("Test creating a new property with !important");
+  const textProp = await addProperty(view, 1, "color", "red !important");
+
+  is(textProp.value, "red", "Text prop should have been changed.");
+  is(textProp.priority, "important", 'Text prop has an "important" priority.');
+  ok(!textProp.overridden, "Property should not be overridden");
+
+  const prop = getTextProperty(view, 1, { color: "black" });
+  ok(
+    !prop.overridden,
+    "Existing property on matched rule should not be overridden"
+  );
+}
+
+async function testAddMatchedRule(view, name) {
+  info("Test adding a matching selector");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "The selector editor got focused"
+  );
+
+  info("Entering a new selector name and committing");
+  editor.input.value = name;
+
+  info("Waiting for rule view to update");
+  const onRuleViewChanged = once(view, "ruleview-changed");
+
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  is(
+    getRuleViewRuleEditor(view, 1).element.getAttribute("unmatched"),
+    "false",
+    "Rule with " + name + " does match the current element."
+  );
+
+  // Escape the new property editor after editing the selector
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onBlur;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js
new file mode 100644
index 0000000000..26ee52d64e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_10.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616: make sure that editing a selector
+// keeps the rule in the proper position.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid span, #testid p {
+      background: aqua;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div id="testid">
+    <span class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".pickme", inspector);
+  await testEditSelector(view);
+});
+
+async function testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = "#testid span";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Escape the new property editor after editing the selector
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onBlur;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 3, "Should have 3 rules.");
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(!props[0].overridden, "Background property is not overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  ok(props[0].overridden, "Background property is overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js
new file mode 100644
index 0000000000..6882686eff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_11.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Regression test for bug 1293616, where editing a selector should
+// change the relative priority of the rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background: aqua;
+    }
+    .pickme {
+      background: seagreen;
+    }
+    span {
+      background: fuchsia;
+    }
+  </style>
+  <div>
+    <span id="testid" class="pickme">
+      Styled Node
+    </span>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".pickme", inspector);
+  await testEditSelector(view);
+});
+
+async function testEditSelector(view) {
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  editor.input.value = ".pickme";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  // Escape the new property editor after editing the selector
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onBlur;
+
+  // Get the new rule editor that replaced the original
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  info("Check that the correct rules are visible");
+  is(view._elementStyle.rules.length, 4, "Should have 4 rules.");
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+
+  let props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "aqua", "Background property is aqua");
+  ok(props[0].overridden, "Background property is overridden");
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+  props = ruleEditor.rule.textProps;
+  is(props.length, 1, "Rule has correct number of properties");
+  is(props[0].name, "background", "Found background property");
+  is(props[0].value, "seagreen", "Background property is seagreen");
+  ok(!props[0].overridden, "Background property is not overridden");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js b/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js
new file mode 100644
index 0000000000..187836b860
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-selector_12.js
@@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing selectors for rules inside @import'd stylesheets.
+// This is a regression test for bug 1355819.
+
+add_task(async function () {
+  await addTab(URL_ROOT + "doc_edit_imported_selector.html");
+  const { inspector, view } = await openRuleView();
+
+  info("Select the node styled by an @import'd rule");
+  await selectNode("#target", inspector);
+
+  info("Focus the selector in the rule-view");
+  let ruleEditor = getRuleViewRuleEditor(view, 1);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  info("Change the selector to something else");
+  editor.input.value = "div";
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  info("Escape the new property editor after editing the selector");
+  const onBlur = once(view.styleDocument.activeElement, "blur");
+  EventUtils.synthesizeKey("KEY_Escape", {}, view.styleWindow);
+  await onBlur;
+
+  info("Check the rules are still displayed correctly");
+  is(view._elementStyle.rules.length, 3, "The element still has 3 rules.");
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  is(
+    ruleEditor.element.getAttribute("unmatched"),
+    "false",
+    "Rule editor is matched."
+  );
+  is(ruleEditor.selectorText.textContent, "div", "The new selector is correct");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
new file mode 100644
index 0000000000..c95506de50
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-size-property-dragging.js
@@ -0,0 +1,481 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that increasing / decreasing values in rule view by dragging with
+// the mouse works correctly.
+
+const TEST_URI = `
+  <style>
+    #test {
+      padding-top: 10px;
+      margin-top: unset;
+      margin-bottom: 0px;
+      width: 0px;
+      border: 1px solid red;
+      line-height: 2;
+      border-width: var(--12px);
+      max-height: +10.2e3vmin;
+      min-height: 1% !important;
+      font-size: 10Q;
+      transform: rotate(45deg);
+      margin-left: 28.3em;
+      animation-delay: +15s;
+      margin-right: -2px;
+      padding-bottom: .9px;
+      rotate: 90deg;
+    }
+  </style>
+  <div id="test"></div>
+`;
+
+const DRAGGABLE_VALUE_CLASSNAME = "ruleview-propertyvalue-draggable";
+
+add_task(async function () {
+  await pushPref("devtools.inspector.draggable_properties", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test", inspector);
+
+  testDraggingClassIsAddedWhenNeeded(view);
+
+  // Check that toggling the feature updates the UI immediately.
+  await pushPref("devtools.inspector.draggable_properties", false);
+  testDraggingClassIsRemovedAfterPrefChange(view);
+
+  await pushPref("devtools.inspector.draggable_properties", true);
+  testDraggingClassIsAddedWhenNeeded(view);
+
+  await testIncrementAngleValue(view);
+  await testPressingEscapeWhileDragging(view);
+  await testUpdateDisabledValue(view);
+  await testWidthIncrements(view);
+  await testDraggingClassIsAddedOnValueUpdate(view);
+});
+
+const PROPERTIES = [
+  {
+    name: "border",
+    value: "1px solid red",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "line-height",
+    value: "2",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "border-width",
+    value: "var(--12px)",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "transform",
+    value: "rotate(45deg)",
+    shouldBeDraggable: false,
+  },
+  {
+    name: "max-height",
+    value: "+10.2e3vmin",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "min-height",
+    value: "1%",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "font-size",
+    value: "10Q",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "margin-left",
+    value: "28.3em",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "animation-delay",
+    value: "+15s",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "margin-right",
+    value: "-2px",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "padding-bottom",
+    value: ".9px",
+    shouldBeDraggable: true,
+  },
+  {
+    name: "rotate",
+    value: "90deg",
+    shouldBeDraggable: true,
+  },
+];
+
+function testDraggingClassIsAddedWhenNeeded(view) {
+  info("Testing class is added or not on different property values");
+  runIsDraggableTest(view, PROPERTIES);
+}
+
+function testDraggingClassIsRemovedAfterPrefChange(view) {
+  info("Testing class is removed if the feature is disabled");
+  runIsDraggableTest(
+    view,
+    // Create a temporary copy of the test PROPERTIES, where shouldBeDraggable is
+    // always false.
+    PROPERTIES.map(prop =>
+      Object.assign({}, prop, { shouldBeDraggable: false })
+    )
+  );
+}
+
+async function testIncrementAngleValue(view) {
+  info("Testing updating an angle value with the angle swatch span");
+  const rotatePropEditor = getTextProperty(view, 1, {
+    rotate: "90deg",
+  }).editor;
+  await runIncrementTest(rotatePropEditor, view, [
+    {
+      startValue: "90deg",
+      expectedEndValue: "100deg",
+      distance: 10,
+      description: "updating angle value",
+    },
+  ]);
+}
+
+async function testPressingEscapeWhileDragging(view) {
+  info("Testing pressing escape while dragging with mouse");
+  const marginPropEditor = getTextProperty(view, 1, {
+    "margin-bottom": "0px",
+  }).editor;
+  await runIncrementTest(marginPropEditor, view, [
+    {
+      startValue: "0px",
+      expectedEndValue: "0px",
+      expectedEndValueBeforeEscape: "100px",
+      escape: true,
+      distance: 100,
+      description: "Pressing escape to check if value has been reset",
+    },
+  ]);
+}
+
+async function testUpdateDisabledValue(view) {
+  info("Testing updating a disabled value by dragging mouse");
+
+  const textProperty = getTextProperty(view, 1, { "padding-top": "10px" });
+  const editor = textProperty.editor;
+
+  await togglePropStatus(view, textProperty);
+  ok(!editor.enable.checked, "Should be disabled");
+  await runIncrementTest(editor, view, [
+    {
+      startValue: "10px",
+      expectedEndValue: "110px",
+      distance: 100,
+      description: "Updating disabled value",
+    },
+  ]);
+  ok(editor.enable.checked, "Should be enabled");
+}
+
+async function testWidthIncrements(view) {
+  info("Testing dragging the mouse on the width property");
+
+  const marginPropEditor = getTextProperty(view, 1, { width: "0px" }).editor;
+  await runIncrementTest(marginPropEditor, view, [
+    {
+      startValue: "0px",
+      expectedEndValue: "20px",
+      distance: 20,
+      description: "Increasing value while dragging",
+    },
+    {
+      startValue: "20px",
+      expectedEndValue: "0px",
+      distance: -20,
+      description: "Decreasing value while dragging",
+    },
+    {
+      startValue: "0px",
+      expectedEndValue: "2px",
+      ...getSmallIncrementKey(),
+      distance: 20,
+      description:
+        "Increasing value with small increments by pressing ctrl or alt",
+    },
+    {
+      startValue: "2px",
+      expectedEndValue: "202px",
+      shift: true,
+      distance: 20,
+      description: "Increasing value with large increments by pressing shift",
+    },
+    {
+      startValue: "202px",
+      expectedEndValue: "402px",
+      distance: 200,
+      description: "Increasing value with long distance",
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "402px",
+      distance: marginPropEditor._DRAGGING_DEADZONE_DISTANCE - 1,
+      description: "No change in the deadzone (positive value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "402px",
+      distance: -1 * (marginPropEditor._DRAGGING_DEADZONE_DISTANCE - 1),
+      description: "No change in the deadzone (negative value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "402px",
+      expectedEndValue: "403px",
+      distance: marginPropEditor._DRAGGING_DEADZONE_DISTANCE + 1,
+      description: "Changed by 1 when leaving the deadzone (positive value)",
+      deadzoneIncluded: true,
+    },
+    {
+      startValue: "403px",
+      expectedEndValue: "402px",
+      distance: -1 * (marginPropEditor._DRAGGING_DEADZONE_DISTANCE + 1),
+      description: "Changed by 1 when leaving the deadzone (negative value)",
+      deadzoneIncluded: true,
+    },
+  ]);
+}
+
+async function testDraggingClassIsAddedOnValueUpdate(view) {
+  info("Testing dragging class is added when a supported unit is detected");
+
+  const editor = getTextProperty(view, 1, { "margin-top": "unset" }).editor;
+  const valueSpan = editor.valueSpan;
+  ok(
+    !valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+    "Should not be draggable"
+  );
+  valueSpan.scrollIntoView();
+  await setProperty(view, editor.prop, "23em");
+  ok(
+    valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+    "Should be draggable"
+  );
+}
+
+/**
+ * Runs each test and check whether or not the property is draggable
+ *
+ * @param  {CSSRuleView} view
+ * @param  {Array.<{
+ *   name: String,
+ *   value: String,
+ *   shouldBeDraggable: Boolean,
+ * }>} tests
+ */
+function runIsDraggableTest(view, tests) {
+  for (const test of tests) {
+    const property = test;
+    info(`Testing ${property.name} with value ${property.value}`);
+    const editor = getTextProperty(view, 1, {
+      [property.name]: property.value,
+    }).editor;
+    const valueSpan = editor.valueSpan;
+    if (property.shouldBeDraggable) {
+      ok(
+        valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+        "Should be draggable"
+      );
+    } else {
+      ok(
+        !valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME),
+        "Should not be draggable"
+      );
+    }
+  }
+}
+
+/**
+ * Runs each test in the tests array by synthesizing a mouse dragging
+ *
+ * @param  {TextPropertyEditor} editor
+ * @param  {CSSRuleView} view
+ * @param  {Array} tests
+ */
+async function runIncrementTest(editor, view, tests) {
+  for (const test of tests) {
+    await testIncrement(editor, test, view);
+  }
+  view.debounce.flush();
+}
+
+/**
+ * Runs an increment test
+ *
+ * 1. We initialize the TextProperty value with "startValue"
+ * 2. We synthesize a mouse dragging of "distance" length
+ * 3. We check the value of TextProperty is equal to "expectedEndValue"
+ *
+ * @param  {TextPropertyEditor} editor
+ * @param  {Array} options
+ * @param  {String} options.startValue
+ * @param  {String} options.expectedEndValue
+ * @param  {Boolean} options.shift Whether or not we press the shift key
+ * @param  {Number} options.distance Distance of the dragging
+ * @param  {String} options.description
+ * @param  {Boolean} options.ctrl Small increment key
+ * @param  {Boolean} options.alt Small increment key for macosx
+ * @param  {Boolean} option.deadzoneIncluded True if the provided distance
+ *         accounts for the deadzone. When false, the deadzone will automatically
+ *         be added to the distance.
+ * @param  {CSSRuleView} view
+ */
+async function testIncrement(editor, options, view) {
+  info("Running subtest: " + options.description);
+
+  editor.valueSpan.scrollIntoView();
+  await setProperty(editor.ruleView, editor.prop, options.startValue);
+
+  is(
+    editor.prop.value,
+    options.startValue,
+    "Value initialized at " + options.startValue
+  );
+
+  const onMouseUp = once(editor.valueSpan, "mouseup");
+
+  await synthesizeMouseDragging(editor, options.distance, options);
+
+  // mouseup event not triggered when escape is pressed
+  if (!options.escape) {
+    info("Waiting mouseup");
+    await onMouseUp;
+    info("Received mouseup");
+  }
+
+  is(
+    editor.prop.value,
+    options.expectedEndValue,
+    "Value changed to " + editor.prop.value
+  );
+}
+
+/**
+ * Synthesizes mouse dragging (mousedown + mousemove + mouseup)
+ *
+ * @param {TextPropertyEditor} editor
+ * @param {Number} distance length of the horizontal dragging (negative if dragging left)
+ * @param {Object} option
+ * @param {Boolean} option.escape
+ * @param {Boolean} option.alt
+ * @param {Boolean} option.shift
+ * @param {Boolean} option.ctrl
+ * @param {Boolean} option.deadzoneIncluded
+ */
+async function synthesizeMouseDragging(editor, distance, options = {}) {
+  info(`Start to synthesize mouse dragging (from ${1} to ${1 + distance})`);
+
+  const styleWindow = editor.ruleView.styleWindow;
+  const elm = editor.valueSpan;
+  const startPosition = [1, 1];
+
+  // Handle the pixel based deadzone.
+  const deadzone = editor._DRAGGING_DEADZONE_DISTANCE;
+  if (!options.deadzoneIncluded) {
+    // Most tests do not care about the deadzone and the provided distance does
+    // not account for the deadzone. Add it automatically.
+    distance = distance + Math.sign(distance) * deadzone;
+  }
+  const updateExpected = Math.abs(options.distance) > deadzone;
+
+  const endPosition = [startPosition[0] + distance, startPosition[1]];
+
+  EventUtils.synthesizeMouse(
+    elm,
+    startPosition[0],
+    startPosition[1],
+    { type: "mousedown" },
+    styleWindow
+  );
+
+  // If the drag will not trigger any update, simply wait for 100ms.
+  // Otherwise, wait for the next property-updated-by-dragging event.
+  const updated = updateExpected
+    ? editor.ruleView.once("property-updated-by-dragging")
+    : wait(100);
+
+  EventUtils.synthesizeMouse(
+    elm,
+    endPosition[0],
+    endPosition[1],
+    {
+      type: "mousemove",
+      shiftKey: !!options.shift,
+      ctrlKey: !!options.ctrl,
+      altKey: !!options.alt,
+    },
+    styleWindow
+  );
+
+  // We wait because the mousemove event listener is throttled to 30ms
+  // in the TextPropertyEditor class
+  info("waiting for event property-updated-by-dragging");
+  await updated;
+  ok(true, "received event property-updated-by-dragging");
+
+  if (options.escape) {
+    is(
+      editor.prop.value,
+      options.expectedEndValueBeforeEscape,
+      "testing value before pressing escape"
+    );
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, styleWindow);
+  }
+
+  // If the drag will not trigger any update, simply wait for 100ms.
+  // Otherwise, wait for the next ruleview-changed event.
+  const done = updateExpected
+    ? editor.ruleView.once("ruleview-changed")
+    : wait(100);
+
+  EventUtils.synthesizeMouse(
+    elm,
+    endPosition[0],
+    endPosition[1],
+    {
+      type: "mouseup",
+    },
+    styleWindow
+  );
+  await done;
+
+  // If the drag did not trigger any update, mouseup might open an inline editor.
+  // Leave the editor.
+  const inplaceEditor = styleWindow.document.querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  if (inplaceEditor) {
+    const onBlur = once(inplaceEditor, "blur");
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, styleWindow);
+    await onBlur;
+  }
+
+  info("Finish to synthesize mouse dragging");
+}
+
+function getSmallIncrementKey() {
+  if (AppConstants.platform === "macosx") {
+    return { alt: true };
+  }
+  return { ctrl: true };
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
new file mode 100644
index 0000000000..a3813f1f7b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_01.js
@@ -0,0 +1,119 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on swatch-preceeded value while editing the property name
+// will result in editing the property value. Also tests that the value span is updated
+// only if the property name has changed. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, { color: "red" });
+  const propEditor = prop.editor;
+
+  await testColorValueSpanClickWithoutNameChange(propEditor, view);
+  await testColorValueSpanClickAfterNameChange(propEditor, view);
+});
+
+async function testColorValueSpanClickWithoutNameChange(propEditor, view) {
+  info("Test click on color span while focusing property name editor");
+  const colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
+
+  info("Focus the color name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  // We add a click event to make sure the color span won't be cleared
+  // on nameSpan blur (which would lead to the click event not being triggered)
+  const onColorSpanClick = once(colorSpan, "click");
+
+  // The property-value-updated is emitted when the valueSpan markup is being
+  // re-populated, which should not be the case when not modifying the property name
+  const onPropertyValueUpdated = function () {
+    ok(false, 'The "property-value-updated" should not be emitted');
+  };
+  view.on("property-value-updated", onPropertyValueUpdated);
+
+  info("blur propEditor.nameSpan by clicking on the color span");
+  EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
+
+  info("wait for the click event on the color span");
+  await onColorSpanClick;
+  ok(true, "Expected click event was emitted");
+
+  editor = inplaceEditor(propEditor.doc.activeElement);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The property value editor got focused"
+  );
+
+  // We remove this listener in order to not cause unwanted conflict in the next test
+  view.off("property-value-updated", onPropertyValueUpdated);
+
+  info(
+    "blur valueSpan editor to trigger ruleview-changed event and prevent " +
+      "having pending request"
+  );
+  const onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+}
+
+async function testColorValueSpanClickAfterNameChange(propEditor, view) {
+  info("Test click on color span after property name change");
+  const colorSpan = propEditor.valueSpan.querySelector(".ruleview-color");
+
+  info("Focus the color name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  let editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to border-color to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "border-color";
+
+  let onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+
+  info("blur propEditor.nameSpan by clicking on the color span");
+  EventUtils.synthesizeMouse(colorSpan, 1, 1, {}, propEditor.doc.defaultView);
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+  ok(true, 'Expected "property-value-updated" event was emitted');
+
+  editor = inplaceEditor(propEditor.doc.activeElement);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The property value editor got focused"
+  );
+
+  info(
+    "blur valueSpan editor to trigger ruleview-changed event and prevent " +
+      "having pending request"
+  );
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
new file mode 100644
index 0000000000..95b6dccea9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_02.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that hitting shift + click on color swatch while editing the property
+// name will only change the color unit and not lead to edit the property value.
+// See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test shift + click on color swatch while editing property name");
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
+  const swatchSpan = propEditor.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[2];
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to background-image to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onSwatchUnitChange = swatchSpan.once("unit-change");
+  const onRuleViewChanged = view.once("ruleview-changed");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(
+    swatchSpan,
+    { shiftKey: true },
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the color unit to change");
+  await onSwatchUnitChange;
+  ok(true, "the color unit was changed");
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  ok(
+    !inplaceEditor(propEditor.valueSpan),
+    "The inplace editor wasn't shown " +
+      "as a result of the color swatch shift + click"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
new file mode 100644
index 0000000000..c43751da1f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_03.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on color swatch while editing the property name
+// will show the color tooltip with the correct value. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    color: red;
+    background: linear-gradient(
+      90deg,
+      rgb(183,222,237),
+      rgb(33,180,226),
+      rgb(31,170,217),
+      rgba(200,170,140,0.5));
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test click on color swatch while editing property name");
+
+  await selectNode("#testid", inspector);
+  const prop = getTextProperty(view, 1, {
+    background:
+      "linear-gradient( 90deg, rgb(183,222,237), rgb(33,180,226), rgb(31,170,217), rgba(200,170,140,0.5))",
+  });
+  const propEditor = prop.editor;
+
+  const swatchSpan = propEditor.valueSpan.querySelectorAll(
+    ".ruleview-colorswatch"
+  )[3];
+  const colorPicker = view.tooltips.getTooltip("colorPicker");
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the background property to background-image to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onReady = colorPicker.once("ready");
+
+  info("blur propEditor.nameSpan by clicking on the color swatch");
+  EventUtils.synthesizeMouseAtCenter(
+    swatchSpan,
+    {},
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  info("wait for the color picker to be shown");
+  await onReady;
+
+  ok(true, "The color picker was shown on click of the color swatch");
+  ok(
+    !inplaceEditor(propEditor.valueSpan),
+    "The inplace editor wasn't shown as a result of the color swatch click"
+  );
+
+  const spectrum = colorPicker.spectrum;
+  is(
+    `"${spectrum.rgb}"`,
+    '"200,170,140,0.5"',
+    "The correct color picker was shown"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
new file mode 100644
index 0000000000..a315f5bec5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-value-after-name_04.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that clicking on a property's value URL while editing the property name
+// will open the link in a new tab. See also Bug 1248274.
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+      background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png"), linear-gradient(white, #F06 400px);
+  }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Test click on background-image url while editing property name");
+
+  await selectNode("#testid", inspector);
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+  const anchor = propEditor.valueSpan.querySelector(
+    ".ruleview-propertyvalue .theme-link"
+  );
+
+  info("Focus the background name span");
+  await focusEditableField(view, propEditor.nameSpan);
+  const editor = inplaceEditor(propEditor.doc.activeElement);
+
+  info(
+    "Modify the property to background to trigger the " +
+      "property-value-updated event"
+  );
+  editor.input.value = "background-image";
+
+  const onRuleViewChanged = view.once("ruleview-changed");
+  const onPropertyValueUpdate = view.once("property-value-updated");
+  const onTabOpened = waitForTab();
+
+  info("blur propEditor.nameSpan by clicking on the link");
+  // The url can be wrapped across multiple lines, and so we click the lower left corner
+  // of the anchor to make sure to target the link.
+  const rect = anchor.getBoundingClientRect();
+  EventUtils.synthesizeMouse(
+    anchor,
+    2,
+    rect.height - 2,
+    {},
+    propEditor.doc.defaultView
+  );
+
+  info(
+    "wait for ruleview-changed event to be triggered to prevent pending requests"
+  );
+  await onRuleViewChanged;
+
+  info("wait for the property value to be updated");
+  await onPropertyValueUpdate;
+
+  info("wait for the image to be open in a new tab");
+  const tab = await onTabOpened;
+  ok(true, "A new tab opened");
+
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    anchor.href,
+    "The URL for the new tab is correct"
+  );
+
+  gBrowser.removeTab(tab);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js
new file mode 100644
index 0000000000..3c4c9a25a4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable-add.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test adding a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of --color which refers to an unset variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-unmatched-variable",
+    "--color is not set"
+  );
+
+  info("Add the --color CSS variable");
+  await addProperty(view, 0, "--color", "lime");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js
new file mode 100644
index 0000000000..322cc8e166
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable-remove.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test removing a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of the --color variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Remove the --color variable declaration");
+  const prop = getTextProperty(view, 1, { "--color": "lime" });
+  await removeProperty(view, prop);
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-unmatched-variable",
+    "--color is not set"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-variable.js b/devtools/client/inspector/rules/test/browser_rules_edit-variable.js
new file mode 100644
index 0000000000..0df57d9bf1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-variable.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test editing a CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Check the initial state of the --color variable");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Edit the CSS variable");
+  const prop = getTextProperty(view, 1, { "--color": "lime" });
+  const propEditor = prop.editor;
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  editor.input.value = "blue";
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = blue"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js
new file mode 100644
index 0000000000..5665d517db
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_01.js
@@ -0,0 +1,111 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the correct editable fields are focused when tabbing and entering
+// through the rule view.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+    color: red;
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    border-color: red
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testEditableFieldFocus(inspector, view, "KEY_Enter");
+  await testEditableFieldFocus(inspector, view, "KEY_Tab");
+});
+
+async function testEditableFieldFocus(inspector, view, commitKey) {
+  info("Click on the selector of the inline style ('element')");
+  let ruleEditor = getRuleViewRuleEditor(view, 0);
+  const onFocus = once(ruleEditor.element, "focus", true);
+  ruleEditor.selectorText.click();
+  await onFocus;
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should be in the element property span"
+  );
+
+  info("Focus the next field with " + commitKey);
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+  await focusNextEditableField(view, ruleEditor, commitKey);
+  assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the next rule selector"
+  );
+
+  for (let i = 0; i < ruleEditor.rule.textProps.length; i++) {
+    const textProp = ruleEditor.rule.textProps[i];
+    const propEditor = textProp.editor;
+
+    info("Focus the next field with " + commitKey);
+    // Expect a ruleview-changed event if we are moving from a property value
+    // to the next property name (which occurs after the first iteration, as for
+    // i=0, the previous field is the selector).
+    const onRuleViewChanged = i > 0 ? view.once("ruleview-changed") : null;
+    await focusNextEditableField(view, ruleEditor, commitKey);
+    await onRuleViewChanged;
+    assertEditor(
+      view,
+      propEditor.nameSpan,
+      "Focus should have moved to the property name"
+    );
+
+    info("Focus the next field with " + commitKey);
+    await focusNextEditableField(view, ruleEditor, commitKey);
+    assertEditor(
+      view,
+      propEditor.valueSpan,
+      "Focus should have moved to the property value"
+    );
+  }
+
+  // Expect a ruleview-changed event again as we're bluring a property value.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await focusNextEditableField(view, ruleEditor, commitKey);
+  await onRuleViewChanged;
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 2);
+
+  await focusNextEditableField(view, ruleEditor, commitKey);
+  assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the next rule selector"
+  );
+
+  info("Blur the selector field");
+  EventUtils.synthesizeKey("KEY_Escape");
+}
+
+async function focusNextEditableField(view, ruleEditor, commitKey) {
+  const onFocus = once(ruleEditor.element, "focus", true);
+  EventUtils.synthesizeKey(commitKey, {}, view.styleWindow);
+  await onFocus;
+}
+
+function assertEditor(view, element, message) {
+  const editor = inplaceEditor(view.styleDocument.activeElement);
+  is(inplaceEditor(element), editor, message);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
new file mode 100644
index 0000000000..23c7397b46
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_editable-field-focus_02.js
@@ -0,0 +1,120 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the correct editable fields are focused when shift tabbing
+// through the rule view.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+    color: red;
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    border-color: red
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testEditableFieldFocus(inspector, view, "VK_TAB", { shiftKey: true });
+});
+
+async function testEditableFieldFocus(
+  inspector,
+  view,
+  commitKey,
+  options = {}
+) {
+  let ruleEditor = getRuleViewRuleEditor(view, 2);
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+  is(
+    inplaceEditor(ruleEditor.selectorText),
+    editor,
+    "Focus should be in the 'div' rule selector"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+
+  for (const textProp of ruleEditor.rule.textProps.slice(0).reverse()) {
+    const propEditor = textProp.editor;
+
+    await focusNextField(view, ruleEditor, commitKey, options);
+    if (
+      ["background-color", "color"].includes(propEditor.nameSpan.textContent)
+    ) {
+      // background-color and color property value spans have inner focusable elements
+      // and so, focus needs to move to the inplace editor field where enter needs to be
+      // pressed to trigger click event on it
+      await focusNextField(view, ruleEditor, commitKey, options);
+      EventUtils.sendKey("Return");
+    }
+    await assertEditor(
+      view,
+      propEditor.valueSpan,
+      "Focus should have moved to the property value"
+    );
+
+    await focusNextFieldAndExpectChange(view, ruleEditor, commitKey, options);
+    await assertEditor(
+      view,
+      propEditor.nameSpan,
+      "Focus should have moved to the property name"
+    );
+  }
+
+  ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  await assertEditor(
+    view,
+    ruleEditor.selectorText,
+    "Focus should have moved to the '#testid' rule selector"
+  );
+
+  ruleEditor = getRuleViewRuleEditor(view, 0);
+
+  await focusNextField(view, ruleEditor, commitKey, options);
+  assertEditor(
+    view,
+    ruleEditor.newPropSpan,
+    "Focus should have moved to the new property span"
+  );
+}
+
+async function focusNextFieldAndExpectChange(
+  view,
+  ruleEditor,
+  commitKey,
+  options
+) {
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await focusNextField(view, ruleEditor, commitKey, options);
+  await onRuleViewChanged;
+}
+
+async function focusNextField(view, ruleEditor, commitKey, options) {
+  const onFocus = once(ruleEditor.element, "focus", true);
+  EventUtils.synthesizeKey(commitKey, options, view.styleWindow);
+  await onFocus;
+}
+
+function assertEditor(view, element, message) {
+  const editor = inplaceEditor(view.styleDocument.activeElement);
+  is(inplaceEditor(element), editor, message);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_eyedropper.js b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
new file mode 100644
index 0000000000..bf59ef4b91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_eyedropper.js
@@ -0,0 +1,160 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+// Test opening the eyedropper from the color picker. Pressing escape to close it, and
+// clicking the page to select a color.
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background-color: white;
+      padding: 0px
+    }
+
+    #div1 {
+      background-color: #ff5;
+      width: 20px;
+      height: 20px;
+    }
+
+    #div2 {
+      margin-left: 20px;
+      width: 20px;
+      height: 20px;
+      background-color: #f09;
+    }
+  </style>
+  <body><div id="div1"></div><div id="div2"></div></body>
+`;
+
+// #f09
+const ORIGINAL_COLOR = "rgb(255, 0, 153)";
+// #ff5
+const EXPECTED_COLOR = "rgb(255, 255, 85)";
+
+registerCleanupFunction(() => {
+  // Restore the default Toolbox host position after the test.
+  Services.prefs.clearUserPref("devtools.toolbox.host");
+});
+
+add_task(async function () {
+  info("Add the test tab, open the rule-view and select the test node");
+
+  const url = "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI);
+  await addTab(url);
+
+  const { inspector, view, toolbox } = await openRuleView();
+
+  await runTest(inspector, view, false);
+
+  info("Reload the page to restore the initial state");
+  await navigateTo(url);
+
+  info("Change toolbox host to WINDOW");
+  await toolbox.switchHost("window");
+
+  // Switching hosts is not correctly waiting when DevTools run in content frame
+  // See Bug 1571421.
+  await wait(1000);
+
+  await runTest(inspector, view, true);
+});
+
+async function runTest(inspector, view, isWindowHost) {
+  await selectNode("#div2", inspector);
+
+  info("Get the background-color property from the rule-view");
+  const property = getRuleViewProperty(view, "#div2", "background-color");
+  const swatch = property.valueSpan.querySelector(".ruleview-colorswatch");
+  ok(swatch, "Color swatch is displayed for the bg-color property");
+
+  info("Open the eyedropper from the colorpicker tooltip");
+  await openEyedropper(view, swatch);
+
+  const tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
+  ok(
+    !tooltip.isVisible(),
+    "color picker tooltip is closed after opening eyedropper"
+  );
+
+  info("Test that pressing escape dismisses the eyedropper");
+  await testESC(swatch, inspector);
+
+  if (isWindowHost) {
+    // The following code is only needed on linux otherwise the test seems to
+    // timeout when clicking again on the swatch. Both the focus and the wait
+    // seem needed to make it pass.
+    // To be fixed in Bug 1571421.
+    info("Ensure the swatch window is focused");
+    const onWindowFocus = BrowserTestUtils.waitForEvent(
+      swatch.ownerGlobal,
+      "focus"
+    );
+    swatch.ownerGlobal.focus();
+    await onWindowFocus;
+  }
+
+  info("Open the eyedropper again");
+  await openEyedropper(view, swatch);
+
+  info("Test that a color can be selected with the eyedropper");
+  await testSelect(view, swatch, inspector);
+
+  const onHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await onHidden;
+  ok(!tooltip.isVisible(), "color picker tooltip is closed");
+
+  await waitForTick();
+}
+
+async function testESC(swatch, inspector) {
+  info("Press escape");
+  const onCanceled = new Promise(resolve => {
+    inspector.inspectorFront.once("color-pick-canceled", resolve);
+  });
+  BrowserTestUtils.synthesizeKey(
+    "VK_ESCAPE",
+    {},
+    gBrowser.selectedTab.linkedBrowser
+  );
+  await onCanceled;
+
+  const color = swatch.style.backgroundColor;
+  is(color, ORIGINAL_COLOR, "swatch didn't change after pressing ESC");
+}
+
+async function testSelect(view, swatch, inspector) {
+  info("Click at x:10px y:10px");
+  const onPicked = new Promise(resolve => {
+    inspector.inspectorFront.once("color-picked", resolve);
+  });
+  // The change to the content is done async after rule view change
+  const onRuleViewChanged = view.once("ruleview-changed");
+
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mousemove",
+  });
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mousedown",
+  });
+  await safeSynthesizeMouseEventAtCenterInContentPage("#div1", {
+    type: "mouseup",
+  });
+
+  await onPicked;
+  await onRuleViewChanged;
+
+  const color = swatch.style.backgroundColor;
+  is(color, EXPECTED_COLOR, "swatch changed colors");
+
+  ok(!swatch.eyedropperOpen, "swatch eye dropper is closed");
+  ok(!swatch.activeSwatch, "no active swatch");
+
+  is(
+    await getComputedStyleProperty("div", null, "background-color"),
+    EXPECTED_COLOR,
+    "div's color set to body color after dropper"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js
new file mode 100644
index 0000000000..037c3f8a82
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-appears-on-swatch-click.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the that Filter Editor Tooltip opens by clicking on filter swatches
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+
+  const { toolbox, view } = await openRuleView();
+
+  info("Getting the filter swatch element");
+  const property = await getRuleViewProperty(view, "body", "filter", {
+    wait: true,
+  });
+
+  const swatch = property.valueSpan.querySelector(".ruleview-filterswatch");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+
+  ok(true, "The shown event was emitted after clicking on swatch");
+  ok(
+    !inplaceEditor(swatch.parentNode),
+    "The inplace editor wasn't shown as a result of the filter swatch click"
+  );
+
+  info("Get the cssfilter widget instance");
+  const widget = filterTooltip.widget;
+  const select = widget.el.querySelector("select");
+
+  // Next we will check that interacting with the select does not close the
+  // filter tooltip.
+  info("Show the filter select");
+  const onSelectPopupShown = BrowserTestUtils.waitForSelectPopupShown(window);
+  EventUtils.synthesizeMouseAtCenter(select, {}, toolbox.win);
+  const selectPopup = await onSelectPopupShown;
+  ok(
+    filterTooltip.tooltip.isVisible(),
+    "The tooltip was not hidden when opening the select"
+  );
+
+  info("Hide the filter select");
+  const onSelectPopupHidden = once(selectPopup, "popuphidden");
+  const blurMenuItem = selectPopup.querySelector("menuitem[label='blur']");
+  EventUtils.synthesizeMouseAtCenter(blurMenuItem, {}, window);
+  await onSelectPopupHidden;
+  await waitFor(() => select.value === "blur");
+  is(
+    select.value,
+    "blur",
+    "The filter select was updated with the correct value"
+  );
+  ok(
+    filterTooltip.tooltip.isVisible(),
+    "The tooltip was not hidden when using the select"
+  );
+
+  await hideTooltipAndWaitForRuleViewChanged(filterTooltip, view);
+  await waitForTick();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js
new file mode 100644
index 0000000000..7237f0c997
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-commit-on-ENTER.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests the Filter Editor Tooltip committing changes on ENTER
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { view } = await openRuleView();
+
+  info("Get the filter swatch element");
+  const swatch = getRuleViewProperty(
+    view,
+    "body",
+    "filter"
+  ).valueSpan.querySelector(".ruleview-filterswatch");
+
+  info("Click on the filter swatch element");
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  let onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+
+  info("Get the cssfilter widget instance");
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const widget = filterTooltip.widget;
+
+  info("Set a new value in the cssfilter widget");
+  onRuleViewChanged = view.once("ruleview-changed");
+  widget.setCssValue("blur(2px)");
+  await waitForComputedStyleProperty("body", null, "filter", "blur(2px)");
+  await onRuleViewChanged;
+  ok(true, "Changes previewed on the element");
+
+  info("Press RETURN to commit changes");
+  // Pressing return in the cssfilter tooltip triggeres 2 ruleview-changed
+  onRuleViewChanged = waitForNEvents(view, "ruleview-changed", 2);
+  EventUtils.sendKey("RETURN", widget.styleWindow);
+  await onRuleViewChanged;
+
+  is(
+    await getComputedStyleProperty("body", null, "filter"),
+    "blur(2px)",
+    "The elemenet's filter was kept after RETURN"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js b/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
new file mode 100644
index 0000000000..ea46af9997
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_filtereditor-revert-on-ESC.js
@@ -0,0 +1,74 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that changes made to the Filter Editor Tooltip are reverted when
+// ESC is pressed
+
+const TEST_URL = URL_ROOT + "doc_filter.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { view } = await openRuleView();
+  await testPressingEscapeRevertsChanges(view);
+});
+
+async function testPressingEscapeRevertsChanges(view) {
+  const prop = getTextProperty(view, 1, { filter: "blur(2px) contrast(2)" });
+  const propEditor = prop.editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-filterswatch");
+
+  await clickOnFilterSwatch(swatch, view);
+  await setValueInFilterWidget("blur(2px)", view);
+
+  await waitForComputedStyleProperty("body", null, "filter", "blur(2px)");
+  is(
+    propEditor.valueSpan.textContent,
+    "blur(2px)",
+    "Got expected property value."
+  );
+
+  await pressEscapeToCloseTooltip(view);
+
+  await waitForComputedStyleProperty(
+    "body",
+    null,
+    "filter",
+    "blur(2px) contrast(2)"
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "blur(2px) contrast(2)",
+    "Got expected property value."
+  );
+}
+
+async function clickOnFilterSwatch(swatch, view) {
+  info("Clicking on a css filter swatch to open the tooltip");
+
+  // Clicking on a cssfilter swatch sets the current filter value in the tooltip
+  // which, in turn, makes the FilterWidget emit an "updated" event that causes
+  // the rule-view to refresh. So we must wait for the ruleview-changed event.
+  const onRuleViewChanged = view.once("ruleview-changed");
+  swatch.click();
+  await onRuleViewChanged;
+}
+
+async function setValueInFilterWidget(value, view) {
+  info("Setting the CSS filter value in the tooltip");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  filterTooltip.widget.setCssValue(value);
+  await onRuleViewChanged;
+}
+
+async function pressEscapeToCloseTooltip(view) {
+  info("Pressing ESCAPE to close the tooltip");
+
+  const filterTooltip = view.tooltips.getTooltip("filterEditor");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("ESCAPE", filterTooltip.widget.styleWindow);
+  await onRuleViewChanged;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js
new file mode 100644
index 0000000000..eb887f9848
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-mutation.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the flexbox highlighter is hidden when the highlighted flexbox container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  const onRuleViewUpdated = view.once("ruleview-refreshed");
+  await selectNode("#flex", inspector);
+  await onRuleViewUpdated;
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Remove the #flex container in the content page.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#flex").remove()
+  );
+  await onHighlighterHidden;
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js
new file mode 100644
index 0000000000..85b8f5429f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-navigate.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that flexbox highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getNodeForActiveHighlighter, waitForHighlighterTypeShown } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  await navigateTo(TEST_URI_2);
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is hidden."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js
new file mode 100644
index 0000000000..aa35ffb322
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-on-reload.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a flexbox highlighter after reloading the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  info("Check that the flexbox highlighter can be displayed.");
+  await checkFlexboxHighlighter();
+
+  info("Close the toolbox before reloading the tab.");
+  await gDevTools.closeToolboxForTab(tab);
+
+  await reloadBrowser();
+
+  info(
+    "Check that the flexbox highlighter can be displayed after reloading the page."
+  );
+  await checkFlexboxHighlighter();
+});
+
+async function checkFlexboxHighlighter() {
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { getNodeForActiveHighlighter, waitForHighlighterTypeShown } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js
new file mode 100644
index 0000000000..dfa0368e1d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-highlighter-restored-after-reload.js
@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the flexbox highlighter is re-displayed after reloading a page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+const OTHER_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the flexbox highlighter can be displayed.");
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeRestored,
+    waitForHighlighterTypeDiscarded,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+  ok(getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter is shown.");
+
+  info("Reload the page, expect the highlighter to be displayed once again");
+  const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE);
+  const onReloaded = inspector.once("reloaded");
+  await reloadBrowser();
+  info("Wait for inspector to be reloaded after page reload");
+  await onReloaded;
+  info("Wait for the highlighter to be restored");
+  await onRestored;
+  ok(getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter restored.");
+
+  info("Navigate to another URL, and check that the highlighter is hidden");
+  const otherUri =
+    "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
+  const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE);
+  await navigateTo(otherUri);
+  info("Expect the highlighter not to be restored");
+  await onDiscarded;
+  ok(!getActiveHighlighter(HIGHLIGHTER_TYPE), "Flexbox highlighter not shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js
new file mode 100644
index 0000000000..cc58a25c5f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle-telemetry.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry is correct when the flexbox highlighter is activated from
+// the rules view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.rules.flexboxhighlighter.opened", "", 1, "scalar");
+  checkTelemetry(
+    "DEVTOOLS_FLEXBOX_HIGHLIGHTER_TIME_ACTIVE_SECONDS",
+    "",
+    null,
+    "hasentries"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js
new file mode 100644
index 0000000000..d09e28a0ec
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view and the display of the
+// flexbox highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js
new file mode 100644
index 0000000000..16f55d75c2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_01b.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flebox highlighter in the rule view and the display of the
+// flexbox highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: inline-flex;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js
new file mode 100644
index 0000000000..858562a5ee
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_02.js
@@ -0,0 +1,114 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view from an overridden
+// 'display: flex' declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex;
+    }
+    div, ul {
+      display: flex;
+    }
+  </style>
+  <ul id="flex">
+    <li>1</li>
+    <li>2</li>
+  </ul>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div, ul",
+    "display"
+  ).valueSpan;
+  const overriddenFlexboxToggle = overriddenContainer.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(
+    flexboxToggle && overriddenFlexboxToggle,
+    "Flexbox highlighter toggles are visible."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active") &&
+      !overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle buttons are not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter from the overridden rule in the rule-view."
+  );
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  overriddenFlexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle buttons are active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active") &&
+      overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling off the flexbox highlighter from the normal flexbox declaration in  " +
+      "the rule-view."
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle buttons are not " +
+      "active in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active") &&
+      !overriddenFlexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle buttons are not active."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js
new file mode 100644
index 0000000000..4f5ecbbd52
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_03.js
@@ -0,0 +1,133 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view with multiple flexboxes in the
+// page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .flex {
+      display: flex;
+    }
+  </style>
+  <div id="flex1" class="flex"></div>
+  <div id="flex2" class="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+  } = getHighlighterTestHelpers(inspector);
+
+  info("Selecting the first flexbox container.");
+  await selectNode("#flex1", inspector);
+  let container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  let flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the flexbox toggle for the first flexbox container in " +
+      "the rule-view."
+  );
+  ok(flexboxToggle, "flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for the first flexbox container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Selecting the second flexbox container.");
+  await selectNode("#flex2", inspector);
+  const firstFlexboxHighterShown =
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE);
+  container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the CSS flexbox toggle for the second flexbox container " +
+      "in the rule-view."
+  );
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is still shown."
+  );
+
+  info(
+    "Toggling ON the flexbox highlighter for the second flexbox container from the " +
+      "rule-view."
+  );
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created for the second flexbox container " +
+      "and toggle button is active in the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE) != firstFlexboxHighterShown,
+    "Flexbox highlighter for the second flexbox container is shown."
+  );
+
+  info("Selecting the first flexbox container.");
+  await selectNode("#flex1", inspector);
+  container = getRuleViewProperty(view, ".flex", "display").valueSpan;
+  flexboxToggle = container.querySelector(".js-toggle-flexbox-highlighter");
+
+  info(
+    "Checking the state of the flexbox toggle for the first flexbox container in " +
+      "the rule-view."
+  );
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js
new file mode 100644
index 0000000000..abf1e1e1d5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_flexbox-toggle_04.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the flexbox highlighter in the rule view from a
+// 'display: flex!important' declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #flex {
+      display: flex !important;
+    }
+  </style>
+  <div id="flex"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.FLEXBOX;
+  const {
+    getActiveHighlighter,
+    getNodeForActiveHighlighter,
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeHidden,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#flex", inspector);
+  const container = getRuleViewProperty(view, "#flex", "display").valueSpan;
+  const flexboxToggle = container.querySelector(
+    ".js-toggle-flexbox-highlighter"
+  );
+
+  info("Checking the initial state of the flexbox toggle in the rule-view.");
+  ok(flexboxToggle, "Flexbox highlighter toggle is visible.");
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter exists in the rule-view."
+  );
+  ok(
+    !getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+
+  info("Toggling ON the flexbox highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the flexbox highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle is active."
+  );
+  ok(
+    getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter created in the rule-view."
+  );
+  ok(
+    getNodeForActiveHighlighter(HIGHLIGHTER_TYPE),
+    "Flexbox highlighter is shown."
+  );
+
+  info("Toggling OFF the flexbox highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  flexboxToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the flexbox highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !flexboxToggle.classList.contains("active"),
+    "Flexbox highlighter toggle button is not active."
+  );
+  ok(
+    !getActiveHighlighter(HIGHLIGHTER_TYPE),
+    "No flexbox highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js b/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js
new file mode 100644
index 0000000000..5e067be731
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_font-family-parsing.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the parsed font-family property value shown in the rules
+// pane is correct.
+
+const TEST_URI = `
+  <style type="text/css">
+    #id1 {
+      font-family: georgia, arial, sans-serif;
+    }
+    #id2 {
+      font-family: georgia,arial,sans-serif;
+    }
+    #id3 {
+      font-family: georgia ,arial ,sans-serif;
+    }
+    #id4 {
+      font-family: georgia , arial , sans-serif;
+    }
+    #id4 {
+      font-family:   arial,  georgia,   sans-serif  ;
+    }
+    #id5 {
+      font-family: helvetica !important;
+    }
+  </style>
+  <div id="id1">1</div>
+  <div id="id2">2</div>
+  <div id="id3">3</div>
+  <div id="id4">4</div>
+  <div id="id5">5</div>
+`;
+
+const TESTS = [
+  { selector: "#id1", expectedTextContent: "georgia, arial, sans-serif" },
+  { selector: "#id2", expectedTextContent: "georgia,arial,sans-serif" },
+  { selector: "#id3", expectedTextContent: "georgia ,arial ,sans-serif" },
+  { selector: "#id4", expectedTextContent: "arial, georgia, sans-serif" },
+  { selector: "#id5", expectedTextContent: "helvetica !important" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { selector, expectedTextContent } of TESTS) {
+    await selectNode(selector, inspector);
+    info("Looking for font-family property value in selector " + selector);
+
+    const prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
+    is(
+      prop.textContent,
+      expectedTextContent,
+      "The font-family property value is correct"
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js
new file mode 100644
index 0000000000..1394c0532c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-mutation.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is hidden when the highlighted grid container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  info("Remove the #grid container in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#grid").remove()
+  );
+  await onHighlighterHidden;
+  ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js
new file mode 100644
index 0000000000..6c2192b800
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-navigate.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that grid highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = inspector.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  await navigateTo(TEST_URI_2);
+  ok(!highlighters.gridHighlighters.size, "CSS grid highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js
new file mode 100644
index 0000000000..7850b069ae
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-on-reload.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a grid highlighter showing grid gaps can be displayed after reloading the
+// page (Bug 1342051).
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+      grid-gap: 10px;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the grid highlighter can be displayed");
+  await checkGridHighlighter();
+
+  info("Close the toolbox before reloading the tab");
+  await gDevTools.closeToolboxForTab(gBrowser.selectedTab);
+
+  await reloadBrowser();
+
+  info(
+    "Check that the grid highlighter can be displayed after reloading the page"
+  );
+  await checkGridHighlighter();
+});
+
+async function checkGridHighlighter() {
+  const { inspector, view } = await openRuleView();
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
new file mode 100644
index 0000000000..6a2e5743af
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-highlighter-restored-after-reload.js
@@ -0,0 +1,83 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the grid highlighter is re-displayed after reloading a page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+const OTHER_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+    <div id="cell3">cell3</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  info("Check that the grid highlighter can be displayed");
+  const { inspector, view } = await openRuleView();
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const {
+    waitForHighlighterTypeShown,
+    waitForHighlighterTypeRestored,
+    waitForHighlighterTypeDiscarded,
+  } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Reload the page, expect the highlighter to be displayed once again");
+  const onRestored = waitForHighlighterTypeRestored(HIGHLIGHTER_TYPE);
+
+  const onReloaded = inspector.once("reloaded");
+  await reloadBrowser();
+  info("Wait for inspector to be reloaded after page reload");
+  await onReloaded;
+
+  await onRestored;
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter was restored."
+  );
+
+  info("Navigate to another URL, and check that the highlighter is hidden");
+  const otherUri =
+    "data:text/html;charset=utf-8," + encodeURIComponent(OTHER_URI);
+  const onDiscarded = waitForHighlighterTypeDiscarded(HIGHLIGHTER_TYPE);
+  await navigateTo(otherUri);
+  await onDiscarded;
+  is(
+    highlighters.gridHighlighters.size,
+    0,
+    "CSS grid highlighter was not restored."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
new file mode 100644
index 0000000000..0decb7f7db
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-template-areas.js
@@ -0,0 +1,178 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly display the grid-template-areas value.
+// The CSS Grid spec allows to create grid-template-areas in an ascii-art style matrix.
+// It should show each string on its own line, when displaying rules for grid-template-areas.
+
+const TEST_URI = `
+<style type='text/css'>
+  #testid {
+    display: grid;
+    grid-template-areas: "a   a   bb"
+                         'a   a   bb'
+                         "ccc ccc bb";
+  }
+
+  #testid-quotes {
+    quotes: "«" "»" "‹" "›";
+  }
+
+  #testid-invalid-strings {
+    grid-template-areas: "a   a   b"
+                      "a   a";
+  }
+
+  #testid-valid-quotefree-value {
+    grid-template-areas: inherit;
+  }
+
+  .a {
+		grid-area: a;
+	}
+
+	.b {
+		grid-area: bb;
+	}
+
+	.c {
+		grid-area: ccc;
+	}
+</style>
+<div id="testid">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+  <div class="c">cell c</div>
+</div>
+<q id="testid-quotes">
+  Show us the wonder-working <q>Brothers,</q> let them come out publicly—and we will believe in them!
+</q>
+<div id="testid-invalid-strings">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+<div id="testid-valid-quotefree-value">
+  <div class="a">cell a</div>
+  <div class="b">cell b</div>
+</div>
+`;
+
+const multiLinesInnerText = '\n"a   a   bb" \n\'a   a   bb\' \n"ccc ccc bb"';
+const typedAndCopiedMultiLinesString = '"a a bb ccc" "a a bb ccc"';
+const typedAndCopiedMultiLinesInnerText = '\n"a a bb ccc" \n"a a bb ccc"';
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("#testid", inspector);
+
+  info(
+    "Tests display of grid-template-areas value in an ascii-art style," +
+      "displaying each string on its own line"
+  );
+
+  const gridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    gridRuleProperty.innerText,
+    multiLinesInnerText,
+    "the grid-area is displayed with each string in its own line, and sufficient spacing for areas to align vertically"
+  );
+
+  // copy/paste the current value inside, to also make sure of the value copied is useful as text
+
+  // Calculate offsets to click in the value line which is below the property name line .
+  const rect = gridRuleProperty.getBoundingClientRect();
+  const previousProperty = await getRuleViewProperty(
+    view,
+    "#testid",
+    "display"
+  ).nameSpan.getBoundingClientRect();
+
+  const x = rect.width / 2;
+  const y = rect.y - previousProperty.y + 1;
+
+  info("Focusing the css property editable value");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  info("typing a new value");
+  [...typedAndCopiedMultiLinesString].map(char =>
+    EventUtils.synthesizeKey(char, {}, view.styleWindow)
+  );
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText,
+    "the typed value is correct, and a single quote is displayed on its own line"
+  );
+  info("copy-paste the 'grid-template-areas' property value to duplicate it");
+  const onDone = view.once("ruleview-changed");
+  await focusEditableField(view, gridRuleProperty, x, y);
+  EventUtils.synthesizeKey("C", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("KEY_ArrowRight", {}, view.styleWindow);
+  EventUtils.synthesizeKey("V", { accelKey: true }, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  await onDone;
+
+  info("Check copy-pasting the property value is not breaking it");
+
+  is(
+    gridRuleProperty.innerText,
+    typedAndCopiedMultiLinesInnerText + " " + typedAndCopiedMultiLinesInnerText,
+    "copy-pasting the current value duplicate the correct value, with each string of the multi strings grid-template-areas value is displayed on a new line"
+  );
+
+  // test that when "non grid-template-area", like quotes for example, its multi-string value is not displayed over multiple lines
+  await selectNode("#testid-quotes", inspector);
+
+  info(
+    "Tests display of content string value is NOT in an ascii-art style," +
+      "displaying each string on a single line"
+  );
+
+  const contentRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-quotes",
+    "quotes"
+  ).valueSpan;
+  is(
+    contentRuleProperty.innerText,
+    '"«" "»" "‹" "›"',
+    "the quotes strings values are all displayed on the same single line"
+  );
+
+  // test that when invalid strings values do not get formatted
+  info("testing it does not try to format invalid values");
+  await selectNode("#testid-invalid-strings", inspector);
+  const invalidGridRuleProperty = await getRuleViewProperty(
+    view,
+    "#testid-invalid-strings",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    invalidGridRuleProperty.innerText,
+    '"a a b" "a a"',
+    "the invalid strings values do not get formatted"
+  );
+
+  // test that when a valid value without quotes such as `inherit` it does not get formatted
+  info("testing it does not try to format valid non-quote values");
+  await selectNode("#testid-valid-quotefree-value", inspector);
+  const validGridRuleNoQuoteProperty = await getRuleViewProperty(
+    view,
+    "#testid-valid-quotefree-value",
+    "grid-template-areas"
+  ).valueSpan;
+  is(
+    validGridRuleNoQuoteProperty.innerText,
+    "inherit",
+    "the valid quote-free values do not get formatted"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js
new file mode 100644
index 0000000000..7ea229a734
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle-telemetry.js
@@ -0,0 +1,42 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the telemetry count is correct when the grid highlighter is activated from
+// the rules view.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  startTelemetry();
+  const { inspector, view } = await openRuleView();
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  checkResults();
+});
+
+function checkResults() {
+  checkTelemetry("devtools.rules.gridinspector.opened", "", 1, "scalar");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js
new file mode 100644
index 0000000000..21097c907a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and the display of the
+// grid highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js
new file mode 100644
index 0000000000..0933d1b4ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_01b.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view and the display of the
+// grid highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: inline-grid;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js
new file mode 100644
index 0000000000..2f168126a6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_02.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view from an overridden 'display: grid'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid;
+    }
+    div, ul {
+      display: grid;
+    }
+  </style>
+  <ul id="grid">
+    <li id="cell1">cell1</li>
+    <li id="cell2">cell2</li>
+  </ul>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div, ul",
+    "display"
+  ).valueSpan;
+  const overriddenGridToggle =
+    overriddenContainer.querySelector(".ruleview-grid");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !overriddenGridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active") &&
+      !overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle buttons are not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info(
+    "Toggling ON the CSS grid highlighter from the overridden rule in the rule-view."
+  );
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  overriddenGridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle buttons are active in " +
+      "the rule-view."
+  );
+  ok(
+    gridToggle.classList.contains("active") &&
+      overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info(
+    "Toggling off the CSS grid highlighter from the normal grid declaration in the " +
+      "rule-view."
+  );
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle buttons are not " +
+      "active in the rule-view."
+  );
+  ok(
+    !gridToggle.classList.contains("active") &&
+      !overriddenGridToggle.classList.contains("active"),
+    "Grid highlighter toggle buttons are not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js
new file mode 100644
index 0000000000..2beec28d0e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_03.js
@@ -0,0 +1,137 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view with multiple grids in the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 1);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
+
+  info("Selecting the first grid container.");
+  await selectNode("#grid1", inspector);
+  let container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  let gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the first grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info(
+    "Toggling ON the CSS grid highlighter for the first grid container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Selecting the second grid container.");
+  await selectNode("#grid2", inspector);
+  const firstGridHighterShown = highlighters.gridHighlighters
+    .keys()
+    .next().value;
+  container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the second grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(
+    highlighters.gridHighlighters.size,
+    1,
+    "CSS grid highlighter is still shown."
+  );
+
+  info(
+    "Toggling ON the CSS grid highlighter for the second grid container from the " +
+      "rule-view."
+  );
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created for the second grid container and " +
+      "toggle button is active in the rule-view."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  ok(
+    highlighters.gridHighlighters.keys().next().value != firstGridHighterShown,
+    "Grid highlighter for the second grid container is shown."
+  );
+
+  info("Selecting the first grid container.");
+  await selectNode("#grid1", inspector);
+  container = getRuleViewProperty(view, ".grid", "display").valueSpan;
+  gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info(
+    "Checking the state of the CSS grid toggle for the first grid container in the " +
+      "rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js
new file mode 100644
index 0000000000..70e4b91893
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_04.js
@@ -0,0 +1,81 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the grid highlighter in the rule view from a 'display: grid !important'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #grid {
+      display: grid !important;
+    }
+  </style>
+  <div id="grid">
+    <div id="cell1">cell1</div>
+    <div id="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid", inspector);
+  const container = getRuleViewProperty(view, "#grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter from the rule-view.");
+  const onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling OFF the CSS grid highlighter from the rule-view.");
+  const onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid highlighter is not shown and toggle button is not active " +
+      "in the rule-view."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js
new file mode 100644
index 0000000000..54d2d0979f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_grid-toggle_05.js
@@ -0,0 +1,139 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the grid toggle is hidden when the maximum number of grid highlighters
+// have been reached.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .grid {
+      display: grid;
+    }
+  </style>
+  <div id="grid1" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid2" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+  <div id="grid3" class="grid">
+    <div class="cell1">cell1</div>
+    <div class="cell2">cell2</div>
+  </div>
+`;
+
+add_task(async function () {
+  await pushPref("devtools.gridinspector.maxHighlighters", 2);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, gridInspector } = await openLayoutView();
+  const ruleView = selectRuleView(inspector);
+  const { document: doc } = gridInspector;
+  const { highlighters } = inspector;
+  const HIGHLIGHTER_TYPE = inspector.highlighters.TYPES.GRID;
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  await selectNode("#grid1", inspector);
+  const gridList = doc.getElementById("grid-list");
+  const checkbox2 = gridList.children[1].querySelector("input");
+  const checkbox3 = gridList.children[2].querySelector("input");
+  const container = getRuleViewProperty(ruleView, ".grid", "display").valueSpan;
+  const gridToggle = container.querySelector(".js-toggle-grid-highlighter");
+
+  info("Checking the initial state of the CSS grid toggle in the rule-view.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  ok(!highlighters.gridHighlighters.size, "No CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid2.");
+  let onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  checkbox2.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid3.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  checkbox3.click();
+  await onHighlighterShown;
+
+  info("Checking the CSS grid toggle for #grid1 is disabled.");
+  ok(
+    gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is disabled."
+  );
+  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
+
+  info("Toggling OFF the CSS grid highlighter for #grid3.");
+  let onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  checkbox3.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+
+  info("Toggling ON the CSS grid highlighter for #grid1 from the rule-view.");
+  onHighlighterShown = waitForHighlighterTypeShown(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterShown;
+
+  info("Checking the CSS grid toggle for #grid1 is not disabled.");
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    gridToggle.classList.contains("active"),
+    "Grid highlighter toggle is active."
+  );
+  is(highlighters.gridHighlighters.size, 2, "CSS grid highlighters are shown.");
+
+  info("Toggling OFF the CSS grid highlighter for #grid1 from the rule-view.");
+  onHighlighterHidden = waitForHighlighterTypeHidden(HIGHLIGHTER_TYPE);
+  gridToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS grid toggle for #grid1 is not disabled and not active."
+  );
+  ok(
+    !gridToggle.hasAttribute("disabled"),
+    "Grid highlighter toggle is not disabled."
+  );
+  ok(
+    !gridToggle.classList.contains("active"),
+    "Grid highlighter toggle button is not active."
+  );
+  is(highlighters.gridHighlighters.size, 1, "CSS grid highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
new file mode 100644
index 0000000000..ec7f4a358f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_gridline-names-are-shown-correctly.js
@@ -0,0 +1,146 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the text editor correctly calculates the grid line names shown in the
+// autocomplete popup. We generally want to show all the grid line names for a grid
+// container, except for implicit line names created by an implicitly named area.
+
+const TEST_URL = URL_ROOT + "doc_grid_area_gridline_names.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, view } = await openRuleView();
+
+  info(
+    "Test that implicit grid line names from explicit grid areas are shown."
+  );
+  await testExplicitNamedAreas(inspector, view);
+
+  info(
+    "Test that explicit grid line names creating implicit grid areas are shown."
+  );
+  await testImplicitNamedAreasWithExplicitGridLineNames(inspector, view);
+
+  info(
+    "Test that implicit grid line names creating implicit grid areas are not shown."
+  );
+  await testImplicitAreasWithImplicitGridLineNames(inspector, view);
+  await testImplicitNamedAreasWithReversedGridLineNames(inspector, view);
+});
+
+async function testExplicitNamedAreas(inspector, view) {
+  await selectNode(".header", inspector);
+
+  const gridColLines = ["header-start", "header-end", "main-start", "main-end"];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line column names are shown in the editor popup."
+  );
+  for (const lineName of gridColLines) {
+    ok(
+      editor.gridLineNames.cols.indexOf(lineName) > -1,
+      `${lineName} is a suggested implicit grid line`
+    );
+  }
+}
+
+async function testImplicitNamedAreasWithExplicitGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".contentArea", inspector);
+
+  const gridRowLines = [
+    "main-start",
+    "main-end",
+    "content-start",
+    "content-end",
+  ];
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[1];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the expected grid line row names are shown in the editor popup."
+  );
+  for (const lineName of gridRowLines) {
+    ok(
+      editor.gridLineNames.rows.indexOf(lineName) > -1,
+      `${lineName} is a suggested explicit grid line`
+    );
+  }
+}
+
+async function testImplicitAreasWithImplicitGridLineNames(inspector, view) {
+  await selectNode(".a", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Check that the implicit grid lines created by implicit areas are not shown."
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("a-end") > -1),
+    "a-end is not shown because it is created by an implicit named area."
+  );
+}
+
+async function testImplicitNamedAreasWithReversedGridLineNames(
+  inspector,
+  view
+) {
+  await selectNode(".b", inspector);
+
+  const propertyName = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  )[0];
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  const editor = await focusEditableField(view, propertyName);
+  const onPopupShown = once(editor.popup, "popup-opened");
+  await gridLineNamesUpdated;
+
+  EventUtils.synthesizeKey("VK_DOWN", { shiftKey: true }, view.styleWindow);
+
+  await onPopupShown;
+
+  info(
+    "Test that reversed implicit grid line names from implicit areas are not shown"
+  );
+  ok(
+    !(editor.gridLineNames.cols.indexOf("b-start") > -1),
+    "b-start is not shown because it is created by an implicit named area."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js b/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js
new file mode 100644
index 0000000000..e80e7f01ac
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_gridline-names-autocomplete.js
@@ -0,0 +1,205 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that CSS property values are autocompleted and cycled
+// correctly when editing an existing property in the rule view.
+
+// format :
+//  [
+//    what key to press,
+//    modifers,
+//    expected input box value after keypress,
+//    is the popup open,
+//    is a suggestion selected in the popup,
+//    expect ruleview-changed,
+//  ]
+
+const OPEN = true,
+  SELECTED = true,
+  CHANGE = true;
+const changeTestData = [
+  ["c", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["o", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["l", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "col2-start", OPEN, SELECTED, CHANGE],
+  ["VK_RIGHT", {}, "col2-start", !OPEN, !SELECTED, !CHANGE],
+];
+
+// Creates a new CSS property value.
+// Checks that grid-area autocompletes column and row names.
+const newAreaTestData = [
+  ["g", {}, "gap", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["VK_DOWN", {}, "grid-area", OPEN, SELECTED, !CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, !CHANGE],
+  "grid-line-names-updated",
+  ["c", {}, "col1-start", OPEN, SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "c", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", OPEN, !SELECTED, CHANGE],
+  ["r", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["r", {}, "rr", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "r", !OPEN, !SELECTED, CHANGE],
+  ["o", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["VK_RETURN", {}, "", !OPEN, !SELECTED, CHANGE],
+];
+
+// Creates a new CSS property value.
+// Checks that grid-row only autocompletes row names.
+const newRowTestData = [
+  ["g", {}, "gap", OPEN, SELECTED, !CHANGE],
+  ["r", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["i", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["d", {}, "grid", OPEN, SELECTED, !CHANGE],
+  ["-", {}, "grid-area", OPEN, SELECTED, !CHANGE],
+  ["r", {}, "grid-row", OPEN, SELECTED, !CHANGE],
+  ["VK_RETURN", {}, "", !OPEN, !SELECTED, !CHANGE],
+  "grid-line-names-updated",
+  ["c", {}, "c", !OPEN, !SELECTED, CHANGE],
+  ["VK_BACK_SPACE", {}, "", OPEN, !SELECTED, CHANGE],
+  ["r", {}, "revert", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "revert-layer", OPEN, SELECTED, CHANGE],
+  ["VK_DOWN", {}, "row1-start", OPEN, SELECTED, CHANGE],
+  ["VK_TAB", {}, "", !OPEN, !SELECTED, CHANGE],
+];
+
+const TEST_URL = URL_ROOT + "doc_grid_names.html";
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Test autocompletion changing a preexisting property");
+  await runChangePropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    changeTestData
+  );
+
+  info("Test autocompletion creating a new property");
+  await runNewPropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    newAreaTestData
+  );
+
+  info("Test autocompletion creating a new property");
+  await runNewPropertyAutocompletionTest(
+    toolbox,
+    inspector,
+    view,
+    newRowTestData
+  );
+});
+
+async function runNewPropertyAutocompletionTest(
+  toolbox,
+  inspector,
+  view,
+  testData
+) {
+  info("Selecting the test node");
+  await selectNode("#cell2", inspector);
+
+  info("Focusing the css property editable field");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const editor = await focusNewRuleViewProperty(ruleEditor);
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+
+  info("Starting to test for css property completion");
+  for (const data of testData) {
+    if (data == "grid-line-names-updated") {
+      await gridLineNamesUpdated;
+      continue;
+    }
+    await testCompletion(data, editor, view);
+  }
+}
+
+async function runChangePropertyAutocompletionTest(
+  toolbox,
+  inspector,
+  view,
+  testData
+) {
+  info("Selecting the test node");
+  await selectNode("#cell3", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1).rule;
+  const prop = ruleEditor.textProps[0];
+
+  info("Focusing the css property editable value");
+  const gridLineNamesUpdated = inspector.once("grid-line-names-updated");
+  let editor = await focusEditableField(view, prop.editor.valueSpan);
+  await gridLineNamesUpdated;
+
+  info("Starting to test for css property completion");
+  for (const data of testData) {
+    // Re-define the editor at each iteration, because the focus may have moved
+    // from property to value and back
+    editor = inplaceEditor(view.styleDocument.activeElement);
+    await testCompletion(data, editor, view);
+  }
+}
+
+async function testCompletion(
+  [key, modifiers, completion, open, selected, change],
+  editor,
+  view
+) {
+  info("Pressing key " + key);
+  info("Expecting " + completion);
+  info("Is popup opened: " + open);
+  info("Is item selected: " + selected);
+
+  let onDone;
+  if (change) {
+    // If the key triggers a ruleview-changed, wait for that event, it will
+    // always be the last to be triggered and tells us when the preview has
+    // been done.
+    onDone = view.once("ruleview-changed");
+  } else {
+    // Otherwise, expect an after-suggest event (except if the popup gets
+    // closed).
+    onDone =
+      key !== "VK_RIGHT" && key !== "VK_BACK_SPACE"
+        ? editor.once("after-suggest")
+        : null;
+  }
+
+  // Also listening for popup opened/closed events if needed.
+  const popupEvent = open ? "popup-opened" : "popup-closed";
+  const onPopupEvent =
+    editor.popup.isOpen !== open ? once(editor.popup, popupEvent) : null;
+
+  info("Synthesizing key " + key + ", modifiers: " + Object.keys(modifiers));
+
+  EventUtils.synthesizeKey(key, modifiers, view.styleWindow);
+
+  // Flush the debounce for the preview text.
+  view.debounce.flush();
+
+  await onDone;
+  await onPopupEvent;
+
+  // The key might have been a TAB or shift-TAB, in which case the editor will
+  // be a new one
+  editor = inplaceEditor(view.styleDocument.activeElement);
+
+  info("Checking the state");
+  if (completion !== null) {
+    is(editor.input.value, completion, "Correct value is autocompleted");
+  }
+
+  if (!open) {
+    ok(!(editor.popup && editor.popup.isOpen), "Popup is closed");
+  } else {
+    ok(editor.popup.isOpen, "Popup is open");
+    is(editor.popup.selectedIndex !== -1, selected, "An item is selected");
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
new file mode 100644
index 0000000000..22bec84378
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_guessIndentation.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we can guess indentation from a style sheet, not just a
+// rule.
+
+// Use a weird indentation depth to avoid accidental success.
+const TEST_URI = `
+  <style type='text/css'>
+div {
+       background-color: blue;
+}
+
+* {
+}
+</style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+const expectedText = `
+div {
+       background-color: blue;
+}
+
+* {
+       color: chartreuse;
+}
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Add a new property in the rule-view");
+  await addProperty(view, 2, "color", "chartreuse");
+
+  info("Switch to the style-editor");
+  const { UI } = await toolbox.selectTool("styleeditor");
+
+  const styleEditor = await UI.editors[0].getSourceEditor();
+  const text = styleEditor.sourceEditor.getText();
+  is(text, expectedText, "style inspector changes are synced");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js b/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js
new file mode 100644
index 0000000000..f5e1357950
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-element-rule.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view's highlightElementRule scrolls to the specified rule.
+
+const TEST_URI = `
+  <style type="text/css">
+    .test::after {
+      content: "!";
+      color: red;
+    }
+  </style>
+  <div class="test">Hello</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode(".test", inspector);
+  const { rules, styleWindow } = view;
+
+  info("Highlight .test::after rule.");
+  const ruleId = rules[0].domRule.actorID;
+
+  info("Wait for the view to scroll to the property.");
+  const onHighlightProperty = view.once("scrolled-to-element");
+
+  view.highlightElementRule(ruleId);
+
+  await onHighlightProperty;
+
+  ok(
+    isInViewport(rules[0].editor.element, styleWindow),
+    ".test::after is in view."
+  );
+});
+
+function isInViewport(element, win) {
+  const { top, left, bottom, right } = element.getBoundingClientRect();
+  return (
+    top >= 0 &&
+    bottom <= win.innerHeight &&
+    left >= 0 &&
+    right <= win.innerWidth
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-property.js b/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
new file mode 100644
index 0000000000..6c244cecfd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-property.js
@@ -0,0 +1,94 @@
+/* Any copyright is dedicated to the Public Domain.
+  http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view's highlightProperty scrolls to the specified declaration.
+
+const TEST_URI = `
+  <style type="text/css">
+    .test {
+      margin: 5px;
+      font-size: 12px;
+      border: 1px solid blue;
+      margin-top: 20px;
+    }
+
+    .test::after {
+      content: "!";
+      color: red;
+    }
+  </style>
+  <div class="test">Hello this is a test</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode(".test", inspector);
+  const { rules, styleWindow } = view;
+
+  info(
+    "Highlight the computed border-left-width declaration in the rule view."
+  );
+  const borderLeftWidthStyle = rules[2].textProps[2].computed.find(
+    ({ name }) => name === "border-left-width"
+  );
+
+  let onHighlightProperty = view.once("scrolled-to-element");
+  let isHighlighted = view.highlightProperty("border-left-width");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "border-left-property is highlighted.");
+  ok(
+    isInViewport(borderLeftWidthStyle.element, styleWindow),
+    "border-left-width is in view."
+  );
+
+  info("Highlight the font-size declaration in the rule view.");
+  const fontSize = rules[2].textProps[1].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("font-size");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "font-size property is highlighted.");
+  ok(isInViewport(fontSize.element, styleWindow), "font-size is in view.");
+
+  info("Highlight the pseudo-element's color declaration in the rule view.");
+  const color = rules[0].textProps[1].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("color");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "color property is highlighted.");
+  ok(isInViewport(color.element, styleWindow), "color property is in view.");
+
+  info("Highlight margin-top declaration in the rules view.");
+  const marginTop = rules[2].textProps[3].editor;
+
+  info("Wait for the view to scroll to the property.");
+  onHighlightProperty = view.once("scrolled-to-element");
+  isHighlighted = view.highlightProperty("margin-top");
+  await onHighlightProperty;
+
+  ok(isHighlighted, "margin-top property is highlighted.");
+  ok(
+    isInViewport(marginTop.element, styleWindow),
+    "margin-top property is in view."
+  );
+});
+
+function isInViewport(element, win) {
+  const { top, left, bottom, right } = element.getBoundingClientRect();
+  return (
+    top >= 0 &&
+    bottom <= win.innerHeight &&
+    left >= 0 &&
+    right <= win.innerWidth
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
new file mode 100644
index 0000000000..f0dc95f15c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_highlight-used-fonts.js
@@ -0,0 +1,125 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that a used font-family is highlighted in the rule-view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #id1 {
+      font-family: foo, bar, sans-serif;
+    }
+    #id2 {
+      font-family: serif;
+    }
+    #id3 {
+      font-family: foo, monospace, monospace, serif;
+    }
+    #id4 {
+      font-family: foo, bar;
+    }
+    #id5 {
+      font-family: "monospace";
+    }
+    #id6 {
+      font-family: georgia, arial;
+    }
+    #id7 {
+      font-family: foo, serif !important;
+    }
+    #id8 {
+      font-family: important;
+    }
+    #id9::before {
+      content: ' ';
+      font-family: foo, monospace;
+    }
+  </style>
+  <div id="id1">Text</div>
+  <div id="id2">Text</div>
+  <div id="id3">Text</div>
+  <div id="id4">Text</div>
+  <div id="id5">Text</div>
+  <div id="id6">A &#586;</div>
+  <div id="id7">Text</div>
+  <div id="id8">Text</div>
+  <div id="id9">Text</div>
+`;
+
+// Tests that font-family properties in the rule-view correctly
+// indicates which font is in use.
+// Each entry in the test array should contain:
+// {
+//   baseSelector: the rule-view selector to look for font-family in
+//   nb: the number of fonts this property should have
+//   used: the indexes of all the fonts that should be highlighted, or null if none should
+//         be highlighted
+//   selectBeforePseudoElement: Whether the before pseudo element should be selectd or not
+// }
+const TESTS = [
+  { baseSelector: "#id1", nb: 3, used: [2] }, // sans-serif
+  { baseSelector: "#id2", nb: 1, used: [0] }, // serif
+  { baseSelector: "#id3", nb: 4, used: [1] }, // monospace
+  { baseSelector: "#id4", nb: 2, used: null },
+  { baseSelector: "#id5", nb: 1, used: [0] }, // monospace
+  { baseSelector: "#id7", nb: 2, used: [1] }, // serif
+  { baseSelector: "#id8", nb: 1, used: null },
+  { baseSelector: "#id9", nb: 2, used: [1], selectBeforePseudoElement: true }, // monospace
+];
+
+if (Services.appinfo.OS !== "Linux") {
+  // Both georgia and arial are used because the second character can't be rendered with
+  // georgia, so the browser falls back. Also, skip this on Linux which has neither of
+  // these fonts.
+  TESTS.push({ baseSelector: "#id6", nb: 2, used: [0, 1] });
+}
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { baseSelector, nb, used, selectBeforePseudoElement } of TESTS) {
+    const onFontHighlighted = view.once("font-highlighted");
+
+    if (selectBeforePseudoElement) {
+      // Query the first children node to get the before pseudo element:
+      const baseNode = await getNodeFront(baseSelector, inspector);
+      const pseudoElement = (await inspector.walker.children(baseNode))
+        .nodes[0];
+      await selectNode(pseudoElement, inspector);
+    } else {
+      await selectNode(baseSelector, inspector);
+    }
+    await onFontHighlighted;
+
+    const selector = !selectBeforePseudoElement
+      ? baseSelector
+      : `${baseSelector}::before`;
+    info(`Looking for fonts in font-family property for: <${selector}>`);
+
+    const prop = getRuleViewProperty(view, selector, "font-family").valueSpan;
+    const fonts = prop.querySelectorAll(".ruleview-font-family");
+
+    ok(fonts.length, "Fonts found in the property");
+    is(fonts.length, nb, "Correct number of fonts found in the property");
+
+    const highlighted = [...fonts].filter(span =>
+      span.classList.contains("used-font")
+    );
+    const expectedHighlightedNb = used === null ? 0 : used.length;
+    is(
+      highlighted.length,
+      expectedHighlightedNb,
+      "Correct number of used fonts found"
+    );
+
+    let highlightedIndex = 0;
+    [...fonts].forEach((font, index) => {
+      if (font === highlighted[highlightedIndex]) {
+        is(index, used[highlightedIndex], "The right font is highlighted");
+        highlightedIndex++;
+      }
+    });
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js b/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js
new file mode 100644
index 0000000000..76c2b4a5ba
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_imported_stylesheet_edit.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+const TEST_URI = URL_ROOT_SSL + "doc_rules_imported_stylesheet_edit.html";
+const SJS_URI = URL_ROOT_SSL + "sjs_imported_stylesheet_edit.sjs";
+/**
+ * Test that imported stylesheets are correctly handled by the inspector after
+ * being updated.
+ * The inspector used to retrieve an outdated version of the stylesheet text,
+ * which triggered many issues: outdated values, blank panels etc...
+ *
+ * This test involves an imported CSS which is generated by a sjs file.
+ * Using sjs here allows us to simulate an "update" of a stylesheet while still
+ * fetching the same URL, which closely matches what a developer would experience
+ * when manually editing a stylesheet in an IDE before reloading a page.
+ */
+add_task(async function () {
+  info("Call `?setup` on the test sjs");
+  await fetch(SJS_URI + "?setup");
+
+  info("Add the test tab, open the rule-view and select the test node");
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+  const redColorProp = getTextProperty(view, 1, { color: "red" });
+  ok(redColorProp, "RuleView displays a color:red property");
+
+  // The "?update-stylesheet" call will change the CSS returned by sjs_imported_stylesheet_edit.sjs:
+  // - some rules are added before the matching `div {}` rule
+  // - the value of the `color` property changes
+  info("Call `?update-stylesheet` on the test sjs");
+  await fetch(SJS_URI + "?update-stylesheet");
+
+  info("Reload the page to restore the initial state");
+  await navigateTo(TEST_URI);
+
+  info("Wait until a rule is displayed at index 1");
+  await waitFor(() => view.element.children[1]);
+
+  info("Check that the displayed rule has been correctly updated.");
+  const goldColorProp = getTextProperty(view, 1, { color: "gold" });
+  ok(goldColorProp, "RuleView displays a color:gold property");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
new file mode 100644
index 0000000000..a196fcca40
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
@@ -0,0 +1,47 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a declaration's inactive state doesn't linger on its previous state when
+// the declaration it depends on changes. Bug 1593944
+
+const TEST_URI = `
+<style>
+  div {
+    justify-content: center;
+    /*! display: flex */
+  }
+</style>
+<div>`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const justifyContent = { "justify-content": "center" };
+  const justifyItems = { "justify-items": "center" };
+  const displayFlex = { display: "flex" };
+  const displayGrid = { display: "grid" };
+
+  info("Enable display:flex and check that justify-content becomes active");
+  await checkDeclarationIsInactive(view, 1, justifyContent);
+  await toggleDeclaration(view, 1, displayFlex);
+  await checkDeclarationIsActive(view, 1, justifyContent);
+
+  info(
+    "Rename justify-content to justify-items and check that it becomes inactive"
+  );
+  await updateDeclaration(view, 1, justifyContent, justifyItems);
+  await checkDeclarationIsInactive(view, 1, justifyItems);
+
+  info(
+    "Rename display:flex to display:grid and check that justify-items becomes active"
+  );
+  await updateDeclaration(view, 1, displayFlex, displayGrid);
+  await checkDeclarationIsActive(view, 1, justifyItems);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js
new file mode 100644
index 0000000000..23f1b39845
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_flexbox.js
@@ -0,0 +1,161 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive flex properties.
+
+const TEST_URI = `
+<head>
+  <style>
+    #container {
+      width: 200px;
+      height: 100px;
+      border: 1px solid #000;
+      align-content: space-between;
+      order: 1;
+    }
+
+    .flex-item {
+      flex-basis: auto;
+      flex-grow: 1;
+      flex-shrink: 1;
+      flex-direction: row;
+    }
+
+    #self-aligned {
+      align-self: stretch;
+    }
+  </style>
+</head>
+<body>
+    <h1>browser_rules_inactive_css_flexbox.js</h1>
+    <div id="container" style="display:flex">
+      <div class="flex-item item-1" style="order:1">1</div>
+      <div class="flex-item item-2" style="order:2">2</div>
+      <div class="flex-item item-3" style="order:3">3</div>
+    </div>
+    <div id="self-aligned"></div>
+</body>`;
+
+const BEFORE = [
+  {
+    selector: "#self-aligned",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "stretch",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: ".item-2",
+    activeDeclarations: [
+      {
+        declarations: {
+          order: "2",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          "flex-basis": "auto",
+          "flex-grow": "1",
+          "flex-shrink": "1",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#container",
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "flex",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+          "align-content": "space-between",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          order: "1",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+const AFTER = [
+  {
+    selector: ".item-2",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          order: "2",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declaration: {
+          "flex-basis": "auto",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-grow": "1",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-shrink": "1",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, BEFORE);
+
+  // Toggle `display:flex` to disabled.
+  await toggleDeclaration(view, 0, {
+    display: "flex",
+  });
+  await runInactiveCSSTests(view, inspector, AFTER);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js
new file mode 100644
index 0000000000..a0afad08f7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_grid.js
@@ -0,0 +1,267 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive grid properties.
+
+const TEST_URI = `
+<head>
+  <style>
+    html {
+      grid-area: foo;
+    }
+    #container {
+      width: 200px;
+      height: 100px;
+      border: 1px solid #000;
+      column-gap: 10px;
+      row-gap: 10px;
+      align-self: start;
+      position: relative;
+    }
+
+    .item-1 {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 1;
+      grid-row-end: auto;
+      flex-direction: row
+    }
+
+    #abspos {
+      position: absolute;
+      grid-column: 2;
+    }
+
+    #self-aligned {
+      align-self: stretch;
+    }
+  </style>
+</head>
+<body>
+    <h1>browser_rules_inactive_css_grid.js</h1>
+    <div id="container" style="display:grid">
+      <div class="grid-item item-1">1</div>
+      <div class="grid-item item-2">2</div>
+      <div class="grid-item item-3">3</div>
+      <div class="grid-item item-4">4</div>
+      <div class="grid-item item-5">
+        <div id="abspos">AbsPos item</div>
+      </div>
+    </div>
+    <div id="self-aligned"></div>
+</body>`;
+
+const BEFORE = [
+  {
+    // Check first that the getting grid-related data about the <html> node doesn't break.
+    // See bug 1576484.
+    selector: "html",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "grid-area": "foo",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#self-aligned",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "stretch",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: ".item-1",
+    activeDeclarations: [
+      {
+        declarations: {
+          "grid-column-start": "1",
+          "grid-column-end": "3",
+          "grid-row-start": "1",
+          "grid-row-end": "auto",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "flex-direction": "row",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#abspos",
+    activeDeclarations: [
+      {
+        declarations: {
+          "grid-column": 2,
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#container",
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "grid",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+          "column-gap": "10px",
+          "row-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "align-self": "start",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+const AFTER = [
+  {
+    activeDeclarations: [
+      {
+        declarations: {
+          display: "grid",
+        },
+        ruleIndex: 0,
+      },
+      {
+        declarations: {
+          width: "200px",
+          height: "100px",
+          border: "1px solid #000",
+        },
+        ruleIndex: 1,
+      },
+    ],
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "column-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "row-gap": "10px",
+        },
+        ruleIndex: 1,
+      },
+      {
+        declaration: {
+          "align-self": "start",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#abspos",
+    inactiveDeclarations: [
+      {
+        declaration: {
+          "grid-column": 2,
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, BEFORE);
+
+  // Toggle `display:grid` to disabled.
+  await toggleDeclaration(view, 0, {
+    display: "grid",
+  });
+  await view.once("ruleview-refreshed");
+  await runInactiveCSSTests(view, inspector, AFTER);
+
+  info("Toggle `display: grid` to enabled again.");
+  await selectNode("#container", inspector);
+  await toggleDeclaration(view, 0, {
+    display: "grid",
+  });
+  await runAbsPosGridElementTests(view, inspector);
+});
+
+/**
+ * Tests for absolute positioned elements in a grid.
+ */
+async function runAbsPosGridElementTests(view, inspector) {
+  info("Toggling `position: relative` to disabled.");
+  await toggleDeclaration(view, 1, {
+    position: "relative",
+  });
+  await runInactiveCSSTests(view, inspector, [
+    {
+      selector: "#abspos",
+      inactiveDeclarations: [
+        {
+          declaration: {
+            "grid-column": 2,
+          },
+          ruleIndex: 1,
+        },
+      ],
+    },
+  ]);
+
+  info("Toggling `position: relative` back to enabled.");
+  await selectNode("#container", inspector);
+  await toggleDeclaration(view, 1, {
+    position: "relative",
+  });
+
+  info("Toggling `position: absolute` on grid element to disabled.");
+  await selectNode("#abspos", inspector);
+  await toggleDeclaration(view, 1, {
+    position: "absolute",
+  });
+
+  await runInactiveCSSTests(view, inspector, [
+    {
+      selector: "#abspos",
+      inactiveDeclarations: [
+        {
+          declaration: {
+            "grid-column": 2,
+          },
+          ruleIndex: 1,
+        },
+      ],
+    },
+  ]);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js
new file mode 100644
index 0000000000..2670e50d10
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_inline.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test css properties that are inactive on block-level elements.
+
+const TEST_URI = `
+<style>
+#block {
+  border: 1px solid #000;
+  vertical-align: sub;
+}
+td {
+  vertical-align: super;
+}
+#flex {
+  display: inline-flex;
+  vertical-align: text-bottom;
+}
+</style>
+<h1 style="vertical-align:text-bottom;">browser_rules_inactive_css_inline.js</h1>
+<div id="block">Block</div>
+<table>
+  <tr><td>A table cell</td></tr>
+</table>
+<div id="flex">Inline flex element</div>
+`;
+
+const TEST_DATA = [
+  {
+    selector: "h1",
+    inactiveDeclarations: [
+      {
+        declaration: { "vertical-align": "text-bottom" },
+        ruleIndex: 0,
+      },
+    ],
+  },
+  {
+    selector: "#block",
+    inactiveDeclarations: [
+      {
+        declaration: { "vertical-align": "sub" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "td",
+    activeDeclarations: [
+      {
+        declarations: { "vertical-align": "super" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+  {
+    selector: "#flex",
+    activeDeclarations: [
+      {
+        declarations: { "vertical-align": "text-bottom" },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
new file mode 100644
index 0000000000..d03bcd9e63
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_split-condition.js
@@ -0,0 +1,31 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a CSS property is marked as inactive when a condition
+// changes in other CSS rule matching the element.
+
+const TEST_URI = `
+<style>
+  .display {
+    display: grid;
+  }
+  .gap {
+    gap: 1em;
+  }
+</style>
+<div class="display gap">`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  await checkDeclarationIsActive(view, 1, { gap: "1em" });
+  await toggleDeclaration(view, 2, { display: "grid" });
+  await checkDeclarationIsInactive(view, 1, { gap: "1em" });
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js
new file mode 100644
index 0000000000..6b452f23bc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_visited.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test css properties that are inactive in :visited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited.html";
+
+const TEST_DATA = [
+  {
+    selector: "#visited",
+    inactiveDeclarations: [
+      {
+        declaration: { "font-size": "100px" },
+        ruleIndex: 2,
+      },
+      {
+        declaration: { "margin-left": "50px" },
+        ruleIndex: 2,
+      },
+    ],
+    activeDeclarations: [
+      {
+        declarations: {
+          "background-color": "transparent",
+          "border-color": "lime",
+          color: "rgba(0, 255, 0, 0.8)",
+          "text-decoration-color": "lime",
+          "text-emphasis-color": "seagreen",
+        },
+        ruleIndex: 2,
+      },
+    ],
+  },
+  {
+    selector: "#visited-and-other-matched-selector",
+    activeDeclarations: [
+      {
+        declarations: {
+          "background-color": "transparent",
+          "border-color": "lime",
+          color: "rgba(0, 255, 0, 0.8)",
+          "font-size": "100px",
+          "margin-left": "50px",
+          "text-decoration-color": "lime",
+          "text-emphasis-color": "seagreen",
+        },
+        ruleIndex: 1,
+      },
+    ],
+  },
+];
+
+add_task(async () => {
+  info("Open a url which has visited links");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited links are available");
+  const selectors = TEST_DATA.map(t => t.selector);
+  await waitUntilVisitedState(tab, selectors);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js
new file mode 100644
index 0000000000..b9536f1f9e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_xul.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test inactive css properties in XUL documents.
+
+const TEST_URI = URL_ROOT_SSL + "doc_inactive_css_xul.xhtml";
+
+const TEST_DATA = [
+  {
+    selector: "#test-img-in-xul",
+    inactiveDeclarations: [
+      {
+        declaration: { "grid-column-gap": "5px" },
+        ruleIndex: 0,
+      },
+    ],
+    activeDeclarations: [
+      {
+        declarations: {
+          width: "10px",
+          height: "10px",
+        },
+        ruleIndex: 0,
+      },
+    ],
+  },
+];
+
+add_task(async () => {
+  await SpecialPowers.pushPermissions([
+    { type: "allowXULXBL", allow: true, context: URL_ROOT_SSL },
+  ]);
+
+  info("Open a url to a XUL document");
+  await addTab(TEST_URI);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  await runInactiveCSSTests(view, inspector, TEST_DATA);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
new file mode 100644
index 0000000000..60e7966528
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_01.js
@@ -0,0 +1,53 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that inherited properties appear for a nested element in the
+// rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    #test2 {
+      background-color: green;
+      color: purple;
+    }
+  </style>
+  <div id="test2"><div id="test1">Styled Node</div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await simpleInherit(inspector, view);
+});
+
+function simpleInherit(inspector, view) {
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 2, "Should have 2 rules.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+
+  const inheritRule = elementStyle.rules[1];
+  is(
+    inheritRule.selectorText,
+    "#test2",
+    "Inherited rule should be the one that includes inheritable properties."
+  );
+  ok(!!inheritRule.inherited, "Rule should consider itself inherited.");
+  is(inheritRule.textProps.length, 2, "Rule should have two styles");
+  const bgcProp = inheritRule.textProps[0];
+  is(
+    bgcProp.name,
+    "background-color",
+    "background-color property should exist"
+  );
+  ok(bgcProp.invisible, "background-color property should be invisible");
+  const inheritProp = inheritRule.textProps[1];
+  is(inheritProp.name, "color", "color should have been inherited.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
new file mode 100644
index 0000000000..da489b45d1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_02.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that no inherited properties appear when the property does not apply
+// to the nested element.
+
+const TEST_URI = `
+  <style type="text/css">
+    #test2 {
+      background-color: green;
+    }
+  </style>
+  <div id="test2"><div id="test1">Styled Node</div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await emptyInherit(inspector, view);
+});
+
+function emptyInherit(inspector, view) {
+  // No inheritable styles, this rule shouldn't show up.
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 1, "Should have 1 rule.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js
new file mode 100644
index 0000000000..995fd7f88d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_03.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that inline inherited properties appear in the nested element.
+
+var {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+const TEST_URI = `
+  <div id="test2" style="color: red">
+    <div id="test1">Styled Node</div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#test1", inspector);
+  await elementStyleInherit(inspector, view);
+});
+
+function elementStyleInherit(inspector, view) {
+  const elementStyle = view._elementStyle;
+  is(elementStyle.rules.length, 2, "Should have 2 rules.");
+
+  const elementRule = elementStyle.rules[0];
+  ok(
+    !elementRule.inherited,
+    "Element style attribute should not consider itself inherited."
+  );
+
+  const inheritRule = elementStyle.rules[1];
+  is(
+    inheritRule.domRule.type,
+    ELEMENT_STYLE,
+    "Inherited rule should be an element style, not a rule."
+  );
+  ok(!!inheritRule.inherited, "Rule should consider itself inherited.");
+  is(
+    inheritRule.textProps.length,
+    1,
+    "Should only display one inherited style"
+  );
+  const inheritProp = inheritRule.textProps[0];
+  is(inheritProp.name, "color", "color should have been inherited.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js
new file mode 100644
index 0000000000..2416b01910
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inherited-properties_04.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that different inherited properties sections are created for rules
+// inherited from several elements of the same type.
+
+const TEST_URI = `
+  <div style="cursor:pointer">
+    A
+    <div style="cursor:pointer">
+      B<a>Cursor</a>
+    </div>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("a", inspector);
+  await elementStyleInherit(inspector, view);
+});
+
+function elementStyleInherit(inspector, view) {
+  const gutters = view.element.querySelectorAll(".ruleview-header");
+  is(gutters.length, 2, "Gutters should contains 2 sections");
+  ok(gutters[0].textContent, "Inherited from div");
+  ok(gutters[1].textContent, "Inherited from div");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js b/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js
new file mode 100644
index 0000000000..34a9943b56
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inline-source-map.js
@@ -0,0 +1,25 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when a source map comment appears in an inline stylesheet, the
+// rule-view still appears correctly.
+// Bug 1255787.
+
+const TESTCASE_URI = URL_ROOT + "doc_inline_sourcemap.html";
+const PREF = "devtools.source-map.client-service.enabled";
+
+add_task(async function () {
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const ruleEl = getRuleViewRule(view, "div");
+  ok(ruleEl, "The 'div' rule exists in the rule-view");
+
+  Services.prefs.clearUserPref(PREF);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js b/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js
new file mode 100644
index 0000000000..6018b04a85
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inline-style-order.js
@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that when the order of properties in the inline style changes, the inline style
+// rule updates accordingly.
+// This can happen in cases such as this one:
+// Given this DOM node:
+// <div style="margin:0;color:red;"></div>
+// Executing this:
+// element.style.margin = "10px";
+// Will result in the following attribute value:
+// <div style="color: red; margin: 10px;"></div>
+// The inline style rule in the rule-view need to update to reflect the new order of
+// properties accordingly.
+// Note however that we do not want to expect a specific order in this test, and be
+// subject to failures if it changes again. Instead, the test compares the order against
+// what is in the style DOM attribute.
+// See bug 1467076.
+
+// Test cases, these are { name, value } objects used to change the DOM element's style
+// property. After each of these changes, the inline style rule's content will be checked
+// against the style DOM attribute's content.
+const TEST_CASES = [
+  { name: "margin", value: "10px" },
+  { name: "color", value: "blue" },
+  { name: "padding", value: "20px" },
+  { name: "margin", value: "0px" },
+  { name: "color", value: "black" },
+];
+
+add_task(async function () {
+  const { linkedBrowser: browser } = await addTab(
+    `data:text/html;charset=utf-8,<div style="margin:0;color:red;">Inspect me!</div>`
+  );
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  for (const { name, value } of TEST_CASES) {
+    info(`Setting style.${name} to ${value} on the test node`);
+
+    const onStyleMutation = waitForStyleModification(inspector);
+    const onRuleRefreshed = inspector.once("rule-view-refreshed");
+    await SpecialPowers.spawn(
+      browser,
+      [{ name, value }],
+      async function (change) {
+        content.document.querySelector("div").style[change.name] = change.value;
+      }
+    );
+    await Promise.all([onStyleMutation, onRuleRefreshed]);
+
+    info("Getting and parsing the content of the node's style attribute");
+    const markupContainer = inspector.markup.getContainer(
+      inspector.selection.nodeFront
+    );
+    const styleAttrValue =
+      markupContainer.elt.querySelector(".attr-value").textContent;
+    const parsedStyleAttr = styleAttrValue
+      .split(";")
+      .filter(v => v.trim())
+      .map(decl => {
+        const nameValue = decl.split(":").map(v => v.trim());
+        return { name: nameValue[0], value: nameValue[1] };
+      });
+
+    info("Checking the content of the rule-view");
+    const ruleEditor = getRuleViewRuleEditor(view, 0);
+    const propertiesEls = ruleEditor.propertyList.children;
+
+    parsedStyleAttr.forEach((expected, i) => {
+      is(
+        propertiesEls[i].querySelector(".ruleview-propertyname").textContent,
+        expected.name,
+        `Correct name found for property ${i}`
+      );
+      is(
+        propertiesEls[i].querySelector(".ruleview-propertyvalue").textContent,
+        expected.value,
+        `Correct value found for property ${i}`
+      );
+    });
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js
new file mode 100644
index 0000000000..0e99d11789
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_invalid-source-map.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when a source map is missing/invalid, the rule view still loads
+// correctly.
+
+const TESTCASE_URI = URL_ROOT + "doc_invalid_sourcemap.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const CSS_LOC = "doc_invalid_sourcemap.css:1";
+
+add_task(async function () {
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const ruleEl = getRuleViewRule(view, "div");
+  ok(ruleEl, "The 'div' rule exists in the rule-view");
+
+  const prop = getRuleViewProperty(view, "div", "color");
+  ok(prop, "The 'color' property exists in this rule");
+
+  const value = getRuleViewPropertyValue(view, "div", "color");
+  is(value, "gold", "The 'color' property has the right value");
+
+  await verifyLinkText(view, CSS_LOC);
+
+  Services.prefs.clearUserPref(PREF);
+});
+
+function verifyLinkText(view, text) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  return waitForSuccess(
+    () => label.textContent == text,
+    "Link text changed to display correct location: " + text
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_invalid.js b/devtools/client/inspector/rules/test/browser_rules_invalid.js
new file mode 100644
index 0000000000..f6776b47c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_invalid.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that an invalid property still lets us display the rule view
+// Bug 1235603.
+
+const TEST_URI = `
+  <style>
+    div {
+        background: #fff;
+        font-family: sans-serif;
+        url(display-table.min.htc);
+    }
+ </style>
+ <body>
+    <div id="testid" class="testclass">Styled Node</div>
+ </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  is(view._elementStyle.rules.length, 2, "Should have 2 rules.");
+  // Have to actually get the rule in order to ensure that the
+  // elements were created.
+  ok(getRuleViewRule(view, "div"), "Rule with div selector exists");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_keybindings.js b/devtools/client/inspector/rules/test/browser_rules_keybindings.js
new file mode 100644
index 0000000000..ec4d1c5bf5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keybindings.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that focus doesn't leave the style editor when adding a property
+// (bug 719916)
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<h1>Some header text</h1>");
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info("Getting the ruleclose brace element");
+  const brace = view.styleDocument.querySelector(".ruleview-ruleclose");
+
+  info("Focus the new property editable field to create a color property");
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  editor.input.value = "color";
+
+  info("Typing ENTER to focus the next field: property value");
+  let onFocus = once(brace.parentNode, "focus", true);
+  let onRuleViewChanged = view.once("ruleview-changed");
+
+  EventUtils.sendKey("return");
+
+  await onFocus;
+  await onRuleViewChanged;
+  ok(true, "The value field was focused");
+
+  info("Entering a property value");
+  editor = getCurrentInplaceEditor(view);
+  editor.input.value = "green";
+
+  info("Typing ENTER again should focus a new property name");
+  onFocus = once(brace.parentNode, "focus", true);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendKey("return");
+  await onFocus;
+  await onRuleViewChanged;
+  ok(true, "The new property name field was focused");
+  getCurrentInplaceEditor(view).input.blur();
+});
+
+function getCurrentInplaceEditor(view) {
+  return inplaceEditor(view.styleDocument.activeElement);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js b/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js
new file mode 100644
index 0000000000..98b0452a9b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframeLineNumbers.js
@@ -0,0 +1,24 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing a rule will update the line numbers of subsequent
+// rules in the rule view.
+
+const TESTCASE_URI = URL_ROOT + "doc_keyframeLineNumbers.html";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#outer", inspector);
+
+  info("Insert a new property, which will affect the line numbers");
+  await addProperty(view, 1, "font-size", "72px");
+
+  await selectNode("#inner", inspector);
+
+  const value = getRuleViewLinkTextByIndex(view, 3);
+  // Note that this is relative to the <style>.
+  is(value.slice(-3), ":27", "rule line number is 27");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
new file mode 100644
index 0000000000..1200fa3ab0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-shadowdom.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that keyframes are displayed for elements nested under a shadow-root.
+
+const TEST_URI = `data:text/html;charset=utf-8,
+  <div></div>
+  <script>
+    document.querySelector('div').attachShadow({mode: 'open'}).innerHTML = \`
+      <span>text</span>
+      <style>
+        @keyframes blink {
+          0% {
+            border: rgba(255,0,0,1) 2px dashed;
+          }
+          100% {
+            border: rgba(255,0,0,0) 2px dashed;
+          }
+        }
+        span {
+          animation: blink .5s 0s infinite;
+        }
+      </style>\`;
+  </script>`;
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+
+  info("Expand the shadow-root parent");
+  const divFront = await getNodeFront("div", inspector);
+  await inspector.markup.expandNode(divFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  const { markup } = inspector;
+  const divContainer = markup.getContainer(divFront);
+
+  info("Expand the shadow-root");
+  const shadowRootContainer = divContainer.getChildContainers()[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Retrieve the rules displayed for the span under the shadow root");
+  const spanContainer = shadowRootContainer.getChildContainers()[0];
+  const rules = await getKeyframeRules(spanContainer.node, inspector, view);
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "border: rgba(255,0,0,1) 2px dashed",
+    "Keyframe blink (0%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[1].textProps),
+    "border: rgba(255,0,0,0) 2px dashed",
+    "Keyframe blink (100%) property is correct"
+  );
+});
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function getKeyframeRules(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  return rules;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js
new file mode 100644
index 0000000000..a5e7cf720a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_01.js
@@ -0,0 +1,121 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that keyframe rules and gutters are displayed correctly in the
+// rule view.
+
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await testPacman(inspector, view);
+  await testBoxy(inspector, view);
+  await testMoxy(inspector, view);
+});
+
+async function testPacman(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #pacman");
+
+  await assertKeyframeRules("#pacman", inspector, view, {
+    elementRulesNb: 2,
+    keyframeRulesNb: 2,
+    keyframesRules: ["pacman", "pacman"],
+    keyframeRules: ["100%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 2,
+    gutterHeading: ["Keyframes pacman", "Keyframes pacman"],
+  });
+}
+
+async function testBoxy(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #boxy");
+
+  await assertKeyframeRules("#boxy", inspector, view, {
+    elementRulesNb: 3,
+    keyframeRulesNb: 3,
+    keyframesRules: ["boxy", "boxy", "boxy"],
+    keyframeRules: ["10%", "20%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 1,
+    gutterHeading: ["Keyframes boxy"],
+  });
+}
+
+async function testMoxy(inspector, view) {
+  info("Test content and gutter in the keyframes rule of #moxy");
+
+  await assertKeyframeRules("#moxy", inspector, view, {
+    elementRulesNb: 3,
+    keyframeRulesNb: 4,
+    keyframesRules: ["boxy", "boxy", "boxy", "moxy"],
+    keyframeRules: ["10%", "20%", "100%", "100%"],
+  });
+
+  assertGutters(view, {
+    guttersNbs: 2,
+    gutterHeading: ["Keyframes boxy", "Keyframes moxy"],
+  });
+}
+
+async function assertKeyframeRules(selector, inspector, view, expected) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  is(
+    rules.elementRules.length,
+    expected.elementRulesNb,
+    selector + " has the correct number of non keyframe element rules"
+  );
+  is(
+    rules.keyframeRules.length,
+    expected.keyframeRulesNb,
+    selector + " has the correct number of keyframe rules"
+  );
+
+  let i = 0;
+  for (const keyframeRule of rules.keyframeRules) {
+    ok(
+      keyframeRule.keyframes.name == expected.keyframesRules[i],
+      keyframeRule.keyframes.name + " has the correct keyframes name"
+    );
+    ok(
+      keyframeRule.domRule.keyText == expected.keyframeRules[i],
+      keyframeRule.domRule.keyText + " selector heading is correct"
+    );
+    i++;
+  }
+}
+
+function assertGutters(view, expected) {
+  const gutters = view.element.querySelectorAll(".ruleview-header");
+
+  is(
+    gutters.length,
+    expected.guttersNbs,
+    "There are " + gutters.length + " gutter headings"
+  );
+
+  let i = 0;
+  for (const gutter of gutters) {
+    is(
+      gutter.textContent,
+      expected.gutterHeading[i],
+      "Correct " + gutter.textContent + " gutter headings"
+    );
+    i++;
+  }
+
+  return gutters;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js
new file mode 100644
index 0000000000..63e8ae4e65
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule_02.js
@@ -0,0 +1,95 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that verifies the content of the keyframes rule and property changes
+// to keyframe rules.
+
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await testPacman(inspector, view);
+  await testBoxy(inspector, view);
+});
+
+async function testPacman(inspector, view) {
+  info("Test content in the keyframes rule of #pacman");
+
+  const rules = await getKeyframeRules("#pacman", inspector, view);
+
+  info("Test text properties for Keyframes #pacman");
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "left: 750px",
+    "Keyframe pacman (100%) property is correct"
+  );
+
+  // Dynamic changes test disabled because of Bug 1050940
+  // If this part of the test is ever enabled again, it should be changed to
+  // use addProperty (in head.js) and stop using _applyingModifications
+
+  // info("Test dynamic changes to keyframe rule for #pacman");
+
+  // let defaultView = element.ownerDocument.defaultView;
+  // let ruleEditor = view.element.children[5].childNodes[0]._ruleEditor;
+  // ruleEditor.addProperty("opacity", "0", true);
+
+  // yield ruleEditor._applyingModifications;
+  // yield once(element, "animationend");
+
+  // is
+  // (
+  //   convertTextPropsToString(rules.keyframeRules[1].textProps),
+  //   "left: 750px; opacity: 0",
+  //   "Keyframe pacman (100%) property is correct"
+  // );
+
+  // is(defaultView.getComputedStyle(element).getPropertyValue("opacity"), "0",
+  //   "Added opacity property should have been used.");
+}
+
+async function testBoxy(inspector, view) {
+  info("Test content in the keyframes rule of #boxy");
+
+  const rules = await getKeyframeRules("#boxy", inspector, view);
+
+  info("Test text properties for Keyframes #boxy");
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[0].textProps),
+    "background-color: blue",
+    "Keyframe boxy (10%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[1].textProps),
+    "background-color: green",
+    "Keyframe boxy (20%) property is correct"
+  );
+
+  is(
+    convertTextPropsToString(rules.keyframeRules[2].textProps),
+    "opacity: 0",
+    "Keyframe boxy (100%) property is correct"
+  );
+}
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function getKeyframeRules(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.keyframes),
+    keyframeRules: elementStyle.rules.filter(rule => rule.keyframes),
+  };
+
+  return rules;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
new file mode 100644
index 0000000000..eb4bd1e050
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_large_base64_background_image.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// 1px red dot
+const shortDataUrl =
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P4z8DwHwAFAAH/F1FwBgAAAABJRU5ErkJggg==";
+
+// Not a valid base64 image, but will still generate a long text property
+const longDataUrl = new Array(1000 * 1000).join("a");
+
+const TEST_STYLESHEET = `
+body {
+  background-image: url(data:image/png;base64,${shortDataUrl});
+  background-image: url(data:image/png;base64,${longDataUrl});
+}`;
+
+// Serve the stylesheet dynamically from a test HTTPServer to avoid logging an
+// extremely long data-url when adding the tab using our usual test helpers.
+const server = createTestHTTPServer();
+const filepath = "/style.css";
+const cssuri = `http://localhost:${server.identity.primaryPort}${filepath}`;
+server.registerContentType("css", "text/css");
+server.registerPathHandler(filepath, (metadata, response) => {
+  response.write(TEST_STYLESHEET);
+});
+
+const TEST_URL =
+  "data:text/html," +
+  encodeURIComponent(`
+  <!DOCTYPE html>
+  <html>
+    <head>
+      <link href="${cssuri}" rel="stylesheet" />
+    </head>
+    <body></body>
+  </html>
+`);
+
+// Check that long URLs are rendered correctly in the rule view.
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const view = selectRuleView(inspector);
+
+  await selectNode("body", inspector);
+
+  const propertyValues = view.styleDocument.querySelectorAll(
+    ".ruleview-propertyvalue"
+  );
+
+  is(propertyValues.length, 2, "Ruleview has 2 propertyvalue elements");
+  ok(
+    propertyValues[0].textContent.startsWith("url(data:image/png"),
+    "Property value for the background image was correctly rendered"
+  );
+
+  ok(
+    !propertyValues[0].querySelector(".propertyvalue-long-text"),
+    "The first background-image is short enough and does not need to be truncated"
+  );
+  ok(
+    !!propertyValues[1].querySelector(".propertyvalue-long-text"),
+    "The second background-image has a special CSS class to be truncated"
+  );
+  const ruleviewContainer =
+    view.styleDocument.getElementById("ruleview-container");
+  ok(
+    ruleviewContainer.scrollHeight === ruleviewContainer.clientHeight,
+    "The ruleview container does not have a scrollbar"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_layer.js b/devtools/client/inspector/rules/test/browser_rules_layer.js
new file mode 100644
index 0000000000..9db3577f20
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_layer.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines layers.
+
+const TEST_URI = `
+  <style type="text/css">
+    @import url(${URL_ROOT_COM_SSL}doc_imported_anonymous_layer.css) layer;
+    @import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer);
+    @import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
+
+    @layer myLayer {
+      h1, [test-hint=named-layer] {
+        background-color: tomato;
+        color: lightgreen;
+      }
+    }
+
+    @layer {
+      h1, [test-hint=anonymous-layer] {
+        color: green;
+        font-variant: small-caps
+      }
+    }
+
+    h1, [test-hint=no-rule-layer] {
+      color: pink;
+    }
+  </style>
+  <h1>Hello @layer!</h1>
+`;
+
+add_task(async function () {
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    { selector: `h1, [test-hint="no-rule-layer"]`, ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="imported-no-layer--no-rule-layer"]`,
+      ancestorRulesData: null,
+    },
+    {
+      selector: `h1, [test-hint="anonymous-layer"]`,
+      ancestorRulesData: ["@layer"],
+    },
+    {
+      selector: `h1, [test-hint="named-layer"]`,
+      ancestorRulesData: ["@layer myLayer"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer importedLayer", "@media screen"],
+    },
+    {
+      selector: `h1, [test-hint="imported-named-layer--named-layer"]`,
+      ancestorRulesData: [
+        "@layer importedLayer",
+        "@media screen",
+        "@layer in-imported-stylesheet",
+      ],
+    },
+    {
+      selector: `h1, [test-hint="imported-anonymous-layer--no-rule-layer"]`,
+      ancestorRulesData: ["@layer"],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
new file mode 100644
index 0000000000..9c9d1ef9ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_lineNumbers.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing a rule will update the line numbers of subsequent
+// rules in the rule view.
+
+const TESTCASE_URI = URL_ROOT + "doc_ruleLineNumbers.html";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const bodyRuleEditor = getRuleViewRuleEditor(view, 3);
+  const value = getRuleViewLinkTextByIndex(view, 2);
+  // Note that this is relative to the <style>.
+  is(value.slice(-2), ":6", "initial rule line number is 6");
+
+  const onLocationChanged = once(
+    bodyRuleEditor.rule.domRule,
+    "location-changed"
+  );
+  await addProperty(view, 1, "font-size", "23px");
+  await onLocationChanged;
+
+  const newBodyTitle = getRuleViewLinkTextByIndex(view, 2);
+  // Note that this is relative to the <style>.
+  is(newBodyTitle.slice(-2), ":7", "updated rule line number is 7");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js b/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js
new file mode 100644
index 0000000000..3739e6ff9c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_linear-easing-swatch.js
@@ -0,0 +1,487 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that linear easing widget pickers appear when clicking on linear
+// swatches.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {
+      animation: move 3s linear(0, 0.2, 1);
+      transition: top 4s linear(0 10%, 0.5 20% 80%, 0 90%);
+    }
+    .test {
+      animation-timing-function: linear(0, 1 50% 100%);
+      transition-timing-function: linear(1 -10%, 0, -1 110%);
+    }
+  </style>
+  <div class="test">Testing the linear easing tooltip!</div>
+`;
+
+add_task(async function testSwatches() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const tooltip = view.tooltips.getTooltip("linearEaseFunction");
+  ok(tooltip, "The rule-view has the expected linear tooltip");
+  const panel = tooltip.tooltip.panel;
+  ok(panel, "The XUL panel for the linear tooltip exists");
+
+  const expectedData = [
+    {
+      selector: "div",
+      property: "animation",
+      expectedPoints: [
+        [0, 0],
+        [0.5, 0.2],
+        [1, 1],
+      ],
+    },
+    {
+      selector: "div",
+      property: "transition",
+      expectedPoints: [
+        [0.1, 0],
+        [0.2, 0.5],
+        [0.8, 0.5],
+        [0.9, 0],
+      ],
+    },
+    {
+      selector: ".test",
+      property: "animation-timing-function",
+      expectedPoints: [
+        [0, 0],
+        [0.5, 1],
+        [1, 1],
+      ],
+    },
+    {
+      selector: ".test",
+      property: "transition-timing-function",
+      expectedPoints: [
+        [-0.1, 1],
+        [0.5, 0],
+        [1.1, -1],
+      ],
+    },
+  ];
+
+  for (const { selector, property, expectedPoints } of expectedData) {
+    const messagePrefix = `[${selector}|${property}]`;
+    const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+    ok(swatch, `${messagePrefix} the swatch exists`);
+
+    const onWidgetReady = tooltip.once("ready");
+    swatch.click();
+    await onWidgetReady;
+    ok(true, `${messagePrefix} clicking the swatch displayed the tooltip`);
+
+    ok(
+      !inplaceEditor(swatch.parentNode),
+      `${messagePrefix} inplace editor wasn't shown`
+    );
+
+    checkChartState(panel, expectedPoints);
+
+    await hideTooltipAndWaitForRuleViewChanged(tooltip, view);
+  }
+});
+
+add_task(async function testChart() {
+  await pushPref("ui.prefersReducedMotion", 0);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const tooltip = view.tooltips.getTooltip("linearEaseFunction");
+  ok(tooltip, "The rule-view has the expected linear tooltip");
+  const panel = tooltip.tooltip.panel;
+  ok(panel, "The XUL panel for the linear tooltip exists");
+
+  const selector = ".test";
+  const property = "animation-timing-function";
+
+  const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+  const onWidgetReady = tooltip.once("ready");
+  swatch.click();
+  await onWidgetReady;
+  const widget = await tooltip.widget;
+
+  const svgEl = panel.querySelector(`svg.chart`);
+  const svgRect = svgEl.getBoundingClientRect();
+
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [0.5, 1],
+      [1, 1],
+    ],
+    "testChart - initial state:"
+  );
+
+  info("Check that double clicking a point removes it");
+  const middlePoint = panel.querySelector(
+    `svg.chart .control-points-group .control-point:nth-of-type(2)`
+  );
+  let onWidgetUpdated = widget.once("updated");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendMouseEvent(
+    { type: "dblclick" },
+    middlePoint,
+    widget.parent.ownerGlobal
+  );
+
+  let newValue = await onWidgetUpdated;
+  is(newValue, `linear(0 0%, 1 100%)`);
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [1, 1],
+    ],
+    "testChart - after point removed:"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info(
+    "Check that double clicking a point when there are only 2 points on the line does not remove it"
+  );
+  const timeoutRes = Symbol();
+  let onTimeout = wait(1000).then(() => timeoutRes);
+  onWidgetUpdated = widget.once("updated");
+  EventUtils.sendMouseEvent(
+    { type: "dblclick" },
+    panel.querySelector(`svg.chart .control-points-group .control-point`),
+    widget.parent.ownerGlobal
+  );
+  let raceWinner = await Promise.race([onWidgetUpdated, onTimeout]);
+  is(
+    raceWinner,
+    timeoutRes,
+    "The widget wasn't updated after double clicking one of the 2 last points"
+  );
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [1, 1],
+    ],
+    "testChart - no point removed:"
+  );
+
+  info("Check that double clicking on the svg does add a point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  // Clicking on svg center with shiftKey so it snaps to the grid
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(`svg.chart`),
+    { clickCount: 2, shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 0%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0, 0],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - new point added"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that points can be moved");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(`svg.chart .control-points-group .control-point`),
+    { type: "mousedown" },
+    widget.parent.ownerGlobal
+  );
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width / 3,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0.7 30%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that the points can be moved past the next point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+
+  // the second point is at 50%, so simulate a mousemove all the way to the right (which
+  // should be ~100%)
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0.7 50%, 0.5 50%, 1 100%)`,
+    "point wasn't moved past the next point (50%)"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.5, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved constrained by next point"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Stop dragging");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mouseup" },
+    widget.parent.ownerGlobal
+  );
+
+  onTimeout = wait(1000).then(() => timeoutRes);
+  onWidgetUpdated = widget.once("updated");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mousemove" },
+    widget.parent.ownerGlobal
+  );
+  raceWinner = await Promise.race([onWidgetUpdated, onTimeout]);
+  is(raceWinner, timeoutRes, "Dragging is disabled after mouseup");
+
+  info("Add another point, which should be the first one for the line");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    svgRect.width / 3,
+    svgRect.height - 1,
+    { clickCount: 2, shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 30%, 0.7 50%, 0.5 50%, 1 100%)`,
+    "Widget was updated with expected value"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0],
+      [0.5, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point added at beginning"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Check that the points can't be moved past previous point");
+  onWidgetUpdated = widget.once("updated");
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeMouseAtCenter(
+    panel.querySelector(
+      `svg.chart .control-points-group .control-point:nth-of-type(2)`
+    ),
+    { type: "mousedown" },
+    widget.parent.ownerGlobal
+  );
+
+  EventUtils.synthesizeMouse(
+    svgEl,
+    0,
+    svgRect.height / 3,
+    { type: "mousemove", shiftKey: true },
+    widget.parent.ownerGlobal
+  );
+  newValue = await onWidgetUpdated;
+  is(
+    newValue,
+    `linear(0 30%, 0.7 30%, 0.5 50%, 1 100%)`,
+    "point wasn't moved past previous point (30%)"
+  );
+  checkChartState(
+    panel,
+    [
+      [0.3, 0],
+      [0.3, 0.7],
+      [0.5, 0.5],
+      [1, 1],
+    ],
+    "testChart - point moved constrained by previous point"
+  );
+  await onRuleViewChanged;
+  await checkRuleView(view, selector, property, newValue);
+
+  info("Stop dragging");
+  EventUtils.synthesizeMouseAtCenter(
+    svgEl,
+    { type: "mouseup" },
+    widget.parent.ownerGlobal
+  );
+
+  info(
+    "Check that timing preview is destroyed if prefers-reduced-motion gets enabled"
+  );
+  const getTimingFunctionPreview = () =>
+    panel.querySelector(".timing-function-preview");
+  ok(getTimingFunctionPreview(), "By default, timing preview is visible");
+  info("Enable prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 1);
+  await waitFor(() => !getTimingFunctionPreview());
+  ok(true, "timing preview was removed after enabling prefersReducedMotion");
+
+  info("Disable prefersReducedMotion");
+  await pushPref("ui.prefersReducedMotion", 0);
+  await waitFor(() => getTimingFunctionPreview());
+  ok(
+    true,
+    "timing preview was added back after disabling prefersReducedMotion"
+  );
+
+  info("Hide tooltip with escape to cancel modification");
+  const onHidden = tooltip.tooltip.once("hidden");
+  const onModifications = view.once("ruleview-changed");
+  focusAndSendKey(widget.parent.ownerDocument.defaultView, "ESCAPE");
+  await onHidden;
+  await onModifications;
+
+  await checkRuleView(
+    view,
+    selector,
+    property,
+    "linear(0, 1 50% 100%)",
+    "linear(0 0%, 1 50%, 1 100%)"
+  );
+});
+
+/**
+ * Check that the svg chart line and control points are placed where we expect them.
+ *
+ * @param {ToolipPanel} panel
+ * @param {Array<Array<Number>>} expectedPoints: Array of coordinated
+ * @param {String} messagePrefix
+ */
+function checkChartState(panel, expectedPoints, messagePrefix = "") {
+  const svgLine = panel.querySelector("svg.chart .chart-linear");
+  is(
+    svgLine.getAttribute("points"),
+    expectedPoints.map(([x, y]) => `${x},${1 - y}`).join(" "),
+    `${messagePrefix} line has the expected points`
+  );
+
+  const controlPoints = panel.querySelectorAll(
+    `svg.chart .control-points-group .control-point`
+  );
+
+  is(
+    controlPoints.length,
+    expectedPoints.length,
+    `${messagePrefix} the expected number of control points were created`
+  );
+  controlPoints.forEach((controlPoint, i) => {
+    is(
+      parseFloat(controlPoint.getAttribute("cx")),
+      expectedPoints[i][0],
+      `${messagePrefix} Control point ${i} has correct cx`
+    );
+    is(
+      parseFloat(controlPoint.getAttribute("cy")),
+      // XXX work around floating point issues
+      Math.round((1 - expectedPoints[i][1]) * 10) / 10,
+      `${messagePrefix} Control point ${i} has correct cy`
+    );
+  });
+}
+
+/**
+ * Checks if the property in the rule view has the expected state
+ *
+ * @param {RuleView} view
+ * @param {String} selector
+ * @param {String} property
+ * @param {String} expectedLinearValue: Expected value in the rule view
+ * @param {String} expectedComputedLinearValue: Expected computed value. Defaults to expectedLinearValue.
+ * @returns {Element|null}
+ */
+async function checkRuleView(
+  view,
+  selector,
+  property,
+  expectedLinearValue,
+  expectedComputedLinearValue = expectedLinearValue
+) {
+  await waitForComputedStyleProperty(
+    selector,
+    null,
+    property,
+    expectedComputedLinearValue
+  );
+
+  is(
+    getRuleViewProperty(view, selector, property).valueSpan.textContent,
+    expectedLinearValue,
+    `${selector} ${property} has expected value`
+  );
+  const swatch = getRuleViewLinearEasingSwatch(view, selector, property);
+  is(
+    swatch.getAttribute("data-linear"),
+    expectedLinearValue,
+    `${selector} ${property} swatch has expected "data-linear" attribute`
+  );
+}
+
+/**
+ * Returns the linear easing swatch for a rule (defined by its selector), and a property.
+ *
+ * @param {RuleView} view
+ * @param {String} selector
+ * @param {String} property
+ * @returns {Element|null}
+ */
+function getRuleViewLinearEasingSwatch(view, selector, property) {
+  return getRuleViewProperty(view, selector, property).valueSpan.querySelector(
+    ".ruleview-lineareasingswatch"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_livepreview.js b/devtools/client/inspector/rules/test/browser_rules_livepreview.js
new file mode 100644
index 0000000000..38ad5ee1d0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_livepreview.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that changes are previewed when editing a property value.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      display:block;
+    }
+  </style>
+  <div id="testid">Styled Node</div><span>inline element</span>
+`;
+
+// Format
+// {
+//   value : what to type in the field
+//   expected : expected computed style on the targeted element
+// }
+const TEST_DATA = [
+  { value: "inline", expected: "inline" },
+  { value: "inline-block", expected: "inline-block" },
+
+  // Invalid property values should not apply, and should fall back to default
+  { value: "red", expected: "block" },
+  { value: "something", expected: "block" },
+
+  { escape: true, value: "inline", expected: "block" },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  for (const data of TEST_DATA) {
+    await testLivePreviewData(data, view, "#testid");
+  }
+});
+
+async function testLivePreviewData(data, ruleView, selector) {
+  const rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const propEditor = rule.textProps[0].editor;
+
+  info("Focusing the property value inplace-editor");
+  const editor = await focusEditableField(ruleView, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "The focused editor is the value"
+  );
+
+  info("Entering value in the editor: " + data.value);
+  const onPreviewDone = ruleView.once("ruleview-changed");
+  EventUtils.sendString(data.value, ruleView.styleWindow);
+  ruleView.debounce.flush();
+  await onPreviewDone;
+
+  const onValueDone = ruleView.once("ruleview-changed");
+  if (data.escape) {
+    EventUtils.synthesizeKey("KEY_Escape");
+  } else {
+    EventUtils.synthesizeKey("KEY_Enter");
+  }
+  await onValueDone;
+
+  // While the editor is still focused in, the display should have
+  // changed already
+  is(
+    await getComputedStyleProperty(selector, null, "display"),
+    data.expected,
+    "Element should be previewed as " + data.expected
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js
new file mode 100644
index 0000000000..4ac9ea3498
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_01.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// specificity of the rule.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+  ok(!idProp.overridden, "ID prop should not be overridden.");
+  ok(
+    !idProp.editor.element.classList.contains("ruleview-overridden"),
+    "ID property editor should not have ruleview-overridden class"
+  );
+
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(classProp.overridden, "Class property should be overridden.");
+  ok(
+    classProp.editor.element.classList.contains("ruleview-overridden"),
+    "Class property editor should have ruleview-overridden class"
+  );
+
+  // Override background-color by changing the element style.
+  const elementProp = await addProperty(view, 0, "background-color", "purple");
+
+  ok(
+    !elementProp.overridden,
+    "Element style property should not be overridden"
+  );
+  ok(idProp.overridden, "ID property should be overridden");
+  ok(
+    idProp.editor.element.classList.contains("ruleview-overridden"),
+    "ID property editor should have ruleview-overridden class"
+  );
+  ok(classProp.overridden, "Class property should be overridden");
+  ok(
+    classProp.editor.element.classList.contains("ruleview-overridden"),
+    "Class property editor should have ruleview-overridden class"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js
new file mode 100644
index 0000000000..283419def9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_02.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly for short hand
+// properties and the computed list properties
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    margin-left: 1px;
+  }
+  .testclass {
+    margin: 2px;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testMarkOverridden(inspector, view);
+});
+
+function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+
+  const classRule = elementStyle.rules[2];
+  const classProp = classRule.textProps[0];
+  ok(
+    !classProp.overridden,
+    "Class prop shouldn't be overridden, some props are still being used."
+  );
+
+  for (const computed of classProp.computed) {
+    if (computed.name.indexOf("margin-left") == 0) {
+      ok(computed.overridden, "margin-left props should be overridden.");
+    } else {
+      ok(
+        !computed.overridden,
+        "Non-margin-left props should not be overridden."
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js
new file mode 100644
index 0000000000..9acb4ae8cd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_03.js
@@ -0,0 +1,33 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// priority for the rule
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green !important;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+  ok(idProp.overridden, "Not-important rule should be overridden.");
+
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(!classProp.overridden, "Important rule should not be overridden.");
+
+  ok(idProp.overridden, "ID property should be overridden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js
new file mode 100644
index 0000000000..5a3de5b3fa
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_04.js
@@ -0,0 +1,34 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly if a property gets
+// disabled
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: blue;
+  }
+  .testclass {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const idProp = getTextProperty(view, 1, { "background-color": "blue" });
+
+  await togglePropStatus(view, idProp);
+  const classProp = getTextProperty(view, 2, { "background-color": "green" });
+  ok(
+    !classProp.overridden,
+    "Class prop should not be overridden after id prop was disabled."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js
new file mode 100644
index 0000000000..892ebaa955
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_05.js
@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// order of the property.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    background-color: green;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  await addProperty(view, 1, "background-color", "red");
+
+  const firstProp = getTextProperty(view, 1, { "background-color": "green" });
+  const secondProp = getTextProperty(view, 1, { "background-color": "red" });
+
+  ok(firstProp.overridden, "First property should be overridden.");
+  ok(!secondProp.overridden, "Second property should not be overridden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js
new file mode 100644
index 0000000000..7ae4e77a02
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_06.js
@@ -0,0 +1,65 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly after
+// editing the selector.
+
+const TEST_URI = `
+  <style type='text/css'>
+  div {
+    background-color: blue;
+    background-color: chartreuse;
+  }
+  </style>
+  <div id='testid' class='testclass'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testMarkOverridden(inspector, view);
+});
+
+async function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+  const rule = elementStyle.rules[1];
+  checkProperties(rule);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  info("Focusing an existing selector name in the rule-view");
+  const editor = await focusEditableField(view, ruleEditor.selectorText);
+
+  info("Entering a new selector name and committing");
+  editor.input.value = "div[class]";
+
+  const onRuleViewChanged = once(view, "ruleview-changed");
+  info("Entering the commit key");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  view.searchField.focus();
+  checkProperties(rule);
+}
+
+// A helper to perform a repeated set of checks.
+function checkProperties(rule) {
+  let prop = rule.textProps[0];
+  is(
+    prop.name,
+    "background-color",
+    "First property should be background-color"
+  );
+  is(prop.value, "blue", "First property value should be blue");
+  ok(prop.overridden, "prop should be overridden.");
+  prop = rule.textProps[1];
+  is(
+    prop.name,
+    "background-color",
+    "Second property should be background-color"
+  );
+  is(prop.value, "chartreuse", "First property value should be chartreuse");
+  ok(!prop.overridden, "prop should not be overridden.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js
new file mode 100644
index 0000000000..bdfe34a307
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_07.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly based on the
+// specificity of the rule.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      margin-left: 23px;
+    }
+
+    div {
+      margin-right: 23px;
+      margin-left: 1px !important;
+    }
+
+    body {
+      color: blue;
+    }
+
+    body {
+      margin-right: 1px !important;
+      font-size: 79px;
+      line-height: 100px !important;
+      color: green !important;
+    }
+
+    body {
+      color: red;
+    }
+
+    span {
+      font-size: 12px;
+      line-height: 10px;
+    }
+  </style>
+  <body>
+    <span>
+      <div id='testid' class='testclass'>Styled Node</div>
+    </span>
+  </body>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  testMarkOverridden(inspector, view);
+});
+
+function testMarkOverridden(inspector, view) {
+  const elementStyle = view._elementStyle;
+
+  const RESULTS = [
+    // We skip the first element
+    [],
+    [{ name: "margin-left", value: "23px", overridden: true }],
+    [
+      { name: "margin-right", value: "23px", overridden: false },
+      { name: "margin-left", value: "1px", overridden: false },
+    ],
+    [
+      { name: "font-size", value: "12px", overridden: false },
+      { name: "line-height", value: "10px", overridden: false },
+    ],
+    [{ name: "color", value: "red", overridden: true }],
+    [
+      { name: "margin-right", value: "1px", overridden: true },
+      { name: "font-size", value: "79px", overridden: true },
+      { name: "line-height", value: "100px", overridden: true },
+      { name: "color", value: "green", overridden: false },
+    ],
+    [{ name: "color", value: "blue", overridden: true }],
+  ];
+
+  for (let i = 1; i < RESULTS.length; ++i) {
+    const idRule = elementStyle.rules[i];
+
+    for (const propIndex in RESULTS[i]) {
+      const expected = RESULTS[i][propIndex];
+      const prop = idRule.textProps[propIndex];
+
+      info("Checking rule " + i + ", property " + propIndex);
+
+      is(prop.name, expected.name, "check property name");
+      is(prop.value, expected.value, "check property value");
+      is(prop.overridden, expected.overridden, "check property overridden");
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js
new file mode 100644
index 0000000000..444c87cbd7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mark_overridden_08.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view marks overridden rules correctly in pseudo-elements when
+// selecting their host node.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid::before {
+    content: 'Pseudo-element';
+    color: red;
+    color: green;
+  }
+  #testid {
+    color: blue;
+  }
+  </style>
+  <div id='testid'>Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info(
+    "Check the CSS declarations for ::before in the Pseudo-elements accordion."
+  );
+  const pseudoRule = getRuleViewRuleEditor(view, 1, 0).rule;
+  const pseudoProp1 = pseudoRule.textProps[1];
+  const pseudoProp2 = pseudoRule.textProps[2];
+  ok(
+    pseudoProp1.overridden,
+    "First declaration of color in pseudo-element should be overridden."
+  );
+  ok(
+    !pseudoProp2.overridden,
+    "Second declaration of color in pseudo-element should not be overridden."
+  );
+
+  info(
+    "Check that pseudo-element declarations do not override the host's declarations"
+  );
+  const idProp = getTextProperty(view, 4, { color: "blue" });
+  ok(
+    !idProp.overridden,
+    "The single declaration of color in ID selector should not be overridden"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_mathml-element.js b/devtools/client/inspector/rules/test/browser_rules_mathml-element.js
new file mode 100644
index 0000000000..275426b105
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_mathml-element.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule-view displays correctly on MathML elements.
+
+const TEST_URI = `
+  <div>
+    <math xmlns=\http://www.w3.org/1998/Math/MathML\>
+      <mfrac>
+        <msubsup>
+          <mi>a</mi>
+          <mi>i</mi>
+          <mi>j</mi>
+        </msubsup>
+        <msub>
+          <mi>x</mi>
+          <mn>0</mn>
+        </msub>
+      </mfrac>
+    </math>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Select the DIV node and verify the rule-view shows rules");
+  await selectNode("div", inspector);
+  ok(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view shows rules for the div element"
+  );
+
+  info("Select various MathML nodes and verify the rule-view is empty");
+  await selectNode("math", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the math element"
+  );
+
+  await selectNode("msubsup", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the msubsup element"
+  );
+
+  await selectNode("mn", inspector);
+  ok(
+    !view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view is empty for the mn element"
+  );
+
+  info("Select again the DIV node and verify the rule-view shows rules");
+  await selectNode("div", inspector);
+  ok(
+    view.element.querySelectorAll(".ruleview-rule").length,
+    "The rule-view shows rules for the div element"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_media-queries.js b/devtools/client/inspector/rules/test/browser_rules_media-queries.js
new file mode 100644
index 0000000000..09be8da801
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_media-queries.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that we correctly display appropriate media query information in the rule view.
+
+const TEST_URI = URL_ROOT + "doc_media_queries.html?constructed";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const elementStyle = view._elementStyle;
+
+  const inline = STYLE_INSPECTOR_L10N.getStr("rule.sourceInline");
+  const constructed = STYLE_INSPECTOR_L10N.getStr("rule.sourceConstructed");
+
+  is(elementStyle.rules.length, 4, "Should have 4 rules.");
+  is(elementStyle.rules[0].title, inline, "check rule 0 title");
+  is(
+    elementStyle.rules[1].title,
+    constructed,
+    "check constracted sheet rule title"
+  );
+  is(elementStyle.rules[2].title, inline + ":9", "check rule 2 title");
+  is(elementStyle.rules[3].title, inline + ":2", "check rule 3 title");
+
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 2),
+    "@media screen and (min-width: 1px)",
+    "Media queries information are displayed"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
new file mode 100644
index 0000000000..79bc9b9f8f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
@@ -0,0 +1,67 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that applicable media queries are updated in the Rule view after reloading
+// the page and resizing the window.
+
+const TEST_URI = `
+  <style type='text/css'>
+    @media all and (max-width: 500px) {
+      div {
+        color: red;
+      }
+    }
+    @media all and (min-width: 500px) {
+      div {
+        color: green;
+      }
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView, toolbox } = await openRuleView();
+  const hostWindow = toolbox.win.parent;
+
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for small viewports applies");
+  hostWindow.resizeTo(400, 400);
+
+  await waitForMediaRuleColor(ruleView, "red");
+  ok(true, "Small viewport media query inspected");
+
+  info("Reload the current page");
+  await reloadBrowser();
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for large viewports applies");
+  hostWindow.resizeTo(800, 800);
+
+  info("Reselect the rule after page reload.");
+  await waitForMediaRuleColor(ruleView, "green");
+  ok(true, "Large viewport media query inspected");
+
+  info("Resize window to original dimentions");
+  const onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+  await onResize;
+});
+
+function waitForMediaRuleColor(ruleView, color) {
+  return waitUntil(() => {
+    try {
+      const { value } = getTextProperty(ruleView, 1, { color });
+      return value === color;
+    } catch (e) {
+      return false;
+    }
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js
new file mode 100644
index 0000000000..2eb93e4b70
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-duplicates.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:red;color:orange;color:yellow;color:green;color:blue;color:indigo;" +
+      "color:violet;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    7,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    8,
+    "Should have created new property editors."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "red" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "orange" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "orange" }).value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "yellow" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "yellow" }).value,
+    "yellow",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "green" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "green" }).value,
+    "green",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "blue" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "blue" }).value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "indigo" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "indigo" }).value,
+    "indigo",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "violet" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "violet" }).value,
+    "violet",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js
new file mode 100644
index 0000000000..f7713529b5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-priority.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors.
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:red;width:100px;height: 100px;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    3,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    4,
+    "Should have created new property editors."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "red" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { width: "100px" }).name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { width: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { height: "100px" }).name,
+    "height",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { height: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js
new file mode 100644
index 0000000000..e451950aba
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_01.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering multiple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await testCreateNewMultiUnfinished(inspector, view);
+});
+
+async function testCreateNewMultiUnfinished(inspector, view) {
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const onMutation = inspector.once("markupmutation");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:blue;background : orange   ; text-align:center; border-color: "
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have created new text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    4,
+    "Should have created property editors."
+  );
+
+  EventUtils.sendString("red", view.styleWindow);
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have the same number of text properties."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have added the changed value editor."
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "blue" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "blue" }).value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { background: "orange" }).name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { background: "orange" }).value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { "text-align": "center" }).name,
+    "text-align",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { "text-align": "center" }).value,
+    "center",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { "border-color": "red" }).name,
+    "border-color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { "border-color": "red" }).value,
+    "red",
+    "Should have correct property value"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
new file mode 100644
index 0000000000..9c52d33e58
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple-properties-unfinished_02.js
@@ -0,0 +1,107 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  // Turn off throttling, which can cause intermittents. Throttling is used by
+  // the TextPropertyEditor.
+  view.debounce = () => {};
+
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  let onMutation = inspector.once("markupmutation");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(ruleEditor, "width: 100px; heig");
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have created a property editor."
+  );
+
+  // Value is focused, lets add multiple rules here and make sure they get added
+  onMutation = inspector.once("markupmutation");
+  onRuleViewChanged = view.once("ruleview-changed");
+  const valueEditor = ruleEditor.propertyList.children[1].querySelector(
+    ".styleinspector-propertyeditor"
+  );
+  valueEditor.value = "10px;background:orangered;color: black;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have added the changed value."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have added the changed value editor."
+  );
+
+  is(
+    getTextProperty(view, 0, { width: "100px" }).name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { width: "100px" }).value,
+    "100px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { heig: "10px" }).name,
+    "heig",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { heig: "10px" }).value,
+    "10px",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { background: "orangered" }).name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { background: "orangered" }).value,
+    "orangered",
+    "Should have correct property value"
+  );
+
+  is(
+    getTextProperty(view, 0, { color: "black" }).name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    getTextProperty(view, 0, { color: "black" }).value,
+    "black",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js
new file mode 100644
index 0000000000..65babeddf6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_01.js
@@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors.
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  // Note that we wait for a markup mutation here because this new rule will end
+  // up creating a style attribute on the node shown in the markup-view.
+  // (we also wait for the rule-view to refresh).
+  const onMutation = inspector.once("markupmutation");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  await createNewRuleViewProperty(
+    ruleEditor,
+    "color:blue;background : orange   ; text-align:center; " +
+      "border-color: green;"
+  );
+  await onMutation;
+  await onRuleViewChanged;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    4,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    5,
+    "Should have created a new property editor."
+  );
+
+  is(
+    ruleEditor.rule.textProps[0].name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[0].value,
+    "blue",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[1].name,
+    "background",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[1].value,
+    "orange",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[2].name,
+    "text-align",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[2].value,
+    "center",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[3].name,
+    "border-color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[3].value,
+    "green",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
new file mode 100644
index 0000000000..c2ed334bbe
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_multiple_properties_02.js
@@ -0,0 +1,80 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view behaves correctly when entering mutliple and/or
+// unfinished properties/values in inplace-editors
+
+const TEST_URI = "<div>Test Element</div>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  let onDone = view.once("ruleview-changed");
+  await createNewRuleViewProperty(ruleEditor, "width:");
+  await onDone;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    1,
+    "Should have created a new text property."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    1,
+    "Should have created a property editor."
+  );
+
+  // Value is focused, lets add multiple rules here and make sure they get added
+  onDone = view.once("ruleview-changed");
+  const onMutation = inspector.once("markupmutation");
+  const input = view.styleDocument.activeElement;
+  input.value = "height: 10px;color:blue";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onMutation;
+  await onDone;
+
+  is(
+    ruleEditor.rule.textProps.length,
+    2,
+    "Should have added the changed value."
+  );
+  is(
+    ruleEditor.propertyList.children.length,
+    3,
+    "Should have added the changed value editor."
+  );
+
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  is(
+    ruleEditor.propertyList.children.length,
+    2,
+    "Should have removed the value editor."
+  );
+
+  is(
+    ruleEditor.rule.textProps[0].name,
+    "width",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[0].value,
+    "height: 10px",
+    "Should have correct property value"
+  );
+
+  is(
+    ruleEditor.rule.textProps[1].name,
+    "color",
+    "Should have correct property name"
+  );
+  is(
+    ruleEditor.rule.textProps[1].value,
+    "blue",
+    "Should have correct property value"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js b/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js
new file mode 100644
index 0000000000..db0f4d39c5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_nested_at_rules.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule-view content is correct when the page defines nested at-rules (@media, @layer, @supports, …)
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      container: mycontainer / inline-size;
+    }
+
+    @layer mylayer {
+      @supports (container-name: mycontainer) {
+        @container mycontainer (min-width: 1px) {
+          @media screen {
+            @container mycontainer (min-width: 2rem) {
+              h1, [test-hint="nested"] {
+                background: gold;
+              }
+            }
+          }
+        }
+      }
+    }
+  </style>
+  <h1>Hello nested at-rules!</h1>
+`;
+
+add_task(async function () {
+  await pushPref("layout.css.container-queries.enabled", true);
+
+  await addTab(
+    "https://example.com/document-builder.sjs?html=" +
+      encodeURIComponent(TEST_URI)
+  );
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("h1", inspector);
+
+  const expectedRules = [
+    { selector: "element", ancestorRulesData: null },
+    {
+      selector: `h1, [test-hint="nested"]`,
+      ancestorRulesData: [
+        `@layer mylayer`,
+        `@supports (container-name: mycontainer)`,
+        `@container mycontainer (min-width: 1px)`,
+        `@media screen`,
+        `@container mycontainer (min-width: 2rem)`,
+      ],
+    },
+  ];
+
+  const rulesInView = Array.from(view.element.children);
+  is(
+    rulesInView.length,
+    expectedRules.length,
+    "All expected rules are displayed"
+  );
+
+  for (let i = 0; i < expectedRules.length; i++) {
+    const expectedRule = expectedRules[i];
+    info(`Checking rule #${i}: ${expectedRule.selector}`);
+
+    const selector = rulesInView[i].querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, expectedRule.selector, `Expected selector for ${selector}`);
+
+    if (expectedRule.ancestorRulesData == null) {
+      is(
+        getRuleViewAncestorRulesDataElementByIndex(view, i),
+        null,
+        `No ancestor rules data displayed for ${selector}`
+      );
+    } else {
+      is(
+        getRuleViewAncestorRulesDataTextByIndex(view, i),
+        expectedRule.ancestorRulesData.join("\n"),
+        `Expected ancestor rules data displayed for ${selector}`
+      );
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_non_ascii.js b/devtools/client/inspector/rules/test/browser_rules_non_ascii.js
new file mode 100644
index 0000000000..b124c7513b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_non_ascii.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that rule view can open when there are non-ASCII characters in
+// the style sheet.  Regression test for bug 1390455.
+
+// Use a few 4-byte UTF-8 sequences to make it so the rule column
+// would be wrong when we had the bug.
+const SHEET_TEXT = "/*🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒🆒*/#q{color:orange}";
+const HTML = `<style type="text/css">\n${SHEET_TEXT}
+              </style><div id="q">Styled Node</div>`;
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURIComponent(HTML);
+
+add_task(async function () {
+  await addTab(TEST_URI);
+
+  const { inspector, view } = await openRuleView();
+  await selectNode("#q", inspector);
+
+  const elementStyle = view._elementStyle;
+
+  const expected = [{ name: "color", overridden: false }];
+
+  const rule = elementStyle.rules[1];
+
+  for (let i = 0; i < expected.length; ++i) {
+    const prop = rule.textProps[i];
+    is(prop.name, expected[i].name, `Got expected property name ${prop.name}`);
+    is(
+      prop.overridden,
+      expected[i].overridden,
+      `Got expected overridden value ${prop.overridden}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
new file mode 100644
index 0000000000..30096791eb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link.js
@@ -0,0 +1,93 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheet links in the rule view are correct when source maps
+// are involved.
+
+const TESTCASE_URI = URL_ROOT_SSL + "doc_sourcemaps.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps.css:1";
+
+add_task(async function () {
+  info("Setting the " + PREF + " pref to true");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("div", inspector);
+
+  await verifyLinkText(SCSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to false");
+  Services.prefs.setBoolPref(PREF, false);
+  await verifyLinkText(CSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to true again");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await testClickingLink(toolbox, view);
+  const selectedEditor = await waitForOriginalStyleSheetEditorSelection(
+    toolbox
+  );
+
+  const href = selectedEditor.styleSheet.href;
+  ok(
+    href.endsWith("doc_sourcemaps.scss"),
+    "selected stylesheet is correct one"
+  );
+
+  await selectedEditor.getSourceEditor();
+  const { line } = selectedEditor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+
+  info("Clearing the " + PREF + " pref");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  info("Listening for switch to the style editor");
+  const onStyleEditorReady = toolbox.once("styleeditor-selected");
+
+  info("Finding the stylesheet link and clicking it");
+  const link = getRuleViewLinkByIndex(view, 1);
+  link.scrollIntoView();
+  link.click();
+  await onStyleEditorReady;
+}
+
+function waitForOriginalStyleSheetEditorSelection(toolbox) {
+  const panel = toolbox.getCurrentPanel();
+  return new Promise((resolve, reject) => {
+    const maybeContinue = editor => {
+      // The style editor selects the first sheet at first load before
+      // selecting the desired sheet.
+      if (editor.styleSheet.href.endsWith("scss")) {
+        info("Original source editor selected");
+        off();
+        resolve(editor);
+      }
+    };
+    const off = panel.UI.on("editor-selected", maybeContinue);
+    if (panel.UI.selectedEditor) {
+      maybeContinue(panel.UI.selectedEditor);
+    }
+  });
+}
+
+function verifyLinkText(text, view) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  return waitForSuccess(function () {
+    return (
+      label.textContent == text &&
+      label.getAttribute("title") === URL_ROOT_SSL + text
+    );
+  }, "Link text changed to display correct location: " + text);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
new file mode 100644
index 0000000000..87963f9ec5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_original-source-link2.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the stylesheet links in the rule view are correct when source maps
+// are involved.
+
+const TESTCASE_URI = URL_ROOT + "doc_sourcemaps2.html";
+const PREF = "devtools.source-map.client-service.enabled";
+const SCSS_LOC = "doc_sourcemaps.scss:4";
+const CSS_LOC = "doc_sourcemaps2.css:1";
+
+add_task(async function () {
+  info("Setting the " + PREF + " pref to true");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await addTab(TESTCASE_URI);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Selecting the test node");
+  await selectNode("div", inspector);
+
+  await verifyLinkText(SCSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to false");
+  Services.prefs.setBoolPref(PREF, false);
+  await verifyLinkText(CSS_LOC, view);
+
+  info("Setting the " + PREF + " pref to true again");
+  Services.prefs.setBoolPref(PREF, true);
+
+  await testClickingLink(toolbox, view);
+  const selectedEditor = await waitForOriginalStyleSheetEditorSelection(
+    toolbox
+  );
+  const href = selectedEditor.styleSheet.href;
+  ok(
+    href.endsWith("doc_sourcemaps.scss"),
+    "selected stylesheet is correct one"
+  );
+  await selectedEditor.getSourceEditor();
+
+  const { line } = selectedEditor.sourceEditor.getCursor();
+  is(line, 3, "cursor is at correct line number in original source");
+
+  info("Clearing the " + PREF + " pref");
+  Services.prefs.clearUserPref(PREF);
+});
+
+async function testClickingLink(toolbox, view) {
+  info("Listening for switch to the style editor");
+  const onStyleEditorReady = toolbox.once("styleeditor-selected");
+
+  info("Finding the stylesheet link and clicking it");
+  const link = getRuleViewLinkByIndex(view, 1);
+  link.scrollIntoView();
+  link.click();
+  await onStyleEditorReady;
+}
+
+function waitForOriginalStyleSheetEditorSelection(toolbox) {
+  const panel = toolbox.getCurrentPanel();
+  return new Promise((resolve, reject) => {
+    const maybeContinue = editor => {
+      // The style editor selects the first sheet at first load before
+      // selecting the desired sheet.
+      if (editor.styleSheet.href.endsWith("scss")) {
+        info("Original source editor selected");
+        off();
+        resolve(editor);
+      }
+    };
+    const off = panel.UI.on("editor-selected", maybeContinue);
+    if (panel.UI.selectedEditor) {
+      maybeContinue(panel.UI.selectedEditor);
+    }
+  });
+}
+
+function verifyLinkText(text, view) {
+  info("Verifying that the rule-view stylesheet link is " + text);
+  const label = getRuleViewLinkByIndex(view, 1).querySelector(
+    ".ruleview-rule-source-label"
+  );
+  return waitForSuccess(function () {
+    return label.textContent == text;
+  }, "Link text changed to display correct location: " + text);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
new file mode 100644
index 0000000000..a90b6250cd
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_preview-tooltips-sizes.js
@@ -0,0 +1,106 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the dimensions of the preview tooltips are correctly updated to fit their
+// content.
+
+// Small 32x32 image.
+const BASE_64_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr" +
+  "0AAAAUElEQVRYR+3UsQkAQAhD0TjJ7T+Wk3gbxMIizbcVITwwJWlkZtptpXp+v94TAAEE4gLTvgfOf770RB" +
+  "EAAQTiAvEiIgACCMQF4kVEAAQQSAt8xsyeAW6R8eIAAAAASUVORK5CYII=";
+
+add_task(async function () {
+  await addTab(
+    "data:text/html;charset=utf-8," +
+      encodeURIComponent(`
+      <style>
+        html {
+          /* Using a long variable name to ensure preview tooltip for variable will be */
+          /* wider than the preview tooltip for the test 32x32 image. */
+          --test-var-wider-than-image: red;
+        }
+
+        #target {
+          color: var(--test-var-wider-than-image);
+          background: url(${BASE_64_URL});
+        }
+      </style>
+      <div id="target">inspect me</div>
+    `)
+  );
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  // Note: See intermittent Bug 1721743.
+  // On linux webrender opt, the inspector might open the ruleview before it has
+  // been populated with the rules for the div.
+  info("Wait until the rule view property is rendered");
+  const colorPropertyElement = await waitFor(() =>
+    getRuleViewProperty(view, "#target", "color")
+  );
+
+  // Retrieve the element for `--test-var` on which the CSS variable tooltip will appear.
+  const colorPropertySpan = colorPropertyElement.valueSpan;
+  const colorVariableElement =
+    colorPropertySpan.querySelector(".ruleview-variable");
+
+  // Retrieve the element for the background url on which the image preview will appear.
+  const backgroundPropertySpan = getRuleViewProperty(
+    view,
+    "#target",
+    "background"
+  ).valueSpan;
+  const backgroundUrlElement =
+    backgroundPropertySpan.querySelector(".theme-link");
+
+  info("Show preview tooltip for CSS variable");
+  let previewTooltip = await assertShowPreviewTooltip(
+    view,
+    colorVariableElement
+  );
+  // Measure tooltip dimensions.
+  let tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  const originalHeight = tooltipRect.height;
+  const originalWidth = tooltipRect.width;
+  info(`Original dimensions: ${originalWidth} x ${originalHeight}`);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for background url");
+  previewTooltip = await assertShowPreviewTooltip(view, backgroundUrlElement);
+  // Compare new tooltip dimensions to previous measures.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `Image preview dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  ok(
+    tooltipRect.height > originalHeight,
+    "Tooltip is taller for image preview"
+  );
+  ok(
+    tooltipRect.width < originalWidth,
+    "Tooltip is narrower for image preview"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+
+  info("Show preview tooltip for CSS variable again");
+  previewTooltip = await assertShowPreviewTooltip(view, colorVariableElement);
+  // Check measures are identical to initial ones.
+  tooltipRect = previewTooltip.panel.getBoundingClientRect();
+  info(
+    `CSS variable tooltip dimensions: ${tooltipRect.width} x ${tooltipRect.height}`
+  );
+  is(
+    tooltipRect.height,
+    originalHeight,
+    "Tooltip has the same height as the original"
+  );
+  is(
+    tooltipRect.width,
+    originalWidth,
+    "Tooltip has the same width as the original"
+  );
+  await assertTooltipHiddenOnMouseOut(previewTooltip, colorVariableElement);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
new file mode 100644
index 0000000000..1ba411b56a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_print_media_simulation.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test print media simulation.
+
+// Load the test page under .com TLD, to make the inner .org iframe remote with
+// Fission.
+const TEST_URI = URL_ROOT_COM_SSL + "doc_print_media_simulation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Check that the print simulation button exists");
+  const button = inspector.panelDoc.querySelector("#print-simulation-toggle");
+  ok(button, "The print simulation button exists");
+
+  ok(!button.classList.contains("checked"), "The print button is not checked");
+
+  // Helper to retrieve the background-color property of the selected element
+  // All the test elements are expected to have a single background-color rule
+  // for this test.
+  const ruleViewHasColor = async color =>
+    (await getPropertiesForRuleIndex(view, 1)).has("background-color:" + color);
+
+  info("Select a div that will change according to print simulation");
+  await selectNode("div", inspector);
+  ok(
+    await ruleViewHasColor("#f00"),
+    "The rule view shows the expected initial rule"
+  );
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "No media query information are displayed initially"
+  );
+
+  info("Click on the button and wait for print media to be applied");
+  button.click();
+
+  await waitFor(() => button.classList.contains("checked"));
+  ok(true, "The button is now checked");
+
+  await waitFor(() => ruleViewHasColor("#00f"));
+  ok(
+    true,
+    "The rules view was updated with the rule view from the print media query"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print",
+    "Media queries information are displayed"
+  );
+
+  info("Select the node from the remote iframe");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  ok(
+    await ruleViewHasColor("#0ff"),
+    "The simulation is also applied on the remote iframe"
+  );
+  is(
+    getRuleViewAncestorRulesDataTextByIndex(view, 1),
+    "@media print",
+    "Media queries information are displayed for the node on the remote iframe as well"
+  );
+
+  info("Select the top level div again");
+  await selectNode("div", inspector);
+
+  info("Click the button again to disable print simulation");
+  button.click();
+
+  await waitFor(() => !button.classList.contains("checked"));
+  ok(true, "The button is no longer checked");
+
+  await waitFor(() => ruleViewHasColor("#f00"));
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed"
+  );
+
+  info("Select the node from the remote iframe again");
+  await selectNodeInFrames(["iframe", "html"], inspector);
+
+  await waitFor(() => ruleViewHasColor("#ff0"));
+  ok(true, "The simulation stopped on the remote iframe as well");
+  is(
+    getRuleViewAncestorRulesDataElementByIndex(view, 1),
+    null,
+    "media query is no longer displayed on the remote iframe as well"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
new file mode 100644
index 0000000000..ce49501687
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -0,0 +1,395 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudoelements are displayed correctly in the rule view
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
+
+add_task(async function () {
+  await pushPref(PSEUDO_PREF, true);
+
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testTopLeft(inspector, view);
+  await testTopRight(inspector, view);
+  await testBottomRight(inspector, view);
+  await testBottomLeft(inspector, view);
+  await testParagraph(inspector, view);
+  await testBody(inspector, view);
+  await testList(inspector, view);
+  await testDialogBackdrop(inspector, view);
+});
+
+async function testTopLeft(inspector, view) {
+  const id = "#topleft";
+  const rules = await assertPseudoElementRulesNumbers(id, inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 2,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 1,
+    markerRulesNb: 0,
+    afterRulesNb: 1,
+    beforeRulesNb: 2,
+  });
+
+  const gutters = assertGutters(view);
+
+  info("Make sure that clicking on the twisty hides pseudo elements");
+  const expander = gutters[0].querySelector(".ruleview-expander");
+  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded");
+
+  expander.click();
+  ok(
+    view.element.children[1].hidden,
+    "Pseudo Elements are collapsed by twisty"
+  );
+
+  expander.click();
+  ok(!view.element.children[1].hidden, "Pseudo Elements are expanded again");
+
+  info(
+    "Make sure that dblclicking on the header container also toggles " +
+      "the pseudo elements"
+  );
+  EventUtils.synthesizeMouseAtCenter(
+    gutters[0],
+    { clickCount: 2 },
+    view.styleWindow
+  );
+  ok(
+    view.element.children[1].hidden,
+    "Pseudo Elements are collapsed by dblclicking"
+  );
+
+  const elementRuleView = getRuleViewRuleEditor(view, 3);
+
+  const elementFirstLineRule = rules.firstLineRules[0];
+  const elementFirstLineRuleView = [
+    ...view.element.children[1].children,
+  ].filter(e => {
+    return e._ruleEditor && e._ruleEditor.rule === elementFirstLineRule;
+  })[0]._ruleEditor;
+
+  is(
+    convertTextPropsToString(elementFirstLineRule.textProps),
+    "color: orange",
+    "TopLeft firstLine properties are correct"
+  );
+
+  let onAdded = view.once("ruleview-changed");
+  let firstProp = elementFirstLineRuleView.addProperty(
+    "background-color",
+    "rgb(0, 255, 0)",
+    "",
+    true
+  );
+  await onAdded;
+
+  onAdded = view.once("ruleview-changed");
+  const secondProp = elementFirstLineRuleView.addProperty(
+    "font-style",
+    "italic",
+    "",
+    true
+  );
+  await onAdded;
+
+  is(
+    firstProp,
+    elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 2],
+    "First added property is on back of array"
+  );
+  is(
+    secondProp,
+    elementFirstLineRule.textProps[elementFirstLineRule.textProps.length - 1],
+    "Second added property is on back of array"
+  );
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, ":first-line", "font-style"),
+    "italic",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "text-decoration-line"),
+    "none",
+    "Added property should not apply to element"
+  );
+
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(255, 0, 0)",
+    "Disabled property should now have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "background-color"),
+    "rgb(221, 221, 221)",
+    "Added property should not apply to element"
+  );
+
+  await togglePropStatus(view, firstProp);
+
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, null, "text-decoration-line"),
+    "none",
+    "Added property should not apply to element"
+  );
+
+  onAdded = view.once("ruleview-changed");
+  firstProp = elementRuleView.addProperty(
+    "background-color",
+    "rgb(0, 0, 255)",
+    "",
+    true
+  );
+  await onAdded;
+
+  is(
+    await getComputedStyleProperty(id, null, "background-color"),
+    "rgb(0, 0, 255)",
+    "Added property should have been used."
+  );
+  is(
+    await getComputedStyleProperty(id, ":first-line", "background-color"),
+    "rgb(0, 255, 0)",
+    "Added prop does not apply to pseudo"
+  );
+}
+
+async function testTopRight(inspector, view) {
+  await assertPseudoElementRulesNumbers("#topright", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 2,
+    afterRulesNb: 1,
+  });
+
+  const gutters = assertGutters(view);
+
+  const expander = gutters[0].querySelector(".ruleview-expander");
+  ok(
+    !view.element.firstChild.classList.contains("show-expandable-container"),
+    "Pseudo Elements remain collapsed after switching element"
+  );
+
+  expander.scrollIntoView();
+  expander.click();
+  ok(
+    !view.element.children[1].hidden,
+    "Pseudo Elements are shown again after clicking twisty"
+  );
+}
+
+async function testBottomRight(inspector, view) {
+  await assertPseudoElementRulesNumbers("#bottomright", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 3,
+    afterRulesNb: 1,
+  });
+}
+
+async function testBottomLeft(inspector, view) {
+  await assertPseudoElementRulesNumbers("#bottomleft", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 0,
+    beforeRulesNb: 2,
+    afterRulesNb: 1,
+  });
+}
+
+async function testParagraph(inspector, view) {
+  const rules = await assertPseudoElementRulesNumbers(
+    "#bottomleft p",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      firstLineRulesNb: 1,
+      firstLetterRulesNb: 1,
+      selectionRulesNb: 2,
+      markerRulesNb: 0,
+      beforeRulesNb: 0,
+      afterRulesNb: 0,
+    }
+  );
+
+  assertGutters(view);
+
+  const elementFirstLineRule = rules.firstLineRules[0];
+  is(
+    convertTextPropsToString(elementFirstLineRule.textProps),
+    "background: blue",
+    "Paragraph first-line properties are correct"
+  );
+
+  const elementFirstLetterRule = rules.firstLetterRules[0];
+  is(
+    convertTextPropsToString(elementFirstLetterRule.textProps),
+    "color: red; font-size: 130%",
+    "Paragraph first-letter properties are correct"
+  );
+
+  const elementSelectionRule = rules.selectionRules[0];
+  is(
+    convertTextPropsToString(elementSelectionRule.textProps),
+    "color: white; background: black",
+    "Paragraph first-letter properties are correct"
+  );
+}
+
+async function testBody(inspector, view) {
+  await testNode("body", inspector, view);
+
+  const gutters = getGutters(view);
+  is(gutters.length, 0, "There are no gutter headings");
+}
+
+async function testList(inspector, view) {
+  await assertPseudoElementRulesNumbers("#list", inspector, view, {
+    elementRulesNb: 4,
+    firstLineRulesNb: 1,
+    firstLetterRulesNb: 1,
+    selectionRulesNb: 0,
+    markerRulesNb: 1,
+    beforeRulesNb: 1,
+    afterRulesNb: 1,
+  });
+
+  assertGutters(view);
+}
+
+async function testDialogBackdrop(inspector, view) {
+  await assertPseudoElementRulesNumbers("dialog", inspector, view, {
+    elementRulesNb: 3,
+    backdropRules: 1,
+  });
+
+  assertGutters(view);
+}
+
+function convertTextPropsToString(textProps) {
+  return textProps.map(t => t.name + ": " + t.value).join("; ");
+}
+
+async function testNode(selector, inspector, view) {
+  await selectNode(selector, inspector);
+  const elementStyle = view._elementStyle;
+  return elementStyle;
+}
+
+async function assertPseudoElementRulesNumbers(
+  selector,
+  inspector,
+  view,
+  ruleNbs
+) {
+  const elementStyle = await testNode(selector, inspector, view);
+
+  const rules = {
+    elementRules: elementStyle.rules.filter(rule => !rule.pseudoElement),
+    firstLineRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::first-line"
+    ),
+    firstLetterRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::first-letter"
+    ),
+    selectionRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::selection"
+    ),
+    markerRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::marker"
+    ),
+    beforeRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::before"
+    ),
+    afterRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::after"
+    ),
+    backdropRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::backdrop"
+    ),
+  };
+
+  is(
+    rules.elementRules.length,
+    ruleNbs.elementRulesNb || 0,
+    selector + " has the correct number of non pseudo element rules"
+  );
+  is(
+    rules.firstLineRules.length,
+    ruleNbs.firstLineRulesNb || 0,
+    selector + " has the correct number of ::first-line rules"
+  );
+  is(
+    rules.firstLetterRules.length,
+    ruleNbs.firstLetterRulesNb || 0,
+    selector + " has the correct number of ::first-letter rules"
+  );
+  is(
+    rules.selectionRules.length,
+    ruleNbs.selectionRulesNb || 0,
+    selector + " has the correct number of ::selection rules"
+  );
+  is(
+    rules.markerRules.length,
+    ruleNbs.markerRulesNb || 0,
+    selector + " has the correct number of ::marker rules"
+  );
+  is(
+    rules.beforeRules.length,
+    ruleNbs.beforeRulesNb || 0,
+    selector + " has the correct number of ::before rules"
+  );
+  is(
+    rules.afterRules.length,
+    ruleNbs.afterRulesNb || 0,
+    selector + " has the correct number of ::after rules"
+  );
+
+  return rules;
+}
+
+function getGutters(view) {
+  return view.element.querySelectorAll(".ruleview-header");
+}
+
+function assertGutters(view) {
+  const gutters = getGutters(view);
+
+  is(gutters.length, 3, "There are 3 gutter headings");
+  is(gutters[0].textContent, "Pseudo-elements", "Gutter heading is correct");
+  is(gutters[1].textContent, "This Element", "Gutter heading is correct");
+  is(
+    gutters[2].textContent,
+    "Inherited from body",
+    "Gutter heading is correct"
+  );
+
+  return gutters;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
new file mode 100644
index 0000000000..d098542758
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_02.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudoelements are displayed correctly in the markup view.
+
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector } = await openRuleView();
+
+  const node = await getNodeFront("#topleft", inspector);
+  const children = await inspector.markup.walker.children(node);
+
+  is(children.nodes.length, 3, "Element has correct number of children");
+
+  const beforeElement = children.nodes[0];
+  is(
+    beforeElement.tagName,
+    "_moz_generated_content_before",
+    "tag name is correct"
+  );
+  await selectNode(beforeElement, inspector);
+
+  const afterElement = children.nodes[children.nodes.length - 1];
+  is(
+    afterElement.tagName,
+    "_moz_generated_content_after",
+    "tag name is correct"
+  );
+  await selectNode(afterElement, inspector);
+
+  const listNode = await getNodeFront("#list", inspector);
+  const listChildren = await inspector.markup.walker.children(listNode);
+
+  is(listChildren.nodes.length, 4, "<li> has correct number of children");
+  const markerElement = listChildren.nodes[0];
+  is(
+    markerElement.tagName,
+    "_moz_generated_content_marker",
+    "tag name is correct"
+  );
+  await selectNode(markerElement, inspector);
+
+  const listBeforeElement = listChildren.nodes[1];
+  is(
+    listBeforeElement.tagName,
+    "_moz_generated_content_before",
+    "tag name is correct"
+  );
+  await selectNode(listBeforeElement, inspector);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js
new file mode 100644
index 0000000000..6d37829160
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited.js
@@ -0,0 +1,31 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for visited/unvisited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited.html";
+
+add_task(async () => {
+  info("Open a url which has a visited and an unvisited link");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited link is available");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "a:visited"), "Rule of a:visited is shown");
+  ok(!getRuleViewRule(view, "a:link"), "Rule of a:link is not shown");
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+
+  info("Check whether the rule view is shown correctly for unvisited element");
+  await selectNode("#unvisited", inspector);
+  ok(!getRuleViewRule(view, "a:visited"), "Rule of a:visited is not shown");
+  ok(getRuleViewRule(view, "a:link"), "Rule of a:link is shown");
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js
new file mode 100644
index 0000000000..48f62a2fa9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_in_media-query.js
@@ -0,0 +1,23 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests for visited/unvisited rule.
+
+const TEST_URI = URL_ROOT + "doc_visited_in_media_query.html";
+
+add_task(async () => {
+  info("Open a url which has a visited link and the style in the media query");
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the visited link is available");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "a"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js
new file mode 100644
index 0000000000..97d1458b72
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-visited_with_style-attribute.js
@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view works for an element with a visited pseudo class
+// with a style attribute defined.
+
+const TEST_URI = URL_ROOT + "doc_visited_with_style_attribute.html";
+
+add_task(async () => {
+  info(
+    "Open a page which has an element with a visited pseudo class and a style attribute"
+  );
+  const tab = await addTab(TEST_URI);
+
+  info("Wait until the link has been visited");
+  await waitUntilVisitedState(tab, ["#visited"]);
+
+  info("Open the inspector");
+  const { inspector, view } = await openRuleView();
+
+  info("Check whether the rule view is shown correctly for visited element");
+  await selectNode("#visited", inspector);
+  ok(getRuleViewRule(view, "element"), "Rule of a is shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js b/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
new file mode 100644
index 0000000000..62a8c8684d
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo_lock_options.js
@@ -0,0 +1,159 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view pseudo lock options work properly.
+
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      color: red;
+    }
+    div:hover {
+      color: blue;
+    }
+    div:active {
+      color: yellow;
+    }
+    div:focus {
+      color: green;
+    }
+    div:focus-within {
+      color: papayawhip;
+    }
+    div:visited {
+      color: orange;
+    }
+    div:focus-visible {
+      color: wheat;
+    }
+    div:target {
+      color: crimson;
+    }
+  </style>
+  <div>test div</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  await assertPseudoPanelClosed(view);
+
+  info("Toggle the pseudo class panel open");
+  view.pseudoClassToggle.click();
+  await assertPseudoPanelOpened(view);
+
+  info("Toggle each pseudo lock and check that the pseudo lock is added");
+  for (const pseudo of PSEUDO_CLASSES) {
+    await togglePseudoClass(inspector, view, pseudo);
+    await assertPseudoAdded(inspector, view, pseudo, 3, 1);
+    await togglePseudoClass(inspector, view, pseudo);
+    await assertPseudoRemoved(inspector, view, 2);
+  }
+
+  info("Toggle all pseudo locks and check that the pseudo lock is added");
+  await togglePseudoClass(inspector, view, ":hover");
+  await togglePseudoClass(inspector, view, ":active");
+  await togglePseudoClass(inspector, view, ":focus");
+  await togglePseudoClass(inspector, view, ":target");
+  await assertPseudoAdded(inspector, view, ":target", 6, 1);
+  await assertPseudoAdded(inspector, view, ":focus", 6, 2);
+  await assertPseudoAdded(inspector, view, ":active", 6, 3);
+  await assertPseudoAdded(inspector, view, ":hover", 6, 4);
+  await togglePseudoClass(inspector, view, ":hover");
+  await togglePseudoClass(inspector, view, ":active");
+  await togglePseudoClass(inspector, view, ":focus");
+  await togglePseudoClass(inspector, view, ":target");
+  await assertPseudoRemoved(inspector, view, 2);
+
+  info("Select a null element");
+  await view.selectElement(null);
+
+  info("Check that all pseudo locks are unchecked and disabled");
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    ok(
+      !checkbox.checked && checkbox.disabled,
+      `${pseudo} checkbox is unchecked and disabled`
+    );
+  }
+
+  info("Toggle the pseudo class panel close");
+  view.pseudoClassToggle.click();
+  await assertPseudoPanelClosed(view);
+});
+
+async function togglePseudoClass(inspector, view, pseudoClass) {
+  info(`Toggle the pseudo-class ${pseudoClass}, wait for it to be applied`);
+  const onRefresh = inspector.once("rule-view-refreshed");
+  const checkbox = getPseudoClassCheckbox(view, pseudoClass);
+  if (checkbox) {
+    checkbox.click();
+  }
+  await onRefresh;
+}
+
+function assertPseudoAdded(inspector, view, pseudoClass, numRules, childIndex) {
+  info("Check that the rule view contains the pseudo-class rule");
+  is(
+    view.element.children.length,
+    numRules,
+    "Should have " + numRules + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, childIndex).rule.selectorText,
+    "div" + pseudoClass,
+    "rule view is showing " + pseudoClass + " rule"
+  );
+}
+
+function assertPseudoRemoved(inspector, view, numRules) {
+  info("Check that the rule view no longer contains the pseudo-class rule");
+  is(
+    view.element.children.length,
+    numRules,
+    "Should have " + numRules + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, 1).rule.selectorText,
+    "div",
+    "Second rule is div"
+  );
+}
+
+function assertPseudoPanelOpened(view) {
+  info("Check the opened state of the pseudo class panel");
+
+  ok(!view.pseudoClassPanel.hidden, "Pseudo Class Panel Opened");
+
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    ok(!checkbox.disabled, `${pseudo} checkbox is not disabled`);
+    is(
+      checkbox.getAttribute("tabindex"),
+      "0",
+      `${pseudo} checkbox has a tabindex of 0`
+    );
+  }
+}
+
+function assertPseudoPanelClosed(view) {
+  info("Check the closed state of the pseudo clas panel");
+
+  ok(view.pseudoClassPanel.hidden, "Pseudo Class Panel Hidden");
+
+  for (const pseudo of PSEUDO_CLASSES) {
+    const checkbox = getPseudoClassCheckbox(view, pseudo);
+    is(
+      checkbox.getAttribute("tabindex"),
+      "-1",
+      `${pseudo} checkbox has a tabindex of -1`
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js b/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
new file mode 100644
index 0000000000..05574ab4c7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-no-flicker.js
@@ -0,0 +1,47 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view does not go blank while selecting a new node.
+
+const TESTCASE_URI =
+  "data:text/html;charset=utf-8," +
+  '<div id="testdiv" style="font-size:10px;">' +
+  "Test div!</div>";
+
+add_task(async function () {
+  await addTab(TESTCASE_URI);
+
+  info("Opening the rule view and selecting the test node");
+  const { inspector, view } = await openRuleView();
+  const testdiv = await getNodeFront("#testdiv", inspector);
+  await selectNode(testdiv, inspector);
+
+  const htmlBefore = view.element.innerHTML;
+  ok(
+    htmlBefore.indexOf("font-size") > -1,
+    "The rule view should contain a font-size property."
+  );
+
+  // Do the selectNode call manually, because otherwise it's hard to guarantee
+  // that we can make the below checks at a reasonable time.
+  info("refreshing the node");
+  const p = view.selectElement(testdiv, true);
+  is(
+    view.element.innerHTML,
+    htmlBefore,
+    "The rule view is unchanged during selection."
+  );
+  ok(
+    view.element.classList.contains("non-interactive"),
+    "The rule view is marked non-interactive."
+  );
+  await p;
+
+  info("node refreshed");
+  ok(
+    !view.element.classList.contains("non-interactive"),
+    "The rule view is marked interactive again."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js
new file mode 100644
index 0000000000..d41ee2b00c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-attribute-change_01.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that changing the current element's attributes refreshes the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: blue;
+    }
+    .testclass {
+      background-color: green;
+    }
+  </style>
+  <div id="testid" class="testclass" style="margin-top: 1px; padding-top: 5px;">
+    Styled Node
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info(
+    "Checking that the rule-view has the element, #testid and " +
+      ".testclass selectors"
+  );
+  checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
+
+  info(
+    "Changing the node's ID attribute and waiting for the " +
+      "rule-view refresh"
+  );
+  let ruleViewRefreshed = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute("#testid", "id", "differentid");
+  await ruleViewRefreshed;
+
+  info("Checking that the rule-view doesn't have the #testid selector anymore");
+  checkRuleViewContent(view, ["element", ".testclass"]);
+
+  info("Reverting the ID attribute change");
+  ruleViewRefreshed = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute("#differentid", "id", "testid");
+  await ruleViewRefreshed;
+
+  info("Checking that the rule-view has all the selectors again");
+  checkRuleViewContent(view, ["element", "#testid", ".testclass"]);
+});
+
+function checkRuleViewContent(view, expectedSelectors) {
+  const selectors = view.styleDocument.querySelectorAll(
+    ".ruleview-selectorcontainer"
+  );
+
+  is(
+    selectors.length,
+    expectedSelectors.length,
+    expectedSelectors.length + " selectors are displayed"
+  );
+
+  for (let i = 0; i < expectedSelectors.length; i++) {
+    is(
+      selectors[i].textContent.indexOf(expectedSelectors[i]),
+      0,
+      "Selector " + (i + 1) + " is " + expectedSelectors[i]
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js
new file mode 100644
index 0000000000..9287f161de
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_refresh-on-style-change.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the rule view refreshes when the current node has its style
+// changed
+
+const TEST_URI = "<div id='testdiv' style='font-size: 10px;''>Test div!</div>";
+
+add_task(async function () {
+  Services.prefs.setCharPref("devtools.defaultColorUnit", "name");
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testdiv", inspector);
+
+  let fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "10px", "The rule view shows the right font-size");
+
+  info("Changing the node's style and waiting for the update");
+  const onUpdated = inspector.once("rule-view-refreshed");
+  await setContentPageElementAttribute(
+    "#testdiv",
+    "style",
+    "font-size: 3em; color: lightgoldenrodyellow; " +
+      "text-align: right; text-transform: uppercase"
+  );
+  await onUpdated;
+
+  const textAlign = getRuleViewPropertyValue(view, "element", "text-align");
+  is(textAlign, "right", "The rule view shows the new text align.");
+  const color = getRuleViewPropertyValue(view, "element", "color");
+  is(color, "lightgoldenrodyellow", "The rule view shows the new color.");
+  fontSize = getRuleViewPropertyValue(view, "element", "font-size");
+  is(fontSize, "3em", "The rule view shows the new font size.");
+  const textTransform = getRuleViewPropertyValue(
+    view,
+    "element",
+    "text-transform"
+  );
+  is(textTransform, "uppercase", "The rule view shows the new text transform.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
new file mode 100644
index 0000000000..8a4d78e843
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_01.js
@@ -0,0 +1,180 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter and clear button works properly in
+// the computed list.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property names",
+    search: "margin",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: true,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property values",
+    search: "0px",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for property line input",
+    search: "margin-top:4px",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for parsed name",
+    search: "margin-top:",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly in the computed list " +
+      "for parsed property value",
+    search: ":4px",
+    isExpanderOpen: false,
+    isFilterOpen: false,
+    isMarginHighlighted: true,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: true,
+    isMarginLeftHighlighted: false,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(
+    !!textPropEditor.expander.getAttribute("open"),
+    data.isExpanderOpen,
+    "Got correct expander state."
+  );
+  is(
+    computed.hasAttribute("filter-open"),
+    data.isFilterOpen,
+    "Got correct expanded state for margin computed list."
+  );
+  is(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    data.isMarginHighlighted,
+    "Got correct highlight for margin text property."
+  );
+
+  is(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    data.isMarginTopHighlighted,
+    "Got correct highlight for margin-top computed property."
+  );
+  is(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    data.isMarginRightHighlighted,
+    "Got correct highlight for margin-right computed property."
+  );
+  is(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    data.isMarginBottomHighlighted,
+    "Got correct highlight for margin-bottom computed property."
+  );
+  is(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    data.isMarginLeftHighlighted,
+    "Got correct highlight for margin-left computed property."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  ok(!textPropEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js
new file mode 100644
index 0000000000..98c48c9f79
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_02.js
@@ -0,0 +1,118 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// when modifying the existing search filter value
+
+const SEARCH = "margin-";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testRemoveTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is not highlighted."
+  );
+  ok(computed.hasAttribute("filter-open"), "margin computed list is open.");
+
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
+
+async function testRemoveTextInFilter(inspector, view) {
+  info('Press backspace and set filter text to "margin"');
+
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
+  await inspector.once("ruleview-filtered");
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(!ruleEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(
+    ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is correctly highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js
new file mode 100644
index 0000000000..5c2a48a7fb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_03.js
@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// for color values.
+
+// The color format here is chosen to match the default returned by
+// CssColor.toString.
+const SEARCH = "background-color: rgb(243, 243, 243)";
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass {
+      background: rgb(243, 243, 243) none repeat scroll 0% 0%;
+    }
+  </style>
+  <div class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode(".testclass", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = rule.textProps[0].editor;
+  const computed = ruleEditor.computed;
+
+  is(rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !ruleEditor.container.classList.contains("ruleview-highlight"),
+    "background property is not highlighted."
+  );
+  ok(computed.hasAttribute("filter-open"), "background computed list is open.");
+  ok(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    "background-color computed property is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js
new file mode 100644
index 0000000000..6b2344b6a6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_04.js
@@ -0,0 +1,75 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly in the computed list
+// for newly modified property values.
+
+const SEARCH = "0px";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      margin: 4px;
+      top: 0px;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testModifyPropertyValueFilter(inspector, view);
+});
+
+async function testModifyPropertyValueFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const propEditor = getTextProperty(view, 1, { margin: "4px" }).editor;
+  const computed = propEditor.computed;
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+
+  info("Check that the correct rules are visible");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is not highlighted."
+  );
+  ok(
+    rule.textProps[1].editor.container.classList.contains("ruleview-highlight"),
+    "top text property is correctly highlighted."
+  );
+
+  const onBlur = once(editor.input, "blur");
+  const onModification = view.once("ruleview-changed");
+  EventUtils.sendString("4px 0px", view.styleWindow);
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onBlur;
+  await onModification;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+  ok(
+    !computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is not highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    !computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is not highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js
new file mode 100644
index 0000000000..5eeff9b539
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-computed-list_expander.js
@@ -0,0 +1,113 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the expanded computed list for a property remains open after
+// clearing the rule view search filter.
+
+const SEARCH = "0px";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testOpenExpanderAndAddTextInFilter(inspector, view);
+  await testClearSearchFilter(inspector, view);
+});
+
+async function testOpenExpanderAndAddTextInFilter(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const ruleEditor = getTextProperty(view, 1, { margin: "4px 0px" }).editor;
+  const computed = ruleEditor.computed;
+
+  info("Opening the computed list of margin property");
+  ruleEditor.expander.click();
+
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    ruleEditor.container.classList.contains("ruleview-highlight"),
+    "margin text property is correctly highlighted."
+  );
+  ok(
+    !computed.hasAttribute("filter-open"),
+    "margin computed list does not contain filter-open class."
+  );
+  ok(
+    computed.hasAttribute("user-open"),
+    "margin computed list contains user-open attribute."
+  );
+
+  ok(
+    !computed.children[0].classList.contains("ruleview-highlight"),
+    "margin-top computed property is not highlighted."
+  );
+  ok(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    "margin-right computed property is correctly highlighted."
+  );
+  ok(
+    !computed.children[2].classList.contains("ruleview-highlight"),
+    "margin-bottom computed property is not highlighted."
+  );
+  ok(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    "margin-left computed property is correctly highlighted."
+  );
+}
+
+async function testClearSearchFilter(inspector, view) {
+  info("Clearing the search filter");
+
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, view.styleWindow);
+
+  await onRuleViewFiltered;
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1).rule.textProps[0].editor;
+  const computed = ruleEditor.computed;
+
+  ok(ruleEditor.expander.getAttribute("open"), "Expander is open.");
+  ok(
+    !computed.hasAttribute("filter-open"),
+    "margin computed list does not contain filter-open class."
+  );
+  ok(
+    computed.hasAttribute("user-open"),
+    "margin computed list contains user-open attribute."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js
new file mode 100644
index 0000000000..fb95e6adf8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-media-queries-layers.js
@@ -0,0 +1,195 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for @media / @layer rules.
+// The document uses selectors so we can identify rule more easily
+const TEST_URI = `
+  <!DOCTYPE html>
+    <style type='text/css'>
+      h1, simple {
+        color: tomato;
+      }
+      @layer {
+        h1, anonymous {
+          color: tomato;
+        }
+      }
+      @layer myLayer {
+        h1, named {
+          color: tomato;
+        }
+      }
+      @media screen {
+        h1, skreen {
+          color: tomato;
+        }
+      }
+      @layer {
+        @layer myLayer {
+          @media (min-width: 1px) {
+            @media (min-height: 1px) {
+              h1, nested {
+                color: tomato;
+              }
+            }
+          }
+        }
+      }
+    </style>
+    <h1>Hello Mochi</h1>`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  info(`Check initial state and rules order`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: [] },
+      { selector: "h1, simple", highlighted: [] },
+      { selector: "h1, nested", highlighted: [] },
+      { selector: "h1, named", highlighted: [] },
+      { selector: "h1, anonymous", highlighted: [] },
+    ],
+  });
+
+  info(`Check filtering on "layer"`);
+  await setSearchFilter(view, `layer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer", "@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info(`Check filtering on "@layer"`);
+  await setNewSearchFilter(view, `@layer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer", "@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info("Check filtering on exact `@layer`");
+  await setNewSearchFilter(view, "`@layer`");
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer"] },
+      { selector: "h1, anonymous", highlighted: ["@layer"] },
+    ],
+  });
+
+  info(`Check filtering on layer name "myLayer"`);
+  await setNewSearchFilter(view, `myLayer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+    ],
+  });
+
+  info(`Check filtering on "@layer myLayer"`);
+  await setNewSearchFilter(view, `@layer myLayer`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, nested", highlighted: ["@layer myLayer"] },
+      { selector: "h1, named", highlighted: ["@layer myLayer"] },
+    ],
+  });
+
+  info(`Check filtering on "media"`);
+  await setNewSearchFilter(view, `media`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: ["@media screen"] },
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on "@media"`);
+  await setNewSearchFilter(view, `@media`);
+  await checkRuleView(view, {
+    rules: [
+      { selector: "h1, skreen", highlighted: ["@media screen"] },
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on media query content "1px"`);
+  await setNewSearchFilter(view, `1px`);
+  await checkRuleView(view, {
+    rules: [
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-width: 1px)", "@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info(`Check filtering on media query content "height"`);
+  await setNewSearchFilter(view, `height`);
+  await checkRuleView(view, {
+    rules: [
+      {
+        selector: "h1, nested",
+        highlighted: ["@media (min-height: 1px)"],
+      },
+    ],
+  });
+
+  info("Check filtering on exact `@media`");
+  await setNewSearchFilter(view, "`@media`");
+  await checkRuleView(view, {
+    rules: [],
+  });
+});
+
+async function checkRuleView(view, { rules }) {
+  info("Check that the correct rules are visible");
+
+  const rulesInView = Array.from(view.element.children);
+  // The `element` "rule" is never filtered, so remove it from the list of element we check.
+  rulesInView.shift();
+
+  is(rulesInView.length, rules.length, "All expected rules are displayed");
+
+  for (let i = 0; i < rulesInView.length; i++) {
+    const rule = rulesInView[i];
+    const selector = rule.querySelector(
+      ".ruleview-selectorcontainer"
+    ).innerText;
+    is(selector, rules[i]?.selector, `Expected selector at index ${i}`);
+
+    const highlightedElements = Array.from(
+      rule.querySelectorAll(".ruleview-highlight")
+    ).map(el => el.innerText);
+    Assert.deepEqual(
+      highlightedElements,
+      rules[i]?.highlighted,
+      "The expected ancestor rules information element are highlighted"
+    );
+  }
+}
+
+async function setNewSearchFilter(view, newSearchText) {
+  const win = view.styleWindow;
+  const searchClearButton = view.searchClearButton;
+
+  const onRuleViewCleared = view.inspector.once("ruleview-filtered");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await onRuleViewCleared;
+
+  await setSearchFilter(view, newSearchText);
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js b/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js
new file mode 100644
index 0000000000..442c543289
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter-overridden-property.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view overriden search filter works properly for
+// overridden properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+  #testid {
+    width: 100%;
+  }
+  h1 {
+    width: 50%;
+  }
+  </style>
+  <h1 id='testid' class='testclass'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testFilterOverriddenProperty(inspector, view);
+});
+
+async function testFilterOverriddenProperty(inspector, ruleView) {
+  info("Check that the correct rules are visible");
+  is(ruleView.element.children.length, 3, "Should have 3 rules.");
+
+  let rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  let textPropEditor = getTextProperty(ruleView, 1, { width: "100%" }).editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is not overridden."
+  );
+  ok(
+    textPropEditor.filterProperty.hidden,
+    "Overridden search button is hidden."
+  );
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = getTextProperty(ruleView, 2, { width: "50%" }).editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(
+    textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden."
+  );
+  ok(
+    !textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden."
+  );
+
+  const searchField = ruleView.searchField;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  info("Click the overridden search");
+  textPropEditor.filterProperty.click();
+  await onRuleViewFiltered;
+
+  info("Check that the overridden search is applied");
+  is(searchField.value, "`width`", "The search field value is width.");
+
+  rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  textPropEditor = getTextProperty(ruleView, 1, { width: "100%" }).editor;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted."
+  );
+
+  rule = getRuleViewRuleEditor(ruleView, 2).rule;
+  textPropEditor = getTextProperty(ruleView, 2, { width: "50%" }).editor;
+  is(rule.selectorText, "h1", "Third rule is h1.");
+  ok(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    "width property is correctly highlighted."
+  );
+  ok(
+    textPropEditor.element.classList.contains("ruleview-overridden"),
+    "width property is overridden."
+  );
+  ok(
+    !textPropEditor.filterProperty.hidden,
+    "Overridden search button is not hidden."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
new file mode 100644
index 0000000000..a0a3ed32ff
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_01.js
@@ -0,0 +1,98 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter and clear button works properly.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid, h1 {
+      background-color: #00F !important;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc: "Tests that the search filter works properly for property names",
+    search: "color",
+  },
+  {
+    desc: "Tests that the search filter works properly for property values",
+    search: "00F",
+  },
+  {
+    desc: "Tests that the search filter works properly for property line input",
+    search: "background-color:#00F",
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for parsed property " +
+      "names",
+    search: "background:",
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for parsed property " +
+      "values",
+    search: ":00F",
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid, h1", "Second rule is #testid, h1.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js
new file mode 100644
index 0000000000..173da66296
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_02.js
@@ -0,0 +1,36 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for keyframe rule
+// selectors.
+
+const SEARCH = "20%";
+const TEST_URI = URL_ROOT + "doc_keyframeanimation.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#boxy", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 2, 0);
+
+  is(ruleEditor.rule.domRule.keyText, "20%", "Second rule is 20%.");
+  ok(
+    ruleEditor.selectorText.classList.contains("ruleview-highlight"),
+    "20% selector is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js
new file mode 100644
index 0000000000..18335c121c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_03.js
@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for inline styles.
+
+const SEARCH = "color";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" style="background-color:aliceblue">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 1, "Should have 1 rule.");
+
+  const rule = getRuleViewRuleEditor(view, 0).rule;
+
+  is(rule.selectorText, "element", "First rule is inline element.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js
new file mode 100644
index 0000000000..fc0eee9f19
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_04.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly when modifying the
+// existing search filter value.
+
+const SEARCH = "00F";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: #00F;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testRemoveTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function testRemoveTextInFilter(inspector, view) {
+  info('Press backspace and set filter text to "00"');
+
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_BACK_SPACE", {}, win);
+  await inspector.once("ruleview-filtered");
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  let rule = getRuleViewRuleEditor(view, 1).rule;
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+
+  rule = getRuleViewRuleEditor(view, 2).rule;
+  is(rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js
new file mode 100644
index 0000000000..8138528ee4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_05.js
@@ -0,0 +1,37 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for stylesheet source.
+
+const SEARCH = "doc_urls_clickable.css";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const source = rule.textProps[0].editor.ruleEditor.source;
+
+  is(rule.selectorText, ".relative1", "Second rule is .relative1.");
+  ok(
+    source.classList.contains("ruleview-highlight"),
+    "stylesheet source is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js
new file mode 100644
index 0000000000..a73fb87ff9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_06.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter does not highlight the source with
+// input that could be parsed as a property line.
+
+const SEARCH = "doc_urls_clickable.css: url";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 1, "Should have 1 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js
new file mode 100644
index 0000000000..e2c7494bf7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_07.js
@@ -0,0 +1,66 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly modified
+// property name.
+
+const SEARCH = "e";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Focus the width property name");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const propEditor = rule.textProps[0].editor;
+  await focusEditableField(view, propEditor.nameSpan);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "width text property is not highlighted."
+  );
+  ok(
+    rule.textProps[1].editor.container.classList.contains("ruleview-highlight"),
+    "height text property is correctly highlighted."
+  );
+
+  info("Change the width property to margin-left");
+  EventUtils.sendString("margin-left", view.styleWindow);
+
+  info("Submit the change");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin-left text property is correctly highlighted."
+  );
+
+  // After pressing return on the property name, the value has been focused
+  // automatically. Blur it now and wait for the rule-view to refresh to avoid
+  // pending requests.
+  onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("KEY_Escape");
+  await onRuleViewChanged;
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
new file mode 100644
index 0000000000..b35afd7d10
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_08.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly modified
+// property value.
+
+const SEARCH = "100%";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Focus the height property value");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const propEditor = rule.textProps[1].editor;
+  await focusEditableField(view, propEditor.valueSpan);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[0].editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+  ok(
+    !propEditor.container.classList.contains("ruleview-highlight"),
+    "height text property is not highlighted."
+  );
+
+  info("Change the height property value to 100%");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.sendString("100%", view.styleWindow);
+  EventUtils.synthesizeKey("KEY_Enter");
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "height text property is correctly highlighted."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
new file mode 100644
index 0000000000..0d1c8c8a45
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly added
+// property.
+
+const SEARCH = "100%";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Start entering a new property in the rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const prop = getTextProperty(view, 1, { width: "100%" });
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    prop.editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+  ok(
+    !getTextProperty(view, 1, {
+      height: "50%",
+    }).editor.container.classList.contains("ruleview-highlight"),
+    "height text property is not highlighted."
+  );
+
+  info("Test creating a new property");
+
+  info("Entering margin-left in the property name editor");
+  // Changing the value doesn't cause a rule-view refresh, no need to wait for
+  // ruleview-changed here.
+  editor.input.value = "margin-left";
+
+  info("Pressing return to commit and focus the new value field");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+
+  // Getting the new value editor after focus
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const propEditor = ruleEditor.rule.textProps[2].editor;
+
+  info("Entering a value and bluring the field to expect a rule change");
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.value = "100%";
+  view.debounce.flush();
+  await onRuleViewChanged;
+
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin-left text property is correctly highlighted."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
new file mode 100644
index 0000000000..b3ee69c2b9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_10.js
@@ -0,0 +1,96 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for rule selectors.
+
+const TEST_URI = `
+  <style type="text/css">
+    html, body, div {
+      background-color: #00F;
+    }
+    #testid {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the search filter works properly for a single rule " +
+      "selector",
+    search: "#test",
+    selectorText: "#testid",
+    index: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for multiple rule " +
+      "selectors",
+    search: "body",
+    selectorText: "html, body, div",
+    index: 2,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  is(
+    ruleEditor.rule.selectorText,
+    data.selectorText,
+    "Second rule is " + data.selectorText + "."
+  );
+  ok(
+    ruleEditor.selectorText.children[data.index].classList.contains(
+      "ruleview-highlight"
+    ),
+    data.selectorText + " selector is highlighted."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
new file mode 100644
index 0000000000..881b5274ee
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_context-menu.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test rule view search filter context menu works properly.
+
+const TEST_INPUT = "h1";
+const TEST_URI = "<h1>test filter context menu</h1>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { toolbox, inspector, view } = await openRuleView();
+  await selectNode("h1", inspector);
+
+  const searchField = view.searchField;
+
+  info("Opening context menu");
+
+  emptyClipboard();
+
+  const onFocus = once(searchField, "focus");
+  searchField.focus();
+  await onFocus;
+
+  let onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  let searchContextMenu = toolbox.getTextBoxContextMenu();
+  ok(
+    searchContextMenu,
+    "The search filter context menu is loaded in the rule view"
+  );
+
+  let cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  let cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  let cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  let cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  let cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  let cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "true", "cmdUndo is disabled");
+  is(cmdDelete.getAttribute("disabled"), "true", "cmdDelete is disabled");
+  is(cmdSelectAll.getAttribute("disabled"), "true", "cmdSelectAll is disabled");
+  is(cmdCut.getAttribute("disabled"), "true", "cmdCut is disabled");
+  is(cmdCopy.getAttribute("disabled"), "true", "cmdCopy is disabled");
+
+  if (isWindows()) {
+    // emptyClipboard only works on Windows (666254), assert paste only for this OS.
+    is(cmdPaste.getAttribute("disabled"), "true", "cmdPaste is disabled");
+  }
+
+  info("Closing context menu");
+  let onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Copy text in search field using the context menu");
+  searchField.setUserInput(TEST_INPUT);
+  searchField.select();
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  await waitForClipboardPromise(() => cmdCopy.click(), TEST_INPUT);
+
+  onContextMenuClose = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuClose;
+
+  info("Reopen context menu and check command properties");
+
+  onContextMenuOpen = toolbox.once("menu-open");
+  synthesizeContextMenuEvent(searchField);
+  await onContextMenuOpen;
+
+  searchContextMenu = toolbox.getTextBoxContextMenu();
+  cmdUndo = searchContextMenu.querySelector("#editmenu-undo");
+  cmdDelete = searchContextMenu.querySelector("#editmenu-delete");
+  cmdSelectAll = searchContextMenu.querySelector("#editmenu-selectAll");
+  cmdCut = searchContextMenu.querySelector("#editmenu-cut");
+  cmdCopy = searchContextMenu.querySelector("#editmenu-copy");
+  cmdPaste = searchContextMenu.querySelector("#editmenu-paste");
+
+  is(cmdUndo.getAttribute("disabled"), "", "cmdUndo is enabled");
+  is(cmdDelete.getAttribute("disabled"), "", "cmdDelete is enabled");
+  is(cmdSelectAll.getAttribute("disabled"), "", "cmdSelectAll is enabled");
+  is(cmdCut.getAttribute("disabled"), "", "cmdCut is enabled");
+  is(cmdCopy.getAttribute("disabled"), "", "cmdCopy is enabled");
+  is(cmdPaste.getAttribute("disabled"), "", "cmdPaste is enabled");
+
+  const onContextMenuHidden = toolbox.once("menu-close");
+  searchContextMenu.hidePopup();
+  await onContextMenuHidden;
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js
new file mode 100644
index 0000000000..600aefe536
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_escape-keypress.js
@@ -0,0 +1,71 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter escape keypress will clear the search
+// field.
+
+const SEARCH = "00F";
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      background-color: #00F;
+    }
+    .testclass {
+      width: 100%;
+    }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+  await testEscapeKeypress(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = getTextProperty(view, 1, { "background-color": "#00F" });
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    prop.editor.container.classList.contains("ruleview-highlight"),
+    "background-color text property is correctly highlighted."
+  );
+}
+
+async function testEscapeKeypress(inspector, view) {
+  info("Pressing the escape key on search filter");
+
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const onRuleViewFiltered = inspector.once("ruleview-filtered");
+
+  searchField.focus();
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, win);
+  await onRuleViewFiltered;
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
new file mode 100644
index 0000000000..8558c40cab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_select-and-copy-styles.js
@@ -0,0 +1,210 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that properties can be selected and copied from the rule view
+
+const osString = Services.appinfo.OS;
+
+const TEST_URI = `
+  <style type="text/css">
+    html {
+      color: #000000;
+    }
+    span {
+      font-variant: small-caps; color: #000000;
+    }
+    .nomatches {
+      color: #ff0000;
+    }
+  </style>
+  <div id="first" style="margin: 10em;
+    font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+    <h1>Some header text</h1>
+    <p id="salutation" style="font-size: 12pt">hi.</p>
+    <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+    solely to provide some things to <span style="color: yellow">
+    highlight</span> and <span style="font-weight: bold">count</span>
+    style list-items in the box at right. If you are reading this,
+    you should go do something else instead. Maybe read a book. Or better
+    yet, write some test-cases for another bit of code.
+    <span style="font-style: italic">some text</span></p>
+    <p id="closing">more text</p>
+    <p>even more text</p>
+  </div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+  await checkCopySelection(view);
+  await checkSelectAll(view);
+  await checkCopyEditorValue(view);
+});
+
+async function checkCopySelection(view) {
+  info("Testing selection copy");
+
+  const contentDoc = view.styleDocument;
+  const win = view.styleWindow;
+  const prop = contentDoc.querySelector(".ruleview-property");
+  const values = contentDoc.querySelectorAll(
+    ".ruleview-propertyvaluecontainer"
+  );
+
+  let range = contentDoc.createRange();
+  range.setStart(prop, 0);
+  range.setEnd(values[4], 2);
+  win.getSelection().addRange(range);
+  info("Checking that _Copy() returns the correct clipboard value");
+
+  const expectedPattern =
+    "  margin: 10em;[\\r\\n]+" +
+    "  font-size: 14pt;[\\r\\n]+" +
+    "  font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "  color: #AAA;[\\r\\n]+" +
+    "}[\\r\\n]+" +
+    "html {[\\r\\n]+" +
+    "  color: #000000;[\\r\\n]*";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+
+  info("Check copying from keyboard");
+  win.getSelection().removeRange(range);
+  // Selecting the declaration `margin: 10em;`
+  range = contentDoc.createRange();
+  range.setStart(prop, 0);
+  range.setEnd(prop, 1);
+  win.getSelection().addRange(range);
+
+  // Dispatching the copy event from the checkbox to make sure we cover Bug 1680893.
+  const declarationCheckbox = contentDoc.querySelector(
+    "input[type=checkbox].ruleview-enableproperty"
+  );
+  const copyEvent = new win.Event("copy", { bubbles: true });
+  await waitForClipboardPromise(
+    () => declarationCheckbox.dispatchEvent(copyEvent),
+    () => checkClipboardData("^margin: 10em;$")
+  );
+}
+
+async function checkSelectAll(view) {
+  info("Testing select-all copy");
+
+  const contentDoc = view.styleDocument;
+  const prop = contentDoc.querySelector(".ruleview-property");
+
+  info(
+    "Checking that _SelectAll() then copy returns the correct " +
+      "clipboard value"
+  );
+  view.contextMenu._onSelectAll();
+  const expectedPattern =
+    "element {[\\r\\n]+" +
+    "  margin: 10em;[\\r\\n]+" +
+    "  font-size: 14pt;[\\r\\n]+" +
+    "  font-family: helvetica, sans-serif;[\\r\\n]+" +
+    "  color: #AAA;[\\r\\n]+" +
+    "}[\\r\\n]+" +
+    "html {[\\r\\n]+" +
+    "  color: #000000;[\\r\\n]+" +
+    "}[\\r\\n]*";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+async function checkCopyEditorValue(view) {
+  info("Testing CSS property editor value copy");
+
+  const ruleEditor = getRuleViewRuleEditor(view, 0);
+  const propEditor = ruleEditor.rule.textProps[0].editor;
+
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+
+  info(
+    "Checking that copying a css property value editor returns the correct" +
+      " clipboard value"
+  );
+
+  const expectedPattern = "10em";
+
+  const allMenuItems = openStyleContextMenuAndGetAllItems(view, editor.input);
+  const menuitemCopy = allMenuItems.find(
+    item =>
+      item.label ===
+      STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
+  );
+
+  ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
+
+  try {
+    await waitForClipboardPromise(
+      () => menuitemCopy.click(),
+      () => checkClipboardData(expectedPattern)
+    );
+  } catch (e) {
+    failedClipboard(expectedPattern);
+  }
+}
+
+function checkClipboardData(expectedPattern) {
+  const actual = SpecialPowers.getClipboardData("text/plain");
+  const expectedRegExp = new RegExp(expectedPattern, "g");
+  return expectedRegExp.test(actual);
+}
+
+function failedClipboard(expectedPattern) {
+  // Format expected text for comparison
+  const terminator = osString == "WINNT" ? "\r\n" : "\n";
+  expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
+  expectedPattern = expectedPattern.replace(/\\\(/g, "(");
+  expectedPattern = expectedPattern.replace(/\\\)/g, ")");
+
+  let actual = SpecialPowers.getClipboardData("text/plain");
+
+  // Trim the right hand side of our strings. This is because expectedPattern
+  // accounts for windows sometimes adding a newline to our copied data.
+  expectedPattern = expectedPattern.trimRight();
+  actual = actual.trimRight();
+
+  dump(
+    "TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " +
+      "results (escaped for accurate comparison):\n"
+  );
+  info("Actual: " + escape(actual));
+  info("Expected: " + escape(expectedPattern));
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js
new file mode 100644
index 0000000000..51d4a9b371
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-iframe-picker.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is hidden when selecting frames in the iframe picker
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+    }
+  </style>
+  <h1>Test the selector highlighter</h1>
+  <iframe src="data:text/html,<meta charset=utf8><style>h2 {background: yellow;}</style><h2>In iframe</h2>">
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, toolbox, view } = await openRuleView();
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, "body");
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+  is(
+    highlighter,
+    inspector.highlighters.getActiveHighlighter(
+      inspector.highlighters.TYPES.SELECTOR
+    ),
+    "The selector highlighter is the active highlighter"
+  );
+
+  // Open frame menu and wait till it's available on the screen.
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  // Verify that the menu is populated.
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+
+  // Wait for the inspector to be reloaded
+  // (instead of only new-root) in order to wait for full
+  // async update of the inspector.
+  const onNewRoot = inspector.once("reloaded");
+  frames[1].click();
+  await onNewRoot;
+
+  await waitFor(
+    () =>
+      !inspector.highlighters.getActiveHighlighter(
+        inspector.highlighters.TYPES.SELECTOR
+      )
+  );
+  ok(true, "The selector highlighter gets hidden after selecting a frame");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js
new file mode 100644
index 0000000000..3a014a68f7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter-on-navigate.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is hidden on page navigation.
+
+const TEST_URI = `
+  <style type="text/css">
+    body, p, td {
+      background: red;
+    }
+  </style>
+  Test the selector highlighter
+`;
+
+const TEST_URI_2 = "data:text/html,<html><body>test</body></html>";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, "body, p, td");
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+
+  await navigateTo(TEST_URI_2);
+
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(!activeHighlighter, "No selector highlighter is active");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js
new file mode 100644
index 0000000000..a1010131a9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_01.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is created when clicking on a selector
+// icon in the rule view.
+
+const TEST_URI = `
+  <style type="text/css">
+    body, p, td {
+      background: red;
+    }
+  </style>
+  Test the selector highlighter
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(!activeHighlighter, "No selector highlighter is active");
+
+  info("Clicking on a selector icon");
+  const { highlighter, isShown } = await clickSelectorIcon(view, "body, p, td");
+
+  ok(highlighter, "The selector highlighter instance was created");
+  ok(isShown, "The selector highlighter was shown");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js
new file mode 100644
index 0000000000..3d6ca9cbb4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_02.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is shown when clicking on a selector icon
+// in the rule-view
+
+const TEST_URI = `
+  <style type="text/css">
+    body {
+      background: red;
+    }
+    p {
+      color: white;
+    }
+  </style>
+  <p>Testing the selector highlighter</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Clicking once on the body selector highlighter icon");
+  data = await clickSelectorIcon(view, "body");
+  ok(data.isShown, "The highlighter is shown");
+
+  info("Clicking once again on the body selector highlighter icon");
+  data = await clickSelectorIcon(view, "body");
+  ok(!data.isShown, "The highlighter is hidden");
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("p", inspector);
+  data = await clickSelectorIcon(view, "p");
+
+  is(
+    data.nodeFront.tagName,
+    "P",
+    "The right NodeFront is passed to the highlighter"
+  );
+  is(
+    data.options.selector,
+    "p",
+    "The right selector option is passed to the highlighter"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js
new file mode 100644
index 0000000000..1c43e6adad
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_03.js
@@ -0,0 +1,64 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter toggling mechanism works correctly.
+
+const TEST_URI = `
+  <style type="text/css">
+    div {text-decoration: underline;}
+    .node-1 {color: red;}
+    .node-2 {color: green;}
+  </style>
+  <div class="node-1">Node 1</div>
+  <div class="node-2">Node 2</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Select .node-1 and click on the .node-1 selector icon");
+  await selectNode(".node-1", inspector);
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(data.isShown, "The highlighter is shown");
+
+  info("With .node-1 still selected, click again on the .node-1 selector icon");
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(!data.isShown, "The highlighter is now hidden");
+
+  info("With .node-1 still selected, click on the div selector icon");
+  data = await clickSelectorIcon(view, "div");
+  ok(data.isShown, "The highlighter is shown again");
+
+  info("With .node-1 still selected, click again on the .node-1 selector icon");
+  data = await clickSelectorIcon(view, ".node-1");
+  ok(
+    data.isShown,
+    "The highlighter is shown again since the clicked selector was different"
+  );
+
+  info("Selecting .node-2");
+  await selectNode(".node-2", inspector);
+  const activeHighlighter = inspector.highlighters.getActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+  ok(activeHighlighter, "The highlighter is still shown after selection");
+
+  info("With .node-2 selected, click on the div selector icon");
+  data = await clickSelectorIcon(view, "div");
+  ok(
+    data.isShown,
+    "The highlighter is shown still since the selected was different"
+  );
+
+  info("Switching back to .node-1 and clicking on the div selector");
+  await selectNode(".node-1", inspector);
+  data = await clickSelectorIcon(view, "div");
+  ok(
+    !data.isShown,
+    "The highlighter is hidden now that the same selector was clicked"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js
new file mode 100644
index 0000000000..46def76f05
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_04.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is shown when clicking on a selector icon
+// for the 'element {}' rule
+
+const TEST_URI = `
+<p>Testing the selector highlighter for the 'element {}' rule</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("p", inspector);
+  data = await clickSelectorIcon(view, "element");
+  is(
+    data.nodeFront.tagName,
+    "P",
+    "The right NodeFront is passed to the highlighter (1)"
+  );
+  is(
+    data.options.selector,
+    "body > p:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+  ok(data.isShown, "The toggle event says the highlighter is visible");
+
+  data = await clickSelectorIcon(view, "element");
+  ok(!data.isShown, "The toggle event says the highlighter is not visible");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js
new file mode 100644
index 0000000000..e5538c682f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_05.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the selector highlighter is correctly shown when clicking on a
+// inherited element
+
+const TEST_URI = `
+<div style="cursor:pointer">
+  A
+  <div style="cursor:pointer">
+    B<a>Cursor</a>
+  </div>
+</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  let data;
+
+  info("Checking that the right NodeFront reference and options are passed");
+  await selectNode("a", inspector);
+
+  data = await clickSelectorIcon(view, "element");
+  is(
+    data.options.selector,
+    "body > div:nth-child(1) > div:nth-child(1) > a:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+
+  data = await clickSelectorIcon(view, "element", 1);
+  is(
+    data.options.selector,
+    "body > div:nth-child(1) > div:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+
+  data = await clickSelectorIcon(view, "element", 2);
+  is(
+    data.options.selector,
+    "body > div:nth-child(1)",
+    "The right selector option is passed to the highlighter (1)"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js
new file mode 100644
index 0000000000..856ab7a840
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector-highlighter_order.js
@@ -0,0 +1,54 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URI = `
+<style type="text/css">
+  #rule-from-stylesheet {
+    color: red;
+  }
+</style>
+<div id=inline style="cursor:pointer">
+  A
+  <div id=inherited>B</div>
+</div>
+<div id=rule-from-stylesheet>C</a>
+`;
+
+// This test will assert that specific elements of a ruleview rule have been
+// rendered in the expected order. This is specifically done to check the fix
+// for Bug 1664511, where some elements were rendered out of order due to
+// unexpected async processing.
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#inline", inspector);
+  checkRuleViewRuleMarkupOrder(view, "element");
+  await selectNode("#inherited", inspector);
+  checkRuleViewRuleMarkupOrder(view, "element", 1);
+  await selectNode("#rule-from-stylesheet", inspector);
+  checkRuleViewRuleMarkupOrder(view, "#rule-from-stylesheet");
+});
+
+function checkRuleViewRuleMarkupOrder(view, selectorText, index = 0) {
+  const rule = getRuleViewRule(view, selectorText, index);
+
+  // Retrieve the individual elements to assert.
+  const selectorContainer = rule.querySelector(".ruleview-selectorcontainer");
+  const highlighterIcon = rule.querySelector(".js-toggle-selector-highlighter");
+  const ruleOpenBrace = rule.querySelector(".ruleview-ruleopen");
+
+  const parentNode = selectorContainer.parentNode;
+  const childNodes = [...parentNode.childNodes];
+
+  ok(
+    childNodes.indexOf(selectorContainer) < childNodes.indexOf(highlighterIcon),
+    "Selector text is rendered before the highlighter icon"
+  );
+  ok(
+    childNodes.indexOf(highlighterIcon) < childNodes.indexOf(ruleOpenBrace),
+    "Highlighter icon is rendered before the opening brace"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js b/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
new file mode 100644
index 0000000000..1d3620e24b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_selector_highlight.js
@@ -0,0 +1,152 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view selector text is highlighted correctly according
+// to the components of the selector.
+
+const TEST_URI = [
+  "<style type='text/css'>",
+  "  h1 {}",
+  "  h1#testid {}",
+  "  h1 + p {}",
+  '  div[hidden="true"] {}',
+  '  div[title="test"][checked=true] {}',
+  "  p:empty {}",
+  "  p:lang(en) {}",
+  "  .testclass:active {}",
+  "  .testclass:focus {}",
+  "  .testclass:hover {}",
+  "</style>",
+  "<h1>Styled Node</h1>",
+  "<p>Paragraph</p>",
+  '<h1 id="testid">Styled Node</h1>',
+  '<div hidden="true"></div>',
+  '<div title="test" checked="true"></div>',
+  "<p></p>",
+  '<p lang="en">Paragraph<p>',
+  '<div class="testclass">Styled Node</div>',
+].join("\n");
+
+const SELECTOR_ATTRIBUTE = "ruleview-selector-attribute";
+const SELECTOR_ELEMENT = "ruleview-selector";
+const SELECTOR_PSEUDO_CLASS = "ruleview-selector-pseudo-class";
+const SELECTOR_PSEUDO_CLASS_LOCK = "ruleview-selector-pseudo-class-lock";
+
+const TEST_DATA = [
+  {
+    node: "h1",
+    expected: [{ value: "h1", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "h1 + p",
+    expected: [{ value: "h1 + p", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "h1#testid",
+    expected: [{ value: "h1#testid", class: SELECTOR_ELEMENT }],
+  },
+  {
+    node: "div[hidden='true']",
+    expected: [
+      { value: "div", class: SELECTOR_ELEMENT },
+      { value: '[hidden="true"]', class: SELECTOR_ATTRIBUTE },
+    ],
+  },
+  {
+    node: 'div[title="test"][checked="true"]',
+    expected: [
+      { value: "div", class: SELECTOR_ELEMENT },
+      { value: '[title="test"]', class: SELECTOR_ATTRIBUTE },
+      { value: '[checked="true"]', class: SELECTOR_ATTRIBUTE },
+    ],
+  },
+  {
+    node: "p:empty",
+    expected: [
+      { value: "p", class: SELECTOR_ELEMENT },
+      { value: ":empty", class: SELECTOR_PSEUDO_CLASS },
+    ],
+  },
+  {
+    node: "p:lang(en)",
+    expected: [
+      { value: "p", class: SELECTOR_ELEMENT },
+      { value: ":lang(en)", class: SELECTOR_PSEUDO_CLASS },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":active",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":active", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":focus",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":focus", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+  {
+    node: ".testclass",
+    pseudoClass: ":hover",
+    expected: [
+      { value: ".testclass", class: SELECTOR_ELEMENT },
+      { value: ":hover", class: SELECTOR_PSEUDO_CLASS_LOCK },
+    ],
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  for (const { node, pseudoClass, expected } of TEST_DATA) {
+    await selectNode(node, inspector);
+
+    if (pseudoClass) {
+      const onRefresh = inspector.once("rule-view-refreshed");
+      inspector.togglePseudoClass(pseudoClass);
+      await onRefresh;
+    }
+
+    const selectorContainer = getRuleViewRuleEditor(view, 1).selectorText
+      .firstChild;
+
+    if (selectorContainer.children.length === expected.length) {
+      for (let i = 0; i < expected.length; i++) {
+        is(
+          expected[i].value,
+          selectorContainer.children[i].textContent,
+          "Got expected selector value: " +
+            expected[i].value +
+            " == " +
+            selectorContainer.children[i].textContent
+        );
+        is(
+          expected[i].class,
+          selectorContainer.children[i].className,
+          "Got expected class name: " +
+            expected[i].class +
+            " == " +
+            selectorContainer.children[i].className
+        );
+      }
+    } else {
+      for (const selector of selectorContainer.children) {
+        info(
+          "Actual selector components: { value: " +
+            selector.textContent +
+            ", class: " +
+            selector.className +
+            " }\n"
+        );
+      }
+    }
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js
new file mode 100644
index 0000000000..f0d3a17d1e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shadowdom_slot_rules.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that when selecting a slot element, the rule view displays the rules for the
+// corresponding element.
+
+const TEST_URL =
+  `data:text/html;charset=utf-8,` +
+  encodeURIComponent(`
+  <html>
+  <head>
+  <style>
+    #el1 { color: red }
+    #el2 { color: blue }
+  </style>
+  </head>
+  <body>
+  <test-component>
+    <div slot="slot1" id="el1">slot1-1</div>
+    <div slot="slot1" id="el2">slot1-2</div>
+    <div slot="slot1" id="el3">slot1-2</div>
+  </test-component>
+
+  <script>
+    'use strict';
+    customElements.define('test-component', class extends HTMLElement {
+      constructor() {
+        super();
+        let shadowRoot = this.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = \`
+          <style>
+            ::slotted(#el3) {
+              color: green;
+            }
+          </style>
+          <slot name="slot1"></slot>
+        \`;
+      }
+    });
+  </script>
+  </body>
+  </html>
+`);
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+  const { markup } = inspector;
+  const ruleview = inspector.getPanel("ruleview").view;
+
+  // <test-component> is a shadow host.
+  info("Find and expand the test-component shadow DOM host.");
+  const hostFront = await getNodeFront("test-component", inspector);
+
+  await markup.expandNode(hostFront);
+  await waitForMultipleChildrenUpdates(inspector);
+
+  info(
+    "Test that expanding a shadow host shows shadow root and one host child."
+  );
+  const hostContainer = markup.getContainer(hostFront);
+
+  info("Expand the shadow root");
+  const childContainers = hostContainer.getChildContainers();
+  const shadowRootContainer = childContainers[0];
+  await expandContainer(inspector, shadowRootContainer);
+
+  info("Expand the slot");
+  const shadowChildContainers = shadowRootContainer.getChildContainers();
+  // shadowChildContainers[0] is the style node.
+  const slotContainer = shadowChildContainers[1];
+  await expandContainer(inspector, slotContainer);
+
+  const slotChildContainers = slotContainer.getChildContainers();
+  is(slotChildContainers.length, 3, "Expecting 3 slotted children");
+
+  info(
+    "Select slotted node and check that the rule view displays correct content"
+  );
+  await selectNode(slotChildContainers[0].node, inspector);
+  checkRule(ruleview, "#el1", "color", "red");
+
+  info("Select another slotted node and check the rule view");
+  await selectNode(slotChildContainers[1].node, inspector);
+  checkRule(ruleview, "#el2", "color", "blue");
+
+  info("Select the last slotted node and check the rule view");
+  await selectNode(slotChildContainers[2].node, inspector);
+  checkRule(ruleview, "::slotted(#el3)", "color", "green");
+});
+
+function checkRule(ruleview, selector, name, expectedValue) {
+  const rule = getRuleViewRule(ruleview, selector);
+  ok(rule, "ruleview shows the expected rule for slotted " + selector);
+  const value = getRuleViewPropertyValue(ruleview, selector, name);
+  is(
+    value,
+    expectedValue,
+    "ruleview shows the expected value for slotted " + selector
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
new file mode 100644
index 0000000000..a3fd4ccd3e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_01.js
@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and the display of the
+// shapes highlighter.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Checking the initial state of the CSS shape toggle in the rule-view.");
+  ok(shapesToggle, "Shapes highlighter toggle is visible.");
+  ok(
+    !shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shapes highlighter exists in the rule-view."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapesToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    shapesToggle.classList.contains("active"),
+    "Shapes highlighter toggle is active."
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  shapesToggle.click();
+  await onHighlighterHidden;
+
+  info(
+    "Checking the CSS shapes highlighter is not shown and toggle button is not " +
+      "active in the rule-view."
+  );
+  ok(
+    !shapesToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
new file mode 100644
index 0000000000..3d2cd0d9e0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_02.js
@@ -0,0 +1,61 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the swatch to toggle a shapes highlighter does not show up
+// on overwritten properties.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+    div {
+      clip-path: circle(30%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapeToggle = container.querySelector(".ruleview-shapeswatch");
+  const shapeToggleStyle = getComputedStyle(shapeToggle);
+  const overriddenContainer = getRuleViewProperty(
+    view,
+    "div",
+    "clip-path"
+  ).valueSpan;
+  const overriddenShapeToggle = overriddenContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  const overriddenShapeToggleStyle = getComputedStyle(overriddenShapeToggle);
+
+  ok(
+    shapeToggle && overriddenShapeToggle,
+    "Shapes highlighter toggles exist in the DOM."
+  );
+  ok(
+    !shapeToggle.classList.contains("active") &&
+      !overriddenShapeToggle.classList.contains("active"),
+    "Shapes highlighter toggle buttons are not active."
+  );
+
+  isnot(
+    shapeToggleStyle.display,
+    "none",
+    "Shape highlighter toggle is not hidden"
+  );
+  is(
+    overriddenShapeToggleStyle.display,
+    "none",
+    "Overwritten shape highlighter toggle is not visible"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
new file mode 100644
index 0000000000..9af14e3c8b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_03.js
@@ -0,0 +1,128 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with multiple shapes in the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Selecting the first shape container.");
+  await selectNode("#shape1", inspector);
+  let container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shape toggle for the first shape container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shape highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shape highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.highlighters[HIGHLIGHTER_TYPE],
+    "No CSS shape highlighter exists in the rule-view."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for the first shapes container from the " +
+      "rule-view."
+  );
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and toggle button is active in " +
+      "the rule-view."
+  );
+  ok(
+    shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active."
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  info("Selecting the second shapes container.");
+  await selectNode("#shape2", inspector);
+  const firstShapesHighlighterShown = highlighters.shapesHighlighterShown;
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shapes toggle for the second shapes container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "CSS shapes highlighter is still no longer" +
+      "shown due to selecting another node."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for the second shapes container " +
+      "from the rule-view."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created for the second shapes container " +
+      "and toggle button is active in the rule-view."
+  );
+  ok(
+    shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle is active."
+  );
+  ok(
+    highlighters.shapesHighlighterShown != firstShapesHighlighterShown,
+    "shapes highlighter for the second shapes container is shown."
+  );
+
+  info("Selecting the first shapes container.");
+  await selectNode("#shape1", inspector);
+  container = getRuleViewProperty(view, ".shape", "clip-path").valueSpan;
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info(
+    "Checking the state of the CSS shapes toggle for the first shapes container " +
+      "in the rule-view."
+  );
+  ok(shapeToggle, "shapes highlighter toggle is visible.");
+  ok(
+    !shapeToggle.classList.contains("active"),
+    "shapes highlighter toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
new file mode 100644
index 0000000000..0add21381f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_04.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view and modifying the 'clip-path'
+// declaration.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  let shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shape highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+
+  info("Edit the clip-path property to ellipse.");
+  const editor = await focusEditableField(view, container, 30);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "ellipse(30% 20%);";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onDone;
+
+  info(
+    "Check the shape highlighter and shape toggle button are still visible."
+  );
+  shapeToggle = container.querySelector(".ruleview-shapeswatch");
+  ok(shapeToggle, "Shape highlighter toggle is visible.");
+  ok(highlighters.shapesHighlighterShown, "CSS shape highlighter is shown.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
new file mode 100644
index 0000000000..cf5722144f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_05.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the shapes highlighter is hidden when the highlighted shape container is
+// removed from the page.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapeToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shapes highlighter from the rule-view.");
+  const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  info("Remove the #shapes container in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () =>
+    content.document.querySelector("#shape").remove()
+  );
+  await onHighlighterHidden;
+  ok(!highlighters.shapesHighlighterShown, "CSS shapes highlighter is hidden.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
new file mode 100644
index 0000000000..f1395cc1c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_06.js
@@ -0,0 +1,104 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling the shapes highlighter in the rule view with clip-path and shape-outside
+// on the same element.
+
+const TEST_URI = `
+  <style type='text/css'>
+    .shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+      shape-outside: circle(25%);
+    }
+  </style>
+  <div class="shape" id="shape1"></div>
+  <div class="shape" id="shape2"></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Selecting the first shapes container.");
+  await selectNode("#shape1", inspector);
+  let clipPathContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "clip-path"
+  ).valueSpan;
+  let clipPathShapeToggle = clipPathContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  let shapeOutsideContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "shape-outside"
+  ).valueSpan;
+  let shapeOutsideToggle = shapeOutsideContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for clip-path from the rule-view."
+  );
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  clipPathShapeToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is active."
+  );
+  ok(
+    !shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is not active."
+  );
+
+  info(
+    "Toggling ON the CSS shapes highlighter for shape-outside from the rule-view."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  shapeOutsideToggle.click();
+  await onHighlighterShown;
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    !clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is not active."
+  );
+  ok(
+    shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is active."
+  );
+
+  info("Selecting the second shapes container.");
+  await selectNode("#shape2", inspector);
+  clipPathContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "clip-path"
+  ).valueSpan;
+  clipPathShapeToggle = clipPathContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  shapeOutsideContainer = getRuleViewProperty(
+    view,
+    ".shape",
+    "shape-outside"
+  ).valueSpan;
+  shapeOutsideToggle = shapeOutsideContainer.querySelector(
+    ".ruleview-shapeswatch"
+  );
+  ok(
+    !clipPathShapeToggle.classList.contains("active"),
+    "clip-path toggle button is not active."
+  );
+  ok(
+    !shapeOutsideToggle.classList.contains("active"),
+    "shape-outside toggle button is not active."
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
new file mode 100644
index 0000000000..d117d51b91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_07.js
@@ -0,0 +1,99 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test toggling transform mode of the shapes highlighter
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape {
+      width: 800px;
+      height: 800px;
+      clip-path: circle(25%);
+    }
+  </style>
+  <div id="shape"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  info("Select a node with a shape value");
+  await selectNode("#shape", inspector);
+  const container = getRuleViewProperty(view, "#shape", "clip-path").valueSpan;
+  const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+  info("Toggling ON the CSS shapes highlighter with transform mode on.");
+  let onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent(
+    { type: "click", metaKey: true, ctrlKey: true },
+    shapesToggle,
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is on"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(highlighters.state.shapes.options.transformMode, "Transform mode is on.");
+
+  info("Toggling OFF the CSS shapes highlighter from the rule-view.");
+  const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+  EventUtils.sendMouseEvent({ type: "click" }, shapesToggle, view.styleWindow);
+  await onHighlighterHidden;
+
+  info("Checking the CSS shapes highlighter is not shown.");
+  ok(
+    !highlighters.shapesHighlighterShown,
+    "No CSS shapes highlighter is shown."
+  );
+
+  info("Toggling ON the CSS shapes highlighter with transform mode off.");
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent({ type: "click" }, shapesToggle, view.styleWindow);
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is off"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(
+    !highlighters.state.shapes.options.transformMode,
+    "Transform mode is off."
+  );
+
+  info(
+    "Clicking shapes toggle to turn on transform mode while highlighter is shown."
+  );
+  onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+  EventUtils.sendMouseEvent(
+    { type: "click", metaKey: true, ctrlKey: true },
+    shapesToggle,
+    view.styleWindow
+  );
+  await onHighlighterShown;
+
+  info(
+    "Checking the CSS shapes highlighter is created and transform mode is on"
+  );
+  ok(
+    inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+    "CSS shapes highlighter created in the rule-view."
+  );
+  ok(highlighters.shapesHighlighterShown, "CSS shapes highlighter is shown.");
+  ok(highlighters.state.shapes.options.transformMode, "Transform mode is on.");
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
new file mode 100644
index 0000000000..46afb2ac57
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shapes-toggle_basic-shapes-default.js
@@ -0,0 +1,102 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that the shapes highlighter can be toggled for basic shapes with default values.
+
+const TEST_URI = `
+  <style type='text/css'>
+    #shape-circle {
+      clip-path: circle();
+    }
+    #shape-ellipse {
+      clip-path: ellipse();
+    }
+    #shape-inset {
+      clip-path: inset();
+    }
+    #shape-polygon {
+      clip-path: polygon();
+    }
+  </style>
+  <div id="shape-circle"></div>
+  <div id="shape-ellipse"></div>
+  <div id="shape-inset"></div>
+  <div id="shape-polygon"></div>
+`;
+
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  const highlighters = view.highlighters;
+
+  const selectors = new Map([
+    ["#shape-circle", true],
+    ["#shape-ellipse", true],
+    // Basic shapes inset() and polygon() expect explicit coordinates.
+    // They don't have default values and are invalid without coordinates.
+    ["#shape-inset", false],
+    ["#shape-polygon", false],
+  ]);
+
+  for (const [selector, expectShapesToogle] of selectors) {
+    await selectNode(selector, inspector);
+    const container = getRuleViewProperty(
+      view,
+      selector,
+      "clip-path"
+    ).valueSpan;
+    const shapesToggle = container.querySelector(".ruleview-shapeswatch");
+
+    if (expectShapesToogle) {
+      ok(
+        shapesToggle,
+        `Shapes highlighter toggle expected and found for ${selector}`
+      );
+    } else {
+      is(
+        shapesToggle,
+        null,
+        `Shapes highlighter toggle not expected and not found for ${selector}`
+      );
+
+      // Skip the rest of the test.
+      continue;
+    }
+
+    info(`Toggling ON the shapes highlighter for ${selector}`);
+    const onHighlighterShown = highlighters.once("shapes-highlighter-shown");
+    shapesToggle.click();
+    await onHighlighterShown;
+
+    ok(
+      shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle active for ${selector}`
+    );
+    ok(
+      inspector.inspectorFront.getKnownHighlighter(HIGHLIGHTER_TYPE).actorID,
+      `Shapes highlighter instance created for ${selector}`
+    );
+    ok(
+      highlighters.shapesHighlighterShown,
+      `Shapes highlighter shown for ${selector}`
+    );
+
+    info(`Toggling OFF the shapes highlighter for ${selector}`);
+    const onHighlighterHidden = highlighters.once("shapes-highlighter-hidden");
+    shapesToggle.click();
+    await onHighlighterHidden;
+
+    ok(
+      !shapesToggle.classList.contains("active"),
+      `Shapes highlighter toggle no longer active for ${selector}`
+    );
+    ok(
+      !highlighters.shapesHighlighterShown,
+      `Shapes highlighter no longer shown for ${selector}`
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js
new file mode 100644
index 0000000000..2ad037d443
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists.js
@@ -0,0 +1,85 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view shorthand overridden list works correctly,
+// can be shown and hidden correctly, and contain the right subproperties.
+
+var TEST_URI = `
+  <style type="text/css">
+    div {
+      margin: 0px 1px 2px 3px;
+      top: 0px;
+    }
+    #testid {
+        margin-left: 10px;
+        margin-right: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testComputedList(inspector, view);
+});
+
+function testComputedList(inspector, view) {
+  const rule = getRuleViewRuleEditor(view, 2).rule;
+  const propEditor = rule.textProps[0].editor;
+  const expander = propEditor.expander;
+  const overriddenItems = propEditor.shorthandOverridden.children;
+  const propNames = ["margin-right", "margin-left"];
+
+  ok(!expander.hasAttribute("open"), "margin computed list is closed.");
+  ok(
+    !propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be open."
+  );
+
+  is(
+    overriddenItems.length,
+    propNames.length,
+    "There should be 2 overridden shorthand value."
+  );
+  for (let i = 0; i < propNames.length; i++) {
+    const overriddenItem = overriddenItems[i].querySelector(
+      ".ruleview-propertyname"
+    );
+    is(
+      overriddenItem.textContent,
+      propNames[i],
+      "The overridden item #" + i + " should be " + propNames[i]
+    );
+  }
+
+  info("Opening the computed list of margin property.");
+  expander.click();
+  ok(expander.hasAttribute("open"), "margin computed list is open.");
+  ok(
+    propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be hidden."
+  );
+
+  info("Closing the computed list of margin property.");
+  expander.click();
+  ok(!expander.hasAttribute("open"), "margin computed list is closed.");
+  ok(
+    !propEditor.shorthandOverridden.hasAttribute("hidden"),
+    "The shorthandOverridden list should be open."
+  );
+
+  for (let i = 0; i < propNames.length; i++) {
+    const overriddenItem = overriddenItems[i].querySelector(
+      ".ruleview-propertyname"
+    );
+    is(
+      overriddenItem.textContent,
+      propNames[i],
+      "The overridden item #" + i + " should still be " + propNames[i]
+    );
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js
new file mode 100644
index 0000000000..f33fd57148
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_shorthand-overridden-lists_01.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that overridden longhand properties aren't shown when the shorthand's value
+// contains a CSS variable. When this happens, the longhand values can't be computed
+// properly and are hidden. So the overridden longhand that are normally auto-expanded
+// should be hidden too.
+
+var TEST_URI = `
+  <style type="text/css">
+    div {
+      --color: red;
+      background: var(--color);
+      background-repeat: no-repeat;
+    }
+  </style>
+  <div>Inspect me</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const shorthandOverridden = rule.textProps[1].editor.shorthandOverridden;
+
+  is(
+    shorthandOverridden.children.length,
+    0,
+    "The shorthandOverridden list is empty"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
new file mode 100644
index 0000000000..d1c51acedc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter-computed-list_01.js
@@ -0,0 +1,208 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter and clear button works properly
+// in the computed list
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      margin: 4px 0px 10px 44px;
+    }
+    .testclass {
+      background-color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property names",
+    search: "`margin-left`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property values",
+    search: "`0px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: true,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for parsed property names",
+    search: "`margin-left`:",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: false,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: true,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for parsed property values",
+    search: ":`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for property line input",
+    search: "`margin-top`:`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for a parsed strict property name and non-strict " +
+      "property value",
+    search: "`margin-top`:4px",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly in the " +
+      "computed list for a parsed strict property value and non-strict " +
+      "property name",
+    search: "i:`4px`",
+    isExpanderOpen: true,
+    isFilterOpen: true,
+    isMarginHighlighted: false,
+    isMarginTopHighlighted: true,
+    isMarginRightHighlighted: false,
+    isMarginBottomHighlighted: false,
+    isMarginLeftHighlighted: false,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  is(
+    !!textPropEditor.expander.getAttribute("open"),
+    data.isExpanderOpen,
+    "Got correct expander state."
+  );
+  is(
+    computed.hasAttribute("filter-open"),
+    data.isFilterOpen,
+    "Got correct expanded state for margin computed list."
+  );
+  is(
+    textPropEditor.container.classList.contains("ruleview-highlight"),
+    data.isMarginHighlighted,
+    "Got correct highlight for margin text property."
+  );
+
+  is(
+    computed.children[0].classList.contains("ruleview-highlight"),
+    data.isMarginTopHighlighted,
+    "Got correct highlight for margin-top computed property."
+  );
+  is(
+    computed.children[1].classList.contains("ruleview-highlight"),
+    data.isMarginRightHighlighted,
+    "Got correct highlight for margin-right computed property."
+  );
+  is(
+    computed.children[2].classList.contains("ruleview-highlight"),
+    data.isMarginBottomHighlighted,
+    "Got correct highlight for margin-bottom computed property."
+  );
+  is(
+    computed.children[3].classList.contains("ruleview-highlight"),
+    data.isMarginLeftHighlighted,
+    "Got correct highlight for margin-left computed property."
+  );
+}
+
+async function clearSearchAndCheckRules(view) {
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const textPropEditor = rule.textProps[0].editor;
+  const computed = textPropEditor.computed;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared");
+  ok(
+    !view.styleDocument.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted"
+  );
+
+  ok(!textPropEditor.expander.getAttribute("open"), "Expander is closed.");
+  ok(!computed.hasAttribute("filter-open"), "margin computed list is closed.");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
new file mode 100644
index 0000000000..e70f02e37e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_01.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for property
+// names.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      width: 2%;
+      color: red;
+    }
+    .testclass {
+      width: 22%;
+      background-color: #00F;
+    }
+  </style>
+  <h1 id="testid" class="testclass">Styled Node</h1>
+`;
+
+const TEST_DATA = [
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "names",
+    search: "`color`",
+    ruleCount: 2,
+    propertyIndex: 1,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "values",
+    search: "`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for parsed " +
+      "property names",
+    search: "`color`:",
+    ruleCount: 2,
+    propertyIndex: 1,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for parsed " +
+      "property values",
+    search: ":`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the strict search filter works properly for property " +
+      "line input",
+    search: "`width`:`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for a parsed strict " +
+      "property name and non-strict property value.",
+    search: "`width`:2%",
+    ruleCount: 3,
+    propertyIndex: 0,
+  },
+  {
+    desc:
+      "Tests that the search filter works properly for a parsed strict " +
+      "property value and non-strict property name.",
+    search: "i:`2%`",
+    ruleCount: 2,
+    propertyIndex: 0,
+  },
+];
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  for (const data of TEST_DATA) {
+    info(data.desc);
+    await setSearchFilter(view, data.search);
+    await checkRules(view, data);
+    await clearSearchAndCheckRules(view);
+  }
+}
+
+function checkRules(view, data) {
+  info("Check that the correct rules are visible");
+  is(
+    view.element.children.length,
+    data.ruleCount,
+    "Should have " + data.ruleCount + " rules."
+  );
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  let rule = getRuleViewRuleEditor(view, 1).rule;
+
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    rule.textProps[data.propertyIndex].editor.container.classList.contains(
+      "ruleview-highlight"
+    ),
+    "Text property is correctly highlighted."
+  );
+
+  if (data.ruleCount > 2) {
+    rule = getRuleViewRuleEditor(view, 2).rule;
+    is(rule.selectorText, ".testclass", "Third rule is .testclass.");
+    ok(
+      rule.textProps[data.propertyIndex].editor.container.classList.contains(
+        "ruleview-highlight"
+      ),
+      "Text property is correctly highlighted."
+    );
+  }
+}
+
+async function clearSearchAndCheckRules(view) {
+  const doc = view.styleDocument;
+  const win = view.styleWindow;
+  const searchField = view.searchField;
+  const searchClearButton = view.searchClearButton;
+
+  info("Clearing the search filter");
+  EventUtils.synthesizeMouseAtCenter(searchClearButton, {}, win);
+  await view.inspector.once("ruleview-filtered");
+
+  info("Check the search filter is cleared and no rules are highlighted");
+  is(view.element.children.length, 3, "Should have 3 rules.");
+  ok(!searchField.value, "Search filter is cleared.");
+  ok(
+    !doc.querySelectorAll(".ruleview-highlight").length,
+    "No rules are higlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js
new file mode 100644
index 0000000000..a1c3824adf
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_02.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for stylesheet
+// source.
+
+const SEARCH = "`doc_urls_clickable.css:1`";
+const TEST_URI = URL_ROOT + "doc_urls_clickable.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode(".relative1", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const source = rule.textProps[0].editor.ruleEditor.source;
+
+  is(rule.selectorText, ".relative1", "Second rule is .relative1.");
+  ok(
+    source.classList.contains("ruleview-highlight"),
+    "stylesheet source is correctly highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js
new file mode 100644
index 0000000000..3bd34fd2c4
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_strict-search-filter_03.js
@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view strict search filter works properly for selector
+// values.
+
+const SEARCH = "`.testclass`";
+
+const TEST_URI = `
+  <style type="text/css">
+    .testclass1 {
+      background-color: #00F;
+    }
+    .testclass {
+      color: red;
+    }
+  </style>
+  <h1 id="testid" class="testclass testclass1">Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await testAddTextInFilter(inspector, view);
+});
+
+async function testAddTextInFilter(inspector, view) {
+  await setSearchFilter(view, SEARCH);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(
+    getRuleViewRuleEditor(view, 0).rule.selectorText,
+    "element",
+    "First rule is inline element."
+  );
+
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+
+  is(ruleEditor.rule.selectorText, ".testclass", "Second rule is .testclass.");
+  ok(
+    ruleEditor.selectorText.children[0].classList.contains(
+      "ruleview-highlight"
+    ),
+    ".testclass selector is highlighted."
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
new file mode 100644
index 0000000000..a3c59bfa79
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_style-editor-link.js
@@ -0,0 +1,251 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test the links from the rule-view to the styleeditor
+
+const STYLESHEET_DATA_URL_CONTENTS = `#first {
+color: blue
+}`;
+const STYLESHEET_DATA_URL = `data:text/css,${encodeURIComponent(
+  STYLESHEET_DATA_URL_CONTENTS
+)}`;
+
+const EXTERNAL_STYLESHEET_FILE_NAME = "doc_style_editor_link.css";
+const EXTERNAL_STYLESHEET_URL = URL_ROOT_SSL + EXTERNAL_STYLESHEET_FILE_NAME;
+
+const DOCUMENT_HTML = encodeURIComponent(`
+  <html>
+    <head>
+      <title>Rule view style editor link test</title>
+      <style type="text/css">
+        html { color: #000000; }
+        div { font-variant: small-caps; color: #000000; }
+        .nomatches {color: #ff0000;}
+      </style>
+      <style>
+        div { font-weight: bold; }
+      </style>
+      <link rel="stylesheet" type="text/css" href="${STYLESHEET_DATA_URL}">
+      <link rel="stylesheet" type="text/css" href="${EXTERNAL_STYLESHEET_URL}">
+    </head>
+    <body>
+      <div id="first" style="margin: 10em;font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
+        <h1>Some header text</h1>
+        <p id="salutation" style="font-size: 12pt">hi.</p>
+        <p id="body" style="font-size: 12pt">I am a test-case. This text exists
+        solely to provide some things to
+        <span style="color: yellow" class="highlight">
+        highlight</span> and <span style="font-weight: bold">count</span>
+        style list-items in the box at right. If you are reading this,
+        you should go do something else instead. Maybe read a book. Or better
+        yet, write some test-cases for another bit of code.
+        <span style="font-style: italic">some text</span></p>
+        <p id="closing">more text</p>
+        <p>even more text</p>
+      </div>
+    </body>
+  </html>
+`);
+
+const DOCUMENT_DATA_URL = "data:text/html;charset=utf-8," + DOCUMENT_HTML;
+const EXAMPLE_ORG_DOCUMENT_URL =
+  "https://example.org/document-builder.sjs?html=" + DOCUMENT_HTML;
+
+add_task(async function () {
+  await addTab(DOCUMENT_DATA_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  await testAllStylesheets(inspector, view, toolbox);
+
+  info("Navigate to the example.org document");
+  await navigateTo(EXAMPLE_ORG_DOCUMENT_URL);
+  await testAllStylesheets(inspector, view, toolbox);
+});
+
+add_task(async function () {
+  info("Check that link to the style editor works after tab reload");
+  await addTab(EXAMPLE_ORG_DOCUMENT_URL);
+  const { toolbox, inspector, view } = await openRuleView();
+
+  info("Reload the example.org document");
+  // Use navigateTo as it waits for the inspector to be ready.
+  await navigateTo(EXAMPLE_ORG_DOCUMENT_URL);
+  await testAllStylesheets(inspector, view, toolbox);
+});
+
+async function testAllStylesheets(inspector, view, toolbox) {
+  await selectNode("div", inspector);
+  await testRuleViewLinkLabel(view);
+  await testDisabledStyleEditor(view, toolbox);
+  await testFirstInlineStyleSheet(view, toolbox);
+  await testSecondInlineStyleSheet(view, toolbox);
+  await testExternalStyleSheet(view, toolbox);
+
+  info("Switch back to the inspector panel");
+  await toolbox.selectTool("inspector");
+  await selectNode("body", inspector);
+}
+
+async function testFirstInlineStyleSheet(view, toolbox) {
+  info("Testing inline stylesheet");
+
+  info("Listening for toolbox switch to the styleeditor");
+  const onSwitch = waitForStyleEditor(toolbox);
+
+  info("Clicking an inline stylesheet");
+  clickLinkByIndex(view, 4);
+  const editor = await onSwitch;
+
+  ok(true, "Switched to the style-editor panel in the toolbox");
+
+  await validateStyleEditorSheet(toolbox, editor, 0);
+}
+
+async function testSecondInlineStyleSheet(view, toolbox) {
+  info("Testing second inline stylesheet");
+
+  const styleEditorPanel = toolbox.getCurrentPanel();
+  const onEditorSelected = styleEditorPanel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+  const onToolSelected = toolbox.once("styleeditor-selected");
+
+  info("Clicking on second inline stylesheet link");
+  clickLinkByIndex(view, 3);
+
+  info("Wait for the stylesheet editor to be selected");
+  const editor = await onEditorSelected;
+  await onToolSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(toolbox, editor, 1);
+}
+
+async function testExternalStyleSheet(view, toolbox) {
+  info("Testing external stylesheet");
+  const styleEditorPanel = toolbox.getCurrentPanel();
+  const onEditorSelected = styleEditorPanel.UI.once("editor-selected");
+
+  info("Switching back to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+  const onToolSelected = toolbox.once("styleeditor-selected");
+
+  info("Clicking on an external stylesheet link");
+  clickLinkByIndex(view, 1);
+
+  info("Wait for the stylesheet editor to be selected");
+  const editor = await onEditorSelected;
+  await onToolSelected;
+
+  is(
+    toolbox.currentToolId,
+    "styleeditor",
+    "The style editor is selected again"
+  );
+  await validateStyleEditorSheet(toolbox, editor, 2);
+}
+
+async function validateStyleEditorSheet(toolbox, editor, expectedSheetIndex) {
+  info("validating style editor stylesheet");
+  is(
+    editor.styleSheet.styleSheetIndex,
+    expectedSheetIndex,
+    "loaded stylesheet index matches document stylesheet"
+  );
+
+  const href = editor.styleSheet.href || editor.styleSheet.nodeHref;
+
+  const expectedHref = await SpecialPowers.spawn(
+    gBrowser.selectedBrowser,
+    [expectedSheetIndex],
+    _expectedSheetIndex => {
+      return (
+        content.document.styleSheets[_expectedSheetIndex].href ||
+        content.document.location.href
+      );
+    }
+  );
+
+  is(href, expectedHref, "loaded stylesheet href matches document stylesheet");
+}
+
+async function testDisabledStyleEditor(view, toolbox) {
+  info("Testing with the style editor disabled");
+
+  info("Switching to the inspector panel in the toolbox");
+  await toolbox.selectTool("inspector");
+
+  info("Disabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", false);
+  gDevTools.emit("tool-unregistered", "styleeditor");
+
+  info("Clicking on a link");
+  testUnselectableRuleViewLink(view, 1);
+  clickLinkByIndex(view, 1);
+  // Wait for a bit just to make sure the click didn't had an impact
+  await wait(2000);
+
+  is(toolbox.currentToolId, "inspector", "The click should have no effect");
+
+  info("Enabling the style editor");
+  Services.prefs.setBoolPref("devtools.styleeditor.enabled", true);
+  gDevTools.emit("tool-registered", "styleeditor");
+
+  Services.prefs.clearUserPref("devtools.styleeditor.enabled");
+}
+
+async function testRuleViewLinkLabel(view) {
+  info("Checking the data URL link label");
+  let link = getRuleViewLinkByIndex(view, 1);
+  let labelElem = link.querySelector(".ruleview-rule-source-label");
+  let value = labelElem.textContent;
+  let tooltipText = labelElem.getAttribute("title");
+
+  is(
+    value,
+    encodeURIComponent(STYLESHEET_DATA_URL_CONTENTS) + ":1",
+    "Rule view data URL stylesheet display value matches contents"
+  );
+  is(
+    tooltipText,
+    STYLESHEET_DATA_URL + ":1",
+    "Rule view data URL stylesheet tooltip text matches the full URI path"
+  );
+
+  info("Checking the external link label");
+  link = getRuleViewLinkByIndex(view, 2);
+  labelElem = link.querySelector(".ruleview-rule-source-label");
+  value = labelElem.textContent;
+  tooltipText = labelElem.getAttribute("title");
+
+  is(
+    value,
+    `${EXTERNAL_STYLESHEET_FILE_NAME}:1`,
+    "Rule view external stylesheet display value matches filename and line number"
+  );
+  is(
+    tooltipText,
+    `${EXTERNAL_STYLESHEET_URL}:1`,
+    "Rule view external stylesheet tooltip text matches the full URI path"
+  );
+}
+
+function testUnselectableRuleViewLink(view, index) {
+  const link = getRuleViewLinkByIndex(view, index);
+  const unselectable = link.hasAttribute("unselectable");
+
+  ok(unselectable, "Rule view is unselectable");
+}
+
+function clickLinkByIndex(view, index) {
+  const link = getRuleViewLinkByIndex(view, index);
+  link.scrollIntoView();
+  link.click();
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js b/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js
new file mode 100644
index 0000000000..bac63a9572
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_update_mask_image_cors.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/webconsole/test/browser/shared-head.js",
+  this
+);
+
+// The mask image is served from example.com while the test page is served from
+// example.org.
+const MASK_SRC = URL_ROOT_COM_SSL + "square_svg.sjs";
+const STYLE_ATTRIBUTE = `mask-image: url("${MASK_SRC}"); width:10px; height: 10px; background: red;`;
+const TEST_URL = `https://example.org/document-builder.sjs?html=<div style='${STYLE_ATTRIBUTE}'>`;
+
+// Used to assert screenshot colors.
+const RED = { r: 255, g: 0, b: 0 };
+
+add_task(async function () {
+  await addTab(TEST_URL);
+  const { inspector, toolbox, view } = await openRuleView();
+
+  info("Open the splitconsole to check for CORS messages");
+  await toolbox.toggleSplitConsole();
+
+  await selectNode("div", inspector);
+
+  info("Take a node screenshot, mask is applied, should be red");
+  const beforeScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(beforeScreenshot, 10, 10, RED);
+
+  info("Update a property from the rule view");
+  const heightProperty = getTextProperty(view, 0, { height: "10px" });
+  await setProperty(view, heightProperty, "11px");
+
+  info("Wait until the style has been applied in the content page");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    await ContentTaskUtils.waitForCondition(
+      () => content.document.querySelector("div").style.height == "11px"
+    );
+  });
+
+  // Wait for some time in case the image needs to be reloaded, and to allow
+  // error messages (if any) to be rendered.
+  await wait(1000);
+
+  info("Take another screenshot, mask should still apply, should be red");
+  const afterScreenshot = await takeNodeScreenshot(inspector);
+  await assertSingleColorScreenshotImage(afterScreenshot, 10, 11, RED);
+
+  const hud = toolbox.getPanel("webconsole").hud;
+  ok(
+    !findMessageByType(hud, "Cross-Origin Request Blocked", ".error"),
+    "No message was logged about a CORS issue"
+  );
+
+  info("Close split console");
+  await toolbox.toggleSplitConsole();
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js b/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js
new file mode 100644
index 0000000000..0fe12dc859
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_url-click-opens-new-tab.js
@@ -0,0 +1,35 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Bug 1326626 - Tests that clicking a background url opens a new tab
+// even when the devtools is opened in a separate window.
+
+const TEST_URL =
+  "data:text/html,<style>body{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGD4DwABBAEAfbLI3wAAAABJRU5ErkJggg==) no-repeat}";
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL, "window");
+  const view = selectRuleView(inspector);
+
+  await selectNode("body", inspector);
+
+  const anchor = view.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(anchor, "Link exists for style tag node");
+
+  const onTabOpened = waitForTab();
+  anchor.click();
+
+  info("Wait for the image to open in a new tab");
+  const tab = await onTabOpened;
+  ok(tab, "A new tab opened");
+
+  is(
+    tab.linkedBrowser.currentURI.spec,
+    anchor.href,
+    "The new tab has the expected URL"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js b/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js
new file mode 100644
index 0000000000..1d9574d73f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_urls-clickable.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests to make sure that URLs are clickable in the rule view
+
+const TEST_URI = URL_ROOT_SSL + "doc_urls_clickable.html";
+const TEST_IMAGE = URL_ROOT_SSL + "doc_test_image.png";
+const BASE_64_URL =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAA" +
+  "FCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAA" +
+  "BJRU5ErkJggg==";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNodes(inspector, view);
+});
+
+async function selectNodes(inspector, ruleView) {
+  const relative1 = ".relative1";
+  const relative2 = ".relative2";
+  const absolute = ".absolute";
+  const inline = ".inline";
+  const base64 = ".base64";
+  const noimage = ".noimage";
+  const inlineresolved = ".inline-resolved";
+
+  await selectNode(relative1, inspector);
+  let relativeLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(relativeLink, "Link exists for relative1 node");
+  is(relativeLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(relative2, inspector);
+  relativeLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(relativeLink, "Link exists for relative2 node");
+  is(relativeLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(absolute, inspector);
+  const absoluteLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(absoluteLink, "Link exists for absolute node");
+  is(absoluteLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(inline, inspector);
+  const inlineLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(inlineLink, "Link exists for inline node");
+  is(inlineLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(base64, inspector);
+  const base64Link = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(base64Link, "Link exists for base64 node");
+  is(base64Link.getAttribute("href"), BASE_64_URL, "href matches");
+
+  await selectNode(inlineresolved, inspector);
+  const inlineResolvedLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(inlineResolvedLink, "Link exists for style tag node");
+  is(inlineResolvedLink.getAttribute("href"), TEST_IMAGE, "href matches");
+
+  await selectNode(noimage, inspector);
+  const noimageLink = ruleView.styleDocument.querySelector(
+    ".ruleview-propertyvaluecontainer a"
+  );
+  ok(!noimageLink, "There is no link for the node with no background image");
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js
new file mode 100644
index 0000000000..07a2b6abb8
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles-uneditable.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that user agent styles are never editable via
+// the UI
+
+const TEST_URI = `
+  <blockquote type=cite>
+   <pre _moz_quote=true>
+     inspect <a href='foo' style='color:orange'>user agent</a> styles
+   </pre>
+  </blockquote>
+`;
+
+var PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+
+add_task(async function () {
+  info("Starting the test with the pref set to true before toolbox is opened");
+  Services.prefs.setBoolPref(PREF_UA_STYLES, true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await userAgentStylesUneditable(inspector, view);
+
+  info("Resetting " + PREF_UA_STYLES);
+  Services.prefs.clearUserPref(PREF_UA_STYLES);
+});
+
+async function userAgentStylesUneditable(inspector, view) {
+  info("Making sure that UI is not editable for user agent styles");
+
+  await selectNode("a", inspector);
+  const uaRules = view._elementStyle.rules.filter(
+    rule => !rule.editor.isEditable
+  );
+
+  for (const rule of uaRules) {
+    ok(
+      rule.editor.element.hasAttribute("uneditable"),
+      "UA rules have uneditable attribute"
+    );
+
+    const firstProp = rule.textProps.filter(p => !p.invisible)[0];
+
+    ok(!firstProp.editor.nameSpan._editable, "nameSpan is not editable");
+    ok(!firstProp.editor.valueSpan._editable, "valueSpan is not editable");
+    ok(!rule.editor.closeBrace._editable, "closeBrace is not editable");
+
+    const colorswatch = rule.editor.element.querySelector(
+      ".ruleview-colorswatch"
+    );
+    if (colorswatch) {
+      ok(
+        !view.tooltips.getTooltip("colorPicker").swatches.has(colorswatch),
+        "The swatch is not editable"
+      );
+    }
+  }
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
new file mode 100644
index 0000000000..6692badeda
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-agent-styles.js
@@ -0,0 +1,216 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Check that user agent styles are inspectable via rule view if
+// it is preffed on.
+
+var PREF_UA_STYLES = "devtools.inspector.showUserAgentStyles";
+const { PrefObserver } = require("resource://devtools/client/shared/prefs.js");
+
+const TEST_URI = URL_ROOT + "doc_author-sheet.html";
+
+const TEST_DATA = [
+  {
+    selector: "blockquote",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "pre",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=range]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=number]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=color]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "input[type=text]",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  {
+    selector: "progress",
+    numUserRules: 1,
+    numUARules: 0,
+  },
+  // Note that some tests below assume that the "a" selector is the
+  // last test in TEST_DATA.
+  {
+    selector: "a",
+    numUserRules: 3,
+    numUARules: 0,
+  },
+];
+
+add_task(async function () {
+  // Bug 1517210: GC heuristics are broken for this test, so that the test ends up
+  // running out of memory if we don't force to reduce the GC side before/after the test.
+  Cu.forceShrinkingGC();
+
+  requestLongerTimeout(4);
+
+  info("Starting the test with the pref set to true before toolbox is opened");
+  await setUserAgentStylesPref(true);
+
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  info("Making sure that UA styles are visible on initial load");
+  await userAgentStylesVisible(inspector, view);
+
+  info("Making sure that setting the pref to false hides UA styles");
+  await setUserAgentStylesPref(false);
+  await userAgentStylesNotVisible(inspector, view);
+
+  info("Making sure that resetting the pref to true shows UA styles again");
+  await setUserAgentStylesPref(true);
+  await userAgentStylesVisible(inspector, view);
+
+  info("Resetting " + PREF_UA_STYLES);
+  Services.prefs.clearUserPref(PREF_UA_STYLES);
+
+  // Bug 1517210: GC heuristics are broken for this test, so that the test ends up
+  // running out of memory if we don't force to reduce the GC side before/after the test.
+  Cu.forceShrinkingGC();
+});
+
+async function setUserAgentStylesPref(val) {
+  info("Setting the pref " + PREF_UA_STYLES + " to: " + val);
+
+  // Reset the pref and wait for PrefObserver to callback so UI
+  // has a chance to get updated.
+  const prefObserver = new PrefObserver("devtools.");
+  const oncePrefChanged = new Promise(resolve => {
+    prefObserver.on(PREF_UA_STYLES, onPrefChanged);
+
+    function onPrefChanged() {
+      prefObserver.off(PREF_UA_STYLES, onPrefChanged);
+      resolve();
+    }
+  });
+  Services.prefs.setBoolPref(PREF_UA_STYLES, val);
+  await oncePrefChanged;
+}
+
+async function userAgentStylesVisible(inspector, view) {
+  info("Making sure that user agent styles are currently visible");
+
+  let userRules;
+  let uaRules;
+
+  for (const data of TEST_DATA) {
+    await selectNode(data.selector, inspector);
+    await compareAppliedStylesWithUI(inspector, view, "ua");
+
+    userRules = view._elementStyle.rules.filter(rule => rule.editor.isEditable);
+    uaRules = view._elementStyle.rules.filter(rule => !rule.editor.isEditable);
+    is(userRules.length, data.numUserRules, "Correct number of user rules");
+    ok(uaRules.length > data.numUARules, "Has UA rules");
+  }
+
+  ok(
+    userRules.some(rule => rule.matchedSelectors.length === 1),
+    "There is an inline style for element in user styles"
+  );
+
+  // These tests rely on the "a" selector being the last test in
+  // TEST_DATA.
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedSelectors.includes(":any-link");
+    }),
+    "There is a rule for :any-link"
+  );
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedSelectors.includes(":link");
+    }),
+    "There is a rule for :link"
+  );
+  ok(
+    uaRules.some(rule => {
+      return rule.matchedSelectors.length === 1;
+    }),
+    "Inline styles for ua styles"
+  );
+}
+
+async function userAgentStylesNotVisible(inspector, view) {
+  info("Making sure that user agent styles are not currently visible");
+
+  let userRules;
+  let uaRules;
+
+  for (const data of TEST_DATA) {
+    await selectNode(data.selector, inspector);
+    await compareAppliedStylesWithUI(inspector, view);
+
+    userRules = view._elementStyle.rules.filter(rule => rule.editor.isEditable);
+    uaRules = view._elementStyle.rules.filter(rule => !rule.editor.isEditable);
+    is(userRules.length, data.numUserRules, "Correct number of user rules");
+    is(uaRules.length, data.numUARules, "No UA rules");
+  }
+}
+
+async function compareAppliedStylesWithUI(inspector, view, filter) {
+  info("Making sure that UI is consistent with pageStyle.getApplied");
+
+  const pageStyle = inspector.selection.nodeFront.inspectorFront.pageStyle;
+  let entries = await pageStyle.getApplied(inspector.selection.nodeFront, {
+    inherited: true,
+    matchedSelectors: true,
+    filter,
+  });
+
+  // We may see multiple entries that map to a given rule; filter the
+  // duplicates here to match what the UI does.
+  const entryMap = new Map();
+  for (const entry of entries) {
+    entryMap.set(entry.rule, entry);
+  }
+  entries = [...entryMap.values()];
+
+  const elementStyle = view._elementStyle;
+  is(
+    elementStyle.rules.length,
+    entries.length,
+    "Should have correct number of rules (" + entries.length + ")"
+  );
+
+  entries = entries.sort((a, b) => {
+    return (a.pseudoElement || "z") > (b.pseudoElement || "z");
+  });
+
+  entries.forEach((entry, i) => {
+    const elementStyleRule = elementStyle.rules[i];
+    is(
+      !!elementStyleRule.inherited,
+      !!entry.inherited,
+      "Same inherited (" + entry.inherited + ")"
+    );
+    is(
+      elementStyleRule.isSystem,
+      entry.isSystem,
+      "Same isSystem (" + entry.isSystem + ")"
+    );
+    is(
+      elementStyleRule.editor.isEditable,
+      !entry.isSystem,
+      "Editor isEditable opposite of UA (" + entry.isSystem + ")"
+    );
+  });
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js b/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js
new file mode 100644
index 0000000000..649547e514
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_user-property-reset.js
@@ -0,0 +1,117 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that user set style properties can be changed from the markup-view and
+// don't survive page reload
+
+const TEST_URI = `
+  <p id='id1' style='width:200px;'>element 1</p>
+  <p id='id2' style='width:100px;'>element 2</p>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("#id1", inspector);
+  await modifyRuleViewWidth("300px", view, inspector);
+  await assertRuleAndMarkupViewWidth("id1", "300px", view, inspector);
+
+  await selectNode("#id2", inspector);
+  await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
+  await modifyRuleViewWidth("50px", view, inspector);
+  await assertRuleAndMarkupViewWidth("id2", "50px", view, inspector);
+
+  is(
+    view.store.userProperties.map.size,
+    2,
+    "The modifications are stored as expected"
+  );
+
+  await reloadBrowser();
+
+  is(
+    view.store.userProperties.map.size,
+    0,
+    "Properties storing user modifications is cleared after a reload"
+  );
+
+  await selectNode("#id1", inspector);
+  await assertRuleAndMarkupViewWidth("id1", "200px", view, inspector);
+  await selectNode("#id2", inspector);
+  await assertRuleAndMarkupViewWidth("id2", "100px", view, inspector);
+});
+
+function getStyleRule(ruleView) {
+  return ruleView.styleDocument.querySelector(".ruleview-rule");
+}
+
+async function modifyRuleViewWidth(value, ruleView, inspector) {
+  info("Getting the property value element");
+  const valueSpan = getStyleRule(ruleView).querySelector(
+    ".ruleview-propertyvalue"
+  );
+
+  info("Focusing the property value to set it to edit mode");
+  const editor = await focusEditableField(ruleView, valueSpan.parentNode);
+
+  ok(editor.input, "The inplace-editor field is ready");
+  info("Setting the new value");
+  editor.input.value = value;
+
+  info(
+    "Pressing return and waiting for the field to blur and for the " +
+      "markup-view to show the mutation"
+  );
+  const onBlur = once(editor.input, "blur", true);
+  const onStyleChanged = waitForStyleModification(inspector);
+  EventUtils.sendKey("return");
+  await onBlur;
+  await onStyleChanged;
+
+  info(
+    "Escaping out of the new property field that has been created after " +
+      "the value was edited"
+  );
+  const onNewFieldBlur = once(
+    ruleView.styleDocument.activeElement,
+    "blur",
+    true
+  );
+  EventUtils.sendKey("escape");
+  await onNewFieldBlur;
+}
+
+async function getContainerStyleAttrValue(id, { walker, markup }) {
+  const front = await walker.querySelector(walker.rootNode, "#" + id);
+  const container = markup.getContainer(front);
+
+  let attrIndex = 0;
+  for (const attrName of container.elt.querySelectorAll(".attr-name")) {
+    if (attrName.textContent === "style") {
+      return container.elt.querySelectorAll(".attr-value")[attrIndex];
+    }
+    attrIndex++;
+  }
+  return undefined;
+}
+
+async function assertRuleAndMarkupViewWidth(id, value, ruleView, inspector) {
+  const valueSpan = getStyleRule(ruleView).querySelector(
+    ".ruleview-propertyvalue"
+  );
+  is(
+    valueSpan.textContent,
+    value,
+    "Rule-view style width is " + value + " as expected"
+  );
+
+  const attr = await getContainerStyleAttrValue(id, inspector);
+  is(
+    attr.textContent.replace(/\s/g, ""),
+    "width:" + value + ";",
+    "Markup-view style attribute width is " + value
+  );
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js
new file mode 100644
index 0000000000..9e9a2d1d50
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_01.js
@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element which defines CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div::before {
+      color: var(--color);
+      --color: orange;
+    }
+
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Test the CSS variable which normal element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Test the CSS variable which pseudo element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div::before",
+    "color",
+    "ruleview-variable",
+    "--color = orange"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js
new file mode 100644
index 0000000000..fba5c163c1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables-in-pseudo-element_02.js
@@ -0,0 +1,44 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for pseudo element which inherits CSS variable.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div::before {
+      color: var(--color);
+    }
+
+    div {
+      color: var(--color);
+      --color: lime;
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  info("Test the CSS variable which normal element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+
+  info("Test the CSS variable which pseudo element is referring to");
+  checkCSSVariableOutput(
+    view,
+    "div::before",
+    "color",
+    "ruleview-variable",
+    "--color = lime"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_01.js b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
new file mode 100644
index 0000000000..255367fcbb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_01.js
@@ -0,0 +1,72 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_1.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  info(
+    "Tests basic support for CSS Variables for both single variable " +
+      "and double variable. Formats tested: var(x, constant), var(x, var(y))"
+  );
+
+  const unsetColor = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setColor = unsetColor.previousElementSibling;
+  is(unsetColor.textContent, " red", "red is unmatched in color");
+  is(setColor.textContent, "--color", "--color is not set correctly");
+  is(
+    setColor.dataset.variable,
+    "--color = chartreuse",
+    "--color's dataset.variable is not set correctly"
+  );
+  let previewTooltip = await assertShowPreviewTooltip(view, setColor);
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setColor);
+
+  ok(
+    previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip shows the expected CSS variable"
+  );
+
+  const unsetVar = getRuleViewProperty(
+    view,
+    "div",
+    "background-color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVar = unsetVar.nextElementSibling;
+  const setVarName = setVar.querySelector(".ruleview-variable");
+  is(
+    unsetVar.textContent,
+    "--not-set",
+    "--not-set is unmatched in background-color"
+  );
+  is(setVar.textContent, " var(--bg)", "var(--bg) parsed incorrectly");
+  is(setVarName.textContent, "--bg", "--bg is not set correctly");
+  is(
+    setVarName.dataset.variable,
+    "--bg = seagreen",
+    "--bg's dataset.variable is not set correctly"
+  );
+  previewTooltip = await assertShowPreviewTooltip(view, setVarName);
+
+  ok(
+    !previewTooltip.panel.textContent.includes("--color = chartreuse"),
+    "CSS variable preview tooltip no longer shows the previous CSS variable"
+  );
+  ok(
+    previewTooltip.panel.textContent.includes("--bg = seagreen"),
+    "CSS variable preview tooltip shows the new CSS variable"
+  );
+
+  await assertTooltipHiddenOnMouseOut(previewTooltip, setVarName);
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_02.js b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
new file mode 100644
index 0000000000..4100859fb9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_02.js
@@ -0,0 +1,321 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_2.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testBasic(inspector, view);
+  await testNestedCssFunctions(inspector, view);
+  await testBorderShorthandAndInheritance(inspector, view);
+  await testSingleLevelVariable(inspector, view);
+  await testDoubleLevelVariable(inspector, view);
+  await testTripleLevelVariable(inspector, view);
+});
+
+async function testBasic(inspector, view) {
+  info(
+    "Test support for basic variable functionality for var() with 2 variables." +
+      "Format: var(--var1, var(--var2))"
+  );
+
+  await selectNode("#a", inspector);
+  const unsetVar = getRuleViewProperty(
+    view,
+    "#a",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVarParent = unsetVar.nextElementSibling;
+  const setVar = getVarFromParent(setVarParent);
+  is(
+    unsetVar.textContent,
+    "--var-not-defined",
+    "--var-not-defined is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-not-defined is not set",
+    "--var-not-defined's dataset.variable is not set correctly"
+  );
+  is(
+    setVarParent.textContent,
+    " var(--var-defined-font-size)",
+    "var(--var-defined-font-size) parsed incorrectly"
+  );
+  is(
+    setVar.textContent,
+    "--var-defined-font-size",
+    "--var-defined-font-size is not set correctly"
+  );
+  is(
+    setVar.dataset.variable,
+    "--var-defined-font-size = 60px",
+    "--bg's dataset.variable is not set correctly"
+  );
+}
+
+async function testNestedCssFunctions(inspector, view) {
+  info(
+    "Test support for variable functionality for a var() nested inside " +
+      "another CSS function. Format: rgb(0, 0, var(--var1, var(--var2)))"
+  );
+
+  await selectNode("#b", inspector);
+  const unsetVarParent = getRuleViewProperty(
+    view,
+    "#b",
+    "color"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const unsetVar = getVarFromParent(unsetVarParent);
+  const setVar = unsetVarParent.previousElementSibling;
+  is(
+    unsetVarParent.textContent,
+    " var(--var-defined-r-2)",
+    "var(--var-defined-r-2) not parsed correctly"
+  );
+  is(
+    unsetVar.textContent,
+    "--var-defined-r-2",
+    "--var-defined-r-2 is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-defined-r-2 = 0",
+    "--var-defined-r-2's dataset.variable is not set correctly"
+  );
+  is(
+    setVar.textContent,
+    "--var-defined-r-1",
+    "--var-defined-r-1 is not set correctly"
+  );
+  is(
+    setVar.dataset.variable,
+    "--var-defined-r-1 = 255",
+    "--var-defined-r-1's dataset.variable is not set correctly"
+  );
+}
+
+async function testBorderShorthandAndInheritance(inspector, view) {
+  info(
+    "Test support for variable functionality for shorthands/CSS styles with spaces " +
+      'like "margin: w x y z". Also tests functionality for inherticance of CSS' +
+      " variables. Format: var(l, var(m)) var(x) rgb(var(r) var(g) var(b))"
+  );
+
+  await selectNode("#c", inspector);
+  const unsetVarL = getRuleViewProperty(
+    view,
+    "#c",
+    "border"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+  const setVarMParent = unsetVarL.nextElementSibling;
+
+  // var(x) is the next sibling of the parent of M
+  const setVarXParent = setVarMParent.parentNode.nextElementSibling;
+
+  // var(r) is the next sibling of var(x), and var(g) is the next sibling of var(r), etc.
+  const setVarRParent = setVarXParent.nextElementSibling;
+  const setVarGParent = setVarRParent.nextElementSibling;
+  const setVarBParent = setVarGParent.nextElementSibling;
+
+  const setVarM = getVarFromParent(setVarMParent);
+  const setVarX = setVarXParent.firstElementChild;
+  const setVarR = setVarRParent.firstElementChild;
+  const setVarG = setVarGParent.firstElementChild;
+  const setVarB = setVarBParent.firstElementChild;
+
+  is(
+    unsetVarL.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVarL.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarM.textContent,
+    "--var-border-px",
+    "--var-border-px is not set correctly"
+  );
+  is(
+    setVarM.dataset.variable,
+    "--var-border-px = 10px",
+    "--var-border-px's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarX.textContent,
+    "--var-border-style",
+    "--var-border-style is not set correctly"
+  );
+  is(
+    setVarX.dataset.variable,
+    "--var-border-style = solid",
+    "var-border-style's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarR.textContent,
+    "--var-border-r",
+    "--var-defined-r is not set correctly"
+  );
+  is(
+    setVarR.dataset.variable,
+    "--var-border-r = 255",
+    "--var-defined-r's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarG.textContent,
+    "--var-border-g",
+    "--var-defined-g is not set correctly"
+  );
+  is(
+    setVarG.dataset.variable,
+    "--var-border-g = 0",
+    "--var-defined-g's dataset.variable is not set correctly"
+  );
+
+  is(
+    setVarB.textContent,
+    "--var-border-b",
+    "--var-defined-b is not set correctly"
+  );
+  is(
+    setVarB.dataset.variable,
+    "--var-border-b = 0",
+    "--var-defined-b's dataset.variable is not set correctly"
+  );
+}
+
+async function testSingleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of a single level of " +
+      "undefined variables. Format: var(x, constant)"
+  );
+
+  await selectNode("#d", inspector);
+  const unsetVar = getRuleViewProperty(
+    view,
+    "#d",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-unmatched-variable");
+
+  is(
+    unsetVar.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+}
+
+async function testDoubleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of double level of " +
+      "undefined variables. Format: var(x, var(y, constant))"
+  );
+
+  await selectNode("#e", inspector);
+  const allUnsetVars = getRuleViewProperty(
+    view,
+    "#e",
+    "color"
+  ).valueSpan.querySelectorAll(".ruleview-unmatched-variable");
+
+  is(allUnsetVars.length, 2, "The number of unset variables is mismatched.");
+
+  const unsetVar1 = allUnsetVars[0];
+  const unsetVar2 = allUnsetVars[1];
+
+  is(
+    unsetVar1.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar1.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar2.textContent,
+    "--var-undefined-2",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar2.dataset.variable,
+    "--var-undefined-2 is not set",
+    "--var-undefined-2's dataset.variable is not set correctly"
+  );
+}
+
+async function testTripleLevelVariable(inspector, view) {
+  info(
+    "Test support for variable functionality of triple level of " +
+      "undefined variables. Format: var(x, var(y, var(z, constant)))"
+  );
+
+  await selectNode("#f", inspector);
+  const allUnsetVars = getRuleViewProperty(
+    view,
+    "#f",
+    "border-style"
+  ).valueSpan.querySelectorAll(".ruleview-unmatched-variable");
+
+  is(allUnsetVars.length, 3, "The number of unset variables is mismatched.");
+
+  const unsetVar1 = allUnsetVars[0];
+  const unsetVar2 = allUnsetVars[1];
+  const unsetVar3 = allUnsetVars[2];
+
+  is(
+    unsetVar1.textContent,
+    "--var-undefined",
+    "--var-undefined is not set correctly"
+  );
+  is(
+    unsetVar1.dataset.variable,
+    "--var-undefined is not set",
+    "--var-undefined's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar2.textContent,
+    "--var-undefined-2",
+    "--var-undefined-2 is not set correctly"
+  );
+  is(
+    unsetVar2.dataset.variable,
+    "--var-undefined-2 is not set",
+    "--var-defined-r-2's dataset.variable is not set correctly"
+  );
+
+  is(
+    unsetVar3.textContent,
+    "--var-undefined-3",
+    "--var-undefined-3 is not set correctly"
+  );
+  is(
+    unsetVar3.dataset.variable,
+    "--var-undefined-3 is not set",
+    "--var-defined-r-3's dataset.variable is not set correctly"
+  );
+}
+
+function getVarFromParent(varParent) {
+  return varParent.firstElementChild.firstElementChild;
+}
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
new file mode 100644
index 0000000000..21fd00ec42
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_03-case-sensitive.js
@@ -0,0 +1,32 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that inherited CSS variables are case senstive.
+
+const TEST_URI = URL_ROOT + "doc_variables_3.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+  await selectNode("#target", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+  const lowerCaseVarEl = getRuleViewProperty(
+    view,
+    "div",
+    "background"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(upperCaseVarEl.textContent, "--COLOR", "upper case variable is matched");
+  is(
+    lowerCaseVarEl.textContent,
+    "--background",
+    "lower case variable is matched"
+  );
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js b/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js
new file mode 100644
index 0000000000..4e163b1fb7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_variables_04-valid-chars.js
@@ -0,0 +1,58 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test for variables in rule view.
+
+const TEST_URI = URL_ROOT + "doc_variables_4.html";
+
+add_task(async function () {
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await testNumber(inspector, view);
+  await testDash(inspector, view);
+});
+
+async function testNumber(inspector, view) {
+  info(
+    "Test support for allowing vars that begin with a number" +
+      "Format: --10: 10px;"
+  );
+
+  await selectNode("#a", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "#a",
+    "font-size"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(
+    upperCaseVarEl.dataset.variable,
+    "--10 = 10px",
+    "variable that starts with a number is valid"
+  );
+}
+
+async function testDash(inspector, view) {
+  info(
+    "Test support for allowing vars that begin with a dash" +
+      "Format: ---blue: blue;"
+  );
+
+  await selectNode("#b", inspector);
+
+  const upperCaseVarEl = getRuleViewProperty(
+    view,
+    "#b",
+    "color"
+  ).valueSpan.querySelector(".ruleview-variable");
+
+  is(
+    upperCaseVarEl.dataset.variable,
+    "---blue = blue",
+    "variable that starts with a dash is valid"
+  );
+}
diff --git a/devtools/client/inspector/rules/test/doc_author-sheet.html b/devtools/client/inspector/rules/test/doc_author-sheet.html
new file mode 100644
index 0000000000..7595bc2e79
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_author-sheet.html
@@ -0,0 +1,34 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>authored sheet test</title>
+
+  <style>
+  pre a {
+    color: orange;
+  }
+  </style>
+
+  <script>
+    "use strict";
+    var style = "data:text/css,a { background-color: seagreen; }";
+    var uri = SpecialPowers.Services.io.newURI(style);
+    var windowUtils = SpecialPowers.getDOMWindowUtils(window);
+    windowUtils.loadSheet(uri, windowUtils.AUTHOR_SHEET);
+  </script>
+
+</head>
+<body>
+  <input type=text placeholder=test></input>
+  <input type=color></input>
+  <input type=range></input>
+  <input type=number></input>
+  <progress></progress>
+  <blockquote type=cite>
+    <pre _moz_quote=true>
+      inspect <a href="foo">user agent</a> styles
+    </pre>
+  </blockquote>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_blob_stylesheet.html b/devtools/client/inspector/rules/test/doc_blob_stylesheet.html
new file mode 100644
index 0000000000..b408c2f6b0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_blob_stylesheet.html
@@ -0,0 +1,39 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+</html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Blob stylesheet sourcemap</title>
+</head>
+<body>
+<h1>Test</h1>
+<script>
+"use strict";
+
+var cssContent = `body {
+  background-color: black;
+}
+body > h1 {
+  color: white;
+}
+` +
+"//# sourceMappingURL=data:application/json;base64,ewoidmVyc2lvbiI6IDMsCiJtYX" +
+"BwaW5ncyI6ICJBQUFBLElBQUs7RUFDSCxnQkFBZ0IsRUFBRSxLQUFLOztBQUN2QixTQUFPO0VBQ0" +
+"wsS0FBSyxFQUFFLEtBQUsiLAoic291cmNlcyI6IFsidGVzdC5zY3NzIl0sCiJzb3VyY2VzQ29udG" +
+"VudCI6IFsiYm9keSB7XG4gIGJhY2tncm91bmQtY29sb3I6IGJsYWNrO1xuICAmID4gaDEge1xuIC" +
+"AgIGNvbG9yOiB3aGl0ZTsgIFxuICB9XG59XG4iXSwKIm5hbWVzIjogW10sCiJmaWxlIjogInRlc3" +
+"QuY3NzIgp9Cg==";
+var cssBlob = new Blob([cssContent], {type: "text/css"});
+var url = URL.createObjectURL(cssBlob);
+
+var head = document.querySelector("head");
+var link = document.createElement("link");
+link.rel = "stylesheet";
+link.type = "text/css";
+link.href = url;
+head.appendChild(link);
+</script>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
new file mode 100644
index 0000000000..9b5e3f2c01
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete.html
@@ -0,0 +1,41 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html class="auto-html-class-1 auto-html-class-2 auto-bold">
+<head>
+  <title>Class panel autocomplete test</title>
+
+  <link href="./doc_class_panel_autocomplete_stylesheet.css" rel="stylesheet" type="text/css">
+  <style>
+    .auto-inline-class-1 {
+      padding: 1em;
+    }
+    .auto-inline-class-2 {
+      padding: 2em;
+    }
+    .auto-inline-class-3 {
+      padding: 3em;
+    }
+
+    .auto-inline-class-1,
+    div.auto-inline-class-2,
+    p:first-of-type.auto-inline-class-3,
+    .auto-inline-class-4 {
+      background-color: blue;
+    }
+
+    :root .auto-bold .auto-inline-class-5 {
+      font-size: bold;
+    }
+  </style>
+  <script defer>
+    "use strict";
+      const x = document.styleSheets[0];
+      x.insertRule(".auto-cssom-primary-color { color: tomato; }", 1);
+  </script>
+</head>
+<body class="auto-body-class-1 auto-body-class-2 auto-bold">
+  <div id="auto-div-id-1" class="auto-div-class-1 auto-div-class-2 auto-bold"> the ocean </div>
+  <div id="auto-div-id-2" class="auto-div-class-1 auto-div-class-2 auto-bold"> roaring </div>
+  <div id="auto-div-id-3"> ahead </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css
new file mode 100644
index 0000000000..c8b83ac6fc
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_class_panel_autocomplete_stylesheet.css
@@ -0,0 +1,20 @@
+.auto-stylesheet-class-1 {
+  padding: 1em;
+}
+.auto-stylesheet-class-2 {
+  padding: 2em;
+}
+.auto-stylesheet-class-3 {
+  padding: 3em;
+}
+
+.auto-stylesheet-class-1,
+div.auto-stylesheet-class-2,
+p:first-of-type.auto-stylesheet-class-3,
+.auto-stylesheet-class-4 {
+  background-color: blue;
+}
+
+:root .auto-bold .auto-stylesheet-class-5 {
+  font-size: bold;
+}
diff --git a/devtools/client/inspector/rules/test/doc_conditional_import.css b/devtools/client/inspector/rules/test/doc_conditional_import.css
new file mode 100644
index 0000000000..32529fc608
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_conditional_import.css
@@ -0,0 +1,3 @@
+h1, [test-hint=imported-conditional] {
+  color: rebeccapurple;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet.html b/devtools/client/inspector/rules/test/doc_content_stylesheet.html
new file mode 100644
index 0000000000..8af8ae950f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <title>test</title>
+
+  <link href="./doc_content_stylesheet_linked.css" rel="stylesheet" type="text/css">
+
+  <script>
+    /* eslint no-unused-vars: [2, {"vars": "local"}] */
+    "use strict";
+    // Load script.css
+    function loadCSS() {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.type = "text/css";
+      link.href = "./doc_content_stylesheet_script.css";
+      document.getElementsByTagName("head")[0].appendChild(link);
+    }
+  </script>
+
+  <style>
+    table {
+      border: 1px solid #000;
+    }
+  </style>
+</head>
+<body onload="loadCSS();">
+  <table id="target">
+    <tr>
+      <td>
+        <h3>Simple test</h3>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css
new file mode 100644
index 0000000000..ea1a3d986b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported.css
@@ -0,0 +1,5 @@
+@import url("./doc_content_stylesheet_imported2.css");
+
+#target {
+  text-decoration: underline;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css
new file mode 100644
index 0000000000..77c73299ea
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_imported2.css
@@ -0,0 +1,3 @@
+#target {
+  text-decoration: underline;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
new file mode 100644
index 0000000000..712ba78fb6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_linked.css
@@ -0,0 +1,3 @@
+table  {
+  border-collapse: collapse;
+}
diff --git a/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
new file mode 100644
index 0000000000..5aa5e2c6cb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_content_stylesheet_script.css
@@ -0,0 +1,5 @@
+@import url("./doc_content_stylesheet_imported.css");
+
+table  {
+  opacity: 1;
+}
diff --git a/devtools/client/inspector/rules/test/doc_copystyles.css b/devtools/client/inspector/rules/test/doc_copystyles.css
new file mode 100644
index 0000000000..83f0c87b12
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_copystyles.css
@@ -0,0 +1,11 @@
+/* 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/. */
+
+html, body, #testid {
+  color: #F00;
+  background-color: #00F;
+  font-size: 12px;
+  border-color: #00F !important;
+  --var: "*/";
+}
diff --git a/devtools/client/inspector/rules/test/doc_copystyles.html b/devtools/client/inspector/rules/test/doc_copystyles.html
new file mode 100644
index 0000000000..da1b4c0b3f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_copystyles.html
@@ -0,0 +1,11 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>Test case for copying stylesheet in rule-view</title>
+    <link rel="stylesheet" type="text/css" href="doc_copystyles.css"/>
+  </head>
+  <body>
+    <div id='testid'>Styled Node</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_cssom.html b/devtools/client/inspector/rules/test/doc_cssom.html
new file mode 100644
index 0000000000..6c44cfcf98
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_cssom.html
@@ -0,0 +1,25 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>CSSOM test</title>
+
+  <script>
+    "use strict";
+    window.onload = function() {
+      const x = document.styleSheets[0];
+      x.insertRule("div { color: seagreen; }", 1);
+
+      // Add a rule with a leading newline, to test that inspector can handle it.
+      x.insertRule("\ndiv { font-weight: bold; }", 1);
+    };
+  </script>
+
+  <style>
+    span { }
+  </style>
+</head>
+<body>
+  <div id="target"> the ocean </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_custom.html b/devtools/client/inspector/rules/test/doc_custom.html
new file mode 100644
index 0000000000..09bf501d59
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_custom.html
@@ -0,0 +1,33 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+      #testidSimple {
+	--background-color: blue;
+      }
+      .testclassSimple {
+	--background-color: green;
+      }
+
+      .testclassImportant {
+	--background-color: green !important;
+      }
+      #testidImportant {
+	--background-color: blue;
+      }
+
+      #testidDisable {
+	--background-color: blue;
+      }
+      .testclassDisable {
+	--background-color: green;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="testidSimple" class="testclassSimple">Styled Node</div>
+    <div id="testidImportant" class="testclassImportant">Styled Node</div>
+    <div id="testidDisable" class="testclassDisable">Styled Node</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_edit_imported_selector.html b/devtools/client/inspector/rules/test/doc_edit_imported_selector.html
new file mode 100644
index 0000000000..5b2120850a
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_edit_imported_selector.html
@@ -0,0 +1,13 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Edit a selector in an imported stylesheet</title>
+  <link rel="stylesheet" type="text/css" href="doc_content_stylesheet_script.css">
+</head>
+<body>
+  <div id="target">Styled node</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_filter.html b/devtools/client/inspector/rules/test/doc_filter.html
new file mode 100644
index 0000000000..cb2df9feb6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_filter.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<!-- 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/. -->
+<html>
+<head>
+  <title>Bug 1055181 - CSS Filter Editor Widget</title>
+  <style>
+    body {
+      filter: blur(2px) contrast(2);
+    }
+  </style>
+</head>
diff --git a/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html b/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html
new file mode 100644
index 0000000000..0fe8527c01
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_grid_area_gridline_names.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<style type='text/css'>
+  /* Implicit gridlines created from explicit grid areas. */
+  .wrapperA {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "header header header"
+      "main   main   main";
+  }
+
+  .header {
+    grid-column: header-start / header-end;
+    grid-row: header-start / header-end;
+  }
+
+  .main {
+    grid-area: main;
+  }
+
+  /* Implicit grid areas created from explicit gridlines */
+  .wrapperB {
+    display: grid;
+    grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end main-end];
+    grid-template-rows: [main-start] 100px [content-start] 100px [content-end main-end];
+  }
+
+  .contentArea {
+    grid-column: content-start / content-end;
+    grid-row: content-start / content-end;
+  }
+
+  .wrapperC {
+    display: grid;
+    grid-template-columns: [a-start b-end] 1fr [c];
+  }
+
+  .a {
+    grid-column: a-start / a-end;
+  }
+
+  .b {
+    grid-column: b-start / b-end;
+  }
+</style>
+<div>
+  <div class="wrapperA">
+    <div class="header">Header</div>
+    <div class="main">Content</div>
+  </div>
+  <div class="wrapperB">
+    <div class="contentArea">Implicit area named "content".</div>
+  </div>
+  <div class="wrapperC">
+    <div class="a">A.</div>
+    <div class="b">B.</div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_grid_names.html b/devtools/client/inspector/rules/test/doc_grid_names.html
new file mode 100644
index 0000000000..0aefb18585
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_grid_names.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<style type='text/css'>
+  #grid {
+    display: grid;
+    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
+    grid-template-columns: [col1-start] 100px [col2-start] 100px [col3-start] 100px [col3-end];
+  }
+  #cell3 {
+    grid-column: "col3-start";
+    grid-row: "row2-start";
+  }
+</style>
+<div id="grid">
+  <div>cell1</div>
+  <div id="cell2">cell2</div>
+  <div id="cell3">cell3</div>
+</div>
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
new file mode 100644
index 0000000000..fb537b53ae
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_anonymous_layer.css
@@ -0,0 +1,4 @@
+h1, [test-hint=imported-anonymous-layer--no-rule-layer] {
+    color:cyan;
+    outline: 10px solid cyan;
+}
diff --git a/devtools/client/inspector/rules/test/doc_imported_named_layer.css b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
new file mode 100644
index 0000000000..0817f84e9f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_named_layer.css
@@ -0,0 +1,12 @@
+@media screen {
+    h1, [test-hint=imported-named-layer--no-rule-layer] {
+        color:tomato;
+        border: 10px dotted currentColor;
+    }
+
+    @layer in-imported-stylesheet {
+        h1, [test-hint=imported-named-layer--named-layer] {
+            color: purple;
+        }
+    }
+}
diff --git a/devtools/client/inspector/rules/test/doc_imported_no_layer.css b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
new file mode 100644
index 0000000000..9290eebc08
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_imported_no_layer.css
@@ -0,0 +1,3 @@
+h1, [test-hint=imported-no-layer--no-rule-layer] {
+  color: gold;
+}
diff --git a/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml b/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml
new file mode 100644
index 0000000000..ebe347997b
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_inactive_css_xul.xhtml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/global.css"?>
+<?xml-stylesheet href="chrome://devtools/skin/light-theme.css"?>
+<window class="theme-light"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
+        title="Inactive CSS for XUL documents">
+
+  <vbox>
+    <html:img
+      id="test-img-in-xul"
+      style="width:10px; height: 10px; grid-column-gap: 5px;">
+    </html:img>
+  </vbox>
+</window>
diff --git a/devtools/client/inspector/rules/test/doc_inline_sourcemap.html b/devtools/client/inspector/rules/test/doc_inline_sourcemap.html
new file mode 100644
index 0000000000..cb107d4244
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_inline_sourcemap.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+  <title>CSS source maps in inline stylesheets</title>
+</head>
+<body>
+  <div>CSS source maps in inline stylesheets</div>
+  <style>
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
+  </style>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css
new file mode 100644
index 0000000000..ff96a6b542
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.css
@@ -0,0 +1,3 @@
+div { color: gold; }

+

+/*# sourceMappingURL=this-source-map-does-not-exist.css.map */
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html
new file mode 100644
index 0000000000..cd3a74817f
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_invalid_sourcemap.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>

+<html>

+<head>

+  <meta charset="utf-8">

+  <title>Invalid source map</title>

+  <link rel="stylesheet" type="text/css" href="doc_invalid_sourcemap.css">

+</head>

+<body>

+  <div>invalid source map</div>

+</body>

+</html>
diff --git a/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html b/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html
new file mode 100644
index 0000000000..9964bf5069
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeLineNumbers.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>keyframe line numbers test</title>
+  <style type="text/css">
+div {
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-name: CC;
+}
+
+span {
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-name: DD;
+}
+
+@keyframes CC {
+  from {
+    background: #ffffff;
+  }
+  to {
+    background: #f06;
+  }
+}
+
+@keyframes DD {
+  from {
+    background: seagreen;
+  }
+  to {
+    background: chartreuse;
+  }
+}
+  </style>
+</head>
+<body>
+  <div id="outer">
+    <span id="inner">lizards</div>
+  </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.css b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
new file mode 100644
index 0000000000..64582ed358
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.css
@@ -0,0 +1,84 @@
+/* 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/. */
+
+.box {
+  height: 50px;
+  width: 50px;
+}
+
+.circle {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  background-color: #FFCB01;
+}
+
+#pacman {
+  width: 0px;
+  height: 0px;
+  border-right: 60px solid transparent;
+  border-top: 60px solid #FFCB01;
+  border-left: 60px solid #FFCB01;
+  border-bottom: 60px solid #FFCB01;
+  border-top-left-radius: 60px;
+  border-bottom-left-radius: 60px;
+  border-top-right-radius: 60px;
+  border-bottom-right-radius: 60px;
+  top: 120px;
+  left: 150px;
+  position: absolute;
+  animation-name: pacman;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  animation-duration: 15s;
+}
+
+#boxy {
+  top: 170px;
+  left: 450px;
+  position: absolute;
+  animation: 4s linear 0s normal none infinite boxy;
+}
+
+
+#moxy {
+  animation-name: moxy, boxy;
+  animation-delay: 3.5s;
+  animation-duration: 2s;
+  top: 170px;
+  left: 650px;
+  position: absolute;
+}
+
+@-moz-keyframes pacman {
+  100% {
+    left: 750px;
+  }
+}
+
+@keyframes pacman {
+  100% {
+    left: 750px;
+  }
+}
+
+@keyframes boxy {
+  10% {
+    background-color: blue;
+  }
+
+  20% {
+    background-color: green;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes moxy {
+  to {
+    opacity: 0;
+  }
+}
diff --git a/devtools/client/inspector/rules/test/doc_keyframeanimation.html b/devtools/client/inspector/rules/test/doc_keyframeanimation.html
new file mode 100644
index 0000000000..4e02c32f05
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_keyframeanimation.html
@@ -0,0 +1,13 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <title>test case for keyframes rule in rule-view</title>
+    <link rel="stylesheet" type="text/css" href="doc_keyframeanimation.css"/>
+  </head>
+  <body>
+    <div id="pacman"></div>
+    <div id="boxy" class="circle"></div>
+    <div id="moxy" class="circle"></div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_media_queries.html b/devtools/client/inspector/rules/test/doc_media_queries.html
new file mode 100644
index 0000000000..f4706dad87
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_media_queries.html
@@ -0,0 +1,42 @@
+<html>
+<head>
+  <title>test</title>
+  <script type="application/javascript">
+
+  </script>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media screen and (min-width: 1px) {
+      div {
+        width: 200px;
+        background-color: yellow;
+      }
+    }
+
+    @media (prefers-color-scheme: dark) {
+      div {
+        background-color: darkblue;
+      }
+    }
+  </style>
+  <script>
+    "use strict";
+    if (window.location.search == "?constructed") {
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(`div { z-index: 0 }`);
+      document.adoptedStyleSheets.push(sheet);
+    }
+  </script>
+</head>
+<body>
+<div></div>
+<iframe
+  src='https://example.org/document-builder.sjs?html=<style>html { background: cyan;} @media (prefers-color-scheme: dark) {html {background: darkred;}}'>
+</iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_print_media_simulation.html b/devtools/client/inspector/rules/test/doc_print_media_simulation.html
new file mode 100644
index 0000000000..e0caa25296
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_print_media_simulation.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+  <title>test print media simulation</title>
+  <script type="application/javascript">
+
+  </script>
+  <style>
+    div {
+      width: 1000px;
+      height: 100px;
+      background-color: #f00;
+    }
+
+    @media print {
+      div {
+        background-color: #00f;
+      }
+    }
+  </style>
+</head>
+<body>
+<div></div>
+<iframe
+  src='https://example.org/document-builder.sjs?html=<style>html { background-color: %23ff0;} @media print {html {background-color: %230ff;}}'>
+</iframe>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html
new file mode 100644
index 0000000000..26f94c6d3e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html
@@ -0,0 +1,149 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+    <style>
+
+body {
+    color: #333;
+}
+
+.box {
+    float:left;
+    width: 128px;
+    height: 128px;
+    background: #ddd;
+    padding: 32px;
+    margin: 32px;
+    position:relative;
+}
+
+.box:first-line {
+    color: orange;
+    background: red;
+}
+
+.box:first-letter {
+    color: green;
+}
+
+* {
+    cursor: default;
+}
+
+nothing {
+    cursor: pointer;
+}
+
+p::-moz-selection {
+    color: white;
+    background: black;
+}
+p::selection {
+    color: white;
+    background: black;
+}
+
+p:first-line {
+   background: blue;
+}
+p:first-letter {
+  color: red;
+  font-size: 130%;
+}
+
+.box:before {
+    background: green;
+    content: " ";
+    position: absolute;
+    height:32px;
+    width:32px;
+}
+
+.box:after {
+    background: red;
+    content: " ";
+    position: absolute;
+    border-radius: 50%;
+    height:32px;
+    width:32px;
+    top: 50%;
+    left: 50%;
+    margin-top: -16px;
+    margin-left: -16px;
+}
+
+.topleft:before {
+    top:0;
+    left:0;
+}
+
+.topleft:first-line {
+    color: orange;
+}
+.topleft::selection {
+    color: orange;
+}
+
+.topright:before {
+    top:0;
+    right:0;
+}
+
+.bottomright:before {
+    bottom:10px;
+    right:10px;
+    color: red;
+}
+
+.bottomright:before {
+    bottom:0;
+    right:0;
+}
+
+.bottomleft:before {
+    bottom:0;
+    left:0;
+}
+
+#list::marker {
+    color: purple;
+}
+
+dialog::backdrop {
+    background-color: tomato;
+}
+
+    </style>
+  </head>
+  <body>
+    <h1>ruleview pseudoelement($("test"));</h1>
+
+    <div id="topleft" class="box topleft">
+        <p>Top Left<br />Position</p>
+    </div>
+
+    <div id="topright" class="box topright">
+        <p>Top Right<br />Position</p>
+    </div>
+
+    <div id="bottomright" class="box bottomright">
+        <p>Bottom Right<br />Position</p>
+    </div>
+
+    <div id="bottomleft" class="box bottomleft">
+        <p>Bottom Left<br />Position</p>
+    </div>
+
+    <ol>
+        <li id="list" class="box">List element</li>
+    </ol>
+
+    <dialog>In dialog</dialog>
+    <script>
+        "use strict";
+        // This is the only way to have the ::backdrop style to be applied
+        document.querySelector("dialog").showModal()
+    </script>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html b/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html
new file mode 100644
index 0000000000..5a157f384c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_ruleLineNumbers.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>simple testcase</title>
+  <style type="text/css">
+  #testid {
+    background-color: seagreen;
+  }
+
+  body {
+    color: chartreuse;
+  }
+  </style>
+</head>
+<body>
+	<div id="testid">simple testcase</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html b/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html
new file mode 100644
index 0000000000..f1c87fa0ab
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_rules_imported_stylesheet_edit.html
@@ -0,0 +1,4 @@
+<style type="text/css">
+  @import url("./sjs_imported_stylesheet_edit.sjs");
+</style>
+<body><div></div></body>
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.css b/devtools/client/inspector/rules/test/doc_sourcemaps.css
new file mode 100644
index 0000000000..a9b437a408
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.css
@@ -0,0 +1,7 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
+
+/*# sourceMappingURL=doc_sourcemaps.css.map */
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.css.map b/devtools/client/inspector/rules/test/doc_sourcemaps.css.map
new file mode 100644
index 0000000000..0f7486fd91
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAGA,GAAI;EACF,KAAK,EAHU,OAAI;;AAMrB,IAAK;EACH,gBAAgB,EAAE,IAAI",
+"sources": ["doc_sourcemaps.scss"],
+"names": [],
+"file": "doc_sourcemaps.css"
+}
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.html b/devtools/client/inspector/rules/test/doc_sourcemaps.html
new file mode 100644
index 0000000000..0014e55fe9
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps.scss b/devtools/client/inspector/rules/test/doc_sourcemaps.scss
new file mode 100644
index 0000000000..0ff6c471bb
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps.scss
@@ -0,0 +1,10 @@
+
+$paulrougetpink: #f06;
+
+div {
+  color: $paulrougetpink;
+}
+
+span {
+  background-color: #EEE;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.css b/devtools/client/inspector/rules/test/doc_sourcemaps2.css
new file mode 100644
index 0000000000..c3e4ae7b40
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css
@@ -0,0 +1,5 @@
+div {
+  color: #ff0066; }
+
+span {
+  background-color: #EEE; }
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
new file mode 100644
index 0000000000..a5e1f3c7a0
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.css^headers^
@@ -0,0 +1 @@
+X-SourceMap: doc_sourcemaps.css.map
diff --git a/devtools/client/inspector/rules/test/doc_sourcemaps2.html b/devtools/client/inspector/rules/test/doc_sourcemaps2.html
new file mode 100644
index 0000000000..e6990700e7
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_sourcemaps2.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <title>testcase for testing CSS source maps</title>
+  <link rel="stylesheet" type="text/css" href="simple.css"/>
+  <link rel="stylesheet" type="text/css" href="doc_sourcemaps2.css"/>
+</head>
+<body>
+	<div>source maps <span>testcase</span></div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_style_editor_link.css b/devtools/client/inspector/rules/test/doc_style_editor_link.css
new file mode 100644
index 0000000000..e49e1f5871
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_style_editor_link.css
@@ -0,0 +1,3 @@
+div {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/devtools/client/inspector/rules/test/doc_test_image.png b/devtools/client/inspector/rules/test/doc_test_image.png
new file mode 100644
index 0000000000..769c636340
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_test_image.png
diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.css b/devtools/client/inspector/rules/test/doc_urls_clickable.css
new file mode 100644
index 0000000000..e2f77934e2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_urls_clickable.css
@@ -0,0 +1,9 @@
+.relative1 {
+    background-image: url(./doc_test_image.png);
+}
+.absolute {
+    background: url("https://example.com/browser/devtools/client/inspector/rules/test/doc_test_image.png");
+}
+.base64 {
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
+}
diff --git a/devtools/client/inspector/rules/test/doc_urls_clickable.html b/devtools/client/inspector/rules/test/doc_urls_clickable.html
new file mode 100644
index 0000000000..b0265a703e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_urls_clickable.html
@@ -0,0 +1,30 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+  <head>
+
+    <link href="./doc_urls_clickable.css" rel="stylesheet" type="text/css">
+
+    <style>
+    .relative2 {
+        background-image: url(doc_test_image.png);
+    }
+    </style>
+  </head>
+  <body>
+
+    <div class="relative1">Background image #1 with relative path (loaded from external css)</div>
+
+    <div class="relative2">Background image #2 with relative path (loaded from style tag)</div>
+
+    <div class="absolute">Background image with absolute path (loaded from external css)</div>
+
+    <div class="base64">Background image with base64 url (loaded from external css)</div>
+
+    <div class="inline" style="background: url(doc_test_image.png);">Background image with relative path (loaded from style attribute)</div>
+
+    <div class="inline-resolved" style="background-image: url(./doc_test_image.png)">Background image with resolved relative path (loaded from style attribute)</div>
+
+    <div class="noimage">No background image :(</div>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_1.html b/devtools/client/inspector/rules/test/doc_variables_1.html
new file mode 100644
index 0000000000..5b7905f47e
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_1.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+
+  <style>
+    * {
+      --color: tomato;
+      --bg: violet;
+    }
+
+    div {
+      --color: chartreuse;
+      color: var(--color, red);
+      background-color: var(--not-set, var(--bg));
+    }
+  </style>
+</head>
+<body>
+  <div id="target" style="--bg: seagreen;"> the ocean </div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_2.html b/devtools/client/inspector/rules/test/doc_variables_2.html
new file mode 100644
index 0000000000..4215ea87c6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_2.html
@@ -0,0 +1,45 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+  <style>
+    :root {
+      --var-border-px: 10px;
+      --var-border-style: solid;
+      --var-border-r: 255;
+      --var-border-g: 0;
+      --var-border-b: 0;
+    }
+    #a {
+      --var-defined-font-size: 60px;
+      font-size: var(--var-not-defined, var(--var-defined-font-size));
+    }
+    #b {
+      --var-defined-r-1: 255;
+      --var-defined-r-2: 0;
+      color: rgb(var(--var-defined-r-1, var(--var-defined-r-2)), 0, 0);
+    }
+    #c {
+      border: var(--var-undefined, var(--var-border-px)) var(--var-border-style) rgb(var(--var-border-r), var(--var-border-g), var(--var-border-b))
+    }
+    #d {
+      font-size: var(--var-undefined, 30px);
+    }
+    #e {
+      color: var(--var-undefined, var(--var-undefined-2, blue));
+    }
+    #f {
+      border-style: var(--var-undefined, var(--var-undefined-2, var(--var-undefined-3, solid)));
+    }
+  </style>
+</head>
+<body>
+  <div id="a">A</div><br>
+  <div id="b">B</div><br>
+  <div id="c">C</div><br>
+  <div id="d">D</div><br>
+  <div id="e">E</div><br>
+  <div id="f">F</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_3.html b/devtools/client/inspector/rules/test/doc_variables_3.html
new file mode 100644
index 0000000000..61027c7b23
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_3.html
@@ -0,0 +1,16 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html style="--COLOR: green; --background: black">
+<head>
+
+  <style>
+    div {
+      background: var(--background);
+      color: var(--COLOR);
+    }
+  </style>
+</head>
+<body>
+  <div id="target">test</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_variables_4.html b/devtools/client/inspector/rules/test/doc_variables_4.html
new file mode 100644
index 0000000000..81441c67c2
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_variables_4.html
@@ -0,0 +1,23 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<html>
+<head>
+  <title>variables test</title>
+  <style>
+    :root {
+      --10: 10px;
+      ---blue: blue;
+    }
+    #a {
+      font-size: var(--10);
+    }
+    #b {
+      color: var(---blue);
+    }
+  </style>
+</head>
+<body>
+  <div id="a">A</div><br>
+  <div id="b">B</div>
+</body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited.html b/devtools/client/inspector/rules/test/doc_visited.html
new file mode 100644
index 0000000000..b18e8c3da1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style type='text/css'>
+    a:visited, #visited-and-other-matched-selector {
+      background-color: transparent;
+      border-color: lime;
+      color: rgba(0, 255, 0, 0.8);
+      font-size: 100px;
+      margin-left: 50px;
+      text-decoration-color: lime;
+      text-emphasis-color: seagreen;
+    }
+    a:visited { color: lime; }
+    a:link { color: blue; }
+    a { color: pink; }
+    </style>
+  </head>
+  <body>
+    <a href="./doc_visited.html" id="visited">visited link</a>
+    <a href="#" id="unvisited">unvisited link</a>
+    <a href="./doc_visited.html" id="visited-and-other-matched-selector">
+      visited and other matched selector
+    </a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited_in_media_query.html b/devtools/client/inspector/rules/test/doc_visited_in_media_query.html
new file mode 100644
index 0000000000..ff95cfbc73
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited_in_media_query.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <style type='text/css'>
+    @media (min-width:1px)
+    {
+      a {
+        color: lime;
+        margin-left: 1px;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <a href="./doc_visited_in_media_query.html" id="visited">visited link</a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html b/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html
new file mode 100644
index 0000000000..0f07fb9d48
--- /dev/null
+++ b/devtools/client/inspector/rules/test/doc_visited_with_style_attribute.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <a href="./doc_visited_with_style_attribute.html" style="margin: 0;" id="visited">visited link</a>
+  </body>
+</html>
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
new file mode 100644
index 0000000000..40c7bbe3d5
--- /dev/null
+++ b/devtools/client/inspector/rules/test/head.js
@@ -0,0 +1,1284 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* eslint no-unused-vars: [2, {"vars": "local"}] */
+
+"use strict";
+
+// Import the inspector's head.js first (which itself imports shared-head.js).
+Services.scriptloader.loadSubScript(
+  "chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
+  this
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+var {
+  getInplaceEditorForSpan: inplaceEditor,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+
+const {
+  COMPATIBILITY_TOOLTIP_MESSAGE,
+} = require("resource://devtools/client/inspector/rules/constants.js");
+
+const ROOT_TEST_DIR = getRootDirectory(gTestPath);
+
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+registerCleanupFunction(() => {
+  Services.prefs.clearUserPref("devtools.defaultColorUnit");
+});
+
+/**
+ * When a tooltip is closed, this ends up "commiting" the value changed within
+ * the tooltip (e.g. the color in case of a colorpicker) which, in turn, ends up
+ * setting the value of the corresponding css property in the rule-view.
+ * Use this function to close the tooltip and make sure the test waits for the
+ * ruleview-changed event.
+ * @param {SwatchBasedEditorTooltip} editorTooltip
+ * @param {CSSRuleView} view
+ */
+async function hideTooltipAndWaitForRuleViewChanged(editorTooltip, view) {
+  const onModified = view.once("ruleview-changed");
+  const onHidden = editorTooltip.tooltip.once("hidden");
+  editorTooltip.hide();
+  await onModified;
+  await onHidden;
+}
+
+/**
+ * Polls a given generator function waiting for it to return true.
+ *
+ * @param {Function} validatorFn
+ *        A validator generator function that returns a boolean.
+ *        This is called every few milliseconds to check if the result is true.
+ *        When it is true, the promise resolves.
+ * @param {String} name
+ *        Optional name of the test. This is used to generate
+ *        the success and failure messages.
+ * @return a promise that resolves when the function returned true or rejects
+ * if the timeout is reached
+ */
+var waitForSuccess = async function (validatorFn, desc = "untitled") {
+  let i = 0;
+  while (true) {
+    info("Checking: " + desc);
+    if (await validatorFn()) {
+      ok(true, "Success: " + desc);
+      break;
+    }
+    i++;
+    if (i > 10) {
+      ok(false, "Failure: " + desc);
+      break;
+    }
+    await new Promise(r => setTimeout(r, 200));
+  }
+};
+
+/**
+ * Simulate a color change in a given color picker tooltip, and optionally wait
+ * for a given element in the page to have its style changed as a result.
+ * Note that this function assumes that the colorpicker popup is already open
+ * and it won't close it after having selected the new color.
+ *
+ * @param {RuleView} ruleView
+ *        The related rule view instance
+ * @param {SwatchColorPickerTooltip} colorPicker
+ * @param {Array} newRgba
+ *        The new color to be set [r, g, b, a]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var simulateColorPickerChange = async function (
+  ruleView,
+  colorPicker,
+  newRgba,
+  expectedChange
+) {
+  let onComputedStyleChanged;
+  if (expectedChange) {
+    const { selector, name, value } = expectedChange;
+    onComputedStyleChanged = waitForComputedStyleProperty(
+      selector,
+      null,
+      name,
+      value
+    );
+  }
+  const onRuleViewChanged = ruleView.once("ruleview-changed");
+  info("Getting the spectrum colorpicker object");
+  const spectrum = colorPicker.spectrum;
+  info("Setting the new color");
+  spectrum.rgb = newRgba;
+  info("Applying the change");
+  spectrum.updateUI();
+  spectrum.onChange();
+  info("Waiting for rule-view to update");
+  await onRuleViewChanged;
+
+  if (expectedChange) {
+    info("Waiting for the style to be applied on the page");
+    await onComputedStyleChanged;
+  }
+};
+
+/**
+ * Open the color picker popup for a given property in a given rule and
+ * simulate a color change. Optionally wait for a given element in the page to
+ * have its style changed as a result.
+ *
+ * @param {RuleView} view
+ *        The related rule view instance
+ * @param {Number} ruleIndex
+ *        Which rule to target in the rule view
+ * @param {Number} propIndex
+ *        Which property to target in the rule
+ * @param {Array} newRgba
+ *        The new color to be set [r, g, b, a]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var openColorPickerAndSelectColor = async function (
+  view,
+  ruleIndex,
+  propIndex,
+  newRgba,
+  expectedChange
+) {
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  const propEditor = ruleEditor.rule.textProps[propIndex].editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-colorswatch");
+  const cPicker = view.tooltips.getTooltip("colorPicker");
+
+  info("Opening the colorpicker by clicking the color swatch");
+  const onColorPickerReady = cPicker.once("ready");
+  swatch.click();
+  await onColorPickerReady;
+
+  await simulateColorPickerChange(view, cPicker, newRgba, expectedChange);
+
+  return { propEditor, swatch, cPicker };
+};
+
+/**
+ * Open the cubicbezier popup for a given property in a given rule and
+ * simulate a curve change. Optionally wait for a given element in the page to
+ * have its style changed as a result.
+ *
+ * @param {RuleView} view
+ *        The related rule view instance
+ * @param {Number} ruleIndex
+ *        Which rule to target in the rule view
+ * @param {Number} propIndex
+ *        Which property to target in the rule
+ * @param {Array} coords
+ *        The new coordinates to be used, e.g. [0.1, 2, 0.9, -1]
+ * @param {Object} expectedChange
+ *        Optional object that needs the following props:
+ *          - {String} selector The selector to the element in the page that
+ *            will have its style changed.
+ *          - {String} name The style name that will be changed
+ *          - {String} value The expected style value
+ * The style will be checked like so: getComputedStyle(element)[name] === value
+ */
+var openCubicBezierAndChangeCoords = async function (
+  view,
+  ruleIndex,
+  propIndex,
+  coords,
+  expectedChange
+) {
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  const propEditor = ruleEditor.rule.textProps[propIndex].editor;
+  const swatch = propEditor.valueSpan.querySelector(".ruleview-bezierswatch");
+  const bezierTooltip = view.tooltips.getTooltip("cubicBezier");
+
+  info("Opening the cubicBezier by clicking the swatch");
+  const onBezierWidgetReady = bezierTooltip.once("ready");
+  swatch.click();
+  await onBezierWidgetReady;
+
+  const widget = await bezierTooltip.widget;
+
+  info("Simulating a change of curve in the widget");
+  const onRuleViewChanged = view.once("ruleview-changed");
+  widget.coordinates = coords;
+  await onRuleViewChanged;
+
+  if (expectedChange) {
+    info("Waiting for the style to be applied on the page");
+    const { selector, name, value } = expectedChange;
+    await waitForComputedStyleProperty(selector, null, name, value);
+  }
+
+  return { propEditor, swatch, bezierTooltip };
+};
+
+/**
+ * Simulate adding a new property in an existing rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {Number} ruleIndex
+ *        The index of the rule to use.
+ * @param {String} name
+ *        The name for the new property
+ * @param {String} value
+ *        The value for the new property
+ * @param {Object=} options
+ * @param {String=} options.commitValueWith
+ *        Which key should be used to commit the new value. VK_RETURN is used by
+ *        default, but tests might want to use another key to test cancelling
+ *        for exemple.
+ * @param {Boolean=} options.blurNewProperty
+ *        After the new value has been added, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ * @return {TextProperty} The instance of the TextProperty that was added
+ */
+var addProperty = async function (
+  view,
+  ruleIndex,
+  name,
+  value,
+  { commitValueWith = "VK_RETURN", blurNewProperty = true } = {}
+) {
+  info("Adding new property " + name + ":" + value + " to rule " + ruleIndex);
+
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+  const numOfProps = ruleEditor.rule.textProps.length;
+
+  const onMutations = new Promise(r => {
+    // If the rule index is 0, then we are updating the rule for the "element"
+    // selector in the rule view.
+    // This rule is actually updating the style attribute of the element, and
+    // therefore we can expect mutations.
+    // For any other rule index, no mutation should be created, we can resolve
+    // immediately.
+    if (ruleIndex !== 0) {
+      r();
+    }
+
+    // Use CSS.escape for the name in order to match the logic at
+    // devtools/client/fronts/inspector/rule-rewriter.js
+    // This leads to odd values in the style attribute and might change in the
+    // future. See https://bugzilla.mozilla.org/show_bug.cgi?id=1765943
+    const expectedAttributeValue = `${CSS.escape(name)}: ${value}`;
+    view.inspector.walker.on(
+      "mutations",
+      function onWalkerMutations(mutations) {
+        // Wait until we receive a mutation which updates the style attribute
+        // with the expected value.
+        const receivedLastMutation = mutations.some(
+          mut =>
+            mut.attributeName === "style" &&
+            mut.newValue.includes(expectedAttributeValue)
+        );
+        if (receivedLastMutation) {
+          view.inspector.walker.off("mutations", onWalkerMutations);
+          r();
+        }
+      }
+    );
+  });
+
+  info("Adding name " + name);
+  editor.input.value = name;
+  const onNameAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onNameAdded;
+
+  // Focus has moved to the value inplace-editor automatically.
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const textProps = ruleEditor.rule.textProps;
+  const textProp = textProps[textProps.length - 1];
+
+  is(
+    ruleEditor.rule.textProps.length,
+    numOfProps + 1,
+    "A new test property was added"
+  );
+  is(
+    editor,
+    inplaceEditor(textProp.editor.valueSpan),
+    "The inplace editor appeared for the value"
+  );
+
+  info("Adding value " + value);
+  // Setting the input value schedules a preview to be shown in 10ms which
+  // triggers a ruleview-changed event (see bug 1209295).
+  const onPreview = view.once("ruleview-changed");
+  editor.input.value = value;
+  view.debounce.flush();
+  await onPreview;
+
+  const onValueAdded = view.once("ruleview-changed");
+  EventUtils.synthesizeKey(commitValueWith, {}, view.styleWindow);
+  await onValueAdded;
+
+  info(
+    "Waiting for DOM mutations in case the property was added to the element style"
+  );
+  await onMutations;
+
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+
+  return textProp;
+};
+
+/**
+ * Simulate changing the value of a property in a rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be changed
+ * @param {String} value
+ *        The new value to be used. If null is passed, then the value will be
+ *        deleted
+ * @param {Object} options
+ * @param {Boolean} options.blurNewProperty
+ *        After the value has been changed, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ * @param {number} options.flushCount
+ *        The ruleview uses a manual flush for tests only, and some properties are
+ *        only updated after several flush. Allow tests to trigger several flushes
+ *        if necessary. Defaults to 1.
+ */
+var setProperty = async function (
+  view,
+  textProp,
+  value,
+  { blurNewProperty = true, flushCount = 1 } = {}
+) {
+  info("Set property to: " + value);
+  await focusEditableField(view, textProp.editor.valueSpan);
+
+  // Because of the manual flush approach used for tests, we might have an
+  // unknown number of debounced "preview" requests . Each preview should
+  // synchronously emit "start-preview-property-value".
+  // Listen to both this event and "ruleview-changed" which is emitted at the
+  // end of a preview and make sure each preview completes successfully.
+  let previewStartedCounter = 0;
+  const onStartPreview = () => previewStartedCounter++;
+  view.on("start-preview-property-value", onStartPreview);
+
+  let previewCounter = 0;
+  const onPreviewApplied = () => previewCounter++;
+  view.on("ruleview-changed", onPreviewApplied);
+
+  if (value === null) {
+    const onPopupOpened = once(view.popup, "popup-opened");
+    EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+    await onPopupOpened;
+  } else {
+    EventUtils.sendString(value, view.styleWindow);
+  }
+
+  info(`Flush debounced ruleview methods (remaining: ${flushCount})`);
+  view.debounce.flush();
+  await waitFor(() => previewCounter >= previewStartedCounter);
+
+  flushCount--;
+
+  while (flushCount > 0) {
+    // Wait for some time before triggering a new flush to let new debounced
+    // functions queue in-between.
+    await wait(100);
+
+    info(`Flush debounced ruleview methods (remaining: ${flushCount})`);
+    view.debounce.flush();
+    await waitFor(() => previewCounter >= previewStartedCounter);
+
+    flushCount--;
+  }
+
+  view.off("start-preview-property-value", onStartPreview);
+  view.off("ruleview-changed", onPreviewApplied);
+
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+
+  info("Waiting for another ruleview-changed after setting property");
+  await onValueDone;
+
+  if (blurNewProperty) {
+    info("Force blur on the active element");
+    view.styleDocument.activeElement.blur();
+  }
+};
+
+/**
+ * Change the name of a property in a rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel.
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be changed.
+ * @param {String} name
+ *        The new property name.
+ */
+var renameProperty = async function (view, textProp, name) {
+  await focusEditableField(view, textProp.editor.nameSpan);
+
+  const onNameDone = view.once("ruleview-changed");
+  info(`Rename the property to ${name}`);
+  EventUtils.sendString(name, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  info("Wait for property name.");
+  await onNameDone;
+  // Renaming the property auto-advances the focus to the value input. Exiting without
+  // committing will still fire a change event. @see TextPropertyEditor._onValueDone().
+  // Wait for that event too before proceeding.
+  const onValueDone = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_ESCAPE", {}, view.styleWindow);
+  info("Wait for property value.");
+  await onValueDone;
+};
+
+/**
+ * Simulate removing a property from an existing rule in the rule-view.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be removed
+ * @param {Boolean} blurNewProperty
+ *        After the property has been removed, a new property would have been
+ *        focused. This parameter is true by default, and that causes the new
+ *        property to be blurred. Set to false if you don't want this.
+ */
+var removeProperty = async function (view, textProp, blurNewProperty = true) {
+  await focusEditableField(view, textProp.editor.nameSpan);
+
+  const onModifications = view.once("ruleview-changed");
+  info("Deleting the property name now");
+  EventUtils.synthesizeKey("VK_DELETE", {}, view.styleWindow);
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onModifications;
+
+  if (blurNewProperty) {
+    view.styleDocument.activeElement.blur();
+  }
+};
+
+/**
+ * Simulate clicking the enable/disable checkbox next to a property in a rule.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {TextProperty} textProp
+ *        The instance of the TextProperty to be enabled/disabled
+ */
+var togglePropStatus = async function (view, textProp) {
+  const onRuleViewRefreshed = view.once("ruleview-changed");
+  textProp.editor.enable.click();
+  await onRuleViewRefreshed;
+};
+
+/**
+ * Create a new rule by clicking on the "add rule" button.
+ * This will leave the selector inplace-editor active.
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @return a promise that resolves after the rule has been added
+ */
+async function addNewRule(inspector, view) {
+  info("Adding the new rule using the button");
+  view.addRuleButton.click();
+
+  info("Waiting for rule view to change");
+  await view.once("ruleview-changed");
+}
+
+/**
+ * Create a new rule by clicking on the "add rule" button, dismiss the editor field and
+ * verify that the selector is correct.
+ *
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {String} expectedSelector
+ *        The value we expect the selector to have
+ * @param {Number} expectedIndex
+ *        The index we expect the rule to have in the rule-view
+ * @return a promise that resolves after the rule has been added
+ */
+async function addNewRuleAndDismissEditor(
+  inspector,
+  view,
+  expectedSelector,
+  expectedIndex
+) {
+  await addNewRule(inspector, view);
+
+  info("Getting the new rule at index " + expectedIndex);
+  const ruleEditor = getRuleViewRuleEditor(view, expectedIndex);
+  const editor = ruleEditor.selectorText.ownerDocument.activeElement;
+  is(
+    editor.value,
+    expectedSelector,
+    "The editor for the new selector has the correct value: " + expectedSelector
+  );
+
+  info("Pressing escape to leave the editor");
+  EventUtils.synthesizeKey("KEY_Escape");
+
+  is(
+    ruleEditor.selectorText.textContent,
+    expectedSelector,
+    "The new selector has the correct text: " + expectedSelector
+  );
+}
+
+/**
+ * Simulate a sequence of non-character keys (return, escape, tab) and wait for
+ * a given element to receive the focus.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the rule-view panel
+ * @param {DOMNode} element
+ *        The element that should be focused
+ * @param {Array} keys
+ *        Array of non-character keys, the part that comes after "DOM_VK_" eg.
+ *        "RETURN", "ESCAPE"
+ * @return a promise that resolves after the element received the focus
+ */
+async function sendKeysAndWaitForFocus(view, element, keys) {
+  const onFocus = once(element, "focus", true);
+  for (const key of keys) {
+    EventUtils.sendKey(key, view.styleWindow);
+  }
+  await onFocus;
+}
+
+/**
+ * Wait for a markupmutation event on the inspector that is for a style modification.
+ * @param {InspectorPanel} inspector
+ * @return {Promise}
+ */
+function waitForStyleModification(inspector) {
+  return new Promise(function (resolve) {
+    function checkForStyleModification(mutations) {
+      for (const mutation of mutations) {
+        if (
+          mutation.type === "attributes" &&
+          mutation.attributeName === "style"
+        ) {
+          inspector.off("markupmutation", checkForStyleModification);
+          resolve();
+          return;
+        }
+      }
+    }
+    inspector.on("markupmutation", checkForStyleModification);
+  });
+}
+
+/**
+ * Click on the icon next to the selector of a CSS rule in the Rules view
+ * to toggle the selector highlighter. If a selector highlighter is not already visible
+ * for the given selector, wait for it to be shown. Otherwise, wait for it to be hidden.
+ *
+ * @param {CssRuleView} view
+ *        The instance of the Rules view
+ * @param {String} selectorText
+ *        The selector of the CSS rule to look for
+ * @param {Number} index
+ *        If there are more CSS rules with the same selector, use this index
+ *        to determine which one should be retrieved. Defaults to 0 (first)
+ */
+async function clickSelectorIcon(view, selectorText, index = 0) {
+  const { inspector } = view;
+  const rule = getRuleViewRule(view, selectorText, index);
+
+  info(`Waiting for icon to be available for selector: ${selectorText}`);
+  const icon = await waitFor(() => {
+    return rule.querySelector(".js-toggle-selector-highlighter");
+  });
+
+  // Grab the actual selector associated with the matched icon.
+  // For inline styles, the CSS rule with the "element" selector actually points to
+  // a generated unique selector, for example: "div:nth-child(1)".
+  // The selector highlighter is invoked with this unique selector.
+  // Continuing to use selectorText ("element") would fail some of the checks below.
+  const selector = icon.dataset.selector;
+
+  const { waitForHighlighterTypeShown, waitForHighlighterTypeHidden } =
+    getHighlighterTestHelpers(inspector);
+
+  // If there is an active selector highlighter, get its configuration options.
+  // Will be undefined if there isn't an active selector highlighter.
+  const options = inspector.highlighters.getOptionsForActiveHighlighter(
+    inspector.highlighters.TYPES.SELECTOR
+  );
+
+  // If there is already a highlighter visible for this selector,
+  // wait for hidden event. Otherwise, wait for shown event.
+  const waitForEvent =
+    options?.selector === selector
+      ? waitForHighlighterTypeHidden(inspector.highlighters.TYPES.SELECTOR)
+      : waitForHighlighterTypeShown(inspector.highlighters.TYPES.SELECTOR);
+
+  // Boolean flag whether we waited for a highlighter shown event
+  const waitedForShown = options?.selector !== selector;
+
+  info(`Click the icon for selector: ${selectorText}`);
+  EventUtils.synthesizeMouseAtCenter(icon, {}, view.styleWindow);
+
+  // Promise resolves with event data from either highlighter shown or hidden event.
+  const data = await waitForEvent;
+  return { ...data, isShown: waitedForShown };
+}
+/**
+ * Toggle one of the checkboxes inside the class-panel. Resolved after the DOM mutation
+ * has been recorded.
+ * @param {CssRuleView} view The rule-view instance.
+ * @param {String} name The class name to find the checkbox.
+ */
+async function toggleClassPanelCheckBox(view, name) {
+  info(`Clicking on checkbox for class ${name}`);
+  const checkBox = [
+    ...view.classPanel.querySelectorAll("[type=checkbox]"),
+  ].find(box => {
+    return box.dataset.name === name;
+  });
+
+  const onMutation = view.inspector.once("markupmutation");
+  checkBox.click();
+  info("Waiting for a markupmutation as a result of toggling this class");
+  await onMutation;
+}
+
+/**
+ * Verify the content of the class-panel.
+ * @param {CssRuleView} view The rule-view instance
+ * @param {Array} classes The list of expected classes. Each item in this array is an
+ * object with the following properties: {name: {String}, state: {Boolean}}
+ */
+function checkClassPanelContent(view, classes) {
+  const checkBoxNodeList = view.classPanel.querySelectorAll("[type=checkbox]");
+  is(
+    checkBoxNodeList.length,
+    classes.length,
+    "The panel contains the expected number of checkboxes"
+  );
+
+  for (let i = 0; i < classes.length; i++) {
+    is(
+      checkBoxNodeList[i].dataset.name,
+      classes[i].name,
+      `Checkbox ${i} has the right class name`
+    );
+    is(
+      checkBoxNodeList[i].checked,
+      classes[i].state,
+      `Checkbox ${i} has the right state`
+    );
+  }
+}
+
+/**
+ * Opens the eyedropper from the colorpicker tooltip
+ * by selecting the colorpicker and then selecting the eyedropper icon
+ * @param {view} ruleView
+ * @param {swatch} color swatch of a particular property
+ */
+async function openEyedropper(view, swatch) {
+  const tooltip = view.tooltips.getTooltip("colorPicker").tooltip;
+
+  info("Click on the swatch");
+  const onColorPickerReady = view.tooltips
+    .getTooltip("colorPicker")
+    .once("ready");
+  EventUtils.synthesizeMouseAtCenter(swatch, {}, swatch.ownerGlobal);
+  await onColorPickerReady;
+
+  const dropperButton = tooltip.container.querySelector("#eyedropper-button");
+
+  info("Click on the eyedropper icon");
+  const onOpened = tooltip.once("eyedropper-opened");
+  dropperButton.click();
+  await onOpened;
+}
+
+/**
+ * Gets a set of declarations for a rule index.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {boolean} addCompatibilityData
+ *        Optional argument to add compatibility dat with the property data
+ *
+ * @returns A Promise that resolves with a Map containing stringified property declarations e.g.
+ *          [
+ *            {
+ *              "color:red":
+ *                {
+ *                  propertyName: "color",
+ *                  propertyValue: "red",
+ *                  warning: "This won't work",
+ *                  used: true,
+ *                  compatibilityData: {
+ *                    isCompatible: true,
+ *                  },
+ *                }
+ *            },
+ *            ...
+ *          ]
+ */
+async function getPropertiesForRuleIndex(
+  view,
+  ruleIndex,
+  addCompatibilityData = false
+) {
+  const declaration = new Map();
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  for (const currProp of ruleEditor.rule.textProps) {
+    const icon = currProp.editor.unusedState;
+    const unused = currProp.editor.element.classList.contains("unused");
+
+    let compatibilityData;
+    let compatibilityIcon;
+    if (addCompatibilityData) {
+      compatibilityData = await currProp.isCompatible();
+      compatibilityIcon = currProp.editor.compatibilityState;
+    }
+
+    declaration.set(`${currProp.name}:${currProp.value}`, {
+      propertyName: currProp.name,
+      propertyValue: currProp.value,
+      icon,
+      data: currProp.isUsed(),
+      warning: unused,
+      used: !unused,
+      ...(addCompatibilityData
+        ? {
+            compatibilityData,
+            compatibilityIcon,
+          }
+        : {}),
+    });
+  }
+
+  return declaration;
+}
+
+/**
+ * Toggle a declaration disabled or enabled.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance
+ * @param {Number} ruleIndex
+ *        The index of the CSS rule where we can find the declaration to be
+ *        toggled.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function toggleDeclaration(view, ruleIndex, declaration) {
+  const textProp = getTextProperty(view, ruleIndex, declaration);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  ok(textProp, `Declaration "${dec}" found`);
+
+  const newStatus = textProp.enabled ? "disabled" : "enabled";
+  info(`Toggling declaration "${dec}" of rule ${ruleIndex} to ${newStatus}`);
+
+  await togglePropStatus(view, textProp);
+  info("Toggled successfully.");
+}
+
+/**
+ * Update a declaration from a CSS rule in the Rules view
+ * by changing its property name, property value or both.
+ *
+ * @param {RuleView} view
+ *        Instance of RuleView.
+ * @param {Number} ruleIndex
+ *        The index of the CSS rule where to find the declaration.
+ * @param {Object} declaration
+ *        An object representing the target declaration e.g. { color: red }.
+ * @param {Object} newDeclaration
+ *        An object representing the desired updated declaration e.g. { display: none }.
+ */
+async function updateDeclaration(
+  view,
+  ruleIndex,
+  declaration,
+  newDeclaration = {}
+) {
+  const textProp = getTextProperty(view, ruleIndex, declaration);
+  const [[name, value]] = Object.entries(declaration);
+  const [[newName, newValue]] = Object.entries(newDeclaration);
+
+  if (newName && name !== newName) {
+    info(
+      `Updating declaration ${name}:${value};
+      Changing ${name} to ${newName}`
+    );
+    await renameProperty(view, textProp, newName);
+  }
+
+  if (newValue && value !== newValue) {
+    info(
+      `Updating declaration ${name}:${value};
+      Changing ${value} to ${newValue}`
+    );
+    await setProperty(view, textProp, newValue);
+  }
+}
+
+/**
+ * Get the TextProperty instance corresponding to a CSS declaration
+ * from a CSS rule in the Rules view.
+ *
+ * @param  {RuleView} view
+ *         Instance of RuleView.
+ * @param  {Number} ruleIndex
+ *         The index of the CSS rule where to find the declaration.
+ * @param  {Object} declaration
+ *         An object representing the target declaration e.g. { color: red }.
+ *         The first TextProperty instance which matches will be returned.
+ * @return {TextProperty}
+ */
+function getTextProperty(view, ruleIndex, declaration) {
+  const ruleEditor = getRuleViewRuleEditor(view, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const textProp = ruleEditor.rule.textProps.find(prop => {
+    return prop.name === name && prop.value === value;
+  });
+
+  if (!textProp) {
+    throw Error(
+      `Declaration ${name}:${value} not found on rule at index ${ruleIndex}`
+    );
+  }
+
+  return textProp;
+}
+
+/**
+ * Check whether the given CSS declaration is compatible or not
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ * @param {Object} options
+ * @param {string | undefined} options.expected
+ *        Expected message ID for the given incompatible property.
+ * If the expected message is not specified (undefined), the given declaration
+ * is inferred as cross-browser compatible and is tested for same.
+ * @param {string | null | undefined} options.expectedLearnMoreUrl
+ *        Expected learn more link. Pass `null` to check that no "Learn more" link is displayed.
+ */
+async function checkDeclarationCompatibility(
+  view,
+  ruleIndex,
+  declaration,
+  { expected, expectedLearnMoreUrl }
+) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex, true);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { compatibilityData } = declarations.get(dec);
+
+  is(
+    !expected,
+    compatibilityData.isCompatible,
+    `"${dec}" has the correct compatibility status in the payload`
+  );
+
+  is(compatibilityData.msgId, expected, `"${dec}" has expected message ID`);
+
+  if (expected) {
+    await checkInteractiveTooltip(
+      view,
+      "compatibility-tooltip",
+      ruleIndex,
+      declaration
+    );
+  }
+
+  if (expectedLearnMoreUrl !== undefined) {
+    // Show the tooltip
+    const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+    const onTooltipReady = tooltip.once("shown");
+    const { compatibilityIcon } = declarations.get(dec);
+    await view.tooltips.onInteractiveTooltipTargetHover(compatibilityIcon);
+    tooltip.show(compatibilityIcon);
+    await onTooltipReady;
+
+    const learnMoreEl = tooltip.panel.querySelector(".link");
+    if (expectedLearnMoreUrl === null) {
+      ok(!learnMoreEl, `"${dec}" has no "Learn more" link`);
+    } else {
+      ok(learnMoreEl, `"${dec}" has a "Learn more" link`);
+
+      const { link } = await simulateLinkClick(learnMoreEl);
+      is(
+        link,
+        expectedLearnMoreUrl,
+        `Click on ${dec} "Learn more" link navigates user to expected url`
+      );
+    }
+
+    // Hide the tooltip.
+    const onTooltipHidden = tooltip.once("hidden");
+    tooltip.hide();
+    await onTooltipHidden;
+  }
+}
+
+/**
+ * Check that a declaration is marked inactive and that it has the expected
+ * warning.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkDeclarationIsInactive(view, ruleIndex, declaration) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { used, warning } = declarations.get(dec);
+
+  ok(!used, `"${dec}" is inactive`);
+  ok(warning, `"${dec}" has a warning`);
+
+  await checkInteractiveTooltip(
+    view,
+    "inactive-css-tooltip",
+    ruleIndex,
+    declaration
+  );
+}
+
+/**
+ * Check that a declaration is marked active.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkDeclarationIsActive(view, ruleIndex, declaration) {
+  const declarations = await getPropertiesForRuleIndex(view, ruleIndex);
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+  const { used, warning } = declarations.get(dec);
+
+  ok(used, `${dec} is active`);
+  ok(!warning, `${dec} has no warning`);
+}
+
+/**
+ * Check that a tooltip contains the correct value.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ *  @param {string} type
+ *        The interactive tooltip type being tested.
+ * @param {Number} ruleIndex
+ *        The index we expect the rule to have in the rule-view.
+ * @param {Object} declaration
+ *        An object representing the declaration e.g. { color: "red" }.
+ */
+async function checkInteractiveTooltip(view, type, ruleIndex, declaration) {
+  // Get the declaration
+  const declarations = await getPropertiesForRuleIndex(
+    view,
+    ruleIndex,
+    type === "compatibility-tooltip"
+  );
+  const [[name, value]] = Object.entries(declaration);
+  const dec = `${name}:${value}`;
+
+  // Get the relevant icon and tooltip payload data
+  let icon;
+  let data;
+  if (type === "inactive-css-tooltip") {
+    ({ icon, data } = declarations.get(dec));
+  } else {
+    const { compatibilityIcon, compatibilityData } = declarations.get(dec);
+    icon = compatibilityIcon;
+    data = compatibilityData;
+  }
+
+  // Get the tooltip.
+  const tooltip = view.tooltips.getTooltip("interactiveTooltip");
+
+  // Get the necessary tooltip helper to fetch the Fluent template.
+  let tooltipHelper;
+  if (type === "inactive-css-tooltip") {
+    tooltipHelper = view.tooltips.inactiveCssTooltipHelper;
+  } else {
+    tooltipHelper = view.tooltips.compatibilityTooltipHelper;
+  }
+
+  // Get the HTML template.
+  const template = tooltipHelper.getTemplate(data, tooltip);
+
+  // Translate the template using Fluent.
+  const { doc } = tooltip;
+  await doc.l10n.translateFragment(template);
+
+  // Get the expected HTML content of the now translated template.
+  const expected = template.firstElementChild.outerHTML;
+
+  // Show the tooltip for the correct icon.
+  const onTooltipReady = tooltip.once("shown");
+  await view.tooltips.onInteractiveTooltipTargetHover(icon);
+  tooltip.show(icon);
+  await onTooltipReady;
+
+  // Get the tooltip's actual HTML content.
+  const actual = tooltip.panel.firstElementChild.outerHTML;
+
+  // Hide the tooltip.
+  const onTooltipHidden = tooltip.once("hidden");
+  tooltip.hide();
+  await onTooltipHidden;
+
+  // Finally, check the values.
+  is(actual, expected, "Tooltip contains the correct value.");
+}
+
+/**
+ * CSS compatibility test runner.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {Array} tests
+ *        An array of test object for this method to consume e.g.
+ *          [
+ *            {
+ *              selector: "#flex-item",
+ *              rules: [
+ *                // Rule Index: 0
+ *                {
+ *                  // If the object doesn't include the "expected"
+ *                  // key, we consider the declaration as
+ *                  // cross-browser compatible and test for same
+ *                  color: { value: "green" },
+ *                },
+ *                // Rule Index: 1
+ *                {
+ *                  cursor:
+ *                  {
+ *                    value: "grab",
+ *                    expected: INCOMPATIBILITY_TOOLTIP_MESSAGE.default,
+ *                    expectedLearnMoreUrl: "https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
+ *                  },
+ *                },
+ *              ],
+ *            },
+ *            ...
+ *          ]
+ */
+async function runCSSCompatibilityTests(view, inspector, tests) {
+  for (const test of tests) {
+    if (test.selector) {
+      await selectNode(test.selector, inspector);
+    }
+
+    for (const [ruleIndex, rules] of test.rules.entries()) {
+      for (const rule in rules) {
+        await checkDeclarationCompatibility(
+          view,
+          ruleIndex,
+          {
+            [rule]: rules[rule].value,
+          },
+          {
+            expected: rules[rule].expected,
+            expectedLearnMoreUrl: rules[rule].expectedLearnMoreUrl,
+          }
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Inactive CSS test runner.
+ *
+ * @param {ruleView} view
+ *        The rule-view instance.
+ * @param {InspectorPanel} inspector
+ *        The instance of InspectorPanel currently loaded in the toolbox.
+ * @param {Array} tests
+ *        An array of test object for this method to consume e.g.
+ *          [
+ *            {
+ *              selector: "#flex-item",
+ *              activeDeclarations: [
+ *                {
+ *                  declarations: {
+ *                    "order": "2",
+ *                  },
+ *                  ruleIndex: 0,
+ *                },
+ *                {
+ *                  declarations: {
+ *                    "flex-basis": "auto",
+ *                    "flex-grow": "1",
+ *                    "flex-shrink": "1",
+ *                  },
+ *                  ruleIndex: 1,
+ *                },
+ *              ],
+ *              inactiveDeclarations: [
+ *                {
+ *                  declaration: {
+ *                    "flex-direction": "row",
+ *                  },
+ *                  ruleIndex: 1,
+ *                },
+ *              ],
+ *            },
+ *            ...
+ *          ]
+ */
+async function runInactiveCSSTests(view, inspector, tests) {
+  for (const test of tests) {
+    if (test.selector) {
+      await selectNode(test.selector, inspector);
+    }
+
+    if (test.activeDeclarations) {
+      info("Checking whether declarations are marked as used.");
+
+      for (const activeDeclarations of test.activeDeclarations) {
+        for (const [name, value] of Object.entries(
+          activeDeclarations.declarations
+        )) {
+          await checkDeclarationIsActive(view, activeDeclarations.ruleIndex, {
+            [name]: value,
+          });
+        }
+      }
+    }
+
+    if (test.inactiveDeclarations) {
+      info("Checking that declarations are unused and have a warning.");
+
+      for (const inactiveDeclaration of test.inactiveDeclarations) {
+        await checkDeclarationIsInactive(
+          view,
+          inactiveDeclaration.ruleIndex,
+          inactiveDeclaration.declaration
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Return the checkbox element from the Rules view corresponding
+ * to the given pseudo-class.
+ *
+ * @param  {Object} view
+ *         Instance of RuleView.
+ * @param  {String} pseudo
+ *         Pseudo-class, like :hover, :active, :focus, etc.
+ * @return {HTMLElement}
+ */
+function getPseudoClassCheckbox(view, pseudo) {
+  return view.pseudoClassCheckboxes.filter(
+    checkbox => checkbox.value === pseudo
+  )[0];
+}
+
+/**
+ * Check that the CSS variable output has the expected class name and data attribute.
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {String} selector
+ *        Selector name for a rule. (e.g. "div", "div::before" and ".sample" etc);
+ * @param {String} propertyName
+ *        Property name (e.g. "color" and "padding-top" etc);
+ * @param {String} expectedClassName
+ *        The class name the variable should have.
+ * @param {String} expectedDatasetValue
+ *        The variable data attribute value.
+ */
+function checkCSSVariableOutput(
+  view,
+  selector,
+  propertyName,
+  expectedClassName,
+  expectedDatasetValue
+) {
+  const target = getRuleViewProperty(
+    view,
+    selector,
+    propertyName
+  ).valueSpan.querySelector(`.${expectedClassName}`);
+
+  ok(target, "The target element should exist");
+  is(target.dataset.variable, expectedDatasetValue);
+}
+
+/**
+ * Return specific rule ancestor data element (i.e. the one containing @layer / @media
+ * information) from the Rules view
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {Number} ruleIndex
+ * @returns {HTMLElement}
+ */
+function getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex) {
+  return view.styleDocument
+    .querySelectorAll(`.ruleview-rule`)
+    [ruleIndex]?.querySelector(`.ruleview-rule-ancestor-data`);
+}
+
+/**
+ * Return specific rule ancestor data text from the Rules view.
+ * Will return something like "@layer topLayer\n@media screen\n@layer".
+ *
+ * @param {RulesView} view
+ *        The RulesView instance.
+ * @param {Number} ruleIndex
+ * @returns {String}
+ */
+function getRuleViewAncestorRulesDataTextByIndex(view, ruleIndex) {
+  return getRuleViewAncestorRulesDataElementByIndex(view, ruleIndex)?.innerText;
+}
diff --git a/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs b/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs
new file mode 100644
index 0000000000..5a68c5571c
--- /dev/null
+++ b/devtools/client/inspector/rules/test/sjs_imported_stylesheet_edit.sjs
@@ -0,0 +1,53 @@
+/* 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/>. */
+
+"use strict";
+const INITIAL_CONTENT = `
+div {
+  color: red
+}
+`;
+
+const UPDATED_CONTENT = `
+span {
+  color: green;
+}
+
+a {
+  color: blue;
+}
+
+div {
+  color: gold;
+}
+`;
+
+/**
+ * This sjs file supports three endpoint:
+ * - "sjs_imported_stylesheet_edit.sjs" -> will return a text/css content which
+ *   will be either INITIAL_CONTENT or UPDATED_CONTENT. Initially will return
+ *   INITIAL_CONTENT.
+ * - "sjs_imported_stylesheet_edit.sjs?update-stylesheet" -> will update an
+ *   internal flag. After calling this URL, the regular endpoint will return
+ *   UPDATED_CONTENT instead of INITIAL_CONTENT
+ * - "sjs_imported_stylesheet_edit.sjs?setup" -> set the internal flag to its
+ *   default value. Should be called at the beginning of every test to avoid
+ *   side effects.
+ */
+function handleRequest(request, response) {
+  const { queryString } = request;
+  if (queryString === "setup") {
+    setState("serve-updated-content", "false");
+    response.setHeader("Content-Type", "text/html");
+    response.write("OK");
+  } else if (queryString === "update-stylesheet") {
+    setState("serve-updated-content", "true");
+    response.setHeader("Content-Type", "text/html");
+    response.write("OK");
+  } else {
+    response.setHeader("Content-Type", "text/css");
+    const shouldServeUpdatedCSS = getState("serve-updated-content") == "true";
+    response.write(shouldServeUpdatedCSS ? UPDATED_CONTENT : INITIAL_CONTENT);
+  }
+}
diff --git a/devtools/client/inspector/rules/test/square_svg.sjs b/devtools/client/inspector/rules/test/square_svg.sjs
new file mode 100644
index 0000000000..7f42dfdae1
--- /dev/null
+++ b/devtools/client/inspector/rules/test/square_svg.sjs
@@ -0,0 +1,13 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+"use strict";
+
+function handleRequest(request, response) {
+  response.setStatusLine(request.httpVersion, 200, "OK");
+  response.setHeader("Access-Control-Allow-Origin", "*", false);
+  response.setHeader("Access-Control-Allow-Headers", "content-type", false);
+  response.setHeader("Content-Type", "image/svg+xml", false);
+  response.write(
+    `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect width="16" height="16" /></svg>`
+  );
+}
diff --git a/devtools/client/inspector/rules/types.js b/devtools/client/inspector/rules/types.js
new file mode 100644
index 0000000000..62c0db7fd4
--- /dev/null
+++ b/devtools/client/inspector/rules/types.js
@@ -0,0 +1,165 @@
+/* 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/. */
+
+"use strict";
+
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+/**
+ * A CSS class.
+ */
+exports.classes = {
+  // The CSS class name.
+  name: PropTypes.string,
+
+  // Whether or not the CSS class is applied.
+  isApplied: PropTypes.bool,
+};
+
+/**
+ * A CSS declaration.
+ */
+const declaration = (exports.declaration = {
+  // Array of the computed properties for a CSS declaration.
+  computedProperties: PropTypes.arrayOf(
+    PropTypes.shape({
+      // Whether or not the computed property is overridden.
+      isOverridden: PropTypes.bool,
+      // The computed property name.
+      name: PropTypes.string,
+      // The computed priority (either "important" or an empty string).
+      priority: PropTypes.string,
+      // The computed property value.
+      value: PropTypes.string,
+    })
+  ),
+
+  // An unique CSS declaration id.
+  id: PropTypes.string,
+
+  // Whether or not the declaration is valid. (Does it make sense for this value
+  // to be assigned to this property name?)
+  isDeclarationValid: PropTypes.bool,
+
+  // Whether or not the declaration is enabled.
+  isEnabled: PropTypes.bool,
+
+  // Whether or not the declaration is invisible. In an inherited rule, only the
+  // inherited declarations are shown and the rest are considered invisible.
+  isInvisible: PropTypes.bool,
+
+  // Whether or not the declaration's property name is known.
+  isKnownProperty: PropTypes.bool,
+
+  // Whether or not the property name is valid.
+  isNameValid: PropTypes.bool,
+
+  // Whether or not the the declaration is overridden.
+  isOverridden: PropTypes.bool,
+
+  // Whether or not the declaration is changed by the user.
+  isPropertyChanged: PropTypes.bool,
+
+  // The declaration's property name.
+  name: PropTypes.string,
+
+  // The declaration's priority (either "important" or an empty string).
+  priority: PropTypes.string,
+
+  // The declaration's property value.
+  value: PropTypes.string,
+});
+
+/**
+ * The pseudo classes redux structure.
+ */
+exports.pseudoClasses = {
+  // An object containing the :active pseudo class toggle state.
+  ":active": PropTypes.shape({
+    // Whether or not the :active pseudo class is checked.
+    isChecked: PropTypes.bool,
+    // Whether or not the :active pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :focus pseudo class toggle state.
+  ":focus": PropTypes.shape({
+    // Whether or not the :focus pseudo class is checked
+    isChecked: PropTypes.bool,
+    // Whether or not the :focus pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :focus-within pseudo class toggle state.
+  ":focus-within": PropTypes.shape({
+    // Whether or not the :focus-within pseudo class is checked
+    isChecked: PropTypes.bool,
+    // Whether or not the :focus-within pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+
+  // An object containing the :hover pseudo class toggle state.
+  ":hover": PropTypes.shape({
+    // Whether or not the :hover pseudo class is checked.
+    isChecked: PropTypes.bool,
+    // Whether or not the :hover pseudo class is disabled.
+    isDisabled: PropTypes.bool,
+  }),
+};
+
+/**
+ * A CSS selector.
+ */
+const selector = (exports.selector = {
+  // Function that returns a Promise containing an unique CSS selector.
+  getUniqueSelector: PropTypes.func,
+  // Array of the selectors that match the selected element.
+  matchedSelectors: PropTypes.arrayOf(PropTypes.string),
+  // The CSS rule's selector text content.
+  selectorText: PropTypes.string,
+  // Array of the CSS rule's selectors.
+  selectors: PropTypes.arrayOf(PropTypes.string),
+});
+
+/**
+ * A CSS Rule.
+ */
+exports.rule = {
+  // Array of CSS declarations.
+  declarations: PropTypes.arrayOf(PropTypes.shape(declaration)),
+
+  // An unique CSS rule id.
+  id: PropTypes.string,
+
+  // An object containing information about the CSS rule's inheritance.
+  inheritance: PropTypes.shape({
+    // The NodeFront of the element this rule was inherited from.
+    inherited: PropTypes.object,
+    // A header label for where the element this rule was inherited from.
+    inheritedSource: PropTypes.string,
+  }),
+
+  // Whether or not the rule does not match the current selected element.
+  isUnmatched: PropTypes.bool,
+
+  // Whether or not the rule is an user agent style.
+  isUserAgentStyle: PropTypes.bool,
+
+  // An object containing information about the CSS keyframes rules.
+  keyframesRule: PropTypes.shape({
+    // The actor ID of the keyframes rule.
+    id: PropTypes.string,
+    // The keyframes rule name.
+    keyframesName: PropTypes.string,
+  }),
+
+  // The pseudo-element keyword used in the rule.
+  pseudoElement: PropTypes.string,
+
+  // An object containing information about the CSS rule's selector.
+  selector: PropTypes.shape(selector),
+
+  // The CSS rule type.
+  type: PropTypes.number,
+};
diff --git a/devtools/client/inspector/rules/utils/l10n.js b/devtools/client/inspector/rules/utils/l10n.js
new file mode 100644
index 0000000000..b90748ae22
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/l10n.js
@@ -0,0 +1,15 @@
+/* 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/. */
+
+"use strict";
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/shared/locales/styleinspector.properties"
+);
+
+module.exports = {
+  getStr: (...args) => L10N.getStr(...args),
+  getFormatStr: (...args) => L10N.getFormatStr(...args),
+};
diff --git a/devtools/client/inspector/rules/utils/moz.build b/devtools/client/inspector/rules/utils/moz.build
new file mode 100644
index 0000000000..cc3fa4dfbd
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/moz.build
@@ -0,0 +1,10 @@
+# -*- 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(
+    "l10n.js",
+    "utils.js",
+)
diff --git a/devtools/client/inspector/rules/utils/utils.js b/devtools/client/inspector/rules/utils/utils.js
new file mode 100644
index 0000000000..c6a23ac59b
--- /dev/null
+++ b/devtools/client/inspector/rules/utils/utils.js
@@ -0,0 +1,357 @@
+/* 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/. */
+
+"use strict";
+
+const {
+  VIEW_NODE_CSS_QUERY_CONTAINER,
+  VIEW_NODE_FONT_TYPE,
+  VIEW_NODE_IMAGE_URL_TYPE,
+  VIEW_NODE_INACTIVE_CSS,
+  VIEW_NODE_LOCATION_TYPE,
+  VIEW_NODE_PROPERTY_TYPE,
+  VIEW_NODE_SELECTOR_TYPE,
+  VIEW_NODE_SHAPE_POINT_TYPE,
+  VIEW_NODE_SHAPE_SWATCH,
+  VIEW_NODE_VALUE_TYPE,
+  VIEW_NODE_VARIABLE_TYPE,
+} = require("resource://devtools/client/inspector/shared/node-types.js");
+const INSET_POINT_TYPES = ["top", "right", "bottom", "left"];
+
+/**
+ * Returns the [Rule] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [Rule] object for
+ * @param {ElementStyle} elementStyle
+ *        The [ElementStyle] associated with the selected element
+ * @return {Rule|null} associated with the given node
+ */
+function getRuleFromNode(node, elementStyle) {
+  const ruleEl = node.closest(".ruleview-rule[data-rule-id]");
+  const ruleId = ruleEl ? ruleEl.dataset.ruleId : null;
+  return ruleId ? elementStyle.getRule(ruleId) : null;
+}
+
+/**
+ * Returns the [TextProperty] object associated with the given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want to find the [TextProperty] object for
+ * @param {Rule|null} rule
+ *        The [Rule] associated with the given node
+ * @return {TextProperty|null} associated with the given node
+ */
+function getDeclarationFromNode(node, rule) {
+  if (!rule) {
+    return null;
+  }
+
+  const declarationEl = node.closest(".ruleview-property[data-declaration-id]");
+  const declarationId = declarationEl
+    ? declarationEl.dataset.declarationId
+    : null;
+  return rule ? rule.getDeclaration(declarationId) : null;
+}
+
+/**
+ * Get the type of a given node in the Rules view.
+ *
+ * @param {DOMNode} node
+ *        The node which we want information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ * @return {Object|null} containing the following props:
+ * - rule {Rule} The Rule object.
+ * - type {String} One of the VIEW_NODE_XXX_TYPE const in
+ *   client/inspector/shared/node-types.
+ * - value {Object} Depends on the type of the node.
+ * - view {String} Always "rule" to indicate the rule view.
+ * Otherwise, returns null if the node isn't anything we care about.
+ */
+// eslint-disable-next-line complexity
+function getNodeInfo(node, elementStyle) {
+  if (!node) {
+    return null;
+  }
+
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const classList = node.classList;
+
+  let type, value;
+
+  if (declaration && classList.contains("ruleview-propertyname")) {
+    type = VIEW_NODE_PROPERTY_TYPE;
+    value = {
+      property: node.textContent,
+      value: getPropertyNameAndValue(node).value,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-propertyvalue")) {
+    type = VIEW_NODE_VALUE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-font-family")) {
+    const { name: propertyName, value: propertyValue } =
+      getPropertyNameAndValue(node);
+    type = VIEW_NODE_FONT_TYPE;
+    value = {
+      property: propertyName,
+      value: propertyValue,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (declaration && classList.contains("ruleview-shape-point")) {
+    type = VIEW_NODE_SHAPE_POINT_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      toggleActive: getShapeToggleActive(node),
+      point: getShapePoint(node),
+    };
+  } else if (declaration && classList.contains("ruleview-unused-warning")) {
+    type = VIEW_NODE_INACTIVE_CSS;
+    value = declaration.isUsed();
+  } else if (node.closest(".container-query-declaration")) {
+    type = VIEW_NODE_CSS_QUERY_CONTAINER;
+    const li = node.closest("li.container-query");
+    value = {
+      ancestorIndex: li.getAttribute("data-ancestor-index"),
+      rule,
+    };
+  } else if (declaration && classList.contains("ruleview-shapeswatch")) {
+    type = VIEW_NODE_SHAPE_SWATCH;
+    value = {
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      textProperty: declaration,
+    };
+  } else if (
+    declaration &&
+    (classList.contains("ruleview-variable") ||
+      classList.contains("ruleview-unmatched-variable"))
+  ) {
+    type = VIEW_NODE_VARIABLE_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.textContent.trim(),
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+      variable: node.dataset.variable,
+    };
+  } else if (
+    declaration &&
+    classList.contains("theme-link") &&
+    !classList.contains("ruleview-rule-source")
+  ) {
+    type = VIEW_NODE_IMAGE_URL_TYPE;
+    value = {
+      property: getPropertyNameAndValue(node).name,
+      value: node.parentNode.textContent,
+      url: node.href,
+      enabled: declaration.enabled,
+      overridden: declaration.overridden,
+      pseudoElement: rule.pseudoElement,
+      sheetHref: rule.domRule.href,
+      textProperty: declaration,
+    };
+  } else if (
+    classList.contains("ruleview-selector-unmatched") ||
+    classList.contains("ruleview-selector-matched") ||
+    classList.contains("ruleview-selectorcontainer") ||
+    classList.contains("ruleview-selector") ||
+    classList.contains("ruleview-selector-attribute") ||
+    classList.contains("ruleview-selector-pseudo-class") ||
+    classList.contains("ruleview-selector-pseudo-class-lock")
+  ) {
+    type = VIEW_NODE_SELECTOR_TYPE;
+    value = rule.selectorText;
+  } else if (
+    classList.contains("ruleview-rule-source") ||
+    classList.contains("ruleview-rule-source-label")
+  ) {
+    type = VIEW_NODE_LOCATION_TYPE;
+    value = rule.sheet?.href ? rule.sheet.href : rule.title;
+  } else {
+    return null;
+  }
+
+  return {
+    rule,
+    type,
+    value,
+    view: "rule",
+  };
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return the textContent for the name and value nodes.
+ * Stops at the first property found, so if node is inside the computed property
+ * list, the computed property will be returned
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @return {Object} {name, value}
+ */
+function getPropertyNameAndValue(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return {
+        name: node.querySelector(".ruleview-propertyname").textContent,
+        value: node.querySelector(".ruleview-propertyvalue").textContent,
+      };
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Walk up the DOM from a given node until a parent property holder is found,
+ * and return an active shape toggle if one exists.
+ *
+ * @param {DOMNode} node
+ *        The node to start from
+ * @returns {DOMNode} The active shape toggle node, if one exists.
+ */
+function getShapeToggleActive(node) {
+  while (node?.classList) {
+    // Check first for ruleview-computed since it's the deepest
+    if (
+      node.classList.contains("ruleview-computed") ||
+      node.classList.contains("ruleview-property")
+    ) {
+      return node.querySelector(".ruleview-shapeswatch.active");
+    }
+
+    node = node.parentNode;
+  }
+
+  return null;
+}
+
+/**
+ * Get the point associated with a shape point node.
+ *
+ * @param {DOMNode} node
+ *        A shape point node
+ * @returns {String} The point associated with the given node.
+ */
+function getShapePoint(node) {
+  const classList = node.classList;
+  let point = node.dataset.point;
+  // Inset points use classes instead of data because a single span can represent
+  // multiple points.
+  const insetClasses = [];
+  classList.forEach(className => {
+    if (INSET_POINT_TYPES.includes(className)) {
+      insetClasses.push(className);
+    }
+  });
+  if (insetClasses.length) {
+    point = insetClasses.join(",");
+  }
+  return point;
+}
+
+/**
+ * Returns an array of CSS variables used in a CSS property value.
+ * If no CSS variables are used, returns an empty array.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "1px solid var(--color, blue)")
+ * @return {Array}
+ *         List of variable names (e.g. ["--color"])
+ *
+ */
+function getCSSVariables(propertyValue = "") {
+  const variables = [];
+  const parts = propertyValue.split(/var\(\s*--/);
+
+  if (parts.length) {
+    // Skip first part. It is the substring before the first occurence of "var(--"
+    for (let i = 1; i < parts.length; i++) {
+      // Split the part by any of the following characters expected after a variable name:
+      // comma, closing parenthesis or whitespace.
+      // Take just the first match. Anything else is either:
+      // - the fallback value, ex: ", blue" from "var(--color, blue)"
+      // - the closing parenthesis, ex: ")" from "var(--color)"
+      const variable = parts[i].split(/[,)\s+]/).shift();
+
+      if (variable) {
+        // Add back the double-dash. The initial string was split by "var(--"
+        variables.push(`--${variable}`);
+      }
+    }
+  }
+
+  return variables;
+}
+
+/**
+ * Get the CSS compatibility issue information for a given node.
+ *
+ * @param {DOMNode} node
+ *        The node which we want compatibility information about
+ * @param {ElementStyle} elementStyle
+ *        The ElementStyle to which this rule belongs
+ */
+async function getNodeCompatibilityInfo(node, elementStyle) {
+  const rule = getRuleFromNode(node, elementStyle);
+  const declaration = getDeclarationFromNode(node, rule);
+  const issue = await declaration.isCompatible();
+
+  return issue;
+}
+
+/**
+ * Returns true if the given CSS property value contains the given variable name.
+ *
+ * @param {String} propertyValue
+ *        CSS property value (e.g. "var(--color)")
+ * @param {String} variableName
+ *        CSS variable name (e.g. "--color")
+ * @return {Boolean}
+ */
+function hasCSSVariable(propertyValue, variableName) {
+  return getCSSVariables(propertyValue).includes(variableName);
+}
+
+module.exports = {
+  getCSSVariables,
+  getNodeInfo,
+  getRuleFromNode,
+  hasCSSVariable,
+  getNodeCompatibilityInfo,
+};
diff --git a/devtools/client/inspector/rules/views/class-list-previewer.js b/devtools/client/inspector/rules/views/class-list-previewer.js
new file mode 100644
index 0000000000..e4e99bedde
--- /dev/null
+++ b/devtools/client/inspector/rules/views/class-list-previewer.js
@@ -0,0 +1,310 @@
+/* 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/. */
+
+"use strict";
+
+const ClassList = require("resource://devtools/client/inspector/rules/models/class-list.js");
+
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const L10N = new LocalizationHelper(
+  "devtools/client/locales/inspector.properties"
+);
+const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
+const { debounce } = require("resource://devtools/shared/debounce.js");
+
+/**
+ * This UI widget shows a textfield and a series of checkboxes in the rule-view. It is
+ * used to toggle classes on the current node selection, and add new classes.
+ */
+class ClassListPreviewer {
+  /*
+   * @param {Inspector} inspector
+   *        The current inspector instance.
+   * @param {DomNode} containerEl
+   *        The element in the rule-view where the widget should go.
+   */
+  constructor(inspector, containerEl) {
+    this.inspector = inspector;
+    this.containerEl = containerEl;
+    this.model = new ClassList(inspector);
+
+    this.onNewSelection = this.onNewSelection.bind(this);
+    this.onCheckBoxChanged = this.onCheckBoxChanged.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onAddElementInputModified = debounce(
+      this.onAddElementInputModified,
+      75,
+      this
+    );
+    this.onCurrentNodeClassChanged = this.onCurrentNodeClassChanged.bind(this);
+    this.onNodeFrontWillUnset = this.onNodeFrontWillUnset.bind(this);
+    this.onAutocompleteClassHovered = debounce(
+      this.onAutocompleteClassHovered,
+      75,
+      this
+    );
+    this.onAutocompleteClosed = this.onAutocompleteClosed.bind(this);
+
+    // Create the add class text field.
+    this.addEl = this.doc.createElement("input");
+    this.addEl.classList.add("devtools-textinput");
+    this.addEl.classList.add("add-class");
+    this.addEl.setAttribute(
+      "placeholder",
+      L10N.getStr("inspector.classPanel.newClass.placeholder")
+    );
+    this.addEl.addEventListener("keydown", this.onKeyDown);
+    this.addEl.addEventListener("input", this.onAddElementInputModified);
+    this.containerEl.appendChild(this.addEl);
+
+    // Create the class checkboxes container.
+    this.classesEl = this.doc.createElement("div");
+    this.classesEl.classList.add("classes");
+    this.containerEl.appendChild(this.classesEl);
+
+    // Create the autocomplete popup
+    this.autocompletePopup = new AutocompletePopup(this.inspector.toolbox.doc, {
+      listId: "inspector_classListPreviewer_autocompletePopupListBox",
+      position: "bottom",
+      autoSelect: true,
+      useXulWrapper: true,
+      input: this.addEl,
+      onClick: (e, item) => {
+        if (item) {
+          this.addEl.value = item.label;
+          this.autocompletePopup.hidePopup();
+          this.autocompletePopup.clearItems();
+          this.model.previewClass(item.label);
+        }
+      },
+      onSelect: item => {
+        if (item) {
+          this.onAutocompleteClassHovered(item?.label);
+        }
+      },
+    });
+
+    // Start listening for interesting events.
+    this.inspector.selection.on("new-node-front", this.onNewSelection);
+    this.inspector.selection.on(
+      "node-front-will-unset",
+      this.onNodeFrontWillUnset
+    );
+    this.containerEl.addEventListener("input", this.onCheckBoxChanged);
+    this.model.on("current-node-class-changed", this.onCurrentNodeClassChanged);
+    this.autocompletePopup.on("popup-closed", this.onAutocompleteClosed);
+
+    this.onNewSelection();
+  }
+
+  destroy() {
+    this.inspector.selection.off("new-node-front", this.onNewSelection);
+    this.inspector.selection.off(
+      "node-front-will-unset",
+      this.onNodeFrontWillUnset
+    );
+    this.autocompletePopup.off("popup-closed", this.onAutocompleteClosed);
+    this.addEl.removeEventListener("keydown", this.onKeyDown);
+    this.addEl.removeEventListener("input", this.onAddElementInputModified);
+    this.containerEl.removeEventListener("input", this.onCheckBoxChanged);
+
+    this.autocompletePopup.destroy();
+
+    this.containerEl.innerHTML = "";
+
+    this.model.destroy();
+    this.containerEl = null;
+    this.inspector = null;
+    this.addEl = null;
+    this.classesEl = null;
+  }
+
+  get doc() {
+    return this.containerEl.ownerDocument;
+  }
+
+  /**
+   * Render the content of the panel. You typically don't need to call this as the panel
+   * renders itself on inspector selection changes.
+   */
+  render() {
+    this.classesEl.innerHTML = "";
+
+    for (const { name, isApplied } of this.model.currentClasses) {
+      const checkBox = this.renderCheckBox(name, isApplied);
+      this.classesEl.appendChild(checkBox);
+    }
+
+    if (!this.model.currentClasses.length) {
+      this.classesEl.appendChild(this.renderNoClassesMessage());
+    }
+  }
+
+  /**
+   * Render a single checkbox for a given classname.
+   *
+   * @param {String} name
+   *        The name of this class.
+   * @param {Boolean} isApplied
+   *        Is this class currently applied on the DOM node.
+   * @return {DOMNode} The DOM element for this checkbox.
+   */
+  renderCheckBox(name, isApplied) {
+    const box = this.doc.createElement("input");
+    box.setAttribute("type", "checkbox");
+    if (isApplied) {
+      box.setAttribute("checked", "checked");
+    }
+    box.dataset.name = name;
+
+    const labelWrapper = this.doc.createElement("label");
+    labelWrapper.setAttribute("title", name);
+    labelWrapper.appendChild(box);
+
+    // A child element is required to do the ellipsis.
+    const label = this.doc.createElement("span");
+    label.textContent = name;
+    labelWrapper.appendChild(label);
+
+    return labelWrapper;
+  }
+
+  /**
+   * Render the message displayed in the panel when the current element has no classes.
+   *
+   * @return {DOMNode} The DOM element for the message.
+   */
+  renderNoClassesMessage() {
+    const msg = this.doc.createElement("p");
+    msg.classList.add("no-classes");
+    msg.textContent = L10N.getStr("inspector.classPanel.noClasses");
+    return msg;
+  }
+
+  /**
+   * Focus the add-class text field.
+   */
+  focusAddClassField() {
+    if (this.addEl) {
+      this.addEl.focus();
+    }
+  }
+
+  onCheckBoxChanged({ target }) {
+    if (!target.dataset.name) {
+      return;
+    }
+
+    this.model.setClassState(target.dataset.name, target.checked).catch(e => {
+      // Only log the error if the panel wasn't destroyed in the meantime.
+      if (this.containerEl) {
+        console.error(e);
+      }
+    });
+  }
+
+  onKeyDown(event) {
+    // If the popup is already open, all the keyboard interaction are handled
+    // directly by the popup component.
+    if (this.autocompletePopup.isOpen) {
+      return;
+    }
+
+    // Open the autocomplete popup on Ctrl+Space / ArrowDown (when the input isn't empty)
+    if (
+      (this.addEl.value && event.key === " " && event.ctrlKey) ||
+      event.key === "ArrowDown"
+    ) {
+      this.onAddElementInputModified();
+      return;
+    }
+
+    if (this.addEl.value !== "" && event.key === "Enter") {
+      this.addClassName(this.addEl.value);
+    }
+  }
+
+  async onAddElementInputModified() {
+    const newValue = this.addEl.value;
+
+    // if the input is empty, let's close the popup, if it was open.
+    if (newValue === "") {
+      if (this.autocompletePopup.isOpen) {
+        this.autocompletePopup.hidePopup();
+        this.autocompletePopup.clearItems();
+      } else {
+        this.model.previewClass("");
+      }
+      return;
+    }
+
+    // Otherwise, we need to update the popup items to match the new input.
+    let items = [];
+    try {
+      const classNames = await this.model.getClassNames(newValue);
+      if (!this.autocompletePopup.isOpen) {
+        this._previewClassesBeforeAutocompletion =
+          this.model.previewClasses.map(previewClass => previewClass.className);
+      }
+      items = classNames.map(className => {
+        return {
+          preLabel: className.substring(0, newValue.length),
+          label: className,
+        };
+      });
+    } catch (e) {
+      // If there was an error while retrieving the classNames, we'll simply NOT show the
+      // popup, which is okay.
+      console.warn("Error when calling getClassNames", e);
+    }
+
+    if (!items.length || (items.length == 1 && items[0].label === newValue)) {
+      this.autocompletePopup.clearItems();
+      await this.autocompletePopup.hidePopup();
+      this.model.previewClass(newValue);
+    } else {
+      this.autocompletePopup.setItems(items);
+      this.autocompletePopup.openPopup();
+    }
+  }
+
+  async addClassName(className) {
+    try {
+      await this.model.addClassName(className);
+      this.render();
+      this.addEl.value = "";
+    } catch (e) {
+      // Only log the error if the panel wasn't destroyed in the meantime.
+      if (this.containerEl) {
+        console.error(e);
+      }
+    }
+  }
+
+  onNewSelection() {
+    this.render();
+  }
+
+  onCurrentNodeClassChanged() {
+    this.render();
+  }
+
+  onNodeFrontWillUnset() {
+    this.model.eraseClassPreview();
+    this.addEl.value = "";
+  }
+
+  onAutocompleteClassHovered(autocompleteItemLabel = "") {
+    if (this.autocompletePopup.isOpen) {
+      this.model.previewClass(autocompleteItemLabel);
+    }
+  }
+
+  onAutocompleteClosed() {
+    const inputValue = this.addEl.value;
+    this.model.previewClass(inputValue);
+  }
+}
+
+module.exports = ClassListPreviewer;
diff --git a/devtools/client/inspector/rules/views/moz.build b/devtools/client/inspector/rules/views/moz.build
new file mode 100644
index 0000000000..d5058bdbc2
--- /dev/null
+++ b/devtools/client/inspector/rules/views/moz.build
@@ -0,0 +1,9 @@
+# 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(
+    "class-list-previewer.js",
+    "rule-editor.js",
+    "text-property-editor.js",
+)
diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js
new file mode 100644
index 0000000000..35c4b41e37
--- /dev/null
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -0,0 +1,842 @@
+/* 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/. */
+
+"use strict";
+
+const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  PSEUDO_CLASSES,
+} = require("resource://devtools/shared/css/constants.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+const Rule = require("resource://devtools/client/inspector/rules/models/rule.js");
+const {
+  InplaceEditor,
+  editableField,
+  editableItem,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const TextPropertyEditor = require("resource://devtools/client/inspector/rules/views/text-property-editor.js");
+const {
+  createChild,
+  blurOnMultipleProperties,
+  promiseWarn,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const {
+  parseNamedDeclarations,
+  parsePseudoClassesAndAttributes,
+  SELECTOR_ATTRIBUTE,
+  SELECTOR_ELEMENT,
+  SELECTOR_PSEUDO_CLASS,
+} = require("resource://devtools/shared/css/parsing-utils.js");
+const EventEmitter = require("resource://devtools/shared/event-emitter.js");
+const CssLogic = require("resource://devtools/shared/inspector/css-logic.js");
+
+loader.lazyRequireGetter(
+  this,
+  "Tools",
+  "resource://devtools/client/definitions.js",
+  true
+);
+
+const STYLE_INSPECTOR_PROPERTIES =
+  "devtools/shared/locales/styleinspector.properties";
+const { LocalizationHelper } = require("resource://devtools/shared/l10n.js");
+const STYLE_INSPECTOR_L10N = new LocalizationHelper(STYLE_INSPECTOR_PROPERTIES);
+
+/**
+ * RuleEditor is responsible for the following:
+ *   Owns a Rule object and creates a list of TextPropertyEditors
+ *     for its TextProperties.
+ *   Manages creation of new text properties.
+ *
+ * @param {CssRuleView} ruleView
+ *        The CssRuleView containg the document holding this rule editor.
+ * @param {Rule} rule
+ *        The Rule object we're editing.
+ */
+function RuleEditor(ruleView, rule) {
+  EventEmitter.decorate(this);
+
+  this.ruleView = ruleView;
+  this.doc = this.ruleView.styleDocument;
+  this.toolbox = this.ruleView.inspector.toolbox;
+  this.telemetry = this.toolbox.telemetry;
+  this.rule = rule;
+
+  this.isEditable = !rule.isSystem;
+  // Flag that blocks updates of the selector and properties when it is
+  // being edited
+  this.isEditing = false;
+
+  this._onNewProperty = this._onNewProperty.bind(this);
+  this._newPropertyDestroy = this._newPropertyDestroy.bind(this);
+  this._onSelectorDone = this._onSelectorDone.bind(this);
+  this._locationChanged = this._locationChanged.bind(this);
+  this.updateSourceLink = this.updateSourceLink.bind(this);
+  this._onToolChanged = this._onToolChanged.bind(this);
+  this._updateLocation = this._updateLocation.bind(this);
+  this._onSourceClick = this._onSourceClick.bind(this);
+
+  this.rule.domRule.on("location-changed", this._locationChanged);
+  this.toolbox.on("tool-registered", this._onToolChanged);
+  this.toolbox.on("tool-unregistered", this._onToolChanged);
+
+  this._create();
+}
+
+RuleEditor.prototype = {
+  destroy() {
+    this.rule.domRule.off("location-changed");
+    this.toolbox.off("tool-registered", this._onToolChanged);
+    this.toolbox.off("tool-unregistered", this._onToolChanged);
+
+    if (this._unsubscribeSourceMap) {
+      this._unsubscribeSourceMap();
+    }
+  },
+
+  get sourceMapURLService() {
+    if (!this._sourceMapURLService) {
+      // sourceMapURLService is a lazy getter in the toolbox.
+      this._sourceMapURLService = this.toolbox.sourceMapURLService;
+    }
+
+    return this._sourceMapURLService;
+  },
+
+  get isSelectorEditable() {
+    const trait =
+      this.isEditable &&
+      this.rule.domRule.type !== ELEMENT_STYLE &&
+      this.rule.domRule.type !== CSSRule.KEYFRAME_RULE;
+
+    // Do not allow editing anonymousselectors until we can
+    // detect mutations on  pseudo elements in Bug 1034110.
+    return trait && !this.rule.elementStyle.element.isAnonymous;
+  },
+
+  _create() {
+    this.element = this.doc.createElement("div");
+    this.element.className = "ruleview-rule devtools-monospace";
+    this.element.dataset.ruleId = this.rule.domRule.actorID;
+    this.element.setAttribute("uneditable", !this.isEditable);
+    this.element.setAttribute("unmatched", this.rule.isUnmatched);
+    this.element._ruleEditor = this;
+
+    // Give a relative position for the inplace editor's measurement
+    // span to be placed absolutely against.
+    this.element.style.position = "relative";
+
+    // Add the source link.
+    this.source = createChild(this.element, "div", {
+      class: "ruleview-rule-source theme-link",
+    });
+    this.source.addEventListener("click", this._onSourceClick);
+
+    const sourceLabel = this.doc.createElement("span");
+    sourceLabel.classList.add("ruleview-rule-source-label");
+    this.source.appendChild(sourceLabel);
+
+    this.updateSourceLink();
+
+    if (this.rule.domRule.ancestorData.length) {
+      const parts = this.rule.domRule.ancestorData.map(
+        (ancestorData, index) => {
+          if (ancestorData.type == "container") {
+            const container = this.doc.createElement("li");
+            container.classList.add("container-query");
+            container.setAttribute("data-ancestor-index", index);
+
+            createChild(container, "span", {
+              class: "container-query-declaration",
+              textContent: `@container${
+                ancestorData.containerName
+                  ? " " + ancestorData.containerName
+                  : ""
+              }`,
+            });
+
+            container.classList.add("has-tooltip");
+
+            const jumpToNodeButton = createChild(container, "button", {
+              class: "open-inspector",
+              title: l10n("rule.containerQuery.selectContainerButton.tooltip"),
+            });
+
+            let containerNodeFront;
+            const getNodeFront = async () => {
+              if (!containerNodeFront) {
+                const res = await this.rule.domRule.getQueryContainerForNode(
+                  index,
+                  this.rule.inherited ||
+                    this.ruleView.inspector.selection.nodeFront
+                );
+                containerNodeFront = res.node;
+              }
+              return containerNodeFront;
+            };
+
+            jumpToNodeButton.addEventListener("click", async () => {
+              const front = await getNodeFront();
+              if (!front) {
+                return;
+              }
+              this.ruleView.inspector.selection.setNodeFront(front);
+              await this.ruleView.inspector.highlighters.hideHighlighterType(
+                this.ruleView.inspector.highlighters.TYPES.BOXMODEL
+              );
+            });
+            container.append(jumpToNodeButton);
+
+            container.addEventListener("mouseenter", async () => {
+              const front = await getNodeFront();
+              if (!front) {
+                return;
+              }
+
+              await this.ruleView.inspector.highlighters.showHighlighterTypeForNode(
+                this.ruleView.inspector.highlighters.TYPES.BOXMODEL,
+                front
+              );
+            });
+            container.addEventListener("mouseleave", async () => {
+              await this.ruleView.inspector.highlighters.hideHighlighterType(
+                this.ruleView.inspector.highlighters.TYPES.BOXMODEL
+              );
+            });
+
+            createChild(container, "span", {
+              // Add a space between the container name (or @container if there's no name)
+              // and the query so the title, which is computed from the DOM, displays correctly.
+              textContent: " " + ancestorData.containerQuery,
+            });
+            return container;
+          }
+          if (ancestorData.type == "layer") {
+            return `@layer${
+              ancestorData.value ? " " + ancestorData.value : ""
+            }`;
+          }
+          if (ancestorData.type == "media") {
+            return `@media ${ancestorData.value}`;
+          }
+
+          if (ancestorData.type == "supports") {
+            return `@supports ${ancestorData.conditionText}`;
+          }
+
+          if (ancestorData.type == "import") {
+            return `@import ${ancestorData.value}`;
+          }
+
+          // We shouldn't get here as `type` should only match to what can be set in
+          // the StyleRuleActor form, but just in case, let's return an empty string.
+          console.warn("Unknown ancestor data type:", ancestorData.type);
+          return ``;
+        }
+      );
+
+      this.ancestorDataEl = createChild(this.element, "ul", {
+        class: "ruleview-rule-ancestor-data theme-link",
+      });
+
+      for (const part of parts) {
+        if (typeof part == "string") {
+          createChild(this.ancestorDataEl, "li", {
+            textContent: part,
+          });
+        } else {
+          this.ancestorDataEl.append(part);
+        }
+      }
+    }
+
+    const code = createChild(this.element, "div", {
+      class: "ruleview-code",
+    });
+
+    const header = createChild(code, "div", {});
+
+    this.selectorText = createChild(header, "span", {
+      class: "ruleview-selectorcontainer",
+      tabindex: this.isSelectorEditable ? "0" : "-1",
+    });
+
+    if (this.isSelectorEditable) {
+      this.selectorText.addEventListener("click", event => {
+        // Clicks within the selector shouldn't propagate any further.
+        event.stopPropagation();
+      });
+
+      editableField({
+        element: this.selectorText,
+        done: this._onSelectorDone,
+        cssProperties: this.rule.cssProperties,
+      });
+    }
+
+    if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE) {
+      let selector = "";
+      if (this.rule.domRule.selectors) {
+        // This is a "normal" rule with a selector.
+        selector = this.rule.domRule.selectors.join(", ");
+        // Otherwise, the rule is either inherited or inline, and selectors will
+        // be computed on demand when the highlighter is requested.
+      }
+
+      const isHighlighted = this.ruleView.isSelectorHighlighted(selector);
+      // Handling of click events is delegated to CssRuleView.handleEvent()
+      createChild(header, "span", {
+        class:
+          "ruleview-selectorhighlighter js-toggle-selector-highlighter" +
+          (isHighlighted ? " highlighted" : ""),
+        "data-selector": selector,
+        title: l10n("rule.selectorHighlighter.tooltip"),
+      });
+    }
+
+    this.openBrace = createChild(header, "span", {
+      class: "ruleview-ruleopen",
+      textContent: " {",
+    });
+
+    this.propertyList = createChild(code, "ul", {
+      class: "ruleview-propertylist",
+    });
+
+    this.populate();
+
+    this.closeBrace = createChild(code, "div", {
+      class: "ruleview-ruleclose",
+      tabindex: this.isEditable ? "0" : "-1",
+      textContent: "}",
+    });
+
+    if (this.isEditable) {
+      // A newProperty editor should only be created when no editor was
+      // previously displayed. Since the editors are cleared on blur,
+      // check this.ruleview.isEditing on mousedown
+      this._ruleViewIsEditing = false;
+
+      code.addEventListener("mousedown", () => {
+        this._ruleViewIsEditing = this.ruleView.isEditing;
+      });
+
+      code.addEventListener("click", event => {
+        const selection = this.doc.defaultView.getSelection();
+        if (selection.isCollapsed && !this._ruleViewIsEditing) {
+          this.newProperty();
+        }
+        // Cleanup the _ruleViewIsEditing flag
+        this._ruleViewIsEditing = false;
+      });
+
+      this.element.addEventListener("mousedown", () => {
+        this.doc.defaultView.focus();
+      });
+
+      // Create a property editor when the close brace is clicked.
+      editableItem({ element: this.closeBrace }, () => {
+        this.newProperty();
+      });
+    }
+  },
+
+  /**
+   * Called when a tool is registered or unregistered.
+   */
+  _onToolChanged() {
+    // When the source editor is registered, update the source links
+    // to be clickable; and if it is unregistered, update the links to
+    // be unclickable.  However, some links are never clickable, so
+    // filter those out first.
+    if (this.source.getAttribute("unselectable") === "permanent") {
+      // Nothing.
+    } else if (this.toolbox.isToolRegistered("styleeditor")) {
+      this.source.removeAttribute("unselectable");
+    } else {
+      this.source.setAttribute("unselectable", "true");
+    }
+  },
+
+  /**
+   * Event handler called when a property changes on the
+   * StyleRuleActor.
+   */
+  _locationChanged() {
+    this.updateSourceLink();
+  },
+
+  _onSourceClick() {
+    if (this.source.hasAttribute("unselectable")) {
+      return;
+    }
+
+    const { inspector } = this.ruleView;
+    if (Tools.styleEditor.isToolSupported(inspector.toolbox)) {
+      inspector.toolbox.viewSourceInStyleEditorByResource(
+        this.rule.sheet,
+        this.rule.ruleLine,
+        this.rule.ruleColumn
+      );
+    }
+  },
+
+  /**
+   * Update the text of the source link to reflect whether we're showing
+   * original sources or not.  This is a callback for
+   * SourceMapURLService.subscribeByID, which see.
+   *
+   * @param {Object | null} originalLocation
+   *        The original position object (url/line/column) or null.
+   */
+  _updateLocation(originalLocation) {
+    let displayURL = this.rule.sheet?.href;
+    const constructed = this.rule.sheet?.constructed;
+    let line = this.rule.ruleLine;
+    if (originalLocation) {
+      displayURL = originalLocation.url;
+      line = originalLocation.line;
+    }
+
+    let sourceTextContent = CssLogic.shortSource({
+      constructed,
+      href: displayURL,
+    });
+    let title = displayURL ? displayURL : sourceTextContent;
+    if (line > 0) {
+      sourceTextContent += ":" + line;
+      title += ":" + line;
+    }
+
+    const sourceLabel = this.element.querySelector(
+      ".ruleview-rule-source-label"
+    );
+    sourceLabel.setAttribute("title", title);
+    sourceLabel.textContent = sourceTextContent;
+  },
+
+  updateSourceLink() {
+    if (this.rule.isSystem) {
+      const sourceLabel = this.element.querySelector(
+        ".ruleview-rule-source-label"
+      );
+      const title = this.rule.title;
+      const sourceHref = this.rule.sheet?.href || title;
+
+      const uaLabel = STYLE_INSPECTOR_L10N.getStr("rule.userAgentStyles");
+      sourceLabel.textContent = uaLabel + " " + title;
+
+      // Special case about:PreferenceStyleSheet, as it is generated on the
+      // fly and the URI is not registered with the about: handler.
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=935803#c37
+      if (sourceHref === "about:PreferenceStyleSheet") {
+        this.source.setAttribute("unselectable", "permanent");
+        sourceLabel.textContent = uaLabel;
+        sourceLabel.removeAttribute("title");
+      }
+    } else {
+      this._updateLocation(null);
+    }
+
+    if (
+      this.rule.sheet &&
+      !this.rule.isSystem &&
+      this.rule.domRule.type !== ELEMENT_STYLE
+    ) {
+      // Only get the original source link if the rule isn't a system
+      // rule and if it isn't an inline rule.
+      if (this._unsubscribeSourceMap) {
+        this._unsubscribeSourceMap();
+      }
+      this._unsubscribeSourceMap = this.sourceMapURLService.subscribeByID(
+        this.rule.sheet.resourceId,
+        this.rule.ruleLine,
+        this.rule.ruleColumn,
+        this._updateLocation
+      );
+      // Set "unselectable" appropriately.
+      this._onToolChanged();
+    } else if (this.rule.domRule.type === ELEMENT_STYLE) {
+      this.source.setAttribute("unselectable", "permanent");
+    } else {
+      // Set "unselectable" appropriately.
+      this._onToolChanged();
+    }
+
+    Promise.resolve().then(() => {
+      this.emit("source-link-updated");
+    });
+  },
+
+  /**
+   * Update the rule editor with the contents of the rule.
+   *
+   * @param {Boolean} reset
+   *        True to completely reset the rule editor before populating.
+   */
+  populate(reset) {
+    // Clear out existing viewers.
+    while (this.selectorText.hasChildNodes()) {
+      this.selectorText.removeChild(this.selectorText.lastChild);
+    }
+
+    // If selector text comes from a css rule, highlight selectors that
+    // actually match.  For custom selector text (such as for the 'element'
+    // style, just show the text directly.
+    if (this.rule.domRule.type === ELEMENT_STYLE) {
+      this.selectorText.textContent = this.rule.selectorText;
+    } else if (this.rule.domRule.type === CSSRule.KEYFRAME_RULE) {
+      this.selectorText.textContent = this.rule.domRule.keyText;
+    } else {
+      this.rule.domRule.selectors.forEach((selector, i) => {
+        if (i !== 0) {
+          createChild(this.selectorText, "span", {
+            class: "ruleview-selector-separator",
+            textContent: ", ",
+          });
+        }
+
+        const containerClass =
+          this.rule.matchedSelectors.indexOf(selector) > -1
+            ? "ruleview-selector-matched"
+            : "ruleview-selector-unmatched";
+        const selectorContainer = createChild(this.selectorText, "span", {
+          class: containerClass,
+        });
+
+        const parsedSelector = parsePseudoClassesAndAttributes(selector);
+
+        for (const selectorText of parsedSelector) {
+          let selectorClass = "";
+
+          switch (selectorText.type) {
+            case SELECTOR_ATTRIBUTE:
+              selectorClass = "ruleview-selector-attribute";
+              break;
+            case SELECTOR_ELEMENT:
+              selectorClass = "ruleview-selector";
+              break;
+            case SELECTOR_PSEUDO_CLASS:
+              selectorClass = PSEUDO_CLASSES.some(
+                pseudo => selectorText.value === pseudo
+              )
+                ? "ruleview-selector-pseudo-class-lock"
+                : "ruleview-selector-pseudo-class";
+              break;
+            default:
+              break;
+          }
+
+          createChild(selectorContainer, "span", {
+            textContent: selectorText.value,
+            class: selectorClass,
+          });
+        }
+      });
+    }
+
+    if (reset) {
+      while (this.propertyList.hasChildNodes()) {
+        this.propertyList.removeChild(this.propertyList.lastChild);
+      }
+    }
+
+    for (const prop of this.rule.textProps) {
+      if (!prop.editor && !prop.invisible) {
+        const editor = new TextPropertyEditor(this, prop);
+        this.propertyList.appendChild(editor.element);
+      } else if (prop.editor) {
+        // If an editor already existed, append it to the bottom now to make sure the
+        // order of editors in the DOM follow the order of the rule's properties.
+        this.propertyList.appendChild(prop.editor.element);
+      }
+    }
+  },
+
+  /**
+   * Programatically add a new property to the rule.
+   *
+   * @param {String} name
+   *        Property name.
+   * @param {String} value
+   *        Property value.
+   * @param {String} priority
+   *        Property priority.
+   * @param {Boolean} enabled
+   *        True if the property should be enabled.
+   * @param {TextProperty} siblingProp
+   *        Optional, property next to which the new property will be added.
+   * @return {TextProperty}
+   *        The new property
+   */
+  addProperty(name, value, priority, enabled, siblingProp) {
+    const prop = this.rule.createProperty(
+      name,
+      value,
+      priority,
+      enabled,
+      siblingProp
+    );
+    const index = this.rule.textProps.indexOf(prop);
+    const editor = new TextPropertyEditor(this, prop);
+
+    // Insert this node before the DOM node that is currently at its new index
+    // in the property list.  There is currently one less node in the DOM than
+    // in the property list, so this causes it to appear after siblingProp.
+    // If there is no node at its index, as is the case where this is the last
+    // node being inserted, then this behaves as appendChild.
+    this.propertyList.insertBefore(
+      editor.element,
+      this.propertyList.children[index]
+    );
+
+    return prop;
+  },
+
+  /**
+   * Programatically add a list of new properties to the rule.  Focus the UI
+   * to the proper location after adding (either focus the value on the
+   * last property if it is empty, or create a new property and focus it).
+   *
+   * @param {Array} properties
+   *        Array of properties, which are objects with this signature:
+   *        {
+   *          name: {string},
+   *          value: {string},
+   *          priority: {string}
+   *        }
+   * @param {TextProperty} siblingProp
+   *        Optional, the property next to which all new props should be added.
+   */
+  addProperties(properties, siblingProp) {
+    if (!properties || !properties.length) {
+      return;
+    }
+
+    let lastProp = siblingProp;
+    for (const p of properties) {
+      const isCommented = Boolean(p.commentOffsets);
+      const enabled = !isCommented;
+      lastProp = this.addProperty(
+        p.name,
+        p.value,
+        p.priority,
+        enabled,
+        lastProp
+      );
+    }
+
+    // Either focus on the last value if incomplete, or start a new one.
+    if (lastProp && lastProp.value.trim() === "") {
+      lastProp.editor.valueSpan.click();
+    } else {
+      this.newProperty();
+    }
+  },
+
+  /**
+   * Create a text input for a property name.  If a non-empty property
+   * name is given, we'll create a real TextProperty and add it to the
+   * rule.
+   */
+  newProperty() {
+    // If we're already creating a new property, ignore this.
+    if (!this.closeBrace.hasAttribute("tabindex")) {
+      return;
+    }
+
+    // While we're editing a new property, it doesn't make sense to
+    // start a second new property editor, so disable focusing the
+    // close brace for now.
+    this.closeBrace.removeAttribute("tabindex");
+
+    this.newPropItem = createChild(this.propertyList, "li", {
+      class: "ruleview-property ruleview-newproperty",
+    });
+
+    this.newPropSpan = createChild(this.newPropItem, "span", {
+      class: "ruleview-propertyname",
+      tabindex: "0",
+    });
+
+    this.multipleAddedProperties = null;
+
+    this.editor = new InplaceEditor({
+      element: this.newPropSpan,
+      done: this._onNewProperty,
+      destroy: this._newPropertyDestroy,
+      advanceChars: ":",
+      contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
+      popup: this.ruleView.popup,
+      cssProperties: this.rule.cssProperties,
+    });
+
+    // Auto-close the input if multiple rules get pasted into new property.
+    this.editor.input.addEventListener(
+      "paste",
+      blurOnMultipleProperties(this.rule.cssProperties)
+    );
+  },
+
+  /**
+   * Called when the new property input has been dismissed.
+   *
+   * @param {String} value
+   *        The value in the editor.
+   * @param {Boolean} commit
+   *        True if the value should be committed.
+   */
+  _onNewProperty(value, commit) {
+    if (!value || !commit) {
+      return;
+    }
+
+    // parseDeclarations allows for name-less declarations, but in the present
+    // case, we're creating a new declaration, it doesn't make sense to accept
+    // these entries
+    this.multipleAddedProperties = parseNamedDeclarations(
+      this.rule.cssProperties.isKnown,
+      value,
+      true
+    );
+
+    // Blur the editor field now and deal with adding declarations later when
+    // the field gets destroyed (see _newPropertyDestroy)
+    this.editor.input.blur();
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+  },
+
+  /**
+   * Called when the new property editor is destroyed.
+   * This is where the properties (type TextProperty) are actually being
+   * added, since we want to wait until after the inplace editor `destroy`
+   * event has been fired to keep consistent UI state.
+   */
+  _newPropertyDestroy() {
+    // We're done, make the close brace focusable again.
+    this.closeBrace.setAttribute("tabindex", "0");
+
+    this.propertyList.removeChild(this.newPropItem);
+    delete this.newPropItem;
+    delete this.newPropSpan;
+
+    // If properties were added, we want to focus the proper element.
+    // If the last new property has no value, focus the value on it.
+    // Otherwise, start a new property and focus that field.
+    if (this.multipleAddedProperties && this.multipleAddedProperties.length) {
+      this.addProperties(this.multipleAddedProperties);
+    }
+  },
+
+  /**
+   * Called when the selector's inplace editor is closed.
+   * Ignores the change if the user pressed escape, otherwise
+   * commits it.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  async _onSelectorDone(value, commit, direction) {
+    if (
+      !commit ||
+      this.isEditing ||
+      value === "" ||
+      value === this.rule.selectorText
+    ) {
+      return;
+    }
+
+    const ruleView = this.ruleView;
+    const elementStyle = ruleView._elementStyle;
+    const element = elementStyle.element;
+
+    this.isEditing = true;
+
+    // Remove highlighter for the previous selector.
+    if (this.ruleView.isSelectorHighlighted(this.rule.selectorText)) {
+      await this.ruleView.toggleSelectorHighlighter(this.rule.selectorText);
+    }
+
+    try {
+      const response = await this.rule.domRule.modifySelector(element, value);
+
+      // We recompute the list of applied styles, because editing a
+      // selector might cause this rule's position to change.
+      const applied = await elementStyle.pageStyle.getApplied(element, {
+        inherited: true,
+        matchedSelectors: true,
+        filter: elementStyle.showUserAgentStyles ? "ua" : undefined,
+      });
+
+      this.isEditing = false;
+
+      const { ruleProps, isMatching } = response;
+      if (!ruleProps) {
+        // Notify for changes, even when nothing changes,
+        // just to allow tests being able to track end of this request.
+        ruleView.emit("ruleview-invalid-selector");
+        return;
+      }
+
+      ruleProps.isUnmatched = !isMatching;
+      const newRule = new Rule(elementStyle, ruleProps);
+      const editor = new RuleEditor(ruleView, newRule);
+      const rules = elementStyle.rules;
+
+      let newRuleIndex = applied.findIndex(r => r.rule == ruleProps.rule);
+      const oldIndex = rules.indexOf(this.rule);
+
+      // If the selector no longer matches, then we leave the rule in
+      // the same relative position.
+      if (newRuleIndex === -1) {
+        newRuleIndex = oldIndex;
+      }
+
+      // Remove the old rule and insert the new rule.
+      rules.splice(oldIndex, 1);
+      rules.splice(newRuleIndex, 0, newRule);
+      elementStyle._changed();
+      elementStyle.onRuleUpdated();
+
+      // We install the new editor in place of the old -- you might
+      // think we would replicate the list-modification logic above,
+      // but that is complicated due to the way the UI installs
+      // pseudo-element rules and the like.
+      this.element.parentNode.replaceChild(editor.element, this.element);
+
+      editor._moveSelectorFocus(direction);
+    } catch (err) {
+      this.isEditing = false;
+      promiseWarn(err);
+    }
+  },
+
+  /**
+   * Handle moving the focus change after a tab or return keypress in the
+   * selector inplace editor.
+   *
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  _moveSelectorFocus(direction) {
+    if (!direction || direction === Services.focus.MOVEFOCUS_BACKWARD) {
+      return;
+    }
+
+    if (this.rule.textProps.length) {
+      this.rule.textProps[0].editor.nameSpan.click();
+    } else {
+      this.propertyList.click();
+    }
+  },
+};
+
+module.exports = RuleEditor;
diff --git a/devtools/client/inspector/rules/views/text-property-editor.js b/devtools/client/inspector/rules/views/text-property-editor.js
new file mode 100644
index 0000000000..28340c8a14
--- /dev/null
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -0,0 +1,1598 @@
+/* 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/. */
+
+"use strict";
+
+const { l10n } = require("resource://devtools/shared/inspector/css-logic.js");
+const {
+  InplaceEditor,
+  editableField,
+} = require("resource://devtools/client/shared/inplace-editor.js");
+const {
+  createChild,
+  appendText,
+  advanceValidate,
+  blurOnMultipleProperties,
+} = require("resource://devtools/client/inspector/shared/utils.js");
+const { throttle } = require("resource://devtools/shared/throttle.js");
+const {
+  style: { ELEMENT_STYLE },
+} = require("resource://devtools/shared/constants.js");
+
+loader.lazyRequireGetter(
+  this,
+  "openContentLink",
+  "resource://devtools/client/shared/link.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  ["parseDeclarations", "parseSingleValue"],
+  "resource://devtools/shared/css/parsing-utils.js",
+  true
+);
+loader.lazyRequireGetter(
+  this,
+  "findCssSelector",
+  "resource://devtools/shared/inspector/css-logic.js",
+  true
+);
+const lazy = {};
+ChromeUtils.defineESModuleGetters(lazy, {
+  AppConstants: "resource://gre/modules/AppConstants.sys.mjs",
+});
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const inlineCompatibilityWarningEnabled = Services.prefs.getBoolPref(
+  "devtools.inspector.ruleview.inline-compatibility-warning.enabled"
+);
+
+const SHARED_SWATCH_CLASS = "ruleview-swatch";
+const COLOR_SWATCH_CLASS = "ruleview-colorswatch";
+const BEZIER_SWATCH_CLASS = "ruleview-bezierswatch";
+const LINEAR_EASING_SWATCH_CLASS = "ruleview-lineareasingswatch";
+const FILTER_SWATCH_CLASS = "ruleview-filterswatch";
+const ANGLE_SWATCH_CLASS = "ruleview-angleswatch";
+const FONT_FAMILY_CLASS = "ruleview-font-family";
+const SHAPE_SWATCH_CLASS = "ruleview-shapeswatch";
+
+/*
+ * An actionable element is an element which on click triggers a specific action
+ * (e.g. shows a color tooltip, opens a link, …).
+ */
+const ACTIONABLE_ELEMENTS_SELECTORS = [
+  `.${COLOR_SWATCH_CLASS}`,
+  `.${BEZIER_SWATCH_CLASS}`,
+  `.${LINEAR_EASING_SWATCH_CLASS}`,
+  `.${FILTER_SWATCH_CLASS}`,
+  `.${ANGLE_SWATCH_CLASS}`,
+  "a",
+];
+
+/*
+ * Speeds at which we update the value when the user is dragging its mouse
+ * over a value.
+ */
+const SLOW_DRAGGING_SPEED = 0.1;
+const DEFAULT_DRAGGING_SPEED = 1;
+const FAST_DRAGGING_SPEED = 10;
+
+// Deadzone in pixels where dragging should not update the value.
+const DRAGGING_DEADZONE_DISTANCE = 5;
+
+const DRAGGABLE_VALUE_CLASSNAME = "ruleview-propertyvalue-draggable";
+const IS_DRAGGING_CLASSNAME = "ruleview-propertyvalue-dragging";
+
+// In order to highlight the used fonts in font-family properties, we
+// retrieve the list of used fonts from the server. That always
+// returns the actually used font family name(s). If the property's
+// authored value is sans-serif for instance, the used font might be
+// arial instead.  So we need the list of all generic font family
+// names to underline those when we find them.
+const GENERIC_FONT_FAMILIES = [
+  "serif",
+  "sans-serif",
+  "cursive",
+  "fantasy",
+  "monospace",
+  "system-ui",
+];
+
+/**
+ * TextPropertyEditor is responsible for the following:
+ *   Owns a TextProperty object.
+ *   Manages changes to the TextProperty.
+ *   Can be expanded to display computed properties.
+ *   Can mark a property disabled or enabled.
+ *
+ * @param {RuleEditor} ruleEditor
+ *        The rule editor that owns this TextPropertyEditor.
+ * @param {TextProperty} property
+ *        The text property to edit.
+ */
+function TextPropertyEditor(ruleEditor, property) {
+  this.ruleEditor = ruleEditor;
+  this.ruleView = this.ruleEditor.ruleView;
+  this.cssProperties = this.ruleView.cssProperties;
+  this.doc = this.ruleEditor.doc;
+  this.popup = this.ruleView.popup;
+  this.prop = property;
+  this.prop.editor = this;
+  this.browserWindow = this.doc.defaultView.top;
+
+  this._populatedComputed = false;
+  this._hasPendingClick = false;
+  this._clickedElementOptions = null;
+
+  this.toolbox = this.ruleView.inspector.toolbox;
+  this.telemetry = this.toolbox.telemetry;
+
+  this._isDragging = false;
+  this._hasDragged = false;
+  this._draggingController = null;
+  this._draggingValueCache = null;
+
+  this.getGridlineNames = this.getGridlineNames.bind(this);
+  this.update = this.update.bind(this);
+  this.updatePropertyState = this.updatePropertyState.bind(this);
+  this._onDraggablePreferenceChanged =
+    this._onDraggablePreferenceChanged.bind(this);
+  this._onEnableChanged = this._onEnableChanged.bind(this);
+  this._onEnableClicked = this._onEnableClicked.bind(this);
+  this._onExpandClicked = this._onExpandClicked.bind(this);
+  this._onNameDone = this._onNameDone.bind(this);
+  this._onStartEditing = this._onStartEditing.bind(this);
+  this._onSwatchCommit = this._onSwatchCommit.bind(this);
+  this._onSwatchPreview = this._onSwatchPreview.bind(this);
+  this._onSwatchRevert = this._onSwatchRevert.bind(this);
+  this._onValidate = this.ruleView.debounce(this._previewValue, 10, this);
+  this._onValueDone = this._onValueDone.bind(this);
+
+  this._draggingOnMouseDown = this._draggingOnMouseDown.bind(this);
+  this._draggingOnMouseMove = throttle(this._draggingOnMouseMove, 30, this);
+  this._draggingOnMouseUp = this._draggingOnMouseUp.bind(this);
+  this._draggingOnKeydown = this._draggingOnKeydown.bind(this);
+
+  this._create();
+  this.update();
+}
+
+TextPropertyEditor.prototype = {
+  /**
+   * Boolean indicating if the name or value is being currently edited.
+   */
+  get editing() {
+    return (
+      !!(
+        this.nameSpan.inplaceEditor ||
+        this.valueSpan.inplaceEditor ||
+        this.ruleView.tooltips.isEditing
+      ) || this.popup.isOpen
+    );
+  },
+
+  /**
+   * Get the rule to the current text property
+   */
+  get rule() {
+    return this.prop.rule;
+  },
+
+  // Exposed for tests.
+  get _DRAGGING_DEADZONE_DISTANCE() {
+    return DRAGGING_DEADZONE_DISTANCE;
+  },
+
+  /**
+   * Create the property editor's DOM.
+   */
+  _create() {
+    this.element = this.doc.createElementNS(HTML_NS, "li");
+    this.element.classList.add("ruleview-property");
+    this.element.dataset.declarationId = this.prop.id;
+    this.element._textPropertyEditor = this;
+
+    this.container = createChild(this.element, "div", {
+      class: "ruleview-propertycontainer",
+    });
+
+    // The enable checkbox will disable or enable the rule.
+    this.enable = createChild(this.container, "input", {
+      type: "checkbox",
+      class: "ruleview-enableproperty",
+      "aria-labelledby": this.prop.id,
+      tabindex: "-1",
+    });
+
+    this.nameContainer = createChild(this.container, "span", {
+      class: "ruleview-namecontainer",
+    });
+
+    // Property name, editable when focused.  Property name
+    // is committed when the editor is unfocused.
+    this.nameSpan = createChild(this.nameContainer, "span", {
+      class: "ruleview-propertyname theme-fg-color3",
+      tabindex: this.ruleEditor.isEditable ? "0" : "-1",
+      id: this.prop.id,
+    });
+
+    appendText(this.nameContainer, ": ");
+
+    // Click to expand the computed properties of the text property.
+    this.expander = createChild(this.container, "span", {
+      class: "ruleview-expander theme-twisty",
+    });
+    this.expander.addEventListener("click", this._onExpandClicked, true);
+
+    // Create a span that will hold the property and semicolon.
+    // Use this span to create a slightly larger click target
+    // for the value.
+    this.valueContainer = createChild(this.container, "span", {
+      class: "ruleview-propertyvaluecontainer",
+    });
+
+    // Property value, editable when focused.  Changes to the
+    // property value are applied as they are typed, and reverted
+    // if the user presses escape.
+    this.valueSpan = createChild(this.valueContainer, "span", {
+      class: "ruleview-propertyvalue theme-fg-color1",
+      tabindex: this.ruleEditor.isEditable ? "0" : "-1",
+    });
+
+    // Storing the TextProperty on the elements for easy access
+    // (for instance by the tooltip)
+    this.valueSpan.textProperty = this.prop;
+    this.nameSpan.textProperty = this.prop;
+
+    appendText(this.valueContainer, ";");
+
+    this.warning = createChild(this.container, "div", {
+      class: "ruleview-warning",
+      hidden: "",
+      title: l10n("rule.warning.title"),
+    });
+
+    this.unusedState = createChild(this.container, "div", {
+      class: "ruleview-unused-warning",
+      hidden: "",
+    });
+
+    if (inlineCompatibilityWarningEnabled) {
+      this.compatibilityState = createChild(this.container, "div", {
+        class: "ruleview-compatibility-warning",
+        hidden: "",
+      });
+    }
+
+    // Filter button that filters for the current property name and is
+    // displayed when the property is overridden by another rule.
+    this.filterProperty = createChild(this.container, "div", {
+      class: "ruleview-overridden-rule-filter",
+      hidden: "",
+      title: l10n("rule.filterProperty.title"),
+    });
+
+    this.filterProperty.addEventListener("click", event => {
+      this.ruleEditor.ruleView.setFilterStyles("`" + this.prop.name + "`");
+      event.stopPropagation();
+    });
+
+    // Holds the viewers for the computed properties.
+    // will be populated in |_updateComputed|.
+    this.computed = createChild(this.element, "ul", {
+      class: "ruleview-computedlist",
+    });
+
+    // Holds the viewers for the overridden shorthand properties.
+    // will be populated in |_updateShorthandOverridden|.
+    this.shorthandOverridden = createChild(this.element, "ul", {
+      class: "ruleview-overridden-items",
+    });
+
+    // Only bind event handlers if the rule is editable.
+    if (this.ruleEditor.isEditable) {
+      this.enable.addEventListener("click", this._onEnableClicked, true);
+      this.enable.addEventListener("change", this._onEnableChanged, true);
+
+      this.nameContainer.addEventListener("click", event => {
+        // Clicks within the name shouldn't propagate any further.
+        event.stopPropagation();
+
+        // Forward clicks on nameContainer to the editable nameSpan
+        if (event.target === this.nameContainer) {
+          this.nameSpan.click();
+        }
+      });
+
+      editableField({
+        start: this._onStartEditing,
+        element: this.nameSpan,
+        done: this._onNameDone,
+        destroy: this.updatePropertyState,
+        advanceChars: ":",
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_PROPERTY,
+        popup: this.popup,
+        cssProperties: this.cssProperties,
+      });
+
+      // Auto blur name field on multiple CSS rules get pasted in.
+      this.nameContainer.addEventListener(
+        "paste",
+        blurOnMultipleProperties(this.cssProperties)
+      );
+
+      this.valueContainer.addEventListener("click", event => {
+        // Clicks within the value shouldn't propagate any further.
+        event.stopPropagation();
+
+        // Forward clicks on valueContainer to the editable valueSpan
+        if (event.target === this.valueContainer) {
+          this.valueSpan.click();
+        }
+      });
+
+      // The mousedown event could trigger a blur event on nameContainer, which
+      // will trigger a call to the update function. The update function clears
+      // valueSpan's markup. Thus the regular click event does not bubble up, and
+      // listener's callbacks are not called.
+      // So we need to remember where the user clicks in order to re-trigger the click
+      // after the valueSpan's markup is re-populated. We only need to track this for
+      // valueSpan's child elements, because direct click on valueSpan will always
+      // trigger a click event.
+      this.valueSpan.addEventListener("mousedown", event => {
+        const clickedEl = event.target;
+        if (clickedEl === this.valueSpan) {
+          return;
+        }
+        this._hasPendingClick = true;
+
+        const matchedSelector = ACTIONABLE_ELEMENTS_SELECTORS.find(selector =>
+          clickedEl.matches(selector)
+        );
+        if (matchedSelector) {
+          const similarElements = [
+            ...this.valueSpan.querySelectorAll(matchedSelector),
+          ];
+          this._clickedElementOptions = {
+            selector: matchedSelector,
+            index: similarElements.indexOf(clickedEl),
+          };
+        }
+      });
+
+      this.valueSpan.addEventListener("mouseup", event => {
+        // if we have dragged, we will handle the pending click in _draggingOnMouseUp instead
+        if (this._hasDragged) {
+          return;
+        }
+        this._clickedElementOptions = null;
+        this._hasPendingClick = false;
+      });
+
+      this.valueSpan.addEventListener("click", event => {
+        const target = event.target;
+
+        if (target.nodeName === "a") {
+          event.stopPropagation();
+          event.preventDefault();
+          openContentLink(target.href);
+        }
+      });
+
+      this.ruleView.on(
+        "draggable-preference-updated",
+        this._onDraggablePreferenceChanged
+      );
+      if (this._isDraggableProperty(this.prop)) {
+        this._addDraggingCapability();
+      }
+
+      editableField({
+        start: this._onStartEditing,
+        element: this.valueSpan,
+        done: this._onValueDone,
+        destroy: this.update,
+        validate: this._onValidate,
+        advanceChars: advanceValidate,
+        contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
+        property: this.prop,
+        defaultIncrement: this.prop.name === "opacity" ? 0.1 : 1,
+        popup: this.popup,
+        multiline: true,
+        maxWidth: () => this.container.getBoundingClientRect().width,
+        cssProperties: this.cssProperties,
+        cssVariables:
+          this.rule.elementStyle.variablesMap.get(this.rule.pseudoElement) ||
+          [],
+        getGridLineNames: this.getGridlineNames,
+        showSuggestCompletionOnEmpty: true,
+      });
+    }
+  },
+
+  /**
+   * Get the grid line names of the grid that the currently selected element is
+   * contained in.
+   *
+   * @return {Object} Contains the names of the cols and rows as arrays
+   * {cols: [], rows: []}.
+   */
+  async getGridlineNames() {
+    const gridLineNames = { cols: [], rows: [] };
+    const layoutInspector =
+      await this.ruleView.inspector.walker.getLayoutInspector();
+    const gridFront = await layoutInspector.getCurrentGrid(
+      this.ruleView.inspector.selection.nodeFront
+    );
+
+    if (gridFront) {
+      const gridFragments = gridFront.gridFragments;
+
+      for (const gridFragment of gridFragments) {
+        for (const rowLine of gridFragment.rows.lines) {
+          // We specifically ignore implicit line names created from implicitly named
+          // areas. This is because showing implicit line names can be confusing for
+          // designers who may have used a line name with "-start" or "-end" and created
+          // an implicitly named grid area without meaning to.
+          let gridArea;
+
+          for (const name of rowLine.names) {
+            const rowLineName =
+              name.substring(0, name.lastIndexOf("-start")) ||
+              name.substring(0, name.lastIndexOf("-end"));
+            gridArea = gridFragment.areas.find(
+              area => area.name === rowLineName
+            );
+
+            if (
+              rowLine.type === "implicit" &&
+              gridArea &&
+              gridArea.type === "implicit"
+            ) {
+              continue;
+            }
+            gridLineNames.rows.push(name);
+          }
+        }
+
+        for (const colLine of gridFragment.cols.lines) {
+          let gridArea;
+
+          for (const name of colLine.names) {
+            const colLineName =
+              name.substring(0, name.lastIndexOf("-start")) ||
+              name.substring(0, name.lastIndexOf("-end"));
+            gridArea = gridFragment.areas.find(
+              area => area.name === colLineName
+            );
+
+            if (
+              colLine.type === "implicit" &&
+              gridArea &&
+              gridArea.type === "implicit"
+            ) {
+              continue;
+            }
+            gridLineNames.cols.push(name);
+          }
+        }
+      }
+    }
+
+    // Emit message for test files
+    this.ruleView.inspector.emit("grid-line-names-updated");
+    return gridLineNames;
+  },
+
+  /**
+   * Get the path from which to resolve requests for this
+   * rule's stylesheet.
+   *
+   * @return {String} the stylesheet's href.
+   */
+  get sheetHref() {
+    const domRule = this.rule.domRule;
+    if (domRule) {
+      return domRule.href || domRule.nodeHref;
+    }
+    return undefined;
+  },
+
+  /**
+   * Populate the span based on changes to the TextProperty.
+   */
+  // eslint-disable-next-line complexity
+  update() {
+    if (this.ruleView.isDestroyed) {
+      return;
+    }
+
+    this.updatePropertyState();
+
+    const name = this.prop.name;
+    this.nameSpan.textContent = name;
+
+    // Combine the property's value and priority into one string for
+    // the value.
+    const store = this.rule.elementStyle.store;
+    let val = store.userProperties.getProperty(
+      this.rule.domRule,
+      name,
+      this.prop.value
+    );
+    if (this.prop.priority) {
+      val += " !" + this.prop.priority;
+    }
+
+    const propDirty = store.userProperties.contains(this.rule.domRule, name);
+
+    if (propDirty) {
+      this.element.setAttribute("dirty", "");
+    } else {
+      this.element.removeAttribute("dirty");
+    }
+
+    const outputParser = this.ruleView._outputParser;
+    const parserOptions = {
+      angleClass: "ruleview-angle",
+      angleSwatchClass: SHARED_SWATCH_CLASS + " " + ANGLE_SWATCH_CLASS,
+      bezierClass: "ruleview-bezier",
+      bezierSwatchClass: SHARED_SWATCH_CLASS + " " + BEZIER_SWATCH_CLASS,
+      colorClass: "ruleview-color",
+      colorSwatchClass: SHARED_SWATCH_CLASS + " " + COLOR_SWATCH_CLASS,
+      filterClass: "ruleview-filter",
+      filterSwatchClass: SHARED_SWATCH_CLASS + " " + FILTER_SWATCH_CLASS,
+      flexClass: "ruleview-flex js-toggle-flexbox-highlighter",
+      gridClass: "ruleview-grid js-toggle-grid-highlighter",
+      linearEasingClass: "ruleview-lineareasing",
+      linearEasingSwatchClass:
+        SHARED_SWATCH_CLASS + " " + LINEAR_EASING_SWATCH_CLASS,
+      shapeClass: "ruleview-shape",
+      shapeSwatchClass: SHAPE_SWATCH_CLASS,
+      // Only ask the parser to convert colors to the default color type specified by the
+      // user if the property hasn't been changed yet.
+      defaultColorType: !propDirty,
+      urlClass: "theme-link",
+      fontFamilyClass: FONT_FAMILY_CLASS,
+      baseURI: this.sheetHref,
+      unmatchedVariableClass: "ruleview-unmatched-variable",
+      matchedVariableClass: "ruleview-variable",
+      getVariableValue: varName =>
+        this.rule.elementStyle.getVariable(varName, this.rule.pseudoElement),
+    };
+    const frag = outputParser.parseCssProperty(name, val, parserOptions);
+
+    // Save the initial value as the last committed value,
+    // for restoring after pressing escape.
+    if (!this.committed) {
+      this.committed = {
+        name,
+        value: frag.textContent,
+        priority: this.prop.priority,
+      };
+    }
+
+    // Save focused element inside value span if one exists before wiping the innerHTML
+    let focusedElSelector = null;
+    if (this.valueSpan.contains(this.doc.activeElement)) {
+      focusedElSelector = findCssSelector(this.doc.activeElement);
+    }
+
+    this.valueSpan.innerHTML = "";
+    this.valueSpan.appendChild(frag);
+    if (
+      this.valueSpan.textProperty?.name === "grid-template-areas" &&
+      this.isValid() &&
+      (this.valueSpan.innerText.includes(`"`) ||
+        this.valueSpan.innerText.includes(`'`))
+    ) {
+      this._formatGridTemplateAreasValue();
+    }
+
+    this.ruleView.emit("property-value-updated", {
+      rule: this.prop.rule,
+      property: name,
+      value: val,
+    });
+
+    // Highlight the currently used font in font-family properties.
+    // If we cannot find a match, highlight the first generic family instead.
+    const fontFamilySpans = this.valueSpan.querySelectorAll(
+      "." + FONT_FAMILY_CLASS
+    );
+    if (fontFamilySpans.length && this.prop.enabled && !this.prop.overridden) {
+      this.rule.elementStyle
+        .getUsedFontFamilies()
+        .then(families => {
+          const usedFontFamilies = families.map(font => font.toLowerCase());
+          let foundMatchingFamily = false;
+          let firstGenericSpan = null;
+
+          for (const span of fontFamilySpans) {
+            const authoredFont = span.textContent.toLowerCase();
+
+            if (
+              !firstGenericSpan &&
+              GENERIC_FONT_FAMILIES.includes(authoredFont)
+            ) {
+              firstGenericSpan = span;
+            }
+
+            if (usedFontFamilies.includes(authoredFont)) {
+              span.classList.add("used-font");
+              foundMatchingFamily = true;
+            }
+          }
+
+          if (!foundMatchingFamily && firstGenericSpan) {
+            firstGenericSpan.classList.add("used-font");
+          }
+
+          this.ruleView.emit("font-highlighted", this.valueSpan);
+        })
+        .catch(e =>
+          console.error("Could not get the list of font families", e)
+        );
+    }
+
+    // Attach the color picker tooltip to the color swatches
+    this._colorSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + COLOR_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._colorSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips.getTooltip("colorPicker").addSwatch(span, {
+          onShow: this._onStartEditing,
+          onPreview: this._onSwatchPreview,
+          onCommit: this._onSwatchCommit,
+          onRevert: this._onSwatchRevert,
+        });
+        const title = l10n("rule.colorSwatch.tooltip");
+        span.setAttribute("title", title);
+        span.dataset.propertyName = this.nameSpan.textContent;
+      }
+    }
+
+    // Attach the cubic-bezier tooltip to the bezier swatches
+    this._bezierSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + BEZIER_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._bezierSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips.getTooltip("cubicBezier").addSwatch(span, {
+          onShow: this._onStartEditing,
+          onPreview: this._onSwatchPreview,
+          onCommit: this._onSwatchCommit,
+          onRevert: this._onSwatchRevert,
+        });
+        const title = l10n("rule.bezierSwatch.tooltip");
+        span.setAttribute("title", title);
+      }
+    }
+
+    // Attach the linear easing tooltip to the linear easing swatches
+    this._linearEasingSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + LINEAR_EASING_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const span of this._linearEasingSwatchSpans) {
+        // Adding this swatch to the list of swatches our colorpicker
+        // knows about
+        this.ruleView.tooltips
+          .getTooltip("linearEaseFunction")
+          .addSwatch(span, {
+            onShow: this._onStartEditing,
+            onPreview: this._onSwatchPreview,
+            onCommit: this._onSwatchCommit,
+            onRevert: this._onSwatchRevert,
+          });
+        span.setAttribute("title", l10n("rule.bezierSwatch.tooltip"));
+      }
+    }
+
+    // Attach the filter editor tooltip to the filter swatch
+    const span = this.valueSpan.querySelector("." + FILTER_SWATCH_CLASS);
+    if (this.ruleEditor.isEditable) {
+      if (span) {
+        parserOptions.filterSwatch = true;
+
+        this.ruleView.tooltips.getTooltip("filterEditor").addSwatch(
+          span,
+          {
+            onShow: this._onStartEditing,
+            onPreview: this._onSwatchPreview,
+            onCommit: this._onSwatchCommit,
+            onRevert: this._onSwatchRevert,
+          },
+          outputParser,
+          parserOptions
+        );
+        const title = l10n("rule.filterSwatch.tooltip");
+        span.setAttribute("title", title);
+      }
+    }
+
+    this.angleSwatchSpans = this.valueSpan.querySelectorAll(
+      "." + ANGLE_SWATCH_CLASS
+    );
+    if (this.ruleEditor.isEditable) {
+      for (const angleSpan of this.angleSwatchSpans) {
+        angleSpan.on("unit-change", this._onSwatchCommit);
+        const title = l10n("rule.angleSwatch.tooltip");
+        angleSpan.setAttribute("title", title);
+      }
+    }
+
+    const nodeFront = this.ruleView.inspector.selection.nodeFront;
+
+    const flexToggle = this.valueSpan.querySelector(".ruleview-flex");
+    if (flexToggle) {
+      flexToggle.setAttribute("title", l10n("rule.flexToggle.tooltip"));
+      flexToggle.classList.toggle(
+        "active",
+        this.ruleView.inspector.highlighters.getNodeForActiveHighlighter(
+          this.ruleView.inspector.highlighters.TYPES.FLEXBOX
+        ) === nodeFront
+      );
+    }
+
+    const gridToggle = this.valueSpan.querySelector(".ruleview-grid");
+    if (gridToggle) {
+      gridToggle.setAttribute("title", l10n("rule.gridToggle.tooltip"));
+      gridToggle.classList.toggle(
+        "active",
+        this.ruleView.highlighters.gridHighlighters.has(nodeFront)
+      );
+      gridToggle.toggleAttribute(
+        "disabled",
+        !this.ruleView.highlighters.canGridHighlighterToggle(nodeFront)
+      );
+    }
+
+    const shapeToggle = this.valueSpan.querySelector(".ruleview-shapeswatch");
+    if (shapeToggle) {
+      const mode =
+        "css" +
+        name
+          .split("-")
+          .map(s => {
+            return s[0].toUpperCase() + s.slice(1);
+          })
+          .join("");
+      shapeToggle.setAttribute("data-mode", mode);
+    }
+
+    // Now that we have updated the property's value, we might have a pending
+    // click on the value container. If we do, we have to trigger a click event
+    // on the right element.
+    // If we are dragging, we don't need to handle the pending click
+    if (this._hasPendingClick && !this._isDragging) {
+      this._hasPendingClick = false;
+      let elToClick;
+
+      if (this._clickedElementOptions !== null) {
+        const { selector, index } = this._clickedElementOptions;
+        elToClick = this.valueSpan.querySelectorAll(selector)[index];
+
+        this._clickedElementOptions = null;
+      }
+
+      if (!elToClick) {
+        elToClick = this.valueSpan;
+      }
+      elToClick.click();
+    }
+
+    // Populate the computed styles and shorthand overridden styles.
+    this._updateComputed();
+    this._updateShorthandOverridden();
+
+    // Update the rule property highlight.
+    this.ruleView._updatePropertyHighlight(this);
+
+    // Restore focus back to the element whose markup was recreated above.
+    if (focusedElSelector) {
+      const elementToFocus = this.doc.querySelector(focusedElSelector);
+      if (elementToFocus) {
+        elementToFocus.focus();
+      }
+    }
+  },
+
+  _onStartEditing() {
+    this.element.classList.remove("ruleview-overridden");
+    this.filterProperty.hidden = true;
+    this.enable.style.visibility = "hidden";
+    this.expander.style.display = "none";
+  },
+
+  get shouldShowComputedExpander() {
+    // Only show the expander to reveal computed properties if:
+    // - the computed properties are actually different from the current property (i.e
+    //   these are longhands while the current property is the shorthand)
+    // - all of the computed properties have defined values. In case the current property
+    //   value contains CSS variables, then the computed properties will be missing and we
+    //   want to avoid showing them.
+    return (
+      this.prop.computed.some(c => c.name !== this.prop.name) &&
+      !this.prop.computed.every(c => !c.value)
+    );
+  },
+
+  /**
+   * Update the visibility of the enable checkbox, the warning indicator, the used
+   * indicator and the filter property, as well as the overridden state of the property.
+   */
+  updatePropertyState() {
+    if (this.prop.enabled) {
+      this.enable.style.removeProperty("visibility");
+    } else {
+      this.enable.style.visibility = "visible";
+    }
+
+    this.enable.checked = this.prop.enabled;
+
+    this.warning.title = !this.isNameValid()
+      ? l10n("rule.warningName.title")
+      : l10n("rule.warning.title");
+
+    this.warning.hidden = this.editing || this.isValid();
+    this.filterProperty.hidden =
+      this.editing ||
+      !this.isValid() ||
+      !this.prop.overridden ||
+      this.ruleEditor.rule.isUnmatched;
+
+    this.expander.style.display = this.shouldShowComputedExpander
+      ? "inline-block"
+      : "none";
+
+    if (
+      !this.editing &&
+      (this.prop.overridden || !this.prop.enabled || !this.prop.isKnownProperty)
+    ) {
+      this.element.classList.add("ruleview-overridden");
+    } else {
+      this.element.classList.remove("ruleview-overridden");
+    }
+
+    this.updatePropertyUsedIndicator();
+
+    if (inlineCompatibilityWarningEnabled) {
+      this.updatePropertyCompatibilityIndicator();
+    }
+  },
+
+  updatePropertyUsedIndicator() {
+    const { used } = this.prop.isUsed();
+
+    if (this.editing || this.prop.overridden || !this.prop.enabled || used) {
+      this.element.classList.remove("unused");
+      this.unusedState.hidden = true;
+    } else {
+      this.element.classList.add("unused");
+      this.unusedState.hidden = false;
+    }
+  },
+
+  async updatePropertyCompatibilityIndicator() {
+    const { isCompatible } = await this.prop.isCompatible();
+
+    if (this.editing || isCompatible) {
+      this.compatibilityState.hidden = true;
+    } else {
+      this.compatibilityState.hidden = false;
+    }
+  },
+
+  /**
+   * Update the indicator for computed styles. The computed styles themselves
+   * are populated on demand, when they become visible.
+   */
+  _updateComputed() {
+    this.computed.innerHTML = "";
+
+    this.expander.style.display =
+      !this.editing && this.shouldShowComputedExpander
+        ? "inline-block"
+        : "none";
+
+    this._populatedComputed = false;
+    if (this.expander.hasAttribute("open")) {
+      this._populateComputed();
+    }
+  },
+
+  /**
+   * Populate the list of computed styles.
+   */
+  _populateComputed() {
+    if (this._populatedComputed) {
+      return;
+    }
+    this._populatedComputed = true;
+
+    for (const computed of this.prop.computed) {
+      // Don't bother to duplicate information already
+      // shown in the text property.
+      if (computed.name === this.prop.name) {
+        continue;
+      }
+
+      // Store the computed style element for easy access when highlighting
+      // styles
+      computed.element = this._createComputedListItem(
+        this.computed,
+        computed,
+        "ruleview-computed"
+      );
+    }
+  },
+
+  /**
+   * Update the indicator for overridden shorthand styles. The shorthand
+   * overridden styles themselves are populated on demand, when they
+   * become visible.
+   */
+  _updateShorthandOverridden() {
+    this.shorthandOverridden.innerHTML = "";
+
+    this._populatedShorthandOverridden = false;
+    this._populateShorthandOverridden();
+  },
+
+  /**
+   * Populate the list of overridden shorthand styles.
+   */
+  _populateShorthandOverridden() {
+    if (
+      this._populatedShorthandOverridden ||
+      this.prop.overridden ||
+      !this.shouldShowComputedExpander
+    ) {
+      return;
+    }
+    this._populatedShorthandOverridden = true;
+
+    for (const computed of this.prop.computed) {
+      // Don't display duplicate information or show properties
+      // that are completely overridden.
+      if (computed.name === this.prop.name || !computed.overridden) {
+        continue;
+      }
+
+      this._createComputedListItem(
+        this.shorthandOverridden,
+        computed,
+        "ruleview-overridden-item"
+      );
+    }
+  },
+
+  /**
+   * Creates and populates a list item with the computed CSS property.
+   */
+  _createComputedListItem(parentEl, computed, className) {
+    const li = createChild(parentEl, "li", {
+      class: className,
+    });
+
+    if (computed.overridden) {
+      li.classList.add("ruleview-overridden");
+    }
+
+    const nameContainer = createChild(li, "span", {
+      class: "ruleview-namecontainer",
+    });
+
+    createChild(nameContainer, "span", {
+      class: "ruleview-propertyname theme-fg-color3",
+      textContent: computed.name,
+    });
+    appendText(nameContainer, ": ");
+
+    const outputParser = this.ruleView._outputParser;
+    const frag = outputParser.parseCssProperty(computed.name, computed.value, {
+      colorSwatchClass: "ruleview-swatch ruleview-colorswatch",
+      urlClass: "theme-link",
+      baseURI: this.sheetHref,
+      fontFamilyClass: "ruleview-font-family",
+    });
+
+    // Store the computed property value that was parsed for output
+    computed.parsedValue = frag.textContent;
+
+    const propertyContainer = createChild(li, "span", {
+      class: "ruleview-propertyvaluecontainer",
+    });
+
+    createChild(propertyContainer, "span", {
+      class: "ruleview-propertyvalue theme-fg-color1",
+      child: frag,
+    });
+    appendText(propertyContainer, ";");
+
+    return li;
+  },
+
+  /**
+   * Handle updates to the preference which disables/enables the feature to
+   * edit size properties on drag.
+   */
+  _onDraggablePreferenceChanged() {
+    if (this._isDraggableProperty(this.prop)) {
+      this._addDraggingCapability();
+    } else {
+      this._removeDraggingCapacity();
+    }
+  },
+
+  /**
+   * Stop clicks propogating down the tree from the enable / disable checkbox.
+   */
+  _onEnableClicked(event) {
+    event.stopPropagation();
+  },
+
+  /**
+   * Handles clicks on the disabled property.
+   */
+  _onEnableChanged(event) {
+    this.prop.setEnabled(this.enable.checked);
+    event.stopPropagation();
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+  },
+
+  /**
+   * Handles clicks on the computed property expander. If the computed list is
+   * open due to user expanding or style filtering, collapse the computed list
+   * and close the expander. Otherwise, add user-open attribute which is used to
+   * expand the computed list and tracks whether or not the computed list is
+   * expanded by manually by the user.
+   */
+  _onExpandClicked(event) {
+    if (
+      this.computed.hasAttribute("filter-open") ||
+      this.computed.hasAttribute("user-open")
+    ) {
+      this.expander.removeAttribute("open");
+      this.computed.removeAttribute("filter-open");
+      this.computed.removeAttribute("user-open");
+      this.shorthandOverridden.hidden = false;
+      this._populateShorthandOverridden();
+    } else {
+      this.expander.setAttribute("open", "true");
+      this.computed.setAttribute("user-open", "");
+      this.shorthandOverridden.hidden = true;
+      this._populateComputed();
+    }
+
+    event.stopPropagation();
+  },
+
+  /**
+   * Expands the computed list when a computed property is matched by the style
+   * filtering. The filter-open attribute is used to track whether or not the
+   * computed list was toggled opened by the filter.
+   */
+  expandForFilter() {
+    if (!this.computed.hasAttribute("user-open")) {
+      this.expander.setAttribute("open", "true");
+      this.computed.setAttribute("filter-open", "");
+      this._populateComputed();
+    }
+  },
+
+  /**
+   * Collapses the computed list that was expanded by style filtering.
+   */
+  collapseForFilter() {
+    this.computed.removeAttribute("filter-open");
+
+    if (!this.computed.hasAttribute("user-open")) {
+      this.expander.removeAttribute("open");
+    }
+  },
+
+  /**
+   * Called when the property name's inplace editor is closed.
+   * Ignores the change if the user pressed escape, otherwise
+   * commits it.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  _onNameDone(value, commit, direction) {
+    const isNameUnchanged =
+      (!commit && !this.ruleEditor.isEditing) || this.committed.name === value;
+    if (this.prop.value && isNameUnchanged) {
+      return;
+    }
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+
+    // Remove a property if the name is empty
+    if (!value.trim()) {
+      this.remove(direction);
+      return;
+    }
+
+    // Remove a property if the property value is empty and the property
+    // value is not about to be focused
+    if (!this.prop.value && direction !== Services.focus.MOVEFOCUS_FORWARD) {
+      this.remove(direction);
+      return;
+    }
+
+    // Adding multiple rules inside of name field overwrites the current
+    // property with the first, then adds any more onto the property list.
+    const properties = parseDeclarations(this.cssProperties.isKnown, value);
+
+    if (properties.length) {
+      this.prop.setName(properties[0].name);
+      this.committed.name = this.prop.name;
+
+      if (!this.prop.enabled) {
+        this.prop.setEnabled(true);
+      }
+
+      if (properties.length > 1) {
+        this.prop.setValue(properties[0].value, properties[0].priority);
+        this.ruleEditor.addProperties(properties.slice(1), this.prop);
+      }
+    }
+  },
+
+  /**
+   * Remove property from style and the editors from DOM.
+   * Begin editing next or previous available property given the focus
+   * direction.
+   *
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  remove(direction) {
+    if (this._colorSwatchSpans && this._colorSwatchSpans.length) {
+      for (const span of this._colorSwatchSpans) {
+        this.ruleView.tooltips.getTooltip("colorPicker").removeSwatch(span);
+        span.off("unit-change", this._onSwatchCommit);
+      }
+    }
+
+    if (this.angleSwatchSpans && this.angleSwatchSpans.length) {
+      for (const span of this.angleSwatchSpans) {
+        span.off("unit-change", this._onSwatchCommit);
+      }
+    }
+
+    this.ruleView.off(
+      "draggable-preference-updated",
+      this._onDraggablePreferenceChanged
+    );
+
+    this.element.remove();
+    this.ruleEditor.rule.editClosestTextProperty(this.prop, direction);
+    this.nameSpan.textProperty = null;
+    this.valueSpan.textProperty = null;
+    this.prop.remove();
+  },
+
+  /**
+   * Called when a value editor closes.  If the user pressed escape,
+   * revert to the value this property had before editing.
+   *
+   * @param {String} value
+   *        The value contained in the editor.
+   * @param {Boolean} commit
+   *        True if the change should be applied.
+   * @param {Number} direction
+   *        The move focus direction number.
+   */
+  _onValueDone(value = "", commit, direction) {
+    const parsedProperties = this._getValueAndExtraProperties(value);
+    const val = parseSingleValue(
+      this.cssProperties.isKnown,
+      parsedProperties.firstValue
+    );
+    const isValueUnchanged =
+      (!commit && !this.ruleEditor.isEditing) ||
+      (!parsedProperties.propertiesToAdd.length &&
+        this.committed.value === val.value &&
+        this.committed.priority === val.priority);
+
+    // If the value is not empty and unchanged, revert the property back to
+    // its original value and enabled or disabled state
+    if (value.trim() && isValueUnchanged) {
+      this.ruleEditor.rule.previewPropertyValue(
+        this.prop,
+        val.value,
+        val.priority
+      );
+      this.rule.setPropertyEnabled(this.prop, this.prop.enabled);
+      return;
+    }
+
+    // Check if unit of value changed to add dragging feature
+    if (this._isDraggableProperty(val)) {
+      this._addDraggingCapability();
+    } else {
+      this._removeDraggingCapacity();
+    }
+
+    this.telemetry.recordEvent("edit_rule", "ruleview");
+
+    // First, set this property value (common case, only modified a property)
+    this.prop.setValue(val.value, val.priority);
+
+    if (!this.prop.enabled) {
+      this.prop.setEnabled(true);
+    }
+
+    this.committed.value = this.prop.value;
+    this.committed.priority = this.prop.priority;
+
+    // If needed, add any new properties after this.prop.
+    this.ruleEditor.addProperties(parsedProperties.propertiesToAdd, this.prop);
+
+    // If the input value is empty and the focus is moving forward to the next
+    // editable field, then remove the whole property.
+    // A timeout is used here to accurately check the state, since the inplace
+    // editor `done` and `destroy` events fire before the next editor
+    // is focused.
+    if (!value.trim() && direction !== Services.focus.MOVEFOCUS_BACKWARD) {
+      setTimeout(() => {
+        if (!this.editing) {
+          this.remove(direction);
+        }
+      }, 0);
+    }
+  },
+
+  /**
+   * Called when the swatch editor wants to commit a value change.
+   */
+  _onSwatchCommit() {
+    this._onValueDone(this.valueSpan.textContent, true);
+    this.update();
+  },
+
+  /**
+   * Called when the swatch editor wants to preview a value change.
+   */
+  _onSwatchPreview() {
+    this._previewValue(this.valueSpan.textContent);
+  },
+
+  /**
+   * Called when the swatch editor closes from an ESC. Revert to the original
+   * value of this property before editing.
+   */
+  _onSwatchRevert() {
+    this._previewValue(this.prop.value, true);
+    this.update();
+  },
+
+  /**
+   * Parse a value string and break it into pieces, starting with the
+   * first value, and into an array of additional properties (if any).
+   *
+   * Example: Calling with "red; width: 100px" would return
+   * { firstValue: "red", propertiesToAdd: [{ name: "width", value: "100px" }] }
+   *
+   * @param {String} value
+   *        The string to parse
+   * @return {Object} An object with the following properties:
+   *        firstValue: A string containing a simple value, like
+   *                    "red" or "100px!important"
+   *        propertiesToAdd: An array with additional properties, following the
+   *                         parseDeclarations format of {name,value,priority}
+   */
+  _getValueAndExtraProperties(value) {
+    // The inplace editor will prevent manual typing of multiple properties,
+    // but we need to deal with the case during a paste event.
+    // Adding multiple properties inside of value editor sets value with the
+    // first, then adds any more onto the property list (below this property).
+    let firstValue = value;
+    let propertiesToAdd = [];
+
+    const properties = parseDeclarations(this.cssProperties.isKnown, value);
+
+    // Check to see if the input string can be parsed as multiple properties
+    if (properties.length) {
+      // Get the first property value (if any), and any remaining
+      // properties (if any)
+      if (!properties[0].name && properties[0].value) {
+        firstValue = properties[0].value;
+        propertiesToAdd = properties.slice(1);
+      } else if (properties[0].name && properties[0].value) {
+        // In some cases, the value could be a property:value pair
+        // itself.  Join them as one value string and append
+        // potentially following properties
+        firstValue = properties[0].name + ": " + properties[0].value;
+        propertiesToAdd = properties.slice(1);
+      }
+    }
+
+    return {
+      propertiesToAdd,
+      firstValue,
+    };
+  },
+
+  /**
+   * Live preview this property, without committing changes.
+   *
+   * @param {String} value
+   *        The value to set the current property to.
+   * @param {Boolean} reverting
+   *        True if we're reverting the previously previewed value
+   */
+  _previewValue(value, reverting = false) {
+    // Since function call is debounced, we need to make sure we are still
+    // editing, and any selector modifications have been completed
+    if (!reverting && (!this.editing || this.ruleEditor.isEditing)) {
+      return;
+    }
+
+    const val = parseSingleValue(this.cssProperties.isKnown, value);
+    this.ruleEditor.rule.previewPropertyValue(
+      this.prop,
+      val.value,
+      val.priority
+    );
+  },
+
+  /**
+   * Check if the event passed has a "small increment" modifier
+   * Alt on macosx and ctrl on other OSs
+   *
+   * @param  {KeyboardEvent} event
+   * @returns {Boolean}
+   */
+  _hasSmallIncrementModifier(event) {
+    const modifier =
+      lazy.AppConstants.platform === "macosx" ? "altKey" : "ctrlKey";
+    return event[modifier] === true;
+  },
+
+  /**
+   * Parses the value to check if it is a dimension
+   * e.g. if the input is "128px" it will return an object like
+   * { groups: { value: "128", unit: "px"}}
+   *
+   * @param  {String} value
+   * @returns {Object|null}
+   */
+  _parseDimension(value) {
+    // The regex handles values like +1, -1, 1e4, .4, 1.3e-4, 1.567
+    const cssDimensionRegex =
+      /^(?<value>[+-]?(\d*\.)?\d+(e[+-]?\d+)?)(?<unit>(%|[a-zA-Z]+))$/;
+    return value.match(cssDimensionRegex);
+  },
+
+  /**
+   * Check if a textProperty value is supported to add the dragging feature
+   *
+   * @param  {TextProperty} textProperty
+   * @returns {Boolean}
+   */
+  _isDraggableProperty(textProperty) {
+    // Check if the feature is explicitly disabled.
+    if (!this.ruleView.draggablePropertiesEnabled) {
+      return false;
+    }
+    // temporary way of fixing the bug when editing inline styles
+    // otherwise the textPropertyEditor object is destroyed on each value edit
+    // See Bug 1755024
+    if (this.rule.domRule.type == ELEMENT_STYLE) {
+      return false;
+    }
+
+    const nbValues = textProperty.value.split(" ").length;
+    if (nbValues > 1) {
+      // we do not support values like "1px solid red" yet
+      // See 1755025
+      return false;
+    }
+
+    const dimensionMatchObj = this._parseDimension(textProperty.value);
+    return !!dimensionMatchObj;
+  },
+
+  _draggingOnMouseDown(event) {
+    this._isDragging = true;
+    this.valueSpan.setPointerCapture(event.pointerId);
+    this._draggingController = new AbortController();
+    const { signal } = this._draggingController;
+
+    // turn off user-select in CSS when we drag
+    this.valueSpan.classList.add(IS_DRAGGING_CLASSNAME);
+
+    const dimensionObj = this._parseDimension(this.prop.value);
+    const { value, unit } = dimensionObj.groups;
+    this._draggingValueCache = {
+      isInDeadzone: true,
+      previousScreenX: event.screenX,
+      value: parseFloat(value),
+      unit,
+    };
+
+    this.valueSpan.addEventListener("mousemove", this._draggingOnMouseMove, {
+      signal,
+    });
+    this.valueSpan.addEventListener("mouseup", this._draggingOnMouseUp, {
+      signal,
+    });
+    this.valueSpan.addEventListener("keydown", this._draggingOnKeydown, {
+      signal,
+    });
+  },
+
+  _draggingOnMouseMove(event) {
+    if (!this._isDragging) {
+      return;
+    }
+
+    const { isInDeadzone, previousScreenX } = this._draggingValueCache;
+    let deltaX = event.screenX - previousScreenX;
+
+    // If `isInDeadzone` is still true, the user has not previously left the deadzone.
+    if (isInDeadzone) {
+      // If the mouse is still in the deadzone, bail out immediately.
+      if (Math.abs(deltaX) < DRAGGING_DEADZONE_DISTANCE) {
+        return;
+      }
+
+      // Otherwise, remove the DRAGGING_DEADZONE_DISTANCE from the current deltaX, so that
+      // the value does not update too abruptly.
+      deltaX =
+        Math.sign(deltaX) * (Math.abs(deltaX) - DRAGGING_DEADZONE_DISTANCE);
+
+      // Update the state to remember the user is out of the deadzone.
+      this._draggingValueCache.isInDeadzone = false;
+    }
+
+    let draggingSpeed = DEFAULT_DRAGGING_SPEED;
+    if (event.shiftKey) {
+      draggingSpeed = FAST_DRAGGING_SPEED;
+    } else if (this._hasSmallIncrementModifier(event)) {
+      draggingSpeed = SLOW_DRAGGING_SPEED;
+    }
+
+    const delta = deltaX * draggingSpeed;
+    this._draggingValueCache.previousScreenX = event.screenX;
+    this._draggingValueCache.value += delta;
+
+    if (delta == 0) {
+      return;
+    }
+
+    const { value, unit } = this._draggingValueCache;
+    // We use toFixed to avoid the case where value is too long, 9.00001px for example
+    const roundedValue = Number.isInteger(value) ? value : value.toFixed(1);
+    this.prop.setValue(roundedValue + unit, this.prop.priority);
+    this.ruleView.emitForTests("property-updated-by-dragging");
+    this._hasDragged = true;
+  },
+
+  _draggingOnMouseUp(event) {
+    if (!this._isDragging) {
+      return;
+    }
+    if (this._hasDragged) {
+      this.committed.value = this.prop.value;
+      this.prop.setEnabled(true);
+    }
+    this._onStopDragging(event);
+  },
+
+  _draggingOnKeydown(event) {
+    if (event.key == "Escape") {
+      this.prop.setValue(this.committed.value, this.committed.priority);
+      this._onStopDragging(event);
+      event.preventDefault();
+    }
+  },
+
+  _onStopDragging(event) {
+    // childHasDragged is used to stop the propagation of a click event when we
+    // release the mouse in the ruleview.
+    // The click event is not emitted when we have a pending click on the text property.
+    if (this._hasDragged && !this._hasPendingClick) {
+      this.ruleView.childHasDragged = true;
+    }
+    this._isDragging = false;
+    this._hasDragged = false;
+    this._draggingValueCache = null;
+    this.valueSpan.releasePointerCapture(event.pointerId);
+    this.valueSpan.classList.remove(IS_DRAGGING_CLASSNAME);
+    this._draggingController.abort();
+  },
+
+  /**
+   * add event listeners to add the ability to modify any size value
+   * by dragging the mouse horizontally
+   */
+  _addDraggingCapability() {
+    if (this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
+      return;
+    }
+    this.valueSpan.classList.add(DRAGGABLE_VALUE_CLASSNAME);
+    this.valueSpan.addEventListener("mousedown", this._draggingOnMouseDown);
+  },
+
+  _removeDraggingCapacity() {
+    if (!this.valueSpan.classList.contains(DRAGGABLE_VALUE_CLASSNAME)) {
+      return;
+    }
+    this._draggingController = null;
+    this.valueSpan.classList.remove(DRAGGABLE_VALUE_CLASSNAME);
+    this.valueSpan.removeEventListener("mousedown", this._draggingOnMouseDown);
+  },
+
+  /**
+   * Validate this property. Does it make sense for this value to be assigned
+   * to this property name? This does not apply the property value
+   *
+   * @return {Boolean} true if the property name + value pair is valid, false otherwise.
+   */
+  isValid() {
+    return this.prop.isValid();
+  },
+
+  /**
+   * Validate the name of this property.
+   * @return {Boolean} true if the property name is valid, false otherwise.
+   */
+  isNameValid() {
+    return this.prop.isNameValid();
+  },
+
+  /**
+   * Display grid-template-area value strings each on their own line
+   * to display it in an ascii-art style matrix
+   */
+  _formatGridTemplateAreasValue() {
+    this.valueSpan.classList.add("ruleview-propertyvalue-break-spaces");
+
+    let quoteSymbolsUsed = [];
+
+    const getQuoteSymbolsUsed = cssValue => {
+      const regex = /\"|\'/g;
+      const found = cssValue.match(regex);
+      quoteSymbolsUsed = found.filter((_, i) => i % 2 === 0);
+    };
+
+    getQuoteSymbolsUsed(this.valueSpan.innerText);
+
+    this.valueSpan.innerText = this.valueSpan.innerText
+      .split('"')
+      .filter(s => s !== "")
+      .map(s => s.split("'"))
+      .flat()
+      .map(s => s.trim().replace(/\s+/g, " "))
+      .filter(s => s.length)
+      .map(line => line.split(" "))
+      .map((line, i, lines) =>
+        line.map((col, j) =>
+          col.padEnd(Math.max(...lines.map(l => l[j].length)), " ")
+        )
+      )
+      .map(
+        (line, i) =>
+          `\n${quoteSymbolsUsed[i]}` + line.join(" ") + quoteSymbolsUsed[i]
+      )
+      .join(" ");
+  },
+};
+
+module.exports = TextPropertyEditor;