[DevTools] Remove unnecessary emulation checkboxes and simplify UX.

BUG=327641
R=pfeldman@chromium.org

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

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

third_party/WebKit/LayoutTests/http/tests/inspector-enabled/open-with-emulation-enabled.html

@@ -5,7 +5,7 @@
 
 function onload()
 {
-    testRunner.showWebInspector(JSON.stringify({lastActivePanel:"\"console\"", overrideUserAgent: "true", userAgent: "\"some user agent\"", drawerEditorShown: "false"}));
+    testRunner.showWebInspector(JSON.stringify({lastActivePanel:"\"console\"", emulationEnabled: "true", drawerEditorShown: "false"}));
     runTest();
 }
 

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

@@ -192,6 +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);
 
     function emulateCallback()
     {

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

@@ -53,8 +53,8 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
     this._enabled = false;
 
     WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
-    WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
-    this._responsiveDesignEnabledChanged();
+    WebInspector.overridesSupport.settings.emulationEnabled.addChangeListener(this._emulationEnabledChanged, this);
+    this._emulationEnabledChanged();
     this._overridesWarningUpdated();
 };
 
@@ -74,9 +74,9 @@ WebInspector.ResponsiveDesignView.prototype = {
         delete this._availableSize;
     },
 
-    _responsiveDesignEnabledChanged: function()
+    _emulationEnabledChanged: function()
     {
-        var enabled = WebInspector.settings.responsiveDesignEnabled.get();
+        var enabled = WebInspector.overridesSupport.settings.emulationEnabled.get();
         if (enabled && !this._enabled) {
             this._invalidateCache();
             this._ignoreResize = true;
@@ -121,7 +121,7 @@ WebInspector.ResponsiveDesignView.prototype = {
     availableDipSize: function()
     {
         if (typeof this._availableSize === "undefined") {
-            this._responsiveDesignEnabledChanged();
+            this._emulationEnabledChanged();
             var zoomFactor = WebInspector.zoomManager.zoomFactor();
             var rect = this._canvasContainer.element.getBoundingClientRect();
             this._availableSize = new Size(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth,
@@ -396,7 +396,7 @@ WebInspector.ResponsiveDesignView.prototype = {
     {
         this.toolbarExpandedSetting = WebInspector.settings.createSetting("responsiveDesignToolbarExpanded", false);
         var expandSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-expand");
-        this._expandButton = expandSection.createChild("div", "responsive-design-expand-button");
+        this._expandButton = expandSection.createChild("div", "responsive-design-button");
         this._expandButton.createChild("div", "responsive-design-icon responsive-design-icon-expand");
         this._expandButton.createChild("span");
         this._expandButton.addEventListener("click", this._toggleToolbarExpanded.bind(this), false);
@@ -422,8 +422,9 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         // Device.
         var deviceElement = deviceSection.createChild("div", "responsive-design-suite").createChild("div");
-        deviceElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Device"), WebInspector.overridesSupport.settings.emulateDevice, true));
-        deviceElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
+        var fieldsetElement = deviceElement.createChild("fieldset");
+        fieldsetElement.createChild("label").textContent = WebInspector.UIString("Device");
+        fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSelect(document));
 
         var separator = deviceSection.createChild("div", "responsive-design-section-separator expanded-only");
 
@@ -431,13 +432,11 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         // Dimensions.
         var screenElement = detailsElement.createChild("div", "");
-        var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
-        screenElement.appendChild(fieldsetElement);
-
+        fieldsetElement = screenElement.createChild("fieldset");
         fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.integerInputValidator, true));
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("--")));
         fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.integerInputValidator, true));
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIString("--")));
 
         this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-icon responsive-design-icon-swap");
         this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
@@ -446,30 +445,14 @@ WebInspector.ResponsiveDesignView.prototype = {
         // Device pixel ratio.
         detailsElement.createChild("div", "responsive-design-suite-separator");
         var dprElement = detailsElement.createChild("div", "");
-        fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
-        dprElement.appendChild(fieldsetElement);
-
+        fieldsetElement = dprElement.createChild("fieldset");
         fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
-        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.doubleInputValidator, true));
-
-        // Touch.
-        if (!WebInspector.overridesSupport.hasTouchInputs()) {
-            detailsElement.createChild("div", "responsive-design-suite-separator");
-            var touchElement = detailsElement.createChild("div", "");
-            fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
-            touchElement.appendChild(fieldsetElement);
-            fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.deviceTouch, true));
-        }
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, WebInspector.UIString("--")));
 
