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

Improve tab contrast #6912

Merged
merged 14 commits into from
Nov 25, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions app/brave_generated_resources.grd
Original file line number Diff line number Diff line change
Expand Up @@ -308,13 +308,25 @@ By installing this extension, you are agreeing to the Google Widevine Terms of U
New Tor Connection For This Site
</message>
<message name="IDS_PROFILES_EXIT_TOR" desc="Button in the avatar menu bubble view for exiting the active Tor session.">
Exit Tor
Exit Private Window with Tor
</message>
<message name="IDS_PROFILES_EXIT_PRIVATE" desc="Button in the avatar menu bubble view for closing private window.">
Exit Private Window
</message>
<message name="IDS_TOR_PROFILE_NAME" desc="The name given to the Tor browsing profile. Displayed in the avatar menu bubble and button UI.">
Tor
Private Window with Tor
</message>
<message name="IDS_PRIVATE_PROFILE_NAME" desc="The name given to the private profile. Displayed in the avatar menu bubble and button UI.">
Private Window
</message>
<message name="IDS_TOR_AVATAR_BUTTON_LABEL" desc="The text label of tor avatar button.">
Private with Tor
</message>
<message name="IDS_TOR_AVATAR_BUTTON_TOOLTIP_TEXT" desc="The tooltip text of tor avatar button.">
This is a private window with Tor
</message>
<message name="IDS_PROFILES_OPEN_TOR_PROFILE_BUTTON" desc="Button in the avatar menu bubble view to open a Tor window.">
Open Tor Window
Open Private Window with Tor
</message>
<message name="IDS_LOCATION_BAR_OPEN_IN_TOR" desc="Button in location bar to open onion available site in tor window.">
Open in Tor
Expand Down
1 change: 1 addition & 0 deletions app/theme/brave_theme_resources.grd
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32_DEV" file="brave/product_logo_32_dev.png" />
<structure type="chrome_scaled_image" name="IDR_PRODUCT_LOGO_32_DEVELOPMENT" file="brave/product_logo_32_development.png" />
<if expr="not is_android">
<structure type="chrome_scaled_image" name="IDR_TOR_WINDOW_FRAME_GRAPHIC" file="brave/tor_window_frame_graphic.png" />
Copy link
Member

Choose a reason for hiding this comment

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

Out of interest - did you try a scalable .icon instead of PNG?

Copy link
Member Author

Choose a reason for hiding this comment

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

I didn't try because .icon only works well for icon type(square) and mono color.

<!-- Avatar icons -->
<!-- Generated via zsh :
> declare -i a=56
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 0 additions & 1 deletion app/vector_icons/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ aggregate_vector_icons2("brave_vector_icons") {
"speedreader.icon",
"speedreader_on_active.icon",
"speedreader_on_inactive.icon",
"tor_profile.icon",
]
}

Expand Down
99 changes: 0 additions & 99 deletions app/vector_icons/tor_profile.icon

This file was deleted.

42 changes: 22 additions & 20 deletions browser/themes/brave_theme_helper.cc
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,24 @@ const SkColor kDarkOmniboxText = SkColorSetRGB(0xff, 0xff, 0xff);
const SkColor kLightOmniboxText = SkColorSetRGB(0x42, 0x42, 0x42);

// Location bar colors
const SkColor kPrivateLocationBarBgBase = SkColorSetRGB(0x1b, 0x0e, 0x2c);
const SkColor kPrivateLocationBarBgBase = SkColorSetRGB(0x0B, 0x07, 0x24);
const SkColor kDarkLocationBarBgBase = SkColorSetRGB(0x18, 0x1A, 0x21);
const SkColor kDarkLocationBarHoverBg = SkColorSetRGB(0x23, 0x25, 0x2F);

