DevTools: generalize setting UI for enum/select settings

third_party/WebKit/Source/devtools/front_end/settings/SettingsScreen.js

 /*
  * Copyright (C) 2013 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 114 matching lines @@
   /**
    *  @param {string=} name
    *  @return {!Element}
    */
   _appendSection(name) {
     var block = this.containerElement.createChild('div', 'help-block');
     if (name)
       block.createChild('div', 'help-section-title').textContent = name;
     return block;
   }
-
-  _createSelectSetting(name, options, setting) {
-    var p = createElement('p');
-    p.createChild('label').textContent = name;
-
-    var select = p.createChild('select', 'chrome-select');
-    var settingValue = setting.get();
-
-    for (var i = 0; i < options.length; ++i) {
-      var option = options[i];
-      select.add(new Option(option[0], option[1]));
-      if (settingValue === option[1])
-        select.selectedIndex = i;
-    }
-
-    function changeListener(e) {
-      // Don't use e.target.value to avoid conversion of the value to string.
-      setting.set(options[select.selectedIndex][1]);
-    }
-
-    select.addEventListener('change', changeListener, false);
-    return p;
-  }
 };
 
 /**
  * @unrestricted
  */
 Settings.GenericSettingsTab = class extends Settings.SettingsTab {
   constructor() {
     super(Common.UIString('Preferences'), 'preferences-tab-content');
 
     /** @const */
@@ skipping 43 matching lines @@
     var uiTitle = Common.UIString(extension.title());
 
     var sectionElement = this._sectionElement(sectionName);
     var settingControl;
 
     switch (descriptor['settingType']) {
       case 'boolean':
         settingControl = UI.SettingsUI.createSettingCheckbox(uiTitle, setting);
         break;
       case 'enum':
-        var descriptorOptions = descriptor['options'];
-        var options = new Array(descriptorOptions.length);
-        for (var i = 0; i < options.length; ++i) {
-          // The "raw" flag indicates text is non-i18n-izable.
-          var optionName = descriptorOptions[i]['raw'] ? descriptorOptions[i]['text'] :
-                                                         Common.UIString(descriptorOptions[i]['text']);
-          options[i] = [optionName, descriptorOptions[i]['value']];
-        }
-        settingControl = this._createSelectSetting(uiTitle, options, setting);
+        if (Array.isArray(descriptor['options']))
+          settingControl = UI.SettingsUI.createSettingSelect(uiTitle, descriptor['options'], setting);
+        else
+          console.error('Enum setting defined without options');
         break;
       default:
         console.error('Invalid setting type: ' + descriptor['settingType']);
         return;
     }
-    this._nameToSettingElement.set(settingName, settingControl);
-    sectionElement.appendChild(/** @type {!Element} */ (settingControl));
+    if (settingControl) {
+      this._nameToSettingElement.set(settingName, settingControl);
+      sectionElement.appendChild(settingControl);
+    }
   }
 
   /**
    * @param {!Runtime.Extension} extension
    */
   _addSettingUI(extension) {
     var descriptor = extension.descriptor();
     var sectionName = descriptor['category'] || '';
     extension.instance().then(appendCustomSetting.bind(this));
 
@@ skipping 151 matching lines @@
         return;
       var settings = extension.descriptor()['settings'];
       if (settings && settings.indexOf(setting.name) !== -1) {
         InspectorFrontendHost.bringToFront();
         Settings.SettingsScreen._showSettingsScreen(extension.descriptor()['id']);
         success = true;
       }
     }
   }
 };