DevTools: fix janky transition in sensors panel

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 62ae7b9c9218c8df2bc5f7b5b451f48d70a7a69e..d160f9d53ba36758071c26f34389a2a1c7a4deb1 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
@@ -156,7 +156,8 @@ WebInspector.SensorsView.prototype = {
 
         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");
@@ -261,10 +262,8 @@ WebInspector.SensorsView.prototype = {
             this._gammaSetter(roundAngle(deviceOrientation.gamma));
         }
 
-        if (modificationSource != WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag)
-            this._setBoxOrientation(deviceOrientation);
-        else
-            this._boxElement.classList.remove("is-animating");
+        var noAnimation = modificationSource === WebInspector.SensorsView.DeviceOrientationModificationSource.UserDrag;

[lushnikov, 2016/05/16 21:51:08]

var animate = ...

[luoe, 2016/05/16 22:15:56]

Done.

+        this._setBoxOrientation(deviceOrientation, noAnimation);
 
         this._deviceOrientation = deviceOrientation;
         this._applyDeviceOrientation();
@@ -313,29 +312,19 @@ WebInspector.SensorsView.prototype = {
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
+     * @param {boolean=} noAnimation

[lushnikov, 2016/05/16 21:51:08]

let's pass a non-optional "animate" parameter here

[luoe, 2016/05/16 22:15:56]

Done.

      */
-    _setBoxOrientation: function(deviceOrientation)
+    _setBoxOrientation: function(deviceOrientation, noAnimation)
     {
-        var matrix = this._viewportPreviewMatrix(true);
-        this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
-
-        this._boxElement.classList.add("is-animating");
-        this._boxElement.style.transform = this._boxMatrix.toString();
-    },
+        if (noAnimation)
+            this._stageElement.classList.remove("is-animating");
+        else
+            this._stageElement.classList.add("is-animating");
 
-    /**
-     * @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);
+        this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
+        var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(this._boxMatrix);
+        this._orientationLayer.style.transform = eulerAngles.toRotate3DString();
     },
 
     /**
@@ -355,17 +344,18 @@ WebInspector.SensorsView.prototype = {
             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);
@@ -383,7 +373,7 @@ WebInspector.SensorsView.prototype = {
             return false;
 
         this._mouseDownVector = this._calculateRadiusVector(event.x, event.y);
-        this._originalBoxMatrix = this._boxMatrix;
+        this._originalBoxMatrix = this._boxMatrix.scale(1);

[lushnikov, 2016/05/16 21:51:08]

what is this for?

[luoe, 2016/05/16 22:15:56]

Ah, no need for this anymore!  I was originally using it as a .clone(), but this
is the only place where originalBoxMatrix is set, so it's not necessary to
clone.

 
         if (!this._mouseDownVector)
             return false;