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