Align scroll behavior for side panel views with VS Code

[tortmayr]

As a user, I want to conveniently work with the left toolbar also if it contains many views that go beyond what can be shown in the available space.
Currently Theia shows a scroll bar, if the number of views in the left toolbar go beyond what can be shown in the available space, whereas the scrollbar only becomes visible when users hover over the toolbar. This is not very intuitive.

A behavior similar to VS Code would be more user friendly. Instead of displaying a scroll bar a new icon showing three dots should appear as the last item in the toolbar if there are more views than can currently fit in.

On clicking the three dots, a menu showing all views that aren’t visible shall be displayed.

The toolbar with the three dots at the end should always show the following:

• Views that fit on the screen
• The currently active view
• The three dots

If the currently active view would not fit at the moment, it becomes the last item after the views that still fit and before the three dots. If the currently active view fits on the list of visible views, it remains at the original position and is shown as active.

In our opinion this is major UX improvement compared to the way it is currently handled and should be implemented as the default behavior. However, if the community disagrees we can also aim at making this an opt-in feature that is configurable via preferences.

[msujew]

@tortmayr This feature would also be great for the menu bar, since we don't even have a scrollbar there. Menus just move into the invisible area of the document.