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

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

Issue 1586773002: Reland "[DevTools] More Device Mode polish." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 11 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 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)
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 this._touchEnabled = false; 43 this._touchEnabled = false;
44 /** @type {string} */ 44 /** @type {string} */
45 this._touchConfiguration = ""; 45 this._touchConfiguration = "";
46 /** @type {string} */ 46 /** @type {string} */
47 this._screenOrientation = ""; 47 this._screenOrientation = "";
48 /** @type {number} */ 48 /** @type {number} */
49 this._fitScale = 1; 49 this._fitScale = 1;
50 50
51 /** @type {?WebInspector.Target} */ 51 /** @type {?WebInspector.Target} */
52 this._target = null; 52 this._target = null;
53 /** @type {?function()} */
54 this._onTargetAvailable = null;
53 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag e); 55 WebInspector.targetManager.observeTargets(this, WebInspector.Target.Type.Pag e);
54 } 56 }
55 57
56 /** @enum {string} */ 58 /** @enum {string} */
57 WebInspector.DeviceModeModel.Type = { 59 WebInspector.DeviceModeModel.Type = {
58 None: "None", 60 None: "None",
59 Responsive: "Responsive", 61 Responsive: "Responsive",
60 Device: "Device" 62 Device: "Device"
61 } 63 }
62 64
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
96 this._calculateAndEmulate(false); 98 this._calculateAndEmulate(false);
97 }, 99 },
98 100
99 /** 101 /**
100 * @param {!WebInspector.DeviceModeModel.Type} type 102 * @param {!WebInspector.DeviceModeModel.Type} type
101 * @param {?WebInspector.EmulatedDevice} device 103 * @param {?WebInspector.EmulatedDevice} device
102 * @param {?WebInspector.EmulatedDevice.Mode} mode 104 * @param {?WebInspector.EmulatedDevice.Mode} mode
103 */ 105 */
104 emulate: function(type, device, mode) 106 emulate: function(type, device, mode)
105 { 107 {
108 var resetScrollAndPageScale = this._type !== type || this._device !== de vice || this._mode !== mode;
106 this._type = type; 109 this._type = type;
107 110
108 if (type === WebInspector.DeviceModeModel.Type.Device) { 111 if (type === WebInspector.DeviceModeModel.Type.Device) {
109 console.assert(device && mode, "Must pass device and mode for device emulation"); 112 console.assert(device && mode, "Must pass device and mode for device emulation");
110 this._device = device; 113 this._device = device;
111 this._mode = mode; 114 this._mode = mode;
112 } else { 115 } else {
113 this._device = null; 116 this._device = null;
114 this._mode = null; 117 this._mode = null;
115 } 118 }
116 119
117 if (type !== WebInspector.DeviceModeModel.Type.None) 120 if (type !== WebInspector.DeviceModeModel.Type.None)
118 WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action .DeviceModeEnabled); 121 WebInspector.userMetrics.actionTaken(WebInspector.UserMetrics.Action .DeviceModeEnabled);
119 this._calculateAndEmulate(true); 122 this._calculateAndEmulate(resetScrollAndPageScale);
120 }, 123 },
121 124
122 /** 125 /**
123 * @return {?WebInspector.EmulatedDevice} 126 * @return {?WebInspector.EmulatedDevice}
124 */ 127 */
125 device: function() 128 device: function()
126 { 129 {
127 return this._device; 130 return this._device;
128 }, 131 },
129 132
(...skipping 134 matching lines...) Expand 10 before | Expand all | Expand 10 after
264 /** 267 /**
265 * @override 268 * @override
266 * @param {!WebInspector.Target} target 269 * @param {!WebInspector.Target} target
267 */ 270 */
268 targetAdded: function(target) 271 targetAdded: function(target)
269 { 272 {
270 if (!this._target) { 273 if (!this._target) {
271 this._target = target; 274 this._target = target;
272 var domModel = WebInspector.DOMModel.fromTarget(this._target); 275 var domModel = WebInspector.DOMModel.fromTarget(this._target);
273 domModel.addEventListener(WebInspector.DOMModel.Events.InspectModeWi llBeToggled, this._inspectModeWillBeToggled, this); 276 domModel.addEventListener(WebInspector.DOMModel.Events.InspectModeWi llBeToggled, this._inspectModeWillBeToggled, this);
277 if (this._onTargetAvailable) {
278 var callback = this._onTargetAvailable;
279 this._onTargetAvailable = null;
280 callback();
281 }
274 } 282 }
275 }, 283 },
276 284
277 /** 285 /**
278 * @param {!WebInspector.Event} event 286 * @param {!WebInspector.Event} event
279 */ 287 */
280 _inspectModeWillBeToggled: function(event) 288 _inspectModeWillBeToggled: function(event)
281 { 289 {
282 var inspectModeEnabled = /** @type {boolean} */ (event.data); 290 var inspectModeEnabled = /** @type {boolean} */ (event.data);
283 if (inspectModeEnabled) { 291 if (inspectModeEnabled) {
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
326 _deviceScaleFactorSettingChanged: function() 334 _deviceScaleFactorSettingChanged: function()
327 { 335 {
328 this._calculateAndEmulate(false); 336 this._calculateAndEmulate(false);
329 }, 337 },
330 338
331 /** 339 /**
332 * @param {boolean} resetScrollAndPageScale 340 * @param {boolean} resetScrollAndPageScale
333 */ 341 */
334 _calculateAndEmulate: function(resetScrollAndPageScale) 342 _calculateAndEmulate: function(resetScrollAndPageScale)
335 { 343 {
344 if (!this._target) {
345 this._onTargetAvailable = this._calculateAndEmulate.bind(this, reset ScrollAndPageScale);
346 return;
347 }
348
336 if (this._type === WebInspector.DeviceModeModel.Type.Device) { 349 if (this._type === WebInspector.DeviceModeModel.Type.Device) {
337 var orientation = this._device.orientationByName(this._mode.orientat ion); 350 var orientation = this._device.orientationByName(this._mode.orientat ion);
338 var screenWidth = orientation.width; 351 this._calculateFitScale(orientation.width, orientation.height);
339 var screenHeight = orientation.height; 352 this._applyDeviceMetrics(new Size(orientation.width, orientation.hei ght), this._mode.insets, this._scaleSetting.get(), this._device.deviceScaleFacto r, this._device.mobile(), resetScrollAndPageScale);
340 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), this._ mode.insets, this._scaleSetting.get(), this._device.deviceScaleFactor, this._dev ice.mobile(), resetScrollAndPageScale);
341 this._applyUserAgent(this._device.userAgent); 353 this._applyUserAgent(this._device.userAgent);
342 this._applyTouch(this._device.touch(), this._device.mobile()); 354 this._applyTouch(this._device.touch(), this._device.mobile());
343 this._applyScreenOrientation(this._mode.orientation == WebInspector. EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary"); 355 this._applyScreenOrientation(this._mode.orientation == WebInspector. EmulatedDevice.Horizontal ? "landscapePrimary" : "portraitPrimary");
344 } else if (this._type === WebInspector.DeviceModeModel.Type.None) { 356 } else if (this._type === WebInspector.DeviceModeModel.Type.None) {
357 this._calculateFitScale(this._availableSize.width, this._availableSi ze.height);
345 this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0) , 1, 0, false, resetScrollAndPageScale); 358 this._applyDeviceMetrics(this._availableSize, new Insets(0, 0, 0, 0) , 1, 0, false, resetScrollAndPageScale);
346 this._applyUserAgent(""); 359 this._applyUserAgent("");
347 this._applyTouch(false, false); 360 this._applyTouch(false, false);
348 this._applyScreenOrientation(""); 361 this._applyScreenOrientation("");
349 } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) { 362 } else if (this._type === WebInspector.DeviceModeModel.Type.Responsive) {
350 var screenWidth = this._widthSetting.get() || this._preferredSize.wi dth / (this._scaleSetting.get() || 1); 363 var screenWidth = this._widthSetting.get() || this._preferredSize.wi dth / (this._scaleSetting.get() || 1);
351 var screenHeight = this._heightSetting.get() || this._preferredSize. height / (this._scaleSetting.get() || 1); 364 var screenHeight = this._heightSetting.get() || this._preferredSize. height / (this._scaleSetting.get() || 1);
352 var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel. UA.Mobile; 365 var mobile = this._uaSetting.get() === WebInspector.DeviceModeModel. UA.Mobile;
353 var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel ._defaultMobileScaleFactor : 0; 366 var defaultDeviceScaleFactor = mobile ? WebInspector.DeviceModeModel ._defaultMobileScaleFactor : 0;
367 this._calculateFitScale(this._widthSetting.get(), this._heightSettin g.get());
354 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new In sets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale); 368 this._applyDeviceMetrics(new Size(screenWidth, screenHeight), new In sets(0, 0, 0, 0), this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobile, resetScrollAndPageScale);
355 this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultM obileUserAgent : ""); 369 this._applyUserAgent(mobile ? WebInspector.DeviceModeModel._defaultM obileUserAgent : "");
356 this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeMo del.UA.Desktop, mobile); 370 this._applyTouch(this._uaSetting.get() !== WebInspector.DeviceModeMo del.UA.Desktop, mobile);
357 this._applyScreenOrientation(screenHeight >= screenWidth ? "portrait Primary" : "landscapePrimary"); 371 this._applyScreenOrientation(screenHeight >= screenWidth ? "portrait Primary" : "landscapePrimary");
358 } 372 }
359 this._updateCallback.call(null); 373 this._updateCallback.call(null);
360 }, 374 },
361 375
362 /** 376 /**
363 * @param {number} screenWidth 377 * @param {number} screenWidth
364 * @param {number} screenHeight 378 * @param {number} screenHeight
365 * @return {number}
366 */ 379 */
367 _calculateFitScale: function(screenWidth, screenHeight) 380 _calculateFitScale: function(screenWidth, screenHeight)
368 { 381 {
369 var scale = Math.min(screenWidth ? this._preferredSize.width / screenWid th: 1, screenHeight ? this._preferredSize.height / screenHeight : 1); 382 var scale = Math.min(screenWidth ? this._preferredSize.width / screenWid th: 1, screenHeight ? this._preferredSize.height / screenHeight : 1);
370 return Math.min(scale, 1); 383 this._fitScale = Math.min(scale, 1);
371 }, 384 },
372 385
373 /** 386 /**
374 * @param {string} userAgent 387 * @param {string} userAgent
375 */ 388 */
376 _applyUserAgent: function(userAgent) 389 _applyUserAgent: function(userAgent)
377 { 390 {
378 WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent); 391 WebInspector.multitargetNetworkManager.setUserAgentOverride(userAgent);
379 }, 392 },
380 393
381 /** 394 /**
382 * @param {!Size} screenSize 395 * @param {!Size} screenSize
383 * @param {!Insets} insets 396 * @param {!Insets} insets
384 * @param {number} scale 397 * @param {number} scale
385 * @param {number} deviceScaleFactor 398 * @param {number} deviceScaleFactor
386 * @param {boolean} mobile 399 * @param {boolean} mobile
387 * @param {boolean} resetScrollAndPageScale 400 * @param {boolean} resetScrollAndPageScale
388 */ 401 */
389 _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor, mobile, resetScrollAndPageScale) 402 _applyDeviceMetrics: function(screenSize, insets, scale, deviceScaleFactor, mobile, resetScrollAndPageScale)
390 { 403 {
391 screenSize.width = Math.max(1, Math.floor(screenSize.width)); 404 screenSize.width = Math.max(1, Math.floor(screenSize.width));
392 screenSize.height = Math.max(1, Math.floor(screenSize.height)); 405 screenSize.height = Math.max(1, Math.floor(screenSize.height));
393 this._fitScale = this._calculateFitScale(screenSize.width, screenSize.he ight);
394 406
395 var pageWidth = screenSize.width - insets.left - insets.right; 407 var pageWidth = screenSize.width - insets.left - insets.right;
396 var pageHeight = screenSize.height - insets.top - insets.bottom; 408 var pageHeight = screenSize.height - insets.top - insets.bottom;
397 var positionX = insets.left; 409 var positionX = insets.left;
398 var positionY = insets.top; 410 var positionY = insets.top;
399 411
400 this._appliedDeviceSize = screenSize; 412 this._appliedDeviceSize = screenSize;
401 this._screenRect = new WebInspector.Rect( 413 this._screenRect = new WebInspector.Rect(
402 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), 414 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2),
403 0, 415 0,
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
501 if (!this._target || orientation === this._screenOrientation) 513 if (!this._target || orientation === this._screenOrientation)
502 return; 514 return;
503 515
504 this._screenOrientation = orientation; 516 this._screenOrientation = orientation;
505 if (!this._screenOrientation) 517 if (!this._screenOrientation)
506 this._target.screenOrientationAgent().clearScreenOrientationOverride (); 518 this._target.screenOrientationAgent().clearScreenOrientationOverride ();
507 else 519 else
508 this._target.screenOrientationAgent().setScreenOrientationOverride(t his._screenOrientation === "landscapePrimary" ? 90 : 0, /** @type {!ScreenOrient ationAgent.OrientationType} */ (this._screenOrientation)); 520 this._target.screenOrientationAgent().setScreenOrientationOverride(t his._screenOrientation === "landscapePrimary" ? 90 : 0, /** @type {!ScreenOrient ationAgent.OrientationType} */ (this._screenOrientation));
509 } 521 }
510 } 522 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698