Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore adding a second side bar #132893

Closed
sbatten opened this issue Sep 10, 2021 · 55 comments
Closed

Explore adding a second side bar #132893

sbatten opened this issue Sep 10, 2021 · 55 comments
Assignees
Labels
feature-request Request for new features or functionality layout General VS Code workbench layout issues on-testplan plan-item VS Code - planned item for upcoming
Milestone

Comments

@sbatten
Copy link
Member

sbatten commented Sep 10, 2021

This issue contains the discussion around adding a second side bar. The secondary side bar would be the next step in improving layout flexibility.

A primary motivator of the second side bar is to address the scenarios expected in #26777.

The current step is understanding the various UX options that could be used to solve the problem. Below are some notes from the current exploration.

  • Side bar is a loose term here. We could introduce a second panel instead which already knows how to move to multiple orientations.
  • Second may also be limiting. As many have pointed out, should we just allow N number of panels or side bars? Limiting the number does simplify things like keybinds and general layout management and adding too many comes at the cost of complexity that many users will find less useful.
  • Currently the panel and side bar solve nearly the same purpose but the panel is drawn differently. Could we adapt the panel to turn into a side bar when it is on the left or right and then make more of them?
  • If we go with a second side bar, is it necessary to have an activity bar?

Also adding some mockups from @misolori

image
image
image
image

@sbatten sbatten added plan-item VS Code - planned item for upcoming layout General VS Code workbench layout issues labels Sep 10, 2021
@sbatten sbatten added this to the September 2021 milestone Sep 10, 2021
@sbatten sbatten self-assigned this Sep 10, 2021
@ghost
Copy link

ghost commented Sep 10, 2021

I would love this feature. I am working on a project which has a lot of files in the root directory so I cannot fold it like a folder. It takes nearly all the space to see all the files at once. I prefer not to scroll. I wanted to have a second sidebar where I could put the outline in the top half and the timeline (git) in the bottom.

The secondary side bar would be the next step in improving layout flexibility.

Agreed. I imagine one day VSCode's layout would be as flexible as https://theia-ide.org/ ie. Drag and drop pretty much anything anywhere you like (it also has vertical tabs like the ones in the screenshots)

Second may also be limiting. As many have pointed out, should we just allow N number of panels or side bars? Limiting the number does simplify things like keybinds and general layout management and adding too many comes at the cost of complexity that many users will find less useful.

Definitely something else to keep in mind too.

@DominicVonk
Copy link

Maybe make it possible to do vertical tabs or icons on both sidebars.

@paror
Copy link

paror commented Sep 14, 2021

Another possibility : horizontal icons on the top of the second sidebar (not to waste space in a long vertical bar with some icons on top ...)

@miguelsolorio
Copy link
Contributor

Here's another iteration that @sbatten and I worked on. This idea closely follows the sidebar appearance/styling but works just like the panel (with multiple panel titles and views):

CleanShot 2021-09-14 at 14 56 09@2x

So this means that the panel will still be able to be placed on the left/bottom/right and the secondary sidebar can take multiple views containers:

CleanShot 2021-09-14 at 14 55 56@2x

We also discussed toggling the secondary sidebar via keyboard shortcuts and via the "sash" drag & adding a single click to toggle this:

CleanShot 2021-09-14 at 15 01 37@2x

@DominicVonk
Copy link

Maybe make a setting, that everyone can pick their favorite. I would really like the activity bar because then I feel more organized.

@sbatten
Copy link
Member Author

sbatten commented Sep 15, 2021

Adding some screenshots comparing a full length second side bar and editor length side bar

Full-Length
image

Editor-Length
image

@wzhudev
Copy link
Contributor

wzhudev commented Sep 17, 2021

Great to have this feature!

@heartacker
Copy link
Contributor

heartacker commented Sep 17, 2021

@sbatten Thanks
and IMO, I want the new side bar like this,

image

exactly, I believe that floating panel is a good solution for user, like ^VS2019, the visual studio float panel is very useful and powerful, we could use for reference.

there is the float panel(FP) of vs2019, and some of those features are yummy

  • when the FP is hide, there are titles standing by side.
  • when click the of title of FP, the FP show, we can do something like navigation, but after lost the focus, the FP automatically hide in order to maximize the editor view
  • we could also PIN those FP for persist view.
    AA

