[DevTools] Tweak ListControl API.

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() {};
 
 UI.ListDelegate.prototype = {
   /**
    * @param {T} item
    * @return {!Element}
    */
   createElementForItem(item) {},
 
   /**
+   * This method is not called in NonViewport mode.
+   * Return zero to make list measure the item (only works in SameHeight mode).
    * @param {T} item
    * @return {number}
    */
   heightForItem(item) {},
 
   /**
    * @param {T} item
    * @return {boolean}
    */
   isItemSelectable(item) {},
 
   /**
    * @param {?T} from
    * @param {?T} to
    * @param {?Element} fromElement
    * @param {?Element} toElement
    */
   selectedItemChanged(from, to, fromElement, toElement) {},
+
+  /**
+   * @param {T} item
+   * @param {!Element} element
+   * @param {!Event} event
+   */
+  itemElementClicked(item, element, event) {},

[pfeldman, 2017/01/04 02:07:50]

It does not help much in case you decide to listen to events on subtitles, etc.

 };
 
 /** @enum {symbol} */
 UI.ListMode = {
-  Grow: Symbol('UI.ListMode.Grow'),
-  ViewportFixedItems: Symbol('UI.ListMode.ViewportFixedItems'),
-  ViewportFixedItemsMeasured: Symbol('UI.ListMode.ViewportFixedItemsMeasured'),
-  ViewportVariableItems: Symbol('UI.ListMode.ViewportVariableItems')
+  NonViewport: Symbol('UI.ListMode.NonViewport'),
+  SameHeightItems: Symbol('UI.ListMode.SameHeightItems'),

[pfeldman, 2017/01/04 02:07:50]

Equal/Various

+  DifferentHeightItems: Symbol('UI.ListMode.DifferentHeightItems')
 };
 
 /**
  * @template T
  */
 UI.ListControl = class {
   /**
    * @param {!UI.ListDelegate<T>} delegate
    * @param {!UI.ListMode=} mode
    */
   constructor(delegate, mode) {
     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._bottomHeight = 0;
 
     /** @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.element.addEventListener('click', this._onClick.bind(this), false);
     this._boundScroll = event => {
       this._updateViewport(this.element.scrollTop, this.element.offsetHeight);
     };
 
     this._delegate = delegate;
-    this._mode = mode || UI.ListMode.ViewportFixedItemsMeasured;
+    this._mode = mode || UI.ListMode.SameHeightItems;
     this._fixedHeight = 0;
     this._variableOffsets = new Int32Array(0);
     this._clearContents();
-    if (this._mode !== UI.ListMode.Grow)
+    if (this._mode !== UI.ListMode.NonViewport)
       this.element.addEventListener('scroll', this._boundScroll, false);
   }
 
   /**
-   * @param {boolean} handleInput
-   */
-  setHandleInput(handleInput) {
-    if (handleInput) {
-      this.element.addEventListener('keydown', this._boundKeyDown, false);
-      this.element.addEventListener('click', this._boundClick, false);
-    } else {
-      this.element.removeEventListener('keydown', this._boundKeyDown, false);
-      this.element.removeEventListener('click', this._boundClick, false);
-    }
-  }
-
-  /**
    * @return {number}
    */
   length() {
     return this._items.length;
   }
 
   /**
    * @param {number} index
    * @return {T}
    */
@@ skipping 73 matching lines @@
 
   /**
    * @param {number} from
    * @param {number} to
    */
   invalidateRange(from, to) {
     this._invalidate(from, to, to - from);
   }
 
   viewportResized() {
-    if (this._mode === UI.ListMode.Grow)
+    if (this._mode === UI.ListMode.NonViewport)
       return;
     // TODO(dgozman): try to keep visible scrollTop the same.
     var scrollTop = this.element.scrollTop;
     var viewportHeight = this.element.offsetHeight;
     this._clearViewport();
     this._updateViewport(Number.constrain(scrollTop, 0, this._totalHeight() - viewportHeight), viewportHeight);
   }
 
-  fixedHeightChanged() {
-    if (this._mode !== UI.ListMode.ViewportFixedItemsMeasured && this._mode !== UI.ListMode.ViewportFixedItems)
-      throw 'Only supported in fixed height items modes';
+  invalidateSameHeight() {

[pfeldman, 2017/01/04 02:07:50]

invalidateItemsHeight

+    if (this._mode !== UI.ListMode.SameHeightItems)
+      throw 'Only supported in same height items mode';
     this._fixedHeight = 0;
     if (this._items.length) {
       this._itemToElement.clear();
       this._invalidate(0, this._items.length, this._items.length);
     }
   }
 
   /**
-   * @param {number} index
+   * @param {T} item
+   * @param {boolean=} center
    */
-  scrollItemAtIndexIntoView(index) {
-    if (this._mode === UI.ListMode.Grow) {
-      this._elementAtIndex(index).scrollIntoViewIfNeeded(false);
-      return;
-    }
-    var top = this._offsetAtIndex(index);
-    var bottom = this._offsetAtIndex(index + 1);
-    var scrollTop = this.element.scrollTop;
-    var viewportHeight = this.element.offsetHeight;
-    if (top < scrollTop)
-      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);
-    if (index !== -1 && !!scrollIntoView)
-      this.scrollItemAtIndexIntoView(index);
-  }
-
-  /**
-   * @return {number}
-   */
-  selectedIndex() {
-    return this._selectedIndex;
+  scrollItemIntoView(item, center) {
+    var index = this._items.indexOf(item);
+    if (index === -1)
+      throw 'Attempt to scroll onto missing item';
+    this._scrollIntoView(index, center);
   }
 
   /**
    * @return {?T}
    */
   selectedItem() {
     return this._selectedIndex === -1 ? null : this._items[this._selectedIndex];
   }
 
   /**
-   * @param {!Event} event
+   * @param {?T} item
+   * @param {boolean=} center
+   */
+  selectItem(item, center) {
+    var index = -1;
+    if (item !== null) {
+      index = this._items.indexOf(item);
+      if (index === -1)
+        throw 'Attempt to select missing item';
+      if (!this._delegate.isItemSelectable(item))
+        throw 'Attempt to select non-selectable item';
+    }
+    this._select(index);
+    if (index !== -1)
+      this._scrollIntoView(index, center);
+  }
+
+  /**
+   * @param {boolean=} canWrap
+   * @param {boolean=} center
    * @return {boolean}
    */
-  onKeyDown(event) {
-    var index = -1;
-    switch (event.key) {
-      case 'ArrowUp':
-        index = this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex - 1;
-        index = this._findFirstSelectable(index, -1, true);
-        break;
-      case 'ArrowDown':
-        index = this._selectedIndex === -1 ? 0 : this._selectedIndex + 1;
-        index = this._findFirstSelectable(index, +1, true);
-        break;
-      case 'PageUp':
-        if (this._mode === UI.ListMode.Grow)
-          return false;
-        index = this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex;
-        index = this._findPageSelectable(index, -1);
-        break;
-      case 'PageDown':
-        if (this._mode === UI.ListMode.Grow)
-          return false;
-        index = this._selectedIndex === -1 ? 0 : this._selectedIndex;
-        index = this._findPageSelectable(index, +1);
-        break;
-      default:
-        return false;
-    }
+  selectPreviousItem(canWrap, center) {
+    if (this._selectedIndex === -1 && !canWrap)
+      return false;
+    var index = this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex - 1;
+    index = this._findFirstSelectable(index, -1, !!canWrap);
     if (index !== -1) {
-      this.scrollItemAtIndexIntoView(index);
+      this._scrollIntoView(index, center);
       this._select(index);
       return true;
     }
+    return false;
+  }
+
+  /**
+   * @param {boolean=} canWrap
+   * @param {boolean=} center
+   * @return {boolean}
+   */
+  selectNextItem(canWrap, center) {
+    if (this._selectedIndex === -1 && !canWrap)
+      return false;
+    var index = this._selectedIndex === -1 ? 0 : this._selectedIndex + 1;
+    index = this._findFirstSelectable(index, +1, !!canWrap);
+    if (index !== -1) {
+      this._scrollIntoView(index, center);
+      this._select(index);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @param {boolean=} center
+   * @return {boolean}
+   */
+  selectItemPreviousPage(center) {
+    if (this._mode === UI.ListMode.NonViewport)
+      return false;
+    var index = this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex;
+    index = this._findPageSelectable(index, -1);
+    if (index !== -1) {
+      this._scrollIntoView(index, center);
+      this._select(index);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * @param {boolean=} center
+   * @return {boolean}
+   */
+  selectItemNextPage(center) {
+    if (this._mode === UI.ListMode.NonViewport)
+      return false;
+    var index = this._selectedIndex === -1 ? 0 : this._selectedIndex;
+    index = this._findPageSelectable(index, +1);
+    if (index !== -1) {
+      this._scrollIntoView(index, center);
+      this._select(index);
+      return true;
+    }
     return false;
   }
 
   /**
+   * @param {number} index
+   * @param {boolean=} center
+   */
+  _scrollIntoView(index, center) {
+    if (this._mode === UI.ListMode.NonViewport) {
+      this._elementAtIndex(index).scrollIntoViewIfNeeded(!!center);
+      return;
+    }
+
+    var top = this._offsetAtIndex(index);
+    var bottom = this._offsetAtIndex(index + 1);
+    var viewportHeight = this.element.offsetHeight;
+    if (center) {
+      var scrollTo = (top + bottom) / 2 - viewportHeight / 2;
+      this._updateViewport(Number.constrain(scrollTo, 0, this._totalHeight() - viewportHeight), viewportHeight);
+      return;
+    }
+
+    var scrollTop = this.element.scrollTop;
+    if (top < scrollTop)
+      this._updateViewport(top, viewportHeight);
+    else if (bottom > scrollTop + viewportHeight)
+      this._updateViewport(bottom - viewportHeight, viewportHeight);
+  }
+
+  /**
    * @param {!Event} event
-   * @return {boolean}
    */
-  onClick(event) {
+  _onClick(event) {
     var node = event.target;
     while (node && node.parentNodeOrShadowHost() !== this.element)
       node = node.parentNodeOrShadowHost();
     if (!node)
-      return false;
-    var index = this._items.findIndex(item => this._itemToElement.get(item) === node);
-    if (index === -1 || !this._delegate.isItemSelectable(this._items[index]))
-      return false;
-    this._select(index);
-    return true;
+      return;
+    var element = /** @type {!Element} */ (node);
+    var index = this._items.findIndex(item => this._itemToElement.get(item) === element);
+    if (index !== -1)
+      this._delegate.itemElementClicked(this._items[index], element, event);
   }
 
   /**
    * @return {number}
    */
   _totalHeight() {
     return this._offsetAtIndex(this._items.length);
   }
 
   /**
    * @param {number} offset
    * @return {number}
    */
   _indexAtOffset(offset) {
-    if (this._mode === UI.ListMode.Grow)
-      throw 'There should be no offset conversions in grow mode';
+    if (this._mode === UI.ListMode.NonViewport)
+      throw 'There should be no offset conversions in non-viewport mode';
     if (!this._items.length || offset < 0)
       return 0;
-    if (this._mode === UI.ListMode.ViewportVariableItems) {
+    if (this._mode === UI.ListMode.DifferentHeightItems) {
       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._mode === UI.ListMode.Grow)
-      throw 'There should be no offset conversions in grow mode';
+    if (this._mode === UI.ListMode.NonViewport)
+      throw 'There should be no offset conversions in non-viewport mode';
     if (!this._items.length)
       return 0;
-    if (this._mode === UI.ListMode.ViewportVariableItems)
+    if (this._mode === UI.ListMode.DifferentHeightItems)
       return this._variableOffsets[index];
     if (!this._fixedHeight)
       this._measureHeight();
     return index * this._fixedHeight;
   }
 
   _measureHeight() {
-    if (this._mode === UI.ListMode.ViewportFixedItemsMeasured)
+    this._fixedHeight = this._delegate.heightForItem(this._items[0]);
+    if (!this._fixedHeight)
       this._fixedHeight = UI.measurePreferredSize(this._elementAtIndex(0), this.element).height;
-    else
-      this._fixedHeight = this._delegate.heightForItem(this._items[0]);
   }
 
   /**
    * @param {number} index
    * @param {?T=} oldItem
    * @param {?Element=} oldElement
    */
   _select(index, oldItem, oldElement) {
     if (oldItem === undefined)
       oldItem = this._selectedIndex !== -1 ? this._items[this._selectedIndex] : null;
@@ skipping 64 matching lines @@
       this._variableOffsets = variableOffsets;
     }
   }
 
   /**
    * @param {number} from
    * @param {number} to
    * @param {number} inserted
    */
   _invalidate(from, to, inserted) {
-    if (this._mode === UI.ListMode.Grow) {
-      this._invalidateGrowMode(from, to - from, inserted);
+    if (this._mode === UI.ListMode.NonViewport) {
+      this._invalidateNonViewportMode(from, to - from, inserted);
       return;
     }
 
-    if (this._mode === UI.ListMode.ViewportVariableItems) {
+    if (this._mode === UI.ListMode.DifferentHeightItems) {
       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) {
@@ skipping 27 matching lines @@
     // when invalidating after firstIndex but before first visible element.
     this._clearViewport();
     this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
   }
 
   /**
    * @param {number} start
    * @param {number} remove
    * @param {number} add
    */
-  _invalidateGrowMode(start, remove, add) {
+  _invalidateNonViewportMode(start, remove, add) {
     var startElement = this._topElement;
     for (var index = 0; index < start; index++)
       startElement = startElement.nextElementSibling;
     while (remove--)
       startElement.nextElementSibling.remove();
     while (add--)
       this.element.insertBefore(this._elementAtIndex(start + add), startElement.nextElementSibling);
   }
 
   _clearViewport() {
-    if (this._mode === UI.ListMode.Grow)
-      throw 'There should be no viewport updates in grow mode';
+    if (this._mode === UI.ListMode.NonViewport)
+      throw 'There should be no viewport updates in non-viewport mode';
     this._firstIndex = 0;
     this._lastIndex = 0;
     this._renderedHeight = 0;
     this._topHeight = 0;
     this._bottomHeight = 0;
     this._clearContents();
   }
 
   _clearContents() {
     // Note: this method should not force layout. Be careful.
     this._topElement.style.height = '0';
     this._bottomElement.style.height = '0';
     this.element.removeChildren();
     this.element.appendChild(this._topElement);
     this.element.appendChild(this._bottomElement);
   }
 
   /**
    * @param {number} scrollTop
    * @param {number} viewportHeight
    */
   _updateViewport(scrollTop, viewportHeight) {
     // Note: this method should not force layout. Be careful.
-    if (this._mode === UI.ListMode.Grow)
-      throw 'There should be no viewport updates in grow mode';
+    if (this._mode === UI.ListMode.NonViewport)
+      throw 'There should be no viewport updates in non-viewport mode';
 
     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';
       this._bottomElement.style.height = '0';
@@ skipping 26 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;
   }
 };