This seems to be a duplicate of Bug 1535310

And also a duplicate of Bug 745489

Andrew, could we have an extra mode (or use different API for getting an element from point) for elements with "pointer-events: none", so we can handle mouse events for them and fix the (element) Inspector for such elements?

Is this approach still valid? (Bug 745489)
https://bugzilla.mozilla.org/attachment.cgi?id=776285&action=edit

I'm not sure I'm who you meant to needinfo, but I can move the needinfo closer to someone who would better know :)

We have nsDOMWindowUtils.nodesFromRect, which we can extend. Maybe aVisibleOnly does what you want? That does ignore pointer-events, but also tweaks a couple other things.

Julian, do you think that nsDOMWindowUtils.nodesFromRect is the right direction here?

Honza

Closing the duplicates as it spreads the conversation and makes this hard to follow.

There are still 2 important items to consider here:

• other browsers do not allow to pick element with pointer-events: none
• without a specific UX work around this, simply allowing to pick pointer-events: none elements might be more annoying than it is useful (see Bug 745489 comment 3)

I quickly tried nsDOMWindowUtils.nodesFromRect and it seems we can use it to pick those nodes, with minimal codechange. However we'd need to perform some more tests to understand in which case this code might start returning unexpected nodes. In general we should be careful if this starts returning invisible nodes.

So in the end I think that modifying the default behavior of the picker is complicated and probably needs UX work (eg put it behind an explicit user action with some UI?).

However if we want to add this experimental behavior behind a preference so that webcompat team can use it, it can be done pretty easily. I will submit a basic patch doing that. If anyone wants to pick it up, polish it, add tests and try to review the behavior on more examples, I can't imagine this would take more than a few days of implementation + review.

other browsers do not allow to pick element with pointer-events: none

In Chrome, one can hold "shift" while using the inspector, which alters the behaviour to consider elements with pointers-events none. This feature then also removes from consideration (both functionally, visually with pink-shading) the elements that overlap with those in the render layers.

(In reply to Timo Tijhof from comment #13)

other browsers do not allow to pick element with pointer-events: none

In Chrome, one can hold "shift" while using the inspector, which alters the behaviour to consider elements with pointers-events none. This feature then also removes from consideration (both functionally, visually with pink-shading) the elements that overlap with those in the render layers.

In Firefox, holding Shift when clicking on an element in the page will select the element in the inspector, but won't stop the picker (so you can select another element directly, without clicking the picker button in DevTools again).
It could be weird having the Shift key also impacting hovering (in a way that is different than what we do for click)
Maybe we could make it a mode or something? For example we could make hitting Tab switch between regular picking and another one for everything (i.e. including pointer-events: none elements).
The downside would be that we'd differ from Chrome, where people might already know about this feature.

One other idea might be that by default we let the picker target everything , but have a way to ignore a specific element while hovering? So if an element covers the actual element you want to pick, you could hit the X key and we'd ignore the element until the picker stops?

As a side not, having features only accessible through key modifiers isn't discoverable, and I wonder how we could make those easier to find.
We could maybe have some label/panel in the inspector panel when the node picker is enabled, showing the different key modifiers available. I'll try to come up with something, probably in its own bug.

Depends on D132705

https://hg.mozilla.org/mozilla-central/rev/ca7d6f80e62d

Reproduced the issue with an affected build Firefox 97.0a1 (2021-12-06) on Windows 10x64.
I can no longer reproduce the issue on the attached test case with Firefox 97.0b9 on Windows 10x64, macOS 10.15 and Ubuntu 20.04. While the Shift key is pressed the "pointer-event: none" can be selected.