Branding on 4pda.ru

[hant0508]

URL(s) where the issue occurs

4pda.ru

Describe the issue

There's branding in the background and an ad banner in the right sidebar. Non of the regional filter lists help.

Screenshots

How the website looks now: How it should look:

Versions

• Browser/version: Mozilla Firefox 53.0.2 on Debian GNU/Linux
• uBlock Origin version: 1.12.5.b2

[kasper93]

You can try those filters. But they can break if they change something.

4pda.ru###header#header#header#header+div:style(background: #e6e7e9 !important)
4pda.ru##div:has(> div[style="position: absolute; left: 0px; top: 0px; visibility: hidden;"] > img[style="width: 0px; height: 0px;"][width="0"][height="0"])
4pda.ru##.rttgSGZOP
4pda.ru##.rXJ0cQIJpOZZ4

[gorhill]

4pda.ru###header#header#header#header+div:style(background: #e6e7e9 !important)

That is a clever solution, I was struggling to find a way to win the specificity battle.

[hant0508]

Ads in the background are hidden now, but they are still clickable. And I think class names like rXJ0cQIJpOZZ4 are randomly generated and they are being changed often.

[hant0508]

The filter 4pda.ru##a[rel][target]:has(> img) breaks some images on the forum (e.g. https://4pda.ru/forum/index.php?showtopic=514177, open the spoiler "Скриншоты").

[kasper93]

Each div with ad have tracking image in it, so this was my idea of detecting them. I detect the pattern they use. Because apart from that it is hard to detect ads. Any other selector is too wide. As we can see from above example.

[gorhill]

My concern is that the div approach required visiting over 200 nodes to find the matching ones. After I added aside >, I realized this was no longer taking care of the banner ad at the top.

[gorhill]

Each div with ad have tracking image in it, so this was my idea of detecting them.

More thoughts on this.

Oftentimes I have been wondering whether a new operator :select-parent([selector]) would be worth implementing, as it's not that uncommon nowadays to have to deal with sites attempting to obfuscate the elements to hide using random (or random-looking) class and id attributes.

In such cases, targeting elements to hide using traditional top-down approach is often difficult. However, very often I could see that a down-top approach would simplify things, including being more efficient to deal with for uBO.

This is such a case. For the current case, that would be:

##div[style="position: absolute; left: 0px; top: 0px; visibility: hidden;"] > img[width="0"][height="0"]:select-parent(div[class])

Again, the motivation for such operator would be to decrease as much as possible the number of nodes to programatically visit, and the above operator would be the most efficient in the current case, only 4 nodes to visit, all of them being a hit. (select-parent is just a tentative name).

This can be currently accomplished with :xpath, but a specific operator with no fussy syntax would make it easier to use.

Fyi @ameshkov, any thoughts?

[ameshkov]

Hi, @gorhill!

First of all, regarding 4pda, this is odd that AG Russian filter does not solve the issue in uBO. I'll ask Alex to look into it and report back to you.

Regarding the select-parent, isn't it basically a :has alias?

##div[class]:has(div[style="position: absolute; left: 0px; top: 0px; visibility: hidden;"] > img[width="0"][height="0"])

If it's not, what am I missing? If it is, do you want to emphasize with a different syntax that it uses a different matching algorithm?

[gorhill]

The prefixdiv[class], to feed querySelectorAll, was matching over 200 elements when I checked, meaning that over 200 elements will have to be visited to further process the :has operator.

With :select-parent, the prefix to feed querySelectorAll is div[style="position: absolute; left: 0px; top: 0px; visibility: hidden;"] > img[width="0"][height="0"], which matches only 4 elements on the page, hence only 4 elements to visit (all of which are actual hit). :select-parent allows to work down-top, while :has works top-down.

Furthermore, select-parent would make use of more efficient Element.matches, while :has must use Element.querySelector. The current way do work, but I see an improvement in ease-of-use and efficiency with :select-parent.

