Bug 1506751 - Re-assign listeners for Observable instances that monitor TargetActor windows on navigate. r=pbro
☠☠ backed out by f85343663811 ☠ ☠
authorRazvan Caliman <rcaliman@mozilla.com>
Fri, 23 Nov 2018 13:19:44 +0000
changeset 504245 0fa44cb3f4b686913a397c6297c26d5f9c64bcb9
parent 504244 95a9f538ae4faf91054c1ba4997aa493acb03ad6
child 504246 db5baa0f06cadbf73248db73f6fae4bad4d7d9a3
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [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,47 @@ 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);
+    super.destroy();
+  }
+
   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;