Bug 1533823 - Element style should refresh on "style-changed" and "pseudoclass" events. r=rcaliman
authorGabriel Luong <gabriel.luong@gmail.com>
Fri, 08 Mar 2019 13:40:58 -0500
changeset 521362 f8f1b79cbc42
parent 521361 0dd9653849e2
child 521363 211218d95e2c
push id10866
push usernerli@mozilla.com
push dateTue, 12 Mar 2019 18:59:09 +0000
treeherdermozilla-beta@445c24a51727 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1533823
milestone67.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 1533823 - Element style should refresh on "style-changed" and "pseudoclass" events. r=rcaliman Differential Revision: https://phabricator.services.mozilla.com/D22745
devtools/client/inspector/rules/models/element-style.js
--- a/devtools/client/inspector/rules/models/element-style.js
+++ b/devtools/client/inspector/rules/models/element-style.js
@@ -51,20 +51,22 @@ class ElementStyle {
     if (!("userProperties" in this.store)) {
       this.store.userProperties = new UserProperties();
     }
 
     if (!("disabled" in this.store)) {
       this.store.disabled = new WeakMap();
     }
 
-    this.onStyleSheetUpdated = this.onStyleSheetUpdated.bind(this);
+    this.onRefresh = this.onRefresh.bind(this);
 
     if (this.ruleView.isNewRulesView) {
-      this.pageStyle.on("stylesheet-updated", this.onStyleSheetUpdated);
+      this.pageStyle.on("stylesheet-updated", this.onRefresh);
+      this.ruleView.inspector.styleChangeTracker.on("style-changed", this.onRefresh);
+      this.ruleView.selection.on("pseudoclass", this.onRefresh);
     }
   }
 
   destroy() {
     if (this.destroyed) {
       return;
     }
 
@@ -74,17 +76,19 @@ class ElementStyle {
       if (rule.editor) {
         rule.editor.destroy();
       }
 
       rule.destroy();
     }
 
     if (this.ruleView.isNewRulesView) {
-      this.pageStyle.off("stylesheet-updated", this.onStyleSheetUpdated);
+      this.pageStyle.off("stylesheet-updated", this.onRefresh);
+      this.ruleView.inspector.styleChangeTracker.off("style-changed", this.onRefresh);
+      this.ruleView.selection.off("pseudoclass", this.onRefresh);
     }
   }
 
   /**
    * Called by the Rule object when it has been changed through the
    * setProperty* methods.
    */
   _changed() {
@@ -129,16 +133,18 @@ class ElementStyle {
         this.subscribeRulesToLocationChange();
       }
 
       // We're done with the previous list of rules.
       for (const r of existingRules) {
         if (r && r.editor) {
           r.editor.destroy();
         }
+
+        r.destroy();
       }
 
       return undefined;
     }).catch(e => {
       // populate is often called after a setTimeout,
       // the connection may already be closed.
       if (this.destroyed) {
         return promise.resolve(undefined);
@@ -663,20 +669,20 @@ class ElementStyle {
   * @return {String} the variable's value or null if the variable is
   *         not defined.
   */
   getVariable(name) {
     return this.variables.get(name);
   }
 
   /**
-   * Handler for page style events "stylesheet-updated". Refreshes the list of rules on
-   * the page.
+   * Handler for "stylesheet-updated", "style-changed" and "pseudoclass" events.
+   * Refreshes the list of rules on the page.
    */
-  async onStyleSheetUpdated() {
+  async onRefresh() {
     // Repopulate the element style once the current modifications are done.
     const promises = [];
     for (const rule of this.rules) {
       if (rule._applyingModifications) {
         promises.push(rule._applyingModifications);
       }
     }