MD Settings: Improve rendering performance of fonts page.

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

Index: chrome/browser/resources/settings/controls/settings_dropdown_menu.html
diff --git a/chrome/browser/resources/settings/controls/settings_dropdown_menu.html b/chrome/browser/resources/settings/controls/settings_dropdown_menu.html
index cc724f5cede26e2173d81c95c27a0e523ddc4ef0..6f8900c5a9b9bb8c23f3261610196c5d8d89dc56 100644
--- a/chrome/browser/resources/settings/controls/settings_dropdown_menu.html
+++ b/chrome/browser/resources/settings/controls/settings_dropdown_menu.html
@@ -1,6 +1,5 @@
 <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,13 @@
         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>