SAP
FEATURE - Make scrollbars' design identical in CPE for different browsers
As a developer, I want to the scrollbars (see the picture below) to have the same VS Code-like look independent of environment, so that I have a nicer UI/UX
Description
To have a better product we need to make the scrollbars the same independent of browser (Safari, Chrome, Firefox, Brave, etc), smaller more sophisticated scrollbars will take less space and be more pleasant to the eye.
Acceptance Criteria
GivenWhenThen format (https://martinfowler.com/bliki/GivenWhenThen.html)
Given I have a running CPE when I see the the editor panes then all of them have the exact same scrollbar design
Notes
Tasks
- [ ] CPE's CSS is enhanced (UI Components).
- [ ] Unit Tests added
- [ ] Test Cases defined
Alright, there's two things here as a preamble.
First: there are two different scrollbars even in VS Code. One is in the native VS Code environment (like file browser), and one is in VS Code's webview components.
Screenshots from MacOS:
Second: Native scrollbars are always the best. They functionally work the best (smooth scrolling, ...), users are accustomed to them, and what's more, some users modified scrollbars to suit them (made them bigger, changed behaviour, etc.). Therefore, us touching in some way scrollbars will always make it worse than what natively happens on user's computer.
However, some time ago we have encountered this issue already, but we have for some reason put a pause on it.
The biggest visual issue that happens is the mismatch between user's operating system theme settings (so for example, users could have their OS be Light), and the theme of the editor (for example, users could have CPE be Dark). In this case, browser will render a light scroll bar because OS tells it to do so, but our software looks dark, so it looks bad.
What we should first explore is can we detect what theme user has on OS level, and then initially set CPE to be in that theme. This is possible with prefers-color-scheme CSS media query. ( https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers )
However, that is just part of the problem. Because if users then change CPE theme, there is a chance scrollbars will look bad again. In that case, we should explore is there a way for us to force browser to render dark theme scrollbars if CPE is in dark mode, and vice versa, light+light.
Perhaps this could work → https://www.perplexity.ai/search/in-css-coding-is-it-possible-t-8x5rLGwBSBqZjwY.h7_MFQ
-- @marufrasully
