third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js - Issue 2339293003: DevTools: Buffer ViewportController to prevent whitespace on scroll.

Unified Diff: third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js

Issue 2339293003: DevTools: Buffer ViewportController to prevent whitespace on scroll. (Closed)

Patch Set: upstream Created 4 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

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

diff --git a/third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js b/third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js

index 6a79013a74e3f818b0a5ebc7d106f3706c76026f..b310cf66394658e68c775cd9b19a16145041fe02 100644

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

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

@@ -54,8 +54,8 @@ WebInspector.ViewportControl = function(provider)

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;

@@ -230,13 +230,13 @@ WebInspector.ViewportControl.prototype = {

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;

@@ -299,7 +299,7 @@ WebInspector.ViewportControl.prototype = {

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;

@@ -355,26 +355,26 @@ WebInspector.ViewportControl.prototype = {

{

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;

}

@@ -402,8 +402,8 @@ WebInspector.ViewportControl.prototype = {

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;

}

@@ -416,28 +416,28 @@ WebInspector.ViewportControl.prototype = {

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 / 4), 0);

lushnikov 2016/09/15 20:53:08 like you said offline, you shouldn't divide by 4 h

// 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}

@@ -454,7 +454,7 @@ WebInspector.ViewportControl.prototype = {

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)

@@ -473,7 +473,7 @@ WebInspector.ViewportControl.prototype = {

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);

@@ -483,16 +483,16 @@ WebInspector.ViewportControl.prototype = {

/**

- * @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)

@@ -504,7 +504,7 @@ WebInspector.ViewportControl.prototype = {

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) {

@@ -585,7 +585,12 @@ WebInspector.ViewportControl.prototype = {

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);

/**

@@ -593,7 +598,12 @@ WebInspector.ViewportControl.prototype = {

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);

/**

@@ -601,11 +611,11 @@ WebInspector.ViewportControl.prototype = {

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();

/**

@@ -614,13 +624,13 @@ WebInspector.ViewportControl.prototype = {

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);

« no previous file with comments | « no previous file | no next file » | no next file with comments »