Timeline View

[gregtatum]

Start work on porting over the code for the "JS Flame Chart", but rename it as Timeline, as it's not a true flame chart.

[gregtatum]

Per mstange in the duplicate issue:

This should support selecting functions and profile filtering similar to what the call tree supports

[fitzgen]

We need to also fix https://bugzilla.mozilla.org/show_bug.cgi?id=1148186 in this incarnation... Pretty pretty pretty pretty please!

[gregtatum]

Yeah, I am planning on adding a sidebar with the frame information, that then you can cross reference with other panels.

[digitarald]

@clarkbw just shared something related: React uses performance.mark and .measure to add bars to Chrome's flamegraph; which adds a lot more context to a stack of functions. Would be an easy win, given that markers are usually contained within one function.

[clarkbw]

just shared something related

Filed #123 for that

[gregtatum]

When I have stacks of C++ and JS, then my flame chart algorithm works fine:

However when I filter for JS only, things get... weird.

I'm trying to decide how to handle this. The devtools perf tool adds a pseudo-frame labeled Gecko here. I guess that's probably the way to go. Although it would be nice since we're categorizing C++ samples for the summary view, to take that information and display the category of C++ code.

Does anyone have any opinions?

[clarkbw]

I'd say if you added "Gecko" as a first pass you could come back to try annotating it with a bit more information later. But collapsing things into that one line is a really good start and will likely work for most web devs.

[gregtatum]

Also I'm not sure how I should think about collapsing this type of information. All of the C++ stacks appear to be the JavaScript engine itself.