Bug 1487284 - Update message manager in actors spawned in parent after browserSwap;r=yulia

Differential Revision: https://phabricator.services.mozilla.com/D5028 --HG-- extra : moz-landing-system : lando
2018-09-06 16:06:34 +00:00 · 2018-09-06 16:06:34 +00:00 · e82936d001
--- a/devtools/client/responsive.html/test/browser/browser.ini
+++ b/devtools/client/responsive.html/test/browser/browser.ini
@ -8,6 +8,8 @@ support-files =
  contextual_identity.html
  devices.json
  doc_page_state.html
+  doc_toolbox_rule_view.css
+  doc_toolbox_rule_view.html
  favicon.html
  favicon.ico
  geolocation.html
@ -55,6 +57,7 @@ skip-if = true # Bug 1413765
 [browser_telemetry_activate_rdm.js]
 [browser_toolbox_computed_view.js]
 [browser_toolbox_rule_view.js]
+[browser_toolbox_rule_view_reload.js]
 [browser_toolbox_swap_browsers.js]
 [browser_toolbox_swap_inspector.js]
 [browser_touch_device.js]
--- a/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js
+++ b/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js
@ -5,18 +5,7 @@

 // Check that when the viewport is resized, the rule-view refreshes.

-const TEST_URI = "data:text/html;charset=utf-8,<html><style>" +
-                 "div {" +
-                 "  width: 500px;" +
-                 "  height: 10px;" +
-                 "  background: purple;" +
-                 "} " +
-                 "@media screen and (max-width: 200px) {" +
-                 "  div { " +
-                 "    width: 100px;" +
-                 "  }" +
-                 "};" +
-                 "</style><div></div></html>";
+const TEST_URI = `${URL_ROOT}doc_toolbox_rule_view.html`;

 addRDMTask(TEST_URI, async function({ ui, manager }) {
  info("Open the responsive design mode and set its size to 500x500 to start");
--- a/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view_reload.js
+++ b/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view_reload.js
@ -0,0 +1,41 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that the ruleview is still correctly displayed after reloading the page.
+ * See Bug 1487284.
+ */
+
+// To trigger the initial issue, the stylesheet needs to be fetched from the network
+// monitor, so we can not use a data:uri with inline styles here.
+const TEST_URI = `${URL_ROOT}doc_toolbox_rule_view.html`;
+
+add_task(async function() {
+  const tab = await addTab(TEST_URI);
+
+  info("Open the rule-view and select the test node before opening RDM");
+  const { inspector, testActor, view } = await openRuleView();
+  await selectNode("div", inspector);
+
+  is(numberOfRules(view), 2, "Rule view has two rules.");
+
+  info("Open RDM");
+  await openRDM(tab);
+
+  info("Reload the current page");
+  const onNewRoot = inspector.once("new-root");
+  await testActor.reload();
+  await onNewRoot;
+  await inspector.markup._waitForChildren();
+
+  is(numberOfRules(view), 2, "Rule view still has two rules and is not empty.");
+
+  await closeRDM(tab);
+  await removeTab(tab);
+});
+
+function numberOfRules(ruleView) {
+  return ruleView.element.querySelectorAll(".ruleview-code").length;
+}
--- a/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.css
+++ b/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.css
@ -0,0 +1,10 @@
+div {
+  width: 500px;
+  height: 10px;
+  background: purple;
+}
+@media screen and (max-width: 200px) {
+  div {
+    width: 100px;
+  }
+};
--- a/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html
+++ b/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html
@ -0,0 +1,4 @@
+<html>
+  <link rel="stylesheet" charset="UTF-8" type="text/css" media="screen" href="doc_toolbox_rule_view.css"/>
+  <div></div>
+</html>
--- a/devtools/server/actors/network-monitor.js
+++ b/devtools/server/actors/network-monitor.js
@ -45,21 +45,14 @@ const NetworkMonitorActor = ActorClassWithSpec(networkMonitorSpec, {
    this.observer.init();

    this.stackTraces = new Set();
+
    this.onStackTraceAvailable = this.onStackTraceAvailable.bind(this);
-    this.messageManager.addMessageListener("debug:request-stack-available",
-      this.onStackTraceAvailable);
    this.onRequestContent = this.onRequestContent.bind(this);
-    this.messageManager.addMessageListener("debug:request-content:request",
-      this.onRequestContent);
    this.onSetPreference = this.onSetPreference.bind(this);
-    this.messageManager.addMessageListener("debug:netmonitor-preference",
-      this.onSetPreference);
    this.onGetNetworkEventActor = this.onGetNetworkEventActor.bind(this);
-    this.messageManager.addMessageListener("debug:get-network-event-actor:request",
-      this.onGetNetworkEventActor);
    this.onDestroyMessage = this.onDestroyMessage.bind(this);
-    this.messageManager.addMessageListener("debug:destroy-network-monitor",
-      this.onDestroyMessage);
+
+    this.startListening();
  },

  onDestroyMessage({ data }) {
@ -68,6 +61,32 @@ const NetworkMonitorActor = ActorClassWithSpec(networkMonitorSpec, {
    }
  },

+  startListening() {
+    this.messageManager.addMessageListener("debug:request-stack-available",
+      this.onStackTraceAvailable);
+    this.messageManager.addMessageListener("debug:request-content:request",
+      this.onRequestContent);
+    this.messageManager.addMessageListener("debug:netmonitor-preference",
+      this.onSetPreference);
+    this.messageManager.addMessageListener("debug:get-network-event-actor:request",
+      this.onGetNetworkEventActor);
+    this.messageManager.addMessageListener("debug:destroy-network-monitor",
+      this.onDestroyMessage);
+  },
+
+  stopListening() {
+    this.messageManager.removeMessageListener("debug:request-stack-available",
+      this.onStackTraceAvailable);
+    this.messageManager.removeMessageListener("debug:request-content:request",
+      this.onRequestContent);
+    this.messageManager.removeMessageListener("debug:netmonitor-preference",
+      this.onSetPreference);
+    this.messageManager.removeMessageListener("debug:get-network-event-actor:request",
+      this.onGetNetworkEventActor);
+    this.messageManager.removeMessageListener("debug:destroy-network-monitor",
+      this.onDestroyMessage);
+  },
+
  destroy() {
    Actor.prototype.destroy.call(this);

@ -78,20 +97,22 @@ const NetworkMonitorActor = ActorClassWithSpec(networkMonitorSpec, {

    this.stackTraces.clear();
    if (this.messageManager) {
-      this.messageManager.removeMessageListener("debug:request-stack-available",
-        this.onStackTraceAvailable);
-      this.messageManager.removeMessageListener("debug:request-content:request",
-        this.onRequestContent);
-      this.messageManager.removeMessageListener("debug:netmonitor-preference",
-        this.onSetPreference);
-      this.messageManager.removeMessageListener("debug:get-network-event-actor:request",
-        this.onGetNetworkEventActor);
-      this.messageManager.removeMessageListener("debug:destroy-network-monitor",
-        this.onDestroyMessage);
+      this.stopListening();
      this.messageManager = null;
    }
  },

+  /**
+   * onBrowserSwap is called by the server when a browser frame swap occurs (typically
+   * switching on/off RDM) and a new message manager should be used.
+   */
+  onBrowserSwap(mm) {
+    this.stopListening();
+    this.messageManager = mm;
+    this.stackTraces = new Set();
+    this.startListening();
+  },
+
  onStackTraceAvailable(msg) {
    const { channelId } = msg.data;
    if (!msg.data.stacktrace) {
--- a/devtools/server/main.js
+++ b/devtools/server/main.js
@ -934,6 +934,7 @@ var DebuggerServer = {
        }
      };

+      const parentActors = [];
      const onSpawnActorInParent = function(msg) {
        // We may have multiple connectToFrame instance running for the same tab
        // and need to filter the messages.
@ -972,6 +973,8 @@ var DebuggerServer = {
            prefix: connPrefix,
            actorID: instance.actorID
          });
+
+          parentActors.push(instance);
        } catch (e) {
          const errorMessage =
            "Exception during actor module setup running in the parent process: ";
@ -1025,6 +1028,13 @@ var DebuggerServer = {
          }
        });

+        // Also notify actors spawned in the parent process about the new message manager.
+        parentActors.forEach(parentActor => {
+          if (parentActor.onBrowserSwap) {
+            parentActor.onBrowserSwap(mm);
+          }
+        });
+
        if (childTransport) {
          childTransport.swapBrowser(mm);
        }