Bug 1501665 Part 12: Update RDM viewport size reporting to make it consistent with zoomed presshells. r=gl

There are two viewports: the layout (or content) viewport, and the visual
viewport. This change ensures that we are both setting and checking the
visual viewport size, which is the size shown in the RDM control bar.
It is still possible to get the layout viewport with getContentSize().

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

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

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

@@ -66,12 +66,23 @@ var global = this;
   }
 
   function onResize() {
-    const { width, height } = content.screen;
-    debug(`EMIT RESIZE: ${width} x ${height}`);
+    // Send both a content-resize event and a viewport-resize event, since both
+    // may have changed.
+    let { width, height } = content.screen;
+    debug(`EMIT CONTENTRESIZE: ${width} x ${height}`);
     sendAsyncMessage("ResponsiveMode:OnContentResize", {
       width,
       height,
     });
+
+    const zoom = content.windowUtils.getResolution();
+    width = content.innerWidth * zoom;
+    height = content.innerHeight * zoom;
+    debug(`EMIT RESIZEVIEWPORT: ${width} x ${height}`);
+    sendAsyncMessage("ResponsiveMode:OnResizeViewport", {
+      width,
+      height,
+    });
   }
 
   function bindOnResize() {

devtools/client/responsive.html/components/App.js

@@ -71,6 +71,7 @@ class App extends PureComponent {
     this.onExit = this.onExit.bind(this);
     this.onRemoveCustomDevice = this.onRemoveCustomDevice.bind(this);
     this.onRemoveDeviceAssociation = this.onRemoveDeviceAssociation.bind(this);
+    this.doResizeViewport = this.doResizeViewport.bind(this);
     this.onResizeViewport = this.onResizeViewport.bind(this);
     this.onRotateViewport = this.onRotateViewport.bind(this);
     this.onScreenshot = this.onScreenshot.bind(this);
@@ -188,13 +189,20 @@ class App extends PureComponent {
     this.props.dispatch(changeUserAgent(""));
   }
 
-  onResizeViewport(id, width, height) {
+  doResizeViewport(id, width, height) {
+    // This is the setter function that we pass to Toolbar and Viewports
+    // so they can modify the viewport.
+    this.props.dispatch(resizeViewport(id, width, height));
+  }
+
+  onResizeViewport({ width, height }) {
+    // This is the response function that listens to changes to the size
+    // and sends out a "viewport-resize" message with the new size.
     window.postMessage({
       type: "viewport-resize",
       width,
       height,
     }, "*");
-    this.props.dispatch(resizeViewport(id, width, height));
   }
 
   onRotateViewport(id) {
@@ -250,6 +258,7 @@ class App extends PureComponent {
       onExit,
       onRemoveCustomDevice,
       onRemoveDeviceAssociation,
+      doResizeViewport,
       onResizeViewport,
       onRotateViewport,
       onScreenshot,
@@ -289,7 +298,7 @@ class App extends PureComponent {
           onChangeUserAgent,
           onExit,
           onRemoveDeviceAssociation,
-          onResizeViewport,
+          doResizeViewport,
           onRotateViewport,
           onScreenshot,
           onToggleLeftAlignment,
@@ -304,6 +313,7 @@ class App extends PureComponent {
           onBrowserMounted,
           onContentResize,
           onRemoveDeviceAssociation,
+          doResizeViewport,
           onResizeViewport,
         }),
         devices.isModalOpen ?

devtools/client/responsive.html/components/Browser.js

@@ -28,6 +28,7 @@ class Browser extends PureComponent {
     return {
       onBrowserMounted: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
+      onResizeViewport: PropTypes.func.isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
       userContextId: PropTypes.number.isRequired,
     };
@@ -36,6 +37,7 @@ class Browser extends PureComponent {
   constructor(props) {
     super(props);
     this.onContentResize = this.onContentResize.bind(this);
+    this.onResizeViewport = this.onResizeViewport.bind(this);
   }
 
   /**
@@ -97,10 +99,20 @@ class Browser extends PureComponent {
     });
   }
 
+  onResizeViewport(msg) {
+    const { onResizeViewport } = this.props;
+    const { width, height } = msg.data;
+    onResizeViewport({
+      width,
+      height,
+    });
+  }
+
   async startFrameScript() {
     const {
       browser,
       onContentResize,
+      onResizeViewport,
     } = this;
     const mm = browser.frameLoader.messageManager;
 
@@ -109,6 +121,7 @@ class Browser extends PureComponent {
     // since it still needs to do async work before the content is actually
     // resized to match.
     e10s.on(mm, "OnContentResize", onContentResize);
+    e10s.on(mm, "OnResizeViewport", onResizeViewport);
 
     const ready = e10s.once(mm, "ChildScriptReady");
     mm.loadFrameScript(FRAME_SCRIPT, true);
@@ -129,10 +142,12 @@ class Browser extends PureComponent {
     const {
       browser,
       onContentResize,
+      onResizeViewport,
     } = this;
     const mm = browser.frameLoader.messageManager;
 
     e10s.off(mm, "OnContentResize", onContentResize);
+    e10s.off(mm, "OnResizeViewport", onResizeViewport);
     await e10s.request(mm, "Stop");
     message.post(window, "stop-frame-script:done");
   }

devtools/client/responsive.html/components/DeviceAdder.js

@@ -160,7 +160,7 @@ class DeviceAdder extends PureComponent {
                   width,
                   height,
                 },
-                onResizeViewport: this.onChangeSize,
+                doResizeViewport: this.onChangeSize,
                 onRemoveDeviceAssociation: () => {},
               })
             ),

devtools/client/responsive.html/components/DeviceSelector.js

@@ -18,7 +18,7 @@ class DeviceSelector extends PureComponent {
     return {
       devices: PropTypes.shape(Types.devices).isRequired,
       onChangeDevice: PropTypes.func.isRequired,
-      onResizeViewport: PropTypes.func.isRequired,
+      doResizeViewport: PropTypes.func.isRequired,
       onUpdateDeviceModal: PropTypes.func.isRequired,
       selectedDevice: PropTypes.string.isRequired,
       viewportId: PropTypes.number.isRequired,
@@ -34,7 +34,7 @@ class DeviceSelector extends PureComponent {
     const {
       devices,
       onChangeDevice,
-      onResizeViewport,
+      doResizeViewport,
       onUpdateDeviceModal,
       selectedDevice,
       viewportId,
@@ -50,7 +50,7 @@ class DeviceSelector extends PureComponent {
             type: "checkbox",
             checked: selectedDevice === device.name,
             click: () => {
-              onResizeViewport(viewportId, device.width, device.height);
+              doResizeViewport(viewportId, device.width, device.height);
               onChangeDevice(viewportId, device, type);
             },
           });

devtools/client/responsive.html/components/ResizableViewport.js

@@ -25,6 +25,7 @@ class ResizableViewport extends PureComponent {
       onBrowserMounted: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
+      doResizeViewport: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
@@ -47,7 +48,6 @@ class ResizableViewport extends PureComponent {
     this.onResizeDrag = this.onResizeDrag.bind(this);
     this.onResizeStart = this.onResizeStart.bind(this);
     this.onResizeStop = this.onResizeStop.bind(this);
-    this.onResizeViewport = this.onResizeViewport.bind(this);
   }
 
   onRemoveDeviceAssociation() {
@@ -97,7 +97,11 @@ class ResizableViewport extends PureComponent {
     }
 
     // Update the viewport store with the new width and height.
-    this.onResizeViewport(width, height);
+    const {
+      doResizeViewport,
+      viewport,
+    } = this.props;
+    doResizeViewport(viewport.id, width, height);
     // Change the device selector back to an unselected device
     // TODO: Bug 1332754: Logic like this probably belongs in the action creator.
     if (this.props.viewport.device) {
@@ -140,15 +144,6 @@ class ResizableViewport extends PureComponent {
     });
   }
 
-  onResizeViewport(width, height) {
-    const {
-      viewport,
-      onResizeViewport,
-    } = this.props;
-
-    onResizeViewport(viewport.id, width, height);
-  }
-
   render() {
     const {
       screenshot,
@@ -156,6 +151,7 @@ class ResizableViewport extends PureComponent {
       viewport,
       onBrowserMounted,
       onContentResize,
+      onResizeViewport,
     } = this.props;
 
     let resizeHandleClass = "viewport-resize-handle";
@@ -184,6 +180,7 @@ class ResizableViewport extends PureComponent {
               userContextId: viewport.userContextId,
               onBrowserMounted,
               onContentResize,
+              onResizeViewport,
             })
           ),
           dom.div({

devtools/client/responsive.html/components/Toolbar.js

@@ -41,7 +41,7 @@ class Toolbar extends PureComponent {
       onChangeUserAgent: PropTypes.func.isRequired,
       onExit: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
-      onResizeViewport: PropTypes.func.isRequired,
+      doResizeViewport: PropTypes.func.isRequired,
       onRotateViewport: PropTypes.func.isRequired,
       onScreenshot: PropTypes.func.isRequired,
       onToggleLeftAlignment: PropTypes.func.isRequired,
@@ -88,7 +88,7 @@ class Toolbar extends PureComponent {
       onChangeTouchSimulation,
       onExit,
       onRemoveDeviceAssociation,
-      onResizeViewport,
+      doResizeViewport,
       onRotateViewport,
       onScreenshot,
       onToggleLeftAlignment,
@@ -118,7 +118,7 @@ class Toolbar extends PureComponent {
           DeviceSelector({
             devices,
             onChangeDevice,
-            onResizeViewport,
+            doResizeViewport,
             onUpdateDeviceModal,
             selectedDevice,
             viewportId: viewport.id,
@@ -126,7 +126,7 @@ class Toolbar extends PureComponent {
           dom.div({ className: "devtools-separator" }),
           ViewportDimension({
             onRemoveDeviceAssociation,
-            onResizeViewport,
+            doResizeViewport,
             viewport,
           }),
           dom.button({

devtools/client/responsive.html/components/ViewportDimension.js

@@ -15,7 +15,7 @@ const Types = require("../types");
 class ViewportDimension extends PureComponent {
   static get propTypes() {
     return {
-      onResizeViewport: PropTypes.func.isRequired,
+      doResizeViewport: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       viewport: PropTypes.shape(Types.viewport).isRequired,
     };
@@ -121,7 +121,7 @@ class ViewportDimension extends PureComponent {
     const {
       viewport,
       onRemoveDeviceAssociation,
-      onResizeViewport,
+      doResizeViewport,
     } = this.props;
 
     if (!this.state.isWidthValid || !this.state.isHeightValid) {
@@ -143,7 +143,7 @@ class ViewportDimension extends PureComponent {
       onRemoveDeviceAssociation(viewport.id);
     }
 
-    onResizeViewport(viewport.id,
+    doResizeViewport(viewport.id,
       parseInt(this.state.width, 10), parseInt(this.state.height, 10));
   }
 

devtools/client/responsive.html/components/Viewports.js

@@ -20,6 +20,7 @@ class Viewports extends PureComponent {
       onBrowserMounted: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
+      doResizeViewport: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       screenshot: PropTypes.shape(Types.screenshot).isRequired,
       viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
@@ -32,6 +33,7 @@ class Viewports extends PureComponent {
       onBrowserMounted,
       onContentResize,
       onRemoveDeviceAssociation,
+      doResizeViewport,
       onResizeViewport,
       screenshot,
       viewports,
@@ -71,6 +73,7 @@ class Viewports extends PureComponent {
               onBrowserMounted,
               onContentResize,
               onRemoveDeviceAssociation,
+              doResizeViewport,
               onResizeViewport,
               screenshot,
               swapAfterMount: i == 0,

devtools/client/responsive.html/manager.js

@@ -549,7 +549,7 @@ ResponsiveUI.prototype = {
         this.onRemoveDeviceAssociation();
         break;
       case "viewport-resize":
-        this.onViewportResize(event);
+        this.onResizeViewport(event);
         break;
     }
   },
@@ -629,7 +629,7 @@ ResponsiveUI.prototype = {
     this.emit("device-association-removed");
   },
 
-  onViewportResize(event) {
+  onResizeViewport(event) {
     const { width, height } = event.data;
     this.emit("viewport-resize", {
       width,

devtools/client/responsive.html/test/browser/head.js

@@ -150,33 +150,33 @@ function waitForViewportResizeTo(ui, width, height) {
       return;
     }
 
-    // Otherwise, we'll listen to the content's resize event, the viewport's resize event,
-    // and the browser's load end; since a racing condition can happen, where the
-    // content's listener is added after the resize, because the content's document was
-    // reloaded; therefore the test would hang forever. See bug 1302879.
+    // Otherwise, we'll listen to the viewport's resize event, and the
+    // browser's load end; since a racing condition can happen, where the
+    // viewport's listener is added after the resize, because the viewport's
+    // document was reloaded; therefore the test would hang forever.
+    // See bug 1302879.
     const browser = ui.getViewportBrowser();
 
-    const onResize = data => {
+    const onResizeViewport = data => {
       if (!isSizeMatching(data)) {
         return;
       }
-      ui.off("viewport-resize", onResize);
-      ui.off("content-resize", onResize);
+      ui.off("viewport-resize", onResizeViewport);
       browser.removeEventListener("mozbrowserloadend", onBrowserLoadEnd);
-      info(`Got content-resize or viewport-resize to ${width} x ${height}`);
+      info(`Got viewport-resize to ${width} x ${height}`);
       resolve();
     };
 
     const onBrowserLoadEnd = async function() {
       const data = ui.getViewportSize(ui);
-      onResize(data);
+      onResizeViewport(data);
     };
 
-    info(`Waiting for content-resize or viewport-resize to ${width} x ${height}`);
-    // Depending on whether or not the viewport is overridden, we'll either get a
-    // viewport-resize event or a content-resize event.
-    ui.on("viewport-resize", onResize);
-    ui.on("content-resize", onResize);
+    info(`Waiting for viewport-resize to ${width} x ${height}`);
+    // We're changing the viewport size, which may also change the content
+    // size. We wait on the viewport resize event, and check for the
+    // desired size.
+    ui.on("viewport-resize", onResizeViewport);
     browser.addEventListener("mozbrowserloadend",
       onBrowserLoadEnd, { once: true });
   });