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

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

Index: chrome/browser/resources/settings/search_page/search_page.html
diff --git a/chrome/browser/resources/settings/search_page/search_page.html b/chrome/browser/resources/settings/search_page/search_page.html
index 3b6f34bd6abeb1f77a1a16f7856e42c5eefab3d4..8f47d8a0fbe94fb46144ad95f69bbddd411ee1ff 100644
--- a/chrome/browser/resources/settings/search_page/search_page.html
+++ b/chrome/browser/resources/settings/search_page/search_page.html
@@ -1,6 +1,9 @@
 <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">
@@ -8,21 +11,26 @@
 <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"