Timeline (and advanced timeline)

[bvaughn]

(Hope it's okay for me to create an issue here as a placeholder for us to chat about something next week!)

I've been looking into https://github.com/RecordReplay/devtools/issues/6511 and https://github.com/RecordReplay/devtools/issues/5606 this morning, and I spoke with @jcmorrow a little bit to fill in gaps in my knowledge for when certain conditions might occur– and I came away with a pretty strong intuition that the timeline UI (as it exists today for public users) is maybe missing some pretty crucial information about "loaded regions" that might lead to some bad user experience scenarios (particularly as we move toward longer recordings).

Some timeline specific concerns I have:

• We already do a good job of differentiating between focused and unfocused regions (solid vs dashed line). I think we need to also clearly distinguish between loading and loaded regions. (If I'm viewing a recording and the backend unloads some regions– this has a big impact on what I'm able to do– and I don't think it's currently very obvious to the user (a) what happened and (b) wha to do to "fix" it.
• Our focus tool (the thing we use to zoom in or out) currently does some things that are surprising. (e.g. clicking outside of the focused region moves the region and there's no undo, e.g. I can't drag a region– i have to instead move the start and end ranges separately). This tool feels like something people are going to use a lot especially with longer sessions, so it seems important for us to make it as perfect as possible.

Another topic that shook out of those tickets and the subsequent convo between @jcmorrow and I was:

1. The concepts of "focused" and "loaded" are different. Focus is about user intent. Loaded is a technical constraint (e.g. we're loading this but it's not done yet, or we had to unload this because the recording is too large). They're also very closely related in the devtools in terms of the capabilities/data we have to display. I think it would be easy to mix the two together in ways that might be confusing to a user, and we should be intentional about when we lump them together and when we don't.
2. We should be consistent in how things that are outside of the "loaded region" get visualized, and how you interact with them (or don't) so that it's not confusing or surprising to users when they can't e.g. click on a network request in the Network tab.

Maybe we can brainstorm about this? 😁

cc @jonbell-lot23 @jaril

[jonbell-lot23]

1. This is the perfect way to flag something for design, thanks!
2. This is an ongoing discussion and we always knew there might be a day where we need to move past smoke and mirrors and build out a literal loaded bar. We might be there :)
3. Please read this: https://medium.com/replay-io/how-we-designed-our-focus-mode-595711802998 ... it explains how we got here
4. If you and Jaril have time, feel free to meet before next week! Jaril can represent my historical point of view and I'm absolutely open to moving beyond it
5. And then yup, let's talk next too!

[jonbell-lot23]

Adding a note to say this design is moving forward and has been shared out with the team

[jonbell-lot23]

Closing this out because we're tracking it here: https://github.com/RecordReplay/design/issues/40

It's possible the new ticket is missing details or isn't actually a full dupe, so feel free to re-open!