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 2612913002: DevTools: Add feature to capture full-height screenshots (Closed)
Patch Set: DevTools: Add feature to capture full-height screenshots Created 3 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 * @implements {SDK.TargetManager.Observer} 5 * @implements {SDK.TargetManager.Observer}
6 * @unrestricted 6 * @unrestricted
7 */ 7 */
8 Emulation.DeviceModeModel = class { 8 Emulation.DeviceModeModel = class {
9 /** 9 /**
10 * @param {function()} updateCallback 10 * @param {function()} updateCallback
(...skipping 255 matching lines...) Expand 10 before | Expand all | Expand 10 after
266 } 266 }
267 267
268 /** 268 /**
269 * @return {boolean} 269 * @return {boolean}
270 */ 270 */
271 isFullHeight() { 271 isFullHeight() {
272 return !this._heightSetting.get(); 272 return !this._heightSetting.get();
273 } 273 }
274 274
275 /** 275 /**
276 * @return {boolean}
277 */
278 isMobile() {
dgozman 2017/01/13 23:38:48 _isMobile
ahmetemirercin 2017/01/16 17:52:01 Done.
279 switch (this._type) {
280 case Emulation.DeviceModeModel.Type.Device:
281 return this._device.mobile();
282
283 case Emulation.DeviceModeModel.Type.None:
284 return false;
285
286 case Emulation.DeviceModeModel.Type.Responsive:
287 return this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
288 this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch ;
289 }
290 }
291
292 /**
276 * @return {!Common.Setting} 293 * @return {!Common.Setting}
277 */ 294 */
278 scaleSetting() { 295 scaleSetting() {
279 return this._scaleSetting; 296 return this._scaleSetting;
280 } 297 }
281 298
282 /** 299 /**
283 * @return {!Common.Setting} 300 * @return {!Common.Setting}
284 */ 301 */
285 uaSetting() { 302 uaSetting() {
(...skipping 105 matching lines...) Expand 10 before | Expand all | Expand 10 after
391 return new Insets(0, 0, 0, 0); 408 return new Insets(0, 0, 0, 0);
392 return this._mode.insets; 409 return this._mode.insets;
393 } 410 }
394 411
395 /** 412 /**
396 * @param {boolean} resetPageScaleFactor 413 * @param {boolean} resetPageScaleFactor
397 */ 414 */
398 _calculateAndEmulate(resetPageScaleFactor) { 415 _calculateAndEmulate(resetPageScaleFactor) {
399 if (!this._target) 416 if (!this._target)
400 this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageSc aleFactor); 417 this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageSc aleFactor);
401 418 var mobile = this.isMobile();
402 if (this._type === Emulation.DeviceModeModel.Type.Device) { 419 if (this._type === Emulation.DeviceModeModel.Type.Device) {
403 var orientation = this._device.orientationByName(this._mode.orientation); 420 var orientation = this._device.orientationByName(this._mode.orientation);
404 var outline = this._currentOutline(); 421 var outline = this._currentOutline();
405 var insets = this._currentInsets(); 422 var insets = this._currentInsets();
406 this._fitScale = this._calculateFitScale(orientation.width, orientation.he ight, outline, insets); 423 this._fitScale = this._calculateFitScale(orientation.width, orientation.he ight, outline, insets);
407 if (this._device.mobile()) { 424 if (mobile) {
408 this._appliedUserAgentType = 425 this._appliedUserAgentType =
409 this._device.touch() ? Emulation.DeviceModeModel.UA.Mobile : Emulati on.DeviceModeModel.UA.MobileNoTouch; 426 this._device.touch() ? Emulation.DeviceModeModel.UA.Mobile : Emulati on.DeviceModeModel.UA.MobileNoTouch;
410 } else { 427 } else {
411 this._appliedUserAgentType = 428 this._appliedUserAgentType =
412 this._device.touch() ? Emulation.DeviceModeModel.UA.DesktopTouch : E mulation.DeviceModeModel.UA.Desktop; 429 this._device.touch() ? Emulation.DeviceModeModel.UA.DesktopTouch : E mulation.DeviceModeModel.UA.Desktop;
413 } 430 }
414 this._applyDeviceMetrics( 431 this._applyDeviceMetrics(
415 new Size(orientation.width, orientation.height), insets, outline, this ._scaleSetting.get(), 432 new Size(orientation.width, orientation.height), insets, outline, this ._scaleSetting.get(),
416 this._device.deviceScaleFactor, this._device.mobile(), 433 this._device.deviceScaleFactor, mobile,
417 this._mode.orientation === Emulation.EmulatedDevice.Horizontal ? 'land scapePrimary' : 'portraitPrimary', 434 this._mode.orientation === Emulation.EmulatedDevice.Horizontal ? 'land scapePrimary' : 'portraitPrimary',
418 resetPageScaleFactor); 435 resetPageScaleFactor);
419 this._applyUserAgent(this._device.userAgent); 436 this._applyUserAgent(this._device.userAgent);
420 this._applyTouch(this._device.touch(), this._device.mobile()); 437 this._applyTouch(this._device.touch(), mobile);
421 } else if (this._type === Emulation.DeviceModeModel.Type.None) { 438 } else if (this._type === Emulation.DeviceModeModel.Type.None) {
422 this._fitScale = this._calculateFitScale(this._availableSize.width, this._ availableSize.height); 439 this._fitScale = this._calculateFitScale(this._availableSize.width, this._ availableSize.height);
423 this._appliedUserAgentType = Emulation.DeviceModeModel.UA.Desktop; 440 this._appliedUserAgentType = Emulation.DeviceModeModel.UA.Desktop;
424 this._applyDeviceMetrics( 441 this._applyDeviceMetrics(
425 this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1 , 0, false, '', resetPageScaleFactor); 442 this._availableSize, new Insets(0, 0, 0, 0), new Insets(0, 0, 0, 0), 1 , 0, mobile, '', resetPageScaleFactor);
426 this._applyUserAgent(''); 443 this._applyUserAgent('');
427 this._applyTouch(false, false); 444 this._applyTouch(false, false);
428 } else if (this._type === Emulation.DeviceModeModel.Type.Responsive) { 445 } else if (this._type === Emulation.DeviceModeModel.Type.Responsive) {
429 var screenWidth = this._widthSetting.get(); 446 var screenWidth = this._widthSetting.get();
430 if (!screenWidth || screenWidth > this._preferredScaledWidth()) 447 if (!screenWidth || screenWidth > this._preferredScaledWidth())
431 screenWidth = this._preferredScaledWidth(); 448 screenWidth = this._preferredScaledWidth();
432 var screenHeight = this._heightSetting.get(); 449 var screenHeight = this._heightSetting.get();
433 if (!screenHeight || screenHeight > this._preferredScaledHeight()) 450 if (!screenHeight || screenHeight > this._preferredScaledHeight())
434 screenHeight = this._preferredScaledHeight(); 451 screenHeight = this._preferredScaledHeight();
435 var mobile = this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
436 this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch;
437 var defaultDeviceScaleFactor = mobile ? Emulation.DeviceModeModel.defaultM obileScaleFactor : 0; 452 var defaultDeviceScaleFactor = mobile ? Emulation.DeviceModeModel.defaultM obileScaleFactor : 0;
438 this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._h eightSetting.get()); 453 this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._h eightSetting.get());
439 this._appliedUserAgentType = this._uaSetting.get(); 454 this._appliedUserAgentType = this._uaSetting.get();
440 this._applyDeviceMetrics( 455 this._applyDeviceMetrics(
441 new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Inset s(0, 0, 0, 0), this._scaleSetting.get(), 456 new Size(screenWidth, screenHeight), new Insets(0, 0, 0, 0), new Inset s(0, 0, 0, 0), this._scaleSetting.get(),
442 this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobi le, 457 this._deviceScaleFactorSetting.get() || defaultDeviceScaleFactor, mobi le,
443 screenHeight >= screenWidth ? 'portraitPrimary' : 'landscapePrimary', resetPageScaleFactor); 458 screenHeight >= screenWidth ? 'portraitPrimary' : 'landscapePrimary', resetPageScaleFactor);
444 this._applyUserAgent(mobile ? Emulation.DeviceModeModel._defaultMobileUser Agent : ''); 459 this._applyUserAgent(mobile ? Emulation.DeviceModeModel._defaultMobileUser Agent : '');
445 this._applyTouch( 460 this._applyTouch(
446 this._uaSetting.get() === Emulation.DeviceModeModel.UA.DesktopTouch || 461 this._uaSetting.get() === Emulation.DeviceModeModel.UA.DesktopTouch ||
(...skipping 69 matching lines...) Expand 10 before | Expand all | Expand 10 after
516 scale, 531 scale,
517 deviceScaleFactor, 532 deviceScaleFactor,
518 mobile, 533 mobile,
519 screenOrientation, 534 screenOrientation,
520 resetPageScaleFactor) { 535 resetPageScaleFactor) {
521 screenSize.width = Math.max(1, Math.floor(screenSize.width)); 536 screenSize.width = Math.max(1, Math.floor(screenSize.width));
522 screenSize.height = Math.max(1, Math.floor(screenSize.height)); 537 screenSize.height = Math.max(1, Math.floor(screenSize.height));
523 538
524 var pageWidth = screenSize.width - insets.left - insets.right; 539 var pageWidth = screenSize.width - insets.left - insets.right;
525 var pageHeight = screenSize.height - insets.top - insets.bottom; 540 var pageHeight = screenSize.height - insets.top - insets.bottom;
541 this._emulatedPageSize = new Size(Math.floor(pageWidth * scale), Math.floor( pageHeight * scale));
526 542
527 var positionX = insets.left; 543 var positionX = insets.left;
528 var positionY = insets.top; 544 var positionY = insets.top;
529 var screenOrientationAngle = screenOrientation === 'landscapePrimary' ? 90 : 0; 545 var screenOrientationAngle = screenOrientation === 'landscapePrimary' ? 90 : 0;
530 546
531 this._appliedDeviceSize = screenSize; 547 this._appliedDeviceSize = screenSize;
532 this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRati o; 548 this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRati o;
533 this._screenRect = new Common.Rect( 549 this._screenRect = new Common.Rect(
534 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), outline.top * scale, 550 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), outline.top * scale,
535 screenSize.width * scale, screenSize.height * scale); 551 screenSize.width * scale, screenSize.height * scale);
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
589 if (screenOrientation) 605 if (screenOrientation)
590 params.screenOrientation = {type: screenOrientation, angle: screenOrie ntationAngle}; 606 params.screenOrientation = {type: screenOrientation, angle: screenOrie ntationAngle};
591 setDevicePromise = this._target.emulationAgent().invoke_setDeviceMetrics Override( 607 setDevicePromise = this._target.emulationAgent().invoke_setDeviceMetrics Override(
592 params, this._deviceMetricsOverrideAppliedForTest.bind(this)); 608 params, this._deviceMetricsOverrideAppliedForTest.bind(this));
593 } 609 }
594 allPromises.push(setDevicePromise); 610 allPromises.push(setDevicePromise);
595 return Promise.all(allPromises); 611 return Promise.all(allPromises);
596 } 612 }
597 } 613 }
598 614
615 prepareForFullHeightScreenshot() {
616 return this._target.pageAgent().getLayoutMetrics((err, layoutViewport, visua lViewport, contentSize) => {
617 var promises = [];
618 var scaledScrollHeight = Math.floor(contentSize.height * visualViewport.sc ale * this._scale);
619 promises.push(this._target.emulationAgent().forceViewport(0, 0, visualView port.scale));
620 promises.push(this._target.emulationAgent().setDeviceMetricsOverride(
dgozman 2017/01/13 23:38:48 nit: let's use params and invoke_setDeviceMetrrics
ahmetemirercin 2017/01/16 17:52:01 Done.
621 0, 0, this._appliedDeviceScaleFactor, this.isMobile(), false, this._sc ale));
622 promises.push(this._target.emulationAgent().setVisibleSize(this._emulatedP ageSize.width, scaledScrollHeight));
623 return Promise.all(promises);
624 });
625 }
626
627 resetVisibleSize() {
628 this._target.emulationAgent().setVisibleSize(this._emulatedPageSize.width, t his._emulatedPageSize.height);
629 }
630
631 resetViewport() {
632 this._target.emulationAgent().resetViewport();
633 }
634
599 _deviceMetricsOverrideAppliedForTest() { 635 _deviceMetricsOverrideAppliedForTest() {
600 // Used for sniffing in tests. 636 // Used for sniffing in tests.
601 } 637 }
602 638
603 /** 639 /**
604 * @param {boolean} touchEnabled 640 * @param {boolean} touchEnabled
605 * @param {boolean} mobile 641 * @param {boolean} mobile
606 */ 642 */
607 _applyTouch(touchEnabled, mobile) { 643 _applyTouch(touchEnabled, mobile) {
608 Emulation.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mob ile); 644 Emulation.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mob ile);
(...skipping 17 matching lines...) Expand all
626 662
627 Emulation.DeviceModeModel.MinDeviceSize = 50; 663 Emulation.DeviceModeModel.MinDeviceSize = 50;
628 Emulation.DeviceModeModel.MaxDeviceSize = 9999; 664 Emulation.DeviceModeModel.MaxDeviceSize = 9999;
629 665
630 666
631 Emulation.DeviceModeModel._defaultMobileUserAgent = 667 Emulation.DeviceModeModel._defaultMobileUserAgent =
632 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 ( KHTML, like Gecko) Chrome/%s Mobile Safari/537.36'; 668 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 ( KHTML, like Gecko) Chrome/%s Mobile Safari/537.36';
633 Emulation.DeviceModeModel._defaultMobileUserAgent = 669 Emulation.DeviceModeModel._defaultMobileUserAgent =
634 SDK.MultitargetNetworkManager.patchUserAgentWithChromeVersion(Emulation.Devi ceModeModel._defaultMobileUserAgent); 670 SDK.MultitargetNetworkManager.patchUserAgentWithChromeVersion(Emulation.Devi ceModeModel._defaultMobileUserAgent);
635 Emulation.DeviceModeModel.defaultMobileScaleFactor = 2; 671 Emulation.DeviceModeModel.defaultMobileScaleFactor = 2;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698