Relanding MD Settings: Improve rendering performance of fonts page.

First version of this CL was reverted (cl/2119733002).

The fonts page includes a few very large <settings-dropdown-menu> instances.
While implementing force-rendering for the purposes of "search within settings"
it was revealed that it occupied about 1.3s of the main thread to render itself.
There are two separate improvements bundled in this CL.
 1) Replace <paper-item> with a simple styled <div>. This change alone reduces
    total rendering time from 1.3s to 0.25s.
 2) Use the new initialCount feature for dom-repeat to yield, instead of
    rendering the entire template all at once.

BUG=602896,608535
TEST=Click on "Customize fonts", observe how much faster the subpage opens.
CQ_INCLUDE_TRYBOTS=tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2114793002
Cr-Commit-Position: refs/heads/master@{#403366}

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">
@@ -10,9 +9,18 @@
 <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 {
@@ -31,13 +39,17 @@
         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>