[DevTools] Introduce Common.List used as a backend for list controls

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 32 matching lines @@
   NonViewport: Symbol('UI.ListMode.NonViewport'),
   EqualHeightItems: Symbol('UI.ListMode.EqualHeightItems'),
   VariousHeightItems: Symbol('UI.ListMode.VariousHeightItems')
 };
 
 /**
  * @template T
  */
 UI.ListControl = class {
   /**
+   * @param {!UI.ListModel<T>} model
    * @param {!UI.ListDelegate<T>} delegate
    * @param {!UI.ListMode=} mode
    */
-  constructor(delegate, mode) {
+  constructor(model, delegate, mode) {
     this.element = createElement('div');
     this.element.style.overflowY = '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 = [];
+    this._model = model;
+    this._model.addEventListener(UI.ListModel.Events.ItemsReplaced, this._replacedItemsInRange, this);
     /** @type {!Map<T, !Element>} */
     this._itemToElement = new Map();
     this._selectedIndex = -1;
+    /** @type {?T} */
+    this._selectedItem = null;
 
     this.element.tabIndex = -1;
     this.element.addEventListener('click', this._onClick.bind(this), false);
     this.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
 
     this._delegate = delegate;
     this._mode = mode || UI.ListMode.EqualHeightItems;
     this._fixedHeight = 0;
     this._variableOffsets = new Int32Array(0);
     this._clearContents();
 
     if (this._mode !== UI.ListMode.NonViewport) {
       this.element.addEventListener('scroll', () => {
         this._updateViewport(this.element.scrollTop, this.element.offsetHeight);
       }, false);
     }
   }
 
   /**
-   * @return {number}
+   * @param {!UI.ListModel<T>} model
    */
-  length() {
-    return this._items.length;
+  setModel(model) {

[caseq, 2017/06/01 01:37:57]

I hope this should not be necessary.

[dgozman, 2017/06/01 20:31:49]

I don't see any harm in this.

+    this._itemToElement.clear();
+    var length = this._model.length();
+    this._model.removeEventListener(UI.ListModel.Events.ItemsReplaced, this._replacedItemsInRange, this);
+    this._model = model;
+    this._model.addEventListener(UI.ListModel.Events.ItemsReplaced, this._replacedItemsInRange, this);
+    this.invalidateRange(0, length);
   }
 
   /**
-   * @param {number} index
-   * @return {T}
+   * @return {!UI.ListModel<T>}
    */
-  itemAtIndex(index) {
-    return this._items[index];
+  model() {

[caseq, 2017/06/01 01:37:56]

ditto.

[dgozman, 2017/06/01 20:31:49]

Removed.

+    return this._model;
   }
 
   /**
-   * @param {T} item
+   * @param {!Common.Event} event
    */
-  pushItem(item) {
-    this.replaceItemsInRange(this._items.length, this._items.length, [item]);
-  }
+  _replacedItemsInRange(event) {
+    var data = /** @type {{index: number, removed: !Array<T>, inserted: number}} */ (event.data);
+    var from = data.index;
+    var to = from + data.removed.length;
 
-  /**
-   * @return {T}
-   */
-  popItem() {
-    return this.removeItemAtIndex(this._items.length - 1);
-  }
-
-  /**
-   * @param {number} index
-   * @param {T} item
-   */
-  insertItemAtIndex(index, item) {
-    this.replaceItemsInRange(index, index, [item]);
-  }
-
-  /**
-   * @param {T} item
-   * @param {function(T, T):number} comparator
-   */
-  insertItemWithComparator(item, comparator) {
-    var index = this._items.lowerBound(item, comparator);
-    this.insertItemAtIndex(index, item);
-  }
-
-  /**
-   * @param {T} item
-   * @return {number}
-   */
-  indexOfItem(item) {
-    return this._items.indexOf(item);
-  }
-
-  /**
-   * @param {number} index
-   * @return {T}
-   */
-  removeItemAtIndex(index) {
-    var result = this._items[index];
-    this.replaceItemsInRange(index, index + 1, []);
-    return result;
-  }
-
-  /**
-   * @param {T} item
-   */
-  removeItem(item) {
-    var index = this._items.indexOf(item);
-    if (index === -1) {
-      console.error('Attempt to remove non-existing item');
-      return;
-    }
-    this.removeItemAtIndex(index);
-  }
-
-  /**
-   * @param {number} from
-   * @param {number} to
-   * @param {!Array<T>} items
-   */
-  replaceItemsInRange(from, to, items) {
-    var oldSelectedItem = this._selectedIndex !== -1 ? this._items[this._selectedIndex] : null;
+    var oldSelectedItem = this._selectedItem;
     var oldSelectedElement = oldSelectedItem ? (this._itemToElement.get(oldSelectedItem) || null) : null;
-
-    for (var i = from; i < to; i++)
-      this._itemToElement.delete(this._items[i]);
-    if (items.length < 10000) {
-      this._items.splice.bind(this._items, from, to - from).apply(null, items);
-    } else {
-      // Splice may fail with too many arguments.
-      var before = this._items.slice(0, from);
-      var after = this._items.slice(to);
-      this._items = [].concat(before, items, after);
-    }
-    this._invalidate(from, to, items.length);
+    for (var i = 0; i < data.removed.length; i++)

[caseq, 2017/06/01 01:37:56]

nit: for of?

+      this._itemToElement.delete(data.removed[i]);
+    this._invalidate(from, to, data.inserted);
 
     if (this._selectedIndex >= to) {
-      this._selectedIndex += items.length - (to - from);
+      this._selectedIndex += data.inserted - (to - from);
+      this._selectedItem = this._model.itemAtIndex(this._selectedIndex);
     } else if (this._selectedIndex >= from) {
-      var index = this._findFirstSelectable(from + items.length, +1, false);
+      var index = this._findFirstSelectable(from + data.inserted, +1, false);
       if (index === -1)
         index = this._findFirstSelectable(from - 1, -1, false);
       this._select(index, oldSelectedItem, oldSelectedElement);
     }
   }
 
   /**
-   * @param {!Array<T>} items
+   * @param {T} item
    */
-  replaceAllItems(items) {
-    this.replaceItemsInRange(0, this._items.length, items);
-  }
-
-  refreshAllItems() {
-    this.refreshItemsInRange(0, this._items.length);
-  }
-
-  /**
-   * @param {number} from
-   * @param {number} to
-   */
-  refreshItemsInRange(from, to) {
-    for (var i = from; i < to; i++)
-      this._itemToElement.delete(this._items[i]);
-    this.invalidateRange(from, to);
+  refreshItem(item) {
+    var index = this._model.indexOfItem(item);
+    if (index === -1) {
+      console.error('Item to refresh is not present');
+      return;
+    }
+    this._itemToElement.delete(item);
+    this.invalidateRange(index, index + 1);
     if (this._selectedIndex !== -1)
       this._select(this._selectedIndex, null, null);
   }
 
   /**
    * @param {number} from
    * @param {number} to
    */
   invalidateRange(from, to) {
     this._invalidate(from, to, to - from);
   }
 
   viewportResized() {
     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);
   }
 
   invalidateItemHeight() {
     if (this._mode !== UI.ListMode.EqualHeightItems) {
       console.error('Only supported in equal height items mode');
       return;
     }
     this._fixedHeight = 0;
-    if (this._items.length) {
+    if (this._model.length()) {
       this._itemToElement.clear();
-      this._invalidate(0, this._items.length, this._items.length);
+      this._invalidate(0, this._model.length(), this._model.length());
     }
   }
 
   /**
    * @param {?Node} node
    * @return {?T}
    */
   itemForNode(node) {
     while (node && node.parentNodeOrShadowHost() !== this.element)
       node = node.parentNodeOrShadowHost();
     if (!node)
       return null;
     var element = /** @type {!Element} */ (node);
-    var index = this._items.findIndex(item => this._itemToElement.get(item) === element);
-    return index !== -1 ? this._items[index] : null;
+    var index = this._model.findIndex(item => this._itemToElement.get(item) === element);
+    return index !== -1 ? this._model.itemAtIndex(index) : null;
   }
 
   /**
    * @param {T} item
    * @param {boolean=} center
    */
   scrollItemIntoView(item, center) {
-    var index = this._items.indexOf(item);
+    var index = this._model.indexOfItem(item);
     if (index === -1) {
       console.error('Attempt to scroll onto missing item');
       return;
     }
     this._scrollIntoView(index, center);
   }
 
   /**
    * @return {?T}
    */
   selectedItem() {
-    return this._selectedIndex === -1 ? null : this._items[this._selectedIndex];
+    return this._selectedItem;
   }
 
   /**
    * @return {number}
    */
   selectedIndex() {
     return this._selectedIndex;
   }
 
   /**
    * @param {?T} item
    * @param {boolean=} center
    * @param {boolean=} dontScroll
    */
   selectItem(item, center, dontScroll) {
     var index = -1;
     if (item !== null) {
-      index = this._items.indexOf(item);
+      index = this._model.indexOfItem(item);
       if (index === -1) {
         console.error('Attempt to select missing item');
         return;
       }
       if (!this._delegate.isItemSelectable(item)) {
         console.error('Attempt to select non-selectable item');
         return;
       }
     }
     if (this._selectedIndex !== index)
       this._select(index);
     if (index !== -1 && !dontScroll)
       this._scrollIntoView(index, center);
   }
 
   /**
    * @param {boolean=} canWrap
    * @param {boolean=} center
    * @return {boolean}
    */
   selectPreviousItem(canWrap, center) {
     if (this._selectedIndex === -1 && !canWrap)
       return false;
-    var index = this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex - 1;
+    var index = this._selectedIndex === -1 ? this._model.length() - 1 : this._selectedIndex - 1;
     index = this._findFirstSelectable(index, -1, !!canWrap);
     if (index !== -1) {
       this._scrollIntoView(index, center);
       this._select(index);
       return true;
     }
     return false;
   }
 
   /**
@@ skipping 14 matching lines @@
     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;
+    var index = this._selectedIndex === -1 ? this._model.length() - 1 : this._selectedIndex;
     index = this._findPageSelectable(index, -1);
     if (index !== -1) {
       this._scrollIntoView(index, center);
       this._select(index);
       return true;
     }
     return false;
   }
 
   /**
@@ skipping 68 matching lines @@
         break;
     }
     if (selected)
       event.consume();
   }
 
   /**
    * @return {number}
    */
   _totalHeight() {
-    return this._offsetAtIndex(this._items.length);
+    return this._offsetAtIndex(this._model.length());
   }
 
   /**
    * @param {number} offset
    * @return {number}
    */
   _indexAtOffset(offset) {
     if (this._mode === UI.ListMode.NonViewport)
       throw 'There should be no offset conversions in non-viewport mode';
-    if (!this._items.length || offset < 0)
+    if (!this._model.length() || offset < 0)
       return 0;
     if (this._mode === UI.ListMode.VariousHeightItems) {
       return Math.min(
-          this._items.length - 1, this._variableOffsets.lowerBound(offset, undefined, 0, this._items.length));
+          this._model.length() - 1, this._variableOffsets.lowerBound(offset, undefined, 0, this._model.length()));
     }
     if (!this._fixedHeight)
       this._measureHeight();
-    return Math.min(this._items.length - 1, Math.floor(offset / this._fixedHeight));
+    return Math.min(this._model.length() - 1, Math.floor(offset / this._fixedHeight));
   }
 
   /**
    * @param {number} index
    * @return {!Element}
    */
   _elementAtIndex(index) {
-    var item = this._items[index];
+    var item = this._model.itemAtIndex(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.NonViewport)
       throw 'There should be no offset conversions in non-viewport mode';
-    if (!this._items.length)
+    if (!this._model.length())
       return 0;
     if (this._mode === UI.ListMode.VariousHeightItems)
       return this._variableOffsets[index];
     if (!this._fixedHeight)
       this._measureHeight();
     return index * this._fixedHeight;
   }
 
   _measureHeight() {
-    this._fixedHeight = this._delegate.heightForItem(this._items[0]);
+    this._fixedHeight = this._delegate.heightForItem(this._model.itemAtIndex(0));
     if (!this._fixedHeight)
       this._fixedHeight = UI.measurePreferredSize(this._elementAtIndex(0), this.element).height;
   }
 
   /**
    * @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;
+      oldItem = this._selectedItem;
     if (oldElement === undefined)
       oldElement = this._itemToElement.get(oldItem) || null;
     this._selectedIndex = index;
-    var newItem = this._selectedIndex !== -1 ? this._items[this._selectedIndex] : null;
+    this._selectedItem = index === -1 ? null : this._model.itemAtIndex(index);
+    var newItem = this._selectedItem;
     var newElement = this._selectedIndex !== -1 ? this._elementAtIndex(index) : null;
     this._delegate.selectedItemChanged(oldItem, newItem, /** @type {?Element} */ (oldElement), newElement);
   }
 
   /**
    * @param {number} index
    * @param {number} direction
    * @param {boolean} canWrap
    * @return {number}
    */
   _findFirstSelectable(index, direction, canWrap) {
-    var length = this._items.length;
+    var length = this._model.length();
     if (!length)
       return -1;
     for (var step = 0; step <= length; step++) {
       if (index < 0 || index >= length) {
         if (!canWrap)
           return -1;
         index = (index + length) % length;
       }
-      if (this._delegate.isItemSelectable(this._items[index]))
+      if (this._delegate.isItemSelectable(this._model.itemAtIndex(index)))
         return index;
       index += direction;
     }
     return -1;
   }
 
   /**
    * @param {number} index
    * @param {number} direction
    * @return {number}
    */
   _findPageSelectable(index, direction) {
     var lastSelectable = -1;
     var startOffset = this._offsetAtIndex(index);
     // Compensate for zoom rounding errors with -1.
     var viewportHeight = this.element.offsetHeight - 1;
-    while (index >= 0 && index < this._items.length) {
-      if (this._delegate.isItemSelectable(this._items[index])) {
+    while (index >= 0 && index < this._model.length()) {
+      if (this._delegate.isItemSelectable(this._model.itemAtIndex(index))) {
         if (Math.abs(this._offsetAtIndex(index) - startOffset) >= viewportHeight)
           return index;
         lastSelectable = index;
       }
       index += direction;
     }
     return lastSelectable;
   }
 
   /**
@@ skipping 17 matching lines @@
    * @param {number} to
    * @param {number} inserted
    */
   _invalidate(from, to, inserted) {
     if (this._mode === UI.ListMode.NonViewport) {
       this._invalidateNonViewportMode(from, to - from, inserted);
       return;
     }
 
     if (this._mode === UI.ListMode.VariousHeightItems) {
-      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]);
+      this._reallocateVariableOffsets(this._model.length() + 1, from + 1);
+      for (var i = from + 1; i <= this._model.length(); i++) {
+        this._variableOffsets[i] =
+            this._variableOffsets[i - 1] + this._delegate.heightForItem(this._model.itemAtIndex(i - 1));
+      }
     }
 
     var viewportHeight = this.element.offsetHeight;
     var totalHeight = this._totalHeight();
     var scrollTop = this.element.scrollTop;
 
     if (this._renderedHeight < viewportHeight || totalHeight < viewportHeight) {
       this._clearViewport();
       this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);
       return;
@@ skipping 111 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;
   }
 };