Regarding compatibility with Adguard filters, I see that Adguard supports re-styling with procedural cosmetic operators:

! 4pda.ru
4pda.ru#$#body > div:first-child > div[class]:first-child>div[class]:first-child>#header+div[id][-ext-has="> div"] { background-image: none !important; }
4pda.ru#$#body > div[id]:first-child > div[class]:first-child > div[class]:first-child > div[-ext-has="> div"] { background: #e6e7e9!important; }
! диалог загрузки на форуме
4pda.ru#$#body > div[id] > div[id][href^="http://4pda.ru/2017/"][-ext-has="> div"] { margin: 0px -2000px;!important; }
! ???
4pda.ru#$#aside[id] > div[class][-ext-has='a[rel="nofollow"]>img'] { position: absolute!important; left: -3000px!important; }
4pda.ru#$#aside[id] > div[class][-ext-has='h2:contains(AppPromo)'] { position: absolute!important; left: -3000px!important; }
4pda.ru#$#aside[id] > div[class][-ext-has='iframe[style$="width:240px;height:400px;"]'] { position: absolute!important; left: -3000px!important; }

uBO does not support this, all re-styling must be done declaratively, hence this only works with plain CSS selectors. I could support but I really want this to be justified, i.e. only if there are many cases out there which can't be solved otherwise.

[kasper93]

I agree with the idea, I often use "has" just to find the parent. But on the other hand one can image opposite cases where down-top approach is heavier than top-down a:select-parent(.specificClass) I mean it depends on specific case. Not sure there are many real life examples that would benefit from this new selector. But why not if you fell it make sense. :has have this benefit that it might one day have native support in browsers. One idea tho, if you want to go this route. We could have possibility to select parent or closest element (moving top) which matches selector. Essentially mirrored :has.

Slightly off-topic, there was an idea for operator select subject of the selector https://www.w3.org/TR/selectors4/#subject but as I can see it was removed in recent editor's draft https://drafts.csswg.org/selectors-4/

was matching over 200 elements when I checked,

Now it is 350 elements...

[ameshkov]

The prefixdiv[class], to feed querySelectorAll, was matching over 200 elements when I checked, meaning that over 200 elements will have to be visited to further process the :has operator.

I guess that's why browsers CSS engines utilize the "back-to-start" matching approach when it comes to complicated selectors. However, in our particular case we can't stick to a single approach. Ideally, selector engine should be smart enough to choose what's better for the current situation, and to make an informed decision it should calc the elements/attributes distribution stats.

Btw, we've discussed the very same thing recently with @seanl-adg, maybe he can add something to the discussion.

[kasper93]

Back to 4pda they changed title from TomTop to UMIDIGI. So the filter broke, again. My suggestion

4pda.ru##article.post:has(> div > div > img[height="1"][width="1"])
or
4pda.ru##div.visual:has(> div > img[height="1"][width="1"])

[gorhill]

Well this seems to work with existing procedural selectors, so maybe should just stick to this until the need become broad enough, if ever:

##div[style] > img[width="0"][height="0"]:xpath(../parent::div[@class])

[ameshkov]

I could support but I really want this to be justified, i.e. only if there are many cases out there which can't be solved otherwise.

I'll check it once I am back at the laptop, as I recall, 4pda is not the only example when it is useful.

[ameshkov]

@gorhill I've got an idea about :has and :select-parent.

What if the selection algorithm depended on the selectors priority?

For example: div:has(div[class])

div[class] has higher priority than div, so in this case, you should start matching "from the inside", just like you wanted with select-parent.

With this implicit approach we can have the benefits of :select-parent with no need to make filters maintainers learn one more pseudo-class.

[mnsold]

Styles do not work on the forum https://4pda.ru/forum

[mapx-]

see (filters for 4pda removed) https://github.com/uBlockOrigin/uAssets/issues/2392#issuecomment-393091147

update ublock filters