DevTools: fix incorrect device orientation bug

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

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  */
 WebInspector.SensorsView = function()
 {
@@ skipping 298 matching lines @@
 
         cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "accelerometer-reset-button"));
         return fieldsetElement;
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      */
     _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}
      */
     _onBoxDrag: function(event)
     {
         var mouseMoveVector = this._calculateRadiusVector(event.x, event.y);
         if (!mouseMoveVector)
             return true;
 
         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);
             axis.normalize();
             angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector);
         }
         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);
         return false;
     },
 
     /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
@@ skipping 135 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }
 
 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;