Explore additional layout control surfaces for discoverability

[sbatten]

The goal of this issue is to experiment with new layout control surfaces to help users understand/discover the different layout customization options.

The initial version of this is available in insiders and disable-able via workbench.experimental.layoutControl.enabled

[sbatten]

The latest here is

[heartacker]

hei, how can we exit the view without keyboard?

I think we should add a close button to the left-top

[bpasero]

From testing: Some entries toggle on click, other entries are more like radio boxes, I think this picker needs a UX revisit.

[miguelsolorio]

My comments from Slack:

While I do like that I can customize the layout, the quick pick feels like an odd choice because:

• the options by themselves don’t make a ton of sense without the title, which is on the right, so your eyes are bouncing left/right which make it not easy to scan and takes a bit longer to read
• it’s not clear if hitting enter or clicking an item will toggle it or if it’s the eye
• the sections titles should be more user friendly, instead of “move side bar” maybe “side bar placement” etc.
• after playing with this, the ux feels very strange as there is a mixture of checks and toggles. there’s also no way to dismiss with the mouse (you have to use “esc”)

While I can see the need to make layout customization more discoverable, the overall ux of the quick pick in this context suffers from usability as there’s so many patterns being used. I personally prefer the menu version, better but keeping the menu open, since it’s simpler & a known pattern.

[Tyriar]

My thoughts:

• I like the theme picker-like quick pick approach
• Can we get radio buttons supported?
• Can we use checkboxes? Instead of the eye?
• Highlighting sections based on the hovered/focused item is a great idea

[TylerLeonhardt]

• Can we get radio buttons supported?
• Can we use checkboxes? Instead of the eye?

Right now the quickpick is all or nothing with checkboxes so that would need to change but is a pretty large item. #141500
Only after that would it be worth implementing radio button support for a group for this feature. #141503

Also I might also say that having #120866 would be a dependency as I think a bunch of checkboxes (6 in this case) is kinda jarring over the approach @sbatten already took.

[miguelsolorio]

I think one of the way to fix the mixture of toggles is to switch to using checks for all items, which makes it easier to understand and it maps to the appearance menu. I'd also remove the layout modes as those aren't really customization. I'd also rename the titles to make them more readable:

[sbatten]

@misolori this is not really possible with today's quick pick, but I agree on having a more uniform visualization. The current design spawns from another desire: I would like to come up with a UX that does not prevent us from adding custom visualization icons as well. On the left it would be nice to have codicons for each part to help the user identify the parts before selection

[miguelsolorio]

Based on @sbatten's idea on adding icons for each area to identify the area I made a little mockup that could show this:

There were also some other ideas from the design team (@daviddossett @jilljac + others) around using the right controls (checkbox vs toggle), which would require some api changes, that i think properly represent each control:

There's also the "simpler" approach of no icons:

[miguelsolorio]

Also +1 to highlighting the active area for the visibility items:

[Tyriar]

@misolori

I think one of the way to fix the mixture of toggles is to switch to using checks for all items, which makes it easier to understand and it maps to the appearance menu.

All checks feels bad to me since some are checks and some are radio buttons.

That last mockup looks fantastic though 👍

[gjsjohnmurray]

Short-term, how about prefixing mutually-exclusive labels with circle-filled or circle-outline, and toggles with check or nothing? Put the appropriate layout icon (after) that state-icon.

[gjsjohnmurray]

Short-term, how about prefixing mutually-exclusive labels with circle-filled or circle-outline, and toggles with check or nothing? Put the appropriate layout icon (after) that state-icon.

A mockup I created using Developer Tools

Prefixes are \eab2 (check), \ea71 (circle-filled) and \2003 (EM SPACE)

[heartacker]

maybe it's better to use dot instead for activity-bar and status-bar
I think it is hard to distinguish sidebar and activity-bar at first-quick peek

[gjsjohnmurray]

I would like to have a quicker way to show/hide the side panel, something similar to the activity bar would be perfect.

@AlbertoFabbri93 are you seeing the Configure Layout button on your title bar?

If not, set "workbench.experimental.layoutControl.enabled": true and "window.titleBarStyle": "custom"

Hold down your mouse button on that button, drag the highlight down the menu to Show Side Panel item, then release the mouse button.

If you prefer a keyboard shortcut, bind one to the View: Toggle Side Panel command.

[ElanHasson]

@ElanHasson You can add it with

Thanks @sbatten.

I'm also seeing an issue when I set a layout it doesn't persist across sessions. My expectation was that if I set a layout, it persists without additional config.

[sbatten]

@ElanHasson can you please file a separate issue with repro steps so I can confirm whether the behavior you are seeing is a bug?

[ElanHasson]

Will do.

@sbatten #142231

Thanks for your work!

[RedMustard]

Similar use case as @lexiconium. I'm curious if we're overlooking something.

Prior to the new layout controls, I was able to dock my terminal side-by-side with the Side Bar on the right side of the window. As far as I can tell, the new layout controls prevent this type of layout and, instead, enforce the Side Panel to be on the opposite side of the window as the Side Bar.

[nickmccurdy]

The button doesn't appear in full screen on macOS, could we move it to the tab bar instead? I'd like to use this, but I almost always have VSCode full screen, so I can't without changing my workflow.

[AlbertoFabbri93]

@gjsjohnmurray Thank you very much for the reply, I have the Configure Layout button enabled but I feel like it is not that convenient if you are often toggling the visibility of the side panel.

[apple4ever]

I like the new feature, but it needs a quick access button (more than the button up top which requires two clicks, as opposed to the sidebar which only requires one click) and a key code (command-option-B makes sense on a Mac).

[wesleyboar]

Please help me see the button. I do not see the button, in full screen nor windowed.

My Settings:

• window.titleBarStyle: custom
• workbench.experimental.layoutControl.enabled: true
• workbench.enableExperiments: true

Steps Performed (click to toggle visibility):

0. In full-screen mode.
1. Confirm window.titleBarStyle setting is custom (was already set to this).
2. Change workbench.experimental.layoutControl.enabled to true.
3. From full-screen to windowed mode.
4. Restart VS Code.
5. In windowed mode.
6. Merge all windows.
7. From windowed to full-screen mode.
8. Confirm workbench.enableExperiments is set to true (was already set to this).
9. Cry here.

VS Code 1.64.0 / MacOS Monterey 12.1

[heartacker]

try my extension.
https://marketplace.visualstudio.com/items?itemName=heartacker.toggle-panel

[IdemIsDito]

I'm not able to get my preferred panel setup with the new sidepanel, previously I had from LTR: editor, panel, sidebar

[sbatten]

@IdemIsDito , the new side panel cannot be moved to the same side as the side bar. To do this, we have re-enabled you to move the bottom panel to the the right side with the side bar.

[sbatten]

For those following this issue, please try out this new setting in insiders: workbench.experimental.layoutControl.type

[heartacker]

wonderful

[heartacker]

inharmonious menu icon

too bigger

[sbatten]

@misolori maybe we go back to the less abstract icon for workbench

[miguelsolorio]

we've updated the layout icon to be a bit smaller, open to more feedback: