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

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

Issue 2702113006: [DevTools] Full-size screenshots in device mode. (Closed)
Patch Set: Created 3 years, 10 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() {
279 switch (this._type) {
280 case Emulation.DeviceModeModel.Type.Device:
281 return this._device.mobile();
282 case Emulation.DeviceModeModel.Type.None:
283 return false;
284 case Emulation.DeviceModeModel.Type.Responsive:
285 return this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
286 this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch ;
287 }
288 return false;
289 }
290
291 /**
276 * @return {!Common.Setting} 292 * @return {!Common.Setting}
277 */ 293 */
278 scaleSetting() { 294 scaleSetting() {
279 return this._scaleSetting; 295 return this._scaleSetting;
280 } 296 }
281 297
282 /** 298 /**
283 * @return {!Common.Setting} 299 * @return {!Common.Setting}
284 */ 300 */
285 uaSetting() { 301 uaSetting() {
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after
398 return new UI.Insets(0, 0, 0, 0); 414 return new UI.Insets(0, 0, 0, 0);
399 return this._mode.insets; 415 return this._mode.insets;
400 } 416 }
401 417
402 /** 418 /**
403 * @param {boolean} resetPageScaleFactor 419 * @param {boolean} resetPageScaleFactor
404 */ 420 */
405 _calculateAndEmulate(resetPageScaleFactor) { 421 _calculateAndEmulate(resetPageScaleFactor) {
406 if (!this._target) 422 if (!this._target)
407 this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageSc aleFactor); 423 this._onTargetAvailable = this._calculateAndEmulate.bind(this, resetPageSc aleFactor);
408 424 var mobile = this._isMobile();
409 if (this._type === Emulation.DeviceModeModel.Type.Device) { 425 if (this._type === Emulation.DeviceModeModel.Type.Device) {
410 var orientation = this._device.orientationByName(this._mode.orientation); 426 var orientation = this._device.orientationByName(this._mode.orientation);
411 var outline = this._currentOutline(); 427 var outline = this._currentOutline();
412 var insets = this._currentInsets(); 428 var insets = this._currentInsets();
413 this._fitScale = this._calculateFitScale(orientation.width, orientation.he ight, outline, insets); 429 this._fitScale = this._calculateFitScale(orientation.width, orientation.he ight, outline, insets);
414 if (this._device.mobile()) { 430 if (mobile) {
415 this._appliedUserAgentType = 431 this._appliedUserAgentType =
416 this._device.touch() ? Emulation.DeviceModeModel.UA.Mobile : Emulati on.DeviceModeModel.UA.MobileNoTouch; 432 this._device.touch() ? Emulation.DeviceModeModel.UA.Mobile : Emulati on.DeviceModeModel.UA.MobileNoTouch;
417 } else { 433 } else {
418 this._appliedUserAgentType = 434 this._appliedUserAgentType =
419 this._device.touch() ? Emulation.DeviceModeModel.UA.DesktopTouch : E mulation.DeviceModeModel.UA.Desktop; 435 this._device.touch() ? Emulation.DeviceModeModel.UA.DesktopTouch : E mulation.DeviceModeModel.UA.Desktop;
420 } 436 }
421 this._applyDeviceMetrics( 437 this._applyDeviceMetrics(
422 new UI.Size(orientation.width, orientation.height), insets, outline, t his._scaleSetting.get(), 438 new UI.Size(orientation.width, orientation.height), insets, outline, t his._scaleSetting.get(),
423 this._device.deviceScaleFactor, this._device.mobile(), 439 this._device.deviceScaleFactor, mobile, this._mode.orientation === Emu lation.EmulatedDevice.Horizontal ?
424 this._mode.orientation === Emulation.EmulatedDevice.Horizontal ?
425 Protocol.Emulation.ScreenOrientationType.LandscapePrimary : 440 Protocol.Emulation.ScreenOrientationType.LandscapePrimary :
426 Protocol.Emulation.ScreenOrientationType.PortraitPrimary, 441 Protocol.Emulation.ScreenOrientationType.PortraitPrimary,
427 resetPageScaleFactor); 442 resetPageScaleFactor);
428 this._applyUserAgent(this._device.userAgent); 443 this._applyUserAgent(this._device.userAgent);
429 this._applyTouch(this._device.touch(), this._device.mobile()); 444 this._applyTouch(this._device.touch(), mobile);
430 } else if (this._type === Emulation.DeviceModeModel.Type.None) { 445 } else if (this._type === Emulation.DeviceModeModel.Type.None) {
431 this._fitScale = this._calculateFitScale(this._availableSize.width, this._ availableSize.height); 446 this._fitScale = this._calculateFitScale(this._availableSize.width, this._ availableSize.height);
432 this._appliedUserAgentType = Emulation.DeviceModeModel.UA.Desktop; 447 this._appliedUserAgentType = Emulation.DeviceModeModel.UA.Desktop;
433 this._applyDeviceMetrics( 448 this._applyDeviceMetrics(
434 this._availableSize, new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0), 1, 0, false, null, 449 this._availableSize, new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0), 1, 0, mobile, null,
435 resetPageScaleFactor); 450 resetPageScaleFactor);
436 this._applyUserAgent(''); 451 this._applyUserAgent('');
437 this._applyTouch(false, false); 452 this._applyTouch(false, false);
438 } else if (this._type === Emulation.DeviceModeModel.Type.Responsive) { 453 } else if (this._type === Emulation.DeviceModeModel.Type.Responsive) {
439 var screenWidth = this._widthSetting.get(); 454 var screenWidth = this._widthSetting.get();
440 if (!screenWidth || screenWidth > this._preferredScaledWidth()) 455 if (!screenWidth || screenWidth > this._preferredScaledWidth())
441 screenWidth = this._preferredScaledWidth(); 456 screenWidth = this._preferredScaledWidth();
442 var screenHeight = this._heightSetting.get(); 457 var screenHeight = this._heightSetting.get();
443 if (!screenHeight || screenHeight > this._preferredScaledHeight()) 458 if (!screenHeight || screenHeight > this._preferredScaledHeight())
444 screenHeight = this._preferredScaledHeight(); 459 screenHeight = this._preferredScaledHeight();
445 var mobile = this._uaSetting.get() === Emulation.DeviceModeModel.UA.Mobile ||
446 this._uaSetting.get() === Emulation.DeviceModeModel.UA.MobileNoTouch;
447 var defaultDeviceScaleFactor = mobile ? Emulation.DeviceModeModel.defaultM obileScaleFactor : 0; 460 var defaultDeviceScaleFactor = mobile ? Emulation.DeviceModeModel.defaultM obileScaleFactor : 0;
448 this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._h eightSetting.get()); 461 this._fitScale = this._calculateFitScale(this._widthSetting.get(), this._h eightSetting.get());
449 this._appliedUserAgentType = this._uaSetting.get(); 462 this._appliedUserAgentType = this._uaSetting.get();
450 this._applyDeviceMetrics( 463 this._applyDeviceMetrics(
451 new UI.Size(screenWidth, screenHeight), new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0), 464 new UI.Size(screenWidth, screenHeight), new UI.Insets(0, 0, 0, 0), new UI.Insets(0, 0, 0, 0),
452 this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defa ultDeviceScaleFactor, mobile, 465 this._scaleSetting.get(), this._deviceScaleFactorSetting.get() || defa ultDeviceScaleFactor, mobile,
453 screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType .PortraitPrimary : 466 screenHeight >= screenWidth ? Protocol.Emulation.ScreenOrientationType .PortraitPrimary :
454 Protocol.Emulation.ScreenOrientationType .LandscapePrimary, 467 Protocol.Emulation.ScreenOrientationType .LandscapePrimary,
455 resetPageScaleFactor); 468 resetPageScaleFactor);
456 this._applyUserAgent(mobile ? Emulation.DeviceModeModel._defaultMobileUser Agent : ''); 469 this._applyUserAgent(mobile ? Emulation.DeviceModeModel._defaultMobileUser Agent : '');
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after
528 scale, 541 scale,
529 deviceScaleFactor, 542 deviceScaleFactor,
530 mobile, 543 mobile,
531 screenOrientation, 544 screenOrientation,
532 resetPageScaleFactor) { 545 resetPageScaleFactor) {
533 screenSize.width = Math.max(1, Math.floor(screenSize.width)); 546 screenSize.width = Math.max(1, Math.floor(screenSize.width));
534 screenSize.height = Math.max(1, Math.floor(screenSize.height)); 547 screenSize.height = Math.max(1, Math.floor(screenSize.height));
535 548
536 var pageWidth = screenSize.width - insets.left - insets.right; 549 var pageWidth = screenSize.width - insets.left - insets.right;
537 var pageHeight = screenSize.height - insets.top - insets.bottom; 550 var pageHeight = screenSize.height - insets.top - insets.bottom;
551 this._emulatedPageSize = new UI.Size(Math.floor(pageWidth * scale), Math.flo or(pageHeight * scale));
538 552
539 var positionX = insets.left; 553 var positionX = insets.left;
540 var positionY = insets.top; 554 var positionY = insets.top;
541 var screenOrientationAngle = 555 var screenOrientationAngle =
542 screenOrientation === Protocol.Emulation.ScreenOrientationType.Landscape Primary ? 90 : 0; 556 screenOrientation === Protocol.Emulation.ScreenOrientationType.Landscape Primary ? 90 : 0;
543 557
544 this._appliedDeviceSize = screenSize; 558 this._appliedDeviceSize = screenSize;
545 this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRati o; 559 this._appliedDeviceScaleFactor = deviceScaleFactor || window.devicePixelRati o;
546 this._screenRect = new UI.Rect( 560 this._screenRect = new UI.Rect(
547 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), outline.top * scale, 561 Math.max(0, (this._availableSize.width - screenSize.width * scale) / 2), outline.top * scale,
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
602 if (screenOrientation) 616 if (screenOrientation)
603 params.screenOrientation = {type: screenOrientation, angle: screenOrie ntationAngle}; 617 params.screenOrientation = {type: screenOrientation, angle: screenOrie ntationAngle};
604 setDevicePromise = this._target.emulationAgent().invoke_setDeviceMetrics Override( 618 setDevicePromise = this._target.emulationAgent().invoke_setDeviceMetrics Override(
605 params, this._deviceMetricsOverrideAppliedForTest.bind(this)); 619 params, this._deviceMetricsOverrideAppliedForTest.bind(this));
606 } 620 }
607 allPromises.push(setDevicePromise); 621 allPromises.push(setDevicePromise);
608 return Promise.all(allPromises); 622 return Promise.all(allPromises);
609 } 623 }
610 } 624 }
611 625
626 /**
627 * @param {function(?string)} callback
628 */
629 captureFullSizeScreenshot(callback) {
630 var screenCaptureModel = this._target ? this._target.model(SDK.ScreenCapture Model) : null;
631 if (!screenCaptureModel) {
632 callback(null);
633 return;
634 }
635
636 screenCaptureModel.fetchContentSize().then(contentSize => {
637 if (!contentSize) {
638 callback(null);
639 return;
640 }
641
642 var scaledPageSize = new UI.Rect(0, 0, contentSize.width, contentSize.heig ht).scale(this._scale);
643 var promises = [];
644 promises.push(this._target.emulationAgent().forceViewport(0, 0, 1));
645 promises.push(this._target.emulationAgent().invoke_setDeviceMetricsOverrid e({
646 width: 0,
647 height: 0,
648 deviceScaleFactor: this._appliedDeviceScaleFactor,
649 mobile: this._isMobile(),
650 fitWindow: false,
651 scale: this._scale,
652 }));
653 promises.push(this._target.emulationAgent().setVisibleSize(
654 Math.floor(scaledPageSize.width), Math.floor(scaledPageSize.height)));
655 Promise.all(promises).then(() => screenCaptureModel.captureScreenshot('png ', 100)).then(content => {
656 this._target.emulationAgent().setVisibleSize(this._emulatedPageSize.widt h, this._emulatedPageSize.height);
657 this._target.emulationAgent().resetViewport();
658 callback(content);
659 });
660 });
661 }
662
612 _deviceMetricsOverrideAppliedForTest() { 663 _deviceMetricsOverrideAppliedForTest() {
613 // Used for sniffing in tests. 664 // Used for sniffing in tests.
614 } 665 }
615 666
616 /** 667 /**
617 * @param {boolean} touchEnabled 668 * @param {boolean} touchEnabled
618 * @param {boolean} mobile 669 * @param {boolean} mobile
619 */ 670 */
620 _applyTouch(touchEnabled, mobile) { 671 _applyTouch(touchEnabled, mobile) {
621 Emulation.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mob ile); 672 Emulation.MultitargetTouchModel.instance().setTouchEnabled(touchEnabled, mob ile);
(...skipping 17 matching lines...) Expand all
639 690
640 Emulation.DeviceModeModel.MinDeviceSize = 50; 691 Emulation.DeviceModeModel.MinDeviceSize = 50;
641 Emulation.DeviceModeModel.MaxDeviceSize = 9999; 692 Emulation.DeviceModeModel.MaxDeviceSize = 9999;
642 693
643 694
644 Emulation.DeviceModeModel._defaultMobileUserAgent = 695 Emulation.DeviceModeModel._defaultMobileUserAgent =
645 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 ( KHTML, like Gecko) Chrome/%s Mobile Safari/537.36'; 696 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 ( KHTML, like Gecko) Chrome/%s Mobile Safari/537.36';
646 Emulation.DeviceModeModel._defaultMobileUserAgent = 697 Emulation.DeviceModeModel._defaultMobileUserAgent =
647 SDK.MultitargetNetworkManager.patchUserAgentWithChromeVersion(Emulation.Devi ceModeModel._defaultMobileUserAgent); 698 SDK.MultitargetNetworkManager.patchUserAgentWithChromeVersion(Emulation.Devi ceModeModel._defaultMobileUserAgent);
648 Emulation.DeviceModeModel.defaultMobileScaleFactor = 2; 699 Emulation.DeviceModeModel.defaultMobileScaleFactor = 2;
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698