DevTools: Update 3D device in accelerometer emulation

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 113 matching lines @@
             this._geolocation.apply();
         } else {
             this._geolocation.clear();
         }
     },
 
     _createDeviceOrientationSection: function()
     {
         var orientationGroup = this.contentElement.createChild("section", "sensors-group");
         orientationGroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Accelerometer");
-        var fields = orientationGroup.createChild("div", "geo-fields");
+        var orientationContent = orientationGroup.createChild("div", "orientation-content");
+        var fields = orientationContent.createChild("div", "orientation-fields");
 
         const accelerometerOffOption = {title: WebInspector.UIString("Off"), orientation: WebInspector.SensorsView.NonPresetOptions.NoOverride};
         const customOrientationOption = {title: WebInspector.UIString("Custom orientation..."), orientation: WebInspector.SensorsView.NonPresetOptions.Custom};
         this._orientationSelectElement = this.contentElement.createChild("select", "chrome-select");
         this._orientationSelectElement.appendChild(new Option(accelerometerOffOption.title, accelerometerOffOption.orientation));
         this._orientationSelectElement.appendChild(new Option(customOrientationOption.title, customOrientationOption.orientation));
 
         var orientationGroups = WebInspector.SensorsView.PresetOrientations;
         for (var i = 0; i < orientationGroups.length; ++i) {
             var groupElement = this._orientationSelectElement.createChild("optgroup");
             groupElement.label = orientationGroups[i].title;
             var group = orientationGroups[i].value;
             for (var j = 0; j < group.length; ++j)
                 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._deviceOrientationFieldset.disabled = true;
+
+        this._stageElement = orientationContent.createChild("div", "accelerometer-stage");
+        this._stageElement.title = WebInspector.UIString("shift+drag to rotate around the z-axis");
+        this._boxElement = this._stageElement.createChild("section", "accelerometer-box accelerometer-element");
+
+        this._boxElement.createChild("section", "accelerometer-front accelerometer-element");
+        this._boxElement.createChild("section", "accelerometer-top accelerometer-element");
+        this._boxElement.createChild("section", "accelerometer-back accelerometer-element");
+        this._boxElement.createChild("section", "accelerometer-left accelerometer-element");
+        this._boxElement.createChild("section", "accelerometer-right accelerometer-element");
+        this._boxElement.createChild("section", "accelerometer-bottom accelerometer-element");
+
+        WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bind(this), this._onBoxDragEnd.bind(this), "-webkit-grabbing", "-webkit-grab");
+
         fields.appendChild(this._deviceOrientationFieldset);
+        this._enableOrientationFields(true);
+        this._setBoxOrientation(this._deviceOrientation);
+    },
+
+    /**
+     * @param {?boolean} disable
+     */
+    _enableOrientationFields: function(disable)
+    {
+        if (disable) {
+            this._deviceOrientationFieldset.disabled = true;
+            this._stageElement.classList.add("disabled");
+        } else {
+            this._deviceOrientationFieldset.disabled = false;
+            this._stageElement.classList.remove("disabled");
+        }
     },
 
     _orientationSelectChanged: function()
     {
         var value = this._orientationSelectElement.options[this._orientationSelectElement.selectedIndex].value;
-        this._deviceOrientationFieldset.disabled = false;
+        this._enableOrientationFields(false);
 
         if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) {
             this._deviceOrientationOverrideEnabled = false;
-            this._deviceOrientationFieldset.disabled = true;
+            this._enableOrientationFields(true);
         } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
             this._deviceOrientationOverrideEnabled = true;
             this._alphaElement.focus();
         } else {
             var parsedValue = JSON.parse(value);
             this._deviceOrientationOverrideEnabled = true;
             this._deviceOrientation = new WebInspector.DeviceOrientation(parsedValue[0], parsedValue[1], parsedValue[2]);
             this._setDeviceOrientation(this._deviceOrientation, WebInspector.SensorsView.DeviceOrientationModificationSource.SelectPreset);
         }
     },
