Bug 1506751 - Re-assign listeners for Observable instances that monitor TargetActor windows on navigate. r=pbro

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

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

devtools/client/inspector/rules/test/browser.ini

@@ -208,6 +208,7 @@ skip-if = (os == "win" && debug) # bug 963492: win.
 [browser_rules_mark_overridden_06.js]
 [browser_rules_mark_overridden_07.js]
 [browser_rules_mathml-element.js]
+[browser_rules_media-queries_reload.js]
 [browser_rules_media-queries.js]
 [browser_rules_multiple-properties-duplicates.js]
 [browser_rules_multiple-properties-priority.js]

devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js

@@ -0,0 +1,65 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that applicable media queries are updated in the Rule view after reloading
+// the page and resizing the window.
+
+const TEST_URI = `
+  <style type='text/css'>
+    @media all and (max-width: 500px) {
+      div {
+        color: red;
+      }
+    }
+    @media all and (min-width: 500px) {
+      div {
+        color: green;
+      }
+    }
+  </style>
+  <div></div>
+`;
+
+add_task(async function() {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view: ruleView, testActor, toolbox } = await openRuleView();
+  const hostWindow = toolbox.win.parent;
+
+  const originalWidth = hostWindow.outerWidth;
+  const originalHeight = hostWindow.outerHeight;
+
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for small viewports applies");
+  let onRuleViewRefreshed = ruleView.once("ruleview-refreshed");
+  let onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(400, 400);
+  await onResize;
+  await testActor.reflow();
+  await onRuleViewRefreshed;
+  let rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  is(rule.textProps[0].value, "red", "Small viewport media query inspected");
+
+  info("Reload the current page");
+  await reloadPage(inspector, testActor);
+  await selectNode("div", inspector);
+
+  info("Resize window so the media query for large viewports applies");
+  onRuleViewRefreshed = ruleView.once("ruleview-refreshed");
+  onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(800, 800);
+  await onResize;
+  await testActor.reflow();
+  await onRuleViewRefreshed;
+  info("Reselect the rule after page reload.");
+  rule = getRuleViewRuleEditor(ruleView, 1).rule;
+  is(rule.textProps[0].value, "green", "Large viewport media query inspected");
+
+  info("Resize window to original dimentions");
+  onResize = once(hostWindow, "resize");
+  hostWindow.resizeTo(originalWidth, originalHeight);
+  await onResize;
+});

devtools/server/actors/reflow.js

@@ -466,7 +466,11 @@ ReflowObserver.prototype.QueryInterface = ChromeUtils
 class WindowResizeObserver extends Observable {
   constructor(targetActor, callback) {
     super(targetActor, callback);
+
+    this.onNavigate = this.onNavigate.bind(this);
     this.onResize = this.onResize.bind(this);
+
+    this.targetActor.on("navigate", this.onNavigate);
   }
 
   _startListeners() {
@@ -477,10 +481,22 @@ class WindowResizeObserver extends Observable {
     this.listenerTarget.removeEventListener("resize", this.onResize);
   }
 
+  onNavigate() {
+    if (this.isObserving) {
+      this._stopListeners();
+      this._startListeners();
+    }
+  }
+
   onResize() {
     this.notifyCallback();
   }
 
+  destroy() {
+    this.targetActor.off("navigate", this.onNavigate);
+    super.destroy();
+  }
+
   get listenerTarget() {
     // For the rootActor, return its window.
     if (this.targetActor.isRootActor) {