[DevTools] Replace ViewportControl with ListControl.

third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js

Index: third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
index 7cb25afe43d69abeea683fee6793bab7e874db82..80e158c603c3ed858dfb1bd8a2362f8cfbcf41bb 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
@@ -4,7 +4,6 @@
  * found in the LICENSE file.
  */
 /**
- * @implements {UI.ViewportControl.Provider}
  * @unrestricted
  */
 UI.FilteredListWidget = class extends UI.VBox {
@@ -35,9 +34,11 @@ UI.FilteredListWidget = class extends UI.VBox {
     this._progressElement = this.contentElement.createChild('div', 'filtered-list-widget-progress');
     this._progressBarElement = this._progressElement.createChild('div', 'filtered-list-widget-progress-bar');
 
+    /** @type {!Array<number>} */
     this._filteredItems = [];
-    this._viewportControl = new UI.ViewportControl(this);
-    this._itemElementsContainer = this._viewportControl.element;
+    /** @type {!UI.ViewportControl<{index: number}>} */
+    this._viewport = new UI.ViewportControl(this._createItemElement.bind(this));
+    this._itemElementsContainer = this._viewport.element;
     this._itemElementsContainer.classList.add('container');
     this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
     this.contentElement.appendChild(this._itemElementsContainer);
@@ -48,10 +49,6 @@ UI.FilteredListWidget = class extends UI.VBox {
     this._delegate.setRefreshCallback(this._itemsLoaded.bind(this));
     this._itemsLoaded();
     this._updateShowMatchingItems();
-    this._viewportControl.refresh();
-
-    /** @typedef {!Array.<!Element>} */
-    this._elements = [];
   }
 
   /**
@@ -92,6 +89,7 @@ UI.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   willHide() {
+    this._rowHeight = 0;
     this._delegate.dispose();
     if (this._filterTimer)
       clearTimeout(this._filterTimer);
@@ -111,7 +109,8 @@ UI.FilteredListWidget = class extends UI.VBox {
     // Detach dialog before allowing delegate to override focus.
     if (this._dialog)
       this._dialog.detach();
-    this._delegate.selectItemWithQuery(selectedIndex, this._value());
+    if (selectedIndex !== null)
+      this._delegate.selectItemWithQuery(selectedIndex, this._value());
   }
 
   _itemsLoaded() {
@@ -126,10 +125,11 @@ UI.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
-   * @param {number} index
+   * @param {{index: number}} item
    * @return {!Element}
    */
-  _createItemElement(index) {
+  _createItemElement(item) {
+    var index = item.index;
     var itemElement = createElement('div');
     itemElement.className = 'filtered-list-widget-item ' + (this._renderAsTwoRows ? 'two-rows' : 'one-row');
     itemElement._titleElement = itemElement.createChild('div', 'filtered-list-widget-title');
@@ -269,9 +269,15 @@ UI.FilteredListWidget = class extends UI.VBox {
         break;
       }
     }
-    this._elements = [];
-    this._viewportControl.refresh();
-    this._updateSelection(this._selectedIndexInFiltered, false);
+    var items = new Array(this._filteredItems.length);
+    for (var i = 0; i < this._filteredItems.length; i++)
+      items[i] = {index: this._filteredItems[i]};
+    this._viewport.replaceAllItems(items);
+    if (!this._rowHeight && this._viewport.length()) {
+      this._rowHeight = UI.measurePreferredSize(this._viewport.elementAtIndex(0), this._itemElementsContainer).height;
+      this._viewport.setFixedHeight(this._rowHeight);
+    }
+    this._updateSelection(this._selectedIndexInFiltered);
     this._itemsFilteredForTest();
   }
 
@@ -296,7 +302,7 @@ UI.FilteredListWidget = class extends UI.VBox {
    * @return {number}
    */
   _rowsPerViewport() {
-    return Math.floor(this._viewportControl.element.clientHeight / this._rowHeight);
+    return this._rowHeight ? Math.floor(this._viewport.element.clientHeight / this._rowHeight) : 0;
   }
 
   _onKeyDown(event) {
@@ -306,23 +312,23 @@ UI.FilteredListWidget = class extends UI.VBox {
       case UI.KeyboardShortcut.Keys.Down.code:
         if (++newSelectedIndex >= this._filteredItems.length)
           newSelectedIndex = 0;
-        this._updateSelection(newSelectedIndex, true);
+        this._updateSelection(newSelectedIndex);
         event.consume(true);
         break;
       case UI.KeyboardShortcut.Keys.Up.code:
         if (--newSelectedIndex < 0)
           newSelectedIndex = this._filteredItems.length - 1;
-        this._updateSelection(newSelectedIndex, false);
+        this._updateSelection(newSelectedIndex);
         event.consume(true);
         break;
       case UI.KeyboardShortcut.Keys.PageDown.code:
         newSelectedIndex = Math.min(newSelectedIndex + this._rowsPerViewport(), this._filteredItems.length - 1);
-        this._updateSelection(newSelectedIndex, true);
+        this._updateSelection(newSelectedIndex);
         event.consume(true);
         break;
       case UI.KeyboardShortcut.Keys.PageUp.code:
         newSelectedIndex = Math.max(newSelectedIndex - this._rowsPerViewport(), 0);
-        this._updateSelection(newSelectedIndex, false);
+        this._updateSelection(newSelectedIndex);
         event.consume(true);
         break;
       case UI.KeyboardShortcut.Keys.Enter.code:
@@ -343,16 +349,15 @@ UI.FilteredListWidget = class extends UI.VBox {
 
   /**
    * @param {number} index
-   * @param {boolean} makeLast
    */
-  _updateSelection(index, makeLast) {
+  _updateSelection(index) {
     if (!this._filteredItems.length)
       return;
     if (this._selectedElement)
       this._selectedElement.classList.remove('selected');
-    this._viewportControl.scrollItemIntoView(index, makeLast);
+    this._viewport.scrollItemAtIndexIntoView(index);
     this._selectedIndexInFiltered = index;
-    this._selectedElement = this._elements[index];
+    this._selectedElement = this._viewport.elementAtIndex(index);
     if (this._selectedElement)
       this._selectedElement.classList.add('selected');
   }
@@ -367,39 +372,6 @@ UI.FilteredListWidget = class extends UI.VBox {
       this._dialog.detach();
     this._delegate.selectItemWithQuery(itemElement._index, this._value());
   }
-
-  /**
-   * @override
-   * @return {number}
-   */
-  itemCount() {
-    return this._filteredItems.length;
-  }
-
-  /**
-   * @override
-   * @param {number} index
-   * @return {number}
-   */
-  fastItemHeight(index) {
-    if (!this._rowHeight) {
-      var delegateIndex = this._filteredItems[index];
-      var element = this._createItemElement(delegateIndex);
-      this._rowHeight = UI.measurePreferredSize(element, this._itemElementsContainer).height;
-    }
-    return this._rowHeight;
-  }
-
-  /**
-   * @override
-   * @param {number} index
-   * @return {!Element}
-   */
-  itemElement(index) {
-    if (!this._elements[index])
-      this._elements[index] = this._createItemElement(this._filteredItems[index]);
-    return this._elements[index];
-  }
 };