Bug 1595800 - Part 4: Update RDM to use setRDMPaneOrientation from BrowsingContext r=bradwerth

Depends on D55002

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

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

devtools/client/responsive/browser/content.js

@@ -154,11 +154,6 @@ var global = this;
       .getInterface(Ci.nsIWebProgress);
     webProgress.removeProgressListener(WebProgressListener);
     docShell.deviceSizeIsPageSize = gDeviceSizeWasPageSize;
-    // Restore the original physical screen orientation values before RDM is stopped.
-    // This is necessary since the window document's `setCurrentRDMPaneOrientation`
-    // WebIDL operation can only modify the window's screen orientation values while the
-    // window content is in RDM.
-    restoreScreenOrientation();
     restoreScrollbars();
     setDocumentInRDMPane(false);
     stopOnResize();
@@ -208,13 +203,6 @@ var global = this;
     flushStyle();
   }
 
-  function restoreScreenOrientation() {
-    docShell.contentViewer.DOMDocument.setRDMPaneOrientation(
-      "landscape-primary",
-      0
-    );
-  }
-
   function setDocumentInRDMPane(inRDMPane) {
     // We don't propegate this property to descendent documents.
     docShell.browsingContext.inRDMPane = inRDMPane;

devtools/client/responsive/components/App.js

@@ -389,7 +389,6 @@ class App extends PureComponent {
       onChangePixelRatio,
       onChangeTouchSimulation,
       onChangeUserAgent,
-      onChangeViewportOrientation,
       onContentResize,
       onDeviceListUpdate,
       onEditCustomDevice,
@@ -450,7 +449,6 @@ class App extends PureComponent {
             screenshot,
             viewports,
             onBrowserMounted,
-            onChangeViewportOrientation,
             onContentResize,
             onRemoveDeviceAssociation,
             doResizeViewport,

devtools/client/responsive/components/Browser.js

@@ -12,7 +12,6 @@ const { PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
-const { PORTRAIT_PRIMARY, LANDSCAPE_PRIMARY } = require("../constants");
 const Types = require("../types");
 const e10s = require("../utils/e10s");
 const message = require("../utils/message");
@@ -29,7 +28,6 @@ class Browser extends PureComponent {
   static get propTypes() {
     return {
       onBrowserMounted: PropTypes.func.isRequired,
-      onChangeViewportOrientation: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
@@ -42,7 +40,6 @@ class Browser extends PureComponent {
     super(props);
     this.onContentResize = this.onContentResize.bind(this);
     this.onResizeViewport = this.onResizeViewport.bind(this);
-    this.onSetScreenOrientation = this.onSetScreenOrientation.bind(this);
   }
 
   /**
@@ -113,21 +110,8 @@ class Browser extends PureComponent {
     });
   }
 
-  onSetScreenOrientation(msg) {
-    const { width, height } = msg.data;
-    const { angle, id } = this.props.viewport;
-    const type = height >= width ? PORTRAIT_PRIMARY : LANDSCAPE_PRIMARY;
-
-    this.props.onChangeViewportOrientation(id, type, angle);
-  }
-
   async startFrameScript() {
-    const {
-      browser,
-      onContentResize,
-      onResizeViewport,
-      onSetScreenOrientation,
-    } = this;
+    const { browser, onContentResize, onResizeViewport } = this;
     const mm = browser.frameLoader.messageManager;
 
     // Notify tests when the content has received a resize event.  This is not
@@ -136,7 +120,6 @@ class Browser extends PureComponent {
     // resized to match.
     e10s.on(mm, "OnContentResize", onContentResize);
     e10s.on(mm, "OnResizeViewport", onResizeViewport);
-    e10s.on(mm, "OnLocationChange", onSetScreenOrientation);
 
     const ready = e10s.once(mm, "ChildScriptReady");
     mm.loadFrameScript(FRAME_SCRIPT, true);
@@ -155,17 +138,11 @@ class Browser extends PureComponent {
   }
 
   async stopFrameScript() {
-    const {
-      browser,
-      onContentResize,
-      onResizeViewport,
-      onSetScreenOrientation,
-    } = this;
+    const { browser, onContentResize, onResizeViewport } = this;
     const mm = browser.frameLoader.messageManager;
 
     e10s.off(mm, "OnContentResize", onContentResize);
     e10s.off(mm, "OnResizeViewport", onResizeViewport);
-    e10s.off(mm, "OnLocationChange", onSetScreenOrientation);
     await e10s.request(mm, "Stop");
     message.post(window, "stop-frame-script:done");
   }

devtools/client/responsive/components/ResizableViewport.js

@@ -26,7 +26,6 @@ class ResizableViewport extends PureComponent {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
       onBrowserMounted: PropTypes.func.isRequired,
-      onChangeViewportOrientation: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       doResizeViewport: PropTypes.func.isRequired,
@@ -148,7 +147,6 @@ class ResizableViewport extends PureComponent {
       swapAfterMount,
       viewport,
       onBrowserMounted,
-      onChangeViewportOrientation,
       onContentResize,
       onResizeViewport,
     } = this.props;
@@ -180,7 +178,6 @@ class ResizableViewport extends PureComponent {
             userContextId: viewport.userContextId,
             viewport,
             onBrowserMounted,
-            onChangeViewportOrientation,
             onContentResize,
             onResizeViewport,
           })

devtools/client/responsive/components/Viewports.js

@@ -21,7 +21,6 @@ class Viewports extends PureComponent {
     return {
       leftAlignmentEnabled: PropTypes.bool.isRequired,
       onBrowserMounted: PropTypes.func.isRequired,
-      onChangeViewportOrientation: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onRemoveDeviceAssociation: PropTypes.func.isRequired,
       doResizeViewport: PropTypes.func.isRequired,
@@ -35,7 +34,6 @@ class Viewports extends PureComponent {
     const {
       leftAlignmentEnabled,
       onBrowserMounted,
-      onChangeViewportOrientation,
       onContentResize,
       onRemoveDeviceAssociation,
       doResizeViewport,
@@ -77,7 +75,6 @@ class Viewports extends PureComponent {
             key: viewport.id,
             leftAlignmentEnabled,
             onBrowserMounted,
-            onChangeViewportOrientation,
             onContentResize,
             onRemoveDeviceAssociation,
             doResizeViewport,

devtools/client/responsive/test/browser/browser_orientationchange_event.js

@@ -6,6 +6,20 @@
 // Test that the "orientationchange" event is fired when the "rotate button" is clicked.
 
 const TEST_URL = "data:text/html;charset=utf-8,";
+const testDevice = {
+  name: "Fake Phone RDM Test",
+  width: 320,
+  height: 570,
+  pixelRatio: 5.5,
+  userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
+  touch: true,
+  firefoxOS: true,
+  os: "custom",
+  featured: true,
+};
+
+// Add the new device to the list
+addDeviceForTest(testDevice);
 
 addRDMTask(TEST_URL, async function({ ui }) {
   info("Rotate viewport to trigger 'orientationchange' event.");
@@ -45,18 +59,9 @@ addRDMTask(TEST_URL, async function({ ui }) {
     await orientationChange;
   });
 
-  info(
-    "Check that the viewport orientation changed, but not the angle after a reload"
-  );
+  info("Check that the viewport orientation values persist after reload");
   const browser = ui.getViewportBrowser();
-  const reload = browser.reload();
-  const onViewportOrientationChange = once(
-    ui,
-    "only-viewport-orientation-changed"
-  );
-  await reload;
-  await onViewportOrientationChange;
-  ok(true, "orientationchange event was not dispatched on reload.");
+  await browser.reload();
 
   await ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
     info("Check that we still have the previous orientation values.");
@@ -67,4 +72,24 @@ addRDMTask(TEST_URL, async function({ ui }) {
       "Orientation is still landscape-primary."
     );
   });
+
+  info(
+    "Check the orientationchange event is not dispatched when changing devices."
+  );
+  const onViewportOrientationChange = once(
+    ui,
+    "only-viewport-orientation-changed"
+  );
+  await selectDevice(ui, "Fake Phone RDM Test");
+  await onViewportOrientationChange;
+
+  await ContentTask.spawn(ui.getViewportBrowser(), {}, async function() {
+    info("Check the new orientation values after selecting device.");
+    is(content.screen.orientation.angle, 0, "Orientation angle is 0");
+    is(
+      content.screen.orientation.type,
+      "portrait-primary",
+      "New orientation is portrait-primary."
+    );
+  });
 });

devtools/client/responsive/ui.js

@@ -304,6 +304,9 @@ class ResponsiveUI {
     // Ensure init has finished before starting destroy
     if (!isTabContentDestroying) {
       await this.inited;
+
+      // Restore screen orientation of physical device.
+      await this.updateScreenOrientation("landscape-primary", 0);
     }
 
     if (this.isBrowserUIEnabled) {

devtools/server/actors/emulation.js

@@ -423,7 +423,7 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
       this.win.screen.orientation.angle !== angle ||
       this.win.screen.orientation.type !== type
     ) {
-      this.win.document.setRDMPaneOrientation(type, angle);
+      this.docShell.browsingContext.setRDMPaneOrientation(type, angle);
     }
   },