Bug 1588962: Reflect the changes on the rule view. r=rcaliman

Depends on D49520

Differential Revision: https://phabricator.services.mozilla.com/D49534

--HG--
extra : moz-landing-system : lando

devtools/client/inspector/compatibility/CompatibilityView.js

@@ -27,6 +27,11 @@ class CompatibilityView {
   destroy() {
     this.inspector.selection.off("new-node-front", this._onNewNode);
     this.inspector.sidebar.off("compatibilityview-selected", this._onNewNode);
+
+    if (this._ruleView) {
+      this._ruleView.off("ruleview-changed", this._onNewNode);
+    }
+
     this.inspector = null;
   }
 
@@ -44,6 +49,18 @@ class CompatibilityView {
 
     this.inspector.selection.on("new-node-front", this._onNewNode);
     this.inspector.sidebar.on("compatibilityview-selected", this._onNewNode);
+
+    if (this._ruleView) {
+      this._ruleView.on("ruleview-changed", this._onNewNode);
+    } else {
+      this.inspector.on(
+        "ruleview-added",
+        () => {
+          this._ruleView.on("ruleview-changed", this._onNewNode);
+        },
+        { once: true }
+      );
+    }
   }
 
   _isVisible() {
@@ -63,6 +80,13 @@ class CompatibilityView {
       updateSelectedNode(this.inspector.selection.nodeFront)
     );
   }
+
+  get _ruleView() {
+    return (
+      this.inspector.hasPanel("ruleview") &&
+      this.inspector.getPanel("ruleview").view
+    );
+  }
 }
 
 module.exports = CompatibilityView;