--- a/devtools/.eslintrc
+++ b/devtools/.eslintrc
@@ -1,16 +1,17 @@
 {
   "plugins": [
     "react"
   ],
   "globals": {
     "atob": true,
     "btoa": true,
     "Components": true,
+    "CSSRule": true,
     "clearInterval": true,
     "clearTimeout": true,
     "console": true,
     "dump": true,
     "exports": true,
     "isWorker": true,
     "loader": true,
     "module": true,

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -1234,17 +1234,17 @@ CssRuleView.prototype = {
    *         The Rule object.
    * @return {Boolean} true if the rule selector was highlighted,
    *         false otherwise.
    */
   _highlightRuleSelector: function (rule) {
     let isSelectorHighlighted = false;
 
     let selectorNodes = [...rule.editor.selectorText.childNodes];
-    if (rule.domRule.type === Ci.nsIDOMCSSRule.KEYFRAME_RULE) {
+    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 (let selectorNode of selectorNodes) {
       let selector = selectorNode.textContent.toLowerCase();

--- a/devtools/client/inspector/rules/views/rule-editor.js
+++ b/devtools/client/inspector/rules/views/rule-editor.js
@@ -82,17 +82,17 @@ RuleEditor.prototype = {
     this.rule.domRule.off("location-changed");
   },
 
   get isSelectorEditable() {
     let toolbox = this.ruleView.inspector.toolbox;
     let trait = this.isEditable &&
       toolbox.target.client.traits.selectorEditable &&
       this.rule.domRule.type !== ELEMENT_STYLE &&
-      this.rule.domRule.type !== Ci.nsIDOMCSSRule.KEYFRAME_RULE;
+      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: function () {
     this.element = this.doc.createElementNS(HTML_NS, "div");
@@ -141,17 +141,17 @@ RuleEditor.prototype = {
       }, false);
 
       editableField({
         element: this.selectorText,
         done: this._onSelectorDone,
       });
     }
 
-    if (this.rule.domRule.type !== Ci.nsIDOMCSSRule.KEYFRAME_RULE &&
+    if (this.rule.domRule.type !== CSSRule.KEYFRAME_RULE &&
         this.rule.domRule.selectors) {
       let selector = this.rule.domRule.selectors.join(", ");
 
       let selectorHighlighter = createChild(header, "span", {
         class: "ruleview-selectorhighlighter" +
                (this.ruleView.highlightedSelector === selector ?
                 " highlighted" : ""),
         title: CssLogic.l10n("rule.selectorHighlighter.tooltip")
@@ -274,17 +274,17 @@ RuleEditor.prototype = {
       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 === Ci.nsIDOMCSSRule.KEYFRAME_RULE) {
+    } 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: ", "
           });

--- a/devtools/shared/builtin-modules.js
+++ b/devtools/shared/builtin-modules.js
@@ -288,8 +288,9 @@ defineLazyGetter(globals, "setInterval",
   return Cu.import("resource://gre/modules/Timer.jsm", {}).setInterval;
 });
 defineLazyGetter(globals, "URL", () => {
   let sandbox
     = Cu.Sandbox(CC("@mozilla.org/systemprincipal;1", "nsIPrincipal")(),
                  {wantGlobalProperties: ["URL"]});
   return sandbox.URL;
 });
+defineLazyGetter(globals, "CSSRule", () => Ci.nsIDOMCSSRule);

--- a/devtools/shared/inspector/css-logic.js
+++ b/devtools/shared/inspector/css-logic.js
@@ -302,21 +302,21 @@ CssLogic.prototype = {
 
     // Cache the sheet.
     let cssSheet = this.getSheet(domSheet, this._sheetIndex++);
     if (cssSheet._passId != this._passId) {
       cssSheet._passId = this._passId;
 
       // Find import and keyframes rules.
       for (let aDomRule of domSheet.cssRules) {
-        if (aDomRule.type == Ci.nsIDOMCSSRule.IMPORT_RULE &&
+        if (aDomRule.type == CSSRule.IMPORT_RULE &&
             aDomRule.styleSheet &&
             this.mediaMatches(aDomRule)) {
           this._cacheSheet(aDomRule.styleSheet);
-        } else if (aDomRule.type == Ci.nsIDOMCSSRule.KEYFRAMES_RULE) {
+        } else if (aDomRule.type == CSSRule.KEYFRAMES_RULE) {
           this._keyframesRules.push(aDomRule);
         }
       }
     }
   },
 
   /**
    * Retrieve the list of stylesheets in the document.
@@ -621,17 +621,17 @@ CssLogic.prototype = {
         console.log("CL__buildMatchedRules error: " + ex);
         continue;
       }
 
       // getCSSStyleRules can return null with a shadow DOM element.
       let numDomRules = domRules ? domRules.Count() : 0;
       for (let i = 0; i < numDomRules; i++) {
         let domRule = domRules.GetElementAt(i);
-        if (domRule.type !== Ci.nsIDOMCSSRule.STYLE_RULE) {
+        if (domRule.type !== CSSRule.STYLE_RULE) {
           continue;
         }
 
         let sheet = this.getSheet(domRule.parentStyleSheet, -1);
         if (sheet._passId !== this._passId) {
           sheet.index = sheetIndex++;
           sheet._passId = this._passId;
         }
@@ -1337,20 +1337,20 @@ CssSheet.prototype = {
    * @param {object} scope the scope you want for the callback function. scope
    * will be the this object when callback executes.
    */
   forEachRule: function (callback, scope) {
     let ruleCount = 0;
     let domRules = this.domSheet.cssRules;
 
     function _iterator(domRule) {
-      if (domRule.type == Ci.nsIDOMCSSRule.STYLE_RULE) {
+      if (domRule.type == CSSRule.STYLE_RULE) {
         callback.call(scope, this.getRule(domRule));
         ruleCount++;
-      } else if (domRule.type == Ci.nsIDOMCSSRule.MEDIA_RULE &&
+      } else if (domRule.type == CSSRule.MEDIA_RULE &&
           domRule.cssRules && this._cssLogic.mediaMatches(domRule)) {
         Array.prototype.forEach.call(domRule.cssRules, _iterator, this);
       }
     }
 
     Array.prototype.forEach.call(domRules, _iterator, this);
 
     this._ruleCount = ruleCount;
@@ -1370,19 +1370,19 @@ CssSheet.prototype = {
    * @param {object} scope the scope you want for the callback function. scope
    * will be the this object when callback executes.
    * @return {Boolean} true if callback returns true during any iteration,
    * otherwise false is returned.
    */
   forSomeRules: function (callback, scope) {
     let domRules = this.domSheet.cssRules;
     function _iterator(domRule) {
-      if (domRule.type == Ci.nsIDOMCSSRule.STYLE_RULE) {
+      if (domRule.type == CSSRule.STYLE_RULE) {
         return callback.call(scope, this.getRule(domRule));
-      } else if (domRule.type == Ci.nsIDOMCSSRule.MEDIA_RULE &&
+      } else if (domRule.type == CSSRule.MEDIA_RULE &&
           domRule.cssRules && this._cssLogic.mediaMatches(domRule)) {
         return Array.prototype.some.call(domRule.cssRules, _iterator, this);
       }
       return false;
     }
     return Array.prototype.some.call(domRules, _iterator, this);
   },
 
@@ -1404,17 +1404,17 @@ CssSheet.prototype = {
  * argument must point to the element.
  * @constructor
  */
 function CssRule(cssSheet, domRule, element) {
   this._cssSheet = cssSheet;
   this.domRule = domRule;
 
   let parentRule = domRule.parentRule;
-  if (parentRule && parentRule.type == Ci.nsIDOMCSSRule.MEDIA_RULE) {
+  if (parentRule && parentRule.type == CSSRule.MEDIA_RULE) {
     this.mediaText = parentRule.media.mediaText;
   }
 
   if (this._cssSheet) {
     // parse domRule.selectorText on call to this.selectors
     this._selectors = null;
     this.line = domUtils.getRuleLine(this.domRule);
     this.source = this._cssSheet.shortSource + ":" + this.line;