#26777 (comment)

@DominicVonk
Copy link

I would prefer Full-Length @sbatten

@mhanuszh
Copy link

I would prefer Full-Length @sbatten

How about a setting for it?

@DominicVonk
Copy link

DominicVonk commented Sep 24, 2021

I have it enabled with the setting "workbench.experimental.sidePanel.enabled". And it already looks promising. But I would also like side tabs please.

@Vjust
Copy link

Vjust commented Sep 29, 2021

It would be good to have the second explorer be a browser for other things.

  • ability to move the outline to the second bar.
  • ability for extensions to use the second bar
  • use for intellisense & find results & TODOs & bookmarks maybe

@gjsjohnmurray
Copy link
Contributor

@Vjust you should be able to drag those things and drop them there.

@Vjust
Copy link

Vjust commented Sep 29, 2021

Thanks , I missed that obvious detail. Is this feature already in the insider-build

@gjsjohnmurray
Copy link
Contributor

Is this feature already in the insider-build

Yes.

@sbatten sbatten modified the milestones: September 2021, October 2021 Sep 30, 2021
@sbatten
Copy link
Member Author

sbatten commented Sep 30, 2021

Moving to October as all exploration for September is complete.

@ghost
Copy link

ghost commented Oct 2, 2021

Is this feature already in the insider-build

Yes.

Moving to October as all exploration for September is complete.

Does this mean we can expect it to be in the October release or will we have to wait for a couple more months? Sorry if you count this as spam -- you may delete this.

@sbatten
Copy link
Member Author

sbatten commented Oct 4, 2021

This is not ready for prime time in the October release and the next milestone is less focused on feature work. However, now that we have this going in insiders, the exploration will continue when feature work picks up again the following milestone.

@tanhakabir tanhakabir modified the milestones: October 2021, November 2021 Oct 4, 2021
@tanhakabir tanhakabir added the feature-request Request for new features or functionality label Oct 4, 2021
@clytras
Copy link

clytras commented Dec 3, 2021

Can we move it to the left side right next to the explorer?

This is a super cool and long waited feature and please consider making the 'side' of the side panel configurable (right or left). I have an ultra wide monitor and I split to multiple panel columns views and with the side bar on the right side, I need much more mouse traveling each time I want to navigate using the outline, but if I can move the sidebar panel at the left side, right next of the main explorer, it would be super productive on ultra wide screens.

EDIT:

And just to be clear, I mean to have the explorer with "OPEN EDITORS" and "FILES" and next to it the "OUTLINE", because then we'll have a full column outline and not just stacked under files which makes it tiny and unusable.

Something like this:

Ultra wide monitor with outline on left

@abflow
Copy link

abflow commented Dec 4, 2021

