[DevTools] Better label for async function call stacks

[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and async function as top frame for following stack. We can merge label with this frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018, 621515
Committed: https://crrev.com/7534dfcb230327db0a378dd57413d8886ac924d3
Cr-Commit-Position: refs/heads/master@{#426960}

[kozy, 2016-09-29 16:24:52]

Please take a look.
Screenshots:
before:
https://drive.google.com/file/d/0B7RLEApsOKBLNmJNUUJVeGFGZzA/view?usp=sharing
after:
https://drive.google.com/file/d/0B7RLEApsOKBLUnJyMko1Q2dtd1U/view?usp=sharing

[dgozman, 2016-09-29 16:57:37]

Why there is an async hop from (anonymous) to testFunction on the second
screenshot?

Also, "async function foo (async)" calling foo is strange. Should we instead say
the following or similar?

foo
boo awaits foo
boo

[kozy, 2016-09-29 18:03:07]

I changed label into foo awaits boo.
It works good as long as user doesn't call async function synchronously without
await. We don't have enough information on frontend side to differentiate this
calls and will show the same "function awaits function" for synchronous calls
too - it looks bad.
To fix this we need to introduce new field on callFrame in mirrors API for
FrameMirror and pass this field through protocol. I'll take a look.

[Dan Ehrenberg, 2016-10-19 14:04:18]

lgtm

I like this change. Any chance we can get it into 55, so users will see it when
async functions are first added?

[kozy, 2016-10-20 01:15:07]

Removed async suffix:
https://drive.google.com/file/d/0B7RLEApsOKBLRUxmaHh1VDJDdXc/view?usp=sharing

Dmitry, please take a look!

[dgozman, 2016-10-20 01:19:01]

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Layo...
File
third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-async-function-expected.txt
(right):

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Layo...
third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-async-function-expected.txt:9:
testFunction awaits boo
awaits boo 2 times?

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:93:
title = WebInspector.UIString("%s awaits %s", topFrameName, redundantFrameName);
No UIString.

[kozy, 2016-10-20 01:39:33]

all done.

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Layo...
File
third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-async-function-expected.txt
(right):

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Layo...
third_party/WebKit/LayoutTests/inspector/sources/debugger-ui/async-call-stack-async-function-expected.txt:9:
testFunction awaits boo
On 2016/10/20 01:19:01, dgozman wrote:
> awaits boo 2 times?

Done.

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/40001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:93:
title = WebInspector.UIString("%s awaits %s", topFrameName, redundantFrameName);
On 2016/10/20 01:19:01, dgozman wrote:
> No UIString.

Done.

[kozy, 2016-10-20 20:54:48]

Please take another look.
Screenshot: https://drive.google.com/corp/drive/u/1/my-drive

There is one left problem in case when user call async function synchronously
and async function contains await instructions, like:
function foo()
{
await boo1();
await boo2();
}
foo();
If we pause in boo2 function then we will get redundant and confusing async
label. I'll address it in separate CL.

[kozy, 2016-10-20 21:19:07]

Description was changed from

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
==========

to

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018
==========

[kozy, 2016-10-20 21:20:01]

Screenshot is uploaded to issue: crbug.com/654018

Please take a look!

[dgozman, 2016-10-20 21:37:08]

https://codereview.chromium.org/2384533002/diff/80001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/80001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:88:
var redundantFrame = asyncStackTrace.callFrames.shift();
Let's move model mutation to DebuggerModel.

[kozy, 2016-10-20 22:21:08]

all done, please take a look.

https://codereview.chromium.org/2384533002/diff/80001/third_party/WebKit/Sour...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/80001/third_party/WebKit/Sour...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:88:
var redundantFrame = asyncStackTrace.callFrames.shift();
On 2016/10/20 21:37:07, dgozman wrote:
> Let's move model mutation to DebuggerModel.

Done.

[dgozman, 2016-10-21 19:03:35]

lgtm

https://codereview.chromium.org/2384533002/diff/100001/third_party/WebKit/Sou...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/100001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:88:
var redundantFrame = peviousStackTrace[peviousStackTrace.length - 1];
It's not redundant anymore.

[kozy, 2016-10-21 19:30:59]

all done!
thanks!

https://codereview.chromium.org/2384533002/diff/100001/third_party/WebKit/Sou...
File
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js
(right):

https://codereview.chromium.org/2384533002/diff/100001/third_party/WebKit/Sou...
third_party/WebKit/Source/devtools/front_end/sources/CallStackSidebarPane.js:88:
var redundantFrame = peviousStackTrace[peviousStackTrace.length - 1];
On 2016/10/21 19:03:35, dgozman wrote:
> It's not redundant anymore.

Done.

[kozy, 2016-10-21 19:31:03]

The CQ bit was checked by kozyatinskiy@chromium.org

[kozy, 2016-10-21 19:31:03]

The patchset sent to the CQ was uploaded after l-g-t-m from
littledan@chromium.org, dgozman@chromium.org
Link to the patchset: https://codereview.chromium.org/2384533002/#ps120001
(title: "addressed comments")

[commit-bot: I haz the power, 2016-10-21 19:31:53]

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-10-21 21:34:56]

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

[commit-bot: I haz the power, 2016-10-21 21:34:57]

Try jobs failed on following builders:
  linux_chromium_rel_ng on master.tryserver.chromium.linux (JOB_FAILED,
http://build.chromium.org/p/tryserver.chromium.linux/builders/linux_chromium_...)

[kozy, 2016-10-22 00:20:05]

The CQ bit was checked by kozyatinskiy@chromium.org

[kozy, 2016-10-22 00:20:06]

The patchset sent to the CQ was uploaded after l-g-t-m from
dgozman@chromium.org, littledan@chromium.org
Link to the patchset: https://codereview.chromium.org/2384533002/#ps140001
(title: "rebased tests and removed virtual test suite")

[kozy, 2016-10-22 00:20:36]

Description was changed from

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018
==========

to

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018,621515
==========

[commit-bot: I haz the power, 2016-10-22 00:20:50]

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-10-22 03:05:26]

Description was changed from

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018,621515
==========

to

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018,621515
==========

[commit-bot: I haz the power, 2016-10-22 03:05:27]

Committed patchset #8 (id:140001)

[commit-bot: I haz the power, 2016-10-22 03:07:41]

Description was changed from

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018,621515
==========

to

==========
[DevTools] Better label for async function call stacks

Async call stack with async function always contains (async function) label and
async function as top frame for following stack. We can merge label with this
frame for better user experience.

R=dgozman@chromium.org,littledan@chromium.org
BUG=654018,621515

Committed: https://crrev.com/7534dfcb230327db0a378dd57413d8886ac924d3
Cr-Commit-Position: refs/heads/master@{#426960}
==========

[commit-bot: I haz the power, 2016-10-22 03:07:42]

Patchset 8 (id:??) landed as
https://crrev.com/7534dfcb230327db0a378dd57413d8886ac924d3
Cr-Commit-Position: refs/heads/master@{#426960}