Roll performance-oriented iron-list changes

third_party/polymer/v1_0/components-chromium/iron-list/iron-list-extracted.js

 (function() {
 
   var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
   var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
   var DEFAULT_PHYSICAL_COUNT = 3;
   var HIDDEN_Y = '-10000px';
   var DEFAULT_GRID_SIZE = 200;
   var SECRET_TABINDEX = -100;
 
   Polymer({
@@ skipping 216 matching lines @@
      */
     _lastVisibleIndexVal: null,
 
     /**
      * A Polymer collection for the items.
      * @type {?Polymer.Collection}
      */
     _collection: null,
 
     /**
-     * True if the current item list was rendered for the first time
-     * after attached.
-     */
-    _itemsRendered: false,
-
-    /**
-     * The page that is currently rendered.
-     */
-    _lastPage: null,
-
-    /**
      * The max number of pages to render. One page is equivalent to the height of the list.
      */
     _maxPages: 3,
 
     /**
      * The currently focused physical item.
      */
     _focusedItem: null,
 
     /**
@@ skipping 22 matching lines @@
      * The width of each grid item
      */
     _itemWidth: 0,
 
     /**
      * The height of the row in grid layout.
      */
     _rowHeight: 0,
 
     /**
+     * The cost of stamping a template in ms.
+     */
+    _templateCost: 0,
+
+    /**
      * The bottom of the physical content.
      */
     get _physicalBottom() {
       return this._physicalTop + this._physicalSize;
     },
 
     /**
      * The bottom of the scroll.
      */
     get _scrollBottom() {
@@ skipping 98 matching lines @@
     },
 
     get _optPhysicalCount() {
       return this._estRowsInView * this._itemsPerRow * this._maxPages;
     },
 
    /**
     * True if the current list is visible.
     */
     get _isVisible() {
-      return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
+      return Boolean(this.offsetWidth || this.offsetHeight);
     },
 
     /**
      * Gets the index of the first visible item in the viewport.
      *
      * @type {number}
      */
     get firstVisibleIndex() {
       if (this._firstVisibleIndexVal === null) {
         var physicalOffset = Math.floor(this._physicalTop + this._scrollerPaddingTop);
@@ skipping 36 matching lines @@
             physicalOffset += this._getPhysicalSizeIncrement(pidx);
           });
         }
       }
       return this._lastVisibleIndexVal;
     },
 
     get _defaultScrollTarget() {
       return this;
     },
+
     get _virtualRowCount() {
       return Math.ceil(this._virtualCount / this._itemsPerRow);
     },
 
     get _estRowsInView() {
       return Math.ceil(this._viewportHeight / this._rowHeight);
     },
 
     get _physicalRows() {
       return Math.ceil(this._physicalCount / this._itemsPerRow);
     },
 
     ready: function() {
       this.addEventListener('focus', this._didFocus.bind(this), true);
     },
 
     attached: function() {
       this.updateViewportBoundaries();
-      this._render();
+      if (this._physicalCount === 0) {
+        this._debounceTemplate(this._render);
+      }
       // `iron-resize` is fired when the list is attached if the event is added
       // before attached causing unnecessary work.
       this.listen(this, 'iron-resize', '_resizeHandler');
     },
 
     detached: function() {
-      this._itemsRendered = false;
       this.unlisten(this, 'iron-resize', '_resizeHandler');
     },
 
     /**
      * Set the overflow property if this element has its own scrolling region
      */
     _setOverflow: function(scrollTarget) {
       this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
       this.style.overflow = scrollTarget === this ? 'auto' : '';
     },
@@ skipping 104 matching lines @@
           currentRatio += tileHeight / hiddenContentSize;
 
           this._physicalTop += tileHeight;
           recycledTileSet.push(kth);
           recycledTiles++;
           kth = (kth + 1) % this._physicalCount;
         }
       }
 
       if (recycledTiles === 0) {
-        // Try to increase the pool if the list's client height isn't filled up with physical items
+        // Try to increase the pool if the list's client isn't filled up with physical items
         if (physicalBottom < scrollBottom || this._physicalTop > scrollTop) {
           this._increasePoolIfNeeded();
         }
       } else {
         this._virtualStart = this._virtualStart + recycledTiles;
         this._physicalStart = this._physicalStart + recycledTiles;
         this._update(recycledTileSet, movingUp);
       }
     },
 
     /**
      * Update the list of items, starting from the `_virtualStart` item.
      * @param {!Array<number>=} itemSet
      * @param {!Array<number>=} movingUp
      */
     _update: function(itemSet, movingUp) {
-      // manage focus
       this._manageFocus();
-      // update models
       this._assignModels(itemSet);
-      // measure heights
       this._updateMetrics(itemSet);
-      // adjust offset after measuring
+      // Adjust offset after measuring.
       if (movingUp) {
         while (movingUp.length) {
           var idx = movingUp.pop();
           this._physicalTop -= this._getPhysicalSizeIncrement(idx);
         }
       }
-      // update the position of the items
       this._positionItems();
-      // set the scroller size
       this._updateScrollerSize();
-      // increase the pool of physical items
       this._increasePoolIfNeeded();
     },
 
     /**
      * Creates a pool of DOM elements and attaches them to the local dom.
+     *
+     * @param {number} size Size of the pool
      */
     _createPool: function(size) {
       var physicalItems = new Array(size);
 
       this._ensureTemplatized();
 
       for (var i = 0; i < size; i++) {
         var inst = this.stamp(null);
         // First element child is item; Safari doesn't support children[0]
-        // on a doc fragment
+        // on a doc fragment.
         physicalItems[i] = inst.root.querySelector('*');
         Polymer.dom(this).appendChild(inst.root);
       }
       return physicalItems;
     },
 
     /**
      * Increases the pool of physical items only if needed.
      *
      * @return {boolean} True if the pool was increased.
      */
     _increasePoolIfNeeded: function() {
       // Base case 1: the list has no height.
       if (this._viewportHeight === 0) {
         return false;
       }
-      // Base case 2: If the physical size is optimal and the list's client height is full
+      var self = this;
+      var isClientFull = this._physicalBottom >= this._scrollBottom &&
+          this._physicalTop <= this._scrollPosition;
+
+      // Base case 2: if the physical size is optimal and the list's client height is full
       // with physical items, don't increase the pool.
-      var isClientHeightFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
-      if (this._physicalSize >= this._optPhysicalSize && isClientHeightFull) {
+      if (this._physicalSize >= this._optPhysicalSize && isClientFull) {
         return false;
       }
-      // this value should range between [0 <= `currentPage` <= `_maxPages`]
-      var currentPage = Math.floor(this._physicalSize / this._viewportHeight);
+      var maxPoolSize = Math.round(this._physicalCount * 0.5);
+      // Increase the pool synchronously until the client is filled.
+      if (!isClientFull) {
+        this._debounceTemplate(this._increasePool.bind(this, maxPoolSize));
+        return true;
+      }
+      this._yield(function() {
+        self._increasePool(Math.min(maxPoolSize, Math.max(1, Math.round(50 / self._templateCost))));
+      });
+      return true;
+    },
 
-      if (currentPage === 0) {
-        // fill the first page
-        this._debounceTemplate(this._increasePool.bind(this, Math.round(this._physicalCount * 0.5)));
-      } else if (this._lastPage !== currentPage && isClientHeightFull) {
-        // paint the page and defer the next increase
-        // wait 16ms which is rough enough to get paint cycle.
-        Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', this._increasePool.bind(this, this._itemsPerRow), 16));
-      } else {
-        // fill the rest of the pages
-        this._debounceTemplate(this._increasePool.bind(this, this._itemsPerRow));
-      }
-
-      this._lastPage = currentPage;
-
-      return true;
+    _yield: function(cb) {
+      var g = window;
+      var handle = g.requestIdleCallback ? g.requestIdleCallback(cb) : g.setTimeout(cb, 16);
+      // Polymer/issues/3895
+      Polymer.dom.addDebouncer(/** @type {!Polymer.Debouncer} */({
+        complete: function() {
+          g.cancelIdleCallback ? g.cancelIdleCallback(handle) : g.clearTimeout(handle);
+          cb();
+        }
+      }));
     },
 
     /**
      * Increases the pool size.
      */
     _increasePool: function(missingItems) {
       var nextPhysicalCount = Math.min(
           this._physicalCount + missingItems,
           this._virtualCount - this._virtualStart,
           Math.max(this.maxPhysicalCount, DEFAULT_PHYSICAL_COUNT)
         );
       var prevPhysicalCount = this._physicalCount;
       var delta = nextPhysicalCount - prevPhysicalCount;
+      var ts = window.performance.now();
 
       if (delta <= 0) {
         return;
       }
-
+      // Concat arrays in place.
       [].push.apply(this._physicalItems, this._createPool(delta));
       [].push.apply(this._physicalSizes, new Array(delta));
-
       this._physicalCount = prevPhysicalCount + delta;
-
-      // update the physical start if we need to preserve the model of the focused item.
+      // Update the physical start if it needs to preserve the model of the focused item.
       // In this situation, the focused item is currently rendered and its model would
       // have changed after increasing the pool if the physical start remained unchanged.
       if (this._physicalStart > this._physicalEnd &&
           this._isIndexRendered(this._focusedIndex) &&
           this._getPhysicalIndex(this._focusedIndex) < this._physicalEnd) {
         this._physicalStart = this._physicalStart + delta;
       }
       this._update();
+      this._templateCost = (window.performance.now() - ts) / delta;
     },
 
     /**
-     * Render a new list of items. This method does exactly the same as `update`,
-     * but it also ensures that only one `update` cycle is created.
+     * Render a new list of items.
      */
     _render: function() {
-      var requiresUpdate = this._virtualCount > 0 || this._physicalCount > 0;
-
-      if (this.isAttached && !this._itemsRendered && this._isVisible && requiresUpdate) {
-        this._lastPage = 0;
-        this._update();
-        this._itemsRendered = true;
+      if (this.isAttached && this._isVisible) {
+        if (this._physicalCount === 0) {
+          this._increasePool(DEFAULT_PHYSICAL_COUNT);
+        } else {
+          this._update();
+        }
       }
     },
 
     /**
      * Templetizes the user template.
      */
     _ensureTemplatized: function() {
       if (!this.ctor) {
         // Template instance props that should be excluded from forwarding
         var props = {};
         props.__key__ = true;
         props[this.as] = true;
         props[this.indexAs] = true;
         props[this.selectedAs] = true;
         props.tabIndex = true;
-
         this._instanceProps = props;
         this._userTemplate = Polymer.dom(this).querySelector('template');
 
         if (this._userTemplate) {
           this.templatize(this._userTemplate);
         } else {
           console.warn('iron-list requires a template to be provided in light-dom');
         }
       }
     },
@@ skipping 80 matching lines @@
         el._templateInstance[this.as] = value;
       }
     },
 
     /**
      * Called when the items have changed. That is, ressignments
      * to `items`, splices or updates to a single item.
      */
     _itemsChanged: function(change) {
       if (change.path === 'items') {
-        // reset items
         this._virtualStart = 0;
         this._physicalTop = 0;
         this._virtualCount = this.items ? this.items.length : 0;
         this._collection = this.items ? Polymer.Collection.get(this.items) : null;
         this._physicalIndexForKey = {};
         this._firstVisibleIndexVal = null;
         this._lastVisibleIndexVal = null;
-
+        this._physicalCount = this._physicalCount || 0;
+        this._physicalItems = this._physicalItems || [];
+        this._physicalSizes = this._physicalSizes || [];
+        this._physicalStart = 0;
         this._resetScrollPosition(0);
         this._removeFocusedItem();
-        // create the initial physical items
-        if (!this._physicalItems) {
-          this._physicalCount = Math.max(1, Math.min(DEFAULT_PHYSICAL_COUNT, this._virtualCount));
-          this._physicalItems = this._createPool(this._physicalCount);
-          this._physicalSizes = new Array(this._physicalCount);
-        }
-
-        this._physicalStart = 0;
+        this._debounceTemplate(this._render);
 
       } else if (change.path === 'items.splices') {
-
         this._adjustVirtualIndex(change.value.indexSplices);
         this._virtualCount = this.items ? this.items.length : 0;
+        this._debounceTemplate(this._render);
 
       } else {
-        // update a single item
         this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
-        return;
       }
-
-      this._itemsRendered = false;
-      this._debounceTemplate(this._render);
     },
 
     /**
      * @param {!Array<!PolymerSplice>} splices
      */
     _adjustVirtualIndex: function(splices) {
       splices.forEach(function(splice) {
         // deselect removed items
         splice.removed.forEach(this._removeItem, this);
         // We only need to care about changes happening above the current position
@@ skipping 92 matching lines @@
       }, itemSet);
     },
 
     /**
      * Updates the height for a given set of items.
      *
      * @param {!Array<number>=} itemSet
      */
      _updateMetrics: function(itemSet) {
       // Make sure we distributed all the physical items
-      // so we can measure them
+      // so we can measure them.
       Polymer.dom.flush();
 
       var newPhysicalSize = 0;
       var oldPhysicalSize = 0;
       var prevAvgCount = this._physicalAverageCount;
       var prevPhysicalAvg = this._physicalAverage;
 
       this._iterateItems(function(pidx, vidx) {
 
         oldPhysicalSize += this._physicalSizes[pidx] || 0;
         this._physicalSizes[pidx] = this._physicalItems[pidx].offsetHeight;
         newPhysicalSize += this._physicalSizes[pidx];
         this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
 
       }, itemSet);
 
       this._viewportHeight = this._scrollTargetHeight;
       if (this.grid) {
         this._updateGridMetrics();
         this._physicalSize = Math.ceil(this._physicalCount / this._itemsPerRow) * this._rowHeight;
       } else {
         this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
       }
 
-      // update the average if we measured something
+      // Update the average if it measured something.
       if (this._physicalAverageCount !== prevAvgCount) {
         this._physicalAverage = Math.round(
             ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) /
             this._physicalAverageCount);
       }
     },
 
     _updateGridMetrics: function() {
       this._viewportWidth = this.$.items.offsetWidth;
       // Set item width to the value of the _physicalItems offsetWidth
@@ skipping 10 matching lines @@
     _positionItems: function() {
       this._adjustScrollPosition();
 
       var y = this._physicalTop;
 
       if (this.grid) {
         var totalItemWidth = this._itemsPerRow * this._itemWidth;
         var rowOffset = (this._viewportWidth - totalItemWidth) / 2;
 
         this._iterateItems(function(pidx, vidx) {
-
           var modulus = vidx % this._itemsPerRow;
           var x = Math.floor((modulus * this._itemWidth) + rowOffset);
-
           this.translate3d(x + 'px', y + 'px', 0, this._physicalItems[pidx]);
-
           if (this._shouldRenderNextRow(vidx)) {
             y += this._rowHeight;
           }
-
         });
       } else {
         this._iterateItems(function(pidx, vidx) {
-
           this.translate3d(0, y + 'px', 0, this._physicalItems[pidx]);
           y += this._physicalSizes[pidx];
-
         });
       }
     },
 
     _getPhysicalSizeIncrement: function(pidx) {
       if (!this.grid) {
         return this._physicalSizes[pidx];
       }
       if (this._computeVidx(pidx) % this._itemsPerRow !== this._itemsPerRow - 1) {
         return 0;
@@ skipping 49 matching lines @@
         this._estScrollHeight = this._virtualRowCount * this._rowHeight;
       } else {
         this._estScrollHeight = (this._physicalBottom +
             Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage);
       }
 
       forceUpdate = forceUpdate || this._scrollHeight === 0;
       forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
       forceUpdate = forceUpdate || this.grid && this.$.items.style.height < this._estScrollHeight;
 
-      // amortize height adjustment, so it won't trigger repaints very often
+      // Amortize height adjustment, so it won't trigger large repaints too often.
       if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._optPhysicalSize) {
         this.$.items.style.height = this._estScrollHeight + 'px';
         this._scrollHeight = this._estScrollHeight;
       }
     },
 
     /**
      * Scroll to a specific item in the virtual list regardless
      * of the physical items in the DOM tree.
      *
      * @method scrollToItem
      * @param {(Object)} item The item to be scrolled to
      */
     scrollToItem: function(item){
       return this.scrollToIndex(this.items.indexOf(item));
     },
 
     /**
      * Scroll to a specific index in the virtual list regardless
      * of the physical items in the DOM tree.
      *
      * @method scrollToIndex
      * @param {number} idx The index of the item
      */
     scrollToIndex: function(idx) {
       if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
         return;
       }
