Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Increase contrast between active and inactive tabs #6900

Merged
merged 5 commits into from
Oct 21, 2020
Merged

Conversation

simonhong
Copy link
Member

@simonhong simonhong commented Oct 20, 2020

Resolves brave/brave-browser#8576

Screen Shot 2020-10-20 at 9 53 53 PM

Screen Shot 2020-10-20 at 9 54 12 PM

Screen Shot 2020-10-20 at 9 55 44 PM

Submitter Checklist:

Test Plan:

Reviewer Checklist:

  • New files have MPL-2.0 license header.
  • Request a security/privacy review as needed.
  • Adequate test coverage exists to prevent regressions
  • Verify test plan is specified in PR before merging to source

After-merge Checklist:

  • The associated issue milestone is set to the smallest version that the
    changes has landed on.
  • All relevant documentation has been updated.

If mouse is hovered on tab, shows close button.
* light theme #BEBEBF
* dark theme #393838
* no color changes at this time for private window / with tor tab separator and custom theme
@simonhong simonhong self-assigned this Oct 20, 2020
@simonhong simonhong added this to the 1.17.x - Nightly milestone Oct 20, 2020
@simonhong simonhong marked this pull request as ready for review October 20, 2020 12:56
@simonhong simonhong requested a review from a team as a code owner October 20, 2020 12:56
@@ -1,16 +1,48 @@
diff --git a/chrome/browser/ui/views/tabs/tab_style_views.cc b/chrome/browser/ui/views/tabs/tab_style_views.cc
index 950c967b5f87a6e3f531e3155a420002a7510d3a..a9b5b74a1a5c345727c1deb631fce7fcbb2762dc 100644
index 950c967b5f87a6e3f531e3155a420002a7510d3a..ad84681855bc39f55796c8740f490b998e2bc68a 100644
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't avoid patching. GM2TabStyle is defined in anonymous namespace.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@simonhong: wasn't sure this was going to work, so had to try it out and it seems to be working. What do you think of subclassing instead like this: 4c19f3e

Copy link
Member Author

@simonhong simonhong Oct 20, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mkarolin ! Overriding CreateForTab is great :)
Updated.

* Inactive tab title has 70% opacity; on hover or focus show title at 100% opacity
* Make active tab font Semibold
Copy link

@karenkliu karenkliu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! 💯

@mkarolin
Copy link
Collaborator

Do tab separators seem a bit lost now? @karenkliu
TabColors

@karenkliu
Copy link

@mkarolin Yep - this is the intended design. The favicon + title of inactive tabs already do a lot to differentiate between tabs, so the tab separator contrast was reduced. This will also help the active tab stand out more within the tabbar.

Copy link
Collaborator

@mkarolin mkarolin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@simonhong
Copy link
Member Author

@mkarolin Thanks for great review 👍

@simonhong simonhong merged commit 4b9ac7c into master Oct 21, 2020
@simonhong simonhong deleted the tab_contrast branch October 21, 2020 01:08
@simonhong simonhong mentioned this pull request Oct 21, 2020
33 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve contrast among tabs
3 participants