[DevTools] Responsive design UI rework.

This change moves most of the emulation under |emulateDevice| setting.

BUG=327641

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

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

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

@@ -99,9 +99,7 @@
     display: none;
 }
 
-.overrides-user-agent fieldset {
-    padding-top: 5px;
-}
+/* Network tab */
 
 .overrides-network fieldset {
     padding-top: 5px;
@@ -125,6 +123,13 @@
     width: 100%;
     max-width: 400px;
     min-width: 120px;
+    margin-left: 2px;
+}
+
+/* Device tab */
+
+.overrides-device {
+    width: 100%;
 }
 
 .overrides-device > select {
@@ -133,8 +138,12 @@
     max-width: 90%;
 }
 
-.overrides-device button {
-    margin-right: 10px;
+.overrides-device input {
+    text-align: right;
+}
+
+.overrides-device input[type=range] {
+    width: 100%;
 }
 
 .overrides-device > label {
@@ -155,59 +164,46 @@
     margin-top: 10px;
 }
 
-.overrides-viewport {
-    width: 100%;
-}
-
-.overrides-viewport input {
-    text-align: right;
-}
-
-.overrides-viewport input[type=range] {
-    width: 100%;
-}
-
 button.overrides-swap {
     height: 20px;
 }
 
-.overrides-view label {
-    display: flex;
-    height: auto;
-}
-
-.overrides-viewport label {
+.overrides-device label {
     margin-bottom: 10px;
 }
 
-.overrides-viewport table {
+.overrides-device table {
     margin-bottom: 5px;
 }
 
-.overrides-viewport > label {
-    margin-bottom: 8px;
+.overrides-device > label {
+    margin-bottom: 4px;
 }
 
-.overrides-viewport .help-footnote {
+.overrides-device .help-footnote {
     border-top: 1px solid #EEEEEE;
     margin: 0;
     padding: 12px;
 }
 
-.overrides-user-agent input[type=text] {
-    width: 400px;
-    max-width: 90%;
+.overrides-view label {
+    display: flex;
+    height: auto;
 }
 
-.overrides-user-agent select {
-    margin: 7px 0;
+/* Screen tab */
+
+.overrides-viewport > label {
+    margin-bottom: 4px;
 }
 
+/* Sensors tab */
+
 .overrides-sensors > label {
     margin-bottom: 10px;
 }
 
-.overrides-device, .overrides-viewport, .overrides-user-agent, .overrides-network, .overrides-sensors {
+.overrides-device, .overrides-viewport, .overrides-network, .overrides-sensors {
     flex: none !important;
 }
 
@@ -217,7 +213,6 @@ button.overrides-swap {
 
 .overrides-activate-device #tab-device,
 .overrides-activate-viewport #tab-viewport,
-.overrides-activate-user-agent #tab-user-agent,
 .overrides-activate-network #tab-network,
 .overrides-activate-sensors #tab-sensors {
     color: rgb(25, 100, 228);
@@ -226,7 +221,6 @@ button.overrides-swap {
 
 .overrides-activate-device #tab-device.selected,
 .overrides-activate-viewport #tab-viewport.selected,
-.overrides-activate-user-agent #tab-user-agent.selected,
 .overrides-activate-network #tab-network.selected,
 .overrides-activate-sensors #tab-sensors.selected {
     opacity: 1;

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

@@ -88,6 +88,11 @@
     display: inline-block;
 }
 
+.responsive-design-screen-section > fieldset,
+.responsive-design-user-agent-section > p {
+    margin-left: 7px;
+}
+
 .responsive-design-toolbar .responsive-design-section {
     display: flex;
     flex: 1 0 auto;

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

@@ -163,6 +163,43 @@ WebInspector.SettingsUI.createSettingInputField = function(label, setting, numer
     return p;
 }
 
+/**
+ * @param {string} label
+ * @param {!WebInspector.Setting} setting
+ * @param {number=} maxLength
+ * @param {string=} width
+ * @param {!WebInspector.Setting=} toggleSetting
+ * @param {string=} defaultText
+ */
+WebInspector.SettingsUI.createSettingLabel = function(label, setting, maxLength, width, toggleSetting, 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;
+
+    if (toggleSetting)
+        toggleSetting.addChangeListener(onSettingChange);
+    setting.addChangeListener(onSettingChange);
+    onSettingChange();
+
+    function onSettingChange()
+    {
+        var text = toggleSetting && !toggleSetting.get() ? (defaultText || "") : setting.get();
+        spanElement.title = text;
+        if (maxLength && text.length > maxLength)
+            text = text.substring(0, maxLength - 2) + "...";
+        spanElement.textContent = text;
+    }
+
+    return p;
+}
+
 WebInspector.SettingsUI.createCustomSetting = function(name, element)
 {
     var p = document.createElement("p");