DevTools: make responsive design a master switch for emulation.

Source/devtools/front_end/elements/OverridesView.js

 /*
  * Copyright (C) 2014 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 25 matching lines @@
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("overrides.css");
     this.registerRequiredCSS("helpScreen.css");
     this.element.classList.add("overrides-view");
 
     this._tabbedPane = new WebInspector.TabbedPane();
     this._tabbedPane.shrinkableTabs = false;
     this._tabbedPane.verticalTabLayout = true;
 
-    if (!WebInspector.overridesSupport.isInspectingDevice()) {
-        if (!WebInspector.overridesSupport.responsiveDesignAvailable())
-            new WebInspector.OverridesView.DeviceTab().appendAsTab(this._tabbedPane);
-    }
-    new WebInspector.OverridesView.ViewportTab().appendAsTab(this._tabbedPane);
+    if (!WebInspector.overridesSupport.isInspectingDevice())
+        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);
 
     this._lastSelectedTabSetting = WebInspector.settings.createSetting("lastSelectedEmulateTab", "device");
     this._tabbedPane.selectTab(this._lastSelectedTabSetting.get());
     this._tabbedPane.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
     this._tabbedPane.show(this.element);
 
     this._warningFooter = this.element.createChild("div", "overrides-footer");
     this._overridesWarningUpdated();
@@ skipping 52 matching lines @@
     updateActiveState: function()
     {
         if (!this._tabbedPane)
             return;
         var active = false;
         for (var i = 0; !active && i < this._settings.length; ++i)
             active = this._settings[i].get();
         for (var i = 0; !active && i < this._predicates.length; ++i)
             active = this._predicates[i]();
         this._tabbedPane.element.classList.toggle("overrides-activate-" + this._id, active);
-        this._tabbedPane.changeTabTitle(this._id, active ? this._name + " \u2713" : this._name);
     },
 
     /**
      * @param {string} name
      * @param {!WebInspector.Setting} setting
      * @param {function(boolean)=} callback
      */
     _createSettingCheckbox: function(name, setting, callback)
     {
         var checkbox = WebInspector.SettingsUI.createSettingCheckbox(name, setting, true);
@@ skipping 53 matching lines @@
         this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
         this._swapDimensionsElement.tabIndex = -1;
         var heightOverrideInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "80px", WebInspector.OverridesSupport.integerInputValidator, true);
         cellElement.appendChild(heightOverrideInput);
 
         rowElement = tableElement.createChild("tr");
         cellElement = rowElement.createChild("td");
         cellElement.colSpan = 4;
 
-        var widthRangeInput = WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "200px", undefined, true).lastChild;
-        widthRangeInput.type = "range";
-        widthRangeInput.min = 100;
-        widthRangeInput.max = 2000;
-        cellElement.appendChild(widthRangeInput);
-
         rowElement = tableElement.createChild("tr");
         rowElement.title = WebInspector.UIString("Ratio between a device's physical pixels and device-independent pixels.");
         rowElement.createChild("td").appendChild(document.createTextNode(WebInspector.UIString("Device pixel ratio:")));
         rowElement.createChild("td").appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "80px", WebInspector.OverridesSupport.doubleInputValidator, true));
 
         var viewportCheckbox = this._createSettingCheckbox(WebInspector.UIString("Emulate mobile"), WebInspector.overridesSupport.settings.emulateViewport);
         viewportCheckbox.title = WebInspector.UIString("Enable meta viewport, overlay scrollbars and default 980px body width");
         fieldsetElement.appendChild(viewportCheckbox);
 
         // FIXME: move text autosizing to the "misc" tab together with css media, and separate it from device emulation.
         var textAutosizingOverrideElement = this._createSettingCheckbox(WebInspector.UIString("Enable text autosizing "), WebInspector.overridesSupport.settings.deviceTextAutosizing);
         textAutosizingOverrideElement.title = WebInspector.UIString("Text autosizing is the feature that boosts font sizes on mobile devices.");
         fieldsetElement.appendChild(textAutosizingOverrideElement);
 
         fieldsetElement.appendChild(this._createSettingCheckbox(WebInspector.UIString("Shrink to fit"), WebInspector.overridesSupport.settings.deviceFitWindow));
 
         return fieldsetElement;
     },
 
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
-
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
-WebInspector.OverridesView.ViewportTab = function()
+WebInspector.OverridesView.MediaTab = function()
 {
     var settings = [WebInspector.overridesSupport.settings.overrideCSSMedia];
-    WebInspector.OverridesView.Tab.call(this, "viewport", WebInspector.UIString("Screen"), settings);
-    this.element.classList.add("overrides-viewport");
+    WebInspector.OverridesView.Tab.call(this, "media", WebInspector.UIString("Media"), settings);
+    this.element.classList.add("overrides-media");
 
     this._createMediaEmulationFragment();
 }
 
