Align tabbar styling to vscode

[msujew]

What it does

Closes #10906

How to test

1. Open editors/widgets in the main area
2. While hovering over them, changing tabs, etc. they should behave as VSCode's main area tabs
3. The focus for bottom/side panel tabs now behaves a bit differently, there's no distinction between active and non-active tabs anymore.

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[colin-grant-work]

Looks good to me, and closely mirrors the behavior of VSCode 👍. Would be nice to get others' opinions before merging, as I'm not a particularly sensitive observer of design aesthetics. @vince-fugnitto, @JonasHelming

[colin-grant-work]

One thing I've noticed just now is that it looks like we have two levels of tabbar prominence:

the active tabs on all tabbars have the same level of prominence, and the inactive tabs are all the same.

But VSCode has four:

The inactive tabs on the active tabbar are different from the inactive tabs on inactive tabbars, and the active tab on the active tabbar is different from the active tab on the inactive tabbar.

[msujew]

@colin-grant-work Thanks for the hint, I added support for "active/inactive" tabbars and adjusted the tabbar font color as needed 👍

[vince-fugnitto]

@msujew I noticed that the flicker I fixed as part of #10822 happens again (I even rebased the changes).

The fix I had included was to add a transparent border for inactive tabs at all times, so that when a tab is in fact activated it would not cause the flicker compared to inactive ones.

[msujew]

@vince-fugnitto I've decided to replace the border-top style with a box-shadow which accomplishes the same thing without influencing the layout. It seems like if the border-top-color property isn't set correctly (such as for the default dark/light themes), the border isn't rendered at all, thereby changing the layout of the tab.

[vince-fugnitto]

The changes look good to me 👍
I confirmed that the styling of tabs in the main-area and bottom area work well, there is no flicker and if a theme sets the tab.activeBorderTop it is applied.

---

@msujew perhaps out of the scope of the pull-request but should we use the same box-shadow trick to properly apply tabs.activeBorder?

Border on the bottom of an active tab. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.

I used vs-theme-0.0.1.zip to test:

"colors": {
    "tab.activeBorderTop": "#00ff00",
    "tab.activeBorder": "#ff0000"
}

vscode:

pull-request:

[msujew]

@vince-fugnitto Yep, was perfectly doable using the same box-shadow approach :)

[vince-fugnitto]

The changes are a really nice improvement 👍

[colin-grant-work]

I reaffirm my approval with the latest changes: All four levels of prominence are respected for tabs.