From e82936d001c22823d9f0a5585d3c93febffeaf9b Mon Sep 17 00:00:00 2001 From: Julian Descottes Date: Thu, 6 Sep 2018 16:06:34 +0000 Subject: [PATCH] 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 --- .../responsive.html/test/browser/browser.ini | 3 + .../test/browser/browser_toolbox_rule_view.js | 13 +--- .../browser_toolbox_rule_view_reload.js | 41 +++++++++++++ .../test/browser/doc_toolbox_rule_view.css | 10 +++ .../test/browser/doc_toolbox_rule_view.html | 4 ++ devtools/server/actors/network-monitor.js | 61 +++++++++++++------ devtools/server/main.js | 10 +++ 7 files changed, 110 insertions(+), 32 deletions(-) create mode 100644 devtools/client/responsive.html/test/browser/browser_toolbox_rule_view_reload.js create mode 100644 devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.css create mode 100644 devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html diff --git a/devtools/client/responsive.html/test/browser/browser.ini b/devtools/client/responsive.html/test/browser/browser.ini index da606cc8d1d9..ace11a9ac382 100644 --- 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] diff --git a/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js b/devtools/client/responsive.html/test/browser/browser_toolbox_rule_view.js index b0ef4f7ad447..d3855500365e 100644 --- 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,
"; +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"); diff --git 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 new file mode 100644 index 000000000000..b57cbba42a96 --- /dev/null +++ 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; +} diff --git a/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.css b/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.css new file mode 100644 index 000000000000..9f7ab9231bb1 --- /dev/null +++ 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; + } +}; \ No newline at end of file diff --git a/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html b/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html new file mode 100644 index 000000000000..d25dea6aed04 --- /dev/null +++ b/devtools/client/responsive.html/test/browser/doc_toolbox_rule_view.html @@ -0,0 +1,4 @@ + + +
+ \ No newline at end of file diff --git a/devtools/server/actors/network-monitor.js b/devtools/server/actors/network-monitor.js index b191edf37313..c9e958ea7e8b 100644 --- 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) { diff --git a/devtools/server/main.js b/devtools/server/main.js index f21323c029bf..f546bdbb9ee6 100644 --- 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); }