Refactor of Observatory virtual-collection

Refactor of Observatory virtual-collection

The virtual-collection component uses a div container as a viewport on
a fixed sized spacer div that emulates the full size of the content.
In the spacer div there is a relative positioned div that scrolls
both horizontally and vertically. While the internal items are fully
computed horizontally, vertically we render just a subset of the items.
This buffer component scrolls both horizontally and vertically due
to its father child relationship with the spacer div. When the viewport
is going to show items that are not rendered in the buffer we move
the buffer accordingly (it is relative positioned with a variable top)
and update the content.

Managing the header of a table though is challenging:
1. we want the header to be fixed vertically
2. we want it to scroll horizontally accordingly to the the rest of the
   content
3. we want also to make this container took into consideration during
   the width computation, to allow it to trigger the horizontal
   scrollbar if it is wider that content.
4. we want the header to perceive the same available space as the
   other items in the collection.

We cannot obtain (1) at the same time of (2) (3) and (4) via pure
CSS. The header must be child of just another element.
- If we make it children of collection itself we obtain just (1) while
  we need to emulate the others via code.
- If we make it children of the viewport we obtain (2) (3) and (4),
  but we need to emulate (1) via code.

The first implementation followed the second option. The side effect
though is that smooth scroll (touch or touchpad based) does not fire
the onScroll events required to keep the header on top fast enough to
avoid flickering.

Due to the fact that scroll is the main use case for this element the
new implementation uses the first approach. Vertical flickering is
a problem no more. We obtain (2) by changing the horizontal offset
of the container, possible flickering, but way less common.
We obtain (3) by adding an extra div in the viewport which has the
same minimum size of the header. We obtain (4) by updating the
width of the last header child during the resize operations.

R=asiva@google.com

Committed: https://github.com/dart-lang/sdk/commit/66c0fd885aa40ead587f7ceab8e6afdb11543995

[cbernaschina, 2017-08-18 20:33:07]

cbernaschina@google.com changed reviewers:
+ asiva@google.com

[siva, 2017-08-18 21:29:16]

lgtm

[cbernaschina, 2017-08-18 21:33:36]

Description was changed from

==========
Refactor of Observatory virtual-collection

The virtual-collection component uses a div container as a viewport on
a fixed sized spacer div that emulates the full size of the content.
In the spacer div there is a relative positioned div that scrolls
both horizontally and vertically. While the internal items are fully
computed horizontally, vertically we render just a subset of the items.
This buffer component scrolls both horizontally and vertically due
to its father child relationship with the spacer div. When the viewport
is going to show items that are not rendered in the buffer we move
the buffer accordingly (it is relative positioned with a variable top)
and update the content.

Managing the header of a table though is challenging:
1. we want the header to be fixed vertically
2. we want it to scroll horizontally accordingly to the the rest of the
   content
3. we want also to make this container took into consideration during
   the width computation, to allow it to trigger the horizontal
   scrollbar if it is wider that content.
4. we want the header to perceive the same available space as the
   other items in the collection.

We cannot obtain (1) at the same time of (2) (3) and (4) via pure
CSS. The header must be child of just another element.
- If we make it children of collection itself we obtain just (1) while
  we need to emulate the others via code.
- If we make it children of the viewport we obtain (2) (3) and (4),
  but we need to emulate (1) via code.

The first implementation followed the second option. The side effect
though is that smooth scroll (touch or touchpad based) does not fire
the onScroll events required to keep the header on top fast enough to
avoid flickering.

Due to the fact that scroll is the main use case for this element the
new implementation uses the first approach. Vertical flickering is
a problem no more. We obtain (2) by changing the horizontal offset
of the container, possible flickering, but way less common.
We obtain (3) by adding an extra div in the viewport which has the
same minimum size of the header. We obtain (4) by updating the
width of the last header child during the resize operations.
==========

to

==========
Refactor of Observatory virtual-collection

The virtual-collection component uses a div container as a viewport on
a fixed sized spacer div that emulates the full size of the content.
In the spacer div there is a relative positioned div that scrolls
both horizontally and vertically. While the internal items are fully
computed horizontally, vertically we render just a subset of the items.
This buffer component scrolls both horizontally and vertically due
to its father child relationship with the spacer div. When the viewport
is going to show items that are not rendered in the buffer we move
the buffer accordingly (it is relative positioned with a variable top)
and update the content.

Managing the header of a table though is challenging:
1. we want the header to be fixed vertically
2. we want it to scroll horizontally accordingly to the the rest of the
   content
3. we want also to make this container took into consideration during
   the width computation, to allow it to trigger the horizontal
   scrollbar if it is wider that content.
4. we want the header to perceive the same available space as the
   other items in the collection.

We cannot obtain (1) at the same time of (2) (3) and (4) via pure
CSS. The header must be child of just another element.
- If we make it children of collection itself we obtain just (1) while
  we need to emulate the others via code.
- If we make it children of the viewport we obtain (2) (3) and (4),
  but we need to emulate (1) via code.

The first implementation followed the second option. The side effect
though is that smooth scroll (touch or touchpad based) does not fire
the onScroll events required to keep the header on top fast enough to
avoid flickering.

Due to the fact that scroll is the main use case for this element the
new implementation uses the first approach. Vertical flickering is
a problem no more. We obtain (2) by changing the horizontal offset
of the container, possible flickering, but way less common.
We obtain (3) by adding an extra div in the viewport which has the
same minimum size of the header. We obtain (4) by updating the
width of the last header child during the resize operations.

R=asiva@google.com

Committed:
https://github.com/dart-lang/sdk/commit/66c0fd885aa40ead587f7ceab8e6afdb11543995
==========

[cbernaschina, 2017-08-18 21:33:38]

Committed patchset #2 (id:20001) manually as
66c0fd885aa40ead587f7ceab8e6afdb11543995 (presubmit successful).