[DevTools] Replace ViewportControl with ListControl.

[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to be used in treeoutline).

BUG=none

Committed: https://crrev.com/c17e290fa034b6f07969f27aaa78ceb6b651c12b
Cr-Commit-Position: refs/heads/master@{#440919}

[dgozman, 2016-12-20 01:18:27]

The CQ bit was checked by dgozman@chromium.org to run a CQ dry run

[dgozman, 2016-12-20 01:18:41]

dgozman@chromium.org changed reviewers:
+ einbinder@chromium.org, lushnikov@chromium.org

[dgozman, 2016-12-20 01:18:41]

Take a look please.

[commit-bot: I haz the power, 2016-12-20 01:19:00]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-12-20 01:21:18]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-12-20 01:21:19]

Dry run: Try jobs failed on following builders:
  ios-device-xcode-clang on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios-device-xcode-...)
  ios-simulator on master.tryserver.chromium.mac (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.mac/builders/ios-simulator/bui...)

[pfeldman, 2016-12-20 01:23:51]

pfeldman@chromium.org changed reviewers:
+ pfeldman@chromium.org

[pfeldman, 2016-12-20 01:23:52]

https://codereview.chromium.org/2592433003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js (right):

https://codereview.chromium.org/2592433003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js:142:
indexAtOffset(height) {},
I understand the former API, but don't get the new version at all. It looks
backwards to me.

[pfeldman, 2016-12-20 02:00:18]

https://codereview.chromium.org/2592433003/diff/1/third_party/WebKit/Source/d...
File third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js (right):

https://codereview.chromium.org/2592433003/diff/1/third_party/WebKit/Source/d...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:473: return
this._selectClosest(-this._viewport.elementsPerViewport(), false);
Since scrollbar belongs to viewport, this should also be be a part of it.

[dgozman, 2016-12-20 07:02:45]

The CQ bit was checked by dgozman@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-12-20 07:03:02]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[dgozman, 2016-12-20 07:11:51]

Description was changed from

==========
[DevTools] Improve ViewportControl.

This patch makes it possible to update viewport control's data without
a linear run over all the elements.

It also improves fast smooth scrolling of viewport on mac (less flashes).

For simple users with similar items, UI.SimpleViewport handles all the details
of measuring and calculating - client just supplies the elements factory.

More sophisticated clients coming next (mostly tree outline).

BUG=none
==========

to

==========
[DevTools] Improve ViewportControl.

This patch makes it possible to update viewport control's data without a linear
run over all the elements.
It also improves fast smooth scrolling of viewport on mac (less flashes).

Only supports fixed height elements, variable height is coming next (to be used
in treeoutline).

BUG=none
==========

[commit-bot: I haz the power, 2016-12-20 07:53:02]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-12-20 07:53:03]

