Skip to content

Loading…

[Question] Ublock support for Web Inspector mode and 3D mode for Firefox? #1211

Closed
Corruptinglyneedful opened this Issue · 20 comments

4 participants

@Corruptinglyneedful

Does this exist?

In ABP, it had a function where you could open the Developer Tools and go into Inspector Mode tools, go into 3d mode, find what you want to block, click the provided button, and then block it with a customer filter.

Does Ublock support this feature or something similar?

I love this mode because you can get REALLY annoying ads blocked that way, that won't block through traditional means like host files or that break the page, when you try to Element Block.

I'm an advanced user by no means when it comes to blocking things, so if this feature does exist, I'm not finding it.

@Snapy

If you're talking about the element picker you can enable it by clicking the eyedropper.

@AlexVallat
Collaborator

I actually quite like this, being able to block from the Web Inspector would be rather nice. I've put together a prototype of this in a branch: Blocking_UI_for_WebInspector. There was quite a lot of cruft that had to be tidied up around the element picker code, though, perhaps from old code paths that have become obsolete.

Anyway, the prototype shows that it is possible in principle, subject to a few limitations:

  • You can use 3D mode to select the element, but you have to drop out before actually blocking it, because the blocking UI is shown embedded on the page surface itself, rather than as a window of its own.
  • You can't select a new element to block while already in blocking mode - I couldn't find a way of telling the element picker to change the selection, so you have to quit it and then select another one.
  • If you try to block an element that's inside an iframe, the iframe itself is selected for blocking. The element picker does not currently support blocking things inside iframes.

I'm not sure if it's worth continuing with this, but I'll leave the branch around in case we ever redesign the element picker and want to include this functionality.

@Corruptinglyneedful

@AlexVallat In truth, I actually don't really understand this feature when I used it with ABP. Under the hood, I don't understand how it works.

I would use it to block those extremely stubborn ads that would break sections of the page, if you blocked them.

I would go into the Inspector Mode, turn on 3D, find the originating point of the thing on the page, even if it was several layers down, click it, turn off 3D mode, and click the ABP logo and it would load the custom filter/HTML and then block it.

It would be great to get this feature on Ublock, probably an advanced user feature, IMO.

@AlexVallat
Collaborator

I've had a chance to do a bit more work on the branch. I decided that it would be a better UI to enable the Block Element command on the context menu (if you have the "Make use of context menu where appropriate" option turned on), rather than having a button whose function may not be obvious:
web inspector context menu blocking

I also managed to fix the issues I described before, so I'm a lot happier about this as a feature in general now.

@chrisaljoudi: Does Chrome expose similar extensibility to it's Inspector panel? If so, do you think this would be a worthwhile feature to add?

@Corruptinglyneedful

That is looking great, this is great news!

This is pretty much how it worked in ABP but yes, they just have a random button there. I just figured it out one day.

I'm just glad I was able to get it into words and you could understand what I mean.

How soon do you think it will be ready for the main branch? Is it a viable enough feature?

@chrisaljoudi

@AlexVallat looking into it!

@chrisaljoudi

@AlexVallat Doesn't appear to quite be possible on Chrome currently (no way to add context menu items to DevTools).

@Corruptinglyneedful

Does this mean it is dead in the water now? :(

@chrisaljoudi

@Corruptinglyneedful um, I don't know why it would be. My comment was about Chrome, not Firefox.

@Corruptinglyneedful

@chrisaljoudi Are you thinking of implementing it for Firefox in a future update?

i figured it'd be dead if Chrome didn't support it because you know, multiple browser support etc, less trouble than it's work for only 1 browser support, that sort of thing. You know what I'm saying.

I'm happy it's not dead in the water though.

@AlexVallat
Collaborator

@chrisaljoudi That's a shame there's no point of extensibility for it in Chrome. If you wouldn't object to it being a Firefox-only feature (we can probably get away with just calling it part of the "context menu where appropriate" feature), then when you get some time could you take a look over the changes I had to make to the element picker code to support it? There was a lot of old code in there that didn't seem to be used by anything (in any browser) that I've stripped out and tidied up.

@chrisaljoudi

@AlexVallat is it okay if I do that tomorrow?

@AlexVallat
Collaborator

@chrisaljoudi I'm not in any hurry!

@Corruptinglyneedful

This is exciting!

@chrisaljoudi chrisaljoudi added a commit that closed this issue
@chrisaljoudi Element picker: cleanup and Firefox improvements (closes #1211)
In Firefox, you can now block an element right from the Web Inspector.
This was implemented by @AlexVallat -- thanks to Alex for the awesome
feature enhancement.
e8572bd
@chrisaljoudi

@AlexVallat it works great; I've landed the changes.

Thanks!

A quick note: you don't have to maintain your own repo just for modifications that aren't yet ready to be merged into master. Please do feel free to create a branch on this main repo where you can work on stuff as you like until you're ready to merge.

@Corruptinglyneedful

@chrisaljoudi and @AlexVallat I'm confused, what just happened? I'm new to Github, never used the site before. Can one of you explain it to me?

What is a commit?

@AlexVallat
Collaborator

@chrisaljoudi Thanks for reviewing and merging in the changes.

OK, in that case for future changes, rather than use my fork, I'll use a workflow where I create a branch for the change on the main repo, then merge it into main and delete the branch if and when it's good.

@Corruptinglyneedful What happened is: I wrote the new feature, Chris reviewed and approved it, and now it will be in the next version :-)

@Corruptinglyneedful

@AlexVallat That's great news! I wasn't even asking for a feature it was just a question. This went so wonderfully well.

Is there any way I can test it out now, say a beta? I don't specifically NEED it, I'd just like to test it.

@AlexVallat
Collaborator

@Corruptinglyneedful I don't think so - as far as I can tell there is no xpi made available from the continuous build, only for tagged releases. I'm sure one will be along soon enough, though.

@ghost

Is there any way I can test it out now, say a beta?

@Corruptinglyneedful

This is the closest thing out there. Updated every six hours. Rev's builds haven't been endorsed, so that's a caveat. The page has been up for months, and nothing suspect has happened.

@AlexVallat AlexVallat added a commit to AlexVallat/uBlock that referenced this issue
@chrisaljoudi Cherry pick Web Inspector element picker #1211 d54d3de
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.