| 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 |