Replace buttons with dropdown

css/app.css

@@ -1136,7 +1136,7 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
 .inspector-hover .entity-editor-pane .header button,
 .inspector-hover .spin-control,
 .inspector-hover .hide-toggle:before,
-.inspector-hover .more-buttons,
+.inspector-hover .more-fields,
 .inspector-hover .form-label-button-wrap,
 .inspector-hover .tag-reference-button,
 .inspector-hover .view-on-osm {
@@ -1161,9 +1161,9 @@ a:hover .icon.out-link   { background-position: -500px -14px;}
     border-bottom-left-radius: 4px;
 }
 
-.inspector-hover .inspector-body .more-buttons {
+.inspector-hover .more-fields {
     max-height: 0;
-    padding-bottom: 0;
+    margin-bottom: -10px;
 }
 
 /* Unstyle button fields */
@@ -1231,7 +1231,7 @@ input,
 .entity-editor-pane .header button,
 .toggle-list label span,
 .spin-control,
-.more-buttons,
+.more-fields,
 .view-on-osm,
 .hide-toggle:before,
 .entity-editor-pane .toggle-list label::before,
@@ -1265,8 +1265,8 @@ input,
 
 /* adding additional preset fields */
 
-.inspector-body .more-buttons {
-    max-height: 100px;
+.inspector-inner .more-fields {
+    font-weight: bold;
     padding-top: 0;
     -webkit-transition: padding 200ms 200ms, max-height 200ms 200ms;
        -moz-transition: padding 200ms 200ms, max-height 200ms 200ms;

js/id/ui/preset.js

@@ -98,7 +98,7 @@ iD.ui.preset = function(context) {
         // Enter
 
         var $enter = $fields.enter()
-            .insert('div', '.more-buttons')
+            .insert('div', '.more-fields')
             .attr('class', function(field) {
                 return 'form-field form-field-' + field.id;
             });
@@ -156,30 +156,54 @@ iD.ui.preset = function(context) {
         $fields.exit()
             .remove();
 
-        var $more = selection.selectAll('.more-buttons')
+        notShown = notShown.map(function(field) {
+            return {
+                title: field.label(),
+                value: field.label(),
+                field: field
+            };
+        });
+
+        function notShown_placeholder() {
+            var placeholder = [];
+            for (var field in notShown) {
+                placeholder.push(notShown[field].title);
+            }
+            return placeholder.slice(0,3).join(', ') + ((placeholder.length > 3) ? '…' : '');
+        }
+
+        var $more = $form.selectAll('.more-fields')
+            .data((notShown.length > 0) ? [0] : []);
+
+        var $input = $more.selectAll('.value')
             .data([0]);
 
         $more.enter().append('div')
-            .attr('class', 'more-buttons inspector-inner');
+            .attr('class', 'more-fields')
+            .append('label')
+                .text('Add additional fields');
 
-        var $buttons = $more.selectAll('.preset-add-field')
-            .data(notShown, fieldKey);
+        $input.enter().append('input')
+            .attr('class', 'value')
+            .attr('type', 'text')
+            .attr('placeholder', notShown_placeholder);
 
-        $buttons.enter()
-            .append('button')
-            .attr('class', 'preset-add-field')
-            .call(bootstrap.tooltip()
-                .placement('top')
-                .title(function(d) { return d.label(); }))
-            .append('span')
-            .attr('class', function(d) { return 'icon ' + d.icon; });
+        $input.call(d3.combobox().data(notShown)
+            .minItems(1)
+            .on('accept', function(item) {
+                show(item);
+                $input.value('')
+                    .attr('placeholder', notShown_placeholder);
+            }));
 
-        $buttons.on('click', show);
+        $more.exit()
+            .remove();
 
-        $buttons.exit()
+        $input.exit()
             .remove();
 
         function show(field) {
+            field = field.field;
             field.show = true;
             presets(selection);
             field.input.focus();