Add a User Timing from window.performance.mark and window.performance.measure

[mstange]

window.performance.mark and window.performance.measure allow JavaScript to mark sections of its code that are performance relevant. These measurements can be shown as a time line, e.g. the way Chrome does it, or as a call tree.

React uses this when opened with ?react_perf, see this tweet and this commit.

[bgirard]

Here's a relevant blog post:
https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html

I discussed with mstange how we should consider adding this, or something similar, to the JS frame names in the sampling similar to PROFILER_LABELs.

[gregtatum]

Do we have this information already in the profile, or do we need to update the Gecko Profiler first?

[gregtatum]

I'm going to amend the title to make it a bit more specific, I'm not sure a tab is the way to go on this, as we may be able to use our existing tabs.

[mstange]

I think we still need to add PROFILER_MARKER calls in the right places in Gecko. At the moment, performance.mark calls are directly translated into profiler markers, but I believe we don't create markers for performance.measure calls.

[dmose]

@mstange are you sure? I have yet to be able to make any calls to performance.mark in content space show up in the marker pane in perf-html.io. Granted I'm making my calls from the web console, so perhaps that's the problem...

[gregtatum]

I'm closing this, they have been instrumented with Bug 1357849. There is the open work-in-progress PR #275 for implementing a markers view, which will display the user timings in a better visualization than just a table.