DevTools: generalize setting UI for enum/select settings

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

 /*
  * Copyright (C) 2014 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 36 matching lines @@
 
   if (omitParagraphElement)
     return label;
 
   var p = createElement('p');
   p.appendChild(label);
   return p;
 };
 
 /**
+ * @param {string} name
+ * @param {!Array<!Runtime.ExtensionDescriptor.Option>} options
+ * @param {!Common.Setting} setting
+ * @return {!Element}
+ */
+UI.SettingsUI.createSettingSelect = function(name, options, setting) {

[pfeldman, 2017/05/10 20:58:42]

Oh, this is a good one!

[luoe, 2017/05/11 21:39:43]

XD

+  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 = /** @type {!Runtime.ExtensionDescriptor.Option} */ (options[i]);
+    var optionText = /** @type {string} */ (option.text);
+    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();
+    if (options[select.selectedIndex].value !== newValue) {

[pfeldman, 2017/05/10 20:58:42]

Why did you add this line? I don't think it makes sense.

[luoe, 2017/05/11 21:39:43]

Done.

+      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
  */
 UI.SettingsUI.bindCheckbox = function(input, setting) {
   function settingChanged() {
     if (input.checked !== setting.get())
       input.checked = setting.get();
   }
   setting.addChangeListener(settingChanged);
   settingChanged();
@@ skipping 37 matching lines @@
  * @interface
  */
 UI.SettingUI = function() {};
 
 UI.SettingUI.prototype = {
   /**
    * @return {?Element}
    */
   settingElement() {}
 };