DevTools: move emulation button into the base App.js.

R=dgozman@chromium.org

Review URL: https://codereview.chromium.org/342163002

git-svn-id: svn://svn.chromium.org/blink/trunk@176515 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/inspector/device-emulation/device-emulation-test.js

@@ -192,7 +192,7 @@ InspectorTest.applyEmulationAndReload = function(enabled, width, height, deviceS
         WebInspector.overridesSupport.emulateDevice(new WebInspector.OverridesSupport.Device(width + "x" + height + "x" + deviceScaleFactor + "x1x1", ""));
     else
         WebInspector.overridesSupport.reset();
-    WebInspector.overridesSupport.settings.emulationEnabled.set(enabled);
+    WebInspector.overridesSupport.settings._emulationEnabled.set(enabled);
 
     function emulateCallback()
     {

third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js

@@ -51,7 +51,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     this._enabled = false;
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
-    WebInspector.overridesSupport.settings.emulationEnabled.addChangeListener(this._emulationEnabledChanged, this);
+    WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
     this._emulationEnabledChanged();
     this._overridesWarningUpdated();
 };
@@ -74,7 +74,7 @@ WebInspector.ResponsiveDesignView.prototype = {
 
     _emulationEnabledChanged: function()
     {
-        var enabled = WebInspector.overridesSupport.settings.emulationEnabled.get();
+        var enabled = WebInspector.overridesSupport.emulationEnabled();
         if (enabled && !this._enabled) {
             this._invalidateCache();
             this._ignoreResize = true;

third_party/WebKit/Source/devtools/front_end/elements/OverridesView.js

@@ -44,10 +44,8 @@ WebInspector.OverridesView = function()
     this._tabbedPane.verticalTabLayout = true;
 
 
-    if (!WebInspector.overridesSupport.isInspectingDevice()) {
-        new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
-        new WebInspector.OverridesView.MediaTab().appendAsTab(this._tabbedPane);
-    }
+    new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
+    new WebInspector.OverridesView.MediaTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.NetworkTab().appendAsTab(this._tabbedPane);
     new WebInspector.OverridesView.SensorsTab().appendAsTab(this._tabbedPane);
 
@@ -65,13 +63,13 @@ WebInspector.OverridesView = function()
 
     this._splashScreenElement = this.element.createChild("div", "overrides-splash-screen");
     this._splashScreenElement.createTextChild(WebInspector.UIString("Emulation is currently disabled. Toggle "));
-    var toggleEmulationButton = new WebInspector.StatusBarButton("", "responsive-design-status-bar-item");
+    var toggleEmulationButton = new WebInspector.StatusBarButton("", "emulation-status-bar-item");
     toggleEmulationButton.addEventListener("click", this._toggleEmulationEnabled, this);
     this._splashScreenElement.appendChild(toggleEmulationButton.element);
     this._splashScreenElement.createTextChild(WebInspector.UIString("in the main toolbar to enable it."));
 
     WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
-    WebInspector.overridesSupport.settings.emulationEnabled.addChangeListener(this._emulationEnabledChanged, this);
+    WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
     this._emulationEnabledChanged();
 }
 
@@ -87,20 +85,20 @@ WebInspector.OverridesView.prototype = {
     _overridesWarningUpdated: function()
     {
         var message = WebInspector.overridesSupport.warningMessage();
-        this._warningFooter.classList.toggle("hidden", !WebInspector.overridesSupport.settings.emulationEnabled.get() || !message);
+        this._warningFooter.classList.toggle("hidden", !WebInspector.overridesSupport.emulationEnabled() || !message);
         this._warningFooter.textContent = message;
     },
 
     _toggleEmulationEnabled: function()
     {
-        WebInspector.overridesSupport.settings.emulationEnabled.set(true);
+        WebInspector.overridesSupport.setEmulationEnabled(true);
     },
 
     _emulationEnabledChanged: function()
     {
-        this._tabbedPane.element.classList.toggle("hidden", !WebInspector.overridesSupport.settings.emulationEnabled.get());
+        this._tabbedPane.element.classList.toggle("hidden", !WebInspector.overridesSupport.emulationEnabled());
         this._overridesWarningUpdated();
-        this._splashScreenElement.classList.toggle("hidden", WebInspector.overridesSupport.settings.emulationEnabled.get());
+        this._splashScreenElement.classList.toggle("hidden", WebInspector.overridesSupport.emulationEnabled());
     },
 
     __proto__: WebInspector.VBox.prototype

third_party/WebKit/Source/devtools/front_end/inspector.css

@@ -2294,7 +2294,7 @@ body.inactive .sidebar-tree-item.selected {
     -webkit-mask-position: -224px -24px;
 }
 
-.responsive-design-status-bar-item .glyph {
+.emulation-status-bar-item .glyph {
     -webkit-mask-position: -164px 0px;
 }
 

third_party/WebKit/Source/devtools/front_end/main/AdvancedApp.js

@@ -10,26 +10,9 @@ WebInspector.AdvancedApp = function()
 {
     WebInspector.App.call(this);
     WebInspector.dockController.addEventListener(WebInspector.DockController.Events.BeforeDockSideChanged, this._openToolboxWindow, this);
-
-    this._toggleEmulationButton = new WebInspector.StatusBarButton(WebInspector.UIString("Toggle emulation enabled."), "responsive-design-status-bar-item");
-    this._toggleEmulationButton.toggled = WebInspector.overridesSupport.settings.emulationEnabled.get();
-    this._toggleEmulationButton.addEventListener("click", this._toggleEmulationEnabled, this);
-    WebInspector.overridesSupport.settings.emulationEnabled.addChangeListener(this._emulationEnabledChanged, this);
 };
 
 WebInspector.AdvancedApp.prototype = {
-    _toggleEmulationEnabled: function()
-    {
-        WebInspector.overridesSupport.settings.emulationEnabled.set(!this._toggleEmulationButton.toggled);
-    },
-
-    _emulationEnabledChanged: function()
-    {
-        this._toggleEmulationButton.toggled = WebInspector.overridesSupport.settings.emulationEnabled.get();
-        if (!WebInspector.experimentsSettings.responsiveDesign.isEnabled() && WebInspector.overridesSupport.settings.emulationEnabled.get())
-            WebInspector.inspectorView.showViewInDrawer("emulation", true);
-    },
-
     createRootView: function()
     {
         var rootView = new WebInspector.RootView();
@@ -175,26 +158,6 @@ WebInspector.AdvancedApp.prototype = {
     __proto__: WebInspector.App.prototype
 };
 
-/**
- * @constructor
- * @implements {WebInspector.StatusBarButton.Provider}
- */
-WebInspector.AdvancedApp.ResponsiveDesignButtonProvider = function()
-{
-}
-
-WebInspector.AdvancedApp.ResponsiveDesignButtonProvider.prototype = {
-    /**
-     * @return {?WebInspector.StatusBarButton}
-     */
-    button: function()
-    {
-        if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
-            return null;
-        return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleEmulationButton || null;
-    }
-}
-
 /**
  * @constructor
  */

third_party/WebKit/Source/devtools/front_end/main/App.js

@@ -7,9 +7,27 @@
  */
 WebInspector.App = function()
 {
+    if (WebInspector.overridesSupport.canEmulate()) {
+        this._toggleEmulationButton = new WebInspector.StatusBarButton(WebInspector.UIString("Toggle emulation enabled."), "emulation-status-bar-item");
+        this._toggleEmulationButton.toggled = WebInspector.overridesSupport.emulationEnabled();
+        this._toggleEmulationButton.addEventListener("click", this._toggleEmulationEnabled, this);
+        WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.EmulationStateChanged, this._emulationEnabledChanged, this);
+    }
 };
 
 WebInspector.App.prototype = {
+    _toggleEmulationEnabled: function()
+    {
+        WebInspector.overridesSupport.setEmulationEnabled(!this._toggleEmulationButton.toggled);
+    },
+
+    _emulationEnabledChanged: function()
+    {
+        this._toggleEmulationButton.toggled = WebInspector.overridesSupport.emulationEnabled();
+        if (!WebInspector.overridesSupport.responsiveDesignAvailable() && WebInspector.overridesSupport.emulationEnabled())
+            WebInspector.inspectorView.showViewInDrawer("emulation", true);
+    },
+
     createRootView: function()
     {
     },
@@ -19,11 +37,31 @@ WebInspector.App.prototype = {
         WebInspector.inspectorView.showInitialPanel();
 
         WebInspector.overridesSupport.applyInitialOverrides();
-        if (WebInspector.overridesSupport.hasActiveOverrides() && !WebInspector.experimentsSettings.responsiveDesign.isEnabled())
+        if (!WebInspector.overridesSupport.responsiveDesignAvailable() && WebInspector.overridesSupport.emulationEnabled())
             WebInspector.inspectorView.showViewInDrawer("emulation", true);
     }
 };
 
+/**
+ * @constructor
+ * @implements {WebInspector.StatusBarButton.Provider}
+ */
+WebInspector.App.EmulationButtonProvider = function()
+{
+}
+
+WebInspector.App.EmulationButtonProvider.prototype = {
+    /**
+     * @return {?WebInspector.StatusBarButton}
+     */
+    button: function()
+    {
+        if (!(WebInspector.app instanceof WebInspector.App))
+            return null;
+        return WebInspector.app._toggleEmulationButton || null;
+    }
+}
+
 /**
  * @type {!WebInspector.App}
  */

third_party/WebKit/Source/devtools/front_end/main/module.json

@@ -124,7 +124,7 @@
         },
         {
             "type": "@WebInspector.StatusBarButton.Provider",
-            "className": "WebInspector.AdvancedApp.ResponsiveDesignButtonProvider",
+            "className": "WebInspector.App.EmulationButtonProvider",
             "order": 1,
             "location": "toolbar-left"
         },

third_party/WebKit/Source/devtools/front_end/overrides.css

@@ -305,7 +305,7 @@ button.overrides-swap {
 
 .overrides-splash-screen {
     display: block;
-    padding: 3px 10px;
+    padding: 10px 10px;
 }
 
 .overrides-splash-screen > button {

third_party/WebKit/Source/devtools/front_end/sdk/OverridesSupport.js

@@ -48,7 +48,7 @@ WebInspector.OverridesSupport = function(responsiveDesignAvailable)
 
 WebInspector.OverridesSupport.Events = {
     OverridesWarningUpdated: "OverridesWarningUpdated",
-    HasActiveOverridesChanged: "HasActiveOverridesChanged",
+    EmulationStateChanged: "EmulationStateChanged"
 }
 
 /**
@@ -435,6 +435,33 @@ WebInspector.OverridesSupport._networkThroughputPresets = [
 ];
 
 WebInspector.OverridesSupport.prototype = {
+    /**
+     * @return {boolean}
+     */
+    canEmulate: function()
+    {
+        return !!this._target && !this._target.isMobile();
+    },
+
+    /**
+     * @return {boolean}
+     */
+    emulationEnabled: function()
+    {
+        return this.canEmulate() && this.settings._emulationEnabled.get();
+    },
+
+    /**
+     * @param {boolean} enabled
+     */
+    setEmulationEnabled: function(enabled)
+    {
+        if (this.canEmulate()) {
+            this.settings._emulationEnabled.set(enabled);
+            this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.EmulationStateChanged);
+        }
+    },
+
     /**
      * @return {boolean}
      */
@@ -535,10 +562,10 @@ WebInspector.OverridesSupport.prototype = {
 
         this._initialized = true;
 
-        this.settings.emulationEnabled.addChangeListener(this._userAgentChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._userAgentChanged, this);
         this.settings.userAgent.addChangeListener(this._userAgentChanged, this);
 
-        this.settings.emulationEnabled.addChangeListener(this._deviceMetricsChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceWidth.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceHeight.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceScaleFactor.addChangeListener(this._deviceMetricsChanged, this);
@@ -546,30 +573,30 @@ WebInspector.OverridesSupport.prototype = {
         this.settings.emulateViewport.addChangeListener(this._deviceMetricsChanged, this);
         this.settings.deviceFitWindow.addChangeListener(this._deviceMetricsChanged, this);
 
-        this.settings.emulationEnabled.addChangeListener(this._geolocationPositionChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._geolocationPositionChanged, this);
         this.settings.overrideGeolocation.addChangeListener(this._geolocationPositionChanged, this);
         this.settings.geolocationOverride.addChangeListener(this._geolocationPositionChanged, this);
 
-        this.settings.emulationEnabled.addChangeListener(this._deviceOrientationChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._deviceOrientationChanged, this);
         this.settings.overrideDeviceOrientation.addChangeListener(this._deviceOrientationChanged, this);
         this.settings.deviceOrientationOverride.addChangeListener(this._deviceOrientationChanged, this);
 
-        this.settings.emulationEnabled.addChangeListener(this._emulateTouchEventsChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._emulateTouchEventsChanged, this);
         this.settings.emulateTouch.addChangeListener(this._emulateTouchEventsChanged, this);
 
-        this.settings.emulationEnabled.addChangeListener(this._cssMediaChanged, this);
+        this.settings._emulationEnabled.addChangeListener(this._cssMediaChanged, this);
         this.settings.overrideCSSMedia.addChangeListener(this._cssMediaChanged, this);
         this.settings.emulatedCSSMedia.addChangeListener(this._cssMediaChanged, this);
 
         if (WebInspector.experimentsSettings.networkConditions.isEnabled()) {
-            this.settings.emulationEnabled.addChangeListener(this._networkConditionsChanged, this);
+            this.settings._emulationEnabled.addChangeListener(this._networkConditionsChanged, this);
             this.settings.networkConditionsThroughput.addChangeListener(this._networkConditionsChanged, this);
         }
 
         WebInspector.settings.showMetricsRulers.addChangeListener(this._showRulersChanged, this);
         this._showRulersChanged();
 
-        if (!this.settings.emulationEnabled.get())
+        if (!this.emulationEnabled())
             return;
 
         if (this.settings.overrideDeviceOrientation.get())
@@ -596,12 +623,11 @@ WebInspector.OverridesSupport.prototype = {
     {
         if (this._userAgentChangedListenerMuted)
             return;
-        var userAgent = this.settings.emulationEnabled.get() ? this.settings.userAgent.get() : "";
+        var userAgent = this.emulationEnabled() ? this.settings.userAgent.get() : "";
         NetworkAgent.setUserAgentOverride(userAgent);
         if (this._userAgent !== userAgent)
             this._updateUserAgentWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
         this._userAgent = userAgent;
-        this.maybeHasActiveOverridesChanged();
     },
 
     _onPageResizerAvailableSizeChanged: function()
@@ -631,7 +657,7 @@ WebInspector.OverridesSupport.prototype = {
         if (this._deviceMetricsChangedListenerMuted)
             return;
 
-        if (!this.settings.emulationEnabled.get()) {
+        if (!this.emulationEnabled()) {
             this._deviceMetricsThrottler.schedule(clearDeviceMetricsOverride.bind(this));
             if (this._pageResizer)
                 this._pageResizer.update(0, 0, 0);
@@ -641,10 +667,6 @@ WebInspector.OverridesSupport.prototype = {
         var dipWidth = this.settings.deviceWidth.get();
         var dipHeight = this.settings.deviceHeight.get();
 
-        // Disable override without checks.
-        if (this.isInspectingDevice())
-            return;
-
         var overrideWidth = dipWidth;
         var overrideHeight = dipHeight;
         if (this._pageResizer) {
@@ -697,12 +719,11 @@ WebInspector.OverridesSupport.prototype = {
                 return;
             }
 
-            var viewportEnabled = this.settings.emulationEnabled.get() && this.settings.emulateViewport.get();
+            var viewportEnabled = this.emulationEnabled() && this.settings.emulateViewport.get();
             if (this._emulateViewportEnabled !== viewportEnabled)
                 this._updateDeviceMetricsWarningMessage(WebInspector.UIString("You might need to reload the page for proper user agent spoofing and viewport rendering."));
             this._emulateViewportEnabled = viewportEnabled;
             this._deviceMetricsOverrideAppliedForTest();
-            this.maybeHasActiveOverridesChanged();
             finishCallback();
         }
     },
@@ -714,7 +735,7 @@ WebInspector.OverridesSupport.prototype = {
 
     _geolocationPositionChanged: function()
     {
-        if (!this.settings.emulationEnabled.get() || !this.settings.overrideGeolocation.get()) {
+        if (!this.emulationEnabled() || !this.settings.overrideGeolocation.get()) {
             GeolocationAgent.clearGeolocationOverride();
             return;
         }
@@ -723,50 +744,45 @@ WebInspector.OverridesSupport.prototype = {
             GeolocationAgent.setGeolocationOverride();
         else
             GeolocationAgent.setGeolocationOverride(geolocation.latitude, geolocation.longitude, 150);
-        this.maybeHasActiveOverridesChanged();
     },
 
     _deviceOrientationChanged: function()
     {
-        if (!this.settings.emulationEnabled.get() || !this.settings.overrideDeviceOrientation.get()) {
+        if (!this.emulationEnabled() || !this.settings.overrideDeviceOrientation.get()) {
             PageAgent.clearDeviceOrientationOverride();
             return;
         }
 
         var deviceOrientation = WebInspector.OverridesSupport.DeviceOrientation.parseSetting(this.settings.deviceOrientationOverride.get());
         PageAgent.setDeviceOrientationOverride(deviceOrientation.alpha, deviceOrientation.beta, deviceOrientation.gamma);
-        this.maybeHasActiveOverridesChanged();
     },
 
     _emulateTouchEventsChanged: function()
     {
-        var emulateTouch = this.settings.emulationEnabled.get() && this.settings.emulateTouch.get();
+        var emulateTouch = this.emulationEnabled() && this.settings.emulateTouch.get();
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].domModel.emulateTouchEventObjects(emulateTouch);
-        this.maybeHasActiveOverridesChanged();
     },
 
     _cssMediaChanged: function()
     {
-        var enabled = !this.isInspectingDevice() && this.settings.emulationEnabled.get() && this.settings.overrideCSSMedia.get();
+        var enabled = this.emulationEnabled() && this.settings.overrideCSSMedia.get();
         PageAgent.setEmulatedMedia(enabled ? this.settings.emulatedCSSMedia.get() : "");
         var targets = WebInspector.targetManager.targets();
         for (var i = 0; i < targets.length; ++i)
             targets[i].cssModel.mediaQueryResultChanged();
-        this.maybeHasActiveOverridesChanged();
     },
 
     _networkConditionsChanged: function()
     {
-        if (!this.settings.emulationEnabled.get() || !this.networkThroughputIsLimited()) {
+        if (!this.emulationEnabled() || !this.networkThroughputIsLimited()) {
             NetworkAgent.emulateNetworkConditions(false, 0, 0, 0);
         } else {
             var throughput = this.settings.networkConditionsThroughput.get();
             var offline = !throughput;
             NetworkAgent.emulateNetworkConditions(offline, 0, throughput, throughput);
         }
-        this.maybeHasActiveOverridesChanged();
     },
 
     /**
@@ -774,7 +790,7 @@ WebInspector.OverridesSupport.prototype = {
      */
     showMetricsRulers: function()
     {
-        var rulersInPageResizer = this._pageResizer && this.settings.emulationEnabled.get();
+        var rulersInPageResizer = this._pageResizer && this.emulationEnabled();
         return WebInspector.settings.showMetricsRulers.get() && !rulersInPageResizer;
     },
 
@@ -785,23 +801,6 @@ WebInspector.OverridesSupport.prototype = {
         PageAgent.setShowViewportSizeOnResize(true, this.showMetricsRulers());
     },
 
-    /**
-     * @return {boolean}
-     */
-    hasActiveOverrides: function()
-    {
-        return this._hasActiveOverrides;
-    },
-
-    maybeHasActiveOverridesChanged: function()
-    {
-        var hasActiveOverrides = this.settings.emulationEnabled.get();
-        if (this._hasActiveOverrides !== hasActiveOverrides) {
-            this._hasActiveOverrides = hasActiveOverrides;
-            this.dispatchEventToListeners(WebInspector.OverridesSupport.Events.HasActiveOverridesChanged);
-        }
-    },
-
     _onMainFrameNavigated: function()
     {
         if (this._initialized)
@@ -854,7 +853,7 @@ WebInspector.OverridesSupport.prototype = {
         this._target = target;
 
         this.settings = {};
-        this.settings.emulationEnabled = WebInspector.settings.createSetting("emulationEnabled", false);
+        this.settings._emulationEnabled = WebInspector.settings.createSetting("emulationEnabled", false);
 
         this.settings.userAgent = WebInspector.settings.createSetting("userAgent", "");
 
@@ -879,8 +878,6 @@ WebInspector.OverridesSupport.prototype = {
 
         this.settings.networkConditionsThroughput = WebInspector.settings.createSetting("networkConditionsThroughput", WebInspector.OverridesSupport._networkThroughputUnlimitedValue);
 
-        this.maybeHasActiveOverridesChanged();
-
         if (this._applyInitialOverridesOnTargetAdded) {
             delete this._applyInitialOverridesOnTargetAdded;
             this.applyInitialOverrides();
@@ -903,14 +900,6 @@ WebInspector.OverridesSupport.prototype = {
         // FIXME: adapt this to multiple targets.
     },
 
-    /**
-     * @return {boolean}
-     */
-    isInspectingDevice: function()
-    {
-        return !!this._target && this._target.isMobile();
-    },
-
     /**
      * @return {boolean}
      */
@@ -942,7 +931,7 @@ WebInspector.OverridesSupport.prototype = {
      */
     _fontScaleFactor: function(width, height)
     {
-        if (!this.settings.emulationEnabled.get())
+        if (!this.emulationEnabled())
             return 1;
         var deviceScaleFactor = this.settings.deviceScaleFactor.get();
 
@@ -973,7 +962,6 @@ WebInspector.OverridesSupport.prototype = {
     createDeviceSelect: function(document)
     {
         var deviceSelectElement = document.createElement("select");
-        deviceSelectElement.disabled = WebInspector.overridesSupport.isInspectingDevice();
 
         var selectDeviceOption = new Option(WebInspector.UIString("<Select model>"), WebInspector.UIString("<Select model>"));
         selectDeviceOption.device = new WebInspector.OverridesSupport.Device("", "");