--- a/devtools/client/inspector/rules/models/element-style.js
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -40,16 +40,18 @@ function ElementStyle(element, ruleView,
   this.pageStyle = pageStyle;
   this.showUserAgentStyles = showUserAgentStyles;
   this.rules = [];
   this.cssProperties = getCssProperties(this.ruleView.inspector.toolbox);
 
   // Make sure that the populate calls wait in a queue so they are processed in the order
   // they were received.
   this.populate = queueAsyncCalls(this.populate, this);
+  this._populating = false;
+  this._changeSeen = false;
 
   // We don't want to overwrite this.store.userProperties so we only create it
   // if it doesn't already exist.
   if (!("userProperties" in this.store)) {
     this.store.userProperties = new UserProperties();
   }
 
   if (!("disabled" in this.store)) {
@@ -74,29 +76,35 @@ ElementStyle.prototype = {
     }
   },
 
   /**
    * Called by the Rule object when it has been changed through the
    * setProperty* methods.
    */
   _changed: function () {
-    if (this.onChanged) {
+    if (this._populating) {
+      this._changeSeen = true;
+    } else if (this.onChanged) {
+      this._changeSeen = false;
       this.onChanged();
     }
   },
 
   /**
    * Refresh the list of rules to be displayed for the active element.
    * Upon completion, this.rules[] will hold a list of Rule objects.
    *
    * Returns a promise that will be resolved when the elementStyle is
    * ready.
    */
   populate: Task.async(function* () {
+    this._populating = true;
+    this._changeSeen = false;
+
     let entries = yield this.pageStyle.getApplied(this.element, {
       inherited: true,
       matchedSelectors: true,
       filter: this.showUserAgentStyles ? "ua" : undefined,
     }).then(null, e => {
       // Don't warn if the element style is already destroyed as populate is often
       // called after a setTimeout and the connection may already be closed.
       if (!this.destroyed) {
@@ -130,17 +138,20 @@ ElementStyle.prototype = {
 
     // We're done with the previous list of rules.
     for (let r of existingRules) {
       if (r && r.editor) {
         r.editor.destroy();
       }
     }
 
-    return;
+    if (this._populating) {
+      this._populating = false;
+      this._changed();
+    }
   }),
 
   /**
    * Put pseudo elements in front of others.
    */
   _sortRulesForPseudoElement: function () {
     this.rules = this.rules.sort((a, b) => {
       return (a.pseudoElement || "z") > (b.pseudoElement || "z");