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

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

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

Powered by Google App Engine
This is Rietveld 408576698