Roll performance-oriented iron-list changes

chrome/browser/resources/md_history/app.crisper.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.
 function PromiseResolver() {
   this.resolve_;
   this.reject_;
   this.promise_ = new Promise(function(resolve, reject) {
     this.resolve_ = resolve;
     this.reject_ = reject;
   }.bind(this));
@@ skipping 7183 matching lines @@
     _physicalIndexForKey: null,
     _estScrollHeight: 0,
     _scrollHeight: 0,
     _viewportHeight: 0,
     _viewportWidth: 0,
     _physicalItems: null,
     _physicalSizes: null,
     _firstVisibleIndexVal: null,
     _lastVisibleIndexVal: null,
     _collection: null,
-    _itemsRendered: false,
-    _lastPage: null,
     _maxPages: 3,
     _focusedItem: null,
     _focusedIndex: -1,
     _offscreenFocusedItem: null,
     _focusBackfillItem: null,
     _itemsPerRow: 1,
     _itemWidth: 0,
     _rowHeight: 0,
+    _templateCost: 0,
     get _physicalBottom() {
       return this._physicalTop + this._physicalSize;
     },
     get _scrollBottom() {
       return this._scrollPosition + this._viewportHeight;
     },
     get _virtualEnd() {
       return this._virtualStart + this._physicalCount - 1;
     },
     get _hiddenContentSize() {
@@ skipping 37 matching lines @@
     get _optPhysicalSize() {
       if (this.grid) {
         return this._estRowsInView * this._rowHeight * this._maxPages;
       }
       return this._viewportHeight * this._maxPages;
     },
     get _optPhysicalCount() {
       return this._estRowsInView * this._itemsPerRow * this._maxPages;
     },
     get _isVisible() {
-      return this.scrollTarget && Boolean(this.scrollTarget.offsetWidth || this.scrollTarget.offsetHeight);
+      return Boolean(this.offsetWidth || this.offsetHeight);
     },
     get firstVisibleIndex() {
       if (this._firstVisibleIndexVal === null) {
         var physicalOffset = Math.floor(this._physicalTop + this._scrollerPaddingTop);
         this._firstVisibleIndexVal = this._iterateItems(function(pidx, vidx) {
           physicalOffset += this._getPhysicalSizeIncrement(pidx);
           if (physicalOffset > this._scrollPosition) {
             return this.grid ? vidx - vidx % this._itemsPerRow : vidx;
           }
           if (this.grid && this._virtualCount - 1 === vidx) {
@@ skipping 32 matching lines @@
       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);
+      }
       this.listen(this, 'iron-resize', '_resizeHandler');
     },
     detached: function() {
-      this._itemsRendered = false;
       this.unlisten(this, 'iron-resize', '_resizeHandler');
     },
     _setOverflow: function(scrollTarget) {
       this.style.webkitOverflowScrolling = scrollTarget === this ? 'touch' : '';
       this.style.overflow = scrollTarget === this ? 'auto' : '';
     },
     updateViewportBoundaries: function() {
       this._scrollerPaddingTop = this.scrollTarget === this ? 0 : parseInt(window.getComputedStyle(this)['padding-top'], 10);
       this._viewportHeight = this._scrollTargetHeight;
       if (this.grid) {
@@ skipping 80 matching lines @@
         var inst = this.stamp(null);
         physicalItems[i] = inst.root.querySelector('*');
         Polymer.dom(this).appendChild(inst.root);
       }
       return physicalItems;
     },
     _increasePoolIfNeeded: function() {
       if (this._viewportHeight === 0) {
         return false;
       }
-      var isClientHeightFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
-      if (this._physicalSize >= this._optPhysicalSize && isClientHeightFull) {
+      var self = this;
+      var isClientFull = this._physicalBottom >= this._scrollBottom && this._physicalTop <= this._scrollPosition;
+      if (this._physicalSize >= this._optPhysicalSize && isClientFull) {
         return false;
       }
-      var currentPage = Math.floor(this._physicalSize / this._viewportHeight);
-      if (currentPage === 0) {
-        this._debounceTemplate(this._increasePool.bind(this, Math.round(this._physicalCount * .5)));
-      } else if (this._lastPage !== currentPage && isClientHeightFull) {
-        Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', this._increasePool.bind(this, this._itemsPerRow), 16));
-      } else {
-        this._debounceTemplate(this._increasePool.bind(this, this._itemsPerRow));
+      var maxPoolSize = Math.round(this._physicalCount * .5);
+      if (!isClientFull) {
+        this._debounceTemplate(this._increasePool.bind(this, maxPoolSize));
+        return true;
       }
-      this._lastPage = currentPage;
+      this._yield(function() {
+        self._increasePool(Math.min(maxPoolSize, Math.max(1, Math.round(50 / self._templateCost))));
+      });
       return true;
     },
+    _yield: function(cb) {
+      var g = window;
+      var handle = g.requestIdleCallback ? g.requestIdleCallback(cb) : g.setTimeout(cb, 16);
+      Polymer.dom.addDebouncer({
+        complete: function() {
+          g.cancelIdleCallback ? g.cancelIdleCallback(handle) : g.clearTimeout(handle);
+          cb();
+        }
+      });
+    },
     _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;
       }
       [].push.apply(this._physicalItems, this._createPool(delta));
       [].push.apply(this._physicalSizes, new Array(delta));
       this._physicalCount = prevPhysicalCount + delta;
       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: 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();
+        }
       }
     },
     _ensureTemplatized: function() {
       if (!this.ctor) {
         var props = {};
         props.__key__ = true;
         props[this.as] = true;
         props[this.indexAs] = true;
         props[this.selectedAs] = true;
         props.tabIndex = true;
@@ skipping 60 matching lines @@
     },
     _itemsChanged: function(change) {
       if (change.path === '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();
-        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 {
         this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
-        return;
       }
-      this._itemsRendered = false;
-      this._debounceTemplate(this._render);
     },
     _adjustVirtualIndex: function(splices) {
       splices.forEach(function(splice) {
         splice.removed.forEach(this._removeItem, this);
         if (splice.index < this._virtualStart) {
           var delta = Math.max(splice.addedCount - splice.removed.length, splice.index - this._virtualStart);
           this._virtualStart = this._virtualStart + delta;
           if (this._focusedIndex >= 0) {
             this._focusedIndex = this._focusedIndex + delta;
           }
@@ skipping 148 matching lines @@
       }
     },
     scrollToItem: function(item) {
       return this.scrollToIndex(this.items.indexOf(item));
     },
     scrollToIndex: function(idx) {
       if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
         return;
       }
       Polymer.dom.flush();
-      if (!this._itemsRendered) {
+      if (this._physicalCount === 0) {
         return;
       }
       idx = Math.min(Math.max(idx, 0), this._virtualCount - 1);
       if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
         this._virtualStart = this.grid ? idx - this._itemsPerRow * 2 : idx - 1;
       }
       this._manageFocus();
       this._assignModels();
       this._updateMetrics();
       this._physicalTop = Math.floor(this._virtualStart / this._itemsPerRow) * this._physicalAverage;
@@ skipping 17 matching lines @@
       this._physicalAverage = 0;
       this._physicalAverageCount = 0;
     },
     _resizeHandler: function() {
       if (IOS && Math.abs(this._viewportHeight - this._scrollTargetHeight) < 100) {
         return;
       }
       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];
       if (pidx != null) {
         return this._physicalItems[pidx]._templateInstance;
@@ skipping 1038 matching lines @@
 
        case HistoryRange.MONTH:
         histogramValue = HistoryPageViewHistogram.GROUPED_MONTH;
         break;
       }
       break;
     }
     md_history.BrowserService.getInstance().recordHistogram('History.HistoryPageView', histogramValue, HistoryPageViewHistogram.END);
   }
 });