DevTools: fix janky transition in sensors panel

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 138 matching lines @@
                 groupElement.appendChild(new Option(group[j].title, group[j].orientation));
         }
         this._orientationSelectElement.selectedIndex = 0;
         fields.appendChild(this._orientationSelectElement);
         this._orientationSelectElement.addEventListener("change", this._orientationSelectChanged.bind(this));
 
         this._deviceOrientationFieldset = this._createDeviceOrientationOverrideElement(this._deviceOrientation);
 
         this._stageElement = orientationContent.createChild("div", "orientation-stage");
         this._stageElement.title = WebInspector.UIString("Shift+drag horizontally to rotate around the y-axis");
-        this._boxElement = this._stageElement.createChild("section", "orientation-box orientation-element");
+        this._orientationLayer = this._stageElement.createChild("div", "orientation-layer");
+        this._boxElement = this._orientationLayer.createChild("section", "orientation-box orientation-element");
 
         this._boxElement.createChild("section", "orientation-front orientation-element");
         this._boxElement.createChild("section", "orientation-top orientation-element");
         this._boxElement.createChild("section", "orientation-back orientation-element");
         this._boxElement.createChild("section", "orientation-left orientation-element");
         this._boxElement.createChild("section", "orientation-right orientation-element");
         this._boxElement.createChild("section", "orientation-bottom orientation-element");
 
         WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bind(this), null, "-webkit-grabbing", "-webkit-grab");
 
         fields.appendChild(this._deviceOrientationFieldset);
         this._enableOrientationFields(true);
-        this._setBoxOrientation(this._deviceOrientation);
+        this._setBoxOrientation(this._deviceOrientation, false);
     },
 
     /**
      * @param {?boolean} disable
      */
     _enableOrientationFields: function(disable)
     {
         if (disable) {
             this._deviceOrientationFieldset.disabled = true;
             this._stageElement.classList.add("disabled");
@@ skipping 71 matching lines @@
         {
             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));
         }
 
-        if (modificationSource != WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag)
-            this._setBoxOrientation(deviceOrientation);
-        else
-            this._boxElement.classList.remove("is-animating");
+        var animate = modificationSource !== WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag;
+        this._setBoxOrientation(deviceOrientation, animate);
 
         this._deviceOrientation = deviceOrientation;
         this._applyDeviceOrientation();
     },
 
     /**
      * @param {!Element} parentElement
      * @param {!Element} input
      * @param {string} label
      * @return {function(string)}
@@ skipping 28 matching lines @@
         this._gammaElement = createElement("input");
         this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, WebInspector.UIString("\u03B3 (gamma)"));
         this._gammaSetter(String(deviceOrientation.gamma));
 
         cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "orientation-reset-button"));
         return fieldsetElement;
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
+     * @param {boolean} animate
      */
-    _setBoxOrientation: function(deviceOrientation)
+    _setBoxOrientation: function(deviceOrientation, animate)
     {
-        var matrix = this._viewportPreviewMatrix(true);
+        if (animate)
+            this._stageElement.classList.add("is-animating");
+        else
+            this._stageElement.classList.remove("is-animating");
+
+        var matrix = new WebKitCSSMatrix();
         this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
-
-        this._boxElement.classList.add("is-animating");
-        this._boxElement.style.transform = this._boxMatrix.toString();
+        var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(this._boxMatrix);
+        this._orientationLayer.style.transform = eulerAngles.toRotate3DString();
     },
 
     /**
-     * @param {boolean=} toViewportPreview
-     * @return {!CSSMatrix}
-     */
-    _viewportPreviewMatrix: function(toViewportPreview)
-    {
-        // 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 = toViewportPreview ? 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);
             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);
-        var transformFromScreen = this._viewportPreviewMatrix();
 
-        this._boxMatrix = rotationMatrix.multiply(this._originalBoxMatrix);
-        this._boxElement.style.transform = this._boxMatrix.toString();
+        // 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)
+            .rotateAxisAngle(axis.x, axis.y, axis.z, angle)
+            .rotate(90, 0, 0)
+            .multiply(this._originalBoxMatrix);
 
-        var currentMatrix = transformFromScreen.multiply(this._boxMatrix);
         var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(currentMatrix);
         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 132 matching lines @@
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }
 
 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;