--- a/devtools/client/inspector/fonts/fonts.js
+++ b/devtools/client/inspector/fonts/fonts.js
@@ -583,17 +583,17 @@ class FontInspector {
       filterProperties: FONT_PROPERTIES
     });
     // Clear any references to writer methods and CSS declarations because the node's
     // styles may have changed since the last font editor refresh.
     this.writers.clear();
     this.textProperties.clear();
     // Select the node's inline style as the rule where to write property value changes.
     this.selectedRule =
-      this.ruleView.rules.find(rule => rule.style.type === ELEMENT_STYLE);
+      this.ruleView.rules.find(rule => rule.domRule.type === ELEMENT_STYLE);
     const fontEditor = this.store.getState().fontEditor;
     const properties = this.getFontProperties();
     // Names of fonts declared in font-family property without quotes and space trimmed.
     const declaredFontNames =
       properties["font-family"].split(",").map(font => font.replace(/\"+/g, "").trim());
 
     // Mark available fonts as used if their names appears in the font-family declaration.
     // TODO: sort used fonts in order of font-family declaration.

--- a/devtools/client/inspector/rules/models/rule.js
+++ b/devtools/client/inspector/rules/models/rule.js
@@ -32,18 +32,17 @@ const STYLE_INSPECTOR_L10N = new Localiz
  *          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.
  */
 function Rule(elementStyle, options) {
   this.elementStyle = elementStyle;
-  this.domRule = options.rule || null;
-  this.style = options.rule;
+  this.domRule = options.rule;
   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;
 
@@ -128,17 +127,17 @@ Rule.prototype = {
   /**
    * Returns true if the rule matches the creation options
    * specified.
    *
    * @param {Object} options
    *        Creation options. See the Rule constructor for documentation.
    */
   matches: function(options) {
-    return this.style === options.rule;
+    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
@@ -201,28 +200,28 @@ Rule.prototype = {
       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 > 0) {
-      disabled.set(this.style, disabledProps);
+      disabled.set(this.domRule, disabledProps);
     } else {
-      disabled.delete(this.style);
+      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.style.authoredText)) {
+                                                 this.domRule.authoredText)) {
         cssProps[cssProp.name] = cssProp;
       }
 
       for (const textProp of this.textProps) {
         if (!textProp.enabled) {
           continue;
         }
         let cssProp = cssProps[textProp.name];
@@ -276,20 +275,20 @@ Rule.prototype = {
    * @return {Promise} a promise which will resolve when the edit
    *        is complete
    */
   applyProperties: function(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.style.startModifyingProperties(
+          const modifications = this.domRule.startModifyingProperties(
             this.cssProperties);
           modifier(modifications);
-          if (this.style.canSetRuleText) {
+          if (this.domRule.canSetRuleText) {
             return this._applyPropertiesAuthored(modifications);
           }
           return this._applyPropertiesNoAuthored(modifications);
         }).then(() => {
           this.elementStyle.markOverriddenAll();
 
           if (resultPromise === this._applyingModifications) {
             this._applyingModifications = null;
@@ -353,17 +352,17 @@ Rule.prototype = {
    * @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).
    */
   previewPropertyValue: function(property, value, priority) {
-    const modifications = this.style.startModifyingProperties(this.cssProperties);
+    const modifications = this.domRule.startModifyingProperties(this.cssProperties);
     modifications.setProperty(this.textProps.indexOf(property),
                               property.name, value, priority);
     modifications.apply().then(() => {
       // Ensure dispatching a ruleview-changed event
       // also for previews
       this.elementStyle._changed();
     });
   },
@@ -407,33 +406,33 @@ Rule.prototype = {
    * Get the list of TextProperties from the style. Needs
    * to parse the style's authoredText.
    */
   _getTextProperties: function() {
     const textProps = [];
     const store = this.elementStyle.store;
 
     // Starting with FF49, StyleRuleActors provide parsed declarations.
-    let props = this.style.declarations;
+    let props = this.domRule.declarations;
     if (!props.length) {
       // If the authored text has an invalid property, it will show up
       // as nameless.  Skip these as we don't currently have a good
       // way to display them.
       props = parseNamedDeclarations(this.cssProperties.isKnown,
-                                     this.style.authoredText, true);
+                                     this.domRule.authoredText, true);
     }
 
     for (const prop of props) {
       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.style, 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;
@@ -441,25 +440,25 @@ Rule.prototype = {
 
   /**
    * Return the list of disabled properties from the store for this rule.
    */
   _getDisabledProperties: function() {
     const store = this.elementStyle.store;
 
     // Include properties from the disabled property store, if any.
-    const disabledProps = store.disabled.get(this.style);
+    const disabledProps = store.disabled.get(this.domRule);
     if (!disabledProps) {
       return [];
     }
 
     const textProps = [];
 
     for (const prop of disabledProps) {
-      const value = store.userProperties.getProperty(this.style, prop.name,
+      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;
   },

--- a/devtools/client/inspector/rules/models/text-property.js
+++ b/devtools/client/inspector/rules/models/text-property.js
@@ -114,17 +114,17 @@ TextProperty.prototype = {
       this.updateEditor();
     }
   },
 
   setValue: function(value, priority, force = false) {
     const store = this.rule.elementStyle.store;
 
     if (this.editor && value !== this.editor.committed.value || force) {
-      store.userProperties.setProperty(this.rule.style, this.name, value);
+      store.userProperties.setProperty(this.rule.domRule, this.name, value);
     }
 
     this.rule.setPropertyValue(this, value, priority);
     this.updateEditor();
   },
 
   /**
    * Called when the property's value has been updated externally, and
@@ -139,17 +139,17 @@ TextProperty.prototype = {
       this.updateEditor();
     }
   },
 
   setName: function(name) {
     const store = this.rule.elementStyle.store;
 
     if (name !== this.name) {
-      store.userProperties.setProperty(this.rule.style, name,
+      store.userProperties.setProperty(this.rule.domRule, name,
                                        this.editor.committed.value);
     }
 
     this.rule.setPropertyName(this, name);
     this.updateEditor();
   },
 
   setEnabled: function(value) {

--- a/devtools/client/inspector/rules/views/text-property-editor.js
+++ b/devtools/client/inspector/rules/views/text-property-editor.js
@@ -379,23 +379,23 @@ TextPropertyEditor.prototype = {
     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.style, name,
+    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.style, name);
+    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;