Backed out changeset 91643c6f9a42 (bug 1556533) for es lint failure CLOSED TREE

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

@@ -222,6 +222,7 @@ module.exports = {
 
       dispatch(changeDevice(id, device.name, deviceType));
       dispatch(changePixelRatio(id, device.pixelRatio));
+      dispatch(changeViewportAngle(id, viewport.angle));
       dispatch(changeUserAgent(device.userAgent));
       dispatch(toggleTouchSimulation(device.touch));
     };

devtools/client/responsive.html/components/App.js

@@ -163,17 +163,13 @@ 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));
   }
 
   onContentResize({ width, height }) {
@@ -278,11 +274,11 @@ class App extends PureComponent {
       };
     }
 
-    const currentAngle = viewport.angle;
+    const currentAngle = Services.prefs.getIntPref("devtools.responsive.viewport.angle");
     const angleToRotateTo = currentAngle === 90 ? 0 : 90;
-    const { type, angle } = getOrientation(currentDevice, viewport, angleToRotateTo);
+    const orientation = getOrientation(currentDevice, viewport, angleToRotateTo);
 
-    this.onChangeViewportOrientation(id, type, angle, true);
+    this.onChangeViewportOrientation(id, orientation);
     this.props.dispatch(rotateViewport(id));
   }
 

devtools/client/responsive.html/components/Browser.js

@@ -13,7 +13,6 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
 const { PORTRAIT_PRIMARY, LANDSCAPE_PRIMARY } = require("../constants");
-const Types = require("../types");
 const e10s = require("../utils/e10s");
 const message = require("../utils/message");
 const { getTopLevelWindow } = require("../utils/window");
@@ -34,7 +33,7 @@ class Browser extends PureComponent {
       onResizeViewport: PropTypes.func.isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
       userContextId: PropTypes.number.isRequired,
-      viewport: PropTypes.shape(Types.viewport).isRequired,
+      viewportId: PropTypes.number.isRequired,
     };
   }
 
