Bug 444203 - hovered/active scrollbar and its trough are too similar in luminosity
Summary: hovered/active scrollbar and its trough are too similar in luminosity
Status: RESOLVED FIXED
Alias: None
Product: Breeze
Classification: Unclassified
Component: QStyle (show other bugs)
Version: 5.23.1
Platform: Neon Packages Linux
: NOR minor
Target Milestone: ---
Assignee: Plasma Bugs List
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2021-10-21 16:06 UTC by S. Christian Collins
Modified: 2021-12-02 18:08 UTC (History)
2 users (show)

See Also:
Latest Commit:
Version Fixed In: 5.23.4


Attachments
screenshot of scrollbars in LibreOffice (42.47 KB, image/png)
2021-10-21 16:06 UTC, S. Christian Collins
Details
explanatory image (285.75 KB, image/png)
2021-10-21 18:37 UTC, S. Christian Collins
Details
explanatory image (374.59 KB, image/png)
2021-10-21 18:40 UTC, S. Christian Collins
Details
comparison between 0.3 and 0.2 groove opacity (565.77 KB, application/zip)
2021-11-22 06:18 UTC, S. Christian Collins
Details

Note You need to log in before you can comment on or make changes to this bug.
Description S. Christian Collins 2021-10-21 16:06:25 UTC
Created attachment 142729 [details]
screenshot of scrollbars in LibreOffice

SUMMARY
When the mouse cursor is over a scrollbar, the luminosity values of the scrollbar (80) and its trough (84) are very similar, making it a bit uncomfortable to look at, especially for those who are color blind. Making the trough a bit lighter--or more accurately, closer to the window background color--solves the issue, at least for the default Breeze, Breeze Light and Breeze Dark color schemes (I haven't tried others). This applies to sliders as well.

Please see my video on this for a demonstration and solution mockup: https://youtu.be/LYCOKBBucHE

Furthermore, in applications with incomplete theming support, such as LibreOffice, the scrollbar trough shows even when the scrollbar is not hovered/active, making the scrollbar position difficult to see on casual glance. See attached screenshot.

SOFTWARE/OS VERSIONS
OS: KDE Neon 5.23 User Edition
Plasma Desktop 5.23.1
KDE Frameworks 5.87.0
Qt 5.15.3
Comment 1 Nate Graham 2021-10-21 17:22:33 UTC
This is actually a styling bug in LibreOffice. The trough is only supposed to be visible on hover, upon which the visual similarity is resolved by the bar turning blue. You can see that it works properly in KDE apps, but it doesn't seem to be working in LibreOffice; can you file a bug for them at https://bugs.documentfoundation.org/? Thanks!
Comment 2 S. Christian Collins 2021-10-21 17:31:42 UTC
Nate, I'm reopening this report since it isn't actually about the LibreOffice theming issue (I just used LibreOffice as an example of the contrast issue at its worst).
Comment 3 Nate Graham 2021-10-21 17:40:27 UTC
How is it not about LibreOffice's own theming issue? The issue isn't happening in any other KDE apps, is it? Can you attach a screenshot of a non-LibreOffice example of the problem
Comment 4 S. Christian Collins 2021-10-21 18:01:57 UTC
The issue is best explained by the video I linked, but I can work up an explanatory image if needed.
Comment 5 Nate Graham 2021-10-21 18:22:36 UTC
Thanks for the video. I admit I only looked at the attachment. My bad.

I see what you mean now when it comes to colorblind users. That's a legitimate issue. The colors of the bar and the track are also quite similar when you hover the cursor over the track (not the bar). Perhaps we can lighten the track a bit.
Comment 6 S. Christian Collins 2021-10-21 18:37:15 UTC
Created attachment 142740 [details]
explanatory image

I've distilled the video explanation into image form here. I wish bugzilla could do markdown text with inline image references, but alas, this will have to suffice :)
Comment 7 S. Christian Collins 2021-10-21 18:40:56 UTC
Created attachment 142741 [details]
explanatory image

(fixed the image margins)
Comment 8 Noah Davis 2021-10-21 20:24:57 UTC
Yes, I agree. We should probably make the groove a bit lighter and always use blue for the handle when hovered.
Comment 9 S. Christian Collins 2021-11-22 06:18:38 UTC
Created attachment 143822 [details]
comparison between 0.3 and 0.2 groove opacity

Changing the groove opacity from 0.3 to 0.2 in breezestyle.cpp (lines 5201, 6711, 6810, and 6905) resolves this issue nicely, IMO. This attachment contains screenshots for comparison, alphabetized so you can use the left/right arrow keys in Gwenview to quickly toggle between the before and after shots.

Please note the following:
* The scrollbar as well as the slider and progress bar at the bottom of the window are affected by the adjustment.
* The dark theme really benefits from this adjustment, as the grooves were too bright before.
* The scrollbar now has better visibility in applications that fail to hide the scrollbar groove when not hovered/active, as you can see in the LibreOffice screenshot.

If it is agreed that this is an improvement, let me know if you'd like me to submit a pull request with these changes. The Breeze Plasma theme would also need to be adjusted accordingly, as it suffers from the same contrast issue.
Comment 10 Nate Graham 2021-11-22 22:46:08 UTC
It looks good to me. Please feel free to submit a merge request at https://invent.kde.org/plasma/breeze/-/merge_requests/. Make sure to put "BUG: 444203" on its own line in the commit message.

The Breeze Plasma theme uses SVGs instead of drawing the scrollbars in code. The assets can be found here: https://invent.kde.org/frameworks/plasma-framework/-/blob/master/src/desktoptheme/breeze/widgets/scrollbar.svg

You would probably also want to update slider.svg to match it.
Comment 11 Bug Janitor Service 2021-11-23 15:51:11 UTC
A possibly relevant merge request was started @ https://invent.kde.org/plasma/breeze/-/merge_requests/162
Comment 12 S. Christian Collins 2021-11-23 18:50:09 UTC
Git commit 25933f8371ae2e188671947a6ffb477926af5214 by S. Christian Collins.
Committed on 23/11/2021 at 18:44.
Pushed by ndavis into branch 'master'.

Reduce groove opacity for greater contrast with scrollbar/slider/etc.

M  +4    -4    kstyle/breezestyle.cpp

https://invent.kde.org/plasma/breeze/commit/25933f8371ae2e188671947a6ffb477926af5214
Comment 13 Noah Davis 2021-11-23 18:50:39 UTC
Git commit dc4236dab2999209f1574dae83e8eb001cf77608 by Noah Davis, on behalf of S. Christian Collins.
Committed on 23/11/2021 at 18:50.
Pushed by ndavis into branch 'Plasma/5.23'.

Reduce groove opacity for greater contrast with scrollbar/slider/etc.


(cherry picked from commit 25933f8371ae2e188671947a6ffb477926af5214)

M  +4    -4    kstyle/breezestyle.cpp

https://invent.kde.org/plasma/breeze/commit/dc4236dab2999209f1574dae83e8eb001cf77608
Comment 14 S. Christian Collins 2021-12-02 14:53:08 UTC
Nate, I've created a matching update to the plasma theme, but the plasma-framework GitLab site does not allow the creation of new merge requests (https://invent.kde.org/frameworks/plasma-framework/-/merge_requests). How can I go about submitting this update?
Comment 15 Nate Graham 2021-12-02 18:08:23 UTC
Through the command line, probably. See https://community.kde.org/Infrastructure/GitLab#Submitting_a_merge_request.

Thanks for doing this, BTW!