MD Settings: Use paper-dropdown-menu for search engines.

chrome/browser/resources/settings/search_page/search_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-listbox/paper-listbox.html">
 <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_page.html">
 <link rel="import" href="chrome://md-settings/search_engines_page/search_engines_browser_proxy.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_animated_pages.html">
 <link rel="import" href="chrome://md-settings/settings_page/settings_subheader.html">
 <link rel="import" href="chrome://md-settings/settings_shared_css.html">
 
 <dom-module id="settings-search-page">
-  <link rel="import" type="css" href="search_page.css">
   <template>
-    <style include="settings-shared"></style>
+    <style include="settings-shared">
+      paper-item:hover {
+        background-color: var(--settings-hover-color);
+      }
+    </style>
     <settings-animated-pages id="pages" current-route="{{currentRoute}}"
         section="search">
       <neon-animatable id="main">
         <div class="settings-box first">
           <p class="start" i18n-content="searchExplanation"></p>
-          <select id="searchEnginesMenu" on-change="onDefaultEngineChanged_">
-            <template is="dom-repeat" items="[[searchEngines_]]">
-              <option selected$="[[item.default]]" value="[[item.modelIndex]]">
-                [[item.name]]
-              </option>
-            </template>
-          </select>
+          <paper-dropdown-menu>
+            <paper-listbox class="dropdown-content"
+                selected="[[getSelectedSearchEngineIndex_(searchEngines_)]]"
+                on-iron-select="onIronSelect_">
+              <template is="dom-repeat" items="[[searchEngines_]]">
+                <paper-item>[[item.name]]</paper-item>

[dschuyler, 2016/03/30 02:42:19]

Will these paper-items work as <div>s?

[dpapad, 2016/03/30 17:36:54]

Done, but it requires basically copying over all styles from paper-item to the
divs. See latest patch. Let me know if you think this is worth it, or I should
revert to previous patch.

Eventually it would be nice to unify our dropdown menus which currently are not
consistent, to use one of the following.
1) paper-menu + paper-item
2) paper-listbox + div
3) paper-listbox + paper-item

No1 which is what currently we have been using in most places is not ideal
(paper-menu was designed for submenus and I think it has been deprecated).

[dschuyler, 2016/03/30 20:42:54]

That sounds good to me.  I think option 2 will serve us best.
Let's check with Dan and Michael.

I also think that putting the styling in a style-module would
be nice (so that it doesn't need to be replicated).  That, IMO,
could be done when the second dropdown is converted (i.e. it 
doesn't need to be this CL since this is the one copy of it now).

+              </template>
+            </paper-listbox>
+          </paper-dropdown-menu>
         </div>
         <div class="settings-box">
           <paper-button i18n-content="searchEnginesManage"
               on-tap="onManageSearchEnginesTap_" class="primary-button">
           </paper-button>
         </div>
       </neon-animatable>
       <neon-animatable id="search-engines">
         <settings-subheader i18n-values="page-title:searchEnginesManage">
         </settings-subheader>
         <settings-search-engines-page></settings-search-engines-page>
       </neon-animatable>
     </settings-animated-pages>
   </template>
   <script src="search_page.js"></script>
 </dom-module>