Bug 1696563 - Reuse RDM's toolbar resize observer to set the size of the dialogStack r=Gijs

Overlays for content prompts that are opened with tabdialog box occupy the entire browser viewport when RDM is opened. This is because `.dialogStack` is `position: fixed` to remove it from the grid layout and to avoid issues with scrolling when the simulated viewport is larger than the device viewport. The simulated viewport causing overflow is the reason why `position: absolute` might not be what we want to use here.

Now we have to deal with the problem of the overlay covering other browser UI.. To deal with this, this patch reuses the resize observer to store the `.browserStack` sizes so that `.dialogStack` can use these values to resize the modal overlay when other browser UI occupy the space of the browserStack (such as DevTools or the findbar).

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

devtools/client/responsive/responsive-browser.css

@@ -21,6 +21,7 @@
   position: fixed;
   z-index: 1;
   height: 30px;
+  width: var(--rdm-stack-width);
 }
 
 .browserContainer.responsive-mode .browserStack > .rdm-toolbar.accomodate-ua {
@@ -128,6 +129,12 @@ html[dir="rtl"] .browserContainer.responsive-mode.left-aligned > .browserStack {
 /* tabdialogbox handling - it needs to not be treated as part of the grid: */
 .browserContainer.responsive-mode > .browserStack > .dialogStack {
   position: fixed;
-  width: 100%;
-  height: 100%;
+  width: var(--rdm-stack-width);
+}
+
+/* handle height for tabdialogbox and RDM device modal. Both are position:fixed and so
+   are taken from the grid layout when RDM is opened. */
+.browserContainer.responsive-mode .browserStack.device-modal-opened > .rdm-toolbar,
+.browserContainer.responsive-mode > .browserStack > .dialogStack {
+  height: var(--rdm-stack-height);
 }

devtools/client/responsive/ui.js

@@ -227,32 +227,23 @@ class ResponsiveUI {
     this.resizeHandleY = resizeHandleY;
     this.resizeHandleY.addEventListener("mousedown", this.onResizeStart);
 
-    // Setup a ResizeObserver that sets the width of the toolbar to the width of the
-    // .browserStack.
-    this.resizeToolbarObserver = new this.browserWindow.ResizeObserver(
-      entries => {
-        for (const entry of entries) {
-          const { width } = entry.contentRect;
+    // Setup a ResizeObserver that stores the width and height of the
+    // .browserStack size as properties. These set properties are then used
+    // to out-of-grid elements that are affected by RDM.
+    this.resizeToolbarObserver = new this.browserWindow.ResizeObserver(() => {
+      const style = this.browserWindow.getComputedStyle(this.browserStackEl);
 
-          this.rdmFrame.style.setProperty("width", `${width}px`);
-
-          // If the device modal/selector is opened, resize the toolbar height to
-          // the size of the stack.
-          if (this.browserStackEl.classList.contains("device-modal-opened")) {
-            const style = this.browserWindow.getComputedStyle(
-              this.browserStackEl
-            );
-            this.rdmFrame.style.height = style.height;
-          } else {
-            // If the toolbar needs extra space for the UA input, then set a class that
-            // will accomodate its height. We should also make sure to keep the width
-            // value we're toggling against in sync with the media-query in
-            // devtools/client/responsive/index.css
-            this.rdmFrame.classList.toggle("accomodate-ua", width < 520);
-          }
-        }
-      }
-    );
+      this.browserStackEl.style.setProperty("--rdm-stack-width", style.width);
+      this.browserStackEl.style.setProperty("--rdm-stack-height", style.height);
+      // If the toolbar needs extra space for the UA input, then set a class that
+      // will accomodate its height. We should also make sure to keep the width
+      // value we're toggling against in sync with the media-query in
+      // devtools/client/responsive/index.css
+      this.rdmFrame.classList.toggle(
+        "accomodate-ua",
+        parseFloat(style.width) < 520
+      );
+    });
 
     this.resizeToolbarObserver.observe(this.browserStackEl);
   }
@@ -325,6 +316,8 @@ class ResponsiveUI {
     this.browserStackEl.style.removeProperty("--rdm-width");
     this.browserStackEl.style.removeProperty("--rdm-height");
     this.browserStackEl.style.removeProperty("--rdm-zoom");
+    this.browserStackEl.style.removeProperty("--rdm-stack-height");
+    this.browserStackEl.style.removeProperty("--rdm-stack-width");
 
     // Ensure the tab is reloaded if required when exiting RDM so that no emulated
     // settings are left in a customized state.
@@ -736,10 +729,7 @@ class ResponsiveUI {
   onUpdateDeviceModal(event) {
     if (event.data.isOpen) {
       this.browserStackEl.classList.add("device-modal-opened");
-      const style = this.browserWindow.getComputedStyle(this.browserStackEl);
-      this.rdmFrame.style.height = style.height;
     } else {
-      this.rdmFrame.style.removeProperty("height");
       this.browserStackEl.classList.remove("device-modal-opened");
     }
   }