Tab Search: Update Tab Search to use chunked rendering

This CL uses Polymer's dom-repeat chunking mode for the Tab Search
list items. This allows an initial small list of tabs to be rendered,
allowing the bubble appear at the correct size without waiting for
the entire list to render.

Bug: 1099917
Change-Id: Ib30d69923383e37e8241f62ed546ddb9ad73bbfd
Reviewed-on: https://chrome-internal-review.googlesource.com/c/chrome/browser/resources/tab_search/+/3270637Reviewed-by: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#819600}

chrome/browser/resources/tab_search_merge/app.html

@@ -61,7 +61,8 @@
 <div id="tabs">
   <iron-selector id="selector" on-keydown="onItemKeyDown_"
       selected="{{selectedIndex_}}" selected-class="selected">
-    <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]">
+    <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]"
+        initial-count="[[chunkingItemCount_]]">
       <tab-search-item id="[[item.tabId]]" class="mwb-list-item" data="[[item]]"
           on-click="onItemClick_" on-close="onItemClose_"
           on-focus="onItemFocus_" tabindex="0" >

chrome/browser/resources/tab_search_merge/app.js

@@ -49,6 +49,17 @@ export class TabSearchAppElement extends PolymerElement {
         type: Array,
         value: [],
       },
+
+      /**
+       * Controls the number of tab search list items initially rendered in
+       * dom-repeat's chunked rendering mode.
+       * @private {number}
+       */
+      chunkingItemCount_: {
+        type: Number,
+        readOnly: true,
+        value: 10,
+      },
     };
   }
 
@@ -89,8 +100,8 @@ export class TabSearchAppElement extends PolymerElement {
       if (!this.openTabs_) {
         listenOnce(this.$.tabsList, 'rendered-item-count-changed', e => {
           const event = /** @type {!CustomEvent<!{value: number}>} */ (e);
-          // Ensure that the full list of tabs has been rendered.
-          assert(event.detail.value === this.filteredOpenTabs_.length);
+          // The initial rendered tab list must be non-zero.
+          assert(event.detail.value > 0);
 
           // Push showUI() to the event loop to allow reflow to occur following
           // the DOM update.