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

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

Powered by Google App Engine
This is Rietveld 408576698