Dramatically increase the performance of Observatory's profile UI

Dramatically increase the performance of Observatory's profile UI

- Add new VirtualTree view model. Only renders visible tree rows and keeps DOM load light regardless of tree size.

- Port Observatory profiler UI to new VirtualTree.

- sra's dart2js stress test instantly displays with this CL

Some trade offs:

- We get instant tree expand / collapse but scrolling is slower / janky. Need to investigate how to make this fast.

(short term) loss of functionality:

- UI is minimal for now. We don't display the attribute boxes or the InfoBox button.

R=rmacnak@google.com

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

[Cutch, 2016-03-24 22:00:15]

Description was changed from

==========
Dramatically increase the performance of Observatory's profile UI

BUG=
==========

to

==========
Dramatically increase the performance of Observatory's profile UI

- Add new VirtualTree view model. Only renders visible tree rows and keeps DOM
load light regardless of tree size.

- Port Observatory profiler UI to new VirtualTree.

- sra's dart2js stress test instantly displays with this CL

Some trade offs:

- We get instant tree expand / collapse but scrolling is slower / janky. Need to
investigate how to make this fast.

(short term) loss of functionality:

- UI is minimal for now. We don't display the attribute boxes or the InfoBox
button.
==========

[Cutch, 2016-03-24 22:00:16]

johnmccutchan@google.com changed reviewers:
+ rmacnak@google.com

[rmacnak, 2016-03-24 23:20:38]

Can we restore the indented shadow box and default expansion of the first level?
I found myself waiting not realizing the response was already back because it
initially looks like a header.

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
File runtime/observatory/lib/src/app/view_model.dart (right):

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
runtime/observatory/lib/src/app/view_model.dart:54: element.style.flexBasis =
flexBasis;
Odd for this one to have a variable when the rest are literals.

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
File runtime/observatory/lib/src/elements/cpu_profile.dart (right):

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
runtime/observatory/lib/src/elements/cpu_profile.dart:22: abstract class
ProfileTreeRow<T> extends TableTreeRow {
I assume you're just keeping the old ones for reference until the tags and info
box are moved over?

[Cutch, 2016-03-25 03:04:08]

I've restored the auto expanding but not the indented shadow box (I'll explain
offline why I don't want to put that back).

I've also improved the scrolling performance by caching elements and using
requestAnimationFrame.

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
File runtime/observatory/lib/src/app/view_model.dart (right):

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
runtime/observatory/lib/src/app/view_model.dart:54: element.style.flexBasis =
flexBasis;
On 2016/03/24 23:20:36, rmacnak wrote:
> Odd for this one to have a variable when the rest are literals.

Done here and elsewhere.

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
File runtime/observatory/lib/src/elements/cpu_profile.dart (right):

https://codereview.chromium.org/1833453004/diff/1/runtime/observatory/lib/src...
runtime/observatory/lib/src/elements/cpu_profile.dart:22: abstract class
ProfileTreeRow<T> extends TableTreeRow {
On 2016/03/24 23:20:36, rmacnak wrote:
> I assume you're just keeping the old ones for reference until the tags and
info
> box are moved over?

Acknowledged.

[sra1, 2016-03-25 03:28:34]

sra@google.com changed reviewers:
+ sra@google.com

[sra1, 2016-03-25 03:28:35]

A problem with virtual views is that the browser's search does not work.

I find PgUp and PgDn confusing since the behaviour depends on the focus.

All in all, I think it would be better to make the original view faster by
avoiding using polymer elements and data binding for references that are just
links.

[Cutch, 2016-03-25 13:42:45]

On 2016/03/25 03:28:35, sra1 wrote:
> A problem with virtual views is that the browser's search does not work.
> 

A tree search will be added.

> I find PgUp and PgDn confusing since the behaviour depends on the focus.
> 

Focus bugs can be fixed.

> All in all, I think it would be better to make the original view faster by
> avoiding using polymer elements and data binding for references that are just
> links.

We use polymer elements for links to functions and code. These elements do not
use data binding.

[rmacnak, 2016-03-25 20:40:03]

lgtm

[Cutch, 2016-03-25 22:02:43]

Description was changed from

==========
Dramatically increase the performance of Observatory's profile UI

- Add new VirtualTree view model. Only renders visible tree rows and keeps DOM
load light regardless of tree size.

- Port Observatory profiler UI to new VirtualTree.

- sra's dart2js stress test instantly displays with this CL

Some trade offs:

- We get instant tree expand / collapse but scrolling is slower / janky. Need to
investigate how to make this fast.

(short term) loss of functionality:

- UI is minimal for now. We don't display the attribute boxes or the InfoBox
button.
==========

to

==========
Dramatically increase the performance of Observatory's profile UI

- Add new VirtualTree view model. Only renders visible tree rows and keeps DOM
load light regardless of tree size.

- Port Observatory profiler UI to new VirtualTree.

- sra's dart2js stress test instantly displays with this CL

Some trade offs:

- We get instant tree expand / collapse but scrolling is slower / janky. Need to
investigate how to make this fast.

(short term) loss of functionality:

- UI is minimal for now. We don't display the attribute boxes or the InfoBox
button.

R=rmacnak@google.com

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

[Cutch, 2016-03-25 22:02:48]

Committed patchset #7 (id:120001) manually as
bae39a100c6baf1d87f2ac237666bb8a4cef3261 (presubmit successful).