DevTools: Buffer ViewportController to prevent whitespace on scroll.

third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 36 matching lines @@
     // Text content needed for range intersection checks in _updateSelectionModel.
     // Use Unicode ZERO WIDTH NO-BREAK SPACE, which avoids contributing any height to the element's layout overflow.
     this._topGapElement.textContent = "\uFEFF";
     this._bottomGapElement.textContent = "\uFEFF";
 
     this._provider = provider;
     this.element.addEventListener("scroll", this._onScroll.bind(this), false);
     this.element.addEventListener("copy", this._onCopy.bind(this), false);
     this.element.addEventListener("dragstart", this._onDragStart.bind(this), false);
 
-    this._firstVisibleIndex = 0;
-    this._lastVisibleIndex = -1;
+    this._firstActiveIndex = 0;
+    this._lastActiveIndex = -1;
     this._renderedItems = [];
     this._anchorSelection = null;
     this._headSelection = null;
     this._itemCount = 0;
 
     // Listen for any changes to descendants and trigger a refresh. This ensures
     // that items updated asynchronously will not break stick-to-bottom behavior
     // if they change the scroll height.
     this._observer = new MutationObserver(this.refresh.bind(this));
     this._observerConfig = { childList: true, subtree: true };
@@ skipping 154 matching lines @@
         }
         return element;
     },
 
     _rebuildCumulativeHeightsIfNeeded: function()
     {
         if (this._cumulativeHeights)
             return;
         if (!this._itemCount)
             return;
-        var firstVisibleIndex = this._firstVisibleIndex;
-        var lastVisibleIndex = this._lastVisibleIndex;
+        var firstActiveIndex = this._firstActiveIndex;
+        var lastActiveIndex = this._lastActiveIndex;
         var height = 0;
         this._cumulativeHeights = new Int32Array(this._itemCount);
         for (var i = 0; i < this._itemCount; ++i) {
-            if (firstVisibleIndex <= i && i <= lastVisibleIndex)
-                height += this._renderedItems[i - firstVisibleIndex].element().offsetHeight;
+            if (firstActiveIndex <= i && i <= lastActiveIndex)
+                height += this._renderedItems[i - firstActiveIndex].element().offsetHeight;
             else
                 height += this._provider.fastHeight(i);
             this._cumulativeHeights[i] = height;
         }
     },
 
     /**
      * @param {number} index
      * @return {number}
      */
@@ skipping 42 matching lines @@
             this._anchorSelection = null;
             return false;
         }
 
         var firstSelected = Number.MAX_VALUE;
         var lastSelected = -1;
 
         var hasVisibleSelection = false;
         for (var i = 0; i < this._renderedItems.length; ++i) {
             if (range.intersectsNode(this._renderedItems[i].element())) {
-                var index = i + this._firstVisibleIndex;
+                var index = i + this._firstActiveIndex;
                 firstSelected = Math.min(firstSelected, index);
                 lastSelected = Math.max(lastSelected, index);
                 hasVisibleSelection = true;
             }
         }
         if (hasVisibleSelection) {
             firstSelected = this._createSelectionModel(firstSelected, /** @type {!Node} */(range.startContainer), range.startOffset);
             lastSelected = this._createSelectionModel(lastSelected, /** @type {!Node} */(range.endContainer), range.endOffset);
         }
         var topOverlap = range.intersectsNode(this._topGapElement) && this._topGapElement._active;