Dry run: Try jobs failed on following builders:
  linux_android_rel_ng on master.tryserver.chromium.android (JOB_FAILED,
https://build.chromium.org/p/tryserver.chromium.android/builders/linux_androi...)

[einbinder, 2016-12-21 00:23:53]

https://codereview.chromium.org/2592433003/diff/20001/third_party/WebKit/Layo...
File
third_party/WebKit/LayoutTests/http/tests/inspector-unit/viewport-control-expected.txt
(right):

https://codereview.chromium.org/2592433003/diff/20001/third_party/WebKit/Layo...
third_party/WebKit/LayoutTests/http/tests/inspector-unit/viewport-control-expected.txt:1:
This tests if the SimpleViewport works properly.
SimpleViewport looks like a class.

https://codereview.chromium.org/2592433003/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js (right):

https://codereview.chromium.org/2592433003/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js:6: *
@template T
T needs to be some kind of object, otherwise you can't add a symbol to it.

https://codereview.chromium.org/2592433003/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js:28:
this._elementSymbol = Symbol('UI.ViewportControl.element');
It might make sense to use a WeakMap (or just a Map) here. If you have a
Suggestion object that is shared between different suggest boxes, it will leak
elements.

[dgozman, 2016-12-27 21:32:58]

dgozman@chromium.org changed reviewers:
+ caseq@chromium.org

[dgozman, 2016-12-27 21:33:00]

Take a look please.

https://codereview.chromium.org/2592433003/diff/40001/third_party/WebKit/Sour...
File third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js (right):

https://codereview.chromium.org/2592433003/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/ui/ViewportControl.js:28:
this._elementSymbol = Symbol('UI.ViewportControl.element');
On 2016/12/21 00:23:53, einbinder wrote:
> It might make sense to use a WeakMap (or just a Map) here. If you have a
> Suggestion object that is shared between different suggest boxes, it will leak
> elements.

Done.

[dgozman, 2016-12-27 21:35:22]

Description was changed from

==========
[DevTools] Improve ViewportControl.

This patch makes it possible to update viewport control's data without a linear
run over all the elements.
It also improves fast smooth scrolling of viewport on mac (less flashes).

Only supports fixed height elements, variable height is coming next (to be used
in treeoutline).

BUG=none
==========

to

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed height elements, variable/measured height is coming next (to
be used in treeoutline).

BUG=none
==========

[dgozman, 2016-12-27 21:42:02]

dgozman@chromium.org changed reviewers:
+ alph@chromium.org
- caseq@chromium.org

[alph, 2016-12-27 23:38:33]

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/ListControl.js (right):

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:70:
this._boundKeyDown = (event) => {
drop ()

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:74:
this._boundClick = (event) => {
ditto

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:109: popItem() {
return this.removeItemAtIndex(...)

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:110: var result =
this._items[this._items.length - 1];
peekLast

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:144:
this._items.splice.bind(this._items, from, to - from).apply(null, items);
apply with too many items may fail.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:150:
this._select(this._selectClosest(from - 1, -1, false), oldSelectedItem,
oldSelectedElement);
s/-1/+1/
Also put selection on n-1 if the last one selected has been deleted.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:165:
this._invalidate(from, to);
you can merge these two.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:201: * @param
{boolean} scrollIntoView
boolean=

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:242:
this._firstIndex :
Use first index in viewport

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:244: index =
this._selectClosest(index, 1, false);
-1

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:269: while (node
&& node.parentNode !== this.element)
handle shadow DOM

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:276:
this._select(item);
something's wrong here

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:334: oldElement =
oldItem ? (this._itemToElement.get(oldItem) || null) : null;
you can drop ?:

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:337: var
newElement = newItem ? (this._itemToElement.get(newItem) || null) : null;
ditto

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:355: return -1;
When reaching top, it should return first selectable item.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:394: var
availableHeight = this.element.offsetHeight;
viewportHeight

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:408:
this._renderedHeight = totalHeight;
update _firstIndex

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:415:
this.element.scrollTop = scrollTop + heightDelta;
drop this

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:425: var height =
this.element.offsetHeight;
viewportHeight

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:426: var
scrollTop = Math.max(0, Math.min(this.element.scrollTop, this._totalHeight() -
height));
If items are added before visible ones, I'd expect the scrollTop increase to
keep the screen intact.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:454:
this._topElement.style.height = '0px';
'0'

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:462: for (var
index = this._firstIndex; index < firstIndex; index++) {
while (this._firstIndex < Math.min(firstIndex, this._lastIndex))

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:467: for (var
index = this._lastIndex - 1; index >= lastIndex; index--) {
ditto

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:487:
this._bottomHeight = (totalHeight - this._offsetAtIndex(lastIndex));
drop ()

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js (right):

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:301:
fromElement.classList.remove('selected');
remove( ..., ... )

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:308: if (to) {
if (!to) return;

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:310:
this._asyncDetails(to).then((details) => {
drop ()

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:322: if
(this._list.onClick(event)) {
if (!...) return

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:391:
this._asyncDetailsCallback = (item) => asyncDetails.call(null,
completions.indexOf(item));
item => asyncDetails(completions.indexOf(item));

[dgozman, 2016-12-28 06:15:22]

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/ListControl.js (right):

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:70:
this._boundKeyDown = (event) => {
On 2016/12/27 23:38:33, alph_ooo wrote:
> drop ()

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:74:
this._boundClick = (event) => {
On 2016/12/27 23:38:33, alph_ooo wrote:
> ditto

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:109: popItem() {
On 2016/12/27 23:38:33, alph_ooo wrote:
> return this.removeItemAtIndex(...)

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:144:
this._items.splice.bind(this._items, from, to - from).apply(null, items);
On 2016/12/27 23:38:32, alph_ooo wrote:
> apply with too many items may fail.

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:150:
this._select(this._selectClosest(from - 1, -1, false), oldSelectedItem,
oldSelectedElement);
On 2016/12/27 23:38:33, alph_ooo wrote:
> s/-1/+1/
> Also put selection on n-1 if the last one selected has been deleted.

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:165:
this._invalidate(from, to);
On 2016/12/27 23:38:32, alph_ooo wrote:
> you can merge these two.

Acknowledged.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:201: * @param
{boolean} scrollIntoView
On 2016/12/27 23:38:32, alph_ooo wrote:
> boolean=

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:242:
this._firstIndex :
On 2016/12/27 23:38:33, alph_ooo wrote:
> Use first index in viewport

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:244: index =
this._selectClosest(index, 1, false);
On 2016/12/27 23:38:33, alph_ooo wrote:
> -1

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:269: while (node
&& node.parentNode !== this.element)
On 2016/12/27 23:38:32, alph_ooo wrote:
> handle shadow DOM

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:276:
this._select(item);
On 2016/12/27 23:38:32, alph_ooo wrote:
> something's wrong here

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:334: oldElement =
oldItem ? (this._itemToElement.get(oldItem) || null) : null;
On 2016/12/27 23:38:32, alph_ooo wrote:
> you can drop ?:

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:337: var
newElement = newItem ? (this._itemToElement.get(newItem) || null) : null;
On 2016/12/27 23:38:33, alph_ooo wrote:
> ditto

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:355: return -1;
On 2016/12/27 23:38:32, alph_ooo wrote:
> When reaching top, it should return first selectable item.

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:394: var
availableHeight = this.element.offsetHeight;
On 2016/12/27 23:38:33, alph_ooo wrote:
> viewportHeight

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:408:
this._renderedHeight = totalHeight;
On 2016/12/27 23:38:32, alph_ooo wrote:
> update _firstIndex

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:415:
this.element.scrollTop = scrollTop + heightDelta;
On 2016/12/27 23:38:33, alph_ooo wrote:
> drop this

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:425: var height =
this.element.offsetHeight;
On 2016/12/27 23:38:33, alph_ooo wrote:
> viewportHeight

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:426: var
scrollTop = Math.max(0, Math.min(this.element.scrollTop, this._totalHeight() -
height));
On 2016/12/27 23:38:32, alph_ooo wrote:
> If items are added before visible ones, I'd expect the scrollTop increase to
> keep the screen intact.

Added TODO.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:454:
this._topElement.style.height = '0px';
On 2016/12/27 23:38:33, alph_ooo wrote:
> '0'

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:462: for (var
index = this._firstIndex; index < firstIndex; index++) {
On 2016/12/27 23:38:32, alph_ooo wrote:
> while (this._firstIndex < Math.min(firstIndex, this._lastIndex))

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:467: for (var
index = this._lastIndex - 1; index >= lastIndex; index--) {
On 2016/12/27 23:38:33, alph_ooo wrote:
> ditto

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:487:
this._bottomHeight = (totalHeight - this._offsetAtIndex(lastIndex));
On 2016/12/27 23:38:33, alph_ooo wrote:
> drop ()

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js (right):

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:301:
fromElement.classList.remove('selected');
On 2016/12/27 23:38:33, alph_ooo wrote:
> remove( ..., ... )

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:308: if (to) {
On 2016/12/27 23:38:33, alph_ooo wrote:
> if (!to) return;

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:310:
this._asyncDetails(to).then((details) => {
On 2016/12/27 23:38:33, alph_ooo wrote:
> drop ()

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:322: if
(this._list.onClick(event)) {
On 2016/12/27 23:38:33, alph_ooo wrote:
> if (!...) return

Done.

https://codereview.chromium.org/2592433003/diff/120001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/SuggestBox.js:391:
this._asyncDetailsCallback = (item) => asyncDetails.call(null,
completions.indexOf(item));
On 2016/12/27 23:38:33, alph_ooo wrote:
> item => asyncDetails(completions.indexOf(item));

Done.

[dgozman, 2016-12-28 07:08:50]

Description was changed from

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed height elements, variable/measured height is coming next (to
be used in treeoutline).

BUG=none
==========

to

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to
be used in treeoutline).

BUG=none
==========

[dgozman, 2016-12-28 07:08:59]

The CQ bit was checked by dgozman@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-12-28 07:09:07]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[dgozman, 2016-12-28 07:10:24]

Please take a look. The only missing part is tests.

[commit-bot: I haz the power, 2016-12-28 08:53:50]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-12-28 08:53:50]

Dry run: Try jobs failed on following builders:
  win_chromium_rel_ng on master.tryserver.chromium.win (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.win/builders/win_chromium_rel_...)

[dgozman, 2016-12-28 17:44:06]

dgozman@chromium.org changed reviewers:
+ caseq@chromium.org
- lushnikov@chromium.org

[caseq, 2016-12-28 18:40:51]

lgtm

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/ListControl.js (right):

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:39: /** @enum
{string} */
Make it an @enum {symbol}?

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:47: *
@unrestricted
nit: remove?

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:86:
this.element.addEventListener('scroll', this._onScroll.bind(this), false);
nit: 3rd param is optional now.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:104:
setHandleInput(handleInput) {
remove till used?

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:178: this._items
= before.concat(items).concat(after);
before.concat(items, after) or [].concat(before, items, after)

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:259: index =
this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex;
This will select second from last when nothing is selected, and we likely want
the last one.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:263: index =
this._selectedIndex === -1 ? 0 : this._selectedIndex;
Similarly, this will result in second element being selected if nothing is
currently selected.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:460: var
scrollTop = Math.max(0, Math.min(this.element.scrollTop, this._totalHeight() -
viewportHeight));
use Number.constrain()?

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
(right):

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js:285:
filteredItems = bestItems.concat(overflowItems).concat(filteredItems);
bestItems.concat(overflowItems, filteredItems), or even [].concat(bestItems,
overflowItems, filteredItems).

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js:339:
if (this._list.onClick(event)) {
if (!...) return

[dgozman, 2016-12-28 19:17:11]

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui/ListControl.js (right):

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:39: /** @enum
{string} */
On 2016/12/28 18:40:51, caseq wrote:
> Make it an @enum {symbol}?

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:47: *
@unrestricted
On 2016/12/28 18:40:51, caseq wrote:
> nit: remove?

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:104:
setHandleInput(handleInput) {
On 2016/12/28 18:40:51, caseq wrote:
> remove till used?

Acknowledged.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:178: this._items
= before.concat(items).concat(after);
On 2016/12/28 18:40:51, caseq wrote:
> before.concat(items, after) or [].concat(before, items, after)

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:259: index =
this._selectedIndex === -1 ? this._items.length - 1 : this._selectedIndex;
On 2016/12/28 18:40:50, caseq wrote:
> This will select second from last when nothing is selected, and we likely want
> the last one.

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui/ListControl.js:460: var
scrollTop = Math.max(0, Math.min(this.element.scrollTop, this._totalHeight() -
viewportHeight));
On 2016/12/28 18:40:51, caseq wrote:
> use Number.constrain()?

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
File third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js
(right):

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js:285:
filteredItems = bestItems.concat(overflowItems).concat(filteredItems);
On 2016/12/28 18:40:51, caseq wrote:
> bestItems.concat(overflowItems, filteredItems), or even [].concat(bestItems,
> overflowItems, filteredItems).

Done.

https://codereview.chromium.org/2592433003/diff/160001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/ui_lazy/FilteredListWidget.js:339:
if (this._list.onClick(event)) {
On 2016/12/28 18:40:51, caseq wrote:
> if (!...) return

Done.

[dgozman, 2016-12-28 20:07:27]

The CQ bit was checked by dgozman@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2016-12-28 20:07:44]

Dry run: CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-12-28 21:33:46]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-12-28 21:33:47]

Dry run: This issue passed the CQ dry run.

[dgozman, 2016-12-29 01:17:05]

The CQ bit was checked by dgozman@chromium.org

[dgozman, 2016-12-29 01:17:06]

The patchset sent to the CQ was uploaded after l-g-t-m from caseq@chromium.org
Link to the patchset: https://codereview.chromium.org/2592433003/#ps200001
(title: "tests")

[commit-bot: I haz the power, 2016-12-29 01:17:22]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-12-29 01:21:18]

CQ is committing da patch.

Bot data: {"patchset_id": 200001, "attempt_start_ts": 1482974225860440,
"parent_rev": "cc967608e0987d8641e13fc8d772350cfda494e2", "commit_rev":
"95873a2cc27c0a9751dc9705c050538290ed2a74"}

[commit-bot: I haz the power, 2016-12-29 01:22:04]

Description was changed from

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to
be used in treeoutline).

BUG=none
==========

to

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to
be used in treeoutline).

BUG=none

Review-Url: https://codereview.chromium.org/2592433003
==========

[commit-bot: I haz the power, 2016-12-29 01:22:05]

Committed patchset #11 (id:200001)

[commit-bot: I haz the power, 2017-01-02 15:51:13]

Description was changed from

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to
be used in treeoutline).

BUG=none

Review-Url: https://codereview.chromium.org/2592433003
==========

to

==========
[DevTools] Replace ViewportControl with ListControl.

This patch introduces a list control, which maintains an array-like model. This
makes
it possible to update model efficiently (not in O(n) all the time).

It also improves fast smooth scrolling of viewport on mac (less flashes)
by using gap elements instead of absolute positioning.

Only supports fixed/measured height elements, variable height is coming next (to
be used in treeoutline).

BUG=none

Committed: https://crrev.com/c17e290fa034b6f07969f27aaa78ceb6b651c12b
Cr-Commit-Position: refs/heads/master@{#440919}
==========

[commit-bot: I haz the power, 2017-01-02 15:51:16]

Patchset 11 (id:??) landed as
https://crrev.com/c17e290fa034b6f07969f27aaa78ceb6b651c12b
Cr-Commit-Position: refs/heads/master@{#440919}