@@ skipping 19 matching lines @@
     },
 
     _applyDeviceOrientationUserInput: function()
     {
         this._setDeviceOrientation(WebInspector.DeviceOrientation.parseUserInput(this._alphaElement.value.trim(), this._betaElement.value.trim(), this._gammaElement.value.trim()), WebInspector.SensorsView.DeviceOrientationModificationSource.UserInput);
         this._setSelectElementLabel(this._orientationSelectElement, WebInspector.SensorsView.NonPresetOptions.Custom);
     },
 
     _resetDeviceOrientation: function()
     {
-        this._setDeviceOrientation(new WebInspector.DeviceOrientation(0, 0, 0), WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton);
-        this._setSelectElementLabel(this._orientationSelectElement, "[0, 0, 0]");
+        this._setDeviceOrientation(new WebInspector.DeviceOrientation(0, 90, 0), WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton);
+        this._setSelectElementLabel(this._orientationSelectElement, "[0, 90, 0]");
     },
 
     /**
      * @param {?WebInspector.DeviceOrientation} deviceOrientation
      * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} modificationSource
      */
     _setDeviceOrientation: function(deviceOrientation, modificationSource)
     {
         if (!deviceOrientation)
             return;
 
         /**
          * @param {number} angle
          * @return {number}
          */
         function roundAngle(angle)
         {
             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("smooth-transition");
+            this._boxElement.classList.remove("is-animating");
 
         this._deviceOrientation = deviceOrientation;
         this._applyDeviceOrientation();
     },
 
     /**
      * @param {!Element} parentElement
      * @param {!Element} input
      * @param {string} label
      * @return {function(string)}
      */
     _createAxisInput: function(parentElement, input, label)
     {
         var div = parentElement.createChild("div", "accelerometer-axis-input-container");
         div.appendChild(input);
         div.createTextChild(label);
         input.type = "number";
         return WebInspector.bindInput(input, this._applyDeviceOrientationUserInput.bind(this), WebInspector.DeviceOrientation.validator, true);
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      * @return {!Element}
      */
     _createDeviceOrientationOverrideElement: function(deviceOrientation)
     {
         var fieldsetElement = createElement("fieldset");
         fieldsetElement.classList.add("device-orientation-override-section");
-        var tableElement = fieldsetElement.createChild("table");
-        var rowElement = tableElement.createChild("tr");
-        var cellElement = rowElement.createChild("td", "accelerometer-inputs-cell");
+        var cellElement = fieldsetElement.createChild("td", "accelerometer-inputs-cell");
 
         this._alphaElement = createElement("input");
         this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, WebInspector.UIString("\u03B1 (alpha)"));
         this._alphaSetter(String(deviceOrientation.alpha));
 
         this._betaElement = createElement("input");
         this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("\u03B2 (beta)"));
         this._betaSetter(String(deviceOrientation.beta));
 
         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), "accelerometer-reset-button"));
-
-        this._stageElement = rowElement.createChild("td","accelerometer-stage");
-        this._boxElement = this._stageElement.createChild("section", "accelerometer-box");
-
-        this._boxElement.createChild("section", "front");
-        this._boxElement.createChild("section", "top");
-        this._boxElement.createChild("section", "back");
-        this._boxElement.createChild("section", "left");
-        this._boxElement.createChild("section", "right");
-        this._boxElement.createChild("section", "bottom");
-
-        WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bind(this), this._onBoxDragEnd.bind(this), "-webkit-grabbing", "-webkit-grab");
-        this._setBoxOrientation(deviceOrientation);
         return fieldsetElement;
     },
 
     /**
      * @param {!WebInspector.DeviceOrientation} deviceOrientation
      */
     _setBoxOrientation: function(deviceOrientation)
     {
         var matrix = new WebKitCSSMatrix();
-        this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
-        this._boxElement.classList.add("smooth-transition");
+        this._boxMatrix = matrix.rotate(90-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
+        this._boxElement.classList.add("is-animating");
         this._boxElement.style.webkitTransform = this._boxMatrix.toString();

[PhistucK, 2016/05/06 11:25:44]

I understand you did not touch this, but can this be changed from
webkitTransform to transform?

     },
 
     /**
      * @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 = WebInspector.Geometry.crossProduct(this._mouseDownVector, mouseMoveVector);
-        axis.normalize();
-        var angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector);
+        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);
         this._currentMatrix = rotationMatrix.multiply(this._boxMatrix);
-        this._boxElement.style.webkitTransform = this._currentMatrix;
+
+        var mat90 = new WebKitCSSMatrix();

[PhistucK, 2016/05/06 11:25:44]

It is so crucial to use WebKitCSSMatrix? Can this be implemented without it?

+        mat90.rotate(90);
+        this._boxElement.style.webkitTransform = mat90.multiply(this._currentMatrix);

[PhistucK, 2016/05/06 11:25:44]

webkitTransform to transform

         var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(this._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 93 matching lines @@
             {title: WebInspector.UIString("Location unavailable"), location: WebInspector.SensorsView.NonPresetOptions.Unavailable}
         ]
     }
 ]
 
 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: !WebInspector.DeviceOrientation}>}>} */
 WebInspector.SensorsView.PresetOrientations = [
     {
         title: "Presets",
         value: [
-            {title: WebInspector.UIString("Portrait"), orientation: "[0, 0, 0]"},
-            {title: WebInspector.UIString("Portrait upside down"), orientation: "[180, 0, 0]"},
-            {title: WebInspector.UIString("Landscape left"), orientation: "[90, 0, 0]"},
-            {title: WebInspector.UIString("Landscape right"), orientation: "[270, 0, 0]"},
-            {title: WebInspector.UIString("Display up"), orientation: "[0, 270, 0]"},
-            {title: WebInspector.UIString("Display down"), orientation: "[0, 90, 0]"}
+            {title: WebInspector.UIString("Portrait"), orientation: "[0, 90, 0]"},
+            {title: WebInspector.UIString("Portrait upside down"), orientation: "[180, 90, 0]"},
+            {title: WebInspector.UIString("Landscape left"), orientation: "[90, 90, 0]"},
+            {title: WebInspector.UIString("Landscape right"), orientation: "[270, 90, 0]"},
+            {title: WebInspector.UIString("Display up"), orientation: "[0, 0, 0]"},
+            {title: WebInspector.UIString("Display down"), orientation: "[0, 180, 0]"}
         ]
     }
 ]
 
 /**
  * @return {!WebInspector.SensorsView}
  */
 WebInspector.SensorsView.instance = function()
 {
     if (!WebInspector.SensorsView._instanceObject)
@@ skipping 15 matching lines @@
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }
+
+WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;