DevTools: Update styles for sensors drawer 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 d9cf4d773f0147923dc28d809e36ca13db4546c8..858b5abc3a57e94441c7143dd40d6816483a81f0 100644
--- a/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js
@@ -14,54 +14,110 @@ WebInspector.SensorsView = function()
 
     this._geolocationSetting = WebInspector.settings.createSetting("emulation.geolocationOverride", "");
     this._geolocation = WebInspector.Geolocation.parseSetting(this._geolocationSetting.get());
-    this._geolocationEnabled = false;
-    this._appendGeolocationOverrideControl();
+    this._geolocationOverrideEnabled = false;
+    this._createGeolocationSection(this._geolocation);
+
+    this.contentElement.createChild("div").classList.add("panel-section-separator");
 
     this._deviceOrientationSetting = WebInspector.settings.createSetting("emulation.deviceOrientationOverride", "");
     this._deviceOrientation = WebInspector.DeviceOrientation.parseSetting(this._deviceOrientationSetting.get());
-    this._deviceOrientationEnabled = false;
-    this._appendDeviceOrientationOverrideControl();
+    this._deviceOrientationOverrideEnabled = false;
+    this._createDeviceOrientationSection();
+
+    this.contentElement.createChild("div").classList.add("panel-section-separator");
 
     this._appendTouchControl();
 }
 
 WebInspector.SensorsView.prototype = {
-    _appendGeolocationOverrideControl: function()
+    /**
+     * @param {!WebInspector.Geolocation} geolocation
+     */
+    _createGeolocationSection: function(geolocation)
     {
-        var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate geolocation coordinates"));
-        this._geolocationOverrideCheckbox = checkboxLabel.checkboxElement;
-        this._geolocationOverrideCheckbox.addEventListener("click", this._geolocationOverrideCheckboxClicked.bind(this));
-        this.contentElement.appendChild(checkboxLabel);
-        this._geolocationFieldset = this._createGeolocationOverrideElement(this._geolocation);
-        this._geolocationFieldset.disabled = true;
-        this.contentElement.appendChild(this._geolocationFieldset);
+        var geogroup = this.contentElement.createChild("section", "sensors-group");
+        geogroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Geolocation");
+        var fields = geogroup.createChild("div", "geo-fields");
+
+        const noOverrideOption = {title: WebInspector.UIString("No override"), location: WebInspector.SensorsView.NonPresetOptions.NoOverride};
+        const customLocationOption = {title: WebInspector.UIString("Custom location..."), location: WebInspector.SensorsView.NonPresetOptions.Custom};
+        this._locationSelectElement = this.contentElement.createChild("select", "chrome-select");
+        this._locationSelectElement.appendChild(new Option(noOverrideOption.title, noOverrideOption.location));
+        this._locationSelectElement.appendChild(new Option(customLocationOption.title, customLocationOption.location));
+
+        var locationGroups = WebInspector.SensorsView.PresetLocations;
+        for (var i = 0; i < locationGroups.length; ++i) {
+            var group = locationGroups[i].value;
+            var groupElement = this._locationSelectElement.createChild("optgroup");
+            groupElement.label = locationGroups[i].title;
+            for (var j = 0; j < group.length; ++j)
+                groupElement.appendChild(new Option(group[j].title, group[j].location));
+        }
+        this._locationSelectElement.selectedIndex = 0;
+        fields.appendChild(this._locationSelectElement);
+        this._locationSelectElement.addEventListener("change", this._geolocationSelectChanged.bind(this));
+
+        // Validated input fieldset.
+        this._fieldsetElement = fields.createChild("fieldset");
+        this._fieldsetElement.disabled = !this._geolocationOverrideEnabled;
+        this._fieldsetElement.id = "geolocation-override-section";
+
+        var latitudeGroup = this._fieldsetElement.createChild("div", "latlong-group");
+        var longitudeGroup = this._fieldsetElement.createChild("div", "latlong-group");
+
+        this._latitudeInput = latitudeGroup.createChild("input");
+        this._latitudeInput.setAttribute("type", "text");
+        this._latitudeInput.value = 0;
+        WebInspector.bindInput(this._latitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.latitudeValidator, true)(String(geolocation.latitude));
+
+        this._longitudeInput = longitudeGroup.createChild("input");
+        this._longitudeInput.setAttribute("type", "text");
+        this._longitudeInput.value = 0;
+        WebInspector.bindInput(this._longitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.longitudeValidator, true)(String(geolocation.longitude));
+
+        latitudeGroup.createChild("div", "latlong-title").textContent = WebInspector.UIString("Latitude");
+        longitudeGroup.createChild("div", "latlong-title").textContent = WebInspector.UIString("Longitude");
     },
 
-    _geolocationOverrideCheckboxClicked: function()
+    _geolocationSelectChanged: function()
     {
-        var enabled = this._geolocationOverrideCheckbox.checked;
+        this._fieldsetElement.disabled = false;
+        var value = this._locationSelectElement.options[this._locationSelectElement.selectedIndex].value;
+        if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) {
+            this._geolocationOverrideEnabled = false;
+            this._fieldsetElement.disabled = true;
+        } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
+            this._geolocationOverrideEnabled = true;
+        } else if (value === WebInspector.SensorsView.NonPresetOptions.Unavailable) {
+            this._geolocationOverrideEnabled = true;
+            this._geolocation = new WebInspector.Geolocation(0, 0, true);
+        } else {
+            this._geolocationOverrideEnabled = true;
+            var coordinates = JSON.parse(value);
+            this._geolocation = new WebInspector.Geolocation(coordinates[0], coordinates[1], false);
+            this._latitudeInput.value = coordinates[0];
+            this._longitudeInput.value = coordinates[1];
+        }
 