@@ -115,10 +114,10 @@ class Browser extends PureComponent {
 
   onSetScreenOrientation(msg) {
     const { width, height } = msg.data;
-    const { angle, id } = this.props.viewport;
+    const angle = Services.prefs.getIntPref("devtools.responsive.viewport.angle");
     const type = height >= width ? PORTRAIT_PRIMARY : LANDSCAPE_PRIMARY;
 
-    this.props.onChangeViewportOrientation(id, type, angle);
+    this.props.onChangeViewportOrientation(this.props.viewportId, { type, angle });
   }
 
   async startFrameScript() {

devtools/client/responsive.html/components/ResizableViewport.js

@@ -180,7 +180,7 @@ class ResizableViewport extends PureComponent {
             Browser({
               swapAfterMount,
               userContextId: viewport.userContextId,
-              viewport,
+              viewportId: viewport.id,
               onBrowserMounted,
               onChangeViewportOrientation,
               onContentResize,

devtools/client/responsive.html/manager.js

@@ -583,15 +583,12 @@ ResponsiveUI.prototype = {
   },
 
   async onChangeDevice(event) {
+    const { device, viewport } = event.data;
     const { pixelRatio, touch, userAgent } = event.data.device;
+
     let reloadNeeded = false;
     await this.updateDPPX(pixelRatio);
-
-    // Get the orientation values of the device we are changing to and update.
-    const { device, viewport } = event.data;
-    const { type, angle } = getOrientation(device, viewport);
-    await this.updateScreenOrientation(type, angle);
-
+    await this.updateScreenOrientation(getOrientation(device, viewport), true);
     reloadNeeded |= await this.updateUserAgent(userAgent) &&
                     this.reloadOnChange("userAgent");
     reloadNeeded |= await this.updateTouchSimulation(touch) &&
@@ -672,8 +669,8 @@ ResponsiveUI.prototype = {
   },
 
   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 }, false);
   },
 
   /**
@@ -698,10 +695,10 @@ ResponsiveUI.prototype = {
       Services.prefs.getIntPref("devtools.responsive.viewport.width", 0);
 
     let reloadNeeded = false;
-    const { type, angle } = this.getInitialViewportOrientation({ width, height });
+    const viewportOrientation = this.getInitialViewportOrientation({ width, height });
 
     await this.updateDPPX(pixelRatio);
-    await this.updateScreenOrientation(type, angle);
+    await this.updateScreenOrientation(viewportOrientation, true);
 
     if (touchSimulationEnabled) {
       reloadNeeded |= await this.updateTouchSimulation(touchSimulationEnabled) &&
@@ -800,31 +797,23 @@ ResponsiveUI.prototype = {
   /**
    * Sets the screen orientation values of the simulated device.
    *
-   * @param {String} type
-   *        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
+   * @param {Object} orientation
+   *        The orientation to update the current device screen to.
+   * @param {Boolean} changeDevice
    *        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".
+   *        of actually rotating the device via the RDM toolbar or if the user switched to
+   *        another device.
    */
-  async updateScreenOrientation(type, angle, isViewportRotated = false) {
+  async updateScreenOrientation(orientation, changeDevice = false) {
     const targetFront = await this.client.mainRoot.getTab();
     const simulateOrientationChangeSupported =
     await targetFront.actorHasMethod("emulation", "simulateScreenOrientationChange");
 
     // Ensure that simulateScreenOrientationChange is supported.
     if (simulateOrientationChangeSupported) {
+      const { type, angle } = orientation;
       await this.emulationFront.simulateScreenOrientationChange(type, angle,
-                                                                isViewportRotated);
-    }
-
-    // Used by tests.
-    if (!isViewportRotated) {
-      this.emit("only-viewport-orientation-changed");
+                                                                changeDevice);
     }
   },
 

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

@@ -34,20 +34,4 @@ addRDMTask(TEST_URL, async function({ ui }) {
       await orientationChange;
     }
   );
-
-  info("Check that the viewport orientation changed, but not the angle after a reload");
-  const browser = ui.getViewportBrowser();
-  const reload = browser.reload();
-  const onViewportOrientationChange = once(ui, "only-viewport-orientation-changed");
-  await reload;
-  await onViewportOrientationChange;
-  ok(true, "orientationchange event was not dispatched on reload.");
-
-  await ContentTask.spawn(ui.getViewportBrowser(), {},
-  async function() {
-    info("Check that we still have the previous orientation values.");
-    is(content.screen.orientation.angle, 90, "Orientation angle is still 90");
-    is(content.screen.orientation.type,
-      "landscape-primary", "Orientation is still landscape-primary.");
-  });
 });

devtools/client/responsive.html/utils/orientation.js

@@ -45,7 +45,7 @@ function getOrientation(device, viewport, angleToRotateTo = null) {
   if (typeof angleToRotateTo === "number") {
     angle = angleToRotateTo;
   } else if (currentOrientation !== primaryOrientation) {
-    angle = 90;
+    angle = 270;
   } else {
     angle = 0;
   }

devtools/server/actors/emulation.js

@@ -370,14 +370,15 @@ const EmulationActor = protocol.ActorClassWithSpec(emulationSpec, {
    *        The orientation type of the rotated device.
    * @param {Number} angle
    *        The rotated angle of the device.
-   * @param {Boolean} isViewportRotated
-   *        Whether or not screen orientation change is a result of rotating the viewport.
-   *        If true, then dispatch the "orientationchange" event on the content window.
+   * @param {Boolean} deviceChange
+   *        Whether or not screen orientation change is a result of changing the device
+   *        or rotating the current device. If the latter, then dispatch the
+   *        "orientationchange" event on the content window.
    */
-  async simulateScreenOrientationChange(type, angle, isViewportRotated = false) {
+  async simulateScreenOrientationChange(type, angle, deviceChange) {
     // 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) {
+    // of switching to a new device.
+    if (deviceChange) {
       this.setScreenOrientation(type, angle);
       return;
     }