[DevTools] Tweak ListControl API.

third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 44 matching lines @@
    * @param {number=} maxItemsHeight
    * @param {boolean=} captureEnter
    */
   constructor(suggestBoxDelegate, maxItemsHeight, captureEnter) {
     this._suggestBoxDelegate = suggestBoxDelegate;
     this._maxItemsHeight = maxItemsHeight;
     this._maybeHideBound = this._maybeHide.bind(this);
     this._container = createElementWithClass('div', 'suggest-box-container');
     this._rowHeight = 17;
     /** @type {!UI.ListControl<!UI.SuggestBox.Suggestion>} */
-    this._list = new UI.ListControl(this, UI.ListMode.ViewportFixedItems);
+    this._list = new UI.ListControl(this, UI.ListMode.SameHeightItems);
     this._element = this._list.element;
     this._element.classList.add('suggest-box');
     this._container.appendChild(this._element);
     this._element.addEventListener('mousedown', this._onBoxMouseDown.bind(this), true);
     this._detailsPopup = this._container.createChild('div', 'suggest-box details-popup monospace');
     this._detailsPopup.classList.add('hidden');
     this._asyncDetailsCallback = null;
     /** @type {!Map<!UI.SuggestBox.Suggestion, !Promise<{detail: string, description: string}>>} */
     this._asyncDetailsPromises = new Map();
     this._userInteracted = false;
@@ skipping 176 matching lines @@
     if (index > 0)
       titleElement.createChild('span').textContent = displayText.substring(0, index);
     if (index > -1)
       titleElement.createChild('span', 'query').textContent = displayText.substring(index, index + query.length);
     titleElement.createChild('span').textContent = displayText.substring(index > -1 ? index + query.length : 0);
     titleElement.createChild('span', 'spacer');
     if (item.subtitle) {
       var subtitleElement = element.createChild('span', 'suggestion-subtitle');
       subtitleElement.textContent = item.subtitle.trimEnd(15);
     }
-    element.addEventListener('mousedown', this._onItemMouseDown.bind(this), false);
     return element;
   }
 
   /**
    * @override
    * @param {!UI.SuggestBox.Suggestion} item
    * @return {number}
    */
   heightForItem(item) {
     return this._rowHeight;
@@ skipping 24 matching lines @@
       return;
     this._detailsPopup.classList.add('hidden');
     this._asyncDetails(to).then(details => {
       if (this._list.selectedItem() === to)
         this._showDetailsPopup(details);
     });
     this._applySuggestion(true);
   }
 
   /**
+   * @override
+   * @param {!UI.SuggestBox.Suggestion} item
+   * @param {!Element} element
    * @param {!Event} event
    */
-  _onItemMouseDown(event) {
-    if (!this._list.onClick(event))
-      return;
+  itemElementClicked(item, element, event) {
+    this._list.selectItem(item);
     this._userInteracted = true;
+    event.consume(true);
     this.acceptSuggestion();
-    event.consume(true);
   }
 
   /**
    * @param {!UI.SuggestBox.Suggestion} item
    * @return {!Promise<?{detail: string, description: string}>}
    */
   _asyncDetails(item) {
     if (!this._asyncDetailsCallback)
       return Promise.resolve(/** @type {?{description: string, detail: string}} */ (null));
     if (!this._asyncDetailsPromises.has(item))
@@ skipping 53 matching lines @@
       this._asyncDetailsPromises.clear();
       if (asyncDetails)
         this._asyncDetailsCallback = item => asyncDetails(completions.indexOf(item));
       else
         this._asyncDetailsCallback = null;
       this._userEnteredText = userEnteredText;
 
       this._show();
       this._updateBoxPosition(anchorBox, completions.length);
       this._updateWidth(completions);
-      this._list.fixedHeightChanged();
+      this._list.invalidateSameHeight();
       this._list.replaceAllItems(completions);
 
-      var highestPriorityItem = -1;
       if (selectHighestPriority) {
-        var highestPriority = -Infinity;
+        var highestPriorityItem = completions[0];
+        var highestPriority = completions[0].priority || 0;
         for (var i = 0; i < completions.length; i++) {
           var priority = completions[i].priority || 0;
           if (highestPriority < priority) {
             highestPriority = priority;
-            highestPriorityItem = i;
+            highestPriorityItem = completions[i];
           }
         }
+        this._list.selectItem(highestPriorityItem, true);
       }
-      this._list.selectItemAtIndex(highestPriorityItem, true);
     } else {
       if (completions.length === 1) {
         this._onlyCompletion = completions[0].title;
         this._applySuggestion(true);
       }
       this.hide();
     }
   }
 
   /**
    * @param {!KeyboardEvent} event
    * @return {boolean}
    */
   keyPressed(event) {
-    if (this._list.onKeyDown(event)) {
+    var selected = false;
+    switch (event.key) {
+      case 'Enter':
+        return this.enterKeyPressed();
+      case 'ArrowUp':
+        selected = this._list.selectPreviousItem(true, false);
+        break;
+      case 'ArrowDown':
+        selected = this._list.selectNextItem(true, false);
+        break;
+      case 'PageUp':
+        selected = this._list.selectItemPreviousPage(false);
+        break;
+      case 'PageDown':
+        selected = this._list.selectItemNextPage(false);
+        break;
+      default:
+        return false;
+    }
+    if (selected) {
       this._userInteracted = true;
       return true;
     }
-    if (event.key === 'Enter')
-      return this.enterKeyPressed();
     return false;
   }
 
   /**
    * @return {boolean}
    */
   enterKeyPressed() {
     if (!this._userInteracted && this._captureEnter)
       return false;
 
@@ skipping 72 matching lines @@
     this.element.style.left = containerBox.x + 'px';
     this.element.style.top = containerBox.y + 'px';
     this.element.style.height = containerBox.height + 'px';
     this.element.style.width = containerBox.width + 'px';
   }
 
   dispose() {
     this.element.remove();
   }
 };