-        this._geolocationEnabled = enabled;
         this._applyGeolocation();
-
-        if (enabled && !this._latitudeElement.value)
-            this._latitudeElement.focus();
-        this._geolocationFieldset.disabled = !enabled;
+        if (value === WebInspector.SensorsView.NonPresetOptions.Custom)
+            this._latitudeInput.focus();
     },
 
     _applyGeolocationUserInput: function()
     {
-        var geolocation = WebInspector.Geolocation.parseUserInput(this._latitudeElement.value.trim(), this._longitudeElement.value.trim(), this._geolocationErrorElement.checked);
+        var geolocation = WebInspector.Geolocation.parseUserInput(this._latitudeInput.value.trim(), this._longitudeInput.value.trim(), "");
         if (!geolocation)
             return;
 
+        this._setSelectElementLabel(this._locationSelectElement, WebInspector.SensorsView.NonPresetOptions.Custom);
         this._geolocation = geolocation;
         this._applyGeolocation();
     },
 
     _applyGeolocation: function()
     {
-        if (this._geolocationEnabled) {
+        if (this._geolocationOverrideEnabled) {
             this._geolocationSetting.set(this._geolocation.toSetting());
             this._geolocation.apply();
         } else {
@@ -69,67 +125,57 @@ WebInspector.SensorsView.prototype = {
         }
     },
 
-    /**
-     * @param {!WebInspector.Geolocation} geolocation
-     * @return {!Element}
-     */
-    _createGeolocationOverrideElement: function(geolocation)
+    _createDeviceOrientationSection: function()
     {
-        var fieldsetElement = createElement("fieldset");
-        fieldsetElement.id = "geolocation-override-section";
-
-        var tableElement = fieldsetElement.createChild("table");
-        var rowElement = tableElement.createChild("tr");
-        var cellElement = rowElement.createChild("td");
-        cellElement = rowElement.createChild("td");
-        cellElement.createTextChild(WebInspector.UIString("Lat = "));
-        this._latitudeElement = cellElement.createChild("input");
-        this._latitudeElement.type = "text";
-        WebInspector.bindInput(this._latitudeElement, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.latitudeValidator, true)(String(geolocation.latitude));
-        cellElement.createTextChild(" , ");
-        cellElement.createTextChild(WebInspector.UIString("Lon = "));
-        this._longitudeElement = cellElement.createChild("input");
-        this._longitudeElement.type = "text";
-        WebInspector.bindInput(this._longitudeElement, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.longitudeValidator, true)(String(geolocation.longitude));
-        rowElement = tableElement.createChild("tr");
-        cellElement = rowElement.createChild("td");
-        cellElement.colSpan = 2;
-        var geolocationErrorLabelElement = createCheckboxLabel(WebInspector.UIString("Emulate position unavailable"), !geolocation || !!geolocation.error);
-        var geolocationErrorCheckboxElement = geolocationErrorLabelElement.checkboxElement;
-        geolocationErrorCheckboxElement.id = "geolocation-error";
-        geolocationErrorCheckboxElement.addEventListener("click", this._applyGeolocationUserInput.bind(this), false);
-        this._geolocationErrorElement = geolocationErrorCheckboxElement;
-        cellElement.appendChild(geolocationErrorLabelElement);
-
-        return fieldsetElement;
-    },
+        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");
+
+        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));
 
