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 |