gui: Output | Problems | Debug | Terminal

[gertcuykens]

• VSCode Version: 1.3.1
• OSX Version: 10.11.6

Currently there are 5 consoles

Where command pallet gets a special place on top.

My personnel opinion it is that it can be organised into tabs. Currently if you want to switch between all 5 you will go insane without using hotkeys and because I have the memory capabilities comparable of a chicken I suggest to group them together in a tab like manner. Take for example edge, firefox, chrome, safari that organize all their consoles into tabs

If this get approved consider also to include the command pallet in there so you have a consistent look and feel. Basically the following tabs that looks like this.

Output | Problems | Debug | Terminal | Command Pallet

I think it will be more intuitive especially for beginners

EDIT: tab notification suggestions

• Output: buffer changed
• Debug: breakpoint hit
• Terminal: command finished / buffer changed
• Problems: new errors

[leaxoy]

+1

[kieferrm]

For me personally the Command Pallet is a different, but I also think there should be an easier way to switch between the different output consoles. A tabbed UI would also make the consoles better discoverable.

[rmunn]

I'm also opposed to merging the Command Palette into other output windows; it should stay where it is, on top. But for the other four, a tab-switching interface would indeed be nice.

[stevencl]

We had considered something like this when we started work on the horizontal panel (see #1129).

As well as showing tabs to switch between the panels, we considered ways that we could show panels side by side. It seemed to us at the time that would be a natural expectation of a tabbed UI. But it sounds like from this thread that the request is simply to provide an easier way to switch between panels. Is that the case?

If we were to do this, how likely do you think you would want to view two or more panels side by side?

At the time we decided not to do the tabbed UI because:

1. We were worried about the extra overhead required of managing panels in a tabbed UI and the negative impact this could have on the lightweight, non-IDE feel of VS Code
2. We weren't sure at the time if there were valid scenarios for wanting to view panels side by side.

But like I said, we didn't consider an option where we didn't support viewing panels side by side.

[gertcuykens]

Personally side by side (split consoles) I don't think is useful. We only need better gui visualisation and one hotkey to toggle between them.

What about introducing 4 extra small icons on the bottom each opening there own console and get highlighted when their representing console is active or start blinking when the content of their console changes, right now you only can open the problem console by clicking on it. (see screenshot)

I think 4 extra animated icons at the bottom left next to the problem icons introduces the most easy and lightweight solution until maybe somebody has a better idea?

[stevencl]

We thought about that too when we originally designed the horizontal panel but we want to keep the status bar as a place for ambient information, such as the number of errors and warnings in your project. We don't want it to become a place for commands that simply open panels and other UI as that dilutes the usefulness of the status bar.

[gertcuykens]

Technically the new symbols also represent the status of every console like for example the exit status of the terminal last command or the running / pausing state of the debug console or unread output messages.

If we leave the Pallet for what it is, then we are talking about just 3 extra status icons. I also agree opening single files where debug and output has no use, just one extra terminal status icon is sufficient.

[stevencl]

@bgashler1 will work on some designs for this. Will discuss the following week.

[Tyriar]

Comment so I get participating notifications 😃

[jrieken]

I'd like to use this as a chance to draw attention to #1875 (comment). Basically I'd like to see two things

• give the bottom panel full width such that it has real advantage over the editor area
• when the bottom panel shows (and only then !) show switcher buttons in the activity bar that allow to toggle between the panes

[bgashler1]

UX Sync Summary, August 3:
Below is the design we were most interested in pursuing. It uses a different tab style to avoid users confusing it with editor tabs, which are not interchangeable.

We need to iterate on two more things: 1) How will we show notifications? 2) What is the maximum bounded width of the local command/inputs on the right for each panel so that it won't obscure the tabs or appear strange (biggest offender "Problems" input box)?

[bgashler1]

Just for the sake of recording history, we also considered this left-to-right design, but we decided against it for now because icons could get overloaded. Also, it's noteworthy that F12 tools moved away from this pattern.

[gertcuykens]

1) +1 for blinking fade in and out effect on the tab name for notifications
2) Rename debug console to debug the former is too long for a tab name. In case of very small window switch to current design layout without tabs.

[Tyriar]

@bgashler1 some questions:

• How much more space does the header take up at 100% zoom level (how much margin is there below the blue line)
• Are the panel labels visible permanently even when the panel is minimized?
• What are these notifications?

[gertcuykens]

My list of notification sugestions

• Output: buffer changed
• Debug: breakpoint hit
• Terminal: command finished / buffer changed
• Problems: new errors

[Tyriar]

@gertcuykens that would get a little annoying though wouldn't it? It's rare for me to care about other panels other than the active one.

[gertcuykens]

Ok, I agree, drop the notifications for now, we can always at does later if we find more useful once :)

[rmunn]

If notifications are added, I'm STRONGLY 👎 on blinking. But a simple round blue dot, or else a blue badge-with-number-inside (like the "1" visible on the Git icon in the sample UI screenshot) would be fine. That won't be trying to grab my attention away from my code, but I'll know that there's something new available to see in that tab when I get around to it.

If notifications on the output tabs look like the notifications on the Git icon or the Extensions icon, then I'd be 👍 for output notifications. It would be useful, I just don't want it blinking, moving, or animating in any way.

[stevencl]

The idea is that notifications would be exactly like those on the explorer, git and extensions icon. They would not blink, move or animate :-).

Obviously notifications aren't a must have for this (since we have the panel today without notifications) but we wanted to make sure that any design decision we took now would work well for any future changes such as adding notification badges. In addition, we think this design would work better if we were to add many more panels. We have no idea if we will add more panels, we just wanted to ensure it would work well if we did.

The panel labels would not be permanently visible so when the panel is closed, the labels would not appear anywhere. The labels would only be shown when the panel is shown.

@jrieken - thanks for the reminder about your earlier suggestion about a full width horizontal panel. We can revisit this design too. As I mentioned, when we ran studies on this design previously it wasn't the preferred option. But as you predicted, we now have panels that don't have a strong relationship to the main content in the editor (the integrated terminal for example) which might motivate another look at this design.

[dragonwolf83]

Notifications would be very useful on the tabs, more so than on a status bar. One of the things that breaks my flow in Visual Studio IDE is lack of notifications when I have a different tab in focus. I usually resolve it by splitting the tabs so Errors and Output are side-by-side but I hate losing the real estate for it. Notifications would make it easier to remember to switch to the other Panels for useful information.

The notifications listed by gertcuykens would be great

[SailorMax]

Can you also think about minimize mode for this panel? When user will see only panel title bar (with new tabs) at bottom of main window? It can be useful when user want to hide it temporary.
You can leave old "v" button for this function or make on double-click on panel title bar.

[Scoodood]

Since I am using wide screen monitor so I personally like the OUTPUT panel to be positioned horizontally side-by-side. But I know some of you like the way it is now (veritcally).

In Sublime Text 3, the tab layout can be repositioned so I use this plugin to render the build output into the tab view, and now I can drag the tab to any position/orientation to suit my need. Please see the sample output here. I believe VScode can accomplish something similar.

[iam3yal]

I really think that the best approach to go here is let the user choose! and honestly instead of solving multiple small problems that eventually make things more complex to manage maybe it's better to come up with a solution such as a layout manager that will allow people to drag windows around and dock them however they want and finally maybe even save it as a profile.

Some people like things in different places, some people like to group things and if you have multiple screen like some of us then sometimes you may want to put a window on your second screen.

Take a look at Visual Studio, it works well there so maybe not as flexible as it is there but something in between. :)

[pflannery]

Is there a reason why we cant just have a CONSOLE panel for both OUTPUT and DEBUG?
It drives me nuts when precompile tasks switch focus to the OUTPUT panel and then I have to manually go back to the DEBUG panel to view the output when debugging.

Like @bgashler1 design, though be nice to replace the all the drop downs with a side explorer list of choices to switch between.

[bpasero]