[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 45 matching lines @@
    * @param {boolean=} captureEnter
    */
   constructor(suggestBoxDelegate, maxItemsHeight, captureEnter) {
     this._suggestBoxDelegate = suggestBoxDelegate;
     this._maxItemsHeight = maxItemsHeight;
     this._maybeHideBound = this._maybeHide.bind(this);
     this._hideBound = this.hide.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.EqualHeightItems);
     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._userInteracted = false;
     this._captureEnter = captureEnter;
     this._viewportWidth = '100vw';
     this._hasVerticalScroll = false;
     this._userEnteredText = '';
   }
@@ skipping 178 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(maxTextLength - displayText.length);
     }
-    element.addEventListener('mousedown', this._onItemMouseDown.bind(this), false);
+
+    element.addEventListener('click', event => {
+      this._list.selectItem(item);
+      this._userInteracted = true;
+      event.consume(true);
+      this.acceptSuggestion();
+    });
     return element;
   }
 
   /**
    * @override
    * @param {!UI.SuggestBox.Suggestion} item
    * @return {number}
    */
   heightForItem(item) {
     return this._rowHeight;
@@ skipping 19 matching lines @@
     if (fromElement)
       fromElement.classList.remove('selected', 'force-white-icons');
     if (toElement)
       toElement.classList.add('selected', 'force-white-icons');
     if (!to)
       return;
     this._applySuggestion(true);
   }
 
   /**
-   * @param {!Event} event
-   */
-  _onItemMouseDown(event) {
-    if (!this._list.onClick(event))
-      return;
-    this._userInteracted = true;
-    this.acceptSuggestion();
-    event.consume(true);
-  }
-
-  /**
    * @param {!UI.SuggestBox.Suggestions} completions
    * @param {boolean} canShowForSingleItem
    * @param {string} userEnteredText
    * @return {boolean}
    */
   _canShowBox(completions, canShowForSingleItem, userEnteredText) {
     if (!completions || !completions.length)
       return false;
 
     if (completions.length > 1)
@@ skipping 14 matching lines @@
    * @param {string} userEnteredText
    */
   updateSuggestions(anchorBox, completions, selectHighestPriority, canShowForSingleItem, userEnteredText) {
     delete this._onlyCompletion;
     if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)) {
       this._userEnteredText = userEnteredText;
 
       this._show();
       this._updateBoxPosition(anchorBox, completions.length);
       this._updateWidth(completions);
-      this._list.fixedHeightChanged();
+      this._list.invalidateItemHeight();
       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();
   }
 };