[DevTools] Tweak ListControl API.

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 e55d2d8e3bed3806dfac20e08e00370515ad27cc..b1144999c20efd3a17d77f3aab050d47109f2e63 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
@@ -36,10 +36,9 @@ UI.FilteredListWidget = class extends UI.VBox {
     this._progressBarElement = this._progressElement.createChild('div', 'filtered-list-widget-progress-bar');
 
     /** @type {!UI.ListControl<number>} */
-    this._list = new UI.ListControl(this, UI.ListMode.ViewportFixedItemsMeasured);
+    this._list = new UI.ListControl(this, UI.ListMode.SameHeightItems);
     this._itemElementsContainer = this._list.element;
     this._itemElementsContainer.classList.add('container');
-    this._itemElementsContainer.addEventListener('click', this._onClick.bind(this), false);
     this.contentElement.appendChild(this._itemElementsContainer);
 
     this.setDefaultFocusedElement(this._promptElement);
@@ -87,7 +86,7 @@ UI.FilteredListWidget = class extends UI.VBox {
    * @override
    */
   wasShown() {
-    this._list.fixedHeightChanged();
+    this._list.invalidateSameHeight();
   }
 
   /**
@@ -146,6 +145,7 @@ UI.FilteredListWidget = class extends UI.VBox {
    * @return {number}
    */
   heightForItem(item) {
+    // Let the list measure items for us.
     return 0;
   }
 
@@ -173,6 +173,20 @@ UI.FilteredListWidget = class extends UI.VBox {
   }
 
   /**
+   * @override
+   * @param {number} item
+   * @param {!Element} element
+   * @param {!Event} event
+   */
+  itemElementClicked(item, element, event) {

[pfeldman, 2017/01/04 02:07:50]

Can we rely upon event bubbling here?

+    event.consume(true);
+    // Detach dialog before allowing delegate to override focus.
+    if (this._dialog)
+      this._dialog.detach();
+    this._delegate.selectItemWithQuery(item, this._value());
+  }
+
+  /**
    * @param {string} query
    */
   setQuery(query) {
@@ -291,7 +305,7 @@ UI.FilteredListWidget = class extends UI.VBox {
     filteredItems = [].concat(bestItems, overflowItems, filteredItems);
     this._list.replaceAllItems(filteredItems);
     if (filteredItems.length)
-      this._list.selectItemAtIndex(0, true);
+      this._list.selectItem(filteredItems[0]);
     this._itemsFilteredForTest();
   }
 
@@ -316,20 +330,29 @@ UI.FilteredListWidget = class extends UI.VBox {
    * @param {!Event} event
    */
   _onKeyDown(event) {
-    if (this._list.onKeyDown(event)) {
-      event.consume(true);
-      return;
-    }
-
-    switch (event.keyCode) {
-      case UI.KeyboardShortcut.Keys.Enter.code:
+    var handled = false;
+    switch (event.key) {
+      case 'Enter':
         this._onEnter(event);
-        break;
-      case UI.KeyboardShortcut.Keys.Tab.code:
+        return;
+      case 'Tab':
         this._tabKeyPressed();
+        return;
+      case 'ArrowUp':
+        handled = this._list.selectPreviousItem(true, false);
+        break;
+      case 'ArrowDown':
+        handled = this._list.selectNextItem(true, false);
+        break;
+      case 'PageUp':
+        handled = this._list.selectItemPreviousPage(false);
+        break;
+      case 'PageDown':
+        handled = this._list.selectItemNextPage(false);
         break;
-      default:
     }
+    if (handled)
+      event.consume(true);
   }
 
   _scheduleFilter() {
@@ -337,20 +360,6 @@ UI.FilteredListWidget = class extends UI.VBox {
       return;
     this._filterTimer = setTimeout(this._filterItems.bind(this), 0);
   }
-
-  /**
-   * @param {!Event} event
-   */
-  _onClick(event) {
-    if (!this._list.onClick(event))
-      return;
-
-    event.consume(true);
-    // Detach dialog before allowing delegate to override focus.
-    if (this._dialog)
-      this._dialog.detach();
-    this._delegate.selectItemWithQuery(this._list.selectedItem(), this._value());
-  }
 };