DevTools: fix incorrect device orientation bug

third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js

Index: third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js b/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
index d6c5eaa51d8c0b4a5388602afdb71329ad2d74df..16646c4b3bd6c3e310b5947f0400ed55d7ef5aea 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
@@ -316,13 +316,29 @@ WebInspector.SensorsView.prototype = {
      */
     _setBoxOrientation: function(deviceOrientation)
     {
-        var matrix = new WebKitCSSMatrix();
-        this._boxMatrix = matrix.rotate(90-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
+        var matrix = this._screenSpaceMatrix(true);
+        this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
+
         this._boxElement.classList.add("is-animating");
         this._boxElement.style.webkitTransform = this._boxMatrix.toString();
     },
 
     /**
+     * @param {boolean=} toScreenSpace
+     * @return {!CSSMatrix}
+     */
+    _screenSpaceMatrix: function(toScreenSpace)
+    {
+        // The default orientation [0, 0, 0] represents a device with
+        // screen facing up. This transformation shifts the
+        // orientation displayed in the 3D preview to be front-facing
+        // instead of top-down.
+        var betaRotate = toScreenSpace ? 90 : -90;
+        var matrix = new WebKitCSSMatrix();
+        return matrix.rotate(betaRotate, 0, 0);
+    },
+
+    /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
@@ -335,7 +351,7 @@ WebInspector.SensorsView.prototype = {
         event.consume(true);
         var axis, angle;
         if (event.shiftKey) {
-            axis = new WebInspector.Geometry.Vector(0, 0, 1);
+            axis = new WebInspector.Geometry.Vector(0, 0, -1);
             angle = (this._mouseDownVector.x - mouseMoveVector.x)*WebInspector.SensorsView.ShiftDragOrientationSpeed;
         } else {
             axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector);
@@ -345,11 +361,11 @@ WebInspector.SensorsView.prototype = {
         var matrix = new WebKitCSSMatrix();
         var rotationMatrix = matrix.rotateAxisAngle(axis.x, axis.y, axis.z, angle);
         this._currentMatrix = rotationMatrix.multiply(this._boxMatrix);
+        this._boxElement.style.webkitTransform = this._currentMatrix;

[lushnikov, 2016/05/06 18:04:47]

let's use transform here

[luoe, 2016/05/06 18:14:32]

Done.

 
-        var mat90 = new WebKitCSSMatrix();
-        mat90.rotate(90);
-        this._boxElement.style.webkitTransform = mat90.multiply(this._currentMatrix);
-        var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(this._currentMatrix);
+        var transformFromScreen = this._screenSpaceMatrix();
+        var correctedMatrix = this._currentMatrix.multiply(transformFromScreen);
+        var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(correctedMatrix);
         var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alpha, -eulerAngles.beta, eulerAngles.gamma);
         this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag);
         this._setSelectElementLabel(this._orientationSelectElement, WebInspector.SensorsView.NonPresetOptions.Custom);