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