+
       Polymer.dom.flush();
       // Items should have been rendered prior scrolling to an index.
-      if (!this._itemsRendered) {
+      if (this._physicalCount === 0) {
         return;
       }
       idx = Math.min(Math.max(idx, 0), this._virtualCount-1);
-      // update the virtual start only when needed
+      // Update the virtual start only when needed.
       if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
         this._virtualStart = this.grid ? (idx - this._itemsPerRow * 2) : (idx - 1);
       }
-      // manage focus
       this._manageFocus();
-      // assign new models
       this._assignModels();
-      // measure the new sizes
       this._updateMetrics();
-      // estimate new physical offset
+      // Estimate new physical offset.
       this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow)  * this._physicalAverage;
 
       var currentTopItem = this._physicalStart;
       var currentVirtualItem = this._virtualStart;
       var targetOffsetTop = 0;
       var hiddenContentSize = this._hiddenContentSize;
-      // scroll to the item as much as we can
+      // scroll to the item as much as we can.
       while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
         targetOffsetTop = targetOffsetTop + this._getPhysicalSizeIncrement(currentTopItem);
         currentTopItem = (currentTopItem + 1) % this._physicalCount;
         currentVirtualItem++;
       }
-      // update the scroller size
       this._updateScrollerSize(true);
-      // update the position of the items
       this._positionItems();
