Modernizing VS Code UI to fit other Microsoft Products

[EmrecanKaracayir]

With very minor adjustments, VS Code can be really beautiful and modern-looking. I was experimenting with the developer console and prepared some custom CSS. I thought VS Code can benefit a design that is similar to the new Microsoft Edge UI refresh.

In the video, I am not demonstrating a theme, the idea is the panel design. The design proposes that all fundamental UI elements such as; Title bar, Activity Bar and Status Bar resides on the base level (i.e., z-index 1) while the panels like; Terminal, Side Bar and Editor resides on an upper layer (i.e., z-index 2). The Windows 11 Design guidelines suggests that upper level surfaces' background colors should be lighter than lower level ones (in this example: base level HEX:202020, upper level HEX:282828). Following these two rules and rounded panel design would give us a result that is similar to new Microsoft Edge UI refresh.

Example UI footage: (Not a concept)

Recording.2023-05-26.035931.mp4

This is a veery rough little experiment, has quirks and issues. But the idea is this:

[RGarrido03]

This looks amazing! Would you mind sharing the custom CSS?

[EmrecanKaracayir]

This looks amazing! Would you mind sharing the custom CSS?

I would of course but as you can see in the sidebar, changing the layout this way results with the content not being properly displayed (check the bottom of sidebar and terminal input area). It seems vscode not widely adopted more modern layout algorithms like flexbox. Cuurently, it checks the content and assignes absolute positions and width/height values but it does this in a way that uses fixed values with the default UI (so changing the ui results with undesirable effects because vscode doesn't actually calculates the updated ui). But, these fixes can be easly applied in the internal layout algorithm that vscode uses by changing the fixed values to new ones.

I could fix all of the issues above by custom JS, but it is so much work and introduces extra listeners and performance degredation to vscode for a task that can be easily achieved by altering the internal layout algorithm in a way that considers margin values when calculating layouts.

Because of this, I can't provide the custom css. It will eventually break some ui element.

[daviddossett]

Thanks for exploring 🙏 As with Edge's recent update, I suspect this would be a very polarizing change. However I am planning to explore some UI updates at some point this year. I'll take this as some input.

The most obvious challenge in pulling off this kind of layout, cool as it is visually, is that you lose precious real estate, especially on smaller screens.

[EmrecanKaracayir]

Thanks for exploring 🙏 As with Edge's recent update, I suspect this would be a very polarizing change. However I am planning to explore some UI updates at some point this year. I'll take this as some input.

The most obvious challenge in pulling off this kind of layout, cool as it is visually, is that you lose precious real estate, especially on smaller screens.

That is right, losing real-estate is always a bad thing but, i used 16px of margin around panels, this can be reduced to 8px. Also, to me, the biggest real-estate hog is the activity bar. And also as always, there can be a compact mode.

By the way, I loved your work for the new modern themes. It was a great step to making VS Code ui great. Thank you.

[Kroc]

Try out your design in 1366x768, where I'm already struggling to have the Explorer, Code view and side panel without reducing code to less than 80 chars! Certainly, different metrics could be used for larger screens (responsive CSS in VSCode?)