DevTools: better SensorsView orientation fix

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 235 matching lines @@
     {
         if (!deviceOrientation)
             return;
 
         /**
          * @param {number} angle
          * @return {number}
          */
         function roundAngle(angle)
         {
-            return Math.round(angle*10000)/10000;
+            return Math.round(angle * 10000) / 10000;
         }
 
         if (modificationSource != WebInspector.SensorsView.DeviceOrientationModificationSource.UserInput) {
             this._alphaSetter(roundAngle(deviceOrientation.alpha));
             this._betaSetter(roundAngle(deviceOrientation.beta));
             this._gammaSetter(roundAngle(deviceOrientation.gamma));
         }
 
         var animate = modificationSource !== WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag;
         this._setBoxOrientation(deviceOrientation, animate);
@@ skipping 47 matching lines @@
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      * @param {boolean} animate
      */
     _setBoxOrientation: function(deviceOrientation, animate)
     {
         if (animate)
             this._stageElement.classList.add("is-animating");
         else
             this._stageElement.classList.remove("is-animating");
 
+        // The CSS transform should not depend on matrix3d, which does not interpolate well.
         var matrix = new WebKitCSSMatrix();
         this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
-        var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(this._boxMatrix);
+        var eulerAngles = new WebInspector.Geometry.EulerAngles(deviceOrientation.alpha, deviceOrientation.beta, deviceOrientation.gamma);
         this._orientationLayer.style.transform = eulerAngles.toRotate3DString();
     },
 
     /**
      * @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);
-            angle = (this._mouseDownVector.x - mouseMoveVector.x)*WebInspector.SensorsView.ShiftDragOrientationSpeed;
+            angle = (this._mouseDownVector.x - mouseMoveVector.x) * WebInspector.SensorsView.ShiftDragOrientationSpeed;
         } else {
             axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector);
             angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector);
         }
 
         // The mouse movement vectors occur in the screen space, which is offset by 90 degrees from
         // the actual device orientation.
         var currentMatrix = new WebKitCSSMatrix();
         currentMatrix = currentMatrix
             .rotate(-90, 0, 0)
@@ skipping 146 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }
 
 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;