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]]" item-count="5">

[michaelpg, 2016/06/29 15:12:15]

why not 1?

[dpapad, 2016/06/29 17:16:26]

1 seems a bit extreme in the sense that it would trigger more yielding than
necessary. If we assume that we want to yield at least within 16ms, then
rendering a single div when we get the execution control means that we yield
even though there was plenty of time to render a few more divs within our time
window. (I am assuming that rendering a single <div> takes much less than 16ms).

Regardless of theory above, in practice I tried both 1 and 5 and could not
notice a difference. I am fine with 1 if you think it is not overly
conservative.

+          <div class="item" data-value$="[[item.value]]">[[item.name]]</div>

[michaelpg, 2016/06/29 15:12:15]

Can you try with a <button class="paper-item" role="option"> rather than a div,
to retain the styling and a11y of a paper-item for free?

You would need to pull in https://github.com/PolymerElements/paper-item/pull/86
first. The goal is to land that PR, roll it up into Chrome and then convert
*all* of our paper-items to native buttons for a modest performance gain.

<div> may well save us even more than <button> but I haven't gotten numbers on
that (and it's not the direction Polymer went).

[dpapad, 2016/06/29 17:16:26]

Tried your suggestion. I am seeing two problems with it
1) When I click on any menu option, nothing happens (the option is not selected
and the menu does not close).
2) When the menu is collapsed, no value is being displayed.

I did not go further into comparing <div> VS <button> performance.

[michaelpg, 2016/06/29 18:18:37]

Could you upload what you have? It works fine for me, even replicating the
attr-for-selected and item-count stuff:

https://jsfiddle.net/yecdn72d/2/

If there's a bug in paper-item-shared-styles blocking us from using it we should
open an issue on PolymerElements/paper-item.

         </template>
-        <paper-item data-value$="[[notFoundValue_]]"
+        <div class="item" 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>