[DevTools] Group options in network presets select.

Source/devtools/front_end/components/NetworkConditionsSelector.js

 // Copyright 2015 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
  * @param {!HTMLSelectElement} selectElement
  */
 WebInspector.NetworkConditionsSelector = function(selectElement)
 {
@@ skipping 46 matching lines @@
 /** @type {!Array.<!WebInspector.NetworkConditionsProfile>} */
 WebInspector.NetworkConditionsSelector._networkConditionsPresets = [
     {title: "Offline", value: {throughput: 0 * 1024 / 8, latency: 0}},
     {title: "GPRS", value: {throughput: 50 * 1024 / 8, latency: 500}},
     {title: "Regular 2G", value: {throughput: 250 * 1024 / 8, latency: 300}},
     {title: "Good 2G", value: {throughput: 450 * 1024 / 8, latency: 150}},
     {title: "Regular 3G", value: {throughput: 750 * 1024 / 8, latency: 100}},
     {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);
     },
 
     _settingChanged: function()
     {
         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;
         }
     }
 }
 
 
 /**
  * @constructor
@@ skipping 255 matching lines @@
         if (this._editConditionsListItem)
             this._editConditionsListItem.classList.remove("hidden");
         if (this._editConditionsElement.parentElement)
             this._conditionsList.removeChild(this._editConditionsElement);
         this._addCustomButton.disabled = false;
         this._addCustomButton.focus();
     },
 
     __proto__: WebInspector.VBox.prototype
 }