-    _appendDeviceOrientationOverrideControl: function()
-    {
-        var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate device orientation"));
-        this._overrideDeviceOrientationCheckbox = checkboxLabel.checkboxElement;
-        this._overrideDeviceOrientationCheckbox.addEventListener("click", this._deviceOrientationOverrideCheckboxClicked.bind(this));
-        this.contentElement.appendChild(checkboxLabel);
         this._deviceOrientationFieldset = this._createDeviceOrientationOverrideElement(this._deviceOrientation);
         this._deviceOrientationFieldset.disabled = true;
-        this.contentElement.appendChild(this._deviceOrientationFieldset);
+        fields.appendChild(this._deviceOrientationFieldset);
     },
 
-    _deviceOrientationOverrideCheckboxClicked: function()
+    _orientationSelectChanged: function()
     {
-        var enabled = this._overrideDeviceOrientationCheckbox.checked;
-
-        this._deviceOrientationEnabled = enabled;
-        this._applyDeviceOrientation();
-
-        if (enabled && !this._alphaElement.value)
+        var value = this._orientationSelectElement.options[this._orientationSelectElement.selectedIndex].value;
+        this._deviceOrientationFieldset.disabled = false;
+
+        if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) {
+            this._deviceOrientationOverrideEnabled = false;
+            this._deviceOrientationFieldset.disabled = true;
+        } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
+            this._deviceOrientationOverrideEnabled = true;
             this._alphaElement.focus();
-        this._deviceOrientationFieldset.disabled = !enabled;
+        } 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);
+        }
     },
 
     _applyDeviceOrientation: function()
     {
-        if (this._deviceOrientationEnabled) {
+        if (this._deviceOrientationOverrideEnabled) {
             this._deviceOrientationSetting.set(this._deviceOrientation.toSetting());
             this._deviceOrientation.apply();
         } else {
@@ -137,9 +183,20 @@ WebInspector.SensorsView.prototype = {
         }
     },
 
+    /**
+     * @param {!Element} selectElement
+     * @param {string} labelValue
+     */
+    _setSelectElementLabel: function(selectElement, labelValue)
+    {
+        var optionValues = Array.prototype.map.call(selectElement.options, x => x.value);
+        selectElement.selectedIndex = optionValues.indexOf(labelValue);
+    },
+
     _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()
@@ -156,14 +213,25 @@ WebInspector.SensorsView.prototype = {
         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(deviceOrientation.alpha);
-            this._betaSetter(deviceOrientation.beta);
-            this._gammaSetter(deviceOrientation.gamma);
+            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._deviceOrientation = deviceOrientation;
         this._applyDeviceOrientation();
@@ -178,14 +246,15 @@ WebInspector.SensorsView.prototype = {
     _createAxisInput: function(parentElement, input, label)
     {
         var div = parentElement.createChild("div", "accelerometer-axis-input-container");
-        div.createTextChild(label);
         div.appendChild(input);
-        input.type = "text";
+        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)
     {
@@ -196,15 +265,15 @@ WebInspector.SensorsView.prototype = {
         var cellElement = rowElement.createChild("td", "accelerometer-inputs-cell");
 
         this._alphaElement = createElement("input");
-        this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, "\u03B1: ");
+        this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, WebInspector.UIString("Tilt left/right (\u03B1)"));
         this._alphaSetter(String(deviceOrientation.alpha));
 
         this._betaElement = createElement("input");
-        this._betaSetter = this._createAxisInput(cellElement, this._betaElement, "\u03B2: ");
+        this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("Tilt front/back (\u03B2)"));
         this._betaSetter(String(deviceOrientation.beta));
 
         this._gammaElement = createElement("input");
-        this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, "\u03B3: ");
+        this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, WebInspector.UIString("Rotate (\u03B3)"));
         this._gammaSetter(String(deviceOrientation.gamma));
 
         cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "accelerometer-reset-button"));
