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 1581763002: Revert of [DevTools] 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
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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)
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
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
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
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
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
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 }
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/devtools/front_end/emulation/DeviceModeView.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698