Marker table should be optionally sortable by duration (to easily discover the longest restyles, reflows, etc.)

[dholbert]

Right now, the marker table is sorted by "Start time". But I would really like to be able to sort it by duration, so that I can easily see e.g. the N longest-duration restyles/reflows/etc (whatever I've filtered for). Intuitively it feels like I should be able to click on the "Duration" header and have it automatically perform a stable-sort via that field; but right now the header doesn't have any effect when clicked.

Here's a sample profile where I was wanting to do this: https://share.firefox.dev/3nUbCqc (in service of https://bugzilla.mozilla.org/show_bug.cgi?id=1699500 )

Ideally I'd like to be able to look at that^ profile, filter for "style", click something, and immediately be able to say "OK, looks like the longest style is X ms, and the next-longest few were Y ms and Z ms". This helps figure out what (if anything) needs further investigation. (I ended up answering this question myself using some handwritten JS an filteredMarkers in the Web Console, but that's not a great user experience.)

┆Issue is synchronized with this Jira Task

[mstange]

The accessibility team has requested this feature, too. It would make it much easier to find expensive markers. (It's not a perfect solution though because some markers are for non-expensive things or ambient state, where taking a long time is normal and not a reason for concern. E.g. refresh driver observers, running CSS animations, network requests.)

[julienw]

Interesting suggestions for the accessibility of this feature: https://adrianroselli.com/2021/04/sortable-table-columns.html