[DevTools] Replace ViewportControl with ListControl.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /**
  * @unrestricted
+ * @template T

[einbinder, 2016/12/21 00:23:53]

T needs to be some kind of object, otherwise you can't add a symbol to it.

  */
 UI.ViewportControl = class {
   /**
-   * @param {!UI.ViewportControl.Provider} provider
-   */
-  constructor(provider) {
+   * @param {?function(T):!Element} renderer
+   */
+  constructor(renderer) {
     this.element = createElement('div');
     this.element.style.overflow = 'auto';
-    this._innerElement = this.element.createChild('div');
-    this._innerElement.style.height = '0px';
-    this._innerElement.style.position = 'relative';
-    this._innerElement.style.overflow = 'hidden';
-
-    this._provider = provider;
-    this.element.addEventListener('scroll', this._update.bind(this), false);
-    this._itemCount = 0;
-    this._indexSymbol = Symbol('UI.ViewportControl._indexSymbol');
-  }
-
-  refresh() {
-    this._itemCount = this._provider.itemCount();
-    this._innerElement.removeChildren();
-
-    var height = 0;
-    this._cumulativeHeights = new Int32Array(this._itemCount);
-    for (var i = 0; i < this._itemCount; ++i) {
-      height += this._provider.fastItemHeight(i);
-      this._cumulativeHeights[i] = height;
-    }
-    this._innerElement.style.height = height + 'px';
-
-    this._update();
-  }
-
-  _update() {
-    if (!this._cumulativeHeights) {
-      this.refresh();
+    this._topElement = this.element.createChild('div');
+    this._bottomElement = this.element.createChild('div');
+
+    this._firstIndex = 0;
+    this._lastIndex = 0;
+    this._renderedHeight = 0;
+
+    this._fixedHeight = 0;
+    /** @type {?function(T):!Element} */
+    this._renderer = renderer;
+    /** @type {!Array<T>} */
+    this._items = [];
+
+    this._elementSymbol = Symbol('UI.ViewportControl.element');

[einbinder, 2016/12/21 00:23:53]

It might make sense to use a WeakMap (or just a Map) here. If you have a
Suggestion object that is shared between different suggest boxes, it will leak
elements.

[dgozman, 2016/12/27 21:32:59]

Done.

+    this.element.addEventListener('scroll', this._onScroll.bind(this), false);
+    this._update(0, this.element.offsetHeight);
+  }
+
+  setVariableHeight() {
+    // TODO(dgozman): support variable height.
+    throw 'Not supported';
+  }
+
+  /**
+   * @param {number} elementHeight
+   */
+  setFixedHeight(elementHeight) {
+    this._fixedHeight = elementHeight;
+  }
+
+  /**
+   * @param {?function(T):!Element} renderer
+   */
+  setRenderer(renderer) {
+    this._renderer = renderer;
+    for (var i = 0; i < this._items.length; i++)
+      this._items[i][this._elementSymbol] = null;
+    this._refresh();
+  }
+
+  /**
+   * @param {number} from
+   * @param {number} to
+   */
+  refreshRange(from, to) {
+    this._invalidate(from, to);
+  }
+
+  resized() {
+    this._refresh();
+  }
+
+  /**
+   * @param {number} index
+   */
+  scrollItemAtIndexIntoView(index) {
+    var top = this._offsetAtIndex(index);
+    var bottom = this._offsetAtIndex(index + 1);
+    var scrollTop = this.element.scrollTop;
+    var height = this.element.offsetHeight;
+    if (top < scrollTop)
+      this._update(top, height);
+    else if (bottom > scrollTop + height)
+      this._update(bottom - height, height);
+  }
+
+  /**
+   * @param {number} index
+   * @return {!Element}
+   */
+  elementAtIndex(index) {
+    return this._elementAtIndex(index);
+  }
+
+  /**
+   * @return {number}
+   */
+  length() {
+    return this._items.length;
+  }
+
+  /**
+   * @param {number} index
+   * @return {T}
+   */
+  itemAtIndex(index) {
+    return this._items[index];
+  }
+
+  /**
+   * @param {T} item
+   */
+  pushItem(item) {
+    this._items.push(item);
+    this._invalidate(this._items.length - 1, this._items.length - 1);
+  }
+
+  /**
+   * @return {T}
+   */
+  popItem() {
+    var result = this._items.pop();
+    result[this._elementSymbol] = null;
+    this._invalidate(this._items.length - 1, this._items.length);
+    return result;
+  }
+
+  /**
+   * @param {number} index
+   * @param {T} item
+   */
+  insertItemAtIndex(index, item) {
+    this._items.splice(index, 0, item);
+    this._invalidate(index, index);
+  }
+
+  /**
+   * @param {number} index
+   * @return {T}
+   */
+  removeItemAtIndex(index) {
+    var result = this._items[index];
+    this._items.splice(index, 1);
+    result[this._elementSymbol] = null;
+    this._invalidate(index, index + 1);
+    return result;
+  }
+
+  /**
+   * @param {number} from
+   * @param {number} to
+   * @param {!Array<T>} items
+   */
+  replaceItemsInRange(from, to, items) {
+    for (var i = from; i < to; i++)
+      this._items[i][this._elementSymbol] = null;
+    this._items.splice.bind(this._items, from, to - from).apply(null, items);
+    this._invalidate(from, to);
+  }
+
+  /**
+   * @param {!Array<T>} items
+   */
+  replaceAllItems(items) {
+    var length = this._items.length;
+    for (var i = 0; i < this._items.length; i++)
+      this._items[i][this._elementSymbol] = null;
+    this._items = items;
+    this._invalidate(0, length);
+  }
+
+  /**
+   * @return {number}
+   */
+  _totalHeight() {
+    return this._items.length * this._fixedHeight;
+  }
+
+  /**
+   * @param {number} offset
+   * @return {number}
+   */
+  _indexAtOffset(offset) {
+    if (!this._items.length)
+      return 0;
+    var index = Math.floor(offset / this._fixedHeight);
+    if (index >= this._items.length)
+      return this._items.length - 1;
+    return index;
+  }
+
+  /**
+   * @param {number} index
+   * @return {!Element}
+   */
+  _elementAtIndex(index) {
+    var item = this._items[index];
+    var element = item[this._elementSymbol];
+    if (!element) {
+      if (this._renderer) {
+        element = this._renderer.call(null, item);
+      } else {
+        element = createElement('div');
+        // TODO(dgozman): support variable height.
+        element.style.height = this._fixedHeight + 'px';
+      }
+      item[this._elementSymbol] = element;
+    }
+    return element;
+  }
+
+  /**
+   * @param {number} index
+   * @return {number}
+   */
+  _offsetAtIndex(index) {
+    return index * this._fixedHeight;
+  }
+
+  /**
+   * @param {number} from
+   * @param {number} to
+   */
+  _invalidate(from, to) {
+    var availableHeight = this.element.offsetHeight;
+    var totalHeight = this._totalHeight();
+    if (this._renderedHeight < availableHeight || totalHeight < availableHeight) {
+      this._refresh();
       return;
     }
 
-    var visibleHeight = this._visibleHeight();
-    var visibleFrom = this.element.scrollTop;
-    var activeHeight = visibleHeight * 2;
-    var firstActiveIndex = Math.max(
-        Array.prototype.lowerBound.call(this._cumulativeHeights, visibleFrom + 1 - (activeHeight - visibleHeight) / 2),
-        0);
-    var lastActiveIndex = Math.min(
-        Array.prototype.lowerBound.call(
-            this._cumulativeHeights, visibleFrom + visibleHeight + (activeHeight - visibleHeight) / 2),
-        this._itemCount - 1);
-
-    var children = this._innerElement.children;
-    for (var i = children.length - 1; i >= 0; --i) {
-      var element = children[i];
-      if (element[this._indexSymbol] < firstActiveIndex || element[this._indexSymbol] > lastActiveIndex)
-        element.remove();
-    }
-
-    for (var i = firstActiveIndex; i <= lastActiveIndex; ++i)
-      this._insertElement(i);
-  }
-
-  /**
-   * @param {number} index
-   */
-  _insertElement(index) {
-    var element = this._provider.itemElement(index);
-    if (!element || element.parentElement === this._innerElement)
+    var scrollTop = this.element.scrollTop;
+    var heightDelta = totalHeight - this._renderedHeight;
+    if (to <= this._firstIndex) {
+      var topHeight = this._topHeight + heightDelta;
+      this._topElement.style.height = topHeight + 'px';
+      this.element.scrollTop = scrollTop + heightDelta;
+      this._topHeight = topHeight;
+      this._renderedHeight = totalHeight;
       return;
-
-    element.style.position = 'absolute';
-    element.style.top = (this._cumulativeHeights[index - 1] || 0) + 'px';
-    element.style.left = '0';
-    element.style.right = '0';
-    element[this._indexSymbol] = index;
-    this._innerElement.appendChild(element);
-  }
-
-  /**
-   * @return {number}
-   */
-  firstVisibleIndex() {
-    return Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, this.element.scrollTop + 1), 0);
-  }
-
-  /**
-   * @return {number}
-   */
-  lastVisibleIndex() {
-    return Math.min(
-        Array.prototype.lowerBound.call(this._cumulativeHeights, this.element.scrollTop + this._visibleHeight()),
-        this._itemCount);
-  }
-
-  /**
-   * @param {number} index
-   * @param {boolean=} makeLast
-   */
-  scrollItemIntoView(index, makeLast) {
-    var firstVisibleIndex = this.firstVisibleIndex();
-    var lastVisibleIndex = this.lastVisibleIndex();
-    if (index > firstVisibleIndex && index < lastVisibleIndex)
+    }
+
+    if (from >= this._lastIndex) {
+      var bottomHeight = this._bottomHeight + heightDelta;
+      this._bottomElement.style.height = bottomHeight + 'px';
+      this.element.scrollTop = scrollTop + heightDelta;
+      this._bottomHeight = bottomHeight;
+      this._renderedHeight = totalHeight;
       return;
-    if (makeLast)
-      this.forceScrollItemToBeLast(index);
-    else if (index <= firstVisibleIndex)
-      this.forceScrollItemToBeFirst(index);
-    else if (index >= lastVisibleIndex)
-      this.forceScrollItemToBeLast(index);
-  }
-
-  /**
-   * @param {number} index
-   */
-  forceScrollItemToBeFirst(index) {
-    this.element.scrollTop = index > 0 ? this._cumulativeHeights[index - 1] : 0;
-    this._update();
-  }
-
-  /**
-   * @param {number} index
-   */
-  forceScrollItemToBeLast(index) {
-    this.element.scrollTop = this._cumulativeHeights[index] - this._visibleHeight();
-    this._update();
-  }
-
-  /**
-   * @return {number}
-   */
-  _visibleHeight() {
-    return this.element.offsetHeight;
+    }
+
+    this._refresh();
+  }
+
+  _refresh() {
+    var height = this.element.offsetHeight;
+    var scrollTop = Math.max(0, Math.min(this.element.scrollTop, this._totalHeight() - height));
+    this._firstIndex = 0;
+    this._lastIndex = 0;
+    this._renderedHeight = 0;
+    this.element.removeChildren();
+    this.element.appendChild(this._topElement);
+    this.element.appendChild(this._bottomElement);
+    this._update(scrollTop, height);
+  }
+
+  _onScroll() {
+    this._update(this.element.scrollTop, this.element.offsetHeight);
+  }
+
+  /**
+   * @param {number} scrollTop
+   * @param {number} height
+   */
+  _update(scrollTop, height) {
+    // Note: this method should not force layout. Be careful.
+
+    var totalHeight = this._totalHeight();
+    if (!totalHeight) {
+      this._firstIndex = 0;
+      this._lastIndex = 0;
+      this._topHeight = 0;
+      this._bottomHeight = 0;
+      this._renderedHeight = 0;
+      this._topElement.style.height = '0px';
+      this._bottomElement.style.height = '0px';
+      return;
+    }
+
+    var firstIndex = this._indexAtOffset(Math.max(0, scrollTop - height));
+    var lastIndex = this._indexAtOffset(Math.min(totalHeight, scrollTop + 2 * height)) + 1;
+
+    for (var index = this._firstIndex; index < firstIndex; index++) {
+      var element = this._elementAtIndex(index);
+      element.remove();
+      this._firstIndex++;
+    }
+    for (var index = this._lastIndex - 1; index >= lastIndex; index--) {
+      var element = this._elementAtIndex(index);
+      element.remove();
+      this._lastIndex--;
+    }
+    this._firstIndex = Math.min(this._firstIndex, lastIndex);
+    this._lastIndex = Math.max(this._lastIndex, firstIndex);
+    for (var index = this._firstIndex - 1; index >= firstIndex; index--) {
+      var element = this._elementAtIndex(index);
+      this.element.insertBefore(element, this._topElement.nextSibling);
+    }
+    for (var index = this._lastIndex; index < lastIndex; index++) {
+      var element = this._elementAtIndex(index);
+      this.element.insertBefore(element, this._bottomElement);
+    }
+
+    this._firstIndex = firstIndex;
+    this._lastIndex = lastIndex;
+    this._topHeight = this._offsetAtIndex(firstIndex);
+    this._topElement.style.height = this._topHeight + 'px';
+    this._bottomHeight = (totalHeight - this._offsetAtIndex(lastIndex));
+    this._bottomElement.style.height = this._bottomHeight + 'px';
+    this._renderedHeight = totalHeight;
+    this.element.scrollTop = scrollTop;
   }
 };
-
-/**
- * @interface
- */
-UI.ViewportControl.Provider = function() {};
-
-UI.ViewportControl.Provider.prototype = {
-  /**
-   * @param {number} index
-   * @return {number}
-   */
-  fastItemHeight(index) {
-    return 0;
-  },
-
-  /**
-   * @return {number}
-   */
-  itemCount() {
-    return 0;
-  },
-
-  /**
-   * @param {number} index
-   * @return {?Element}
-   */
-  itemElement(index) {
-    return null;
-  }
-};