1581245 - Replay should show a Frame Timeline

Status: RESOLVED FIXED

(Core Graveyard :: Web Replay, enhancement, P3)

Description

[Jason Laster [:jlast]]

The current progressbar is focused on showing execution over time with useful events like console logs.

It would be great to experiment with a new paused timeline that is focused on helping users navigate their current paused call stack. One benefit of this timeline is that we would have all of the program's execution points within the frame, which would make scrubbing be the highest fidelity.

Here is a figma to help visualize the idea.

Comment 1

[Jason Laster [:jlast]]

Attachment: timeline.png

Comment 2

[jaril]

Attachment: Bug 1581245 - Added server support for frame timelines r=jlast

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3cee26e5aa8b
Added server support for frame timelines

Comment 4

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/3cee26e5aa8b

Comment 5

[Jason Laster [:jlast]]

this was just the server patch.

Comment 6

[Jason Laster [:jlast]]

CC Brian

hmm, it would be neat though if we could be even more aggressive, such that dragging the slider was treated as a seek, so that we update the frame position, scope variables, graphics, etc.
it would be nice to see the value of a variable changing as you dragged the slider around, for example
I don't think performance is quite there yet though in allowing this to work smoothly
even if we had pause data for all the steps, it still takes some amount of time (100ms+ maybe) to update the UI
pushing the pause data for the different frame steps up into the client would allow for nearly instant updating, but that is a more invasive change...
this looks really good though, thanks @Jaril!
a couple more thoughts:
would it make sense to have a similar UX for the frame timeline that we do for the main timeline?
where clicking on a point brings the user there
hovering over a point on the frame timeline could highlight the point's location, and clicking would seek to the point
another related idea that might help with seeing the step path is to highlight the lines that are executed in the current frame somehow

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/14f24bdc00d0
Add a frame timeline to web replay

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/14f24bdc00d0