Relanding MD Settings: Improve rendering performance of fonts page.

chrome/browser/resources/settings/controls/settings_dropdown_menu.html

 <link rel="import" href="chrome://resources/html/polymer.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="/controls/pref_control_behavior.html">
 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/prefs/pref_util.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="settings-dropdown-menu">
   <template>
     <style include="settings-shared">
-      paper-item {
+      .item {
+        align-items: center;
         color: var(--paper-grey-800);
+        display: flex;
         font-size: inherit;
+        min-height: 48px;
+        padding: 0 16px;
+      }
+
+      .item:focus {
+        background-color: var(--paper-grey-300);
+        outline: none;
       }
 
       paper-dropdown-menu {
         --iron-icon-fill-color: var(--paper-grey-600);
         --paper-font-subhead: {
           font-size: inherit;
         };
         --paper-input-container-underline: {
           background: var(--paper-grey-300);
         };
         width: 160px;
       }
      </style>
     <paper-dropdown-menu id="dropdownMenu" label="[[menuLabel_]]"
         on-iron-select="onSelect_" no-label-float$="[[noLabelFloat]]"
         disabled="[[shouldDisableMenu_(disabled, menuOptions.*)]]">
       <paper-listbox class="dropdown-content" selected="{{selected_}}"
           attr-for-selected="data-value">
-        <template is="dom-repeat" items="[[menuOptions]]">
-          <paper-item data-value$="[[item.value]]">[[item.name]]</paper-item>
+        <template is="dom-repeat" items="[[menuOptions]]" initial-count="5">
+          <!--TODO(dpapad): Use <button class="paper-item">..</button> once it
+              lands in paper-item-shared-styles.html-->
+          <div class="item" role="option" data-value$="[[item.value]]">
+            [[item.name]]
+          </div>
         </template>
-        <paper-item data-value$="[[notFoundValue_]]"
+        <div class="item" role="option" data-value$="[[notFoundValue_]]"
             hidden$="[[!isSelectedNotFound_(selected_)]]">
           $i18n{custom}
-        </paper-item>
+        </div>
       </paper-listbox>
     </paper-dropdown-menu>
   </template>
   <script src="settings_dropdown_menu.js"></script>
 </dom-module>