Bug 1506751 - Re-assign listeners for Observable instances that monitor TargetActor windows on navigate. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Fri, 23 Nov 2018 15:46:26 +0000
changeset 507079 507a08aaccd5d80f8671e29ad5253abc77cda809
parent 507078 e6e6b6137c7df9358d4c1764ee07b688a8c72de3
child 507080 4185df9ce3e1e7825fba58ca6dd6b1fefe69f111
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1506751
milestone65.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 1506751 - Re-assign listeners for Observable instances that monitor TargetActor windows on navigate. r=pbro Differential Revision: https://phabricator.services.mozilla.com/D12560
devtools/client/inspector/rules/test/browser.ini
devtools/client/inspector/rules/test/browser_rules_media-queries_reload.js
devtools/server/actors/reflow.js
--- a/devtools/client/inspector/rules/test/browser.ini
+++ b/devtools/client/inspector/rules/test/browser.ini
@@ -203,16 +203,17 @@ skip-if = (os == "win" && debug) # bug 9
 [browser_rules_mark_overridden_01.js]
 [browser_rules_mark_overridden_02.js]
 [browser_rules_mark_overridden_03.js]
 [browser_rules_mark_overridden_04.js]
 [browser_rules_mark_overridden_05.js]
 [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]
 [browser_rules_multiple-properties-unfinished_01.js]
 [browser_rules_multiple-properties-unfinished_02.js]
 [browser_rules_multiple_properties_01.js]
 [browser_rules_multiple_properties_02.js]
 [browser_rules_non_ascii.js]
new file mode 100644
--- /dev/null
+++ b/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;
+});
--- a/devtools/server/actors/reflow.js
+++ b/devtools/server/actors/reflow.js
@@ -461,31 +461,46 @@ ReflowObserver.prototype.QueryInterface 
  * Reports window resize events on the targetActor's windows.
  * @extends Observable
  * @param {BrowsingContextTargetActor} targetActor
  * @param {Function} callback Executed everytime a resize occurs
  */
 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() {
     this.listenerTarget.addEventListener("resize", this.onResize);
   }
 
   _stopListeners() {
     this.listenerTarget.removeEventListener("resize", this.onResize);
   }
 
+  onNavigate() {
+    if (this.isObserving) {
+      this._stopListeners();
+      this._startListeners();
+    }
+  }
+
   onResize() {
     this.notifyCallback();
   }
 
+  destroy() {
+    this.targetActor.off("navigate", this.onNavigate);
+  }
+
   get listenerTarget() {
     // For the rootActor, return its window.
     if (this.targetActor.isRootActor) {
       return this.targetActor.window;
     }
 
     // Otherwise, get the targetActor's chromeEventHandler.
     return this.targetActor.chromeEventHandler;