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

Side by Side Diff: Source/devtools/front_end/sdk/OverridesSupport.js

Issue 341543003: DevTools: make responsive design a master switch for emulation. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 6 years, 6 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 | Annotate | Revision Log
« no previous file with comments | « Source/devtools/front_end/overrides.css ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * Copyright (C) 2012 Google Inc. All rights reserved. 2 * Copyright (C) 2012 Google Inc. All rights reserved.
3 * 3 *
4 * Redistribution and use in source and binary forms, with or without 4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are 5 * modification, are permitted provided that the following conditions are
6 * met: 6 * met:
7 * 7 *
8 * * Redistributions of source code must retain the above copyright 8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer. 9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above 10 * * Redistributions in binary form must reproduce the above
(...skipping 462 matching lines...) Expand 10 before | Expand all | Expand 10 after
473 ["320 Kbps", 320 * 1024 / 8], 473 ["320 Kbps", 320 * 1024 / 8],
474 ["640 Kbps (3G)", 640 * 1024 / 8], 474 ["640 Kbps (3G)", 640 * 1024 / 8],
475 ["1 Mbps", 1024 * 1024 / 8], 475 ["1 Mbps", 1024 * 1024 / 8],
476 ["2 Mbps (802.11b)", 2048 * 1024 / 8] 476 ["2 Mbps (802.11b)", 2048 * 1024 / 8]
477 ]; 477 ];
478 478
479 WebInspector.OverridesSupport.prototype = { 479 WebInspector.OverridesSupport.prototype = {
480 /** 480 /**
481 * @return {boolean} 481 * @return {boolean}
482 */ 482 */
483 responsiveDesignAvailable: function() 483 _responsiveDesignEnabledOrUnavailable: function()
484 { 484 {
485 return this._responsiveDesignAvailable; 485 return !this._responsiveDesignAvailable || WebInspector.settings.respons iveDesignEnabled.get();
486 }, 486 },
487 487
488 /** 488 /**
489 * @param {?WebInspector.OverridesSupport.PageResizer} pageResizer 489 * @param {?WebInspector.OverridesSupport.PageResizer} pageResizer
490 */ 490 */
491 setPageResizer: function(pageResizer) 491 setPageResizer: function(pageResizer)
492 { 492 {
493 if (pageResizer === this._pageResizer) 493 if (pageResizer === this._pageResizer)
494 return; 494 return;
495 495
(...skipping 89 matching lines...) Expand 10 before | Expand all | Expand 10 after
585 this._addEmulateDeviceListener(this._deviceMetricsChanged); 585 this._addEmulateDeviceListener(this._deviceMetricsChanged);
586 this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this); 586 this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
587 this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this); 587 this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
588 this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsCha nged, this); 588 this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsCha nged, this);
589 this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetrics Changed, this); 589 this.settings.deviceTextAutosizing.addChangeListener(this._deviceMetrics Changed, this);
590 this.settings.emulateViewport.addChangeListener(this._deviceMetricsChang ed, this); 590 this.settings.emulateViewport.addChangeListener(this._deviceMetricsChang ed, this);
591 this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChang ed, this); 591 this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChang ed, this);
592 592
593 this.settings.overrideGeolocation.addChangeListener(this._geolocationPos itionChanged, this); 593 this.settings.overrideGeolocation.addChangeListener(this._geolocationPos itionChanged, this);
594 this.settings.geolocationOverride.addChangeListener(this._geolocationPos itionChanged, this); 594 this.settings.geolocationOverride.addChangeListener(this._geolocationPos itionChanged, this);
595 WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._ge olocationPositionChanged, this);
595 596
596 this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOr ientationChanged, this); 597 this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOr ientationChanged, this);
597 this.settings.deviceOrientationOverride.addChangeListener(this._deviceOr ientationChanged, this); 598 this.settings.deviceOrientationOverride.addChangeListener(this._deviceOr ientationChanged, this);
599 WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._de viceOrientationChanged, this);
598 600
599 this._addEmulateDeviceListener(this._emulateTouchEventsChanged); 601 this._addEmulateDeviceListener(this._emulateTouchEventsChanged);
600 this.settings.deviceTouch.addChangeListener(this._emulateTouchEventsChan ged, this); 602 this.settings.deviceTouch.addChangeListener(this._emulateTouchEventsChan ged, this);
601 this.settings.sensorsTouch.addChangeListener(this._emulateTouchEventsCha nged, this); 603 this.settings.sensorsTouch.addChangeListener(this._emulateTouchEventsCha nged, this);
602 604
603 this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this); 605 this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
604 this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this); 606 this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
607 WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._cs sMediaChanged, this);
605 608
606 this.settings.emulateNetworkConditions.addChangeListener(this._networkCo nditionsChanged, this); 609 if (WebInspector.experimentsSettings.networkConditions.isEnabled()) {
607 this.settings.networkConditionsDomains.addChangeListener(this._networkCo nditionsChanged, this); 610 this.settings.emulateNetworkConditions.addChangeListener(this._netwo rkConditionsChanged, this);
608 this.settings.networkConditionsThroughput.addChangeListener(this._networ kConditionsChanged, this); 611 this.settings.networkConditionsDomains.addChangeListener(this._netwo rkConditionsChanged, this);
612 this.settings.networkConditionsThroughput.addChangeListener(this._ne tworkConditionsChanged, this);
613 WebInspector.settings.responsiveDesignEnabled.addChangeListener(this ._networkConditionsChanged, this);
614 }
609 615
610 WebInspector.settings.showMetricsRulers.addChangeListener(this._showRule rsChanged, this); 616 WebInspector.settings.showMetricsRulers.addChangeListener(this._showRule rsChanged, this);
611 617
612 if (this.settings.overrideDeviceOrientation.get()) 618 if (this.settings.overrideDeviceOrientation.get())
613 this._deviceOrientationChanged(); 619 this._deviceOrientationChanged();
614 620
615 if (this.settings.overrideGeolocation.get()) 621 if (this.settings.overrideGeolocation.get())
616 this._geolocationPositionChanged(); 622 this._geolocationPositionChanged();
617 623
618 if (this.isTouchEmulationEnabled()) 624 if (this.isTouchEmulationEnabled())
619 this._emulateTouchEventsChanged(); 625 this._emulateTouchEventsChanged();
620 626
621 if (this.settings.overrideCSSMedia.get()) 627 if (this.settings.overrideCSSMedia.get())
622 this._cssMediaChanged(); 628 this._cssMediaChanged();
623 629
624 if (this.settings.emulateDevice.get()) 630 if (this.settings.emulateDevice.get())
625 this._deviceMetricsChanged(); 631 this._deviceMetricsChanged();
626 632
627 if (this.userAgentOverride()) 633 if (this.userAgentOverride())
628 this._userAgentChanged(); 634 this._userAgentChanged();
629 635
630 if (this.settings.emulateNetworkConditions.get()) 636 if (WebInspector.experimentsSettings.networkConditions.isEnabled() && th is.settings.emulateNetworkConditions.get())
631 this._networkConditionsChanged(); 637 this._networkConditionsChanged();
632 638
633 this._showRulersChanged(); 639 this._showRulersChanged();
634 }, 640 },
635 641
636 /** 642 /**
637 * @param {function(this:WebInspector.OverridesSupport)} listener 643 * @param {function(this:WebInspector.OverridesSupport)} listener
638 */ 644 */
639 _addEmulateDeviceListener: function(listener) 645 _addEmulateDeviceListener: function(listener)
640 { 646 {
641 this.settings.emulateDevice.addChangeListener(listener, this); 647 this.settings.emulateDevice.addChangeListener(listener, this);
642 WebInspector.settings.responsiveDesign.enabled.addChangeListener(listene r, this); 648 WebInspector.settings.responsiveDesignEnabled.addChangeListener(listener , this);
643 }, 649 },
644 650
645 _userAgentChanged: function() 651 _userAgentChanged: function()
646 { 652 {
647 if (this._userAgentChangedListenerMuted) 653 if (this._userAgentChangedListenerMuted)
648 return; 654 return;
649 var userAgent = this.userAgentOverride(); 655 var userAgent = this.userAgentOverride();
650 NetworkAgent.setUserAgentOverride(userAgent); 656 NetworkAgent.setUserAgentOverride(userAgent);
651 if (this._userAgent !== userAgent) 657 if (this._userAgent !== userAgent)
652 this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering." )); 658 this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering." ));
(...skipping 20 matching lines...) Expand all
673 this.settings.deviceHeight.set(height); 679 this.settings.deviceHeight.set(height);
674 } 680 }
675 }, 681 },
676 682
677 _deviceMetricsChanged: function() 683 _deviceMetricsChanged: function()
678 { 684 {
679 this._showRulersChanged(); 685 this._showRulersChanged();
680 686
681 if (this._deviceMetricsChangedListenerMuted) 687 if (this._deviceMetricsChangedListenerMuted)
682 return; 688 return;
683 var responsiveDesignAvailableAndDisabled = this._responsiveDesignAvailab le && (!WebInspector.settings.responsiveDesign.enabled.get() || !this._pageResiz er);
684 var emulateDevice = this.settings.emulateDevice.get(); 689 var emulateDevice = this.settings.emulateDevice.get();
685 if (responsiveDesignAvailableAndDisabled || !emulateDevice) { 690 if (!this._responsiveDesignEnabledOrUnavailable() || !emulateDevice) {
686 this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bin d(this)); 691 this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bin d(this));
687 if (this._pageResizer && !emulateDevice) 692 if (this._pageResizer && !emulateDevice)
688 this._pageResizer.update(0, 0, 0); 693 this._pageResizer.update(0, 0, 0);
689 return; 694 return;
690 } 695 }
691 696
692 var dipWidth = emulateDevice ? this.settings.deviceWidth.get() : 0; 697 var dipWidth = emulateDevice ? this.settings.deviceWidth.get() : 0;
693 var dipHeight = emulateDevice ? this.settings.deviceHeight.get() : 0; 698 var dipHeight = emulateDevice ? this.settings.deviceHeight.get() : 0;
694 699
695 // Disable override without checks. 700 // Disable override without checks.
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
758 } 763 }
759 }, 764 },
760 765
761 _deviceMetricsOverrideAppliedForTest: function() 766 _deviceMetricsOverrideAppliedForTest: function()
762 { 767 {
763 // Used for sniffing in tests. 768 // Used for sniffing in tests.
764 }, 769 },
765 770
766 _geolocationPositionChanged: function() 771 _geolocationPositionChanged: function()
767 { 772 {
768 if (!this.settings.overrideGeolocation.get()) { 773 if (!this._responsiveDesignEnabledOrUnavailable() || !this.settings.over rideGeolocation.get()) {
769 GeolocationAgent.clearGeolocationOverride(); 774 GeolocationAgent.clearGeolocationOverride();
770 return; 775 return;
771 } 776 }
772 var geolocation = WebInspector.OverridesSupport.GeolocationPosition.pars eSetting(this.settings.geolocationOverride.get()); 777 var geolocation = WebInspector.OverridesSupport.GeolocationPosition.pars eSetting(this.settings.geolocationOverride.get());
773 if (geolocation.error) 778 if (geolocation.error)
774 GeolocationAgent.setGeolocationOverride(); 779 GeolocationAgent.setGeolocationOverride();
775 else 780 else
776 GeolocationAgent.setGeolocationOverride(geolocation.latitude, geoloc ation.longitude, 150); 781 GeolocationAgent.setGeolocationOverride(geolocation.latitude, geoloc ation.longitude, 150);
777 this.maybeHasActiveOverridesChanged(); 782 this.maybeHasActiveOverridesChanged();
778 }, 783 },
779 784
780 _deviceOrientationChanged: function() 785 _deviceOrientationChanged: function()
781 { 786 {
782 if (!this.settings.overrideDeviceOrientation.get()) { 787 if (!this._responsiveDesignEnabledOrUnavailable() || !this.settings.over rideDeviceOrientation.get()) {
783 PageAgent.clearDeviceOrientationOverride(); 788 PageAgent.clearDeviceOrientationOverride();
784 return; 789 return;
785 } 790 }
786 791
787 var deviceOrientation = WebInspector.OverridesSupport.DeviceOrientation. parseSetting(this.settings.deviceOrientationOverride.get()); 792 var deviceOrientation = WebInspector.OverridesSupport.DeviceOrientation. parseSetting(this.settings.deviceOrientationOverride.get());
788 PageAgent.setDeviceOrientationOverride(deviceOrientation.alpha, deviceOr ientation.beta, deviceOrientation.gamma); 793 PageAgent.setDeviceOrientationOverride(deviceOrientation.alpha, deviceOr ientation.beta, deviceOrientation.gamma);
789 this.maybeHasActiveOverridesChanged(); 794 this.maybeHasActiveOverridesChanged();
790 }, 795 },
791 796
792 _emulateTouchEventsChanged: function() 797 _emulateTouchEventsChanged: function()
793 { 798 {
794 var emulateTouch = this.isTouchEmulationEnabled(); 799 var emulateTouch = this.isTouchEmulationEnabled();
795 var targets = WebInspector.targetManager.targets(); 800 var targets = WebInspector.targetManager.targets();
796 for (var i = 0; i < targets.length; ++i) 801 for (var i = 0; i < targets.length; ++i)
797 targets[i].domModel.emulateTouchEventObjects(emulateTouch); 802 targets[i].domModel.emulateTouchEventObjects(emulateTouch);
798 this.maybeHasActiveOverridesChanged(); 803 this.maybeHasActiveOverridesChanged();
799 }, 804 },
800 805
801 _cssMediaChanged: function() 806 _cssMediaChanged: function()
802 { 807 {
803 if (this.isInspectingDevice() && this.settings.overrideCSSMedia.get()) 808 if (this.isInspectingDevice() && this.settings.overrideCSSMedia.get())
804 return; 809 return;
805 810
806 PageAgent.setEmulatedMedia(this.settings.overrideCSSMedia.get() ? this.s ettings.emulatedCSSMedia.get() : ""); 811 PageAgent.setEmulatedMedia(this._responsiveDesignEnabledOrUnavailable() && this.settings.overrideCSSMedia.get() ? this.settings.emulatedCSSMedia.get() : "");
807 var targets = WebInspector.targetManager.targets(); 812 var targets = WebInspector.targetManager.targets();
808 for (var i = 0; i < targets.length; ++i) 813 for (var i = 0; i < targets.length; ++i)
809 targets[i].cssModel.mediaQueryResultChanged(); 814 targets[i].cssModel.mediaQueryResultChanged();
810 this.maybeHasActiveOverridesChanged(); 815 this.maybeHasActiveOverridesChanged();
811 }, 816 },
812 817
813 _networkConditionsChanged: function() 818 _networkConditionsChanged: function()
814 { 819 {
815 if (!this.settings.emulateNetworkConditions.get()) { 820 if (!this._responsiveDesignEnabledOrUnavailable() || !this.settings.emul ateNetworkConditions.get()) {
816 NetworkAgent.emulateNetworkConditions([], 0, false, 0, 0, 0); 821 NetworkAgent.emulateNetworkConditions([], 0, false, 0, 0, 0);
817 } else { 822 } else {
818 var domainsString = this.settings.networkConditionsDomains.get().tri m(); 823 var domainsString = this.settings.networkConditionsDomains.get().tri m();
819 var domains = domainsString ? domainsString.split(",").map(function (s) { return s.trim(); }) : []; 824 var domains = domainsString ? domainsString.split(",").map(function (s) { return s.trim(); }) : [];
820 var throughput = this.settings.networkConditionsThroughput.get(); 825 var throughput = this.settings.networkConditionsThroughput.get();
821 var offline = !throughput; 826 var offline = !throughput;
822 NetworkAgent.emulateNetworkConditions(domains, throughput, offline, 0, throughput, throughput); 827 NetworkAgent.emulateNetworkConditions(domains, throughput, offline, 0, throughput, throughput);
823 } 828 }
824 this.maybeHasActiveOverridesChanged(); 829 this.maybeHasActiveOverridesChanged();
825 }, 830 },
(...skipping 22 matching lines...) Expand all
848 return this._hasActiveOverrides; 853 return this._hasActiveOverrides;
849 }, 854 },
850 855
851 maybeHasActiveOverridesChanged: function() 856 maybeHasActiveOverridesChanged: function()
852 { 857 {
853 var hasActiveOverrides = 858 var hasActiveOverrides =
854 !!this.userAgentOverride() || 859 !!this.userAgentOverride() ||
855 (this.settings.emulateDevice.get() && !this.isInspectingDevice()) || 860 (this.settings.emulateDevice.get() && !this.isInspectingDevice()) ||
856 this.settings.overrideGeolocation.get() || 861 this.settings.overrideGeolocation.get() ||
857 this.settings.overrideDeviceOrientation.get() || 862 this.settings.overrideDeviceOrientation.get() ||
863 (WebInspector.experimentsSettings.networkConditions.isEnabled() && t his.settings.emulateNetworkConditions.get()) ||
858 this.isTouchEmulationEnabled() || 864 this.isTouchEmulationEnabled() ||
859 (this.settings.overrideCSSMedia.get() && !this.isInspectingDevice()) ; 865 (this.settings.overrideCSSMedia.get() && !this.isInspectingDevice()) ;
860 if (this._hasActiveOverrides !== hasActiveOverrides) { 866 if (this._hasActiveOverrides !== hasActiveOverrides) {
861 this._hasActiveOverrides = hasActiveOverrides; 867 this._hasActiveOverrides = hasActiveOverrides;
862 this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.H asActiveOverridesChanged); 868 this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.H asActiveOverridesChanged);
863 } 869 }
864 }, 870 },
865 871
866 _onMainFrameNavigated: function() 872 _onMainFrameNavigated: function()
867 { 873 {
(...skipping 96 matching lines...) Expand 10 before | Expand all | Expand 10 after
964 isInspectingDevice: function() 970 isInspectingDevice: function()
965 { 971 {
966 return !!this._target && this._target.isMobile(); 972 return !!this._target && this._target.isMobile();
967 }, 973 },
968 974
969 /** 975 /**
970 * @return {boolean} 976 * @return {boolean}
971 */ 977 */
972 isEmulateDeviceEnabled: function() 978 isEmulateDeviceEnabled: function()
973 { 979 {
974 return this.settings.emulateDevice.get() && (!this._responsiveDesignAvai lable || WebInspector.settings.responsiveDesign.enabled.get()); 980 return this.settings.emulateDevice.get() && this._responsiveDesignEnable dOrUnavailable();
975 }, 981 },
976 982
977 /** 983 /**
978 * @return {boolean} 984 * @return {boolean}
979 */ 985 */
980 isTouchEmulationEnabled: function() 986 isTouchEmulationEnabled: function()
981 { 987 {
982 return !this.hasTouchInputs() && ((this.isEmulateDeviceEnabled() && this .settings.deviceTouch.get()) || this.settings.sensorsTouch.get()); 988 return !this.hasTouchInputs() && ((this.isEmulateDeviceEnabled() && this .settings.deviceTouch.get()) || this.settings.sensorsTouch.get());
983 }, 989 },
984 990
(...skipping 181 matching lines...) Expand 10 before | Expand all | Expand 10 after
1166 }, 1172 },
1167 1173
1168 __proto__: WebInspector.Object.prototype 1174 __proto__: WebInspector.Object.prototype
1169 } 1175 }
1170 1176
1171 1177
1172 /** 1178 /**
1173 * @type {!WebInspector.OverridesSupport} 1179 * @type {!WebInspector.OverridesSupport}
1174 */ 1180 */
1175 WebInspector.overridesSupport; 1181 WebInspector.overridesSupport;
OLDNEW
« no previous file with comments | « Source/devtools/front_end/overrides.css ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698