Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2015 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @constructor | 6 * @constructor |
| 7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
| 8 */ | 8 */ |
| 9 WebInspector.SensorsView = function() | 9 WebInspector.SensorsView = function() |
| 10 { | 10 { |
| 11 WebInspector.VBox.call(this, true); | 11 WebInspector.VBox.call(this, true); |
| 12 this.registerRequiredCSS("emulation/sensors.css"); | 12 this.registerRequiredCSS("emulation/sensors.css"); |
| 13 this.contentElement.classList.add("sensors-view"); | 13 this.contentElement.classList.add("sensors-view"); |
| 14 | 14 |
| 15 this._geolocationSetting = WebInspector.settings.createSetting("emulation.ge olocationOverride", ""); | 15 this._geolocationSetting = WebInspector.settings.createSetting("emulation.ge olocationOverride", ""); |
| 16 this._geolocation = WebInspector.Geolocation.parseSetting(this._geolocationS etting.get()); | 16 this._geolocation = WebInspector.Geolocation.parseSetting(this._geolocationS etting.get()); |
| 17 this._geolocationEnabled = false; | 17 this._geolocationOverrideEnabled = false; |
| 18 this._appendGeolocationOverrideControl(); | 18 this._createGeolocationSection(this._geolocation); |
| 19 | |
| 20 this.contentElement.createChild("div").classList.add("panel-section-separato r"); | |
| 19 | 21 |
| 20 this._deviceOrientationSetting = WebInspector.settings.createSetting("emulat ion.deviceOrientationOverride", ""); | 22 this._deviceOrientationSetting = WebInspector.settings.createSetting("emulat ion.deviceOrientationOverride", ""); |
| 21 this._deviceOrientation = WebInspector.DeviceOrientation.parseSetting(this._ deviceOrientationSetting.get()); | 23 this._deviceOrientation = WebInspector.DeviceOrientation.parseSetting(this._ deviceOrientationSetting.get()); |
| 22 this._deviceOrientationEnabled = false; | 24 this._deviceOrientationOverrideEnabled = false; |
| 23 this._appendDeviceOrientationOverrideControl(); | 25 this._createDeviceOrientationSection(); |
| 26 | |
| 27 this.contentElement.createChild("div").classList.add("panel-section-separato r"); | |
| 24 | 28 |
| 25 this._appendTouchControl(); | 29 this._appendTouchControl(); |
| 26 } | 30 } |
| 27 | 31 |
| 28 WebInspector.SensorsView.prototype = { | 32 WebInspector.SensorsView.prototype = { |
| 29 _appendGeolocationOverrideControl: function() | 33 _createGeolocationSection: function(geolocation) |
|
lushnikov
2016/04/23 00:19:46
jsdoc
luoe
2016/04/25 19:26:41
Done.
| |
| 30 { | 34 { |
| 31 var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate g eolocation coordinates")); | 35 var _geogroup = this.contentElement.createChild("section", "sensors-grou p"); |
|
lushnikov
2016/04/23 00:19:46
unnecessary leading "_"
luoe
2016/04/25 19:26:41
Done.
| |
| 32 this._geolocationOverrideCheckbox = checkboxLabel.checkboxElement; | 36 _geogroup.createChild("div", "sensors-group-title").textContent = WebIns pector.UIString("Geolocation"); |
| 33 this._geolocationOverrideCheckbox.addEventListener("click", this._geoloc ationOverrideCheckboxClicked.bind(this)); | 37 var _fields = _geogroup.createChild("div", "geo-fields"); |
|
lushnikov
2016/04/23 00:19:46
unnecessary leading "_"
luoe
2016/04/25 19:26:41
Done.
| |
| 34 this.contentElement.appendChild(checkboxLabel); | 38 |
| 35 this._geolocationFieldset = this._createGeolocationOverrideElement(this. _geolocation); | 39 const noOverrideOption = {title: WebInspector.UIString("No override"), l ocation: WebInspector.SensorsView.NonPresetOptions.NoOverride}; |
| 36 this._geolocationFieldset.disabled = true; | 40 const customLocationOption = {title: WebInspector.UIString("Custom locat ion..."), location: WebInspector.SensorsView.NonPresetOptions.Custom}; |
| 37 this.contentElement.appendChild(this._geolocationFieldset); | 41 this._locationSelectElement = this.contentElement.createChild("select", "chrome-select"); |
| 42 this._locationSelectElement.appendChild(new Option(noOverrideOption.titl e, noOverrideOption.location)); | |
| 43 this._locationSelectElement.appendChild(new Option(customLocationOption. title, customLocationOption.location)); | |
| 44 | |
| 45 var locationGroups = WebInspector.SensorsView.PresetLocations; | |
| 46 for (var i = 0; i < locationGroups.length; ++i) { | |
| 47 var group = locationGroups[i].value; | |
| 48 var groupElement = this._locationSelectElement.createChild("optgroup "); | |
| 49 groupElement.label = locationGroups[i].title; | |
| 50 | |
| 51 for (var j = 0; j < group.length; ++j) { | |
| 52 groupElement.appendChild(new Option(group[j].title, group[j].loc ation)); | |
| 53 } | |
| 54 } | |
| 55 this._locationSelectElement.selectedIndex = 0; | |
| 56 _fields.appendChild(this._locationSelectElement); | |
| 57 this._locationSelectElement.addEventListener("change", this._geolocation SelectChanged.bind(this)); | |
| 58 | |
| 59 // Validated input fieldset | |
| 60 this._fieldsetElement = _fields.createChild("fieldset"); | |
| 61 this._fieldsetElement.disabled = !this._geolocationOverrideEnabled; | |
| 62 this._fieldsetElement.id = "geolocation-override-section"; | |
| 63 | |
| 64 var _latitudeGroup = this._fieldsetElement.createChild("div", "latlong-g roup"); | |
| 65 var _longitudeGroup = this._fieldsetElement.createChild("div", "latlong- group"); | |
| 66 | |
| 67 this._latitudeInput = _latitudeGroup.createChild("input"); | |
| 68 this._latitudeInput.setAttribute("type", "text"); | |
| 69 this._latitudeInput.value = 0; | |
| 70 WebInspector.bindInput(this._latitudeInput, this._applyGeolocationUserIn put.bind(this), WebInspector.Geolocation.latitudeValidator, true)(String(geoloca tion.latitude)); | |
| 71 | |
| 72 this._longitudeInput = _longitudeGroup.createChild("input"); | |
| 73 this._longitudeInput.setAttribute("type", "text"); | |
| 74 this._longitudeInput.value = 0; | |
| 75 WebInspector.bindInput(this._longitudeInput, this._applyGeolocationUserI nput.bind(this), WebInspector.Geolocation.longitudeValidator, true)(String(geolo cation.longitude)); | |
| 76 | |
| 77 _latitudeGroup.createChild("div", "latlong-title").textContent = WebInsp ector.UIString("Latitude"); | |
| 78 _longitudeGroup.createChild("div", "latlong-title").textContent = WebIns pector.UIString("Longitude"); | |
| 38 }, | 79 }, |
| 39 | 80 |
| 40 _geolocationOverrideCheckboxClicked: function() | 81 _geolocationSelectChanged: function() |
| 41 { | 82 { |
| 42 var enabled = this._geolocationOverrideCheckbox.checked; | 83 this._fieldsetElement.disabled = false; |
| 84 var value = this._locationSelectElement.options[this._locationSelectElem ent.selectedIndex].value; | |
| 85 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) { | |
| 86 this._geolocationOverrideEnabled = false; | |
| 87 this._fieldsetElement.disabled = true; | |
| 88 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) { | |
| 89 this._geolocationOverrideEnabled = true; | |
| 90 } else if (value === WebInspector.SensorsView.NonPresetOptions.Unavailab le) { | |
| 91 this._geolocationOverrideEnabled = true; | |
| 92 this._geolocation = new WebInspector.Geolocation(0, 0, WebInspector. Geolocation.Error.PositionUnavailable); | |
| 93 } else { | |
| 94 this._geolocationOverrideEnabled = true; | |
| 95 var coordinates = JSON.parse(value); | |
| 96 this._geolocation = new WebInspector.Geolocation(coordinates[0], coo rdinates[1], WebInspector.Geolocation.Error.None); | |
| 97 this._latitudeInput.value = coordinates[0]; | |
| 98 this._longitudeInput.value = coordinates[1]; | |
| 99 } | |
| 43 | 100 |
| 44 this._geolocationEnabled = enabled; | |
| 45 this._applyGeolocation(); | 101 this._applyGeolocation(); |
| 46 | 102 if (value === WebInspector.SensorsView.NonPresetOptions.Custom) |
| 47 if (enabled && !this._latitudeElement.value) | 103 this._latitudeInput.focus(); |
| 48 this._latitudeElement.focus(); | |
| 49 this._geolocationFieldset.disabled = !enabled; | |
| 50 }, | 104 }, |
| 51 | 105 |
| 52 _applyGeolocationUserInput: function() | 106 _applyGeolocationUserInput: function() |
| 53 { | 107 { |
| 54 var geolocation = WebInspector.Geolocation.parseUserInput(this._latitude Element.value.trim(), this._longitudeElement.value.trim(), this._geolocationErro rElement.checked); | 108 var geolocation = WebInspector.Geolocation.parseUserInput(this._latitude Input.value.trim(), this._longitudeInput.value.trim(), ""); |
| 55 if (!geolocation) | 109 if (!geolocation) |
| 56 return; | 110 return; |
| 57 | 111 |
| 112 this._setSelectElementLabel(this._locationSelectElement, WebInspector.Se nsorsView.NonPresetOptions.Custom); | |
| 58 this._geolocation = geolocation; | 113 this._geolocation = geolocation; |
| 59 this._applyGeolocation(); | 114 this._applyGeolocation(); |
| 60 }, | 115 }, |
| 61 | 116 |
| 62 _applyGeolocation: function() | 117 _applyGeolocation: function() |
| 63 { | 118 { |
| 64 if (this._geolocationEnabled) { | 119 if (this._geolocationOverrideEnabled) { |
| 65 this._geolocationSetting.set(this._geolocation.toSetting()); | 120 this._geolocationSetting.set(this._geolocation.toSetting()); |
| 66 this._geolocation.apply(); | 121 this._geolocation.apply(); |
| 67 } else { | 122 } else { |
| 68 this._geolocation.clear(); | 123 this._geolocation.clear(); |
| 69 } | 124 } |
| 70 }, | 125 }, |
| 71 | 126 |
| 72 /** | 127 _createDeviceOrientationSection: function() |
| 73 * @param {!WebInspector.Geolocation} geolocation | |
| 74 * @return {!Element} | |
| 75 */ | |
| 76 _createGeolocationOverrideElement: function(geolocation) | |
| 77 { | 128 { |
| 78 var fieldsetElement = createElement("fieldset"); | 129 var _orientationGroup = this.contentElement.createChild("section", "sens ors-group"); |
| 79 fieldsetElement.id = "geolocation-override-section"; | 130 _orientationGroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Accelerometer"); |
| 131 var _fields = _orientationGroup.createChild("div", "geo-fields"); | |
| 80 | 132 |
| 81 var tableElement = fieldsetElement.createChild("table"); | 133 const accelerometerOffOption = {title: WebInspector.UIString("Off"), ori entation: WebInspector.SensorsView.NonPresetOptions.NoOverride}; |
| 82 var rowElement = tableElement.createChild("tr"); | 134 const customOrientationOption = {title: WebInspector.UIString("Custom or ientation..."), orientation: WebInspector.SensorsView.NonPresetOptions.Custom}; |
| 83 var cellElement = rowElement.createChild("td"); | 135 this._orientationSelectElement = this.contentElement.createChild("select ", "chrome-select"); |
| 84 cellElement = rowElement.createChild("td"); | 136 this._orientationSelectElement.appendChild(new Option(accelerometerOffOp tion.title, accelerometerOffOption.orientation)); |
| 85 cellElement.createTextChild(WebInspector.UIString("Lat = ")); | 137 this._orientationSelectElement.appendChild(new Option(customOrientationO ption.title, customOrientationOption.orientation)); |
| 86 this._latitudeElement = cellElement.createChild("input"); | |
| 87 this._latitudeElement.type = "text"; | |
| 88 WebInspector.bindInput(this._latitudeElement, this._applyGeolocationUser Input.bind(this), WebInspector.Geolocation.latitudeValidator, true)(String(geolo cation.latitude)); | |
| 89 cellElement.createTextChild(" , "); | |
| 90 cellElement.createTextChild(WebInspector.UIString("Lon = ")); | |
| 91 this._longitudeElement = cellElement.createChild("input"); | |
| 92 this._longitudeElement.type = "text"; | |
| 93 WebInspector.bindInput(this._longitudeElement, this._applyGeolocationUse rInput.bind(this), WebInspector.Geolocation.longitudeValidator, true)(String(geo location.longitude)); | |
| 94 rowElement = tableElement.createChild("tr"); | |
| 95 cellElement = rowElement.createChild("td"); | |
| 96 cellElement.colSpan = 2; | |
| 97 var geolocationErrorLabelElement = createCheckboxLabel(WebInspector.UISt ring("Emulate position unavailable"), !geolocation || !!geolocation.error); | |
| 98 var geolocationErrorCheckboxElement = geolocationErrorLabelElement.check boxElement; | |
| 99 geolocationErrorCheckboxElement.id = "geolocation-error"; | |
| 100 geolocationErrorCheckboxElement.addEventListener("click", this._applyGeo locationUserInput.bind(this), false); | |
| 101 this._geolocationErrorElement = geolocationErrorCheckboxElement; | |
| 102 cellElement.appendChild(geolocationErrorLabelElement); | |
| 103 | 138 |
| 104 return fieldsetElement; | 139 var orientationGroups = WebInspector.SensorsView.PresetOrientations; |
| 140 for (var i = 0; i < orientationGroups.length; ++i) { | |
| 141 var groupElement = this._orientationSelectElement.createChild("optgr oup"); | |
| 142 groupElement.label = orientationGroups[i].title; | |
| 143 | |
| 144 var group = orientationGroups[i].value; | |
| 145 for (var j = 0; j < group.length; ++j) { | |
| 146 groupElement.appendChild(new Option(group[j].title, group[j].ori entation)); | |
| 147 } | |
| 148 } | |
| 149 this._orientationSelectElement.selectedIndex = 0; | |
| 150 _fields.appendChild(this._orientationSelectElement); | |
| 151 this._orientationSelectElement.addEventListener("change", this._orientat ionSelectChanged.bind(this)); | |
| 152 | |
| 153 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideE lement(this._deviceOrientation); | |
| 154 this._deviceOrientationFieldset.disabled = true; | |
| 155 _fields.appendChild(this._deviceOrientationFieldset); | |
| 105 }, | 156 }, |
| 106 | 157 |
| 107 _appendDeviceOrientationOverrideControl: function() | 158 _orientationSelectChanged: function() |
| 108 { | 159 { |
| 109 var checkboxLabel = createCheckboxLabel(WebInspector.UIString("Emulate d evice orientation")); | 160 var value = this._orientationSelectElement.options[this._orientationSele ctElement.selectedIndex].value; |
| 110 this._overrideDeviceOrientationCheckbox = checkboxLabel.checkboxElement; | 161 this._deviceOrientationFieldset.disabled = false; |
| 111 this._overrideDeviceOrientationCheckbox.addEventListener("click", this._ deviceOrientationOverrideCheckboxClicked.bind(this)); | |
| 112 this.contentElement.appendChild(checkboxLabel); | |
| 113 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideE lement(this._deviceOrientation); | |
| 114 this._deviceOrientationFieldset.disabled = true; | |
| 115 this.contentElement.appendChild(this._deviceOrientationFieldset); | |
| 116 }, | |
| 117 | 162 |
| 118 _deviceOrientationOverrideCheckboxClicked: function() | 163 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) { |
| 119 { | 164 this._deviceOrientationOverrideEnabled = false; |
| 120 var enabled = this._overrideDeviceOrientationCheckbox.checked; | 165 this._deviceOrientationFieldset.disabled = true; |
| 121 | 166 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) { |
| 122 this._deviceOrientationEnabled = enabled; | 167 this._deviceOrientationOverrideEnabled = true; |
| 123 this._applyDeviceOrientation(); | |
| 124 | |
| 125 if (enabled && !this._alphaElement.value) | |
| 126 this._alphaElement.focus(); | 168 this._alphaElement.focus(); |
| 127 this._deviceOrientationFieldset.disabled = !enabled; | 169 } else { |
| 170 var parsedValue = JSON.parse(value); | |
| 171 this._deviceOrientationOverrideEnabled = true; | |
| 172 this._deviceOrientation = new WebInspector.DeviceOrientation(parsedV alue[0], parsedValue[1], parsedValue[2]); | |
| 173 this._setDeviceOrientation(this._deviceOrientation, WebInspector.Sen sorsView.DeviceOrientationModificationSource.SelectPreset); | |
| 174 } | |
| 128 }, | 175 }, |
| 129 | 176 |
| 130 _applyDeviceOrientation: function() | 177 _applyDeviceOrientation: function() |
| 131 { | 178 { |
| 132 if (this._deviceOrientationEnabled) { | 179 if (this._deviceOrientationOverrideEnabled) { |
| 133 this._deviceOrientationSetting.set(this._deviceOrientation.toSetting ()); | 180 this._deviceOrientationSetting.set(this._deviceOrientation.toSetting ()); |
| 134 this._deviceOrientation.apply(); | 181 this._deviceOrientation.apply(); |
| 135 } else { | 182 } else { |
| 136 this._deviceOrientation.clear(); | 183 this._deviceOrientation.clear(); |
| 137 } | 184 } |
| 138 }, | 185 }, |
| 139 | 186 |
| 187 _setSelectElementLabel: function(selectElement, labelValue) | |
| 188 { | |
| 189 var optionValues = Array.prototype.map.call(selectElement.options, x => x.value); | |
| 190 selectElement.selectedIndex = optionValues.indexOf(labelValue); | |
| 191 }, | |
| 192 | |
| 140 _applyDeviceOrientationUserInput: function() | 193 _applyDeviceOrientationUserInput: function() |
| 141 { | 194 { |
| 142 this._setDeviceOrientation(WebInspector.DeviceOrientation.parseUserInput (this._alphaElement.value.trim(), this._betaElement.value.trim(), this._gammaEle ment.value.trim()), WebInspector.SensorsView.DeviceOrientationModificationSource .UserInput); | 195 this._setDeviceOrientation(WebInspector.DeviceOrientation.parseUserInput (this._alphaElement.value.trim(), this._betaElement.value.trim(), this._gammaEle ment.value.trim()), WebInspector.SensorsView.DeviceOrientationModificationSource .UserInput); |
| 196 this._setSelectElementLabel(this._orientationSelectElement, WebInspector .SensorsView.NonPresetOptions.Custom); | |
| 143 }, | 197 }, |
| 144 | 198 |
| 145 _resetDeviceOrientation: function() | 199 _resetDeviceOrientation: function() |
| 146 { | 200 { |
| 147 this._setDeviceOrientation(new WebInspector.DeviceOrientation(0, 0, 0), WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton); | 201 this._setDeviceOrientation(new WebInspector.DeviceOrientation(0, 90, 0), WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton); |
| 148 }, | 202 }, |
| 149 | 203 |
| 150 /** | 204 /** |
| 151 * @param {?WebInspector.DeviceOrientation} deviceOrientation | 205 * @param {?WebInspector.DeviceOrientation} deviceOrientation |
| 152 * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} mo dificationSource | 206 * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} mo dificationSource |
| 153 */ | 207 */ |
| 154 _setDeviceOrientation: function(deviceOrientation, modificationSource) | 208 _setDeviceOrientation: function(deviceOrientation, modificationSource) |
| 155 { | 209 { |
| 156 if (!deviceOrientation) | 210 if (!deviceOrientation) |
| 157 return; | 211 return; |
| 158 | 212 |
| 213 function roundAngle(angle) | |
|
lushnikov
2016/04/23 00:19:46
jsdoc
luoe
2016/04/25 19:26:41
Done.
| |
| 214 { | |
| 215 return Math.round(angle*1e4)/1e4; | |
| 216 } | |
| 217 | |
| 159 if (modificationSource != WebInspector.SensorsView.DeviceOrientationModi ficationSource.UserInput) { | 218 if (modificationSource != WebInspector.SensorsView.DeviceOrientationModi ficationSource.UserInput) { |
| 160 this._alphaSetter(deviceOrientation.alpha); | 219 this._alphaSetter(roundAngle(deviceOrientation.alpha)); |
| 161 this._betaSetter(deviceOrientation.beta); | 220 this._betaSetter(roundAngle(deviceOrientation.beta)); |
| 162 this._gammaSetter(deviceOrientation.gamma); | 221 this._gammaSetter(roundAngle(deviceOrientation.gamma)); |
| 163 } | 222 } |
| 164 | 223 |
| 165 if (modificationSource != WebInspector.SensorsView.DeviceOrientationModi ficationSource.UserDrag) | 224 if (modificationSource != WebInspector.SensorsView.DeviceOrientationModi ficationSource.UserDrag) |
| 166 this._setBoxOrientation(deviceOrientation); | 225 this._setBoxOrientation(deviceOrientation); |
| 226 else | |
| 227 this._boxElement.classList.remove("smooth-transition"); | |
| 167 | 228 |
| 168 this._deviceOrientation = deviceOrientation; | 229 this._deviceOrientation = deviceOrientation; |
| 169 this._applyDeviceOrientation(); | 230 this._applyDeviceOrientation(); |
| 170 }, | 231 }, |
| 171 | 232 |
| 172 /** | 233 /** |
| 173 * @param {!Element} parentElement | 234 * @param {!Element} parentElement |
| 174 * @param {!Element} input | 235 * @param {!Element} input |
| 175 * @param {string} label | 236 * @param {string} label |
| 176 * @return {function(string)} | 237 * @return {function(string)} |
| 177 */ | 238 */ |
| 178 _createAxisInput: function(parentElement, input, label) | 239 _createAxisInput: function(parentElement, input, label) |
| 179 { | 240 { |
| 180 var div = parentElement.createChild("div", "accelerometer-axis-input-con tainer"); | 241 var div = parentElement.createChild("div", "accelerometer-axis-input-con tainer"); |
| 242 div.appendChild(input); | |
| 181 div.createTextChild(label); | 243 div.createTextChild(label); |
| 182 div.appendChild(input); | 244 input.type = "number"; |
| 183 input.type = "text"; | |
| 184 return WebInspector.bindInput(input, this._applyDeviceOrientationUserInp ut.bind(this), WebInspector.DeviceOrientation.validator, true); | 245 return WebInspector.bindInput(input, this._applyDeviceOrientationUserInp ut.bind(this), WebInspector.DeviceOrientation.validator, true); |
| 185 }, | 246 }, |
| 186 | 247 |
| 187 /** | 248 /** |
| 188 * @param {!WebInspector.DeviceOrientation} deviceOrientation | 249 * @param {!WebInspector.DeviceOrientation} deviceOrientation |
| 189 */ | 250 */ |
| 190 _createDeviceOrientationOverrideElement: function(deviceOrientation) | 251 _createDeviceOrientationOverrideElement: function(deviceOrientation) |
| 191 { | 252 { |
| 192 var fieldsetElement = createElement("fieldset"); | 253 var fieldsetElement = createElement("fieldset"); |
| 193 fieldsetElement.classList.add("device-orientation-override-section"); | 254 fieldsetElement.classList.add("device-orientation-override-section"); |
| 194 var tableElement = fieldsetElement.createChild("table"); | 255 var tableElement = fieldsetElement.createChild("table"); |
| 195 var rowElement = tableElement.createChild("tr"); | 256 var rowElement = tableElement.createChild("tr"); |
| 196 var cellElement = rowElement.createChild("td", "accelerometer-inputs-cel l"); | 257 var cellElement = rowElement.createChild("td", "accelerometer-inputs-cel l"); |
| 197 | 258 |
| 198 this._alphaElement = createElement("input"); | 259 this._alphaElement = createElement("input"); |
| 199 this._alphaSetter = this._createAxisInput(cellElement, this._alphaElemen t, "\u03B1: "); | 260 this._alphaSetter = this._createAxisInput(cellElement, this._alphaElemen t, "Tilt left/right (\u03B1)"); |
|
lushnikov
2016/04/23 00:19:46
We use WebInspector.UIString for every string, pre
luoe
2016/04/25 19:26:41
Done.
| |
| 200 this._alphaSetter(String(deviceOrientation.alpha)); | 261 this._alphaSetter(String(deviceOrientation.alpha)); |
| 201 | 262 |
| 202 this._betaElement = createElement("input"); | 263 this._betaElement = createElement("input"); |
| 203 this._betaSetter = this._createAxisInput(cellElement, this._betaElement, "\u03B2: "); | 264 this._betaSetter = this._createAxisInput(cellElement, this._betaElement, "Tilt front/back (\u03B2)"); |
| 204 this._betaSetter(String(deviceOrientation.beta)); | 265 this._betaSetter(String(deviceOrientation.beta)); |
| 205 | 266 |
| 206 this._gammaElement = createElement("input"); | 267 this._gammaElement = createElement("input"); |
| 207 this._gammaSetter = this._createAxisInput(cellElement, this._gammaElemen t, "\u03B3: "); | 268 this._gammaSetter = this._createAxisInput(cellElement, this._gammaElemen t, "Rotate (\u03B3)"); |
| 208 this._gammaSetter(String(deviceOrientation.gamma)); | 269 this._gammaSetter(String(deviceOrientation.gamma)); |
| 209 | 270 |
| 210 cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "accelerometer-reset-button")); | 271 cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "accelerometer-reset-button")); |
| 211 | 272 |
| 212 this._stageElement = rowElement.createChild("td","accelerometer-stage"); | 273 this._stageElement = rowElement.createChild("td","accelerometer-stage"); |
| 213 this._boxElement = this._stageElement.createChild("section", "accelerome ter-box"); | 274 this._boxElement = this._stageElement.createChild("section", "accelerome ter-box"); |
| 214 | 275 |
| 215 this._boxElement.createChild("section", "front"); | 276 this._boxElement.createChild("section", "front"); |
| 216 this._boxElement.createChild("section", "top"); | 277 this._boxElement.createChild("section", "top"); |
| 217 this._boxElement.createChild("section", "back"); | 278 this._boxElement.createChild("section", "back"); |
| 218 this._boxElement.createChild("section", "left"); | 279 this._boxElement.createChild("section", "left"); |
| 219 this._boxElement.createChild("section", "right"); | 280 this._boxElement.createChild("section", "right"); |
| 220 this._boxElement.createChild("section", "bottom"); | 281 this._boxElement.createChild("section", "bottom"); |
| 221 | 282 |
| 222 WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart. bind(this), this._onBoxDrag.bind(this), this._onBoxDragEnd.bind(this), "move"); | 283 WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart. bind(this), this._onBoxDrag.bind(this), this._onBoxDragEnd.bind(this), "move"); |
| 223 this._setBoxOrientation(deviceOrientation); | 284 this._setBoxOrientation(deviceOrientation); |
| 224 return fieldsetElement; | 285 return fieldsetElement; |
| 225 }, | 286 }, |
| 226 | 287 |
| 227 /** | 288 /** |
| 228 * @param {!WebInspector.DeviceOrientation} deviceOrientation | 289 * @param {!WebInspector.DeviceOrientation} deviceOrientation |
| 229 */ | 290 */ |
| 230 _setBoxOrientation: function(deviceOrientation) | 291 _setBoxOrientation: function(deviceOrientation) |
| 231 { | 292 { |
| 232 var matrix = new WebKitCSSMatrix(); | 293 var matrix = new WebKitCSSMatrix(); |
| 233 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientati on.gamma, -deviceOrientation.alpha); | 294 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientati on.gamma, -deviceOrientation.alpha); |
| 295 this._boxElement.classList.add("smooth-transition"); | |
| 234 this._boxElement.style.webkitTransform = this._boxMatrix.toString(); | 296 this._boxElement.style.webkitTransform = this._boxMatrix.toString(); |
| 235 }, | 297 }, |
| 236 | 298 |
| 237 /** | 299 /** |
| 238 * @param {!MouseEvent} event | 300 * @param {!MouseEvent} event |
| 239 * @return {boolean} | 301 * @return {boolean} |
| 240 */ | 302 */ |
| 241 _onBoxDrag: function(event) | 303 _onBoxDrag: function(event) |
| 242 { | 304 { |
| 243 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); | 305 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y); |
| 244 if (!mouseMoveVector) | 306 if (!mouseMoveVector) |
| 245 return true; | 307 return true; |
| 246 | 308 |
| 247 event.consume(true); | 309 event.consume(true); |
| 248 var axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mou seMoveVector); | 310 var axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mou seMoveVector); |
| 249 axis.normalize(); | 311 axis.normalize(); |
| 250 var angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector); | 312 var angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector); |
| 251 var matrix = new WebKitCSSMatrix(); | 313 var matrix = new WebKitCSSMatrix(); |
| 252 var rotationMatrix = matrix.rotateAxisAngle(axis.x, axis.y, axis.z, angl e); | 314 var rotationMatrix = matrix.rotateAxisAngle(axis.x, axis.y, axis.z, angl e); |
| 253 this._currentMatrix = rotationMatrix.multiply(this._boxMatrix); | 315 this._currentMatrix = rotationMatrix.multiply(this._boxMatrix); |
| 254 this._boxElement.style.webkitTransform = this._currentMatrix; | 316 this._boxElement.style.webkitTransform = this._currentMatrix; |
| 255 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(t his._currentMatrix); | 317 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(t his._currentMatrix); |
| 256 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alp ha, -eulerAngles.beta, eulerAngles.gamma); | 318 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alp ha, -eulerAngles.beta, eulerAngles.gamma); |
| 257 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.Devi ceOrientationModificationSource.UserDrag); | 319 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.Devi ceOrientationModificationSource.UserDrag); |
| 320 this._setSelectElementLabel(this._orientationSelectElement, WebInspector .SensorsView.NonPresetOptions.Custom); | |
| 258 return false; | 321 return false; |
| 259 }, | 322 }, |
| 260 | 323 |
| 261 /** | 324 /** |
| 262 * @param {!MouseEvent} event | 325 * @param {!MouseEvent} event |
| 263 * @return {boolean} | 326 * @return {boolean} |
| 264 */ | 327 */ |
| 265 _onBoxDragStart: function(event) | 328 _onBoxDragStart: function(event) |
| 266 { | 329 { |
| 267 if (!this._overrideDeviceOrientationCheckbox.checked) | 330 if (!this._deviceOrientationOverrideEnabled) |
| 268 return false; | 331 return false; |
| 269 | 332 |
| 270 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); | 333 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y); |
| 271 | 334 |
| 272 if (!this._mouseDownVector) | 335 if (!this._mouseDownVector) |
| 273 return false; | 336 return false; |
| 274 | 337 |
| 275 event.consume(true); | 338 event.consume(true); |
| 276 return true; | 339 return true; |
| 277 }, | 340 }, |
| (...skipping 16 matching lines...) Expand all Loading... | |
| 294 var sphereY = (y - rect.top - rect.height / 2) / radius; | 357 var sphereY = (y - rect.top - rect.height / 2) / radius; |
| 295 var sqrSum = sphereX * sphereX + sphereY * sphereY; | 358 var sqrSum = sphereX * sphereX + sphereY * sphereY; |
| 296 if (sqrSum > 0.5) | 359 if (sqrSum > 0.5) |
| 297 return new WebInspector.Geometry.Vector(sphereX, sphereY, 0.5 / Math .sqrt(sqrSum)); | 360 return new WebInspector.Geometry.Vector(sphereX, sphereY, 0.5 / Math .sqrt(sqrSum)); |
| 298 | 361 |
| 299 return new WebInspector.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum)); | 362 return new WebInspector.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum)); |
| 300 }, | 363 }, |
| 301 | 364 |
| 302 _appendTouchControl: function() | 365 _appendTouchControl: function() |
| 303 { | 366 { |
| 304 var label = this.contentElement.createChild("label", "touch-label"); | 367 var groupElement = this.contentElement.createChild("div", "sensors-group "); |
| 305 label.createChild("span", "").textContent = WebInspector.UIString("Touch "); | 368 var title = groupElement.createChild("div", "sensors-group-title"); |
| 306 var select = label.createChild("select", "chrome-select"); | 369 var fieldsElement = groupElement.createChild("div", "sensors-group-field s"); |
| 370 | |
| 371 title.textContent = WebInspector.UIString("Touch"); | |
| 372 var select = fieldsElement.createChild("select", "chrome-select"); | |
| 307 select.appendChild(new Option(WebInspector.UIString("Device-based"), "au to")); | 373 select.appendChild(new Option(WebInspector.UIString("Device-based"), "au to")); |
| 308 select.appendChild(new Option(WebInspector.UIString("Force enabled"), "e nabled")); | 374 select.appendChild(new Option(WebInspector.UIString("Force enabled"), "e nabled")); |
| 309 select.addEventListener("change", applyTouch, false); | 375 select.addEventListener("change", applyTouch, false); |
| 310 | 376 |
| 311 function applyTouch() | 377 function applyTouch() |
| 312 { | 378 { |
| 313 WebInspector.MultitargetTouchModel.instance().setCustomTouchEnabled( select.value === "enabled"); | 379 WebInspector.MultitargetTouchModel.instance().setCustomTouchEnabled( select.value === "enabled"); |
| 314 } | 380 } |
| 315 }, | 381 }, |
| 316 | 382 |
| 317 __proto__ : WebInspector.VBox.prototype | 383 __proto__ : WebInspector.VBox.prototype |
| 318 } | 384 } |
| 319 | 385 |
| 320 /** @enum {string} */ | 386 /** @enum {string} */ |
| 321 WebInspector.SensorsView.DeviceOrientationModificationSource = { | 387 WebInspector.SensorsView.DeviceOrientationModificationSource = { |
| 322 UserInput: "userInput", | 388 UserInput: "userInput", |
| 323 UserDrag: "userDrag", | 389 UserDrag: "userDrag", |
| 324 ResetButton: "resetButton" | 390 ResetButton: "resetButton", |
| 391 SelectPreset: "selectPreset" | |
| 325 } | 392 } |
| 326 | 393 |
| 394 /** {string} */ | |
| 395 WebInspector.SensorsView.NonPresetOptions = { | |
| 396 "NoOverride": "noOverride", | |
| 397 "Custom": "custom", | |
| 398 "Unavailable": "unavailable" | |
| 399 } | |
| 400 | |
| 401 /** @type {!Array.<{title: string, value: !Array.<{title: string, location: stri ng}>}>} */ | |
| 402 WebInspector.SensorsView.PresetLocations = [ | |
| 403 { | |
| 404 title: "Presets", | |
| 405 value: [ | |
| 406 {title: WebInspector.UIString("Berlin"), location: "[52.520007, 13.4 04954]"}, | |
| 407 {title: WebInspector.UIString("London"), location: "[51.507351, -0.1 27758]"}, | |
| 408 {title: WebInspector.UIString("Moscow"), location: "[55.755826, 37.6 17300]"}, | |
| 409 {title: WebInspector.UIString("Mountain View"), location: "[37.38605 2, -122.083851]"}, | |
| 410 {title: WebInspector.UIString("Mumbai"), location: "[19.075984, 72.8 77656]"}, | |
| 411 {title: WebInspector.UIString("San Francisco"), location: "[37.77492 9, -122.419416]"}, | |
| 412 {title: WebInspector.UIString("Shanghai"), location: "[31.230416, 12 1.473701]"}, | |
| 413 {title: WebInspector.UIString("São Paulo"), location: "[-23.550520, -46.633309]"}, | |
| 414 {title: WebInspector.UIString("Tokyo"), location: "[35.689487, 139.6 91706]"}, | |
| 415 ] | |
| 416 }, | |
| 417 { | |
| 418 title: "Error", | |
| 419 value: [ | |
| 420 {title: WebInspector.UIString("Location unavailable"), location: Web Inspector.SensorsView.NonPresetOptions.Unavailable} | |
| 421 ] | |
| 422 } | |
| 423 ] | |
| 424 | |
| 425 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: ! WebInspector.DeviceOrientation}>}>} */ | |
| 426 WebInspector.SensorsView.PresetOrientations = [ | |
| 427 { | |
| 428 title: "Presets", | |
| 429 value: [ | |
| 430 {title: WebInspector.UIString("Portrait"), orientation: "[0, 0, 0]"} , | |
| 431 {title: WebInspector.UIString("Portrait upside down"), orientation: "[180, 0, 0]"}, | |
| 432 {title: WebInspector.UIString("Landscape left"), orientation: "[90, 0, 0]"}, | |
| 433 {title: WebInspector.UIString("Landscape right"), orientation: "[270 , 0, 0]"}, | |
| 434 {title: WebInspector.UIString("Display up"), orientation: "[0, 270, 0]"}, | |
| 435 {title: WebInspector.UIString("Display down"), orientation: "[0, 90, 0]"} | |
| 436 ] | |
| 437 } | |
| 438 ] | |
| 439 | |
| 327 /** | 440 /** |
| 328 * @return {!WebInspector.SensorsView} | 441 * @return {!WebInspector.SensorsView} |
| 329 */ | 442 */ |
| 330 WebInspector.SensorsView.instance = function() | 443 WebInspector.SensorsView.instance = function() |
| 331 { | 444 { |
| 332 if (!WebInspector.SensorsView._instanceObject) | 445 if (!WebInspector.SensorsView._instanceObject) |
| 333 WebInspector.SensorsView._instanceObject = new WebInspector.SensorsView( ); | 446 WebInspector.SensorsView._instanceObject = new WebInspector.SensorsView( ); |
| 334 return WebInspector.SensorsView._instanceObject; | 447 return WebInspector.SensorsView._instanceObject; |
| 335 } | 448 } |
| 336 | 449 |
| (...skipping 11 matching lines...) Expand all Loading... | |
| 348 * @param {!WebInspector.Context} context | 461 * @param {!WebInspector.Context} context |
| 349 * @param {string} actionId | 462 * @param {string} actionId |
| 350 * @return {boolean} | 463 * @return {boolean} |
| 351 */ | 464 */ |
| 352 handleAction: function(context, actionId) | 465 handleAction: function(context, actionId) |
| 353 { | 466 { |
| 354 WebInspector.inspectorView.showViewInDrawer("sensors"); | 467 WebInspector.inspectorView.showViewInDrawer("sensors"); |
| 355 return true; | 468 return true; |
| 356 } | 469 } |
| 357 } | 470 } |
| OLD | NEW |