OLD | NEW |
1 // Copyright 2015 The Chromium Authors. All rights reserved. | 1 // Copyright 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 * @param {function()} updateCallback | 7 * @param {function()} updateCallback |
8 * @implements {WebInspector.TargetManager.Observer} | 8 * @implements {WebInspector.TargetManager.Observer} |
9 */ | 9 */ |
10 WebInspector.DeviceModeModel = function(updateCallback) | 10 WebInspector.DeviceModeModel = function(updateCallback) |
11 { | 11 { |
12 this._updateCallback = updateCallback; | 12 this._updateCallback = updateCallback; |
13 this._screenRect = new WebInspector.Rect(0, 0, 1, 1); | 13 this._screenRect = new WebInspector.Rect(0, 0, 1, 1); |
14 this._visiblePageRect = new WebInspector.Rect(0, 0, 1, 1); | 14 this._visiblePageRect = new WebInspector.Rect(0, 0, 1, 1); |
15 this._availableSize = new Size(1, 1); | 15 this._availableSize = new Size(1, 1); |
16 this._preferredSize = new Size(1, 1); | |
17 this._deviceMetricsThrottler = new WebInspector.Throttler(0); | 16 this._deviceMetricsThrottler = new WebInspector.Throttler(0); |
18 this._appliedDeviceSize = new Size(1, 1); | 17 this._appliedDeviceSize = new Size(1, 1); |
19 this._currentDeviceScaleFactor = window.devicePixelRatio; | 18 this._currentDeviceScaleFactor = window.devicePixelRatio; |
20 this._appliedDeviceScaleFactor = 0; | 19 this._appliedDeviceScaleFactor = 0; |
21 | 20 |
| 21 // Zero means "fit". |
22 this._scaleSetting = WebInspector.settings.createSetting("emulation.deviceSc
ale", 1); | 22 this._scaleSetting = WebInspector.settings.createSetting("emulation.deviceSc
ale", 1); |
23 this._scaleSetting.addChangeListener(this._scaleSettingChanged, this); | 23 this._scaleSetting.addChangeListener(this._scaleSettingChanged, this); |
24 this._widthSetting = WebInspector.settings.createSetting("emulation.deviceWi
dth", 400); | 24 this._widthSetting = WebInspector.settings.createSetting("emulation.deviceWi
dth", 400); |
25 this._widthSetting.addChangeListener(this._widthSettingChanged, this); | 25 this._widthSetting.addChangeListener(this._widthSettingChanged, this); |
26 this._heightSetting = WebInspector.settings.createSetting("emulation.deviceH
eight", 0); | 26 this._heightSetting = WebInspector.settings.createSetting("emulation.deviceH
eight", 700); |
27 this._heightSetting.addChangeListener(this._heightSettingChanged, this); | 27 this._heightSetting.addChangeListener(this._heightSettingChanged, this); |
28 this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA",
WebInspector.DeviceModeModel.UA.Mobile); | 28 this._uaSetting = WebInspector.settings.createSetting("emulation.deviceUA",
WebInspector.DeviceModeModel.UA.Mobile); |
29 this._uaSetting.addChangeListener(this._uaSettingChanged, this); | 29 this._uaSetting.addChangeListener(this._uaSettingChanged, this); |
30 this._deviceScaleFactorSetting = WebInspector.settings.createSetting("emulat
ion.deviceScaleFactor", 0); | 30 this._deviceScaleFactorSetting = WebInspector.settings.createSetting("emulat
ion.deviceScaleFactor", 0); |
31 this._deviceScaleFactorSetting.addChangeListener(this._deviceScaleFactorSett
ingChanged, this); | 31 this._deviceScaleFactorSetting.addChangeListener(this._deviceScaleFactorSett
ingChanged, this); |
32 | 32 |
33 /** @type {!WebInspector.DeviceModeModel.Type} */ | 33 /** @type {!WebInspector.DeviceModeModel.Type} */ |
34 this._type = WebInspector.DeviceModeModel.Type.None; | 34 this._type = WebInspector.DeviceModeModel.Type.None; |
35 /** @type {?WebInspector.EmulatedDevice} */ | 35 /** @type {?WebInspector.EmulatedDevice} */ |
36 this._device = null; | 36 this._device = null; |
37 /** @type {?WebInspector.EmulatedDevice.Mode} */ | 37 /** @type {?WebInspector.EmulatedDevice.Mode} */ |
38 this._mode = null; | 38 this._mode = null; |
39 /** @type {boolean} */ | 39 /** @type {boolean} */ |
40 this._touchEnabled = false; | 40 this._touchEnabled = false; |
41 /** @type {string} */ | 41 /** @type {string} */ |
42 this._touchConfiguration = ""; | 42 this._touchConfiguration = ""; |
43 /** @type {string} */ | 43 /** @type {string} */ |
44 this._screenOrientation = ""; | 44 this._screenOrientation = ""; |
45 /** @type {number} */ | 45 /** @type {number} */ |
46 this._fitScale = 1; | 46 this._fixedScale = 0; |
47 | 47 |
48 /** @type {?WebInspector.Target} */ | 48 /** @type {?WebInspector.Target} */ |
49 this._target = null; | 49 this._target = null; |
50 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag
e); | 50 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag
e); |
51 } | 51 } |
52 | 52 |
53 /** @enum {string} */ | 53 /** @enum {string} */ |
54 WebInspector.DeviceModeModel.Type = { | 54 WebInspector.DeviceModeModel.Type = { |
55 None: "None", | 55 None: "None", |
56 Responsive: "Responsive", | 56 Responsive: "Responsive", |
(...skipping 19 matching lines...) Expand all Loading... |
76 return ""; | 76 return ""; |
77 return WebInspector.UIString("Value must be positive integer"); | 77 return WebInspector.UIString("Value must be positive integer"); |
78 } | 78 } |
79 | 79 |
80 WebInspector.DeviceModeModel._touchEventsScriptIdSymbol = Symbol("DeviceModeMode
l.touchEventsScriptIdSymbol"); | 80 WebInspector.DeviceModeModel._touchEventsScriptIdSymbol = Symbol("DeviceModeMode
l.touchEventsScriptIdSymbol"); |
81 WebInspector.DeviceModeModel._defaultMobileUserAgent = "Mozilla/5.0 (Linux; Andr
oid 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.
0.2490.76 Mobile Safari/537.36"; | 81 WebInspector.DeviceModeModel._defaultMobileUserAgent = "Mozilla/5.0 (Linux; Andr
oid 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.
0.2490.76 Mobile Safari/537.36"; |
82 WebInspector.DeviceModeModel._defaultMobileScaleFactor = 2; | 82 WebInspector.DeviceModeModel._defaultMobileScaleFactor = 2; |
83 | 83 |
84 WebInspector.DeviceModeModel.prototype = { | 84 WebInspector.DeviceModeModel.prototype = { |
85 /** | 85 /** |
86 * @param {!Size} availableSize | 86 * @param {!Size} size |
87 * @param {!Size} preferredSize | |
88 */ | 87 */ |
89 setAvailableSize: function(availableSize, preferredSize) | 88 setAvailableSize: function(size) |
90 { | 89 { |
91 this._availableSize = availableSize; | 90 this._availableSize = size; |
92 this._preferredSize = preferredSize; | |
93 this._calculateAndEmulate(false); | 91 this._calculateAndEmulate(false); |
94 }, | 92 }, |
95 | 93 |
96 /** | 94 /** |
97 * @param {!WebInspector.DeviceModeModel.Type} type | 95 * @param {!WebInspector.DeviceModeModel.Type} type |
98 * @param {?WebInspector.EmulatedDevice} device | 96 * @param {?WebInspector.EmulatedDevice} device |
99 * @param {?WebInspector.EmulatedDevice.Mode} mode | 97 * @param {?WebInspector.EmulatedDevice.Mode} mode |
100 */ | 98 */ |
101 emulate: function(type, device, mode) | 99 emulate: function(type, device, mode) |
102 { | 100 { |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
165 }, | 163 }, |
166 | 164 |
167 /** | 165 /** |
168 * @return {number} | 166 * @return {number} |
169 */ | 167 */ |
170 scale: function() | 168 scale: function() |
171 { | 169 { |
172 return this._scale; | 170 return this._scale; |
173 }, | 171 }, |
174 | 172 |
175 /** | 173 suspendScaleChanges: function() |
176 * @return {number} | |
177 */ | |
178 fitScale: function() | |
179 { | 174 { |
180 return this._fitScale; | 175 ++this._fixedScale; |
| 176 }, |
| 177 |
| 178 resumeScaleChanges: function() |
| 179 { |
| 180 if (!--this._fixedScale) |
| 181 this._calculateAndEmulate(false); |
181 }, | 182 }, |
182 | 183 |
183 /** | 184 /** |
184 * @return {!Size} | 185 * @return {!Size} |
185 */ | 186 */ |
186 appliedDeviceSize: function() | 187 appliedDeviceSize: function() |
187 { | 188 { |
188 return this._appliedDeviceSize; | 189 return this._appliedDeviceSize; |
189 }, | 190 }, |
190 | 191 |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
245 return this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mob
ile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : this._currentDevi
ceScaleFactor; | 246 return this._uaSetting.get() === WebInspector.DeviceModeModel.UA.Mob
ile ? WebInspector.DeviceModeModel._defaultMobileScaleFactor : this._currentDevi
ceScaleFactor; |
246 else if (this._type === WebInspector.DeviceModeModel.Type.Device) | 247 else if (this._type === WebInspector.DeviceModeModel.Type.Device) |
247 return this._device.deviceScaleFactor; | 248 return this._device.deviceScaleFactor; |
248 else | 249 else |
249 return this._currentDeviceScaleFactor; | 250 return this._currentDeviceScaleFactor; |
250 }, | 251 }, |
251 | 252 |
252 reset: function() | 253 reset: function() |
253 { | 254 { |
254 this._deviceScaleFactorSetting.set(0); | 255 this._deviceScaleFactorSetting.set(0); |
255 this._scaleSetting.set(1); | 256 this._scaleSetting.set(0); |
256 this._widthSetting.set(400); | 257 this._widthSetting.set(400); |
257 this._heightSetting.set(0); | 258 this._heightSetting.set(700); |
258 this._uaSetting.set(WebInspector.DeviceModeModel.UA.Mobile); | 259 this._uaSetting.set(WebInspector.DeviceModeModel.UA.Mobile); |
259 }, | 260 }, |
260 | 261 |
261 /** | 262 /** |
262 * @override | 263 * @override |
263 * @param {!WebInspector.Target} target | 264 * @param {!WebInspector.Target} target |
264 */ | 265 */ |
265 targetAdded: function(target) | 266 targetAdded: function(target) |
266 { | 267 { |
267 if (!this._target) { | 268 if (!this._target) { |
(...skipping 59 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
327 | 328 |
328 /** | 329 /** |
329 * @param {boolean} resetScrollAndPageScale | 330 * @param {boolean} resetScrollAndPageScale |
330 */ | 331 */ |
331 _calculateAndEmulate: function(resetScrollAndPageScale) | 332 _calculateAndEmulate: function(resetScrollAndPageScale) |
332 { | 333 { |
333 if (this._type === WebInspector.DeviceModeModel.Type.Device) { | 334 if (this._type === WebInspector.DeviceModeModel.Type.Device) { |
334 var orientation = this._device.orientationByName(this._mode.orientat
ion); | 335 var orientation = this._device.orientationByName(this._mode.orientat
ion); |
335 var screenWidth = orientation.width; | 336 var screenWidth = orientation.width; |
336 var screenHeight = orientation.height; | 337 var screenHeight = orientation.height; |
337 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._
mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._dev
ice.mobile(), resetScrollAndPageScale); | 338 var scale = this._calculateScale(screenWidth, screenHeight); |
| 339 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._
mode.insets, scale, this._device.deviceScaleFactor, this._device.mobile(), reset
ScrollAndPageScale); |
338 this._applyUserAgent(this._device.userAgent); | 340 this._applyUserAgent(this._device.userAgent); |
339 this._applyTouch(this._device.touch(), this._device.mobile()); | 341 this._applyTouch(this._device.touch(), this._device.mobile()); |
340 this._applyScreenOrientation(this._mode.orientation == WebInspector.
EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary"); | 342 this._applyScreenOrientation(this._mode.orientation == WebInspector.
EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary"); |
341 } else if (this._type === WebInspector.DeviceModeModel.Type.None) { | 343 } else if (this._type === WebInspector.DeviceModeModel.Type.None) { |
342 this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0)
, 1, 0, false, resetScrollAndPageScale); | 344 this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0)
, 1, 0, false, resetScrollAndPageScale); |
343 this._applyUserAgent(""); | 345 this._applyUserAgent(""); |
344 this._applyTouch(false, false); | 346 this._applyTouch(false, false); |
345 this._applyScreenOrientation(""); | 347 this._applyScreenOrientation(""); |
346 } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive)
{ | 348 } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive)
{ |
347 var screenWidth = this._widthSetting.get() || this._preferredSize.wi
dth / (this._scaleSetting.get() || 1); | 349 var screenWidth = this._widthSetting.get(); |
348 var screenHeight = this._heightSetting.get() || this._preferredSize.
height / (this._scaleSetting.get() || 1); | 350 var screenHeight = this._heightSetting.get(); |
| 351 var scale = this._calculateScale(screenWidth, screenHeight); |
349 var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.
UA.Mobile; | 352 var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel.
UA.Mobile; |
350 var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel
._defaultMobileScaleFactor : 0; | 353 var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel
._defaultMobileScaleFactor : 0; |
351 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new In
sets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get()
|| defaultDeviceScaleFactor, mobile, resetScrollAndPageScale); | 354 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new In
sets(0, 0, 0, 0), scale, this._deviceScaleFactorSetting.get() || defaultDeviceSc
aleFactor, mobile, resetScrollAndPageScale); |
352 this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultM
obileUserAgent : ""); | 355 this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultM
obileUserAgent : ""); |
353 this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeMo
del.UA.Desktop, mobile); | 356 this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeMo
del.UA.Desktop, mobile); |
354 this._applyScreenOrientation(screenHeight >= screenWidth ? "portrait
Primary" : "landscapePrimary"); | 357 this._applyScreenOrientation(screenHeight >= screenWidth ? "portrait
Primary" : "landscapePrimary"); |
355 } | 358 } |
356 this._updateCallback.call(null); | 359 this._updateCallback.call(null); |
357 }, | 360 }, |
358 | 361 |
359 /** | 362 /** |
360 * @param {number} screenWidth | 363 * @param {number} screenWidth |
361 * @param {number} screenHeight | 364 * @param {number} screenHeight |
362 * @return {number} | 365 * @return {number} |
363 */ | 366 */ |
364 _calculateFitScale: function(screenWidth, screenHeight) | 367 _calculateScale: function(screenWidth, screenHeight) |
365 { | 368 { |
366 var scale = Math.min(screenWidth ? this._preferredSize.width / screenWid
th: 1, screenHeight ? this._preferredSize.height / screenHeight : 1); | 369 var scale = this._scaleSetting.get(); |
367 return Math.min(scale, 1); | 370 if (!scale) { |
| 371 if (this._fixedScale) { |
| 372 scale = this._scale; |
| 373 } else { |
| 374 scale = 1; |
| 375 while (this._availableSize.width < screenWidth * scale || this._
availableSize.height < screenHeight * scale) |
| 376 scale *= 0.8; |
| 377 } |
| 378 } |
| 379 return scale; |
368 }, | 380 }, |
369 | 381 |
370 /** | 382 /** |
371 * @param {string} userAgent | 383 * @param {string} userAgent |
372 */ | 384 */ |
373 _applyUserAgent: function(userAgent) | 385 _applyUserAgent: function(userAgent) |
374 { | 386 { |
375 WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent); | 387 WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent); |
376 }, | 388 }, |
377 | 389 |
378 /** | 390 /** |
379 * @param {!Size} screenSize | 391 * @param {!Size} screenSize |
380 * @param {!Insets} insets | 392 * @param {!Insets} insets |
381 * @param {number} scale | 393 * @param {number} scale |
382 * @param {number} deviceScaleFactor | 394 * @param {number} deviceScaleFactor |
383 * @param {boolean} mobile | 395 * @param {boolean} mobile |
384 * @param {boolean} resetScrollAndPageScale | 396 * @param {boolean} resetScrollAndPageScale |
385 */ | 397 */ |
386 _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor,
mobile, resetScrollAndPageScale) | 398 _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor,
mobile, resetScrollAndPageScale) |
387 { | 399 { |
388 screenSize.width = Math.max(1, Math.floor(screenSize.width)); | 400 screenSize.width = Math.max(1, Math.floor(screenSize.width)); |
389 screenSize.height = Math.max(1, Math.floor(screenSize.height)); | 401 screenSize.height = Math.max(1, Math.floor(screenSize.height)); |
390 this._fitScale = this._calculateFitScale(screenSize.width, screenSize.he
ight); | |
391 | |
392 var pageWidth = screenSize.width - insets.left - insets.right; | 402 var pageWidth = screenSize.width - insets.left - insets.right; |
393 var pageHeight = screenSize.height - insets.top - insets.bottom; | 403 var pageHeight = screenSize.height - insets.top - insets.bottom; |
394 var positionX = insets.left; | 404 var positionX = insets.left; |
395 var positionY = insets.top; | 405 var positionY = insets.top; |
396 | 406 |
397 this._appliedDeviceSize = screenSize; | 407 this._appliedDeviceSize = screenSize; |
398 this._screenRect = new WebInspector.Rect( | 408 this._screenRect = new WebInspector.Rect( |
399 Math.max(0, (this._availableSize.width - screenSize.width * scale) /
2), | 409 Math.max(0, (this._availableSize.width - screenSize.width * scale) /
2), |
400 0, | 410 0, |
401 screenSize.width * scale, | 411 screenSize.width * scale, |
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
498 if (!this._target || orientation === this._screenOrientation) | 508 if (!this._target || orientation === this._screenOrientation) |
499 return; | 509 return; |
500 | 510 |
501 this._screenOrientation = orientation; | 511 this._screenOrientation = orientation; |
502 if (!this._screenOrientation) | 512 if (!this._screenOrientation) |
503 this._target.screenOrientationAgent().clearScreenOrientationOverride
(); | 513 this._target.screenOrientationAgent().clearScreenOrientationOverride
(); |
504 else | 514 else |
505 this._target.screenOrientationAgent().setScreenOrientationOverride(t
his._screenOrientation === "landscapePrimary" ? 90 : 0, /** @type {!ScreenOrient
ationAgent.OrientationType} */ (this._screenOrientation)); | 515 this._target.screenOrientationAgent().setScreenOrientationOverride(t
his._screenOrientation === "landscapePrimary" ? 90 : 0, /** @type {!ScreenOrient
ationAgent.OrientationType} */ (this._screenOrientation)); |
506 } | 516 } |
507 } | 517 } |
OLD | NEW |