Fix Inactive Color Issues and Spacing Issues at Tabs and Breadcrumbs

[lilingxi01]

Description

• Fix breadcrumbs spacing issue.
• Optimize the style of breadcrumb separator to better match the Xcode.
• Add inactive colors to Tabs and Breadcrumbs.

Related Issue

• 🐞 Implement Inactive States In UI #520
• 🐞 Too much spacing in breadcrumb bar #523

Checklist

• I read and understood the contributing guide as well as the code of conduct
• My changes generate no new warnings
• My code builds and runs on my machine
• I documented my code
• Review requested

Screenshots

[Angelk90]

@lilingxi01 : Can you take a screenshot of when there is no file open?

[lukepistrol]

@lilingxi01 : Can you take a screenshot of when there is no file open?

When no file is open neither the tab bar nor the breadcrumbs bar is visible. So this is completely unrelated.

[austincondiff]

Comparing the two, Xcode seems to be using blue folder icons. There is even less space between the end of the label and the > symbol. Compare the s in cypress with the s in Breadcrumbs in your screenshot. The text label for both Tabs and Breadcrumbs are also a bit lighter when inactive relatively speaking. Looking good so far!

[austincondiff]

Can you update the screenshot?

[lilingxi01]

@austincondiff : I'm still trying to fix the folder icon color issue. I currently cannot find any NSColor that is similar to the Xcode's one.

[austincondiff]

They're probably using the same color as the macOS folder icon.

[austincondiff]

Try this if there is not an NSColor for it:
Dark mode: RGB 97 182 223
Light mode: RGB 39 185 255

[austincondiff]

Please change the inactive native tab background to 45% black instead of 50% black in dark mode.

[austincondiff]

I also noticed Apple uses shadows instead of a hard border and the font is a tiny bit lighter in weight...

Sorry to be so nit-picky. These tabs are going to be so good, thank you for all you're doing on this!

[austincondiff]

I'd like to get your opinion. In Finder, Safari, etc, a native tab activates on press. In Xcode, a tab activates on release. Do you think we should activate a tab on press only if displaying native tabs?

I guess Safari does this when you change tab style, it is hard to tell but when using separate tabs it activates on press, and when I am using unified tabs it activates on release...

Screen.Recording.2022-04-22.at.4.52.39.PM.mp4

What do you think?

[lilingxi01]

@austincondiff : I think active on release makes more sense and feels better.

[lilingxi01]

Current style of tab bar and breadcrumbs:

[lilingxi01]

Current style of Inactive States:

[lilingxi01]

Shadow Compare

[lilingxi01]

And, tab divider now goes under the shadow (and top/bottom divider):

[lilingxi01]

@lukepistrol : This PR has already finished updating. Ready for next review! 🎉

[austincondiff]

Looks really good @lilingxi01, very impressive. Glad we were able to get those details ironed out! 👏