[DevTools] Support variable height in ListControl.

third_party/WebKit/Source/devtools/front_end/ui/ListControl.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.
 
 /**
  * @template T
  * @interface
  */
 UI.ListDelegate = function() {};
 
@@ skipping 41 matching lines @@
    */
   constructor(delegate) {
     this.element = createElement('div');
     this.element.style.overflow = 'auto';
     this._topElement = this.element.createChild('div');
     this._bottomElement = this.element.createChild('div');
     this._firstIndex = 0;
     this._lastIndex = 0;
     this._renderedHeight = 0;
     this._topHeight = 0;
-    this._topElement.style.height = '0';
     this._bottomHeight = 0;
-    this._bottomElement.style.height = '0';
+    this._clearViewport();
 
     /** @type {!Array<T>} */
     this._items = [];
     /** @type {!Map<T, !Element>} */
     this._itemToElement = new Map();
     this._selectedIndex = -1;
 
     this._boundKeyDown = event => {
       if (this.onKeyDown(event))
         event.consume(true);
     };
     this._boundClick = event => {
       if (this.onClick(event))
         event.consume(true);
     };
 
     this._delegate = delegate;
     this._heightMode = UI.ListHeightMode.Measured;
     this._fixedHeight = 0;
+    this._variableOffsets = new Int32Array(0);
 
     this.element.addEventListener('scroll', this._onScroll.bind(this), false);
   }
 
   /**
    * @param {!UI.ListHeightMode} mode
    */
   setHeightMode(mode) {
-    if (mode === UI.ListHeightMode.Variable)
-      throw 'Variable height is not supported (yet)';
     this._heightMode = mode;
     this._fixedHeight = 0;
     if (this._items.length) {
       this._itemToElement.clear();
-      this._refresh();
+      this._invalidate(0, this._items.length, this._items.length);
     }
   }
 
   /**
    * @param {boolean} handleInput
    */
   setHandleInput(handleInput) {
     if (handleInput) {
       this.element.addEventListener('keydown', this._boundKeyDown, false);
       this.element.addEventListener('click', this._boundClick, false);
@@ skipping 90 matching lines @@
 
   /**
    * @param {number} from
    * @param {number} to
    */
   invalidateRange(from, to) {
     this._invalidate(from, to, to - from);
   }
 
   viewportResized() {
-    this._refresh();
+    // TODO(dgozman): try to keep the visible scrollTop the same
+    // when invalidating after firstIndex but before first visible element.
+    var scrollTop = this.element.scrollTop;
+    var viewportHeight = this.element.offsetHeight;
+    this._clearViewport();
+    this._updateViewport(Number.constrain(scrollTop, 0, this._totalHeight() - viewportHeight), viewportHeight);
   }
 
   /**
    * @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;
+    var viewportHeight = this.element.offsetHeight;
     if (top < scrollTop)
-      this._update(top, height);
-    else if (bottom > scrollTop + height)
-      this._update(bottom - height, height);
+      this._updateViewport(top, viewportHeight);
+    else if (bottom > scrollTop + viewportHeight)
+      this._updateViewport(bottom - viewportHeight, viewportHeight);
   }
 
   /**
    * @param {number} index
    * @param {boolean=} scrollIntoView
    */
   selectItemAtIndex(index, scrollIntoView) {
     if (index !== -1 && !this._delegate.isItemSelectable(this._items[index]))
       throw 'Attempt to select non-selectable item';
     this._select(index);
@@ skipping 77 matching lines @@
     return this._offsetAtIndex(this._items.length);
   }
 
   /**
    * @param {number} offset
    * @return {number}
    */
   _indexAtOffset(offset) {
     if (!this._items.length || offset < 0)
       return 0;
-    if (this._heightMode === UI.ListHeightMode.Variable)
-      throw 'Variable height is not supported (yet)';
+    if (this._heightMode === UI.ListHeightMode.Variable) {
+      return Math.min(
+          this._items.length - 1, this._variableOffsets.lowerBound(offset, undefined, 0, this._items.length));
+    }
     if (!this._fixedHeight)
       this._measureHeight();
     return Math.min(this._items.length - 1, Math.floor(offset / this._fixedHeight));
   }
 
   /**
    * @param {number} index
    * @return {!Element}
    */
   _elementAtIndex(index) {
     var item = this._items[index];
     var element = this._itemToElement.get(item);
     if (!element) {
       element = this._delegate.createElementForItem(item);
       this._itemToElement.set(item, element);
     }
     return element;
   }
 
   /**
    * @param {number} index
    * @return {number}
    */
   _offsetAtIndex(index) {
     if (!this._items.length)
       return 0;
     if (this._heightMode === UI.ListHeightMode.Variable)
-      throw 'Variable height is not supported (yet)';
+      return this._variableOffsets[index];
     if (!this._fixedHeight)
       this._measureHeight();
     return index * this._fixedHeight;
   }
 
   _measureHeight() {
     if (this._heightMode === UI.ListHeightMode.Measured)
       this._fixedHeight = UI.measurePreferredSize(this._elementAtIndex(0), this.element).height;
     else
       this._fixedHeight = this._delegate.heightForItem(this._items[0]);
@@ skipping 49 matching lines @@
         if (Math.abs(this._offsetAtIndex(index) - startOffset) >= minSkippedHeight)
           return index;
         lastSelectable = index;
       }
 
       index += direction;
     }
   }
 
   /**
+   * @param {number} length
+   * @param {number} copyTo
+   */
+  _reallocateVariableOffsets(length, copyTo) {
+    if (this._variableOffsets.length < length) {
+      var variableOffsets = new Int32Array(Math.max(length, this._variableOffsets.length * 2));
+      variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);
+      this._variableOffsets = variableOffsets;
+    } else if (this._variableOffsets.length >= 2 * length) {
+      var variableOffsets = new Int32Array(length);
+      variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);
+      this._variableOffsets = variableOffsets;
+    }
+  }
+
+  /**
    * @param {number} from
    * @param {number} to
    * @param {number} inserted
    */
   _invalidate(from, to, inserted) {
+    if (this._heightMode === UI.ListHeightMode.Variable) {
+      this._reallocateVariableOffsets(this._items.length + 1, from + 1);
+      for (var i = from + 1; i <= this._items.length; i++)
+        this._variableOffsets[i] = this._variableOffsets[i - 1] + this._delegate.heightForItem(this._items[i - 1]);
+    }
+
     var viewportHeight = this.element.offsetHeight;
     var totalHeight = this._totalHeight();
+    var scrollTop = this.element.scrollTop;
+
     if (this._renderedHeight < viewportHeight || totalHeight < viewportHeight) {
-      this._refresh();
+      this._clearViewport();
+      this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
       return;
     }
 
-    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;
       var indexDelta = inserted - (to - from);
       this._firstIndex += indexDelta;
       this._lastIndex += indexDelta;
       return;
     }
 
     if (from >= this._lastIndex) {
       var bottomHeight = this._bottomHeight + heightDelta;
       this._bottomElement.style.height = bottomHeight + 'px';
       this._bottomHeight = bottomHeight;
       this._renderedHeight = totalHeight;
       return;
     }
 
     // TODO(dgozman): try to keep the visible scrollTop the same
     // when invalidating after firstIndex but before first visible element.
-    this._refresh();
+    this._clearViewport();
+    this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
   }
 
-  _refresh() {
-    var viewportHeight = this.element.offsetHeight;
-    var scrollTop = Number.constrain(this.element.scrollTop, 0, this._totalHeight() - viewportHeight);
+  _clearViewport() {
     this._firstIndex = 0;
     this._lastIndex = 0;
     this._renderedHeight = 0;
     this._topHeight = 0;
     this._bottomHeight = 0;
+    this._topElement.style.height = '0';
+    this._bottomElement.style.height = '0';
     this.element.removeChildren();
     this.element.appendChild(this._topElement);
     this.element.appendChild(this._bottomElement);
-    this._update(scrollTop, viewportHeight);
   }
 
   _onScroll() {
-    this._update(this.element.scrollTop, this.element.offsetHeight);
+    this._updateViewport(this.element.scrollTop, this.element.offsetHeight);
   }
 
   /**
    * @param {number} scrollTop
    * @param {number} viewportHeight
    */
-  _update(scrollTop, viewportHeight) {
+  _updateViewport(scrollTop, viewportHeight) {
     // 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 = '0';
@@ skipping 27 matching lines @@
     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;
   }
 };