SkColor GetLocationBarBackground(bool dark, bool priv, bool hover) {
if (priv) {
return color_utils::HSLShift(kPrivateLocationBarBgBase,
{-1, -1, hover ? 0.54 : 0.52});
return hover ? color_utils::HSLShift(kPrivateLocationBarBgBase,
{-1, -1, 0.54})
: kPrivateLocationBarBgBase;
}

return dark ? (hover ? SkColorSetRGB(0x44, 0x44, 0x44)
: SkColorSetRGB(0x22, 0x22, 0x22))
: (hover ? color_utils::AlphaBlend(
SK_ColorWHITE,
SkColorSetRGB(0xf3, 0xf3, 0xf3), 0.7f)
: SK_ColorWHITE);
if (dark) {
return hover ? kDarkLocationBarHoverBg : kDarkLocationBarBgBase;
}

return hover ? color_utils::AlphaBlend(SK_ColorWHITE,
SkColorSetRGB(0xf3, 0xf3, 0xf3), 0.7f)
: SK_ColorWHITE;
}

// Omnibox result bg colors
Expand All @@ -55,11 +59,13 @@ SkColor GetOmniboxResultBackground(int id, bool dark, bool priv) {

SkColor color;
if (priv) {
color = color_utils::HSLShift(kPrivateLocationBarBgBase,
{-1, -1, high_contrast ? 0.45 : 0.56});
color = high_contrast ? color_utils::HSLShift(kPrivateLocationBarBgBase,
{-1, -1, 0.45})
: kPrivateLocationBarBgBase;
} else if (dark) {
color = high_contrast ? gfx::kGoogleGrey900 : kDarkLocationBarBgBase;
} else {
color = dark ? (high_contrast ? gfx::kGoogleGrey900 : gfx::kGoogleGrey800)
: SK_ColorWHITE;
color = SK_ColorWHITE;
}
return color_utils::BlendTowardMaxContrast(
color,
Expand All @@ -77,10 +83,6 @@ bool IsUsingSystemTheme(const CustomThemeSupplier* theme_supplier) {

BraveThemeHelper::~BraveThemeHelper() = default;

void BraveThemeHelper::SetTorOrGuest() {
is_tor_or_guest_ = true;
}

SkColor BraveThemeHelper::GetDefaultColor(
int id,
bool incognito,
Expand All @@ -98,13 +100,13 @@ SkColor BraveThemeHelper::GetDefaultColor(
return ThemeHelper::GetDefaultColor(id, incognito, theme_supplier);

// Brave Tor profiles are always 'incognito' (for now)
if (!incognito && is_tor_or_guest_) {
if (!incognito && (is_tor_ || is_guest_)) {
incognito = true;
}
const dark_mode::BraveDarkModeType type =
dark_mode::GetActiveBraveDarkModeType();
const base::Optional<SkColor> braveColor =
MaybeGetDefaultColorForBraveUi(id, incognito, type);
MaybeGetDefaultColorForBraveUi(id, incognito, is_tor_, type);
if (braveColor) {
return braveColor.value();
}
Expand Down Expand Up @@ -136,7 +138,7 @@ base::Optional<SkColor> BraveThemeHelper::GetOmniboxColor(

const bool dark = dark_mode::GetActiveBraveDarkModeType() ==
dark_mode::BraveDarkModeType::BRAVE_DARK_MODE_TYPE_DARK;
incognito = incognito || is_tor_or_guest_;
incognito = incognito || is_tor_ || is_guest_;
// TODO(petemill): Get colors from color-pallete and theme constants
switch (id) {
case ThemeProperties::COLOR_OMNIBOX_BACKGROUND: {
Expand Down
6 changes: 4 additions & 2 deletions browser/themes/brave_theme_helper.h
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ class BraveThemeHelper : public ThemeHelper {
BraveThemeHelper(const BraveThemeHelper&) = delete;
BraveThemeHelper& operator=(const BraveThemeHelper&) = delete;

void SetTorOrGuest();
void set_is_tor() { is_tor_ = true; }
void set_is_guest() { is_guest_ = true; }

protected:
// ThemeHelper overrides:
Expand All @@ -35,7 +36,8 @@ class BraveThemeHelper : public ThemeHelper {
bool* has_custom_color) const override;

private:
bool is_tor_or_guest_ = false;
bool is_tor_ = false;
bool is_guest_ = false;
};

#endif // BRAVE_BROWSER_THEMES_BRAVE_THEME_HELPER_H_
12 changes: 9 additions & 3 deletions browser/themes/brave_theme_service.cc
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,18 @@ const ThemeHelper& GetBraveThemeHelper(Profile* profile) {
using BraveThemeHelper = BraveThemeHelperWin;
#endif
// Because the helper is created as a NoDestructor static, we need separate
// instances for regular vs tor/guest profiles.
if (profile->IsTor() || brave::IsGuestProfile(profile)) {
// instances for regular, tor and guest profiles.
if (profile->IsTor()) {
static base::NoDestructor<std::unique_ptr<ThemeHelper>> dark_theme_helper(
std::make_unique<BraveThemeHelper>());
(static_cast<BraveThemeHelper*>(dark_theme_helper.get()->get()))
->SetTorOrGuest();
->set_is_tor();
return **dark_theme_helper;
} else if (brave::IsGuestProfile(profile)) {
static base::NoDestructor<std::unique_ptr<ThemeHelper>> dark_theme_helper(
std::make_unique<BraveThemeHelper>());
(static_cast<BraveThemeHelper*>(dark_theme_helper.get()->get()))
->set_is_guest();
return **dark_theme_helper;
} else {
static base::NoDestructor<std::unique_ptr<ThemeHelper>> theme_helper(
Expand Down
46 changes: 41 additions & 5 deletions browser/themes/theme_properties.cc
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,8 @@ base::Optional<SkColor> MaybeGetDefaultColorForBraveLightUi(int id) {
}
}

const SkColor kDarkToolbar = SkColorSetRGB(0x39, 0x39, 0x39);
const SkColor kDarkFrame = SkColorSetRGB(0x22, 0x22, 0x22);
const SkColor kDarkToolbar = SkColorSetRGB(0x30, 0x34, 0x43);
const SkColor kDarkFrame = SkColorSetRGB(0x0C, 0x0C, 0x17);
const SkColor kDarkToolbarIcon = SkColorSetRGB(0xed, 0xed, 0xed);

base::Optional<SkColor> MaybeGetDefaultColorForBraveDarkUi(int id) {
Expand Down Expand Up @@ -93,8 +93,8 @@ base::Optional<SkColor> MaybeGetDefaultColorForBraveDarkUi(int id) {
}
}

const SkColor kPrivateFrame = SkColorSetRGB(0x1b, 0x0e, 0x2c);
const SkColor kPrivateToolbar = SkColorSetRGB(0x3d, 0x28, 0x41);
const SkColor kPrivateFrame = SkColorSetRGB(0x19, 0x16, 0x2F);
const SkColor kPrivateToolbar = SkColorSetRGB(0x32, 0x25, 0x60);

base::Optional<SkColor> MaybeGetDefaultColorForPrivateUi(int id) {
switch (id) {
Expand Down Expand Up @@ -133,6 +133,37 @@ base::Optional<SkColor> MaybeGetDefaultColorForPrivateUi(int id) {
}
}

const SkColor kPrivateTorFrame = SkColorSetRGB(0x19, 0x0E, 0x2A);
const SkColor kPrivateTorToolbar = SkColorSetRGB(0x49, 0x2D, 0x58);
base::Optional<SkColor> MaybeGetDefaultColorForPrivateTorUi(int id) {
switch (id) {
// Applies when the window is active, tabs and also tab bar everywhere
// except active tab
case ThemeProperties::COLOR_FRAME_ACTIVE:
case ThemeProperties::COLOR_TAB_BACKGROUND_INACTIVE_FRAME_ACTIVE:
return kPrivateTorFrame;
// Window when the window is innactive, tabs and also tab bar everywhere
// except active tab
case ThemeProperties::COLOR_FRAME_INACTIVE:
case ThemeProperties::COLOR_TAB_BACKGROUND_INACTIVE_FRAME_INACTIVE:
return color_utils::HSLShift(kPrivateTorFrame, { -1, -1, 0.55 });
// Active tab and also the URL toolbar
// Parts of this color show up as you hover over innactive tabs too
case ThemeProperties::COLOR_TOOLBAR:
case ThemeProperties::COLOR_TOOLBAR_CONTENT_AREA_SEPARATOR:
case ThemeProperties::COLOR_TAB_BACKGROUND_ACTIVE_FRAME_ACTIVE:
case ThemeProperties::COLOR_TAB_BACKGROUND_ACTIVE_FRAME_INACTIVE:
return kPrivateTorToolbar;
case ThemeProperties::COLOR_TOOLBAR_BUTTON_ICON_INACTIVE:
return color_utils::AlphaBlend(kDarkToolbarIcon,
kPrivateTorToolbar,
0.3f);
// The rest is covered by a private value
default:
return MaybeGetDefaultColorForPrivateUi(id);
}
}

} // namespace

namespace BraveThemeProperties {
Expand All @@ -145,7 +176,8 @@ bool IsBraveThemeProperties(int id) {
} // namespace BraveThemeProperties
// Returns a |nullopt| if the UI color is not handled by Brave.
base::Optional<SkColor> MaybeGetDefaultColorForBraveUi(
int id, bool incognito, dark_mode::BraveDarkModeType dark_mode) {
int id, bool incognito,
bool is_tor, dark_mode::BraveDarkModeType dark_mode) {
// Consistent (and stable) values across all themes
switch (id) {
case ThemeProperties::COLOR_TAB_THROBBER_SPINNING:
Expand All @@ -154,6 +186,10 @@ base::Optional<SkColor> MaybeGetDefaultColorForBraveUi(
break;
}

if (is_tor) {
return MaybeGetDefaultColorForPrivateTorUi(id);
}

// Allow Private Window theme to override dark vs light
if (incognito) {
return MaybeGetDefaultColorForPrivateUi(id);
Expand Down
3 changes: 2 additions & 1 deletion browser/themes/theme_properties.h
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ bool IsBraveThemeProperties(int id);
} // namespace BraveThemeProperties

base::Optional<SkColor> MaybeGetDefaultColorForBraveUi(
int id, bool incognito, dark_mode::BraveDarkModeType dark_mode);
int id, bool incognito,
bool is_tor, dark_mode::BraveDarkModeType dark_mode);

#endif // BRAVE_BROWSER_THEMES_THEME_PROPERTIES_H_
18 changes: 18 additions & 0 deletions browser/ui/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@ source_set("ui") {
"views/download/brave_download_item_view.h",
"views/frame/brave_browser_view.cc",
"views/frame/brave_browser_view.h",
"views/frame/brave_opaque_browser_frame_view.cc",
"views/frame/brave_opaque_browser_frame_view.h",
"views/frame/brave_window_frame_graphic.cc",
"views/frame/brave_window_frame_graphic.h",
"views/reader_mode/brave_reader_mode_icon_view.cc",
"views/reader_mode/brave_reader_mode_icon_view.h",
"views/rounded_separator.cc",
Expand Down Expand Up @@ -157,6 +161,20 @@ source_set("ui") {
"views/translate/brave_translate_icon_view.h",
]
}

if (is_win) {
sources += [
"views/frame/brave_glass_browser_frame_view.cc",
"views/frame/brave_glass_browser_frame_view.h",
]
}

if (is_mac) {
sources += [
"views/frame/brave_browser_non_client_frame_view_mac.mm",
"views/frame/brave_browser_non_client_frame_view_mac.h",
]
}
}

if (is_win || is_mac || is_desktop_linux) {
Expand Down
Loading