@@ skipping 35 matching lines @@
         return true;
     },
 
     /**
      * @param {?Selection} selection
      */
     _restoreSelection: function(selection)
     {
         var anchorElement = null;
         var anchorOffset;
-        if (this._firstVisibleIndex <= this._anchorSelection.item && this._anchorSelection.item <= this._lastVisibleIndex) {
+        if (this._firstActiveIndex <= this._anchorSelection.item && this._anchorSelection.item <= this._lastActiveIndex) {
             anchorElement = this._anchorSelection.node;
             anchorOffset = this._anchorSelection.offset;
         } else {
-            if (this._anchorSelection.item < this._firstVisibleIndex)
+            if (this._anchorSelection.item < this._firstActiveIndex)
                 anchorElement = this._topGapElement;
-            else if (this._anchorSelection.item > this._lastVisibleIndex)
+            else if (this._anchorSelection.item > this._lastActiveIndex)
                 anchorElement = this._bottomGapElement;
             anchorOffset = this._selectionIsBackward ? 1 : 0;
         }
 
         var headElement = null;
         var headOffset;
-        if (this._firstVisibleIndex <= this._headSelection.item && this._headSelection.item <= this._lastVisibleIndex) {
+        if (this._firstActiveIndex <= this._headSelection.item && this._headSelection.item <= this._lastActiveIndex) {
             headElement = this._headSelection.node;
             headOffset = this._headSelection.offset;
         } else {
-            if (this._headSelection.item < this._firstVisibleIndex)
+            if (this._headSelection.item < this._firstActiveIndex)
                 headElement = this._topGapElement;
-            else if (this._headSelection.item > this._lastVisibleIndex)
+            else if (this._headSelection.item > this._lastActiveIndex)
                 headElement = this._bottomGapElement;
             headOffset = this._selectionIsBackward ? 0 : 1;
         }
 
         selection.setBaseAndExtent(anchorElement, anchorOffset, headElement, headOffset);
     },
 
     refresh: function()
     {
         this._observer.disconnect();
         this._innerRefresh();
         if (this._stickToBottom)
             this._observer.observe(this._contentElement, this._observerConfig);
     },
 
     _innerRefresh: function()
     {
         if (!this._visibleHeight())
             return;  // Do nothing for invisible controls.
 
         if (!this._itemCount) {
             for (var i = 0; i < this._renderedItems.length; ++i)
                 this._renderedItems[i].willHide();
             this._renderedItems = [];
             this._contentElement.removeChildren();
             this._topGapElement.style.height = "0px";
             this._bottomGapElement.style.height = "0px";
-            this._firstVisibleIndex = -1;
-            this._lastVisibleIndex = -1;
+            this._firstActiveIndex = -1;
+            this._lastActiveIndex = -1;
             return;
         }
 
         var selection = this.element.getComponentSelection();
         var shouldRestoreSelection = this._updateSelectionModel(selection);
 
         var visibleFrom = this.element.scrollTop;
         var visibleHeight = this._visibleHeight();
         var isInvalidating = !this._cumulativeHeights;
 
         for (var i = 0; i < this._renderedItems.length; ++i) {
             // Tolerate 1-pixel error due to double-to-integer rounding errors.
-            if (this._cumulativeHeights && Math.abs(this._cachedItemHeight(this._firstVisibleIndex + i) - this._renderedItems[i].element().offsetHeight) > 1)
+            if (this._cumulativeHeights && Math.abs(this._cachedItemHeight(this._firstActiveIndex + i) - this._renderedItems[i].element().offsetHeight) > 1)
                 delete this._cumulativeHeights;
         }
         this._rebuildCumulativeHeightsIfNeeded();
-        var oldFirstVisibleIndex = this._firstVisibleIndex;
-        var oldLastVisibleIndex = this._lastVisibleIndex;
-
+        var oldFirstActiveIndex = this._firstActiveIndex;
+        var oldLastActiveIndex = this._lastActiveIndex;
+        var activeHeight = visibleHeight * 2;
         // When the viewport is scrolled to the bottom, using the cumulative heights estimate is not
         // precise enough to determine next visible indices. This stickToBottom check avoids extra
         // calls to refresh in those cases.
         if (this._stickToBottom) {
-            this._firstVisibleIndex = Math.max(this._itemCount - Math.ceil(visibleHeight / this._provider.minimumRowHeight()), 0);
-            this._lastVisibleIndex = this._itemCount - 1;
+            this._firstActiveIndex = Math.max(this._itemCount - Math.ceil(activeHeight / this._provider.minimumRowHeight()), 0);
+            this._lastActiveIndex = this._itemCount - 1;
         } else {
-            this._firstVisibleIndex = Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, visibleFrom + 1), 0);
+            this._firstActiveIndex = Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, visibleFrom + 1 - (activeHeight - visibleHeight) / 2), 0);
             // Proactively render more rows in case some of them will be collapsed without triggering refresh. @see crbug.com/390169
