Bug 1509255 - Simulate 'orientationchange' event when RDM viewport is rotated. r=gl

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

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

devtools/client/responsive.html/actions/viewports.js

@@ -95,6 +95,18 @@ module.exports = {
    * Rotate the viewport.
    */
   rotateViewport(id) {
+    // TODO: Add `orientation` and `angle` properties to message data. See Bug 1357774.
+
+    // There is no window object to post to when ran on XPCShell as part of the unit
+    // tests and will immediately throw an error as a result.
+    try {
+      post(window, {
+        type: "viewport-orientation-change",
+      });
+    } catch (e) {
+      console.log("Unable to post message to window");
+    }
+
     return {
       type: ROTATE_VIEWPORT,
       id,

devtools/client/responsive.html/manager.js

@@ -548,6 +548,9 @@ ResponsiveUI.prototype = {
       case "remove-device-association":
         this.onRemoveDeviceAssociation();
         break;
+      case "viewport-orientation-change":
+        this.onRotateViewport(event);
+        break;
       case "viewport-resize":
         this.onResizeViewport(event);
         break;
@@ -637,6 +640,18 @@ ResponsiveUI.prototype = {
     });
   },
 
+  async onRotateViewport(event) {
+    const targetFront = await this.client.mainRoot.getTab();
+
+    // Ensure that simulateScreenOrientationChange is supported.
+    if (await targetFront.actorHasMethod("emulation",
+        "simulateScreenOrientationChange")) {
+      // TODO: From event.data, pass orientation and angle as arguments.
+      // See Bug 1357774.
+      await this.emulationFront.simulateScreenOrientationChange();
+    }
+  },
+
   /**
    * Restores the previous state of RDM.
    */

devtools/client/responsive.html/test/browser/browser.ini

@@ -49,6 +49,7 @@ tags = devtools webextensions
 [browser_navigation.js]
 skip-if = true # Bug 1413765
 [browser_network_throttling.js]
+[browser_orientationchange_event.js]
 [browser_page_state.js]
 [browser_page_style.js]
 [browser_permission_doorhanger.js]

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

@@ -0,0 +1,26 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the "orientationchange" event is fired when the "rotate button" is clicked.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+
+addRDMTask(TEST_URL, async function({ ui }) {
+  info("Rotate viewport to trigger 'orientationchange' event.");
+  rotateViewport(ui);
+
+  await ContentTask.spawn(ui.getViewportBrowser(), {},
+    async function() {
+      const orientationChange = new Promise(resolve => {
+        content.window.addEventListener("orientationchange", () => {
+          ok(true, "'orientationchange' event fired");
+          resolve();
+        });
+      });
+
+      await orientationChange;
+    }
+  );
+});

devtools/server/actors/emulation.js

@@ -351,6 +351,19 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
     this._printSimulationEnabled = state;
     this.targetActor.docShell.contentViewer.stopEmulatingMedium();
   },
+
+  /**
+   * Simulates the "orientationchange" event when device screen is rotated.
+   *
+   * TODO: Update `window.screen.orientation` and `window.screen.angle` here.
+   * See Bug 1357774.
+   */
+  simulateScreenOrientationChange() {
+    const win = this.docShell.chromeEventHandler.ownerGlobal;
+    const { CustomEvent } = win;
+    const orientationChangeEvent = new CustomEvent("orientationchange");
+    win.dispatchEvent(orientationChangeEvent);
+  },
 });
 
 exports.EmulationActor = EmulationActor;

devtools/shared/specs/emulation.js

@@ -149,6 +149,11 @@ const emulationSpec = generateActorSpec({
       },
       response: {},
     },
+
+    simulateScreenOrientationChange: {
+      request: {},
+      response: {},
+    },
   },
 });