Add support for a border between sidebar and panel titles and views

[a-stewart]

This fixes #157312

Before:

After:

[a-stewart]

Hi,

Small ping on this. I'm happy to update the PR with the newest changes if this is something you would be willing to consider?

I think it gives more flexibility to theme owners and makes sense from a UI point of view with the high contrast themes.

[benibenj]

Apologies for the delay here, ownership of this feature area has recently changed.
This seems reasonable to me. I see there are a couple of merge conflicts going on. If you fix those I'd be happy to have a look at the PR.

[a-stewart]

Apologies for the delay here, ownership of this feature area has recently changed.
This seems reasonable to me. I see there are a couple of merge conflicts going on. If you fix those I'd be happy to have a look at the PR.

No worries, I've merged in the latest changes and resolved the issues.

[benibenj]

[a-stewart]

The challenge with this is that if we move the border line down in that way, there is an awkward intersection with the line coming up in the panel:

One option that does seem to work though is just setting box-sizing: content-box. This will allow the header to grow slightly from border, rather than letting the border encroach onto the content.

[a-stewart]

Just done some more experimenting and setting the height to anything else causes issues too.

Additionally, I think we want the border line where it is so that everything lines up in the top row.

Looking at this everything should work, except that the .componsite-bar which normally has height 100% is fixed at 35px in the .title. Removing this hard coding seems to work as expected.

[vimchun]

Hi, now, I have a lot of borders in green everywhere on VSCode with my theme "One Dark Pro".
I know I can put a border in transparent, but I think there are a lot.
I would like to have all these new border transparent, or not displaying at all (like it was before the update).
Is there an option to do it, instead of doing something like that ?

{
    "workbench.colorCustomizations": {
        "[One Dark Pro]": {
            "titleBar.border" : "#00000000",
            "activityBar.border" : "#00000000",
            "statusBar.border": "#00000000",
            "sideBar.border":  "#00000000",
            "input.border": "#00000000",
            "panel.border" : "#00000000"
            // ...
            // ...
        }
    }
}

[a-stewart]

Unless something weird has happened with the merge this should default to undefined (for non-high contrast themes).

I've tested One Dark Pro (the one with 10 million installs) on insiders.vscode.dev and it looks normal.

Could you confirm exactly which theme you are using from which extension please.

[benibenj]

@vimchun can you also specify if you changes the activity bar location? Did you maybe move it to the top? It might look different then

[a-stewart]

It seems like on the non-web version setting "oneDarkPro.editorTheme": "Retro" will add borders (after a reload), but it looks like this is the desired effect based on the marketplace screenshot?

[vimchun]

@benibenj :
My activity bar is on the right side.

@a-stewart
I use this theme : https://github.com/Binaryify/OneDark-Pro
You are right, I recently added "oneDarkPro.editorTheme": "Retro".
I could not find it was the culprit on my configuration, because I did not reload VSCode after removing it (I knew something must be wrong with my configuration, as I did not see anyone else complaining).
After removing that setting (and reload VSCode), everything is fine.

Thank you for your help !