Bug 966242 - Get rid of flicker when rule view is refreshed;r=pbrosset
authorBrian Grinstead <bgrinstead@mozilla.com>
Thu, 05 Jun 2014 07:53:45 -0500
changeset 207262 65b0d08a49ac78eb5e729a69a4e8812231ab5593
parent 207261 62385fdd6577156b0e855b1355eb7d491983ec12
child 207263 413ea58159cf6b333798351ba1824122d98eb5cc
push id494
push userraliiev@mozilla.com
push dateMon, 25 Aug 2014 18:42:16 +0000
treeherdermozilla-release@a3cc3e46b571 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs966242
milestone32.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 966242 - Get rid of flicker when rule view is refreshed;r=pbrosset
browser/devtools/styleinspector/rule-view.js
browser/devtools/styleinspector/style-inspector.js
--- a/browser/devtools/styleinspector/rule-view.js
+++ b/browser/devtools/styleinspector/rule-view.js
@@ -1464,34 +1464,36 @@ CssRuleView.prototype = {
         };
       }
     }).then(null, console.error);
   },
 
   /**
    * Update the rules for the currently highlighted element.
    */
-  nodeChanged: function() {
+  refreshPanel: function() {
     // Ignore refreshes during editing or when no element is selected.
     if (this.isEditing || !this._elementStyle) {
       return;
     }
 
-    this._clearRules();
-
     // Repopulate the element style.
-    this._populate();
+    this._populate(true);
   },
 
-  _populate: function() {
+  _populate: function(clearRules = false) {
     let elementStyle = this._elementStyle;
     return this._elementStyle.populate().then(() => {
       if (this._elementStyle != elementStyle) {
         return;
       }
+
+      if (clearRules) {
+        this._clearRules();
+      }
       this._createEditors();
 
       // Notify anyone that cares that we refreshed.
       var evt = this.doc.createEvent("Events");
       evt.initEvent("CssRuleViewRefreshed", true, false);
       this.element.dispatchEvent(evt);
       return undefined;
     }).then(null, promiseWarn);
--- a/browser/devtools/styleinspector/style-inspector.js
+++ b/browser/devtools/styleinspector/style-inspector.js
@@ -104,17 +104,17 @@ RuleViewTool.prototype = {
 
     if (!aEvent || aEvent == "new-node-front") {
       let done = this.inspector.updating("rule-view");
       this.view.highlight(this.inspector.selection.nodeFront).then(done, done);
     }
   },
 
   refresh: function RVT_refresh() {
-    this.view.nodeChanged();
+    this.view.refreshPanel();
   },
 
   destroy: function RVT_destroy() {
     this.inspector.off("layout-change", this.refresh);
     this.inspector.selection.off("pseudoclass", this.refresh);
     this.inspector.selection.off("new-node-front", this._onSelect);
 
     this.view.element.removeEventListener("CssRuleViewCSSLinkClicked",