Bug 1974167 - [devtools] Use "setOrientationOverride" method instead "setRDMPaneOrientation" for screen orientation emulation. r=devtools-reviewers,jdescottes,devtools-backward-compat-reviewers

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

Author: lutien

devtools/client/responsive/components/App.js

@@ -176,20 +176,17 @@ class App extends PureComponent {
     this.props.dispatch(changeUserAgent(userAgent));
   }
 
-  onChangeViewportOrientation(id, type, angle, isViewportRotated = false) {
+  onChangeViewportOrientation(id, type, angle) {
     window.postMessage(
       {
         type: "viewport-orientation-change",
         orientationType: type,
         angle,
-        isViewportRotated,
       },
       "*"
     );
 
-    if (isViewportRotated) {
-      this.props.dispatch(changeViewportAngle(id, angle));
-    }
+    this.props.dispatch(changeViewportAngle(id, angle));
   }
 
   onDeviceListUpdate(devices) {

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

@@ -5,9 +5,6 @@
 
 // Test that the "orientationchange" event is fired when the "rotate button" is clicked.
 
-// TODO: This test should also check that the orientation is set properly on the iframe.
-// This is currently not working and should be worked on in Bug 1704830.
-
 const TEST_DOCUMENT = `doc_with_remote_iframe_and_isolated_cross_origin_capabilities.sjs`;
 const TEST_COM_URL = URL_ROOT_COM_SSL + TEST_DOCUMENT;
 
@@ -45,11 +42,20 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
   info(
     "Check that rotating the viewport does trigger an orientationchange event"
   );
+  let iframeBrowsingContext =
+    ui.getViewportBrowser().browsingContext.children[0];
+
   let waitForOrientationChangeEvent = isOrientationChangeEventEmitted(
     ui.getViewportBrowser()
   );
   let waitForScreenOrientationChangeEvent =
     isWindowScreenOrientationChangeEventEmitted(ui.getViewportBrowser());
+
+  let waitForOrientationChangeEventInIframe = isOrientationChangeEventEmitted(
+    iframeBrowsingContext
+  );
+  let waitForScreenOrientationChangeEventInIframe =
+    isWindowScreenOrientationChangeEventEmitted(iframeBrowsingContext);
   rotateViewport(ui);
   is(
     await waitForOrientationChangeEvent,
@@ -62,6 +68,17 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "'change' event fired on window.screen.orientation"
   );
 
+  is(
+    await waitForOrientationChangeEventInIframe,
+    true,
+    "'orientationchange' event fired in iframe"
+  );
+  is(
+    await waitForScreenOrientationChangeEventInIframe,
+    true,
+    "'change' event fired on window.screen.orientation in iframe"
+  );
+
   is(
     await getScreenOrientationType(ui.getViewportBrowser()),
     "landscape-primary",
@@ -74,8 +91,21 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "Orientation angle was updated to 90 degrees"
   );
 
+  is(
+    await getScreenOrientationType(iframeBrowsingContext),
+    "landscape-primary",
+    "Orientation state in iframe was updated to landscape-primary"
+  );
+
+  is(
+    await getScreenOrientationAngle(iframeBrowsingContext),
+    90,
+    "Orientation angle in iframe was updated to 90 degrees"
+  );
+
   info("Check that the viewport orientation values persist after reload");
   await reloadBrowser();
+  iframeBrowsingContext = ui.getViewportBrowser().browsingContext.children[0];
 
   is(
     await getScreenOrientationType(ui.getViewportBrowser()),
@@ -98,6 +128,17 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "orientation angle was set on the page early in its lifecycle"
   );
 
+  is(
+    await getScreenOrientationType(iframeBrowsingContext),
+    "landscape-primary",
+    "Orientation is still landscape-primary in iframe"
+  );
+  is(
+    await getScreenOrientationAngle(iframeBrowsingContext),
+    90,
+    "Orientation angle is still 90 in iframe"
+  );
+
   info(
     "Check that the viewport orientation values persist after navigating to a page that forces the creation of a new browsing context"
   );
@@ -110,6 +151,7 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     URL_ROOT_ORG_SSL + TEST_DOCUMENT + "?crossOriginIsolated=true"
   );
   await waitForReload();
+  iframeBrowsingContext = ui.getViewportBrowser().browsingContext.children[0];
 
   isnot(
     browser.browsingContext.id,
@@ -138,6 +180,23 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "orientation angle was set on the page early in its lifecycle"
   );
 
+  is(
+    await getScreenOrientationType(iframeBrowsingContext),
+    "landscape-primary",
+    "Orientation in iframe is still landscape-primary after navigating to a new browsing context"
+  );
+  is(
+    await getScreenOrientationAngle(iframeBrowsingContext),
+    90,
+    "Orientation angle in iframe is still 90 after navigating to a new browsing context"
+  );
+
+  waitForOrientationChangeEvent = isOrientationChangeEventEmitted(
+    ui.getViewportBrowser()
+  );
+  rotateViewport(ui);
+  await waitForOrientationChangeEvent;
+
   info(
     "Check the orientationchange event is not dispatched when changing devices."
   );
@@ -147,6 +206,12 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
   waitForScreenOrientationChangeEvent =
     isWindowScreenOrientationChangeEventEmitted(ui.getViewportBrowser());
 
+  waitForOrientationChangeEventInIframe = isOrientationChangeEventEmitted(
+    iframeBrowsingContext
+  );
+  waitForScreenOrientationChangeEventInIframe =
+    isWindowScreenOrientationChangeEventEmitted(iframeBrowsingContext);
+
   await selectDevice(ui, testDevice.name);
   is(
     await waitForOrientationChangeEvent,
@@ -159,6 +224,17 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "on window.screen.orientation, change event was not dispatched when changing devices"
   );
 
+  is(
+    await waitForOrientationChangeEventInIframe,
+    false,
+    "orientationchange event was not dispatched in iframe when changing devices"
+  );
+  is(
+    await waitForScreenOrientationChangeEventInIframe,
+    false,
+    "on window.screen.orientation, change event was not dispatched in iframe when changing devices"
+  );
+
   info("Check the new orientation values after selecting device.");
   is(
     await getScreenOrientationType(ui.getViewportBrowser()),
@@ -172,6 +248,18 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     "Orientation angle is 0"
   );
 
+  is(
+    await getScreenOrientationType(iframeBrowsingContext),
+    "portrait-primary",
+    "New orientation type in iframe is portrait-primary"
+  );
+
+  is(
+    await getScreenOrientationAngle(iframeBrowsingContext),
+    0,
+    "Orientation angle in iframe is 0"
+  );
+
   info(
     "Check the orientationchange event is not dispatched when calling the command with the same orientation."
   );
@@ -181,12 +269,17 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
   waitForScreenOrientationChangeEvent =
     isWindowScreenOrientationChangeEventEmitted(ui.getViewportBrowser());
 
+  waitForOrientationChangeEventInIframe = isOrientationChangeEventEmitted(
+    iframeBrowsingContext
+  );
+  waitForScreenOrientationChangeEventInIframe =
+    isWindowScreenOrientationChangeEventEmitted(iframeBrowsingContext);
+
   // We're directly calling the command here as there's no way to do such action from the UI.
   await ui.commands.targetConfigurationCommand.updateConfiguration({
     rdmPaneOrientation: {
       type: "portrait-primary",
       angle: 0,
-      isViewportRotated: true,
     },
   });
   is(
@@ -199,6 +292,17 @@ addRDMTask(TEST_COM_URL, async function ({ ui }) {
     false,
     "on window.screen.orientation, change event was not dispatched after trying to set the same orientation again"
   );
+
+  is(
+    await waitForOrientationChangeEventInIframe,
+    false,
+    "orientationchange event was not dispatched in iframe after trying to set the same orientation again"
+  );
+  is(
+    await waitForScreenOrientationChangeEventInIframe,
+    false,
+    "on window.screen.orientation, change event was not dispatched in iframe after trying to set the same orientation again"
+  );
 });
 
 function getScreenOrientationType(browserOrBrowsingContext) {

devtools/client/responsive/ui.js

@@ -717,8 +717,8 @@ class ResponsiveUI {
   }
 
   async onRotateViewport(event) {
-    const { orientationType: type, angle, isViewportRotated } = event.data;
-    await this.updateScreenOrientation(type, angle, isViewportRotated);
+    const { orientationType: type, angle } = event.data;
+    await this.updateScreenOrientation(type, angle);
   }
 
   async onScreenshot() {
@@ -953,21 +953,12 @@ class ResponsiveUI {
    *        The orientation type to update the current device screen to.
    * @param {Number} angle
    *        The rotation angle to update the current device screen to.
-   * @param {Boolean} isViewportRotated
-   *        Whether or not the reason for updating the screen orientation is a result
-   *        of actually rotating the device via the RDM toolbar. If true, then an
-   *        "orientationchange" event is simulated. Otherwise, the screen orientation is
-   *        updated because of changing devices, opening RDM, or the page has been
-   *        reloaded/navigated to, so we should not be simulating "orientationchange".
    */
-  async updateScreenOrientation(type, angle, isViewportRotated = false) {
-    await this.commands.targetConfigurationCommand.simulateScreenOrientationChange(
-      {
-        type,
-        angle,
-        isViewportRotated,
-      }
-    );
+  async updateScreenOrientation(type, angle) {
+    // We need to call the method on the parent process
+    await this.commands.targetConfigurationCommand.updateConfiguration({
+      rdmPaneOrientation: { type, angle },
+    });
   }
 
   /**

devtools/server/actors/emulation/responsive.js

@@ -69,17 +69,6 @@ class ResponsiveActor extends Actor {
   setElementPickerState(state, pickerType) {
     this.targetActor.touchSimulator.setElementPickerState(state, pickerType);
   }
-
-  /**
-   * Dispatches an "orientationchange" event and an "change" event
-   * on `window.screen.orientation`.
-   */
-  async dispatchOrientationChangeEvent() {
-    const { CustomEvent } = this.win;
-    const orientationChangeEvent = new CustomEvent("orientationchange");
-    this.win.dispatchEvent(orientationChangeEvent);
-    this.win.screen.orientation.dispatchEvent(new CustomEvent("change"));
-  }
 }
 
 exports.ResponsiveActor = ResponsiveActor;

devtools/server/actors/target-configuration.js

@@ -476,7 +476,9 @@ class TargetConfigurationActor extends Actor {
    * @param {Number} options.angle: The rotated angle of the device.
    */
   _setRDMPaneOrientation({ type, angle }) {
-    this._browsingContext.setRDMPaneOrientation(type, angle);
+    if (this._browsingContext.inRDMPane) {
+      this._browsingContext.setOrientationOverride(type, angle);
+    }
   }
 
   /**

devtools/shared/commands/target-configuration/target-configuration-command.js

@@ -88,36 +88,6 @@ class TargetConfigurationCommand {
     const front = await this.getFront();
     return !!front.traits.supportedOptions[configurationKey];
   }
-
-  /**
-   * Change orientation type and angle (that can be accessed through screen.orientation in
-   * the content page) and simulates the "orientationchange" event when the device screen
-   * was rotated.
-   * Note that this will only be effective if the Responsive Design Mode is enabled.
-   *
-   * @param {Object} options
-   * @param {String} options.type: The orientation type of the rotated device.
-   * @param {Number} options.angle: The rotated angle of the device.
-   * @param {Boolean} options.isViewportRotated: Whether or not screen orientation change
-   *                 is a result of rotating the viewport. If true, an "orientationchange"
-   *                 event will be dispatched in the content window.
-   */
-  async simulateScreenOrientationChange({ type, angle, isViewportRotated }) {
-    // We need to call the method on the parent process
-    await this.updateConfiguration({
-      rdmPaneOrientation: { type, angle },
-    });
-
-    // Don't dispatch the "orientationchange" event if orientation change is a result
-    // of switching to a new device, location change, or opening RDM.
-    if (!isViewportRotated) {
-      return;
-    }
-
-    const responsiveFront =
-      await this._commands.targetCommand.targetFront.getFront("responsive");
-    await responsiveFront.dispatchOrientationChangeEvent();
-  }
 }
 
 module.exports = TargetConfigurationCommand;

devtools/shared/specs/responsive.js

@@ -29,11 +29,6 @@ const responsiveSpec = generateActorSpec({
       },
       response: {},
     },
-
-    dispatchOrientationChangeEvent: {
-      request: {},
-      response: {},
-    },
   },
 });