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 524360 f8f1b79cbc42a4fbd4e93f9c7e60c2c9476304e1
parent 524359 0dd9653849e21017c8d8a81879d41ec8a8b6a655
child 524361 211218d95e2c73d3e0c6a1b1911dc602d24ab8e7
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [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);
       }
     }