Tab Search: Add fixed height tabContents container

This CL adds a wrapping container around the tab search list items.

The height of the container is updated as the number of items to
be rendered is updated. This allows the tabContents container to
assert the final list height even as the items are rendered
piecemeal in dom-repeat's chunking mode.

This is dependent on the following:
  https://crrev.com/c/2417548

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

chrome/browser/resources/tab_search_merge/app.html

@@ -6,6 +6,10 @@
     position: relative;
   }
 
+  #tabsContainer {
+    height: calc(var(--mwb-item-height) * var(--item-count, 0));
+  }
+
   #no-results {
     color: var(--cr-primary-text-color);
     font-size: var(--mwb-primary-text-font-size);
@@ -59,17 +63,19 @@
     on-keydown="onSearchKeyDown_" on-search-changed="onSearchChanged_">
 </tab-search-search-field>
 <div id="tabs">
-  <iron-selector id="selector" on-keydown="onItemKeyDown_"
-      selected="{{selectedIndex_}}" selected-class="selected" role="listbox">
-    <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]"
-        initial-count="[[chunkingItemCount_]]">
-      <tab-search-item id="[[item.tabId]]" aria-label="[[ariaLabel_(item)]]"
-          class="mwb-list-item" data="[[item]]"
-          on-click="onItemClick_" on-close="onItemClose_"
-          on-focus="onItemFocus_" tabindex="0" role="option">
-      </tab-search-item>
-    </template>
-  </iron-selector>
+  <div id="tabsContainer">
+    <iron-selector id="selector" on-keydown="onItemKeyDown_"
+        selected="{{selectedIndex_}}" selected-class="selected" role="listbox">
+      <template id="tabsList" is="dom-repeat" items="[[filteredOpenTabs_]]"
+          initial-count="[[chunkingItemCount_]]">
+        <tab-search-item id="[[item.tabId]]" aria-label="[[ariaLabel_(item)]]"
+            class="mwb-list-item" data="[[item]]"
+            on-click="onItemClick_" on-close="onItemClose_"
+            on-focus="onItemFocus_" tabindex="0" role="option">
+        </tab-search-item>
+      </template>
+    </iron-selector>
+  </div>
 </div>
 <div id="no-results" hidden="[[filteredOpenTabs_.length]]">
   $i18n{noResultsFound}

chrome/browser/resources/tab_search_merge/app.js

@@ -383,6 +383,13 @@ export class TabSearchAppElement extends PolymerElement {
         b.lastActiveTimeTicks.internalValue - a.lastActiveTimeTicks.internalValue :
         0);
     this.filteredOpenTabs_ = fuzzySearch(this.searchText_, result);
+
+    // Update the item count in css so that the css rule can calculate the final
+    // height of the tabsContainer. This prevents the scrolling height from
+    // changing as list items are added to the dom incrementally via chunking
+    // mode.
+    this.$.tabsContainer.style
+      .setProperty("--item-count", this.filteredOpenTabs_.length.toString());
   }
 
   /**