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: {},
+ },
},
});