Backed out changeset f4ea30c29aa7 (bug 1556533) for browser_orientationchange_event.js failures CLOSED TREE
authorBogdan Tara <btara@mozilla.com>
Fri, 07 Jun 2019 04:54:14 +0300
changeset 477746 aae7e4d626d364f3a02bcd2ce3c9ad4b4723ac45
parent 477745 a30adf37aef0b35d8e777c03cd712b891054628a
child 477747 a313214fd6486359816abe95d5c15603062a3c0c
push id113372
push userdvarga@mozilla.com
push dateFri, 07 Jun 2019 10:07:35 +0000
treeherdermozilla-inbound@9909cd207cc2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1556533
milestone69.0a1
backs outf4ea30c29aa78e70ee1596638d08e8e3146700c9
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Backed out changeset f4ea30c29aa7 (bug 1556533) for browser_orientationchange_event.js failures CLOSED TREE
devtools/client/responsive.html/actions/devices.js
devtools/client/responsive.html/components/App.js
devtools/client/responsive.html/components/Browser.js
devtools/client/responsive.html/components/ResizableViewport.js
devtools/client/responsive.html/manager.js
devtools/client/responsive.html/test/browser/browser_orientationchange_event.js
devtools/client/responsive.html/utils/orientation.js
devtools/server/actors/emulation.js
--- a/devtools/client/responsive.html/actions/devices.js
+++ b/devtools/client/responsive.html/actions/devices.js
@@ -17,17 +17,17 @@ const {
   REMOVE_DEVICE,
   UPDATE_DEVICE_DISPLAYED,
   UPDATE_DEVICE_MODAL,
 } = require("./index");
 const { post } = require("../utils/message");
 
 const { addDevice, editDevice, getDevices, removeDevice } = require("devtools/client/shared/devices");
 const { changeUserAgent, toggleTouchSimulation } = require("./ui");
-const { changeDevice, changePixelRatio } = require("./viewports");
+const { changeDevice, changePixelRatio, changeViewportAngle } = require("./viewports");
 
 const DISPLAYED_DEVICES_PREF = "devtools.responsive.html.displayedDeviceList";
 
 /**
  * Returns an object containing the user preference of displayed devices.
  *
  * @return {Object} containing two Sets:
  * - added: Names of the devices that were explicitly enabled by the user
@@ -217,16 +217,17 @@ module.exports = {
       post(window, {
         type: "change-device",
         device,
         viewport,
       });
 
       dispatch(changeDevice(id, device.name, deviceType));
       dispatch(changePixelRatio(id, device.pixelRatio));
+      dispatch(changeViewportAngle(id, viewport.angle));
       dispatch(changeUserAgent(device.userAgent));
       dispatch(toggleTouchSimulation(device.touch));
     };
   },
 
   updateDeviceModal(isOpen, modalOpenedFromViewport = null) {
     return {
       type: UPDATE_DEVICE_MODAL,
--- a/devtools/client/responsive.html/components/App.js
+++ b/devtools/client/responsive.html/components/App.js
@@ -1,16 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* eslint-env browser */
 
 "use strict";
 
+const Services = require("Services");
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 
 const Toolbar = createFactory(require("./Toolbar"));
 const Viewports = createFactory(require("./Viewports"));
 
