Bug 1192421 - Part 1: Don't clear the rule view when changing selection. r=pbrosset
☠☠ backed out by da9e85e62924 ☠ ☠
authorSimon Lindholm <simon.lindholm10@gmail.com>
Tue, 08 Sep 2015 10:46:16 +0530
changeset 293795 63ace982aa7e80a84ed342476f69ba1a32851b5e
parent 293794 0e678808452535a11c121f26430ec26ffd5ebef2
child 293796 a6ca8c5bb39b2b5fb9bf090a2e671354bc983e33
push id5245
push userraliiev@mozilla.com
push dateThu, 29 Oct 2015 11:30:51 +0000
treeherdermozilla-beta@dac831dc1bd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs1192421
milestone43.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1192421 - Part 1: Don't clear the rule view when changing selection. r=pbrosset
browser/devtools/styleinspector/rule-view.js
--- 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;
     }
   },