Firefox breaks my desktop environment's scrollbar style and (gradient) color and in version 98+ refuses css to approximate it
I work on kubuntu 20.04 with plasma 5.18.8 desktop environment. I have a QtCurve-based custom application style, which I almost match with css for GTK apps. Firefox has t… (read more)
I work on kubuntu 20.04 with plasma 5.18.8 desktop environment. I have a QtCurve-based custom application style, which I almost match with css for GTK apps. Firefox has to be an exception by itself! Not only that, but it changes my ability to customize its interface, from time to time and even changes access to such ability, on some updates.
My scrollbar customizations in userChrome.css and userContent.css do not work any more (other CSS changes still work, for menu/addressbar/tabbar/bookmarksbar orderint and tab styling). I had to resort to settings in user.js file, to get a 20px width scrollbar, suitable for my big screen, but... it gets very wide when I increase the focus, on some webpages and becomes very ugly! Furthermore, I cannot make sense of the proper use of "ui.themedScrollbar*" settings and the scrollbar and its slider result in the same color. These are my settings in user.js:
user_pref("widget.content.gtk-theme-override", "backwater"); user_pref("widget.non-native-theme.enabled", false); // Use GTK-3.0 gtk.css: set to false user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true); // Use userChrome.css & userContent.css: set to true user_pref("widget.gtk.alt-theme.scrollbar_active", true); user_pref("widget.non-native-theme.scrollbar.size.override", 20); // If nothing else works, fix scrollbar width to 20px user_pref("widget.non-native-theme.gtk.scrollbar.round-thumb", false); user_pref("widget.non-native-theme.gtk.scrollbar.thumb-size", 1.0); // originally 0.75 user_pref("widget.non-native-theme.gtk.scrollbar.allow-buttons", true); // it was true, anyway... user_pref("layout.css.cached-scrollbar-styles.enabled", false); user_pref("layout.css.color-mix.enabled", true); user_pref("widget.non-native-theme.scrollbar.style", 4); // wide scrollbar theme: set to 4 user_pref("ui.themedScrollbar", "#bad1f5"); user_pref("ui.themedScrollbarInactive", "#668cc4"); user_pref("ui.themedScrollbarThumb", "#e4e4e4"); user_pref("ui.themedScrollbarThumbHover", "#e4e4e4"); user_pref("ui.themedScrollbarThumbActive", "#668cc4"); user_pref("ui.themedScrollbarThumbInactive", "#bad1f5"); user_pref("browser.dom.window.dump.enabled", false); user_pref("extensions.ui.sitepermission.hidden", false); user_pref("fission.experiment.max-origins.qualified", true);
Either with the "ui.themedScrollbar*" settings or without them (and cleared from the prefs.js file), the scrollbar and its slider result in the same color, unless I (tryingly) click on some place on the scrollbar outside its slider; then I can see the slider, _only_ for the duration of the mouse-down event (which causes up or down page-hight scrolling).
The default, very thin scrollbar, as well as my modified wide scrollbar with invisible slider are both useless to me! I have even tried fx-autoconfig (https://github.com/MrOtherGuy/fx-autoconfig) to make the scrollbar CSS work, but no result. At this point, I am considering switching to another browser, despite the trust I have to mozilla, for my data and privacy.