Improve timeout navigation in saga view

[adamralph]

(Extracted from #651.)

Current

Issues

• When the timeout link is clicked, the timeout command processing scrolls into view. When the timeout command is already in view, clicking the link has no visible effect and gives the impression that something is broken in the UI. This is bad UX.
• When the timeout command scrolls into view, there is no visual focus given to the command which is being processed.
• The link is removed from the command which is sent, therefore when clicking it, there is no visual connection between the command that is being processed, and the command that was sent.

Proposal 1

(@adamralph)

• The link s moved to the message itself, so that the visual connection from message sent to message received is more obvious.
• Focus is given to the message received.

Other notes

• We could also add a mouseover to the message sent and message received, which highlights both boxes in some way, to show that they are the same message.
• When clicking the message sent, would it be a good idea to effectively select that message in the message view above? Then the giving of focus to the message received would be handled by the regular view changes that that action invokes.

[sergioc]

When the timeout command is already in view, clicking the link has no visible effect and gives the impression that something is broken in the UI. This is bad UX.

The original goal is to link back to Timeout Requested. Still bad UX or bug?

When the timeout command scrolls into view, there is no visual focus given to the command which is being processed.

Isn't the message selected automatically? If yes, then it means a stronger selection display may be required.

The link is removed from the command which is sent, therefore when clicking it, there is no visual connection between the command that is being processed, and the command that was sent.

Can you clarify this?

I think it'd be easier to assess the issue by in a call and going through it together. Call scheduled.

[sergioc]

Discussed with @adamralph . The timeout links are actually visible but don't seem to do anything because all timeout events fit on screen. We discussed it should be more obvious which messages are associated with invocation and request events, even if it fits on screen. So the following needs to be addressed:

1. not obvious what links do
2. highlight other timeout event without selected message
3. highlight other timeout event, even if message is already selected (not discussed with @adamralph)

The following proposal should address at least issues 1. and 2. above:

1. is addressed by replacing links with "fast forward" and "rewind" buttons
2. is addressed with more prominent selection of messages (separate issue in #671)

As for 3., it could be addressed by alternating the selected message background color with another color (e.g. darker blue).

[adamralph]

I suggest we implement #670 and #671 and then revisit this.