DevTools: fix styles and input validation in sensor pane

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 48 matching lines @@
 
         // 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.setAttribute("type", "number");
         this._latitudeInput.value = 0;
-        WebInspector.bindInput(this._latitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.latitudeValidator, true)(String(geolocation.latitude));
+        this._latitudeSetter = WebInspector.bindInput(this._latitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.latitudeValidator, true);
+        this._latitudeSetter(String(geolocation.latitude));
 
         this._longitudeInput = longitudeGroup.createChild("input");
-        this._longitudeInput.setAttribute("type", "text");
+        this._longitudeInput.setAttribute("type", "number");
         this._longitudeInput.value = 0;
-        WebInspector.bindInput(this._longitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.longitudeValidator, true)(String(geolocation.longitude));
+        this._longitudeSetter = WebInspector.bindInput(this._longitudeInput, this._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.longitudeValidator, true);
+        this._longitudeSetter(String(geolocation.longitude));
 
         latitudeGroup.createChild("div", "latlong-title").textContent = WebInspector.UIString("Latitude");
         longitudeGroup.createChild("div", "latlong-title").textContent = WebInspector.UIString("Longitude");
     },
 
     _geolocationSelectChanged: function()
     {
         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._latitudeSetter(coordinates[0]);
+            this._longitudeSetter(coordinates[1]);
         }
 
         this._applyGeolocation();
         if (value === WebInspector.SensorsView.NonPresetOptions.Custom)
             this._latitudeInput.focus();
     },
 
     _applyGeolocationUserInput: function()
     {
         var geolocation = WebInspector.Geolocation.parseUserInput(this._latitudeInput.value.trim(), this._longitudeInput.value.trim(), "");
@@ skipping 85 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]");
     },
 
     /**
      * @param {?WebInspector.DeviceOrientation} deviceOrientation
      * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} modificationSource
      */
     _setDeviceOrientation: function(deviceOrientation, modificationSource)
     {
         if (!deviceOrientation)
             return;
@@ skipping 43 matching lines @@
      */
     _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");
 
         this._alphaElement = createElement("input");
-        this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, WebInspector.UIString("Tilt left/right (\u03B1)"));
+        this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, WebInspector.UIString("Rotation (\u03B1)"));

[lushnikov, 2016/05/02 19:25:57]

can we use roll/pitch/yaw here to define angels? This is common in both android
and iOS SDK.

iOS:
https://developer.apple.com/library/ios/documentation/CoreMotion/Reference/CM...
Android:
http://developer.android.com/reference/android/hardware/SensorListener.html

[luoe, 2016/05/02 21:46:18]

Roll/pitch/yaw looks like a common pattern for mobile dev, but most Device
Orientation docs and tutorials look similar to this:
https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation
which uses rotation, left/right, front/back.

I'm not in strong favor of either way, because they both sound ambiguous to me. 
Roll/pitch/yaw depends on what the "front" and "back" of a phone are, while
"left/right" and "rotation" could be interchangeable.

         this._alphaSetter(String(deviceOrientation.alpha));
 
         this._betaElement = createElement("input");
-        this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("Tilt front/back (\u03B2)"));
+        this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("Up/down tilt (\u03B2)"));
         this._betaSetter(String(deviceOrientation.beta));
 
         this._gammaElement = createElement("input");
-        this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, WebInspector.UIString("Rotate (\u03B3)"));
+        this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, WebInspector.UIString("Left/right tilt (\u03B3)"));
         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");
@@ skipping 182 matching lines @@
      * @param {!WebInspector.Context} context
      * @param {string} actionId
      * @return {boolean}
      */
     handleAction: function(context, actionId)
     {
         WebInspector.inspectorView.showViewInDrawer("sensors");
         return true;
     }
 }