-        // Viewport.
         detailsElement.createChild("div", "responsive-design-suite-separator");
-        var viewportElement = detailsElement.createChild("div", "");
-        fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.emulateDevice);
-        viewportElement.appendChild(fieldsetElement);
-
-        var viewportCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Mobile"), WebInspector.overridesSupport.settings.emulateViewport, true);
-        viewportCheckbox.title = WebInspector.UIString("Enable meta viewport, overlay scrollbars and default 980px body width");
-        fieldsetElement.appendChild(viewportCheckbox);
+        var resetButton = detailsElement.createChild("div", "responsive-design-button");
+        resetButton.textContent = WebInspector.UIString("Reset");
+        resetButton.addEventListener("click", WebInspector.overridesSupport.reset.bind(WebInspector.overridesSupport), false);
     },
 
     _createNetworkSection: function()
@@ -478,15 +461,17 @@ WebInspector.ResponsiveDesignView.prototype = {
 
         // Bandwidth.
         var bandwidthElement = networkSection.createChild("div", "responsive-design-suite").createChild("div");
-        var networkCheckbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Bandwidth"), WebInspector.overridesSupport.settings.emulateNetworkConditions, true);
-        bandwidthElement.appendChild(networkCheckbox);
-        bandwidthElement.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
+        var fieldsetElement = bandwidthElement.createChild("fieldset");
+        var networkCheckbox = fieldsetElement.createChild("label");
+        networkCheckbox.textContent = WebInspector.UIString("Network");
+        fieldsetElement.appendChild(WebInspector.overridesSupport.createNetworkThroughputSelect(document));
 
         var separator = networkSection.createChild("div", "responsive-design-section-separator expanded-only");
 
         // User agent.
         var userAgentElement = networkSection.createChild("div", "responsive-design-suite expanded-only").createChild("div");
-        userAgentElement.appendChild(WebInspector.SettingsUI.createSettingLabel(WebInspector.UIString("User Agent:"), WebInspector.overridesSupport.settings.deviceUserAgent, 32, "240px", WebInspector.UIString("no override")));
+        fieldsetElement = userAgentElement.createChild("fieldset");
+        fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("UA", WebInspector.overridesSupport.settings.userAgent, false, 0, "", undefined, false, false, WebInspector.UIString("no override")));
 
         updateNetworkCheckboxTitle();
         WebInspector.overridesSupport.settings.networkConditionsDomains.addChangeListener(updateNetworkCheckboxTitle);

third_party/WebKit/Source/devtools/front_end/common/Settings.js

@@ -90,7 +90,6 @@ WebInspector.Settings = function()
     this.pauseOnExceptionEnabled = this.createSetting("pauseOnExceptionEnabled", false);
     this.pauseOnCaughtException = this.createSetting("pauseOnCaughtException", false);
     this.enableAsyncStackTraces = this.createSetting("enableAsyncStackTraces", false);
