--- a/browser/devtools/styleinspector/rule-view.js
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -1551,19 +1551,17 @@ CssRuleView.prototype = {
   _handlePrefChange: function(pref) {
     if (pref === PREF_UA_STYLES) {
       this.showUserAgentStyles = Services.prefs.getBoolPref(pref);
     }
 
     // Reselect the currently selected element
     let refreshOnPrefs = [PREF_UA_STYLES, PREF_DEFAULT_COLOR_UNIT];
     if (refreshOnPrefs.indexOf(pref) > -1) {
-      let element = this._viewedElement;
-      this._viewedElement = null;
-      this.selectElement(element);
+      this.selectElement(this._viewedElement, true);
     }
   },
 
   /**
    * Update source links when pref for showing original sources changes
    */
   _onSourcePrefChanged: function() {
     if (this._elementStyle && this._elementStyle.rules) {
@@ -1766,52 +1764,62 @@ CssRuleView.prototype = {
     this.popup.destroy();
   },
 
   /**
    * 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: function(element) {
-    if (this._viewedElement === element) {
+  selectElement: function(element, allowRefresh = false) {
+    let refresh = (this._viewedElement === element);
+    if (refresh && !allowRefresh) {
       return promise.resolve(undefined);
     }
 
     if (this.popup.isOpen) {
       this.popup.hidePopup();
     }
 
-    this.clear();
+    this.clear(false);
+    this._viewedElement = element;
+
     this.clearPseudoClassPanel();
-
-    this._viewedElement = element;
     this.refreshAddRuleButtonState();
 
     if (!this._viewedElement) {
+      this._clearRules();
       this._showEmpty();
       this.refreshPseudoClassPanel();
       return promise.resolve(undefined);
     }
 
     this._elementStyle = new ElementStyle(element, this.store,
       this.pageStyle, this.showUserAgentStyles);
 
     return this._elementStyle.init().then(() => {
       if (this._viewedElement === element) {
         return this._populate();
       }
     }).then(() => {
       if (this._viewedElement === element) {
+        if (!refresh) {
+          this.element.scrollTop = 0;
+        }
         this._elementStyle.onChanged = () => {
           this._changed();
         };
       }
-    }).then(null, console.error);
+    }).then(null, e => {
+      this._clearRules();
+      console.error(e);
+    });
   },
 
   /**
    * Update the rules for the currently highlighted element.
    */
   refreshPanel: function() {
     // Ignore refreshes during editing or when no element is selected.
     if (this.isEditing || !this._elementStyle) {
@@ -1822,17 +1830,17 @@ CssRuleView.prototype = {
     let promises = [];
     for (let rule of this._elementStyle.rules) {
       if (rule._applyingModifications) {
         promises.push(rule._applyingModifications);
       }
     }
 
     return promise.all(promises).then(() => {
-      return this._populate(true);
+      return this._populate();
     });
   },
 
   /**
    * Clear the pseudo class options panel by removing the checked and disabled
    * attributes for each checkbox.
    */
   clearPseudoClassPanel: function() {
@@ -1865,26 +1873,24 @@ CssRuleView.prototype = {
         case ":focus": {
           this.focusCheckbox.checked = true;
           break;
         }
       }
     }
   },
 
-  _populate: function(clearRules = false) {
+  _populate: function() {
     let elementStyle = this._elementStyle;
     return this._elementStyle.populate().then(() => {
       if (this._elementStyle !== elementStyle || this.isDestroyed) {
         return;
       }
 
-      if (clearRules) {
-        this._clearRules();
-      }
+      this._clearRules();
       this._createEditors();
 
       this.refreshPseudoClassPanel();
 
       // Notify anyone that cares that we refreshed.
       this.emit("ruleview-refreshed");
     }).then(null, promiseWarn);
   },
@@ -1902,28 +1908,28 @@ CssRuleView.prototype = {
       textContent: CssLogic.l10n("rule.empty")
     });
   },
 
   /**
    * Clear the rules.
    */
   _clearRules: function() {
-    while (this.element.hasChildNodes()) {
-      this.element.removeChild(this.element.lastChild);
-    }
+    this.element.innerHTML = "";
   },
 
   /**
    * Clear the rule view.
    */
-  clear: function() {
+  clear: function(clearDom = true) {
     this.lastSelectorIcon = null;
 
-    this._clearRules();
+    if (clearDom) {
+      this._clearRules();
+    }
     this._viewedElement = null;
 
     if (this._elementStyle) {
       this._elementStyle.destroy();
       this._elementStyle = null;
     }
   },