Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(158)

Side by Side Diff: third_party/WebKit/Source/devtools/front_end/emulation/SensorsView.js

Issue 2466123002: DevTools: reformat front-end code to match chromium style. (Closed)
Patch Set: all done Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
5 /** 4 /**
6 * @constructor 5 * @unrestricted
7 * @extends {WebInspector.VBox}
8 */ 6 */
9 WebInspector.SensorsView = function() 7 WebInspector.SensorsView = class extends WebInspector.VBox {
10 { 8 constructor() {
11 WebInspector.VBox.call(this, true); 9 super(true);
12 this.registerRequiredCSS("emulation/sensors.css"); 10 this.registerRequiredCSS('emulation/sensors.css');
13 this.contentElement.classList.add("sensors-view"); 11 this.contentElement.classList.add('sensors-view');
14 12
15 this._geolocationSetting = WebInspector.settings.createSetting("emulation.ge olocationOverride", ""); 13 this._geolocationSetting = WebInspector.settings.createSetting('emulation.ge olocationOverride', '');
16 this._geolocation = WebInspector.Geolocation.parseSetting(this._geolocationS etting.get()); 14 this._geolocation = WebInspector.Geolocation.parseSetting(this._geolocationS etting.get());
17 this._geolocationOverrideEnabled = false; 15 this._geolocationOverrideEnabled = false;
18 this._createGeolocationSection(this._geolocation); 16 this._createGeolocationSection(this._geolocation);
19 17
20 this.contentElement.createChild("div").classList.add("panel-section-separato r"); 18 this.contentElement.createChild('div').classList.add('panel-section-separato r');
21 19
22 this._deviceOrientationSetting = WebInspector.settings.createSetting("emulat ion.deviceOrientationOverride", ""); 20 this._deviceOrientationSetting = WebInspector.settings.createSetting('emulat ion.deviceOrientationOverride', '');
23 this._deviceOrientation = WebInspector.DeviceOrientation.parseSetting(this._ deviceOrientationSetting.get()); 21 this._deviceOrientation = WebInspector.DeviceOrientation.parseSetting(this._ deviceOrientationSetting.get());
24 this._deviceOrientationOverrideEnabled = false; 22 this._deviceOrientationOverrideEnabled = false;
25 this._createDeviceOrientationSection(); 23 this._createDeviceOrientationSection();
26 24
27 this.contentElement.createChild("div").classList.add("panel-section-separato r"); 25 this.contentElement.createChild('div').classList.add('panel-section-separato r');
28 26
29 this._appendTouchControl(); 27 this._appendTouchControl();
30 }; 28 }
31 29
32 WebInspector.SensorsView.prototype = { 30 /**
31 * @return {!WebInspector.SensorsView}
32 */
33 static instance() {
34 if (!WebInspector.SensorsView._instanceObject)
35 WebInspector.SensorsView._instanceObject = new WebInspector.SensorsView();
36 return WebInspector.SensorsView._instanceObject;
37 }
38
39 /**
40 * @param {!WebInspector.Geolocation} geolocation
41 */
42 _createGeolocationSection(geolocation) {
43 var geogroup = this.contentElement.createChild('section', 'sensors-group');
44 geogroup.createChild('div', 'sensors-group-title').textContent = WebInspecto r.UIString('Geolocation');
45 var fields = geogroup.createChild('div', 'geo-fields');
46
47 const noOverrideOption = {
48 title: WebInspector.UIString('No override'),
49 location: WebInspector.SensorsView.NonPresetOptions.NoOverride
50 };
51 const customLocationOption = {
52 title: WebInspector.UIString('Custom location...'),
53 location: WebInspector.SensorsView.NonPresetOptions.Custom
54 };
55 this._locationSelectElement = this.contentElement.createChild('select', 'chr ome-select');
56 this._locationSelectElement.appendChild(new Option(noOverrideOption.title, n oOverrideOption.location));
57 this._locationSelectElement.appendChild(new Option(customLocationOption.titl e, customLocationOption.location));
58
59 var locationGroups = WebInspector.SensorsView.PresetLocations;
60 for (var i = 0; i < locationGroups.length; ++i) {
61 var group = locationGroups[i].value;
62 var groupElement = this._locationSelectElement.createChild('optgroup');
63 groupElement.label = locationGroups[i].title;
64 for (var j = 0; j < group.length; ++j)
65 groupElement.appendChild(new Option(group[j].title, group[j].location));
66 }
67 this._locationSelectElement.selectedIndex = 0;
68 fields.appendChild(this._locationSelectElement);
69 this._locationSelectElement.addEventListener('change', this._geolocationSele ctChanged.bind(this));
70
71 // Validated input fieldset.
72 this._fieldsetElement = fields.createChild('fieldset');
73 this._fieldsetElement.disabled = !this._geolocationOverrideEnabled;
74 this._fieldsetElement.id = 'geolocation-override-section';
75
76 var latitudeGroup = this._fieldsetElement.createChild('div', 'latlong-group' );
77 var longitudeGroup = this._fieldsetElement.createChild('div', 'latlong-group ');
78
79 this._latitudeInput = latitudeGroup.createChild('input');
80 this._latitudeInput.setAttribute('type', 'number');
81 this._latitudeInput.value = 0;
82 this._latitudeSetter = WebInspector.bindInput(
83 this._latitudeInput, this._applyGeolocationUserInput.bind(this), WebInsp ector.Geolocation.latitudeValidator,
84 true);
85 this._latitudeSetter(String(geolocation.latitude));
86
87 this._longitudeInput = longitudeGroup.createChild('input');
88 this._longitudeInput.setAttribute('type', 'number');
89 this._longitudeInput.value = 0;
90 this._longitudeSetter = WebInspector.bindInput(
91 this._longitudeInput, this._applyGeolocationUserInput.bind(this), WebIns pector.Geolocation.longitudeValidator,
92 true);
93 this._longitudeSetter(String(geolocation.longitude));
94
95 latitudeGroup.createChild('div', 'latlong-title').textContent = WebInspector .UIString('Latitude');
96 longitudeGroup.createChild('div', 'latlong-title').textContent = WebInspecto r.UIString('Longitude');
97 }
98
99 _geolocationSelectChanged() {
100 this._fieldsetElement.disabled = false;
101 var value = this._locationSelectElement.options[this._locationSelectElement. selectedIndex].value;
102 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) {
103 this._geolocationOverrideEnabled = false;
104 this._fieldsetElement.disabled = true;
105 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
106 this._geolocationOverrideEnabled = true;
107 } else if (value === WebInspector.SensorsView.NonPresetOptions.Unavailable) {
108 this._geolocationOverrideEnabled = true;
109 this._geolocation = new WebInspector.Geolocation(0, 0, true);
110 } else {
111 this._geolocationOverrideEnabled = true;
112 var coordinates = JSON.parse(value);
113 this._geolocation = new WebInspector.Geolocation(coordinates[0], coordinat es[1], false);
114 this._latitudeSetter(coordinates[0]);
115 this._longitudeSetter(coordinates[1]);
116 }
117
118 this._applyGeolocation();
119 if (value === WebInspector.SensorsView.NonPresetOptions.Custom)
120 this._latitudeInput.focus();
121 }
122
123 _applyGeolocationUserInput() {
124 var geolocation = WebInspector.Geolocation.parseUserInput(
125 this._latitudeInput.value.trim(), this._longitudeInput.value.trim(), '') ;
126 if (!geolocation)
127 return;
128
129 this._setSelectElementLabel(this._locationSelectElement, WebInspector.Sensor sView.NonPresetOptions.Custom);
130 this._geolocation = geolocation;
131 this._applyGeolocation();
132 }
133
134 _applyGeolocation() {
135 if (this._geolocationOverrideEnabled) {
136 this._geolocationSetting.set(this._geolocation.toSetting());
137 this._geolocation.apply();
138 } else {
139 this._geolocation.clear();
140 }
141 }
142
143 _createDeviceOrientationSection() {
144 var orientationGroup = this.contentElement.createChild('section', 'sensors-g roup');
145 orientationGroup.createChild('div', 'sensors-group-title').textContent = Web Inspector.UIString('Orientation');
146 var orientationContent = orientationGroup.createChild('div', 'orientation-co ntent');
147 var fields = orientationContent.createChild('div', 'orientation-fields');
148
149 const orientationOffOption = {
150 title: WebInspector.UIString('Off'),
151 orientation: WebInspector.SensorsView.NonPresetOptions.NoOverride
152 };
153 const customOrientationOption = {
154 title: WebInspector.UIString('Custom orientation...'),
155 orientation: WebInspector.SensorsView.NonPresetOptions.Custom
156 };
157 this._orientationSelectElement = this.contentElement.createChild('select', ' chrome-select');
158 this._orientationSelectElement.appendChild(
159 new Option(orientationOffOption.title, orientationOffOption.orientation) );
160 this._orientationSelectElement.appendChild(
161 new Option(customOrientationOption.title, customOrientationOption.orient ation));
162
163 var orientationGroups = WebInspector.SensorsView.PresetOrientations;
164 for (var i = 0; i < orientationGroups.length; ++i) {
165 var groupElement = this._orientationSelectElement.createChild('optgroup');
166 groupElement.label = orientationGroups[i].title;
167 var group = orientationGroups[i].value;
168 for (var j = 0; j < group.length; ++j)
169 groupElement.appendChild(new Option(group[j].title, group[j].orientation ));
170 }
171 this._orientationSelectElement.selectedIndex = 0;
172 fields.appendChild(this._orientationSelectElement);
173 this._orientationSelectElement.addEventListener('change', this._orientationS electChanged.bind(this));
174
175 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideEleme nt(this._deviceOrientation);
176
177 this._stageElement = orientationContent.createChild('div', 'orientation-stag e');
178 this._stageElement.title = WebInspector.UIString('Shift+drag horizontally to rotate around the y-axis');
179 this._orientationLayer = this._stageElement.createChild('div', 'orientation- layer');
180 this._boxElement = this._orientationLayer.createChild('section', 'orientatio n-box orientation-element');
181
182 this._boxElement.createChild('section', 'orientation-front orientation-eleme nt');
183 this._boxElement.createChild('section', 'orientation-top orientation-element ');
184 this._boxElement.createChild('section', 'orientation-back orientation-elemen t');
185 this._boxElement.createChild('section', 'orientation-left orientation-elemen t');
186 this._boxElement.createChild('section', 'orientation-right orientation-eleme nt');
187 this._boxElement.createChild('section', 'orientation-bottom orientation-elem ent');
188
189 WebInspector.installDragHandle(
190 this._stageElement, this._onBoxDragStart.bind(this), this._onBoxDrag.bin d(this), null, '-webkit-grabbing',
191 '-webkit-grab');
192
193 fields.appendChild(this._deviceOrientationFieldset);
194 this._enableOrientationFields(true);
195 this._setBoxOrientation(this._deviceOrientation, false);
196 }
197
198 /**
199 * @param {?boolean} disable
200 */
201 _enableOrientationFields(disable) {
202 if (disable) {
203 this._deviceOrientationFieldset.disabled = true;
204 this._stageElement.classList.add('disabled');
205 } else {
206 this._deviceOrientationFieldset.disabled = false;
207 this._stageElement.classList.remove('disabled');
208 }
209 }
210
211 _orientationSelectChanged() {
212 var value = this._orientationSelectElement.options[this._orientationSelectEl ement.selectedIndex].value;
213 this._enableOrientationFields(false);
214
215 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) {
216 this._deviceOrientationOverrideEnabled = false;
217 this._enableOrientationFields(true);
218 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
219 this._deviceOrientationOverrideEnabled = true;
220 this._alphaElement.focus();
221 } else {
222 var parsedValue = JSON.parse(value);
223 this._deviceOrientationOverrideEnabled = true;
224 this._deviceOrientation = new WebInspector.DeviceOrientation(parsedValue[0 ], parsedValue[1], parsedValue[2]);
225 this._setDeviceOrientation(
226 this._deviceOrientation, WebInspector.SensorsView.DeviceOrientationMod ificationSource.SelectPreset);
227 }
228 }
229
230 _applyDeviceOrientation() {
231 if (this._deviceOrientationOverrideEnabled) {
232 this._deviceOrientationSetting.set(this._deviceOrientation.toSetting());
233 this._deviceOrientation.apply();
234 } else {
235 this._deviceOrientation.clear();
236 }
237 }
238
239 /**
240 * @param {!Element} selectElement
241 * @param {string} labelValue
242 */
243 _setSelectElementLabel(selectElement, labelValue) {
244 var optionValues = Array.prototype.map.call(selectElement.options, x => x.va lue);
245 selectElement.selectedIndex = optionValues.indexOf(labelValue);
246 }
247
248 _applyDeviceOrientationUserInput() {
249 this._setDeviceOrientation(
250 WebInspector.DeviceOrientation.parseUserInput(
251 this._alphaElement.value.trim(), this._betaElement.value.trim(), thi s._gammaElement.value.trim()),
252 WebInspector.SensorsView.DeviceOrientationModificationSource.UserInput);
253 this._setSelectElementLabel(this._orientationSelectElement, WebInspector.Sen sorsView.NonPresetOptions.Custom);
254 }
255
256 _resetDeviceOrientation() {
257 this._setDeviceOrientation(
258 new WebInspector.DeviceOrientation(0, 90, 0),
259 WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton );
260 this._setSelectElementLabel(this._orientationSelectElement, '[0, 90, 0]');
261 }
262
263 /**
264 * @param {?WebInspector.DeviceOrientation} deviceOrientation
265 * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} modi ficationSource
266 */
267 _setDeviceOrientation(deviceOrientation, modificationSource) {
268 if (!deviceOrientation)
269 return;
270
33 /** 271 /**
34 * @param {!WebInspector.Geolocation} geolocation 272 * @param {number} angle
273 * @return {number}
35 */ 274 */
36 _createGeolocationSection: function(geolocation) 275 function roundAngle(angle) {
37 { 276 return Math.round(angle * 10000) / 10000;
38 var geogroup = this.contentElement.createChild("section", "sensors-group "); 277 }
39 geogroup.createChild("div", "sensors-group-title").textContent = WebInsp ector.UIString("Geolocation"); 278
40 var fields = geogroup.createChild("div", "geo-fields"); 279 if (modificationSource !== WebInspector.SensorsView.DeviceOrientationModific ationSource.UserInput) {
41 280 this._alphaSetter(roundAngle(deviceOrientation.alpha));
42 const noOverrideOption = {title: WebInspector.UIString("No override"), l ocation: WebInspector.SensorsView.NonPresetOptions.NoOverride}; 281 this._betaSetter(roundAngle(deviceOrientation.beta));
43 const customLocationOption = {title: WebInspector.UIString("Custom locat ion..."), location: WebInspector.SensorsView.NonPresetOptions.Custom}; 282 this._gammaSetter(roundAngle(deviceOrientation.gamma));
44 this._locationSelectElement = this.contentElement.createChild("select", "chrome-select"); 283 }
45 this._locationSelectElement.appendChild(new Option(noOverrideOption.titl e, noOverrideOption.location)); 284
46 this._locationSelectElement.appendChild(new Option(customLocationOption. title, customLocationOption.location)); 285 var animate = modificationSource !== WebInspector.SensorsView.DeviceOrientat ionModificationSource.UserDrag;
47 286 this._setBoxOrientation(deviceOrientation, animate);
48 var locationGroups = WebInspector.SensorsView.PresetLocations; 287
49 for (var i = 0; i < locationGroups.length; ++i) { 288 this._deviceOrientation = deviceOrientation;
50 var group = locationGroups[i].value; 289 this._applyDeviceOrientation();
51 var groupElement = this._locationSelectElement.createChild("optgroup "); 290 }
52 groupElement.label = locationGroups[i].title; 291
53 for (var j = 0; j < group.length; ++j) 292 /**
54 groupElement.appendChild(new Option(group[j].title, group[j].loc ation)); 293 * @param {!Element} parentElement
55 } 294 * @param {!Element} input
56 this._locationSelectElement.selectedIndex = 0; 295 * @param {string} label
57 fields.appendChild(this._locationSelectElement); 296 * @return {function(string)}
58 this._locationSelectElement.addEventListener("change", this._geolocation SelectChanged.bind(this)); 297 */
59 298 _createAxisInput(parentElement, input, label) {
60 // Validated input fieldset. 299 var div = parentElement.createChild('div', 'orientation-axis-input-container ');
61 this._fieldsetElement = fields.createChild("fieldset"); 300 div.appendChild(input);
62 this._fieldsetElement.disabled = !this._geolocationOverrideEnabled; 301 div.createTextChild(label);
63 this._fieldsetElement.id = "geolocation-override-section"; 302 input.type = 'number';
64 303 return WebInspector.bindInput(
65 var latitudeGroup = this._fieldsetElement.createChild("div", "latlong-gr oup"); 304 input, this._applyDeviceOrientationUserInput.bind(this), WebInspector.De viceOrientation.validator, true);
66 var longitudeGroup = this._fieldsetElement.createChild("div", "latlong-g roup"); 305 }
67 306
68 this._latitudeInput = latitudeGroup.createChild("input"); 307 /**
69 this._latitudeInput.setAttribute("type", "number"); 308 * @param {!WebInspector.DeviceOrientation} deviceOrientation
70 this._latitudeInput.value = 0; 309 * @return {!Element}
71 this._latitudeSetter = WebInspector.bindInput(this._latitudeInput, this. _applyGeolocationUserInput.bind(this), WebInspector.Geolocation.latitudeValidato r, true); 310 */
72 this._latitudeSetter(String(geolocation.latitude)); 311 _createDeviceOrientationOverrideElement(deviceOrientation) {
73 312 var fieldsetElement = createElement('fieldset');
74 this._longitudeInput = longitudeGroup.createChild("input"); 313 fieldsetElement.classList.add('device-orientation-override-section');
75 this._longitudeInput.setAttribute("type", "number"); 314 var cellElement = fieldsetElement.createChild('td', 'orientation-inputs-cell ');
76 this._longitudeInput.value = 0; 315
77 this._longitudeSetter = WebInspector.bindInput(this._longitudeInput, thi s._applyGeolocationUserInput.bind(this), WebInspector.Geolocation.longitudeValid ator, true); 316 this._alphaElement = createElement('input');
78 this._longitudeSetter(String(geolocation.longitude)); 317 this._alphaSetter = this._createAxisInput(cellElement, this._alphaElement, W ebInspector.UIString('\u03B1 (alpha)'));
79 318 this._alphaSetter(String(deviceOrientation.alpha));
80 latitudeGroup.createChild("div", "latlong-title").textContent = WebInspe ctor.UIString("Latitude"); 319
81 longitudeGroup.createChild("div", "latlong-title").textContent = WebInsp ector.UIString("Longitude"); 320 this._betaElement = createElement('input');
82 }, 321 this._betaSetter = this._createAxisInput(cellElement, this._betaElement, Web Inspector.UIString('\u03B2 (beta)'));
83 322 this._betaSetter(String(deviceOrientation.beta));
84 _geolocationSelectChanged: function() 323
85 { 324 this._gammaElement = createElement('input');
86 this._fieldsetElement.disabled = false; 325 this._gammaSetter = this._createAxisInput(cellElement, this._gammaElement, W ebInspector.UIString('\u03B3 (gamma)'));
87 var value = this._locationSelectElement.options[this._locationSelectElem ent.selectedIndex].value; 326 this._gammaSetter(String(deviceOrientation.gamma));
88 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) { 327
89 this._geolocationOverrideEnabled = false; 328 cellElement.appendChild(createTextButton(
90 this._fieldsetElement.disabled = true; 329 WebInspector.UIString('Reset'), this._resetDeviceOrientation.bind(this), 'orientation-reset-button'));
91 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) { 330 return fieldsetElement;
92 this._geolocationOverrideEnabled = true; 331 }
93 } else if (value === WebInspector.SensorsView.NonPresetOptions.Unavailab le) { 332
94 this._geolocationOverrideEnabled = true; 333 /**
95 this._geolocation = new WebInspector.Geolocation(0, 0, true); 334 * @param {!WebInspector.DeviceOrientation} deviceOrientation
96 } else { 335 * @param {boolean} animate
97 this._geolocationOverrideEnabled = true; 336 */
98 var coordinates = JSON.parse(value); 337 _setBoxOrientation(deviceOrientation, animate) {
99 this._geolocation = new WebInspector.Geolocation(coordinates[0], coo rdinates[1], false); 338 if (animate)
100 this._latitudeSetter(coordinates[0]); 339 this._stageElement.classList.add('is-animating');
101 this._longitudeSetter(coordinates[1]); 340 else
102 } 341 this._stageElement.classList.remove('is-animating');
103 342
104 this._applyGeolocation(); 343 // The CSS transform should not depend on matrix3d, which does not interpola te well.
105 if (value === WebInspector.SensorsView.NonPresetOptions.Custom) 344 var matrix = new WebKitCSSMatrix();
106 this._latitudeInput.focus(); 345 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientation.g amma, -deviceOrientation.alpha);
107 }, 346 var eulerAngles =
108 347 new WebInspector.Geometry.EulerAngles(deviceOrientation.alpha, deviceOri entation.beta, deviceOrientation.gamma);
109 _applyGeolocationUserInput: function() 348 this._orientationLayer.style.transform = eulerAngles.toRotate3DString();
110 { 349 }
111 var geolocation = WebInspector.Geolocation.parseUserInput(this._latitude Input.value.trim(), this._longitudeInput.value.trim(), ""); 350
112 if (!geolocation) 351 /**
113 return; 352 * @param {!MouseEvent} event
114 353 * @return {boolean}
115 this._setSelectElementLabel(this._locationSelectElement, WebInspector.Se nsorsView.NonPresetOptions.Custom); 354 */
116 this._geolocation = geolocation; 355 _onBoxDrag(event) {
117 this._applyGeolocation(); 356 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y);
118 }, 357 if (!mouseMoveVector)
119 358 return true;
120 _applyGeolocation: function() 359
121 { 360 event.consume(true);
122 if (this._geolocationOverrideEnabled) { 361 var axis, angle;
123 this._geolocationSetting.set(this._geolocation.toSetting()); 362 if (event.shiftKey) {
124 this._geolocation.apply(); 363 axis = new WebInspector.Geometry.Vector(0, 0, -1);
125 } else { 364 angle = (this._mouseDownVector.x - mouseMoveVector.x) * WebInspector.Senso rsView.ShiftDragOrientationSpeed;
126 this._geolocation.clear(); 365 } else {
127 } 366 axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mouseMove Vector);
128 }, 367 angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseM oveVector);
129 368 }
130 _createDeviceOrientationSection: function() 369
131 { 370 // The mouse movement vectors occur in the screen space, which is offset by 90 degrees from
132 var orientationGroup = this.contentElement.createChild("section", "senso rs-group"); 371 // the actual device orientation.
133 orientationGroup.createChild("div", "sensors-group-title").textContent = WebInspector.UIString("Orientation"); 372 var currentMatrix = new WebKitCSSMatrix();
134 var orientationContent = orientationGroup.createChild("div", "orientatio n-content"); 373 currentMatrix = currentMatrix.rotate(-90, 0, 0)
135 var fields = orientationContent.createChild("div", "orientation-fields") ; 374 .rotateAxisAngle(axis.x, axis.y, axis.z, angle)
136 375 .rotate(90, 0, 0)
137 const orientationOffOption = {title: WebInspector.UIString("Off"), orien tation: WebInspector.SensorsView.NonPresetOptions.NoOverride}; 376 .multiply(this._originalBoxMatrix);
138 const customOrientationOption = {title: WebInspector.UIString("Custom or ientation..."), orientation: WebInspector.SensorsView.NonPresetOptions.Custom}; 377
139 this._orientationSelectElement = this.contentElement.createChild("select ", "chrome-select"); 378 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(curre ntMatrix);
140 this._orientationSelectElement.appendChild(new Option(orientationOffOpti on.title, orientationOffOption.orientation)); 379 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alpha, -eulerAngles.beta, eulerAngles.gamma);
141 this._orientationSelectElement.appendChild(new Option(customOrientationO ption.title, customOrientationOption.orientation)); 380 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.DeviceOr ientationModificationSource.UserDrag);
142 381 this._setSelectElementLabel(this._orientationSelectElement, WebInspector.Sen sorsView.NonPresetOptions.Custom);
143 var orientationGroups = WebInspector.SensorsView.PresetOrientations; 382 return false;
144 for (var i = 0; i < orientationGroups.length; ++i) { 383 }
145 var groupElement = this._orientationSelectElement.createChild("optgr oup"); 384
146 groupElement.label = orientationGroups[i].title; 385 /**
147 var group = orientationGroups[i].value; 386 * @param {!MouseEvent} event
148 for (var j = 0; j < group.length; ++j) 387 * @return {boolean}
149 groupElement.appendChild(new Option(group[j].title, group[j].ori entation)); 388 */
150 } 389 _onBoxDragStart(event) {
151 this._orientationSelectElement.selectedIndex = 0; 390 if (!this._deviceOrientationOverrideEnabled)
152 fields.appendChild(this._orientationSelectElement); 391 return false;
153 this._orientationSelectElement.addEventListener("change", this._orientat ionSelectChanged.bind(this)); 392
154 393 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y);
155 this._deviceOrientationFieldset = this._createDeviceOrientationOverrideE lement(this._deviceOrientation); 394 this._originalBoxMatrix = this._boxMatrix;
156 395
157 this._stageElement = orientationContent.createChild("div", "orientation- stage"); 396 if (!this._mouseDownVector)
158 this._stageElement.title = WebInspector.UIString("Shift+drag horizontall y to rotate around the y-axis"); 397 return false;
159 this._orientationLayer = this._stageElement.createChild("div", "orientat ion-layer"); 398
160 this._boxElement = this._orientationLayer.createChild("section", "orient ation-box orientation-element"); 399 event.consume(true);
161 400 return true;
162 this._boxElement.createChild("section", "orientation-front orientation-e lement"); 401 }
163 this._boxElement.createChild("section", "orientation-top orientation-ele ment"); 402
164 this._boxElement.createChild("section", "orientation-back orientation-el ement"); 403 /**
165 this._boxElement.createChild("section", "orientation-left orientation-el ement"); 404 * @param {number} x
166 this._boxElement.createChild("section", "orientation-right orientation-e lement"); 405 * @param {number} y
167 this._boxElement.createChild("section", "orientation-bottom orientation- element"); 406 * @return {?WebInspector.Geometry.Vector}
168 407 */
169 WebInspector.installDragHandle(this._stageElement, this._onBoxDragStart. bind(this), this._onBoxDrag.bind(this), null, "-webkit-grabbing", "-webkit-grab" ); 408 _calculateRadiusVector(x, y) {
170 409 var rect = this._stageElement.getBoundingClientRect();
171 fields.appendChild(this._deviceOrientationFieldset); 410 var radius = Math.max(rect.width, rect.height) / 2;
172 this._enableOrientationFields(true); 411 var sphereX = (x - rect.left - rect.width / 2) / radius;
173 this._setBoxOrientation(this._deviceOrientation, false); 412 var sphereY = (y - rect.top - rect.height / 2) / radius;
174 }, 413 var sqrSum = sphereX * sphereX + sphereY * sphereY;
175 414 if (sqrSum > 0.5)
176 /** 415 return new WebInspector.Geometry.Vector(sphereX, sphereY, 0.5 / Math.sqrt( sqrSum));
177 * @param {?boolean} disable 416
178 */ 417 return new WebInspector.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrS um));
179 _enableOrientationFields: function(disable) 418 }
180 { 419
181 if (disable) { 420 _appendTouchControl() {
182 this._deviceOrientationFieldset.disabled = true; 421 var groupElement = this.contentElement.createChild('div', 'sensors-group');
183 this._stageElement.classList.add("disabled"); 422 var title = groupElement.createChild('div', 'sensors-group-title');
184 } else { 423 var fieldsElement = groupElement.createChild('div', 'sensors-group-fields');
185 this._deviceOrientationFieldset.disabled = false; 424
186 this._stageElement.classList.remove("disabled"); 425 title.textContent = WebInspector.UIString('Touch');
187 } 426 var select = fieldsElement.createChild('select', 'chrome-select');
188 }, 427 select.appendChild(new Option(WebInspector.UIString('Device-based'), 'auto') );
189 428 select.appendChild(new Option(WebInspector.UIString('Force enabled'), 'enabl ed'));
190 _orientationSelectChanged: function() 429 select.addEventListener('change', applyTouch, false);
191 { 430
192 var value = this._orientationSelectElement.options[this._orientationSele ctElement.selectedIndex].value; 431 function applyTouch() {
193 this._enableOrientationFields(false); 432 WebInspector.MultitargetTouchModel.instance().setCustomTouchEnabled(select .value === 'enabled');
194 433 }
195 if (value === WebInspector.SensorsView.NonPresetOptions.NoOverride) { 434 }
196 this._deviceOrientationOverrideEnabled = false;
197 this._enableOrientationFields(true);
198 } else if (value === WebInspector.SensorsView.NonPresetOptions.Custom) {
199 this._deviceOrientationOverrideEnabled = true;
200 this._alphaElement.focus();
201 } else {
202 var parsedValue = JSON.parse(value);
203 this._deviceOrientationOverrideEnabled = true;
204 this._deviceOrientation = new WebInspector.DeviceOrientation(parsedV alue[0], parsedValue[1], parsedValue[2]);
205 this._setDeviceOrientation(this._deviceOrientation, WebInspector.Sen sorsView.DeviceOrientationModificationSource.SelectPreset);
206 }
207 },
208
209 _applyDeviceOrientation: function()
210 {
211 if (this._deviceOrientationOverrideEnabled) {
212 this._deviceOrientationSetting.set(this._deviceOrientation.toSetting ());
213 this._deviceOrientation.apply();
214 } else {
215 this._deviceOrientation.clear();
216 }
217 },
218
219 /**
220 * @param {!Element} selectElement
221 * @param {string} labelValue
222 */
223 _setSelectElementLabel: function(selectElement, labelValue)
224 {
225 var optionValues = Array.prototype.map.call(selectElement.options, x => x.value);
226 selectElement.selectedIndex = optionValues.indexOf(labelValue);
227 },
228
229 _applyDeviceOrientationUserInput: function()
230 {
231 this._setDeviceOrientation(WebInspector.DeviceOrientation.parseUserInput (this._alphaElement.value.trim(), this._betaElement.value.trim(), this._gammaEle ment.value.trim()), WebInspector.SensorsView.DeviceOrientationModificationSource .UserInput);
232 this._setSelectElementLabel(this._orientationSelectElement, WebInspector .SensorsView.NonPresetOptions.Custom);
233 },
234
235 _resetDeviceOrientation: function()
236 {
237 this._setDeviceOrientation(new WebInspector.DeviceOrientation(0, 90, 0), WebInspector.SensorsView.DeviceOrientationModificationSource.ResetButton);
238 this._setSelectElementLabel(this._orientationSelectElement, "[0, 90, 0]" );
239 },
240
241 /**
242 * @param {?WebInspector.DeviceOrientation} deviceOrientation
243 * @param {!WebInspector.SensorsView.DeviceOrientationModificationSource} mo dificationSource
244 */
245 _setDeviceOrientation: function(deviceOrientation, modificationSource)
246 {
247 if (!deviceOrientation)
248 return;
249
250 /**
251 * @param {number} angle
252 * @return {number}
253 */
254 function roundAngle(angle)
255 {
256 return Math.round(angle * 10000) / 10000;
257 }
258
259 if (modificationSource !== WebInspector.SensorsView.DeviceOrientationMod ificationSource.UserInput) {
260 this._alphaSetter(roundAngle(deviceOrientation.alpha));
261 this._betaSetter(roundAngle(deviceOrientation.beta));
262 this._gammaSetter(roundAngle(deviceOrientation.gamma));
263 }
264
265 var animate = modificationSource !== WebInspector.SensorsView.DeviceOrie ntationModificationSource.UserDrag;
266 this._setBoxOrientation(deviceOrientation, animate);
267
268 this._deviceOrientation = deviceOrientation;
269 this._applyDeviceOrientation();
270 },
271
272 /**
273 * @param {!Element} parentElement
274 * @param {!Element} input
275 * @param {string} label
276 * @return {function(string)}
277 */
278 _createAxisInput: function(parentElement, input, label)
279 {
280 var div = parentElement.createChild("div", "orientation-axis-input-conta iner");
281 div.appendChild(input);
282 div.createTextChild(label);
283 input.type = "number";
284 return WebInspector.bindInput(input, this._applyDeviceOrientationUserInp ut.bind(this), WebInspector.DeviceOrientation.validator, true);
285 },
286
287 /**
288 * @param {!WebInspector.DeviceOrientation} deviceOrientation
289 * @return {!Element}
290 */
291 _createDeviceOrientationOverrideElement: function(deviceOrientation)
292 {
293 var fieldsetElement = createElement("fieldset");
294 fieldsetElement.classList.add("device-orientation-override-section");
295 var cellElement = fieldsetElement.createChild("td", "orientation-inputs- cell");
296
297 this._alphaElement = createElement("input");
298 this._alphaSetter = this._createAxisInput(cellElement, this._alphaElemen t, WebInspector.UIString("\u03B1 (alpha)"));
299 this._alphaSetter(String(deviceOrientation.alpha));
300
301 this._betaElement = createElement("input");
302 this._betaSetter = this._createAxisInput(cellElement, this._betaElement, WebInspector.UIString("\u03B2 (beta)"));
303 this._betaSetter(String(deviceOrientation.beta));
304
305 this._gammaElement = createElement("input");
306 this._gammaSetter = this._createAxisInput(cellElement, this._gammaElemen t, WebInspector.UIString("\u03B3 (gamma)"));
307 this._gammaSetter(String(deviceOrientation.gamma));
308
309 cellElement.appendChild(createTextButton(WebInspector.UIString("Reset"), this._resetDeviceOrientation.bind(this), "orientation-reset-button"));
310 return fieldsetElement;
311 },
312
313 /**
314 * @param {!WebInspector.DeviceOrientation} deviceOrientation
315 * @param {boolean} animate
316 */
317 _setBoxOrientation: function(deviceOrientation, animate)
318 {
319 if (animate)
320 this._stageElement.classList.add("is-animating");
321 else
322 this._stageElement.classList.remove("is-animating");
323
324 // The CSS transform should not depend on matrix3d, which does not inter polate well.
325 var matrix = new WebKitCSSMatrix();
326 this._boxMatrix = matrix.rotate(-deviceOrientation.beta, deviceOrientati on.gamma, -deviceOrientation.alpha);
327 var eulerAngles = new WebInspector.Geometry.EulerAngles(deviceOrientatio n.alpha, deviceOrientation.beta, deviceOrientation.gamma);
328 this._orientationLayer.style.transform = eulerAngles.toRotate3DString();
329 },
330
331 /**
332 * @param {!MouseEvent} event
333 * @return {boolean}
334 */
335 _onBoxDrag: function(event)
336 {
337 var mouseMoveVector = this._calculateRadiusVector(event.x, event.y);
338 if (!mouseMoveVector)
339 return true;
340
341 event.consume(true);
342 var axis, angle;
343 if (event.shiftKey) {
344 axis = new WebInspector.Geometry.Vector(0, 0, -1);
345 angle = (this._mouseDownVector.x - mouseMoveVector.x) * WebInspector .SensorsView.ShiftDragOrientationSpeed;
346 } else {
347 axis = WebInspector.Geometry.crossProduct(this._mouseDownVector, mou seMoveVector);
348 angle = WebInspector.Geometry.calculateAngle(this._mouseDownVector, mouseMoveVector);
349 }
350
351 // The mouse movement vectors occur in the screen space, which is offset by 90 degrees from
352 // the actual device orientation.
353 var currentMatrix = new WebKitCSSMatrix();
354 currentMatrix = currentMatrix
355 .rotate(-90, 0, 0)
356 .rotateAxisAngle(axis.x, axis.y, axis.z, angle)
357 .rotate(90, 0, 0)
358 .multiply(this._originalBoxMatrix);
359
360 var eulerAngles = WebInspector.Geometry.EulerAngles.fromRotationMatrix(c urrentMatrix);
361 var newOrientation = new WebInspector.DeviceOrientation(-eulerAngles.alp ha, -eulerAngles.beta, eulerAngles.gamma);
362 this._setDeviceOrientation(newOrientation, WebInspector.SensorsView.Devi ceOrientationModificationSource.UserDrag);
363 this._setSelectElementLabel(this._orientationSelectElement, WebInspector .SensorsView.NonPresetOptions.Custom);
364 return false;
365 },
366
367 /**
368 * @param {!MouseEvent} event
369 * @return {boolean}
370 */
371 _onBoxDragStart: function(event)
372 {
373 if (!this._deviceOrientationOverrideEnabled)
374 return false;
375
376 this._mouseDownVector = this._calculateRadiusVector(event.x, event.y);
377 this._originalBoxMatrix = this._boxMatrix;
378
379 if (!this._mouseDownVector)
380 return false;
381
382 event.consume(true);
383 return true;
384 },
385
386 /**
387 * @param {number} x
388 * @param {number} y
389 * @return {?WebInspector.Geometry.Vector}
390 */
391 _calculateRadiusVector: function(x, y)
392 {
393 var rect = this._stageElement.getBoundingClientRect();
394 var radius = Math.max(rect.width, rect.height) / 2;
395 var sphereX = (x - rect.left - rect.width / 2) / radius;
396 var sphereY = (y - rect.top - rect.height / 2) / radius;
397 var sqrSum = sphereX * sphereX + sphereY * sphereY;
398 if (sqrSum > 0.5)
399 return new WebInspector.Geometry.Vector(sphereX, sphereY, 0.5 / Math .sqrt(sqrSum));
400
401 return new WebInspector.Geometry.Vector(sphereX, sphereY, Math.sqrt(1 - sqrSum));
402 },
403
404 _appendTouchControl: function()
405 {
406 var groupElement = this.contentElement.createChild("div", "sensors-group ");
407 var title = groupElement.createChild("div", "sensors-group-title");
408 var fieldsElement = groupElement.createChild("div", "sensors-group-field s");
409
410 title.textContent = WebInspector.UIString("Touch");
411 var select = fieldsElement.createChild("select", "chrome-select");
412 select.appendChild(new Option(WebInspector.UIString("Device-based"), "au to"));
413 select.appendChild(new Option(WebInspector.UIString("Force enabled"), "e nabled"));
414 select.addEventListener("change", applyTouch, false);
415
416 function applyTouch()
417 {
418 WebInspector.MultitargetTouchModel.instance().setCustomTouchEnabled( select.value === "enabled");
419 }
420 },
421
422 __proto__ : WebInspector.VBox.prototype
423 }; 435 };
424 436
425 /** @enum {string} */ 437 /** @enum {string} */
426 WebInspector.SensorsView.DeviceOrientationModificationSource = { 438 WebInspector.SensorsView.DeviceOrientationModificationSource = {
427 UserInput: "userInput", 439 UserInput: 'userInput',
428 UserDrag: "userDrag", 440 UserDrag: 'userDrag',
429 ResetButton: "resetButton", 441 ResetButton: 'resetButton',
430 SelectPreset: "selectPreset" 442 SelectPreset: 'selectPreset'
431 }; 443 };
432 444
433 /** {string} */ 445 /** {string} */
434 WebInspector.SensorsView.NonPresetOptions = { 446 WebInspector.SensorsView.NonPresetOptions = {
435 "NoOverride": "noOverride", 447 'NoOverride': 'noOverride',
436 "Custom": "custom", 448 'Custom': 'custom',
437 "Unavailable": "unavailable" 449 'Unavailable': 'unavailable'
438 }; 450 };
439 451
440 /** @type {!Array.<{title: string, value: !Array.<{title: string, location: stri ng}>}>} */ 452 /** @type {!Array.<{title: string, value: !Array.<{title: string, location: stri ng}>}>} */
441 WebInspector.SensorsView.PresetLocations = [ 453 WebInspector.SensorsView.PresetLocations = [
442 { 454 {
443 title: "Presets", 455 title: 'Presets',
444 value: [ 456 value: [
445 {title: WebInspector.UIString("Berlin"), location: "[52.520007, 13.4 04954]"}, 457 {title: WebInspector.UIString('Berlin'), location: '[52.520007, 13.404954] '},
446 {title: WebInspector.UIString("London"), location: "[51.507351, -0.1 27758]"}, 458 {title: WebInspector.UIString('London'), location: '[51.507351, -0.127758] '},
447 {title: WebInspector.UIString("Moscow"), location: "[55.755826, 37.6 17300]"}, 459 {title: WebInspector.UIString('Moscow'), location: '[55.755826, 37.617300] '},
448 {title: WebInspector.UIString("Mountain View"), location: "[37.38605 2, -122.083851]"}, 460 {title: WebInspector.UIString('Mountain View'), location: '[37.386052, -12 2.083851]'},
449 {title: WebInspector.UIString("Mumbai"), location: "[19.075984, 72.8 77656]"}, 461 {title: WebInspector.UIString('Mumbai'), location: '[19.075984, 72.877656] '},
450 {title: WebInspector.UIString("San Francisco"), location: "[37.77492 9, -122.419416]"}, 462 {title: WebInspector.UIString('San Francisco'), location: '[37.774929, -12 2.419416]'},
451 {title: WebInspector.UIString("Shanghai"), location: "[31.230416, 12 1.473701]"}, 463 {title: WebInspector.UIString('Shanghai'), location: '[31.230416, 121.4737 01]'},
452 {title: WebInspector.UIString("São Paulo"), location: "[-23.550520, -46.633309]"}, 464 {title: WebInspector.UIString('São Paulo'), location: '[-23.550520, -46.63 3309]'},
453 {title: WebInspector.UIString("Tokyo"), location: "[35.689487, 139.6 91706]"}, 465 {title: WebInspector.UIString('Tokyo'), location: '[35.689487, 139.691706] '},
454 ] 466 ]
455 }, 467 },
456 { 468 {
457 title: "Error", 469 title: 'Error',
458 value: [ 470 value: [{
459 {title: WebInspector.UIString("Location unavailable"), location: Web Inspector.SensorsView.NonPresetOptions.Unavailable} 471 title: WebInspector.UIString('Location unavailable'),
460 ] 472 location: WebInspector.SensorsView.NonPresetOptions.Unavailable
461 } 473 }]
474 }
462 ]; 475 ];
463 476
464 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: ! WebInspector.DeviceOrientation}>}>} */ 477 /** @type {!Array.<{title: string, value: !Array.<{title: string, orientation: ! WebInspector.DeviceOrientation}>}>} */
465 WebInspector.SensorsView.PresetOrientations = [ 478 WebInspector.SensorsView.PresetOrientations = [{
466 { 479 title: 'Presets',
467 title: "Presets", 480 value: [
468 value: [ 481 {title: WebInspector.UIString('Portrait'), orientation: '[0, 90, 0]'},
469 {title: WebInspector.UIString("Portrait"), orientation: "[0, 90, 0]" }, 482 {title: WebInspector.UIString('Portrait upside down'), orientation: '[180, - 90, 0]'},
470 {title: WebInspector.UIString("Portrait upside down"), orientation: "[180, -90, 0]"}, 483 {title: WebInspector.UIString('Landscape left'), orientation: '[0, 90, -90]' },
471 {title: WebInspector.UIString("Landscape left"), orientation: "[0, 9 0, -90]"}, 484 {title: WebInspector.UIString('Landscape right'), orientation: '[0, 90, 90]' },
472 {title: WebInspector.UIString("Landscape right"), orientation: "[0, 90, 90]"}, 485 {title: WebInspector.UIString('Display up'), orientation: '[0, 0, 0]'},
473 {title: WebInspector.UIString("Display up"), orientation: "[0, 0, 0] "}, 486 {title: WebInspector.UIString('Display down'), orientation: '[0, 180, 0]'}
474 {title: WebInspector.UIString("Display down"), orientation: "[0, 180 , 0]"} 487 ]
475 ] 488 }];
476 } 489
477 ];
478 490
479 /** 491 /**
480 * @return {!WebInspector.SensorsView} 492 * @implements {WebInspector.ActionDelegate}
493 * @unrestricted
481 */ 494 */
482 WebInspector.SensorsView.instance = function() 495 WebInspector.SensorsView.ShowActionDelegate = class {
483 { 496 /**
484 if (!WebInspector.SensorsView._instanceObject) 497 * @override
485 WebInspector.SensorsView._instanceObject = new WebInspector.SensorsView( ); 498 * @param {!WebInspector.Context} context
486 return WebInspector.SensorsView._instanceObject; 499 * @param {string} actionId
500 * @return {boolean}
501 */
502 handleAction(context, actionId) {
503 WebInspector.viewManager.showView('sensors');
504 return true;
505 }
487 }; 506 };
488 507
489 /**
490 * @constructor
491 * @implements {WebInspector.ActionDelegate}
492 */
493 WebInspector.SensorsView.ShowActionDelegate = function()
494 {
495 };
496
497 WebInspector.SensorsView.ShowActionDelegate.prototype = {
498 /**
499 * @override
500 * @param {!WebInspector.Context} context
501 * @param {string} actionId
502 * @return {boolean}
503 */
504 handleAction: function(context, actionId)
505 {
506 WebInspector.viewManager.showView("sensors");
507 return true;
508 }
509 };
510
511 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16; 508 WebInspector.SensorsView.ShiftDragOrientationSpeed = 16;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698