[profiler] Graphical front-end for tick processor.

[profiler] Graphical front-end for tick processor.

Improvements:
- top-down call tree.
- interactive restriction to time interval.

Review-Url: https://codereview.chromium.org/2696903002
Cr-Commit-Position: refs/heads/master@{#43599}
Committed: https://chromium.googlesource.com/v8/v8/+/fcce4797bc678958d527f93b46d2de2bdbf31dcc

[Jarin, 2017-03-03 10:59:15]

Description was changed from

==========
[profiler] Better html front-end.

Work in progress.
==========

to

==========
[profiler] Graphical front-end for tick processor.

Improvements:
- top-down call tree.
- interactive restriction to time interval.
==========

[Jarin, 2017-03-03 10:59:15]

jarin@chromium.org changed reviewers:
+ cbruni@chromium.org

[Jarin, 2017-03-03 10:59:48]

Could you take a look, please?

[Camillo Bruni, 2017-03-03 17:48:57]

LGTM, awesome work!
Take the comments as such – they are mostly of esthetic nature – and just land
it :)

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.html
File tools/profview/index.html (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.h...
tools/profview/index.html:11: <link rel="stylesheet" href="profview.css">
I'd probably directly include these files in the .html file (at least the
view-related ones).
Ugly but it makes sharing the document easier (like I put my callstats.html on
my x20 without problems)

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
File tools/profview/profview.js (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:14: let modeBar =
document.getElementById("mode-bar");
I always define a toplevel $ function which does this (poor-mans jquery :P)

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:65: setMode : function (mode) {
no need to add function :) { setMode(mode) { ... }, ... } just works fine.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:97: main.currentState =
setCallTreeState(main.currentState,  callTreeState);
I'm probably too pragmatic, but I'd just modify the global state directly :P

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:181: Promise.resolve().then(() => {
pfff so modern, when I was young, setTimeout was the latest shit :D.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:768: ctx.fill();
ha! I would have drawn the full width for every type, your way is probably
easier :)

[Jarin, 2017-03-04 11:21:22]

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.html
File tools/profview/index.html (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.h...
tools/profview/index.html:11: <link rel="stylesheet" href="profview.css">
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I'd probably directly include these files in the .html file (at least the
> view-related ones).
> Ugly but it makes sharing the document easier (like I put my callstats.html on
> my x20 without problems)

I am expecting the file to grow, so I will try to push on with separate files.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
File tools/profview/profview.js (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:14: let modeBar =
document.getElementById("mode-bar");
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I always define a toplevel $ function which does this (poor-mans jquery :P)

Done.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:65: setMode : function (mode) {
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> no need to add function :) { setMode(mode) { ... }, ... } just works fine.

Whoa, I had no idea this was possible.

Done.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:97: main.currentState =
setCallTreeState(main.currentState,  callTreeState);
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I'm probably too pragmatic, but I'd just modify the global state directly :P

That might not work, the views remember the old state and compare it to the new
one to figure out if a redraw is necessary. If you changed the global state, the
component could not detect the change.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:768: ctx.fill();
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> ha! I would have drawn the full width for every type, your way is probably
> easier :)

You can actually see the stitches between buckets, so I might switch to your way
:-)

[Jarin, 2017-03-04 11:21:23]

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.html
File tools/profview/index.html (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/index.h...
tools/profview/index.html:11: <link rel="stylesheet" href="profview.css">
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I'd probably directly include these files in the .html file (at least the
> view-related ones).
> Ugly but it makes sharing the document easier (like I put my callstats.html on
> my x20 without problems)

I am expecting the file to grow, so I will try to push on with separate files.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
File tools/profview/profview.js (right):

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:14: let modeBar =
document.getElementById("mode-bar");
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I always define a toplevel $ function which does this (poor-mans jquery :P)

Done.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:65: setMode : function (mode) {
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> no need to add function :) { setMode(mode) { ... }, ... } just works fine.

Whoa, I had no idea this was possible.

Done.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:97: main.currentState =
setCallTreeState(main.currentState,  callTreeState);
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> I'm probably too pragmatic, but I'd just modify the global state directly :P

That might not work, the views remember the old state and compare it to the new
one to figure out if a redraw is necessary. If you changed the global state, the
component could not detect the change.

https://codereview.chromium.org/2696903002/diff/420001/tools/profview/profvie...
tools/profview/profview.js:768: ctx.fill();
On 2017/03/03 17:48:57, Camillo Bruni wrote:
> ha! I would have drawn the full width for every type, your way is probably
> easier :)

You can actually see the stitches between buckets, so I might switch to your way
:-)

[Jarin, 2017-03-04 12:22:05]

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

[commit-bot: I haz the power, 2017-03-04 12:22:15]

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, 2017-03-04 12:46:31]

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

[commit-bot: I haz the power, 2017-03-04 12:46:33]

Dry run: This issue passed the CQ dry run.

[Jarin, 2017-03-04 13:03:06]

The CQ bit was checked by jarin@chromium.org

[Jarin, 2017-03-04 13:03:06]

The patchset sent to the CQ was uploaded after l-g-t-m from cbruni@chromium.org
Link to the patchset: https://codereview.chromium.org/2696903002/#ps460001
(title: "Fix test")

[commit-bot: I haz the power, 2017-03-04 13:03:16]

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, 2017-03-04 13:04:59]

CQ is committing da patch.

Bot data: {"patchset_id": 460001, "attempt_start_ts": 1488632586084380,
"parent_rev": "885ec933278e56503b87e3d572a283878a8d0871", "commit_rev":
"fcce4797bc678958d527f93b46d2de2bdbf31dcc"}

[commit-bot: I haz the power, 2017-03-04 13:05:09]

Description was changed from

==========
[profiler] Graphical front-end for tick processor.

Improvements:
- top-down call tree.
- interactive restriction to time interval.
==========

to

==========
[profiler] Graphical front-end for tick processor.

Improvements:
- top-down call tree.
- interactive restriction to time interval.

Review-Url: https://codereview.chromium.org/2696903002
Cr-Commit-Position: refs/heads/master@{#43599}
Committed:
https://chromium.googlesource.com/v8/v8/+/fcce4797bc678958d527f93b46d2de2bdbf...
==========

[commit-bot: I haz the power, 2017-03-04 13:05:10]

Committed patchset #24 (id:460001) as
https://chromium.googlesource.com/v8/v8/+/fcce4797bc678958d527f93b46d2de2bdbf...

[indutny, 2017-06-09 21:30:32]

What is the reason for changing `FUNC_RE` in `MacCppEntriesProvider`? The
`[tTwW]` group is still produced by nm, and now they are displayed as a part of
the symbol name. Sounds like a regression.

[indutny, 2017-06-09 22:40:33]

On 2017/06/09 21:30:32, indutny wrote:
> What is the reason for changing `FUNC_RE` in `MacCppEntriesProvider`? The
> `[tTwW]` group is still produced by nm, and now they are displayed as a part
of
> the symbol name. Sounds like a regression.

Opened https://codereview.chromium.org/2928083004, FWIW.