Text in tabs, bookmarks bar and back/forward, reload, home icons change from black to white depending on background color
Reported by
chimak...@gmail.com,
Mar 29 2017
|
|||||||||||
Issue description
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3053.3 Safari/537.36
Steps to reproduce the problem:
1. Set bg_color in my gtk3 theme's gtk.css to #808080. Color of text in tabs, bookmarks bar and the color of back/forward, reload, home icons is black.
2. Set bg_color to #797979, and all of the above turn white.
3.
What is the expected behavior?
I would hope that the user be allowed to decide the foreground color and background color. Such gtk.css settings are obeyed by other gtk3 applications.
What went wrong?
It is not possible for the user to determine colors of the background without foreground colors automatically "inverting" if a darker shade than #808080 is used.
Did this work before? N/A
Chrome version: 59.0.3053.3 Channel: dev
OS Version: Lubuntu 16.04
Flash Version: 25.0.0.143 /home/vasa1/.config/google-chrome-unstable/PepperFlash/25.0.0.143/libpepflashplayer.so
My gtk.css contents
/* default color scheme */
@define-color bg_color #808080;
@define-color fg_color #000000;
@define-color base_color #000d1a; /* address bar bg color*/
@define-color text_color #888888;
@define-color selected_bg_color #30424A; /* color of bookmark star*/
@define-color selected_fg_color #f07746; /* color of highlighted text in bookmarks & settings dropdown*/
@define-color tooltip_bg_color #222222;
@define-color tooltip_fg_color #f07746;
/* colormap actually used by the theme, to be overridden in other css files */
@define-color theme_bg_color @bg_color;
@define-color theme_fg_color @fg_color;
@define-color theme_base_color @base_color;
@define-color theme_text_color @text_color;
@define-color theme_selected_bg_color @selected_bg_color;
@define-color theme_selected_fg_color @selected_fg_color;
@define-color theme_tooltip_bg_color @tooltip_bg_color;
@define-color theme_tooltip_fg_color @tooltip_fg_color;
/* shadow effects */
@define-color light_shadow #001b33;
@define-color dark_shadow #001b33;
/* misc colors used by gtk+ */
@define-color info_bg_color rgb (252, 246, 202);
@define-color info_fg_color rgb (50, 49, 40);
@define-color warning_bg_color rgb (250, 173, 61);
@define-color warning_fg_color rgb (50, 34, 12);
@define-color question_bg_color rgb (57, 142, 231);
@define-color question_fg_color rgb (215, 232, 250);
@define-color error_bg_color rgb (237, 54, 54);
@define-color error_fg_color rgb (251, 214, 214);
@define-color link_color #2d71b8;
@define-color success_color #4e9a06;
@define-color warning_color #f57900;
@define-color error_color #cc0000;
/* widget colors */
@define-color titlebar_bg_color @theme_bg_color;
@define-color titlebar_fg_color @theme_fg_color;
@define-color menubar_bg_color @theme_bg_color;
@define-color menubar_fg_color @theme_fg_color;
@define-color toolbar_bg_color @theme_bg_color;
@define-color toolbar_fg_color @theme_fg_color;
@define-color menu_bg_color shade(@theme_bg_color, 1.18);
@define-color menu_fg_color @theme_fg_color;
@define-color panel_bg_color #686868;
@define-color panel_fg_color #FF3007;
/* osd */
@define-color osd_base #333;
@define-color osd_fg #eee;
@define-color osd_bg alpha(@osd_base, 0.8);
/* window manager colors */
@define-color wm_bg_a shade(@titlebar_bg_color, 1.07);
@define-color wm_bg_b @titlebar_bg_color;
@define-color wm_title_focused mix(@titlebar_fg_color, @titlebar_bg_color, 0.3);
@define-color wm_title_focused_shadow shade(@titlebar_bg_color, 1.1);
@define-color wm_title_unfocused mix(@titlebar_fg_color, @titlebar_bg_color, 0.6);
@define-color wm_title_unfocused_shadow shade(@titlebar_bg_color, 1.05);
@define-color wm_border_focused shade(@titlebar_bg_color, 0.7);
@define-color wm_border_unfocused shade(@titlebar_bg_color, 0.8);
/* lightdm greeter color scheme */
@define-color lightdm_bg_color #f9f9f9;
@define-color lightdm_fg_color #3c3c3c;
@import url("gtk-widgets.css");
@import url("gtk-widgets-assets.css");
@import url("apps/gnome-applications.css");
@import url("apps/granite-widgets.css");
@import url("apps/unity.css");
@import url("apps/xfce.css");
@import url("apps/lightdm-unity-greeter.css");
@import url("apps/lightdm-gtk-greeter.css");
@import url("apps/synaptic.css");
,
Mar 29 2017
Thanks for your speedy response! I know you want to avoid a situation in which users mistakenly use such similar colors for fg and bg that they can't see the wood for the trees. But could your criteria for inversion please be a *little* more relaxed if not totally left to the user in a "you break it and get to keep the pieces" sense? Overall, this issue apart, the gtk3 version looks great.
,
Mar 29 2017
I'm not sure which of those is the proper solution. Historically, we haven't trusted gtk themes because the wide array of gtk2 themes contained a lot of brokenness, and we had to step in and say "these values are bogus, we're picking different ones" or else we'd have situations like invisible text. This was common because (among other things) people would specify image backgrounds which had radically different colors from the bg_color--their text color would look fine on the image, but look cruddy on the bg_color. Tom, whether you expand the usage of GetReadableColor or get rid of it from the toolbar should probably come down to how you feel about the situation with the current prevalence of image backgrounds. I haven't really looked into the theming situation since the gtk2->gtk3 switchover.
,
Mar 30 2017
I'm posting a small image of a table containing black text with varying shades of grey as cell background color. I've included bg_color #797979 and #808080 which is where I get the inversion. I have no experience of image backgrounds.
,
Mar 30 2017
I actually haven't come across any themes that use background images that are not simple gradients, so I guess we can remove GetReadableColor See the attached videos for how removing GetReadableColor would affect things. Actually, now I remember the reason I added that in the first place: the "Blue-Submarine" theme on 3.20 would use a dark label on a dark toolbar (and this is the color that it actually uses for toolbar text, so is a bug).
,
Mar 30 2017
So, looking at Blue-Submarine (and Green-Submarine), why isn't the tab area painted light blue and light green, respectively? That seems like it might be the real bug here.
,
Mar 30 2017
Originally it was because tabs are attached to the toolbar, and so are forced to use the same color. Blue-Submarine uses a dark toolbar color (see pic). However, changing the tab/toolbar color to be the window background color actually gives really nice results! I think we should use this instead
,
Mar 30 2017
sgtm!
,
Mar 30 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/b7e79b92a27126f02c478e332c3df9c4255df71b commit b7e79b92a27126f02c478e332c3df9c4255df71b Author: thomasanderson <thomasanderson@google.com> Date: Thu Mar 30 21:49:38 2017 Gtk3: Use Gtk window bg color as Chrome toolbar color This CL: * Removes all usage of GtkToolbar, and instead uses the window background. * Removes all usage of GetReadableColor. (see https://crbug.com/706448 for context) * Changes throbber colors slightly, such that the throbber waiting color is different from the throbber spinning color, like it was on the Gtk2 theme. BUG= 706448 R=erg@chromium.org Review-Url: https://codereview.chromium.org/2784413002 Cr-Commit-Position: refs/heads/master@{#460896} [modify] https://crrev.com/b7e79b92a27126f02c478e332c3df9c4255df71b/chrome/browser/ui/libgtkui/gtk_ui.cc [modify] https://crrev.com/b7e79b92a27126f02c478e332c3df9c4255df71b/chrome/browser/ui/libgtkui/native_theme_gtk3.cc
,
Mar 30 2017
,
Mar 31 2017
Thank you! |
|||||||||||
►
Sign in to add a comment |
|||||||||||
Comment 1 by thomasanderson@chromium.org
, Mar 29 2017Cc: e...@chromium.org
Owner: thomasanderson@chromium.org
The reason this is happening is the text color doesn't have enough contrast against the toolbar color, so it's getting inverted. The code for that is: SkColor toolbar_color = GetBgColor("GtkToolbar#toolbar"); SkColor toolbar_text_color = color_utils::GetReadableColor( GetFgColor("GtkToolbar#toolbar GtkLabel#label"), toolbar_color); +erg We don't use GetReadableColor for the entry foreground color. So it seems like we should either: 1. remove GetReadableColor from the toolbar 2. add GetReadableColor in all other places where there's a foreground/text color and bg color pair wdyt?