@ clytras, as there are at least as many layout configurations as there are VS Code users, and considering the thousands of extensions with their own view containers and activities in the marketplace, I think we would also need a way to store, retrieve and sync multiple layouts settings, with all the different locations of sidebars, panels, items, etc. (#138263)

Presently, VSCode design feels constrained and not enough flexible. Consequently, it is indeed more designed for notebooks than for ultra-wide monitors with lots of space for complex layout configurations.

In all professional softwares that I have personally used (not just for coding), the layouts were customizable and switchable, which is much more productive.

PS: Ideally, we should be able to display more than two sidebars for ultra-wide sreens. Like two on the left (as in clytras picture) and yet another one the right. But if VS Code developers only work on notebooks or little laptops, they may not be aware of the current design limitation that users with wide-screen monitors or complex layout configurations actually experience.

@rejhgadellaa
Copy link

rejhgadellaa commented Dec 21, 2021

Thanks for the great work here.

Just wondering if a keyboard shortcut for toggling the side panel is on the roadmap? It is mentioned in this ticket but only once.

Update: NVM, I just found it under File > Preferences > Keyboard shortcuts. Just search for "Side Panel" and there you can assign a shortcut.

Thanls!

@alefragnani
Copy link

alefragnani commented Dec 21, 2021

Just noticed the current builds changed how the selected Tabbed Container UI option works. It is only displaying the Icon, not the Label anymore.

Version: 1.64.0-insider
Commit: e8a26d3ebf5095d4324ad4bf794787540ed3b33e
Date: 2021-12-21T05:14:12.146Z

But, it is not working correctly for some extensions, like my Bookmarks and Project Manager, neither Microsoft's Live Share.

Kapture Side Panel Icon Issue

Is it something that will be fixed in the Side Panel itself, or extension developers must update their Side Bar icons to be visible there too?

BTW, the icons currently works perfectly in the original Side Bar.

Thank you

@alefragnani
Copy link

alefragnani commented Dec 21, 2021

Also, why can't I move any panel / side bar / extension, from the Side Bar to the Side Panel?

Some of the native ones are not supported.

@Kroc
Copy link

Kroc commented Jan 5, 2022

Whilst you're doing all this great work, I'm just here to make sure the millions of users on "small" resolutions like 1366x768 don't get overlooked! It's already a struggle as it is

@heartacker
Copy link
Contributor

image
seem that the icon is some bigger that other three in visual

@nidefawl
Copy link

The second sidebar is a great addition.

One bug I came across today:
I have the references view in the extra sidebar, I enabled it in the workspace config.
When I open a new workspace that has the sidebar disabled it fails to open the references view when use 'Find all references'.

@sbatten
Copy link
Member Author

sbatten commented Jan 18, 2022

@nidefawl in the latest insiders builds, the side bar can no longer be "disabled" so this should no longer be an issue. please follow up if you are still seeing it in those builds

as for the icon @heartacker, we are still playing around with this icon, feedback is noted. cc @misolori

@heartacker
Copy link
Contributor

{
"command": "workbench.action.toggleMaximizedPanel"
}
@sbatten the command seems to maximize the side panel, not the panel

@sbatten
Copy link
Member Author

sbatten commented Jan 19, 2022

@heartacker are you using a non-center panel alignment?

@heartacker
Copy link
Contributor

@sbatten there is the gif pic

sidepanel

@sbatten
Copy link
Member Author

sbatten commented Jan 20, 2022

@heartacker I attempted to support maximization of the panel in the non-centered panel alignment scenario but our grid widget has some issues with it at the moment. as such, I've had to disable panel maximization in this case while we look into proper support for this.

@heartacker
Copy link
Contributor

@sbatten thanks for ur clarify, so I want to set the penel aligning by center. but

  1. I cannot see any setting about panel align or align penel
    image
  2. I cannot align panel by center through command prompt, there are only two commands without align center

image
3. finish I find it is menu view

maybe we could improve the ux.
for example:
add setting to panel right click menu
image

@sbatten
Copy link
Member Author

sbatten commented Jan 21, 2022

@heartacker thanks for testing this out, it highlights a discoverability issue with the command titles. in today's insiders, there are a few ways to tweak the panel alignment.

Command Palette

image

Note In the next build, all panel alignment commands will be of the form Set Panel Alignment to ...

Appearance Menu

image

Control Layout to Customize Layout...

image

image

@sbatten
Copy link
Member Author

sbatten commented Jan 21, 2022

Closing this issue as the exploration phase is over. Please file new issues for feedback, bugs, and requests.

@sbatten sbatten closed this as completed Jan 21, 2022
br3ndonland added a commit to br3ndonland/dotfiles that referenced this issue Feb 5, 2022
VSCode 1.64 info notice in settings.json:

> This setting has been deprecated with the addition of the new side
> panel. Instead of setting the location for the panel, you now use
> the "Move Views" commands to set the location of the individual view
> containers within the panels.

Another questionable VSCode "feature":

microsoft/vscode#132893
microsoft/vscode#141349
microsoft/vscode#141356

Other integrated terminal fixes and "features" I've had to disable:

- Terminal tabs:
  - 23e32a2
  - 4813726
- Rearranging `$PATH`: 3ca8e2c
- Breaking forward delete word: a71fdc7
- Enabling persistent terminal sessions: d895455
@github-actions github-actions bot locked and limited conversation to collaborators Mar 7, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature-request Request for new features or functionality layout General VS Code workbench layout issues on-testplan plan-item VS Code - planned item for upcoming
Projects
None yet
Development

No branches or pull requests