💬 Identify Design Path For Bottom Drawer Tabs and Panels

[austincondiff]

I'd like to discuss the bottom drawer and how we want to handle tabs and navigation therein.

In my concept we have a tab set identical to editor tabs like so

In VS Code, the have a different style of tab that represent different things (terminal, problems, output, debug console, etc. - some of those live elsewhere in CodeEdit), and terminal tabs are handled inside the terminal tab content like so...

In Nova, terminal can be tabs and live among editor tabs in the main content (no real concept of a bottom drawer)

In Webstorm this is how they handle this

And of course in Xcode, they don't have a concept of tabs in the bottom drawer but have two set left and right panels that each have a select at the bottom that act as pseudo tabs

https://user-images.githubusercontent.com/806104/162756506-122f7eb8-e656-4cef-9385-5104739ee8d6.mov

For what it's worth, in my current workflow in VS Code, I can have three panes of terminals at the bottom

So the big question is, how will we best handle this? What besides an integrated terminal will go down there?

I am a fan of how VS Code's terminal implementation but I am not sure I want to straight up copy it, and as I remember that the overall usability wasn't incredibly apparent regarding how it handled tabs and panes to begin with.

For those not familiar, here is a quick demo of how they work.

https://user-images.githubusercontent.com/806104/162756752-18bd4128-0b74-489b-b0ad-30edc58bbb57.mov

And the above tabs...

https://user-images.githubusercontent.com/806104/162756847-769abd10-9d1e-4a2f-ac5a-e120aa557e0f.mov

But I think we should stay close to Xcode's design. In VSCode I have so many tabs because I am running tasks which we will support in our task runner feature. We may however display output for each of those tasks being run.

Any thoughts around this?

Related Issues

• 379

[austincondiff]

My initial impression is to do something like this https://user-images.githubusercontent.com/806104/162756506-122f7eb8-e656-4cef-9385-5104739ee8d6.mov

The menu in each panel could contain a list of "tabs" associated with that panel, a divider, an add new terminal item, and an add new task output for every task being run.

[0xWDG]

i like the top most image (0). second PHPStorm's.

Is it a good idea to add emoji's for the voting process?

Picture option	Emoji
1	👍
2	👎
3	😄
4	🎉
5	😕
6	❤️
7	🚀
8	👀

[StefKors]

The menu in each panel could contain a list of "tabs" associated with that panel,

Using dropdown list for switching the terminals is not great. I would rather have real tabs. The look of the tabs in the Nova debugger is very clean for example.

For a tabside bar here is screenshot of iTerm:

instead of solving the problem of the side bar having Teminal, Debugger, Output ect... tabs then inside those multiple terminal tabs. We could also mix them. If you have Teminal, Debugger, Output and create 2 new terminal tabs it could result in: Teminal, Debugger, Output, Teminal, Teminal

[austincondiff]

@StefKors What do you mean by "mix them"? Would you mind expounding?

[austincondiff]

Which do you prefer? Vote via emoji.

🎉 Option 1: Xcode's design pattern (followed loosely)

🚀 Option 2: Design pattern proposed by @StefKors

[austincondiff]

Now that I think about it, option 2 might be more scalable because we can allow extension developers to add more tabs in this debug area. You can also drag and drop terminal tabs in the tab sidebar to reorder the split panels or put a terminal in a different group. But maybe this is possible in the first option somehow.

[jasonplatts]

How would a terminal "tab" or "group" be closed? Maybe a right-click context menu?

[austincondiff]

I thought about this, it could be like the eject icon on a drive in Finder, or it could be a context menu item, or the Delete key.

[StefKors]

I would also go with option 2, simple and flexible. It would be nice to have a spot for the "split terminal" button, this one:

[Angelk90]

@StefKors : But not only vertically, sometimes it would be useful to have two horizontally.

[Angelk90]

What do you think of a style like this?

[austincondiff]

It seems like we have landed on option 2. Closing.

[avdept]

Sorry for commenting to already decided - but instead of taking space on right side, can we have 2nd top bar for tabs(right below Terminal/Debugger/Output row), just like in regular terminal? This would save some space for terminal content, which would be useful on narrow screens.