Themes and "scrollbar-width: thin"

Add-ons for Pale Moon and other applications
General discussion, compatibility, contributed extensions, themes, plugins, and more.

Moderators: FranklinDM, Lootyhoof

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-01-07, 08:58

Would it be possible to add a class or attribute to "thin" scrollbars to allow full themes to support the feature?

Right now, other than the "scrollbar-width: thin" style property in the scrollbars' parent object, there's no elemental difference between normal and thin scrollbars, which makes providing support in a theme via CSS file a no-go.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by Moonchild » 2022-01-07, 12:06

We don't really have time to look into that kind of enhancement at the moment.
But you're welcome to look at the source and offer improvements.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-01-10, 19:06

Here's what I came up with: Add "scrollbarwidth" Attribute to scrollbars.

It would also be possible to set an attribute only on "thin", but I figured for future compatibility with the scrollbar-width CSS directive, all values should be represented in the attribute.

If there are any issues with the attribute name or values, please let me know.
Last edited by RealityRipple on 2022-01-10, 21:13, edited 1 time in total.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by Moonchild » 2022-01-10, 19:39

Oh that's rather painless of a change. I'll drop that in. Thanks!
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-01-11, 01:48

Hmm... thinking maybe it'd be helpful to add any scrollcorner and resizer children to the "add an attribute to" list. It's just a matter of adding mResizerContent and mScrollCornerContent "if" blocks in the "isResizable" if statement and "canHaveHorizontal & canHaveVertical" if statement respectively. I'll include it in the linked branch above for your consideration.

I thought CSS would be able to use the ~ sibling selector to apply to those objects, but it doesn't seem to be functioning. Maybe an XUL-specific thing?

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by Moonchild » 2022-01-11, 06:11

Are you using the sibling selector correctly? Because it should most certainly work.

Code: Select all

former_element ~ target_element { style properties }
e.g.

Code: Select all

scrollbar ~ scrollcorner { style }
to style scrollcorner elements with style when they appear as siblings to scrollbar
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-01-11, 17:38

Yep. I tried both "scrollbar[scrollbarwidth="thin"] ~ scrollcorner" and "scrollbar[scrollbarwidth="thin"] + scrollcorner" (also "~ resizer") and neither even showed up in the active style rules in DOM Inspector, let alone applying the style I wanted.

Here's the exact code I'm using to test it:

Code: Select all

scrollcorner
{
 background-color: #FF0000;
}
scrollbar:not([scrollbarwidth="thin"]) ~ scrollcorner
{
 background-color: #000000 !important;
}
scrollbar[scrollbarwidth="thin"] ~ scrollcorner
{
 background-color: transparent !important;
}
The corners of boxes with horizontal and vertical scrollbars only ever show up red, never black or transparent. The first ruleset is the only one that shows up in the DOM Inspector, as though the other two rules are somehow invalid CSS.

Just tried:

Code: Select all

scrollcorner
{
 background-color: #FF0000;
}
scrollbar ~ scrollcorner
{
 background-color: #00FF00 !important;
}
Still showed up red, not green.

Also, adding scrollbarwidth to the scrollbarcorner and resizer elements makes the CSS a bit cleaner.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by Moonchild » 2022-01-11, 19:50

Hm.
Well if it's a real headache otherwise, I'm indifferent about adding a few more attributes - but please make sure you have everything covered this time -- I'd rather not go back a third time ;)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-01-11, 20:01

There aren't any other elements directly related to scrollbars, and modifying the parent would make the attribute visible to content scripts, so... yeah, no further changes that I can discern.

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Attention Themes Developers: v30 Change

Unread post by RealityRipple » 2022-03-22, 22:19

Just to be clear, this setup only exists in Pale Moon and anything that uses the GRE/UXP released with v30 or newer, and never existed in Firefox. However, it's very simple:

Essentially all scrollbars and scrollbar-adjacent resizers/scrollcorners now have an XUL attribute called "scrollbarwidth" which can have one of three values: "none", "thin", or "auto". Most will be "auto". For any scrollbars that are not auto, though, your theme will control whether the browser has support for the scrollbar-width CSS directive while a user is using your theme (from Pale Moon 30 onwards). I can not direct how you should modify your theme to allow for thin scrollbars and resizers, but I can offer a few tips:
  • I found it helpful to create a scrollbar-thin XML file binding that lacks arrows so I didn't have to worry about them.
  • At present thin scrollbars will be seen almost exclusively in HTML content. However, they may make their way into the browser UI, so account for that possibility if necessary.
  • A thickness of about 5px and a border radius of half that, made of a single solid passive color, seems to be the most professional approach; but you may want to adjust that to fit your theme's purpose.
  • Resizer/scrollcorner objects will have the same attribute as their neighboring scrollbars. Since the CSS directive applies to an object with scrollbars and not the scrollbars themselves, there will never be an instance where a horizontal scrollbar and a vertical scrollbar of the same scroll-space have different attributes.
  • Scrollbars with a "none" attribute will usually be hidden by other means, but you can treat them as "auto" scrollbars to no adverse effect.
  • Additional options other than "thin" may develop in time, so try to write as though "thin" and "none" are both specific options while "auto" is the default and fallback.
  • See the posts above related to the neighbor CSS selectors and why you should use scrollcorner and resizer objects' scrollwidth attribute directives instead of relying on a previous-sibling-scrollbar's scrollwidth attribute.

User avatar
RealityRipple
Astronaut
Astronaut
Posts: 647
Joined: 2018-05-17, 02:34
Location: Los Berros Canyon, California
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by RealityRipple » 2022-04-12, 08:09

BTW, Moonchild, the devtools scrollbars are a giant mess, and even though they use a kludge to create smaller sized ones, they expect to be exactly 10px and have special classed divs to make them float and all that. TBH, the floating thing always bugged me (who's idea was it to cover up content with interface elements?) but making any major changes might cause all kinds of other headaches. Lemme know if you want to try to do anything here post-v31 and I can try to see what's possible. Or if you wanna leave it alone entirely, that works too.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35474
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Themes and "scrollbar-width: thin"

Unread post by Moonchild » 2022-04-12, 12:12

Just leave the devtools alone. It's a hot mess and it'll just have to be "as-is".
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Goodydino
Keeps coming back
Keeps coming back
Posts: 820
Joined: 2017-10-10, 21:20

Re: Themes and "scrollbar-width: thin"

Unread post by Goodydino » 2022-04-13, 20:05

If you are using a third-party theme and you want to change the width of the scrollbars, you can edit global > scrollbars.css and set the widths of the slider and the thumb to whatever you want. If images are used to create some scrollbar components, you would also have to edit images in global > scrollbar.

Locked