Ublock: Ability to remove DOM element instead of hiding?

[kasper93]

I know that it is canonical way to hide blocked elements. But sometimes it might be useful to actually remove DOM element. At least I don't have any other idea for the following testcase.

1. Go to http://www.wykop.pl/
2. Switch view mode to "grid". (button on right hand side - marked with red circle on screenshot)
3. You will see that ads are properly hidden, but this leave blank items in grid. When I manually remove hidden element, grid is properly shown - without blank spaces.

To reproduce those filters are needed.

wykop.pl##li.link:has(a[href*='wykop.pl/reklama'])
wykop.pl##li.link:has(a[href*='wykop.pl/paylink'])
wykop.pl##li.link:has(a[href*='wykop.pl/market'])
wykop.pl##li.link:has(.adsbygoogle)

Any ideas how we can work this out? I know leftovers are not that bad, but still would be nice if we could remove them :)

[kasper93]

Also quite similar issue is with ul#dyingLinksBox thing. It is a list of some links. First one sometimes is advert. But you have arrow buttons to go through the list.

The advert is hidden with the same filters I posted in first post. I can in fact show the non-ad element with wykop.pl##.dying-links.link:nth-of-type(2):style(display:list-item;!important) but their JS go through all children of ul#dyingLinksBox and set display: none; or display: list-item so if we go back to the ad we lost the arrow buttons. Best way would be to remove the element. Not sure it is something we can expect uBlock to do. I always used user.js but since uBlock is so powerful it kind of don't make sense anymore except few minor issues.

EDIT:
Here is the filter which in theory should show first not hidden by uBlock element in #dyingLinksBox when all element are hidden. But it doesn't work. xpath works as expected, but uBlock doesn't inject the style. Probably because the filter is evaluated too soon? Or it just doesn't work with xpath.

wykop.pl##:xpath(//ul[@id='dyingLinksBox'][count(descendant::li[not(contains(@style,'display:none'))][not(string-length(@hidden)=0)]) = 0]/li[not(@hidden)][1]):style(display:list-item;!important)

[Hrxn]

What did you mean by manually removing the hidden element? Do you use some userscript / userscript extension? Or manually from the console, etc. ?

[lewisje]

He has explained why he won't do it already: https://github.com/gorhill/uBlock/issues/2211#issuecomment-264648203

[gorhill]

uBlock doesn't inject the style

Because the :style operator currently works only with plain CSS selectors, not procedural ones. uBO uses the CSS selector to create a CSS rule, which of course won't work for procedural selectors (:matches-css, :has, etc.)

[kasper93]

What did you mean by manually removing the hidden element? Do you use some userscript / userscript extension? Or manually from the console, etc. ?

I think it doesn't really matter how I did that. Anyway I used to use my script for a long time. Back in the day most things was not possible to hide with adblock like addons. https://github.com/kasper93/userscripts/blob/master/UkryjWykopPoleca.user.js Recently I decided to port it to uBlock filters. And only three issues are remaining.

1. Leftover space from hidden elements.
2. dyingLinksBox thingy.
3. $("body").removeClass("screening"); They have fullpage ads sometimes and ad itself is hidden with wykop.pl##a[href*="wykop.pl/tracker"] but there are some css being applied to body for example whole body width is lower.

While I agree 2 and 3 might be out of the scope for uBlock. I think 1 is something we can discuss further, what do you think?

Anyway don't consider this issue to be request for a feature, I simply want to signalize problems I encountered. Maybe we find some solutions :)

[lewisje]

If the "leftover space" is caused from the page deliberately making some part of it less than full-width or full-height ("pulling in", as opposed to having other content "push in"), then it's outside the scope of uBlock Origin.

[lewisje]

I already linked to the comment where @gorhill explains why he won't do it, but thanks for explaining DOM Manipulation 101 to us.

[gorhill]

@lewisje About your comment at https://adblockplus.org/forum/viewtopic.php?f=10&t=52321:

uBlock Origin has implemented this with different syntax

uBO does override inline styles with display: none !important; by default, there is no need for users to worry about this.

For example, uBO works fine with http://raymondhill.net/ublock/adbox.html -- where one element to hide uses style="display: block !important".

[chylex]

