Tab style updates x 8

[petemill]

1. Tab / Top Nav updated colors 🎨

A small iteration towards new styles including:

• New colors from @bradleyrichter
• Everything more painstakingly perfectly aligned
• Horizontal and vertical spacing improvements, including very slightly taller tabs
• Tab audio icon gets new color, hover state and tooltip
• Some miscellaneous code cleanup / refactoring for performance and maintainability

Was (0.20)

Now

Note: exact style has been tweaked via design team since this screenshot.

2. Tab title text gets sub-pixel antialiasing 🔍

The tab title text was being forced to be rendered on a GPU layer. This is useful when performing transformations, but this was occuring even when the tab is static. Using the GPU has a slight hit to text rendering quality since it cannot use sub-pixel antialiasing, whereas CPU rendering can.

These are not great representations. I recommend using the zoom function of Mac / Windows, or taking a screenshot and magnifying in order to validate:

Was

Now

3. Preview mode tab style 📑

Fix #12454
Closes #2869

Makes it more apparent that the tab is doing something out of context - being previewed and not being made active - by providing a transition as if the tab were 'pulled out' for special inspection.
Also adds more of a style to the frame itself, to reduce user-confusion that the frame is active, and not simply a preview.
Cross-fade of frame content was implemented (and awesome), but removed due to performance / low animation framerate.
This can be fixed and re-implemented with single-webview, which will require a
different css architecture for this potential feature anyway.
The tab animation itself is sometimes not as smooth as I'd like. That is also caused by multiple webviews hiding and showing, and could be revisited after single-webview.

Note: exact style has been tweaked via design team since this screenshot.

4. Tighten up transitions 🔧

Including:

• Hover (and preview if enabled) transition comes in fast 💨, and fades out luxuriouslyslowly 🐌
• No transition for switching between active and inactive state

5. Adjust filter for favicons on dark themed tabs 🌫

This was causing big issues for some favicons which. We experimented with a bunch of different blends at https://codepen.io/petemill/pen/XVovva
Fix #12722

Was

Now

6. Tab gradient background transition fix (overflow text) 💨

Fix #12721 (Tab background gradient visible when switching tabs)
Fix #11249 (Tab color has weird fade in paint effect when switching)
A regression introduced with 0.20.x

Was (slowed down to 10% speed)

Now

Note that the background transition has mostly been removed as part of this PR anyway, since active tab style change should be instant, just like the content

7. Tab Close Button style ✖️

• Background of button does not show until hover
• Color of button (when not hovered) is the same as text
• Button gets active state (i.e. when mouse is down on button, background color changes)

8. Remove transparency from theme color 🔵

Fix #12803

Was:

Now:

Submitter Checklist:

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).
• Tagged reviewers and labelled the pull request as needed.
• Request a security/privacy review as needed. (Ask a Brave employee to help if you cannot access this document.)

Test Plan:
Confirm visuals as above. Note that some minor tweaks have been made since the above screenshots were taken, through iterations with design/product team members.

Reviewer Checklist:

• Request a security/privacy review as needed if one was not already requested.

Tests

• Adequate test coverage exists to prevent regressions
• Tests should be independent and work correctly when run individually or as a suite ref
• New files have MPL2 license header

[codecov-io]

Codecov Report

Merging #12565 into master will increase coverage by 0.04%.
The diff coverage is 20%.

@@            Coverage Diff             @@
##           master   #12565      +/-   ##
==========================================
+ Coverage   56.53%   56.58%   +0.04%     
==========================================
  Files         284      284              
  Lines       28710    28658      -52     
  Branches     4748     4740       -8     
==========================================
- Hits        16232    16215      -17     
+ Misses      12478    12443      -35

Flag	Coverage Δ
#unittest	56.58% <20%> (+0.04%)	⬆️

Impacted Files	Coverage Δ
app/renderer/components/styles/global.js	100% <ø> (ø)	⬆️
app/renderer/components/styles/theme.js	100% <ø> (ø)	⬆️
app/renderer/components/tabs/content/tabIcon.js	65.21% <ø> (ø)	⬆️
app/renderer/components/tabs/content/favIcon.js	35.52% <ø> (ø)	⬆️
app/renderer/components/tabs/content/tabTitle.js	44.44% <0%> (-0.46%)	⬇️
app/common/state/tabUIState.js	37.87% <0%> (+7.18%)	⬆️
...pp/renderer/components/tabs/content/privateIcon.js	39.34% <0%> (+1.24%)	⬆️
app/renderer/lib/observerUtil.js	40% <0%> (ø)	⬆️
...p/renderer/components/tabs/content/audioTabIcon.js	32.09% <100%> (+0.45%)	⬆️
js/lib/color.js	19.04% <16.12%> (-4.49%)	⬇️
... and 12 more

[petemill]

This is ready for review again @cezaraugusto @bsclifton! I've updated the description with some additional optimizations. I'm ready to draw a line under this set of enhancements and get it in to a release (targeted for 0.22). Thanks!

[cezaraugusto]

THIS LOOKS AND FEELS FANTASTIC I'D REVIEW IT 100000x

[cezaraugusto]

merged with confidence ®

[cezaraugusto]

cc @petemill I'm having some conflicts while cherry-picking against 0.23.x/0.22.x mind doing it?

[petemill]

@cezaraugusto thanks! I may have to do the merge 0.22 because the aphrodite stuff is in 0.23 probably!

[petemill]

@cezaraugusto same thoughts!

[petemill]

0.23.x a372f09
0.22.x 2024044

[bradleyrichter]

@petemill A user asked if we could reduce the blend fade timing when returning from the preview to the current tab? I agree it could be shorter.

[petemill]

@bradleyrichter the content area fade is timed to be the same timing as the Tab element returning to normal (non-preview), which itself is timed to be the same as the hover color returning when preview has not been activated.
Start hover / preview: a quick 200ms (ease-out)
Finish hover / preview: a luxurious 400ms (ease-in)

I took these timings from hovering over the Tabs of ...another browser... which felt good, and I did already decrease them quite a bit because of our more exaggerated preview movement. But perhaps we can have a quicker content-area fade back to current tab's content, and not synchronize with the tab animation timings, especially since we don't cross-fade the tab content anyway (yet).

[bradleyrichter]

@petemill Yes. Perfect. Please try reducing only the page fade-out to current tab by 50% of current.

The rest feels good as is.

[petemill]

@bradleyrichter sounds good, I'll have to do it in another PR since this is merged. Will create one for the combined tweaks.