From 827e4e2e78120dd3bd15705e4d9dcb5951970207 Mon Sep 17 00:00:00 2001
From: Micah Tigley <mtigley@mozilla.com>
Date: Fri, 3 May 2019 16:32:22 +0000
Subject: [PATCH] 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
---
 .../responsive.html/actions/viewports.js      | 12 +++++++++
 devtools/client/responsive.html/manager.js    | 15 +++++++++++
 .../responsive.html/test/browser/browser.ini  |  1 +
 .../browser_orientationchange_event.js        | 26 +++++++++++++++++++
 devtools/server/actors/emulation.js           | 13 ++++++++++
 devtools/shared/specs/emulation.js            |  5 ++++
 6 files changed, 72 insertions(+)
 create mode 100644 devtools/client/responsive.html/test/browser/browser_orientationchange_event.js

diff --git a/devtools/client/responsive.html/actions/viewports.js b/devtools/client/responsive.html/actions/viewports.js
index a30e87471cc6..5925030b2769 100644
--- a/devtools/client/responsive.html/actions/viewports.js
+++ b/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,
diff --git a/devtools/client/responsive.html/manager.js b/devtools/client/responsive.html/manager.js
index 101b2e70570c..029f9f9e6231 100644
--- a/devtools/client/responsive.html/manager.js
+++ b/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.
    */
diff --git a/devtools/client/responsive.html/test/browser/browser.ini b/devtools/client/responsive.html/test/browser/browser.ini
index 7fe23882cb58..142f84baaa38 100644
--- a/devtools/client/responsive.html/test/browser/browser.ini
+++ b/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]
diff --git a/devtools/client/responsive.html/test/browser/browser_orientationchange_event.js b/devtools/client/responsive.html/test/browser/browser_orientationchange_event.js
new file mode 100644
index 000000000000..e43a9f5f656d
--- /dev/null
+++ b/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;
+    }
+  );
+});
diff --git a/devtools/server/actors/emulation.js b/devtools/server/actors/emulation.js
index 77e1d5260da8..2550f212fcad 100644
--- a/devtools/server/actors/emulation.js
+++ b/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;
diff --git a/devtools/shared/specs/emulation.js b/devtools/shared/specs/emulation.js
index f34b289c1c61..7bd57c10daee 100644
--- a/devtools/shared/specs/emulation.js
+++ b/devtools/shared/specs/emulation.js
@@ -149,6 +149,11 @@ const emulationSpec = generateActorSpec({
       },
       response: {},
     },
+
+    simulateScreenOrientationChange: {
+      request: {},
+      response: {},
+    },
   },
 });