[::-webkit-scrollbar*] Add support for pseudo classes

[krystian3w]

CSS pseudo classes for: ::-webkit-scrollbar*

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

Description

CSS pseudo element: ::-webkit-scrollbar* #89 (comment)

Some sites use very simple version of -webkit-scrollbar without stylize ::-webkit-scrollbar-button so is invisible with used Chromium.

AdGuard and Stylus can stylize this element (-webkit-scrollbar-button) with someting like:

example.*##*::-webkit-scrollbar:style(width:14px !important; height:14px !important;)

example.*##*::-webkit-scrollbar-track:style(background:#ffffff !important; #b0b0b1 !important;)
example.*##*::-webkit-scrollbar-thumb:style(background:#404040 !important; border-radius: 0 !important;)

example.*##*::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: #ffffff !important; )

example.*##*::-webkit-scrollbar-button:single-button:vertical:decrement:style(border-width:0 7px 14px !important; border-color:transparent transparent #404040 !important; )

example.*##*::-webkit-scrollbar-button:single-button:vertical:increment:style(border-width:14px 7px 0 !important; border-color:#404040 transparent transparent !important; )

example.*##*::-webkit-scrollbar-button:single-button:horizontal:decrement:style(border-width:7px 14px 7px 0 !important; border-color:transparent #404040 transparent transparent !important; )

example.*##*::-webkit-scrollbar-button:single-button:horizontal:increment:style(border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent #404040 !important; )

But uBO fail if we combine with pseudo classes:

• :single-button
• :horizontal
• :vertical
• :increment
• :decrement

and:

• :hover
• :active
• :focus

A specific URL where the issue occurs

e.g:

vod.naekranie.pl

farmacja.net
jaguar.pl
progrupa.com
seniorka-z-plecakiem.pl
semcamp.university
sparta.com.pl

Steps to Reproduce

1. Open some of page with have customized scroll with -webkit-scrollbar
2. copy demo filters with change example.* to your opened domain
3. save filters, refresh page

Expected behavior:

Consider add detect pseudo classes for ::-webkit-scrollbar* "pseudo" elements as valid.

document.querySelector may no see elements:

var style = getComputedStyle(document.querySelector('::-webkit-scrollbar-button:single-button:vertical:decrement'), null);	
console.log(style.getPropertyValue('backgorund-color'));	

It seems to be just a idea forced in Chromium as a "visionary". This may be the reason for rejecting filters because of the zero practical need to reset/restylish elements on the pages from the Internet.

Actual behavior:

CSS filters ::-webkit-scrollbar* marked as invalid due detect pseudo classes.

Your environment

• uBlock Origin version: 1.29.2
• Browser Name and version: Chrome 85
• Operating System and version: Windows 10

[krystian3w]

https://old.reddit.com/r/uBlockOrigin/comments/izk51s/inject_css/

someone tried repair YouTube with:

*##html::-webkit-scrollbar:style(width:8px;height:8px;) 
*##html::-webkit-scrollbar-corner:style(background:none;) 
*##html::-webkit-scrollbar-thumb:style(background:#7D7D7D;) 
*##html::-webkit-scrollbar-track:style(opacity:0;)

[gorhill]

*##::-webkit-scrollbar:style(width:8px;height:8px;)

I can trivially fix to support ##::-webkit-scrollbar:style(...), however this breaks the code which logs cosmetic filters, and who knows where else, so this will have to wait for next dev cycle.

[gorhill]

Is this still an issue?

[uBlock-user]

Still can't use ##::-webkit-scrollbar:style(overflow:scroll !important)

[gorhill]

Can I have a URL to test this?

---

Also, I don't understand the purpose of -webkit-scrollbar:style(overflow:scroll !important).

[uBlock-user]

https://cheatsquad.gg/csgo in Chromium, disable uBlock Annoyances list if you have it enabled.

[uBlock-user]

I don't understand the purpose of -webkit-scrollbar:style(overflow:scroll !important).

To bring back the scrollbar which was hidden in uBlockOrigin/uAssets#9672

[gorhill]

Ok, -webkit-scrollbar:style(overflow:scroll !important) is not at all what you want. You want to counter the scrollbar styling by the site, not whether the area is scrollable or not.

With 1.38.7b7, the foollowing filters are parsed as invalid:

cheatsquad.gg##::-webkit-scrollbar:style(width:12px!important;height:12px!important;)
cheatsquad.gg##::-webkit-scrollbar-thumb:style(background:#aaa!important;)

With 1.38.7b8, they are parsed as valid and work to restore the scroll bars.

[uBlock-user]

With 1.38.7b8, they are parsed as valid and work to restore the scroll bars.

They're still seen as invalid on 1.38.7b8 in my filters.

[gorhill]

Right, sorry I didn't realize a few local changes made the difference.

[uBlock-user]

Ok, -webkit-scrollbar:style(overflow:scroll !important) is not at all what you want. You want to counter the scrollbar styling by the site, not whether the area is scrollable or not.

According to https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar if overflow:scroll is not set, scrollbar is not displayed, that's why I tried to use that.