-    this.responsiveDesignEnabled = this.createSetting("responsiveDesignEnabled", true);
 }
 
 WebInspector.Settings.prototype = {

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

@@ -14,21 +14,21 @@ WebInspector.AdvancedApp = function()
     if (!WebInspector.experimentsSettings.responsiveDesign.isEnabled())
         return;
 
-    this._toggleResponsiveDesignButton = new WebInspector.StatusBarButton(WebInspector.UIString("Responsive design and mobile emulation."), "responsive-design-status-bar-item");
-    this._toggleResponsiveDesignButton.toggled = WebInspector.settings.responsiveDesignEnabled.get();
-    this._toggleResponsiveDesignButton.addEventListener("click", this._toggleResponsiveDesign, this);
-    WebInspector.settings.responsiveDesignEnabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
+    this._toggleEmulationButton = new WebInspector.StatusBarButton(WebInspector.UIString("Responsive design and mobile emulation."), "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 = {
-    _toggleResponsiveDesign: function()
+    _toggleEmulationEnabled: function()
     {
-        WebInspector.settings.responsiveDesignEnabled.set(!this._toggleResponsiveDesignButton.toggled);
+        WebInspector.overridesSupport.settings.emulationEnabled.set(!this._toggleEmulationButton.toggled);
     },
 
-    _responsiveDesignEnabledChanged: function()
+    _emulationEnabledChanged: function()
     {
-        this._toggleResponsiveDesignButton.toggled = WebInspector.settings.responsiveDesignEnabled.get();
+        this._toggleEmulationButton.toggled = WebInspector.overridesSupport.settings.emulationEnabled.get();
     },
 
     createRootView: function()
@@ -192,7 +192,7 @@ WebInspector.AdvancedApp.ResponsiveDesignButtonProvider.prototype = {
     {
         if (!(WebInspector.app instanceof WebInspector.AdvancedApp))
             return null;
-        return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleResponsiveDesignButton || null;
+        return /** @type {!WebInspector.AdvancedApp} */ (WebInspector.app)._toggleEmulationButton || null;
     }
 }
 

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

@@ -282,6 +282,7 @@ WebInspector.Main.prototype = {
     _doLoadedDoneWithCapabilities: function(mainTarget)
     {
         WebInspector.dockController = new WebInspector.DockController(!!WebInspector.queryParam("can_dock"));
+        WebInspector.overridesSupport = new WebInspector.OverridesSupport(WebInspector.experimentsSettings.responsiveDesign.isEnabled() && WebInspector.dockController.canDock());
 
         if (mainTarget.canScreencast)
             WebInspector.app = new WebInspector.ScreencastApp();
@@ -347,8 +348,6 @@ WebInspector.Main.prototype = {
 
         new WebInspector.WorkspaceController(WebInspector.workspace);
 
-        WebInspector.overridesSupport = new WebInspector.OverridesSupport(WebInspector.experimentsSettings.responsiveDesign.isEnabled() && WebInspector.dockController.canDock());
-
         WebInspector.liveEditSupport = new WebInspector.LiveEditSupport(WebInspector.workspace);
         new WebInspector.CSSStyleSheetMapping(WebInspector.cssModel, WebInspector.workspace, WebInspector.networkWorkspaceBinding);
 

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

@@ -212,14 +212,14 @@ button.overrides-swap {
 }
 
 .overrides-activate-device #tab-device,
-.overrides-activate-media #tab-viewport,
+.overrides-activate-media #tab-media,
 .overrides-activate-network #tab-network,
 .overrides-activate-sensors #tab-sensors {
     opacity: 0.8;
 }
 
 .overrides-activate-device #tab-device .tabbed-pane-header-tab-title::after,
-.overrides-activate-media #tab-viewport .tabbed-pane-header-tab-title::after,
+.overrides-activate-media #tab-media .tabbed-pane-header-tab-title::after,
 .overrides-activate-network #tab-network .tabbed-pane-header-tab-title::after,
 .overrides-activate-sensors #tab-sensors .tabbed-pane-header-tab-title::after {
     padding-left: 3px;
@@ -228,7 +228,7 @@ button.overrides-swap {
 }
 
 .overrides-activate-device #tab-device.selected,
-.overrides-activate-media #tab-viewport.selected,
+.overrides-activate-media #tab-media.selected,
 .overrides-activate-network #tab-network.selected,
 .overrides-activate-sensors #tab-sensors.selected {
     opacity: 1;

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

@@ -112,10 +112,6 @@
     padding-bottom: 2px;
 }
 
-.responsive-design-section > :not(:nth-child(1)) {
-    margin-left: 18px;
-}
-
 .responsive-design-suite-separator {
     flex: none;
     width: 1px;
@@ -133,6 +129,21 @@
     overflow: hidden;
 }
 
+.responsive-design-button {
+    height: 19px;
+    min-width: 70px;
+    background: rgb(64, 64, 64);
+    display: flex;
+    align-items: center;
+    justify-content: center !important;
+    cursor: pointer;
+}
+
+.responsive-design-button:hover,
+.responsive-design-button:active {
+    background: linear-gradient(to top, rgb(102, 102, 102), rgb(64, 64, 64));
+}
+
 /* Toolbar controls */
 
 .responsive-design-toolbar fieldset,
@@ -147,6 +158,11 @@
     display: none;
 }
 
+.responsive-design-toolbar label {
+    margin-right: 5px;
+    cursor: default !important;
+}
+
 .responsive-design-toolbar input[type='text'] {
     text-align: left;
     background-color: transparent;
@@ -159,10 +175,6 @@
     text-align: center;
 }
 
-.responsive-design-toolbar input[type='text']:not(.numeric) {
-    width: 100%;
-}
-
 .responsive-design-toolbar fieldset:disabled input,
 .responsive-design-toolbar fieldset:disabled button {
     opacity: 0.7;
@@ -199,7 +211,6 @@
 
 .responsive-design-toolbar select {
     height: 18px;
-    width: 220px;
     background-color: rgb(81, 81, 81);
     border: 0;
     margin-left: 10px;
@@ -274,23 +285,7 @@ body.platform-mac .responsive-design-toolbar select {
 /* Expand button */
 
 .responsive-design-section-expand {
-    padding: 0 !important;
-}
-
-.responsive-design-expand-button {
-    height: 19px;
-    min-width: 70px;
-    background: rgb(64, 64, 64);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: 3px;
-    cursor: pointer;
-}
-
-.responsive-design-expand-button:hover,
-.responsive-design-expand-button:active {
-    background: linear-gradient(to top, rgb(102, 102, 102), rgb(64, 64, 64));
+    padding: 3px !important;
 }
 
 .responsive-design-icon-expand {
@@ -306,14 +301,19 @@ body.platform-mac .responsive-design-toolbar select {
 /* Device section */
 
 .responsive-design-section-device {
-    width: 340px;
+    width: 290px;
 }
 
 .responsive-design-section-device .responsive-design-section-separator {
     background: linear-gradient(to bottom, rgb(255, 186, 68), rgb(255, 119, 0));
 }
 
+.responsive-design-section-device select {
+    width: 220px;
+}
+
 .responsive-design-section-device input[type='text'],
+.responsive-design-section-device input[type='text']::-webkit-input-placeholder,
 .responsive-design-section-device select {
     color: rgb(255, 156, 0);
 }
@@ -325,11 +325,20 @@ body.platform-mac .responsive-design-toolbar select {
 /* Network section */
 
 .responsive-design-section-network {
-    width: 280px;
+    width: 230px;
 }
 
 .responsive-design-section-network select {
     width: 150px;
+}
+
+.responsive-design-section-network input[type='text'] {
+    width: 190px;
+}
+
+.responsive-design-section-network input[type='text'],
+.responsive-design-section-network input[type='text']::-webkit-input-placeholder,
+.responsive-design-section-network select {
     color: rgb(65, 175, 255);
 }
 

third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js

@@ -89,15 +89,16 @@ WebInspector.SettingsUI.bindCheckbox = function(input, setting)
  * @param {string=} width
  * @param {function(string):?string=} validatorCallback
  * @param {boolean=} instant
+ * @param {boolean=} clearForZero
+ * @param {string=} placeholder
  * @return {!Element}
  */
-WebInspector.SettingsUI.createSettingInputField = function(label, setting, numeric, maxLength, width, validatorCallback, instant)
+WebInspector.SettingsUI.createSettingInputField = function(label, setting, numeric, maxLength, width, validatorCallback, instant, clearForZero, placeholder)
 {
     var p = document.createElement("p");
     var labelElement = p.createChild("label");
     labelElement.textContent = label;
     var inputElement = p.createChild("input");
-    inputElement.value = setting.get();
     inputElement.type = "text";
     if (numeric)
         inputElement.className = "numeric";
@@ -105,6 +106,7 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
         inputElement.maxLength = maxLength;
     if (width)
         inputElement.style.width = width;
+    inputElement.placeholder = placeholder || "";
 
     if (validatorCallback || instant) {
         inputElement.addEventListener("change", onInput, false);
@@ -158,44 +160,13 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
 
     function onSettingChange()
     {
-        inputElement.value = setting.get();
+        var value = setting.get();
+        if (clearForZero && !value)
+            value = "";
+        inputElement.value = value;
     }
-
-    return p;
-}
-
-/**
- * @param {string} label
- * @param {!WebInspector.Setting} setting
- * @param {number=} maxLength
- * @param {string=} width
- * @param {string=} defaultText
- * @return {!Element}
- */
-WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, width, defaultText)
-{
-    var p = document.createElement("p");
-    var labelElement = p.createChild("span");
-    labelElement.textContent = label;
-    if (label)
-        labelElement.style.marginRight = "5px";
-    var spanElement = p.createChild("span");
-    spanElement.textContent = setting.get();
-    if (width)
-        p.style.width = width;
-
-    setting.addChangeListener(onSettingChange);
     onSettingChange();
 
-    function onSettingChange()
-    {
-        var text = setting.get() || defaultText;
-        spanElement.title = text;
-        if (maxLength && text.length > maxLength)
-            text = text.substring(0, maxLength - 2) + "...";
-        spanElement.textContent = text;
-    }
-
     return p;
 }