Bug 1621937 - Hide and show browser content when viewport is finished resizing. r=bradwerth

RDM displays strange intermediate states of the browser content when opening/closing. This is because we are transitioning between the regular viewport size to a simulated one in both cases. During the transition, RDM should temporarily hide the browser content until the viewport has finished resizing.

Differential Revision: https://phabricator.services.mozilla.com/D67010

--HG--
extra : moz-landing-system : lando

devtools/client/responsive/actions/devices.js

@@ -229,11 +229,6 @@ module.exports = {
 
       const viewport = getState().viewports[0];
 
-      post(window, {
-        type: "viewport-resize",
-        height: viewport.height,
-        width: viewport.width,
-      });
       post(window, {
         type: "change-device",
         device,

devtools/client/responsive/ui.js

@@ -161,6 +161,10 @@ class ResponsiveUI {
 
     if (this.isBrowserUIEnabled) {
       this.initRDMFrame();
+
+      // Hide the browser content temporarily while things move around to avoid displaying
+      // strange intermediate states.
+      this.hideBrowserUI();
     }
 
     // Watch for tab close and window close so we can clean up RDM synchronously
@@ -236,6 +240,9 @@ class ResponsiveUI {
     // Restore the previous UI state.
     await this.restoreUIState();
 
+    // Show the browser UI now that its state is ready.
+    this.showBrowserUI();
+
     if (!this.isBrowserUIEnabled) {
       // Force the newly created Zoom actor to cache its 1.0 zoom level. This
       // prevents it from sending out FullZoomChange events when the content
@@ -385,6 +392,9 @@ class ResponsiveUI {
       if (this.isBrowserUIEnabled) {
         await this.responsiveFront.setDocumentInRDMPane(false);
         await this.responsiveFront.setFloatingScrollbars(false);
+
+        // Hide browser UI to avoid displaying weird intermediate states while closing.
+        this.hideBrowserUI();
       }
 
       this.targetList.unwatchTargets(
@@ -441,6 +451,9 @@ class ResponsiveUI {
       }
     }
 
+    // Show the browser UI now.
+    this.showBrowserUI();
+
     // Destroy local state
     const swap = this.swap;
     this.browserContainerEl = null;
@@ -510,6 +523,20 @@ class ResponsiveUI {
     return Services.prefs.getBoolPref(pref, false);
   }
 
+  hideBrowserUI() {
+    if (this.isBrowserUIEnabled) {
+      this.tab.linkedBrowser.style.visibility = "hidden";
+      this.resizeHandle.style.visibility = "hidden";
+    }
+  }
+
+  showBrowserUI() {
+    if (this.isBrowserUIEnabled) {
+      this.tab.linkedBrowser.style.removeProperty("visibility");
+      this.resizeHandle.style.removeProperty("visibility");
+    }
+  }
+
   handleEvent(event) {
     const { browserWindow, tab, toolWindow } = this;
 
@@ -859,13 +886,6 @@ class ResponsiveUI {
       this.updateUIAlignment(leftAlignmentEnabled);
     }
 
-    const hasDeviceState = await this.hasDeviceState();
-    if (hasDeviceState) {
-      // Return if there is a device state to restore, this will be done when the
-      // device list is loaded after the post-init.
-      return;
-    }
-
     const height = Services.prefs.getIntPref(
       "devtools.responsive.viewport.height",
       0