Arvados

The problem¶

The original implementation used a simple panel-toggling behavior when the user clicked every button.
This mechanism worked fine, except when all the panels didn't fit on the viewport and scrolling was needed:

• Panels 1 to 5 were open, and panel 6 closed.
• The user clicked on button 6, so panel six started to show but off-viewport, leaving a confused user about what happened.

The follow-up changes (and current behavior) made the buttons open and scroll to the selected panel when the user hovers over it with the mouse cursor. Button clicks are a no-op, so users attempting to use the old way of things would get an equivalent result.
The problem is that this is not what users expect of a "taskbar" widget, making the viewport move a lot without the user's intention. We attempted to mitigate this problem by adding a delay on the hovering handler so that the scroll happens only when the user left the mouse pointer for 150ms or more, but this wasn't enough, and adding more time means making the UI seem laggy.

The proposed solution¶

To bring the multi-panel-view widget to the expected behavior, I think the changes required aren't so difficult:

• Panels 1 to 5 are open, and panel six is closed (and would be off-viewport if visible)
• The user clicks on Button 6, panel six is opened, and the viewport scrolls to it.

To complete the expected behavior, we should see if every panel can publish its "visible" state so we can add the following:

• Every button lights up when its corresponding panel is visible (or, to avoid multiple buttons lighted up simultaneously, only do it for the first visible panel). It would be the equivalent of highlighting the "windows in focus" in a desktop environment.

We can also add some visual aids:

• Add a panel animation only when closing it with the [X] button (and not when panels close because of some other being maximized).
• Add a similar animation when opening a closed panel. It would be necessary to scroll to where the panel will appear and only then show the opening animation, all of that in an amount of time that's not bothersome (i.e., <200ms?)