-            this._lastVisibleIndex = this._firstVisibleIndex + Math.ceil(visibleHeight / this._provider.minimumRowHeight()) - 1;
-            this._lastVisibleIndex = Math.min(this._lastVisibleIndex, this._itemCount - 1);
+            this._lastActiveIndex = this._firstActiveIndex + Math.ceil(activeHeight / this._provider.minimumRowHeight()) - 1;
+            this._lastActiveIndex = Math.min(this._lastActiveIndex, this._itemCount - 1);
         }
 
-        var topGapHeight = this._cumulativeHeights[this._firstVisibleIndex - 1] || 0;
-        var bottomGapHeight = this._cumulativeHeights[this._cumulativeHeights.length - 1] - this._cumulativeHeights[this._lastVisibleIndex];
+        var topGapHeight = this._cumulativeHeights[this._firstActiveIndex - 1] || 0;
+        var bottomGapHeight = this._cumulativeHeights[this._cumulativeHeights.length - 1] - this._cumulativeHeights[this._lastActiveIndex];
 
         /**
          * @this {WebInspector.ViewportControl}
          */
         function prepare()
         {
             this._topGapElement.style.height = topGapHeight + "px";
             this._bottomGapElement.style.height = bottomGapHeight + "px";
             this._topGapElement._active = !!topGapHeight;
             this._bottomGapElement._active = !!bottomGapHeight;
             this._contentElement.style.setProperty("height", "10000000px");
         }
 
         if (isInvalidating)
             this._fullViewportUpdate(prepare.bind(this));
         else
