[DevTools] Replace ViewportControl with ListControl.

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

Index: third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
index 1b20de2e0162c3f1caf51a5295798dbd816e4dad..6907e942e6558f5b29dd2055a1e3e4c09597145f 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js
@@ -46,7 +46,6 @@ UI.SuggestBoxDelegate.prototype = {
 };
 
 /**
- * @implements {UI.ViewportControl.Provider}
  * @unrestricted
  */
 UI.SuggestBox = class {
@@ -57,13 +56,12 @@ UI.SuggestBox = class {
    */
   constructor(suggestBoxDelegate, maxItemsHeight, captureEnter) {
     this._suggestBoxDelegate = suggestBoxDelegate;
-    this._length = 0;
     this._selectedIndex = -1;
     this._selectedElement = null;
     this._maxItemsHeight = maxItemsHeight;
     this._maybeHideBound = this._maybeHide.bind(this);
     this._container = createElementWithClass('div', 'suggest-box-container');
-    this._viewport = new UI.ViewportControl(this);
+    this._viewport = new UI.SimpleViewport(this._createItemElement.bind(this));
     this._element = this._viewport.element;
     this._element.classList.add('suggest-box');
     this._container.appendChild(this._element);
@@ -75,9 +73,6 @@ UI.SuggestBox = class {
     this._asyncDetailsPromises = new Map();
     this._userInteracted = false;
     this._captureEnter = captureEnter;
-    /** @type {!Array<!Element>} */
-    this._elementList = [];
-    this._rowHeight = 17;
     this._viewportWidth = '100vw';
     this._hasVerticalScroll = false;
     this._userEnteredText = '';
@@ -104,9 +99,9 @@ UI.SuggestBox = class {
    */
   _updateBoxPosition(anchorBox) {
     console.assert(this._overlay);
-    if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox) && this._lastItemCount === this.itemCount())
+    if (this._lastAnchorBox && this._lastAnchorBox.equals(anchorBox) && this._lastItemCount === this._items.length)
       return;
-    this._lastItemCount = this.itemCount();
+    this._lastItemCount = this._items.length;
     this._lastAnchorBox = anchorBox;
 
     // Position relative to main DevTools element.
@@ -125,10 +120,11 @@ UI.SuggestBox = class {
       this._overlay.setVerticalOffset(totalHeight - anchorBox.y, false);
 
     var spacer = 6;
+    var rowHeight = this._viewport.elementHeight();
     var maxHeight = Math.min(
         Math.max(underHeight, aboveHeight) - spacer,
-        this._maxItemsHeight ? this._maxItemsHeight * this._rowHeight : Infinity);
-    var height = this._rowHeight * this._items.length;
+        this._maxItemsHeight ? this._maxItemsHeight * rowHeight : Infinity);
+    var height = rowHeight * this._items.length;
     this._hasVerticalScroll = height > maxHeight;
     this._element.style.height = Math.min(maxHeight, height) + 'px';
   }
@@ -144,7 +140,7 @@ UI.SuggestBox = class {
       if (this._items[i].title.length > this._items[maxIndex].title.length)
         maxIndex = i;
     }
-    var element = /** @type {!Element} */ (this.itemElement(maxIndex));
+    var element = /** @type {!Element} */ (this._viewport.elementAtIndex(maxIndex));
     this._element.style.width = UI.measurePreferredSize(element, this._element).width + 'px';
   }
 
@@ -175,10 +171,6 @@ UI.SuggestBox = class {
     this._bodyElement.addEventListener('mousedown', this._maybeHideBound, true);
     this._overlay = new UI.SuggestBox.Overlay();
     this._overlay.setContentElement(this._container);
-    var measuringElement = this._createItemElement('1', '12');
-    this._viewport.element.appendChild(measuringElement);
-    this._rowHeight = measuringElement.getBoundingClientRect().height;
-    measuringElement.remove();
   }
 
   hide() {
@@ -241,7 +233,7 @@ UI.SuggestBox = class {
    * @return {boolean} is changed
    */
   _selectClosest(shift, isCircular) {
-    if (!this._length)
+    if (!this._items.length)
       return false;
 
     this._userInteracted = true;
@@ -252,9 +244,9 @@ UI.SuggestBox = class {
     var index = this._selectedIndex + shift;
 
     if (isCircular)
-      index = (this._length + index) % this._length;
+      index = (this._items.length + index) % this._items.length;
     else
-      index = Number.constrain(index, 0, this._length - 1);
+      index = Number.constrain(index, 0, this._items.length - 1);
 
     this._selectItem(index);
     return true;
@@ -270,14 +262,15 @@ UI.SuggestBox = class {
   }
 
   /**
-   * @param {string} query
-   * @param {string} title
-   * @param {string=} subtitle
-   * @param {string=} iconType
-   * @param {boolean=} isSecondary
+   * @param {number} itemIndex
    * @return {!Element}
    */
-  _createItemElement(query, title, subtitle, iconType, isSecondary) {
+  _createItemElement(itemIndex) {
+    var query = this._userEnteredText;
+    var title = this._items[itemIndex].title;
+    var subtitle = this._items[itemIndex].subtitle;
+    var iconType = this._items[itemIndex].iconType;
+    var isSecondary = this._items[itemIndex].isSecondary;
     var element = createElementWithClass('div', 'suggest-box-content-item source-code');
     if (iconType) {
       var icon = UI.Icon.create(iconType, 'suggestion-icon');
@@ -311,12 +304,9 @@ UI.SuggestBox = class {
    * @param {function(number): !Promise<{detail:string, description:string}>=} asyncDetails
    */
   _updateItems(items, userEnteredText, asyncDetails) {
-    this._length = items.length;
     this._asyncDetailsPromises.clear();
     this._asyncDetailsCallback = asyncDetails;
-    this._elementList = [];
     delete this._selectedElement;
-
     this._userEnteredText = userEnteredText;
     this._items = items;
   }
@@ -358,7 +348,7 @@ UI.SuggestBox = class {
     if (index < 0)
       return;
 
-    this._selectedElement = this.itemElement(index);
+    this._selectedElement = this._viewport.elementAtIndex(index);
     this._selectedElement.classList.add('selected');
     this._selectedElement.classList.add('force-white-icons');
     this._detailsPopup.classList.add('hidden');
@@ -398,15 +388,6 @@ UI.SuggestBox = class {
     return canShowForSingleItem && completions[0].title !== userEnteredText;
   }
 
-  _ensureRowCountPerViewport() {
-    if (this._rowCountPerViewport)
-      return;
-    if (!this._items.length)
-      return;
-
-    this._rowCountPerViewport = Math.floor(this._element.getBoundingClientRect().height / this._rowHeight);
-  }
-
   /**
    * @param {!AnchorBox} anchorBox
    * @param {!UI.SuggestBox.Suggestions} completions
@@ -425,10 +406,11 @@ UI.SuggestBox = class {
     delete this._onlyCompletion;
     if (this._canShowBox(completions, canShowForSingleItem, userEnteredText)) {
       this._updateItems(completions, userEnteredText, asyncDetails);
+      this._viewport.resetElementHeight();
       this._show();
       this._updateBoxPosition(anchorBox);
+      this._viewport.refresh(this._items.length);
       this._updateWidth();
-      this._viewport.refresh();
       var highestPriorityItem = -1;
       if (selectHighestPriority) {
         var highestPriority = -Infinity;
@@ -441,7 +423,6 @@ UI.SuggestBox = class {
         }
       }
       this._selectItem(highestPriorityItem);
-      delete this._rowCountPerViewport;
     } else {
       if (completions.length === 1) {
         this._onlyCompletion = completions[0].title;
@@ -489,16 +470,14 @@ UI.SuggestBox = class {
    * @return {boolean}
    */
   pageUpKeyPressed() {
-    this._ensureRowCountPerViewport();
-    return this._selectClosest(-this._rowCountPerViewport, false);
+    return this._selectClosest(-this._viewport.elementsPerViewport(), false);

[pfeldman, 2016/12/20 02:00:18]

Since scrollbar belongs to viewport, this should also be be a part of it.

   }
 
   /**
    * @return {boolean}
    */
   pageDownKeyPressed() {
-    this._ensureRowCountPerViewport();
-    return this._selectClosest(this._rowCountPerViewport, false);
+    return this._selectClosest(this._viewport.elementsPerViewport(), false);
   }
 
   /**
@@ -515,37 +494,6 @@ UI.SuggestBox = class {
     // to commit the input or handle it otherwise.
     return hasSelectedItem;
   }
-
-  /**
-   * @override
-   * @param {number} index
-   * @return {number}
-   */
-  fastItemHeight(index) {
-    return this._rowHeight;
-  }
-
-  /**
-   * @override
-   * @return {number}
-   */
-  itemCount() {
-    return this._items.length;
-  }
-
-  /**
-   * @override
-   * @param {number} index
-   * @return {?Element}
-   */
-  itemElement(index) {
-    if (!this._elementList[index]) {
-      this._elementList[index] = this._createItemElement(
-          this._userEnteredText, this._items[index].title, this._items[index].subtitle, this._items[index].iconType,
-          this._items[index].isSecondary);
-    }
-    return this._elementList[index];
-  }
 };
 
 /**