-      // set the new scroll position
       this._resetScrollPosition(this._physicalTop + this._scrollerPaddingTop + targetOffsetTop);
-      // increase the pool of physical items if needed
       this._increasePoolIfNeeded();
-      // clear cached visible index
+      // clear cached visible index.
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
     },
 
     /**
      * Reset the physical average and the average count.
      */
     _resetAverage: function() {
       this._physicalAverage = 0;
       this._physicalAverageCount = 0;
     },
 
     /**
      * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
      * when the element is resized.
      */
     _resizeHandler: function() {
       // iOS fires the resize event when the address bar slides up
       if (IOS && Math.abs(this._viewportHeight - this._scrollTargetHeight) < 100) {
         return;
       }
       // In Desktop Safari 9.0.3, if the scroll bars are always shown,
       // changing the scroll position from a resize handler would result in
       // the scroll position being reset. Waiting 1ms fixes the issue.
       Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', function() {
         this.updateViewportBoundaries();
         this._render();
 
-        if (this._itemsRendered && this._physicalItems && this._isVisible) {
+        if (this._physicalCount > 0 && this._isVisible) {
           this._resetAverage();
           this.scrollToIndex(this.firstVisibleIndex);
         }
       }.bind(this), 1));
     },
 
     _getModelFromItem: function(item) {
       var key = this._collection.getKey(item);
       var pidx = this._physicalIndexForKey[key];
 
@@ skipping 327 matching lines @@
       this._focusPhysicalItem(this._focusedIndex + 1);
     },
 
     _didEnter: function(e) {
       this._focusPhysicalItem(this._focusedIndex);
       this._selectionHandler(e.detail.keyboardEvent);
     }
   });
 
 })();