Bug 1342962 - Hide intermediate states when toggling RDM. r=ochameau draft
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 01 Mar 2017 17:20:34 -0600
changeset 491624 d84ed78c8ff519dbc50f375af6525d159decb799
parent 490976 e150eaff1f83e4e4a97d1e30c57d233859efe9cb
child 547495 d77801ef4582cb5da1225c6f024c67e0eddde57e
push id47356
push userbmo:jryans@gmail.com
push dateThu, 02 Mar 2017 00:17:15 +0000
reviewersochameau
bugs1342962
milestone54.0a1
Bug 1342962 - Hide intermediate states when toggling RDM. r=ochameau MozReview-Commit-ID: AZ9bVv15YxJ
devtools/client/responsive.html/browser/swap.js
--- a/devtools/client/responsive.html/browser/swap.js
+++ b/devtools/client/responsive.html/browser/swap.js
@@ -50,16 +50,20 @@ function swapToInnerBrowser({ tab, conta
     from.dispatchEvent(event);
   };
 
   return {
 
     start: Task.async(function* () {
       tab.isResponsiveDesignMode = true;
 
+      // Hide the browser content temporarily while things move around to avoid displaying
+      // strange intermediate states.
+      tab.linkedBrowser.style.visibility = "hidden";
+
       // Freeze navigation temporarily to avoid "blinking" in the location bar.
       freezeNavigationState(tab);
 
       // 1. Create a temporary, hidden tab to load the tool UI.
       let containerTab = gBrowser.addTab("about:blank", {
         skipAnimation: true,
         forceNotRemote: true,
       });
@@ -130,19 +134,26 @@ function swapToInnerBrowser({ tab, conta
           findBar.onFindCommand();
         }
       }
 
       // Force the browser UI to match the new state of the tab and browser.
       thawNavigationState(tab);
       gBrowser.setTabTitle(tab);
       gBrowser.updateCurrentBrowser(true);
+
+      // Show the browser content again now that the move is done.
+      tab.linkedBrowser.style.visibility = "";
     }),
 
     stop() {
+      // Hide the browser content temporarily while things move around to avoid displaying
+      // strange intermediate states.
+      tab.linkedBrowser.style.visibility = "hidden";
+
       // 1. Stop the tunnel between outer and inner browsers.
       tunnel.stop();
       tunnel = null;
 
       // 2. Create a temporary, hidden tab to hold the content.
       let contentTab = gBrowser.addTab("about:blank", {
         skipAnimation: true,
       });
@@ -192,16 +203,19 @@ function swapToInnerBrowser({ tab, conta
       gBrowser = null;
 
       // The focus manager seems to get a little dizzy after all this swapping.  If a
       // content element had been focused inside the viewport before stopping, it will
       // have lost focus.  Activate the frame to restore expected focus.
       tab.linkedBrowser.frameLoader.activateRemoteFrame();
 
       delete tab.isResponsiveDesignMode;
+
+      // Show the browser content again now that the move is done.
+      tab.linkedBrowser.style.visibility = "";
     },
 
   };
 }
 
 /**
  * Browser navigation properties we'll freeze temporarily to avoid "blinking" in the
  * location bar, etc. caused by the containerURL peeking through before the swap is