Make settings UI look more like one unit and easier to switch to global/workspace settings

[bgashler1]

#16764 Design task:

• The settings editor currently looks more like two editors. How can we improve it to look like one unit?

Extend Search to both Default (LHS) and Editable (RHS) settings editors. Search will filter in Default settings where as in Editable settings it highlights settings matched in Default settings.

• Also, how can we support quickly switching between Workspace and User settings without having to go through the app menu.

Show User and Workspace settings as tabs next to Search to easily navigate and discoverable. When there is no workspace, Workspace settings tab is shown disabled.

• Open Workspace Settings message box opens plain settings.json

cc @sandy081

[sandy081]

@bgashler1 I started working on this. This is what I am thinking

Layout

• Extend the header bar (with Search and any additional actions) across two editors (left, right)
• Let two editors has separate header describing themselves (say Default Settings, User Settings etc)
• On search, default settings are filtered and shown those matching the search criteria (like how it is now). But, I do not like to have the same behavior on right side editor (editable settings) because this is editable and will not give good user experience. Instead it highlights those settings which are shown in default settings. Let's say Default settings show font size setting and if right side has this setting then it is highlighted. Any thoughts?

Switching settings

• One proposal would be to provide an option in the header bar to show Workspace settings. Idea is ability to show either or both settings on the right side. Any UI suggestions will be helpful.

[bgashler1]

Similar issue #16696

[sandy081]

@bgashler1 Take a look at the following video that has changes to layout as explained in comment.

Suggestions and feedback is very much welcome.

Some feedback from the team

• How helpful is to show the count (Showing 10 of 260 settings)? IMO it's ok to me to leave it or remove it. From UI point of view, I feel it makes Search bar looks better than with out it.
• Since LHS and RHS look similar, we need some user affordance to say users that RHS is editable. (This is also true before). This is especially for new users.

I think new users start performing actions and might (or not) slowly learn that RHS is editable. There is also a comment on the top to say that RHS is a file that can be updated. May be we can have a different bg color for LHS to say that it is read only?

Next step is to integrate workspace settings in this settings editor

[gulshan]

There can be a link/option in the UI to facilitate easy switching between user settings and workspace settings.

[sandy081]

After further thinking, I think, it's better to place showing count message in LHS (as before). Because this message belongs more to Default Settings.

[bgashler1]

@sandy081 it's interesting to see your highlighting idea in action. I think I would need to play with it.

cc @chrisdias, @seanmcbreen

By the way, I have a few different design ideas (below) that might help with the LHS and RHS similarity problem and also address @gulshan's comment. All of these involve keeping the search box localized to the left while still making the whole settings area look like one unit.

1) Full-width header and tabs

Pros: tabs are fast and intuitive at helping users know there is more content here.
Cons: these tabs might be a little too subtle on a gray header.

Alternate (use dropdown instead of tabs)

Pros: it follows what we do in the panel for switching content and avoids introducing a new tab paradigm.
Cons: it's not as fast to switch as tabs.

2) Ribbon symmetry with accordion

Pros: it allows you to compare User and Workspace settings in one place
Cons: do we even need to see both at once?

3) Minimalist with right-aligned tabs

Pros: Very clean and lightweight
Cons: we lose the top help tip that is in the other designs.

So far, I'm getting the best feedback about Design # 1. Your thoughts?

[bgashler1]

@sandy081: You might be surprised I brought back the header background color, considering #17103. We can fix that issue using a translucent white/black instead of an opaque gray. It would be rgba(0,0,0,.5) for light themes and rgba(255,255,255,.03) for dark themes. This would appear the same in default light and dark while also blending nicely in other themes.

[gulshan]

If "User Settings" and "Workspace Settings" menu items under "Preferences" are merged to just "Settings", # 2 seems a better option showing both. Because then, which one of the two is intended by the user is not known. Otherwise, # 1 a is better than others I guess.