-WebInspector.OverridesView.ViewportTab.prototype = {
+WebInspector.OverridesView.MediaTab.prototype = {
     _createMediaEmulationFragment: function()
     {
         var checkbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("CSS media"), WebInspector.overridesSupport.settings.overrideCSSMedia, true);
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideCSSMedia);
         if (WebInspector.overridesSupport.isInspectingDevice())
             fieldsetElement.disabled = true;
 
         var mediaSelectElement = fieldsetElement.createChild("select");
         var mediaTypes = WebInspector.CSSStyleModel.MediaTypes;
         var defaultMedia = WebInspector.overridesSupport.settings.emulatedCSSMedia.get();
@@ skipping 27 matching lines @@
     __proto__: WebInspector.OverridesView.Tab.prototype
 }
 
 
 /**
  * @constructor
  * @extends {WebInspector.OverridesView.Tab}
  */
 WebInspector.OverridesView.NetworkTab = function()
 {
-    WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), [WebInspector.overridesSupport.settings.emulateNetworkConditions], [this._isUserAgentOverrideEnabled.bind(this)]);
+    var flags = [];
+    if (WebInspector.experimentsSettings.networkConditions.isEnabled())
+       flags.push(WebInspector.overridesSupport.settings.emulateNetworkConditions);
+    WebInspector.OverridesView.Tab.call(this, "network", WebInspector.UIString("Network"), flags, [this._isUserAgentOverrideEnabled.bind(this)]);
     this.element.classList.add("overrides-network");
-    this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Limit network throughput"), WebInspector.overridesSupport.settings.emulateNetworkConditions));
-    this.element.appendChild(this._createNetworkConditionsElement());
+    if (WebInspector.experimentsSettings.networkConditions.isEnabled()) {
+        this.element.appendChild(this._createSettingCheckbox(WebInspector.UIString("Limit network throughput"), WebInspector.overridesSupport.settings.emulateNetworkConditions));
+        this.element.appendChild(this._createNetworkConditionsElement());
+    }
     this._createUserAgentSection();
 }
 
 WebInspector.OverridesView.NetworkTab.prototype = {
     /**
      * @return {!Element}
      */
     _createNetworkConditionsElement: function()
     {
         var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateNetworkConditions);
@@ skipping 21 matching lines @@
     {
         this.updateActiveState();
         var enabled =  !!WebInspector.overridesSupport.userAgentOverride();
         if (this._userAgentCheckbox.checked !== enabled)
             this._userAgentCheckbox.checked = enabled;
         this._userAgentFieldset.disabled = !enabled;
     },
 
     _createUserAgentSection: function()
     {
-        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesign.enabled, WebInspector.overridesSupport.settings.deviceUserAgent];
+        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesignEnabled, WebInspector.overridesSupport.settings.deviceUserAgent];
         for (var i = 0; i < settings.length; i++) {
             settings[i].addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
             settings[i].addChangeListener(WebInspector.overridesSupport.updateUserAgentToMatchDeviceUserAgent.bind(WebInspector.overridesSupport));
         }
         WebInspector.overridesSupport.settings.overrideUserAgent.addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
         WebInspector.overridesSupport.settings.userAgent.addChangeListener(this._onUserAgentOverrideEnabledChanged.bind(this));
 
         var label = this.element.createChild("label");
         var checkbox = label.createChild("input");
         checkbox.type = "checkbox";
@@ skipping 148 matching lines @@
         var enabled =  WebInspector.overridesSupport.isTouchEmulationEnabled();
         if (this._touchCheckbox.checked !== enabled)
             this._touchCheckbox.checked = enabled;
     },
 
     /**
      * @return {!Element}
      */
     _createTouchCheckbox: function()
     {
-        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesign.enabled, WebInspector.overridesSupport.settings.deviceTouch];
+        var settings = [WebInspector.overridesSupport.settings.emulateDevice, WebInspector.settings.responsiveDesignEnabled, WebInspector.overridesSupport.settings.deviceTouch];
         for (var i = 0; i < settings.length; i++) {
             settings[i].addChangeListener(this._onTouchEmulationChanged.bind(this));
             settings[i].addChangeListener(WebInspector.overridesSupport.updateSensorsTouchToMatchDeviceTouch.bind(WebInspector.overridesSupport));
         }
         WebInspector.overridesSupport.settings.sensorsTouch.addChangeListener(this._onTouchEmulationChanged.bind(this));
 
         var input = document.createElement("input");
         input.type = "checkbox";
         input.name = WebInspector.UIString("Emulate touch screen");
         this._touchCheckbox = input;
@@ skipping 266 matching lines @@
 
     __proto__ : WebInspector.OverridesView.Tab.prototype
 }
 
 /** @enum {string} */
 WebInspector.OverridesView.SensorsTab.DeviceOrientationModificationSource = {
     UserInput: "userInput",
     UserDrag: "userDrag",
     ResetButton: "resetButton"
 }