Vscode: Multiple integrated terminal UX

[Tyriar]

Multiple terminals is done and a basic prototype for representing them in the UI is in progress in https://github.com/Microsoft/vscode/pull/7705. I need UX to go over how we want the terminal UX, here is my proposal:

A tabbed interface with a button that moves the tabs between the bottom portion of the panel and the right. The title of the tab is the name of the process being run:

Something to be explored with this design:

• Whether the tabs should be hidden when there is only a single tab open. You would lose the title of the process, but gain 1-2 rows of I/O.
• Should the move tabs button be hidden in an overflow menu.

[bpasero]

This is something for our next UX meeting to discuss. @Tyriar we typically meet Wednesday at 5 PM Zurich time.

[bgashler1]

I propose we do something like this to be consistent with the rest of the editor groups. I've gotten feedback from a couple of PMs and have tried to make this future proof and simple.

The overflow menu would be similar to what we have in editors

Advantages

• We take less vertical space than putting tabs below
• We follow the patterns set elsewhere
• Simpler actions on the top menu bar

What do you all think?

[Tyriar]

@bgashler1 it's difficult to differentiate between it and the editor because there's no "Terminal" title though.

[bpasero]

My 2 cents: editor is the only area that has tabs and that's it. We start simple by having a dropdown to switch between multiple consoles in the same way we did in Azure. I (somewhat) understand that people cannot work in text files without tabs, but now we are moving towards full, heavy IDE look and feel. Do we really want that? How do we argue then that the multiple output channels are not showing as tabs either?

[Tyriar]

@bpasero why would we argue against it if it makes sense to do so though?

Most terminals allow you to either open a terminal in another window (so they can be side by side), or open in a tab. One question I posed in my original issue was do the tabs even need to show at all if there is only a single terminal instance. That way the panel only adds the additional complexity to the UI if 2+ terminal instances are being used. Best of both worlds?

[Tyriar]

A drop down similar to the output panel is another option though, I'd prefer the process names and number of terminals more visible personally since they're dynamic.

[bpasero]

@Tyriar maybe we want to keep a lightweight style to the UI by reducing heavy UX components. What I am arguing is that, while we do not have room for UX exploration in the editor space in terms of tabs, lets sit down for the terminal and actually design something. Why do we rush this in if the alternative with a dropdown is a good start as well?

[bpasero]

Also, whatever solution we come up with should work for the output case as well or any other thing that shows in the panel with multiple panes.

[thewhitetulip]

@bpasero

but now we are moving towards full, heavy IDE look and feel

Having multiple tabs is a major plus and just because we have tabs doesn't give the heavy look and feel.

However, I do agree that there is space for designing something in the terminal space.

[stevencl]

We need to think about this holistically. For example, we need to think about navigation between file tabs and (potentially) terminal tabs (e.g., what does ctrl-tab do when focus is in the terminal, how do I navigate to a terminal tab when focus is in the editor)

There is the question of tabs or no tabs, what the tabs look like, can we show progress, status badges etc on the tabs.

I can definitely see the value of tabs especially if we can use some kind of indicator to show when a process is complete, when new output is available etc. That provides for a glanceable UI and UX which allows the user to focus on what is important.

Whenever we are introducing new UI we always have to make sure that whatever we do helps us maintain the lightweight nature of the product. Any piece of new UI that we introduce into the product always has the potential to make VS Code more heavy in look and feel. So we just need to take our time and consider multiple options.

Let's make sure we discuss this at our next UX meeting.

[orrybaram]

It would be great if we could split terminal windows like the editor windows

[Tyriar]

@orrybaram I created an issue for that and eventually closed it since tools like tmux and screens exist.

[orrybaram]

@Tyriar rad, i didn't know about those!

[bgashler1]

Per our UX discussion we will continue with a panel approach for now with a dropdown.

Plus open new terminal
Trash remove current terminal
Down chevron hide the panel

See https://github.com/Microsoft/vscode/issues/8018#issuecomment-228241614 for why we chose to use a down chevron instead of an "x" for this panel.