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

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

Issue 1917543002: DevTools: Update styles for sensors drawer panel (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: UI update for sensors panel Created 4 years, 8 months 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 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
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
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 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698