[DevTools] Remove unnecessary emulation checkboxes and simplify UX.

Source/devtools/front_end/ResponsiveDesignView.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.OverridesSupport.PageResizer}
  * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder
  */
@@ skipping 35 matching lines @@
     this._heightSlider = this._heightSliderContainer.createChild("div", "responsive-design-slider-thumb");
     this._heightSlider.createChild("div", "responsive-design-thumb-handle");
     this._createResizer(this._heightSlider, true);
 
     this._inspectedPagePlaceholder = inspectedPagePlaceholder;
     inspectedPagePlaceholder.show(this.element);
 
     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();
 };
 
 // Measured in DIP.
 WebInspector.ResponsiveDesignView.SliderWidth = 19;
 WebInspector.ResponsiveDesignView.RulerWidth = 22;
 
 WebInspector.ResponsiveDesignView.prototype = {
     _invalidateCache: function()
     {
         delete this._cachedScale;
         delete this._cachedCssCanvasWidth;
         delete this._cachedCssCanvasHeight;
         delete this._cachedCssHeight;
         delete this._cachedCssWidth;
         delete this._cachedZoomFactor;
         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;
             this._enabled = true;
             this._inspectedPagePlaceholder.clearMinimumSizeAndMargins();
             this._inspectedPagePlaceholder.show(this._pageContainer);
             this._responsiveDesignContainer.show(this.element);
             this.update(this._dipWidth || 0, this._dipHeight || 0, this._scale || 0);
             delete this._ignoreResize;
         } else if (!enabled && this._enabled) {
@@ skipping 24 matching lines @@
         this._updateUI();
     },
 
     /**
      * WebInspector.OverridesSupport.PageResizer override.
      * @return {!Size}
      */
     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,
                                            rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth);
         }
         return this._availableSize;
     },
 
     /**
      * @param {!Element} element
@@ skipping 254 matching lines @@
         }
         this._toolbarElement.createChild("div", "responsive-design-separator");
 
         this._toolbarExpandedChanged();
     },
 
     _createExpandSection: function()
     {
         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);
         this.toolbarExpandedSetting.addChangeListener(this._toolbarExpandedChanged, this);
     },
 
     _toggleToolbarExpanded: function()
     {
         this.toolbarExpandedSetting.set(!this.toolbarExpandedSetting.get());
     },
 
     _toolbarExpandedChanged: function()
     {
         var expanded = this.toolbarExpandedSetting.get();
         this._expandButton.querySelector("span").textContent = WebInspector.UIString(expanded ? "Less" : "More");
         this._toolbarElement.classList.toggle("expanded", expanded);
         this.onResize();
     },
 
     _createDeviceSection: function()
     {
         var deviceSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-device");
 
         // 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");
 
         var detailsElement = deviceSection.createChild("div", "responsive-design-suite expanded-only");
 
         // 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");
         this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
 
         // 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.deviceScaleFactorValidator, true, true, WebInspector.UIString("--")));
 
-        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));
-        }
-
-        // 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()
     {
         var networkSection = this._toolbarElement.createChild("div", "responsive-design-section responsive-design-section-network");
 
         // 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);
 
         function updateNetworkCheckboxTitle()
         {
             var domains = WebInspector.overridesSupport.settings.networkConditionsDomains.get();
             if (!domains.trim()) {
                 networkCheckbox.title = WebInspector.UIString("Limit for all domains");
             } else {
@@ skipping 17 matching lines @@
     },
 
     _closeOverridesWarning: function()
     {
         this._warningMessage.querySelector("span").textContent = "";
         this._warningMessage.classList.add("hidden");
     },
 
     __proto__: WebInspector.VBox.prototype
 };