1129488 - [Devtools][Inspector] Can't inspect an element with "pointer-events: none" using the pick tool

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P2)

Description

[Julien Wajsberg [:julienw]]

Attachment: testcase-pointer-events.html

+++ This bug was initially created as a clone of Bug #1129486 +++

STR:
1. Load the attachment in Firefox.
2. Open the Inspector.
3. Click the "pick" tool.
4. Try to pick the div with "pointer-events: none"

=> The underlying element is selected instead.

Even if I understand why this happens, I think the inspector should be able to pick such elements.

Comment 1

[josh.ribakoff]

I agree as well, I SHOULD be able to select elements that have pointer-events:none with the "pick" tool.

For example I have non UI elements that are positioned at a higher z-index than my functional UI elements. I use pointer-events to allow my user to "click through" the non UI elements, like overlays.

I do however need to debug these elements as the developer. Instead of being able to use the "pick" tool to inspect these elements, I have to resort to a cumbersome process of finding the element.

Comment 2

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.

For ref. Chrome doesn't allow to pick elements with pointer-events:none; either. 
Flagging as P2 for now. To be reviewed.

Comment 3

[Karl Dubost💡 :karlcow]

This seems to be a duplicate of Bug 1535310

Comment 4

[Karl Dubost💡 :karlcow]

And also a duplicate of Bug 745489

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Comment 6

[Andrew Sutherland [:asuth] (he/him)]

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

Comment 7

[Emilio Cobos Álvarez (:emilio)]

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.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

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

Honza

Comment 11

[Julian Descottes [:jdescottes]]

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.

Comment 12

[Julian Descottes [:jdescottes]]

Attachment: Bug 1129488 - [devtools] WIP allow to select pointer-events:none elements

Comment 13

[Timo Tijhof]

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.

Comment 14

[Timo Tijhof]

Attachment: chrome-element-inspector-shift.png

Comment 15

[Timo Tijhof]

Attachment: chrome95-element-inspector-shift.png

Comment 16

[Nicolas Chevobbe [:nchevobbe]]

(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.

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1129488 - [devtools] Make it possible to pick elements with pointer-events: none. r=ochameau

Depends on D132705

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ca7d6f80e62d
[devtools] Make it possible to pick elements with pointer-events: none. r=ochameau

Comment 19

[Natalia Csoregi [:nataliaCs]]

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

Comment 20

[Alexandru Trif, Desktop QA [:atrif]]

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.