Combine log point and break point UI controls

[bvaughn]

Earlier today I recorded a Loom describing something that frequently confuses me when using Replay– break points. This lead to a video call with @jaril and @jasonLaster discussing the feature.

Afterward I wrote a rough proposal for how we could combine the log point and break point functionality into a unified control that would (a) be less confusing and (b) give more/better user controls. Here are the Figma mocks and here is a verbal summary of what I'm proposing on Loom.

Here is a visual summary:

My sense is that everyone I've spoken to about this idea (also including @markerikson, @jonbell-lot23, and @ryanjduffy) are generally supportive. This issue is a placeholder then for any additional discussion and for us to prioritize when to work on this.

[jonbell-lot23]

Jason Loom: https://www.loom.com/share/adf4513ff58a4eb3a9aaf8dfc0f62f47

Jason notes for Jon:

• tooltips (perhaps unfurl, or a nicer react styled tooltip)
• representing state in the summary

Discord discussion: https://discord.com/channels/779097926135054346/978716085018837092

[bvaughn]

Some thoughts on Jason's Loom:

1. I agree that the eye doesn't work well for log point toggle. (It was just a placeholder in the initial pitch.)
2. I really like bringing the break behavior badge to right beside of the timeline!

I propose that if we have such a simple break toggle, we don't really even need separate disable break button. You could just toggle break functionality back off.

Then at that point, we only need a toggle for console logging, which we could probably just move up a bit, to the right of the log message. Maybe something like this? (although I'm still using the eye, just ignore that for now)

[gideonred]

This ticket has been moved to DES-37