piroor/treestyletab

TST is barely useable with dark themes due to light-on-white scrollbar

Closed this issue · 10 comments

v-fox commented

Short description

When dark browser and/or system theme is used TST keeps its scrollbar as lightgrey-on-white-background making its position almost invisible. Pop up menu of "new tab" button is also always kept as black-text-on-white-background unlike all the other pop up menus in the browser. Settings of TST itself doesn't seem to affect it at all, even putting custom CSS.

However, this can be worked around with:
browser.in-content.dark-mode=true
widget.content.allow-gtk-dark-theme=true
widget.content.gtk-theme-override=<used gtk theme>

BUT this breaks stupid web-sites that hardcode either text colour or background colour and not both, which is most of the sites, even wikipedia.

Steps to reproduce

  1. Start Firefox with clean profile.
  2. Install TST.
  3. Set dark gtk theme in system.
  4. Set dark FF theme.
  5. Set "Plain Dark" and "Apply Browser Theme"

Expected result

Visible scrollbar.

Actual result

Invisible scrollbar.

Environment

  • Platform (OS): openSUSE Tumbleweed 20190829 GNU/Linux
  • Version of Firefox: 68.0.1
  • Version (or revision) of Tree Style Tab: 3.1.7

Could you add a screenshot which describes the problem? Multiple screenshots to compare different settings may help my understanding.

v-fox commented

@piroor Here's default FF look with dark theme:
TST_default
Scrollbar position is almost invisible.
And here's one after widget.content.allow-gtk-dark-theme=true & widget.content.gtk-theme-override=Vertex-Dark and FF restart:
TST_gtk-override
Scrollbar position is clear but those settings break sites.

Thanks! I've understood how the visibility of the scrollbar bad with the default configuration.

Basically the color scheme of the scrollbar in the sidebar is under control of Firefox itself, and I think we addon authors should be careful about coloring of GUI elements, because they possibly become invisible for color blind people. This is the largest reason why I don't apply colors to scrollbars by default.

And customized colors of the sidebar scrollbar colors of the sidebar scrollbar can be customized with a user CSS rule like:

#tabbar {
  scrollbar-color: white black !important;
}

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

I think this should become a workaround for people who are suffered from less-visible colors.

v-fox commented

@piroor Thanks for the tip on the workaround. But I hope that in future TST would at least apply its own appropriate colours, when browser's theme is not enforced in its settings, and strictly use browser theme's colour, when it is forced. It's not supposed to be light-on-white in the theme either. And colour-blind are not supposed to be blind to contrast.

FF's handling of scrollbars seems broken and inconsistent in general: sometimes it's from the site, sometimes from browser's theme, sometimes from gtk theme. But not as broken as in TST: even when colours are ugly and inconsistent elsewhere, they at least visible.

Thank you for suggestion, but I'm still negative to specify colors of general UI elements like scrollbars. I believe that the most important point of GUI is the consistency. I believe that all scrollbars provided by the OS itself, by Firefox, and by web contents should be rendered in the same color scheme, to minimize user's confusion. This is my general policy around GUI design.

@piroor I think you should close this at this point in time.

v-fox commented

@irvinm Do you now ? Was it fixed in either addon or FIrefox to work without workarounds right after installation ?

@v-fox I am only suggesting to close it as there doesn't appear to be anything that @piroor is inclined to do on this issue based on his GUI design philosophy and the fact that there is a workaround. @piroor did not close this item (he closed several others), so maybe there is something more he is considering.

I've realized that Firefox shows in-content scrollbars with dark colors when the "Dark" theme is applied by the platform (Windows 10), as this screenshot:
image
After inspection I've realized that it is produced by a special CSS declaration -moz-appearance: scrollbar-vertical for a XUL <scrollbar> element. It couldn't be applied for the scrollbar in the sidebar, but I think this is an evidence that Firefox accepts dark scrollbars in its UI. So now there is no reason to reject this proposal.

Screenshot after the commit 9261eff:
image