1508570 - Improve the design of scrollbar-color's fallback rendering (used on Linux)

Status: NEW

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: scrollbar-color-fallback-design.png

On Linux, scrollbar-color triggers a fallback scrollbar rendering which is basically made of two rectangles: track and thumb.

The main UX issue I'm seeing is that it can be hard to tell, as a user, which part is the track and which part is the thumb. See the attached screenshot:

1. On Windows, the thumb is inset 1px inside the track, or the track has a 1px padding or border, so the track always wraps the thumb visually.
2. On Linux, the track color matches the page background and it looks like the track's background is actually the thumb.

Do we have the ability to style this fallback design?
A 1px padding or border would help disambiguate things.

Comment 1

[Florens Verschelde :fvsch]

Screenshot is from: https://www.smashingmagazine.com/2018/10/tpac-css-working-group-new/

Comment 2

[Xidorn Quan [:xidorn] UTC+11]

Yes, it is styleable internally. I believe you can change the style of scrollbars of Linux in toolkit/themes/windows/global/xulscrollbars.css

This file is shared between all non-Mac platforms, so we need to take care not to regress anything on Windows. But in generally it should be fine, as far as you only change restricted set of properties which are overridden when native theme is enabled. Those properties should include background and border, and probably padding as well.

Comment 3

[Xidorn Quan [:xidorn] UTC+11]

At least nsITheme has DrawWidgetBackground, GetWidgetBorder, and GetWidgetPadding, so those three sets of properties should be pretty safe to use. You should definitely test on other platforms, though. (Custom scrollbar has a relatively strict regression test on number of pixels of different colors when scrollbar-color is used, that may catch the issue if you change the appearance, I suppose.)

Comment 4

[Simonas Kazlauskas [:nagisa/:simukis]]

Still an issue, and now an usability problem now that firefox no longer honours the layout.css.scrollbar-{color,width}.enabled = false property.