@gorhill You said you wanted real world cases for removing elements - if you use uBlock on a video element, it just hides it while it keeps autoplaying in the background when you reload the page. I'd appreciate a way to force these elements out of the DOM instead of blocking an element thinking it was gone, and several days later getting jumpscared by invisible videos..

[gorhill]

"Real world cases" means _actual URLs_ where I can see for myself what can be done .

[chylex]

Here's an example rule that kept autoplaying the video trailer on the site:

! 18. 12. 2016 15:24:08 http://www.metacritic.com/game/pc/overwatch
www.metacritic.com##.video_and_autoplay

[gorhill]

Blocking large media elements would work for that case. (which is even better than a cosmetic filter since the bandwidth is saved).

[chylex]

Blocking large media elements does nothing here http://www.digitaltrends.com/mobile/phone-unlocking-guide-for-all-carriers/

or here http://www.pcworld.com/article/2691193/do-the-research-before-you-upgrade-your-ram.html

[gorhill]

Works for me. What your threshold for the size? It's 250 KB here.

[chylex]

50 kB, only turning it on for individual websites. Both sites still load and autoplay the videos - http://i.imgur.com/Mm0UCxw.png. Using Firefox Developer Edition 54.0a2, 64bit.

It also doesn't solve a case where you'd only want some videos to play, for example blocking twitch's mini player but not blocking the main player (you can do this in twitch settings, but just as an example).

[gorhill]

Ok the video is delivered differently on Firefox -- the page is using xhr requests.

[gorhill]

Here is another case: #2609. The page keep changing the style attribute non-stop to evade cosmetic filtering's display: none !important;.

[kasper93]

Another case where hiding leave blank space. When node is removed layout is properly calculated.

https://userstyles.org/styles/browse

[chylex]

Any update on this? Another website where blocking media doesn't work, at least in FF - http://www.zdnet.com/article/max-memory-limits-for-64-bit-windows-7/

[gorhill]

blocking media doesn't work

||ipad-streaming.techrepublic.com/media$domain=zdnet.com

[chylex]

Blocking <style> elements (obviously) doesn't work, on websites that use style elements to display ads with random IDs and base64 images purely in CSS (making it also impossible to hide the elements themselves) - example. Is properly removing elements going to be implemented?

[gorhill]

example

I don't see any ads on that page.

[chylex]

[okiehsch]

Already fixed by the filter
teamliquid.net##script:inject(abort-on-property-write.js, adonisHash)
in uBO-filters

[vparitskiy]

http://sport.ua/

Nice example why removing elements instead oh hiding would be helpful.

They use js to detect hidden state and override it which causes constantly dom changes. Or something like that.

http://gifly.com//media_gifly/t/l/J/h/b/tlJh.gif

[gorhill]

Try:

sport.ua##script:inject(abort-current-inline-script.js, parseInt, 676574456c656d656e747342795461674e616d65)

[slackero]

It would make sense these days to remove specific filtered elements from DOM instead of just hiding. Here is such an example.

My filter: www.spiegel.de##.autostartvideo is hiding the element but video still is autoplaying.

I cannot find any working solution for this specific problem. Cosmetic filters are not enough.

[gorhill]

My filter: www.spiegel.de##.autostartvideo is hiding the element but video still is autoplaying.

That is a good pro-argument.

[ThePickNick]

I have found couple more examples where Video blocking via UBlock Orgin picker only hide the video the video is set on autoplay, and you can still hear the sound. major News sites in particularity incorporate this feature. Only way to get rid of video is to delete video element from the DOM

http://www.cnn.com/2018/01/12/us/southern-california-mudslides/index.html

mine filter
www.cnn.com###large-media does block the video but sound still plays same issue with these sites

http://fortune.com/video/2018/01/11/lyft-made-a-beer-that-comes-with-discounted-rides/

filter used
fortune.com##.rendered.sticky-video.auto-play.lead-media.autoplay.no-custom-bc-overlay.full-width-media.video.component

there needs to be a function to delete elements from DOM instead of just adding style="display: none !important;"

[Hrxn]

Works with HTML filtering.

[gorhill]

Another case: https://github.com/uBlockOrigin/uAssets/issues/7056.