Bug 1407830 - Add diagnostics to RDM swap. r=ochameau

Add some (disabled by default) logging to the RDM swap process to speed up
future investigations.

MozReview-Commit-ID: ICuH7i5Nsq5

--HG--
extra : rebase_source : 9d20a69965572020e7a98dbfe56bbcc57df0dad1

devtools/client/responsive.html/browser/swap.js

@@ -8,6 +8,10 @@ const { Ci } = require("chrome");
 const { Task } = require("devtools/shared/task");
 const { tunnelToInnerBrowser } = require("./tunnel");
 
+function debug(msg) {
+  // console.log(`RDM swap: ${msg}`);
+}
+
 /**
  * Swap page content from an existing tab into a new browser within a container
  * page.  Page state is preserved by using `swapFrameLoaders`, just like when
@@ -83,6 +87,7 @@ function swapToInnerBrowser({ tab, containerURL, getInnerBrowser }) {
       freezeNavigationState(tab);
 
       // 1. Create a temporary, hidden tab to load the tool UI.
+      debug("Add blank tool tab");
       let containerTab = addTabSilently("about:blank", {
         skipAnimation: true,
         forceNotRemote: true,
@@ -103,6 +108,7 @@ function swapToInnerBrowser({ tab, containerURL, getInnerBrowser }) {
         epoch: -1,
       });
       // Prevent the `containerURL` from ending up in the tab's history.
+      debug("Load container URL");
       containerBrowser.loadURIWithFlags(containerURL, {
         flags: Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_HISTORY,
       });
@@ -122,12 +128,15 @@ function swapToInnerBrowser({ tab, containerURL, getInnerBrowser }) {
       // Even worse than the delay, there appears to be no obvious event fired
       // after the frame is set lazily, so it's unclear how to know that work
       // has finished.
+      debug("Set container docShell active");
       containerBrowser.docShellIsActive = true;
 
       // 3. Create the initial viewport inside the tool UI.
       // The calling application will use container page loaded into the tab to
       // do whatever it needs to create the inner browser.
+      debug("Yield to container tab loaded");
       yield tabLoaded(containerTab);
+      debug("Yield to get inner browser");
       innerBrowser = yield getInnerBrowser(containerBrowser);
       addXULBrowserDecorations(innerBrowser);
       if (innerBrowser.isRemoteBrowser != tab.linkedBrowser.isRemoteBrowser) {
@@ -139,22 +148,26 @@ function swapToInnerBrowser({ tab, containerURL, getInnerBrowser }) {
       //    the viewport in the tool UI, preserving all state via
       //    `gBrowser._swapBrowserDocShells`.
       dispatchDevToolsBrowserSwap(tab.linkedBrowser, innerBrowser);
+      debug("Swap content to inner browser");
       gBrowser._swapBrowserDocShells(tab, innerBrowser);
 
       // 5. Force the original browser tab to be non-remote since the tool UI
       //    must be loaded in the parent process, and we're about to swap the
       //    tool UI into this tab.
+      debug("Flip original tab to remote false");
       gBrowser.updateBrowserRemoteness(tab.linkedBrowser, false);
 
       // 6. Swap the tool UI (with viewport showing the content) into the
       //    original browser tab and close the temporary tab used to load the
       //    tool via `swapBrowsersAndCloseOther`.
+      debug("Swap tool UI to original tab");
       swapBrowsersAndCloseOtherSilently(tab, containerTab);
 
       // 7. Start a tunnel from the tool tab's browser to the viewport browser
       //    so that some browser UI functions, like navigation, are connected to
       //    the content in the viewport, instead of the tool page.
       tunnel = tunnelToInnerBrowser(tab.linkedBrowser, innerBrowser);
+      debug("Yield to tunnel start");
       yield tunnel.start();
 
       // Swapping browsers disconnects the find bar UI from the browser.

devtools/client/responsive.html/manager.js

@@ -28,6 +28,10 @@ loader.lazyRequireGetter(this, "getStr",
 loader.lazyRequireGetter(this, "EmulationFront",
   "devtools/shared/fronts/emulation", true);
 
+function debug(msg) {
+  // console.log(`RDM manager: ${msg}`);
+}
+
 /**
  * ResponsiveUIManager is the external API for the browser UI, etc. to use when
  * opening and closing the responsive UI.
@@ -317,6 +321,8 @@ ResponsiveUI.prototype = {
    * For more details, see /devtools/docs/responsive-design-mode.md.
    */
   init: Task.async(function* () {
+    debug("Init start");
+
     let ui = this;
 
     // Watch for tab close and window close so we can clean up RDM synchronously
@@ -324,30 +330,38 @@ ResponsiveUI.prototype = {
     this.browserWindow.addEventListener("unload", this);
 
     // Swap page content from the current tab into a viewport within RDM
+    debug("Create browser swapper");
     this.swap = swapToInnerBrowser({
       tab: this.tab,
       containerURL: TOOL_URL,
       getInnerBrowser: Task.async(function* (containerBrowser) {
         let toolWindow = ui.toolWindow = containerBrowser.contentWindow;
         toolWindow.addEventListener("message", ui);
+        debug("Yield to init from inner");
         yield message.request(toolWindow, "init");
         toolWindow.addInitialViewport("about:blank");
+        debug("Yield to browser mounted");
         yield message.wait(toolWindow, "browser-mounted");
         return ui.getViewportBrowser();
       })
     });
+    debug("Yield to swap start");
     yield this.swap.start();
 
     this.tab.addEventListener("BeforeTabRemotenessChange", this);
 
     // Notify the inner browser to start the frame script
+    debug("Yield to start frame script");
     yield message.request(this.toolWindow, "start-frame-script");
 
     // Get the protocol ready to speak with emulation actor
+    debug("Yield to RDP server connect");
     yield this.connectToServer();
 
     // Non-blocking message to tool UI to start any delayed init activities
     message.post(this.toolWindow, "post-init");
+
+    debug("Init done");
   }),
 
   /**