brave / brave/adblock-rust

`:style()` action operator doesn't work great with some `::-webkit-*` pseudo-classes, if other pseudo classes are used/need in the same rule.

Open
#326 0 comments 0 reactions 0 assignees View on GitHub
uBO-parity
Dominant language
Rust
Stars
2.8k
Forks
250
Avg merge
1d 16h
Merged PRs (30d)
6

Description

Seems like Brave adblocker style operator, doesn't work correctly with some pseudo classes that are 'chained' to further polish the CSS style injection.

I don't know if it is exclusive to `::-webkit-*` pseudo classes, or others could be also affected, I tested some and it seems that the issue was only in the webkit ones.

The problem is that some rules need other pseudo classes to further modify their look and behavior and polish the rule, but they are not parsing in the adblocker .

This means that it will only work with the basic `::-webtki-*:style()` but not when you need anything else like `::-webtki-scrollbar*:pseudoclass:style()` or longer, it doesn't work

I got to examples:

### [::-webkit-slider-thumb](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb)

Add:
```
a11ysupport.io###example-range::-webkit-slider-thumb:hover:style(-webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: #04AA6D; cursor: pointer;)
a11ysupport.io###example-range:hover:style(opacity: 1)
a11ysupport.io###example-range:style(-webkit-appearance: none; width: 100%; height: 25px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s;)
```
go to https://a11ysupport.io/tests/html/html/inputs.html

And you will see how the `:hover` doesn't work, but if you remove the `:hover` it will work fine.

### [::-webkit-scrollbar#css_scrollbar_selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#css_scrollbar_selectors)

This is a more complicated and depth pseudo class and while not a standard CSS it would be nice if it would completely work with the style action operator.

The [webkit - styling-scrollbars](https://webkit.org/blog/363/styling-scrollbars/) page shows the many pseudo classes that can be page, shows how many pseudo classes can be applied to it:
> `:horizontal`, `:vertical`, `:decrement`, `:increment`, `:start`, `:end`, `:double-button`, `:single-button`, `:no-button`, `:corner-present`, `:window-inactive`.

Also it mentions these other ones that can be seen as _more useful_ when styling the scrollbars:
>In addition the `:enabled`, `:disabled`, `:hover` and `:active` pseudo-classes also work with scrollbar pieces.

None of them work.

Add to the adblocker:
```
brave.com##::-webkit-scrollbar:style(width:14px !important; height:14px !important; )
brave.com##::-webkit-scrollbar-track:style(background:black !important)
brave.com##::-webkit-scrollbar-thumb:style(background:cyan !important; border-radius: 0 !important;)
brave.com##::-webkit-scrollbar-thumb:hover:style(background:red !important; )
brave.com##::-webkit-scrollbar-thumb:active:style(background:violet !important; )
brave.com##::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:decrement:style(border-width:0 7px 14px !important; border-color:transparent transparent yellow !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:decrement:hover:style(border-color:transparent transparent green !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:increment:style(border-width:14px 7px 0 !important; border-color:cyan transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:vertical:increment:hover:style(border-color:slateblue transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:decrement:style(border-width:7px 14px 7px 0 !important; border-color:transparent coral transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:decrement:hover:style(border-color:transparent gold transparent transparent !important; )
brave.com##::-webkit-scrollbar-button:single-button:horizontal:increment:style(border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent brown !important; )
brave.com##::-webkit-scrollbar-button:horizontal:increment:hover:style(border-color:transparent transparent transparent navajowhite)
```

Now, compare it to the same but 'real' CSS:

```
::-webkit-scrollbar {width:14px !important; height:14px !important; }
::-webkit-scrollbar-track {background:black !important}
::-webkit-scrollbar-thumb {background:cyan !important; border-radius: 0 !important;}
::-webkit-scrollbar-thumb:hover {background:red !important; }
::-webkit-scrollbar-thumb:active {background:violet !important; }
::-webkit-scrollbar-button {border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; }
::-webkit-scrollbar-button:single-button:vertical:decrement {border-width:0 7px 14px !important; border-color:transparent transparent yellow !important; }
::-webkit-scrollbar-button:single-button:vertical:decrement:hover {border-color:transparent transparent green !important; }
::-webkit-scrollbar-button:single-button:vertical:increment {border-width:14px 7px 0 !important; border-color:cyan transparent transparent !important; }
::-webkit-scrollbar-button:single-button:vertical:increment:hover {border-color:slateblue transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:decrement {border-width:7px 14px 7px 0 !important; border-color:transparent coral transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:decrement:hover {border-color:transparent gold transparent transparent !important; }
::-webkit-scrollbar-button:single-button:horizontal:increment {border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent brown !important; }
::-webkit-scrollbar-button:horizontal:increment:hover {border-color:transparent transparent transparent navajowhite}
```

You will notice how most rulees didn't work, only 4 of the 14 rules worked fine, and only these ones will work:

```
brave.com##::-webkit-scrollbar:style(width:14px !important; height:14px !important; )
brave.com##::-webkit-scrollbar-track:style(background:black !important)
brave.com##::-webkit-scrollbar-thumb:style(background:cyan !important; border-radius: 0 !important;)
brave.com##::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: blue !important; )
```

I don't know if more pseudo classes are affected, I tested some like `::placeholder` and ::first-letter with `:hover` and they seemed to work okay? so might be just the webkit having issues or something, so I just included them in this post since I can 'prove' they are incompatible with Brave adblocker at the moment.

Hope it can be fixed, might not be seen as something too important, but any fix and issue should be resolved so it works if anyone needs it, at least the scrollbar can be useful, even if Chromium is adding in 121, support for [CSS Scrollbars: scrollbar-color, scrollbar-width](https://chromestatus.com/feature/5665308343795712), it still won't do anything like the `::-webkit-scrollbar` can do.

Thank you.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the listed `:style()` rules for `::-webkit-slider-thumb` and `::-webkit-scrollbar` pseudo-classes in Brave's adblocker, comparing them with the equivalent CSS. Trace how the style action operator parses chained pseudo-classes. Done means the affected chained rules apply consistently, including the hover, active, orientation, and scrollbar cases shown.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, rust
Domain
backend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.