[DevTools] Group options in network presets select.

Source/devtools/front_end/components/NetworkConditionsSelector.js

Index: Source/devtools/front_end/components/NetworkConditionsSelector.js
diff --git a/Source/devtools/front_end/components/NetworkConditionsSelector.js b/Source/devtools/front_end/components/NetworkConditionsSelector.js
index 86c338e9d55bd21e944b9e67aaf4cc09f9717a99..08cc91dcd44943afa065a5e463a1b1ce4529d262 100644
--- a/Source/devtools/front_end/components/NetworkConditionsSelector.js
+++ b/Source/devtools/front_end/components/NetworkConditionsSelector.js
@@ -64,36 +64,63 @@ WebInspector.NetworkConditionsSelector._networkConditionsPresets = [
     {title: "Good 3G", value: {throughput: 1.5 * 1024 * 1024 / 8, latency: 40}},
     {title: "Regular 4G", value: {throughput: 4 * 1024 * 1024 / 8, latency: 20}},
     {title: "DSL", value: {throughput: 2 * 1024 * 1024 / 8, latency: 5}},
-    {title: "WiFi", value: {throughput: 30 * 1024 * 1024 / 8, latency: 2}},
-    {title: "No throttling", value: {throughput: -1, latency: 0}}
+    {title: "WiFi", value: {throughput: 30 * 1024 * 1024 / 8, latency: 2}}
 ];
 
+/** @type {!WebInspector.NetworkConditionsProfile} */
+WebInspector.NetworkConditionsSelector._disabledPreset = {title: "No throttling", value: {throughput: -1, latency: 0}};
+
 WebInspector.NetworkConditionsSelector.prototype = {
     _populateOptions: function()
     {
         this._selectElement.removeChildren();
-        var presets = this._customSetting.get().concat(WebInspector.NetworkConditionsSelector._networkConditionsPresets);
+
+        var customGroup = this._addGroup(this._customSetting.get(), WebInspector.UIString("Custom"));
+        customGroup.insertBefore(new Option(WebInspector.UIString("Add..."), WebInspector.UIString("Add...")), customGroup.firstChild);

[pfeldman, 2015/08/17 19:00:12]

Use ellipsis from the unicode set.

[dgozman, 2015/08/19 01:59:11]

Done.

+
+        this._addGroup(WebInspector.NetworkConditionsSelector._networkConditionsPresets, WebInspector.UIString("Presets"));
+        this._addGroup([WebInspector.NetworkConditionsSelector._disabledPreset], WebInspector.UIString("Disabled"));
+
+        this._settingChanged();
+    },
+
+    /**
+     * @param {!Array.<!WebInspector.NetworkConditionsProfile>} presets
+     * @param {string} groupName
+     * @return {!Element}
+     */
+    _addGroup: function(presets, groupName)
+    {
+        var groupElement = this._selectElement.createChild("optgroup");
+        groupElement.label = groupName;
         for (var i = 0; i < presets.length; ++i) {
             var preset = presets[i];
             var throughputInKbps = preset.value.throughput / (1024 / 8);
             var isThrottling = (throughputInKbps > 0) || preset.value.latency;
             var option;
+            var presetTitle = WebInspector.UIString(preset.title);
             if (!isThrottling) {
-                option = new Option(preset.title, preset.title);
+                option = new Option(presetTitle, presetTitle);
             } else {
                 var throughputText = WebInspector.NetworkConditionsSelector.throughputText(preset.value);
-                var title = WebInspector.UIString("%s (%s %dms RTT)", preset.title, throughputText, preset.value.latency);
-                option = new Option(title, preset.title);
+                var title = WebInspector.UIString("%s (%s %dms RTT)", presetTitle, throughputText, preset.value.latency);
+                option = new Option(title, presetTitle);
                 option.title = WebInspector.UIString("Maximum download throughput: %s.\r\nMinimum round-trip time: %dms.", throughputText, preset.value.latency);
             }
             option.settingValue = preset.value;
-            this._selectElement.appendChild(option);
+            groupElement.appendChild(option);
         }
-        this._settingChanged();
+        return groupElement;
     },
 
     _optionSelected: function()
     {
+        if (this._selectElement.selectedIndex === 0) {
+            WebInspector.Revealer.reveal(this._customSetting);
+            this._settingChanged();
+            return;
+        }
+
         this._setting.removeChangeListener(this._settingChanged, this);
         this._setting.set(this._selectElement.options[this._selectElement.selectedIndex].settingValue);
         this._setting.addChangeListener(this._settingChanged, this);
@@ -103,7 +130,7 @@ WebInspector.NetworkConditionsSelector.prototype = {
     {
         var value = this._setting.get();
         var options = this._selectElement.options;
-        for (var index = 0; index < options.length; ++index) {
+        for (var index = 1; index < options.length; ++index) {
             var option = options[index];
             if (option.settingValue.throughput === value.throughput && option.settingValue.latency === value.latency)
                 this._selectElement.selectedIndex = index;