I'm thinking about picking up #12628, but would like to get some input from the UX team, so we can get the design right.

Current State

However, this design doesn't work when activitybar is hidden or in the right.

Electron's limitation

Electron allows one of the four following styles, but they can't be changed at runtime. Would need a restart of VSCode to use another style.

Points of Discussion

To make the inline traffic lights work, there are three options:

1. When inlining traffic lights into activitybar, lock activitybar so user can't hide it or move it to the right.

2. Tweak the sidebar and tabbar, so they could contain the traffic lights. Chrome-style tabbar is achievable:

   

   but I can't find a good way to let sidebar contain traffic lights. Haven't seen other OS X app putting traffic light in sidebar either.

3. Instead of inlining traffic lights into activitybar, we inline the traffic lights into a custom titlebar. This is how many macOS apps are designed, like Mail, iTunes and Safari:

   

1 is easy to implement. 3 feels right design-wise. 2 probably isn't worth pursuing, as it involves a lot effort for a not-so-good design.

Do we also add such a feature for Windows?

• If so, I think inlining traffic lights into custom titlebar is better, as the "traffic lights" are to the right in Windows. Borrowing @be5invis's mockups...

  This looks natural:

  

  Whereas this one looks odd, and doesn't account for the case when both activitybar and sidebar are hidden. It also leaves no space for menu items.

  

My thoughts

Overall, I feel 3 is better than 1 in terms of usability and cross-platform design consistency.

It seems @bpasero already made a custom titlebar for macOS. If we choose design 3, I can try to make titleBarStyle: custom for Windows. If we choose to push the original idea forward, I want to get some input from the UX team for the usability concerns.

/cc @bpasero @stevencl @bgashler1