Async Stack (Frames)

[digitarald]

We need some UI alignment/polish for async stacks in Debugger and Console stacks.

Related prior discussions was in framework stacks.

cc @jasonLaster

Prior Art

Test page: https://firefox-devtools-async-console-trace.glitch.me/

Firefox Console

Scala IDE

JetBrains

Chrome

Debugger

Console

Chrome Old

[digitarald]

@jasonLaster's initial draft is pretty solid (landing in bug 1592432):

[fvsch]

I'm afraid the horizontal lines are conflicting with the separators we already use between accordion panes. If you look at the sidebar in the last screenshot, that's a shitload of horizontal separators, and it's hard to grasp the overall structure.

Do the lines have some meaning, something about a time gap maybe?

For context: I don't know what an "async stack" is. I do use async/await in JS, and I get normal stack traces, but "async stack" is new to me and I don't understand Chrome's design or any of the prior art designs (they're all gibberish to me). Is this something that design can help elucidate?

[jasonLaster]

The new design is a bit more compact. the reason for this is that every frame after an await will be awaiting as well. Because of that, the async boundaries with the horizontal bar is a bit much.

[fvsch]

Looks much better to me. :)

Would be interesting to see why Chrome and others went with a more in-your-face design.

[digitarald]

Do the lines have some meaning, something about a time gap maybe?

This was alspo my main gripe for Chrome's design – full-width non-interactive separators seem a bit odd. One reason might be that call stacks are kinda "grouped" by sync/async frames.

Would be interesting to see why Chrome and others went with a more in-your-face design.

This will be just the basic first async stacks for Firefox's Debugger and we will need to think about how we'll show captured stacks as the screenshots above have for Console.

Callback stacks can get take a bit more space (more than just "await"), as you can see in the Chrome and Firefox screenshots above. A responsive design that makes those more seamless where in wider Console space both elements are together (similar to await asyncFib above, and in narrow mode they split into 2 lines, while still being interactive element.

[digitarald]

New design is available in Nightly, devtools.debugger.features.async-live-stacks.