-            this._partialViewportUpdate(oldFirstVisibleIndex, oldLastVisibleIndex, prepare.bind(this));
+            this._partialViewportUpdate(oldFirstActiveIndex, oldLastActiveIndex, prepare.bind(this));
         this._contentElement.style.removeProperty("height");
         // Should be the last call in the method as it might force layout.
         if (shouldRestoreSelection)
             this._restoreSelection(selection);
         if (this._stickToBottom)
             this.element.scrollTop = 10000000;
     },
 
     /**
      * @param {function()} prepare
      */
     _fullViewportUpdate: function(prepare)
     {
         for (var i = 0; i < this._renderedItems.length; ++i)
             this._renderedItems[i].willHide();
         prepare();
         this._renderedItems = [];
         this._contentElement.removeChildren();
-        for (var i = this._firstVisibleIndex; i <= this._lastVisibleIndex; ++i) {
+        for (var i = this._firstActiveIndex; i <= this._lastActiveIndex; ++i) {
             var viewportElement = this._providerElement(i);
             this._contentElement.appendChild(viewportElement.element());
             this._renderedItems.push(viewportElement);
         }
         for (var i = 0; i < this._renderedItems.length; ++i)
             this._renderedItems[i].wasShown();
     },
 
     /**
-     * @param {number} oldFirstVisibleIndex
-     * @param {number} oldLastVisibleIndex
+     * @param {number} oldFirstActiveIndex
+     * @param {number} oldLastActiveIndex
      * @param {function()} prepare
      */
-    _partialViewportUpdate: function(oldFirstVisibleIndex, oldLastVisibleIndex, prepare)
+    _partialViewportUpdate: function(oldFirstActiveIndex, oldLastActiveIndex, prepare)
     {
         var willBeHidden = [];
         for (var i = 0; i < this._renderedItems.length; ++i) {
-            var index = oldFirstVisibleIndex + i;
-            if (index < this._firstVisibleIndex || this._lastVisibleIndex < index)
+            var index = oldFirstActiveIndex + i;
+            if (index < this._firstActiveIndex || this._lastActiveIndex < index)
                 willBeHidden.push(this._renderedItems[i]);
         }
         for (var i = 0; i < willBeHidden.length; ++i)
             willBeHidden[i].willHide();
         prepare();
         for (var i = 0; i < willBeHidden.length; ++i)
             willBeHidden[i].element().remove();
 
         this._renderedItems = [];
         var anchor = this._contentElement.firstChild;
         var wasShown = [];
-        for (var i = this._firstVisibleIndex; i <= this._lastVisibleIndex; ++i) {
+        for (var i = this._firstActiveIndex; i <= this._lastActiveIndex; ++i) {
             var viewportElement = this._providerElement(i);
             var element = viewportElement.element();
             if (element !== anchor) {
                 this._contentElement.insertBefore(element, anchor);
                 wasShown.push(viewportElement);
             } else {
                 anchor = anchor.nextSibling;
             }
             this._renderedItems.push(viewportElement);
         }
@@ skipping 60 matching lines @@
     _onScroll: function(event)
     {
         this.refresh();
     },
 
     /**
      * @return {number}
      */
     firstVisibleIndex: function()
     {
-        return this._firstVisibleIndex;
+        var firstVisibleIndex;
+        if (this._stickToBottom)
+            firstVisibleIndex = Math.max(this._itemCount - Math.ceil(this._visibleHeight() / this._provider.minimumRowHeight()), 0);
+        else
+            firstVisibleIndex = Math.max(Array.prototype.lowerBound.call(this._cumulativeHeights, this.element.scrollTop + 1), 0);
+        return Math.max(firstVisibleIndex, this._firstActiveIndex);
     },
 
     /**
      * @return {number}
      */
     lastVisibleIndex: function()
     {
-        return this._lastVisibleIndex;
+        var lastVisibleIndex;
+        if (this._stickToBottom)
+            lastVisibleIndex = this._itemCount - 1;
+        else
+            lastVisibleIndex = this.firstVisibleIndex() + Math.ceil(this._visibleHeight() / this._provider.minimumRowHeight()) - 1;
+        return Math.min(lastVisibleIndex, this._lastActiveIndex);
     },
 
     /**
      * @return {?Element}
      */
     renderedElementAt: function(index)
     {
-        if (index < this._firstVisibleIndex)
+        if (index < this._firstActiveIndex)
             return null;
-        if (index > this._lastVisibleIndex)
+        if (index > this._lastActiveIndex)
             return null;
-        return this._renderedItems[index - this._firstVisibleIndex].element();
+        return this._renderedItems[index - this._firstActiveIndex].element();
     },
 
     /**
      * @param {number} index
      * @param {boolean=} makeLast
      */
     scrollItemIntoView: function(index, makeLast)
     {
-        if (index > this._firstVisibleIndex && index < this._lastVisibleIndex)
+        if (index > this._firstActiveIndex && index < this._lastActiveIndex)
             return;
         if (makeLast)
             this.forceScrollItemToBeLast(index);
-        else if (index <= this._firstVisibleIndex)
+        else if (index <= this._firstActiveIndex)
             this.forceScrollItemToBeFirst(index);
-        else if (index >= this._lastVisibleIndex)
+        else if (index >= this._lastActiveIndex)
             this.forceScrollItemToBeLast(index);
     },
 
     /**
      * @param {number} index
      */
     forceScrollItemToBeFirst: function(index)
     {
         this.setStickToBottom(false);
         this._rebuildCumulativeHeightsIfNeeded();
@@ skipping 18 matching lines @@
 
     /**
      * @return {number}
      */
     _visibleHeight: function()
     {
         // Use offsetHeight instead of clientHeight to avoid being affected by horizontal scroll.
         return this.element.offsetHeight;
     }
 }