@@ -219,7 +288,7 @@ WebInspector.SensorsView.prototype = {
         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), "move");
+        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;
     },
@@ -231,6 +300,7 @@ WebInspector.SensorsView.prototype = {
     {
         var matrix = new WebKitCSSMatrix();
         this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.gamma, -deviceOrientation.alpha);
+        this._boxElement.classList.add("smooth-transition");
         this._boxElement.style.webkitTransform = this._boxMatrix.toString();
     },
 
@@ -255,6 +325,7 @@ WebInspector.SensorsView.prototype = {
         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;
     },
 
@@ -264,7 +335,7 @@ WebInspector.SensorsView.prototype = {
      */
     _onBoxDragStart: function(event)
     {
-        if (!this._overrideDeviceOrientationCheckbox.checked)
+        if (!this._deviceOrientationOverrideEnabled)
             return false;
 
         this._mouseDownVector = this._calculateRadiusVector(event.x, event.y);
@@ -301,9 +372,12 @@ WebInspector.SensorsView.prototype = {
 
     _appendTouchControl: function()
     {
-        var label = this.contentElement.createChild("label", "touch-label");
-        label.createChild("span", "").textContent = WebInspector.UIString("Touch");
-        var select = label.createChild("select", "chrome-select");
+        var groupElement = this.contentElement.createChild("div", "sensors-group");
+        var title = groupElement.createChild("div", "sensors-group-title");
+        var fieldsElement = groupElement.createChild("div", "sensors-group-fields");
+
+        title.textContent = WebInspector.UIString("Touch");
+        var select = fieldsElement.createChild("select", "chrome-select");
         select.appendChild(new Option(WebInspector.UIString("Device-based"), "auto"));
         select.appendChild(new Option(WebInspector.UIString("Force enabled"), "enabled"));
         select.addEventListener("change", applyTouch, false);
@@ -321,9 +395,56 @@ WebInspector.SensorsView.prototype = {
 WebInspector.SensorsView.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
-    ResetButton: "resetButton"
+    ResetButton: "resetButton",
+    SelectPreset: "selectPreset"
+}
+
+/** {string} */
+WebInspector.SensorsView.NonPresetOptions = {
+    "NoOverride": "noOverride",
+    "Custom": "custom",
+    "Unavailable": "unavailable"
 }
 
+/** @type {!Array.<{title: string, value: !Array.<{title: string, location: string}>}>} */
+WebInspector.SensorsView.PresetLocations = [
+    {
+        title: "Presets",
+        value: [
+            {title: WebInspector.UIString("Berlin"), location: "[52.520007, 13.404954]"},
+            {title: WebInspector.UIString("London"), location: "[51.507351, -0.127758]"},
+            {title: WebInspector.UIString("Moscow"), location: "[55.755826, 37.617300]"},
+            {title: WebInspector.UIString("Mountain View"), location: "[37.386052, -122.083851]"},
+            {title: WebInspector.UIString("Mumbai"), location: "[19.075984, 72.877656]"},
+            {title: WebInspector.UIString("San Francisco"), location: "[37.774929, -122.419416]"},
+            {title: WebInspector.UIString("Shanghai"), location: "[31.230416, 121.473701]"},
+            {title: WebInspector.UIString("São Paulo"), location: "[-23.550520, -46.633309]"},
+            {title: WebInspector.UIString("Tokyo"), location: "[35.689487, 139.691706]"},
+        ]
+    },
+    {
+        title: "Error",
+        value: [
+            {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]"}
+        ]
+    }
+]
+
 /**
  * @return {!WebInspector.SensorsView}
  */