@@ -157,27 +158,23 @@ class App extends PureComponent {
   onChangeUserAgent(userAgent) {
     window.postMessage({
       type: "change-user-agent",
       userAgent,
     }, "*");
     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 }) {
     window.postMessage({
       type: "content-resize",
       width,
       height,
     }, "*");
@@ -272,21 +269,21 @@ class App extends PureComponent {
     // opposite of the viewport orientation.
     if (!currentDevice) {
       currentDevice = {
         height: viewport.width,
         width: viewport.height,
       };
     }
 
-    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));
   }
 
   onScreenshot() {
     this.props.dispatch(takeScreenshot());
   }
 
   onToggleLeftAlignment() {
--- a/devtools/client/responsive.html/components/Browser.js
+++ b/devtools/client/responsive.html/components/Browser.js
@@ -8,17 +8,16 @@
 
 const Services = require("Services");
 const flags = require("devtools/shared/flags");
 const { PureComponent } = require("devtools/client/shared/vendor/react");
 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");
 
 const FRAME_SCRIPT = "resource://devtools/client/responsive.html/browser/content.js";
 
 class Browser extends PureComponent {
   /**
@@ -29,17 +28,17 @@ class Browser extends PureComponent {
   static get propTypes() {
     return {
       onBrowserMounted: PropTypes.func.isRequired,
       onChangeViewportOrientation: PropTypes.func.isRequired,
       onContentResize: PropTypes.func.isRequired,
       onResizeViewport: PropTypes.func.isRequired,
       swapAfterMount: PropTypes.bool.isRequired,
       userContextId: PropTypes.number.isRequired,
-      viewport: PropTypes.shape(Types.viewport).isRequired,
+      viewportId: PropTypes.number.isRequired,
     };
   }
 
   constructor(props) {
     super(props);
     this.onContentResize = this.onContentResize.bind(this);
     this.onResizeViewport = this.onResizeViewport.bind(this);
     this.onSetScreenOrientation = this.onSetScreenOrientation.bind(this);
@@ -110,20 +109,20 @@ class Browser extends PureComponent {
     onResizeViewport({
       width,
       height,
     });
   }
 
   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() {
     const {
       browser,
       onContentResize,
       onResizeViewport,
       onSetScreenOrientation,
--- a/devtools/client/responsive.html/components/ResizableViewport.js
+++ b/devtools/client/responsive.html/components/ResizableViewport.js
@@ -175,17 +175,17 @@ class ResizableViewport extends PureComp
               style: {
                 width: viewport.width + "px",
                 height: viewport.height + "px",
               },
             },
             Browser({
               swapAfterMount,
               userContextId: viewport.userContextId,
-              viewport,
+              viewportId: viewport.id,
               onBrowserMounted,
               onChangeViewportOrientation,
               onContentResize,
               onResizeViewport,
             })
           ),
           dom.div({
             className: resizeHandleClass,
--- a/devtools/client/responsive.html/manager.js
+++ b/devtools/client/responsive.html/manager.js
@@ -578,25 +578,22 @@ ResponsiveUI.prototype = {
         break;
       case "viewport-resize":
         this.onResizeViewport(event);
         break;
     }
   },
 
   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) &&
                     this.reloadOnChange("touchSimulation");
     if (reloadNeeded) {
       this.getViewportBrowser().reload();
     }
     // Used by tests
@@ -667,18 +664,18 @@ ResponsiveUI.prototype = {
     const { width, height } = event.data;
     this.emit("viewport-resize", {
       width,
       height,
     });
   },
 
   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);
   },
 
   /**
    * Restores the previous state of RDM.
    */
   async restoreState() {
     const deviceState = await asyncStorage.getItem("devtools.responsive.deviceState");
     if (deviceState) {
@@ -693,20 +690,20 @@ ResponsiveUI.prototype = {
       Services.prefs.getIntPref("devtools.responsive.viewport.pixelRatio", 0);
     const touchSimulationEnabled =
       Services.prefs.getBoolPref("devtools.responsive.touchSimulation.enabled", false);
     const userAgent = Services.prefs.getCharPref("devtools.responsive.userAgent", "");
     const width =
       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) &&
                       this.reloadOnChange("touchSimulation");
     }
     if (userAgent) {
       reloadNeeded |= await this.updateUserAgent(userAgent) &&
                       this.reloadOnChange("userAgent");
@@ -795,41 +792,33 @@ ResponsiveUI.prototype = {
       reloadNeeded |= await this.emulationFront.clearMetaViewportOverride();
     }
     return reloadNeeded;
   },
 
   /**
    * 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);
     }
   },
 
   /**
    * Helper for tests. Assumes a single viewport for now.
    */
   getViewportSize() {
     return this.toolWindow.getViewportSize();
--- a/devtools/client/responsive.html/test/browser/browser_orientationchange_event.js
+++ b/devtools/client/responsive.html/test/browser/browser_orientationchange_event.js
@@ -29,25 +29,9 @@ addRDMTask(TEST_URL, async function({ ui
             "Orientation angle was updated to 90 degrees.");
           resolve();
         });
       });
 
       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.");
-  });
 });
--- a/devtools/client/responsive.html/utils/orientation.js
+++ b/devtools/client/responsive.html/utils/orientation.js
@@ -40,17 +40,17 @@ function getOrientation(device, viewport
     LANDSCAPE_PRIMARY;
 
   // Calculate the orientation angle of the device.
   let angle;
 
   if (typeof angleToRotateTo === "number") {
     angle = angleToRotateTo;
   } else if (currentOrientation !== primaryOrientation) {
-    angle = 90;
+    angle = 270;
   } else {
     angle = 0;
   }
 
   // Calculate the orientation type of the device.
   let orientationType = currentOrientation;
 
   // If the viewport orientation is different from the primary orientation and the angle
--- a/devtools/server/actors/emulation.js
+++ b/devtools/server/actors/emulation.js
@@ -365,24 +365,25 @@ const EmulationActor = protocol.ActorCla
 
   /**
    * Simulates the "orientationchange" event when device screen is rotated.
    *
    * @param {String} type
    *        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;
     }
 
     const { CustomEvent } = this.win;
     const orientationChangeEvent = new CustomEvent("orientationchange");
 
     this.setScreenOrientation(type, angle);