The element picker should allow the creation of syntactically correct filters even if they have 0 matches on the current page layout

[FatOrangutan]

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

Page elements show up and disappear based on other events. It would be useful to let the element picker allow the creation of a filter that has 0 matches in the current layout but is otherwise syntactically correct.

A specific URL where the issue occurs

As an example, e-commerce websites often have a 'hover over image to see a zoomed-in preview' feature. If your goal is to block the magnifier, it is difficult using the element picker. An example of such a feature can be seen on http://malaman.github.io/js-image-zoom/example/

Steps to Reproduce

Go to http://malaman.github.io/js-image-zoom/example/. The goal is to block .js-image-zoom__zoomed-area: It is the rectangle overlay on the image that represents what part of the image is being zoomed in the preview:

Click for screenshot

I try multiple ways to create the filter:

A: Use uBO's context menu item.

1. Hover over the image. Right click. Use the keyboard to select Block element as using the mouse will make the magnifier disappear.
2. uBO's element blocker interface opens up but the magnifier disappears and hence cannot be blocked.

B: Use uBO's element blocker hotkey.

1. The magnifier disappears once uBO's element blocker interface opens up.

C: Use uBO's DOM Inspector:

1. This works but it seems to take more time than method 'D' below.

D: Use browser's web inspector and uBO's element picker:

1. Hover over the image. Right click. Use the keyboard to select Inspect Element or press Q, its menu shortcut.
2. The Inspector highlights the corresponding element. You now have its class name available.
3. Open uBO's element picker and try to create the corresponding filter ##.js-image-zoom__zoomed-area

E: Use browser's web inspector and My Filters in uBO dashboard:

1. This works too but takes longer than what method D would take.

Expected behavior:

After D.3, I expect uBO to let me create the filter. After all, it is syntactically correct.

If the goal is to prevent users from creating filters that have no immediately noticeable visible difference, then I suggest that:

1. Enabling advanced mode permits the above facility, and / or
2. A modifier + click on the Create button permits the above.

Actual behavior:

Covered above.

Your environment

• uBlock Origin version: 1.30.3.4
• Browser Name and version: Nightly
• Operating System and version: Windows 10.

[uBlock-user]

After all, it is syntactically correct.

The element doesn't exist, so the filter will have no effect, hence invalid.

[FatOrangutan]

The element doesn't exist

But it does exist, it is just set to display: none.

so the filter will have no effect

It will have effect when you hover the image.

hence invalid

I disagree. 'Invalid' filters are those that have invalid syntax and show up in red in both the picker and the filters page. This filter isn't "invalid."

[uBlock-user]

But it does exist,

Then you will be able to create it via the picker, see image below.

Open uBO's element picker and try to create the corresponding filter ##.js-image-zoom__zoomed-area

As for that, it works as expected --

I disagree.

I meant for the 0 number of element as per the title. If the element doesn't exist, picker will show the number 0 instead and you can't create that element via the Picker, this is by-design. You can still add it via my Filters.

[gorhill]

After D.3, I expect uBO to let me create the filter. After all, it is syntactically correct.

Yes, and I can create it, my "Create" button is enabled and the count is 1.

What's the issue?

[FatOrangutan]

Bad STR on my part. Let me see if I can find a site that better demonstrates the point I'm trying to make. Apologies for the confusion.

[FatOrangutan]

OK so I think these steps demonstrate my point:

Go to https://www.instagram.com/reddit/. When you hover any of the posts, they should get a dark overlay that shows the number of likes and comments. The goal is to block this. Unlike my STR from comment-0, the event of hovering doesn't toggle the display property of this overlay div, it in fact adds and removes the entire overlay div itself.

I'm finding it difficult to use the element picker to block it. While with my requested feature, I could:

1. Hover over any post.
2. Right click > Q for Inspect Element.
3. See the name of the class in the Inspector or press ctrl+c to copy the inner HTML and find out the class name from it.
4. Open element picker, type or paste in the class from the previous step and have the corresponding filter created.

Without the feature, the step 4 is replaced by visiting the My Filters pane and manually typing out the domain etc. which could increase the chances of error.

[gorhill]

I consider this a duplicate of gorhill/uBlock#2000.