DevTools: generalize setting UI for enum/select settings

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

Index: third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js b/third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js
index abb0b9c1875c065117ed006023aca3dcbf024e22..a6070a21f9870b250df041cf711e6c9703a38241 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SettingsUI.js
@@ -53,6 +53,44 @@ UI.SettingsUI.createSettingCheckbox = function(name, setting, omitParagraphEleme
   return p;
 };
 
+/**
+ * @param {string} name
+ * @param {!Array<!{title: string, text: (string|undefined), value: *, raw: (boolean|undefined)}>} options

[dgozman, 2017/05/15 18:57:25]

You are not using title anywhere.

[luoe, 2017/05/16 00:05:37]

Done.

+ * @param {!Common.Setting} setting
+ * @return {!Element}
+ */
+UI.SettingsUI.createSettingSelect = function(name, options, setting) {
+  var p = createElement('p');
+  p.createChild('label').textContent = name;
+  var select = p.createChild('select', 'chrome-select');
+
+  for (var i = 0; i < options.length; ++i) {
+    // The "raw" flag indicates text is non-i18n-izable.
+    var option = options[i];
+    var optionText = /** @type {string} */ (option.text);

[dgozman, 2017/05/15 18:57:25]

option.text || ''

Or even better - make text non-optional.

[luoe, 2017/05/16 00:05:38]

Yeah, it makes sense that a select dropdown requires text for each option.

+    var optionName = option.raw ? optionText : Common.UIString(optionText);
+    select.add(new Option(optionName, option.value));
+  }
+
+  setting.addChangeListener(settingChanged);
+  settingChanged();
+  select.addEventListener('change', selectChanged, false);
+  return p;
+
+  function settingChanged() {
+    var newValue = setting.get();
+    for (var i = 0; i < options.length; i++) {
+      if (options[i].value === newValue)
+        select.selectedIndex = i;
+    }
+  }
+
+  function selectChanged() {
+    // Don't use event.target.value to avoid conversion of the value to string.
+    setting.set(options[select.selectedIndex].value);
+  }
+};
+
 /**
  * @param {!Element} input
  * @param {!Common.Setting} setting