[Devtools][Inspector] Can't inspect an element with "pointer-events: none" using the pick tool
Categories
(DevTools :: Inspector, defect, P2)
Tracking
(firefox97 verified)
Tracking | Status | |
---|---|---|
firefox97 | --- | verified |
People
(Reporter: julienw, Assigned: nchevobbe)
References
(Blocks 2 open bugs)
Details
(Whiteboard: [btpp-fix-later], dt-webcompat)
Attachments
(4 files, 1 obsolete file)
Comment 1•9 years ago
|
||
Comment 2•9 years ago
|
||
Updated•6 years ago
|
Updated•4 years ago
|
Comment 3•4 years ago
|
||
This seems to be a duplicate of Bug 1535310
Comment 4•4 years ago
|
||
And also a duplicate of Bug 745489
Updated•4 years ago
|
Comment 5•3 years ago
•
|
||
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•3 years ago
|
||
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•3 years ago
|
||
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•3 years ago
|
||
Julian, do you think that nsDOMWindowUtils.nodesFromRect
is the right direction here?
Honza
Comment 11•3 years ago
•
|
||
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•3 years ago
|
||
Comment 13•3 years ago
|
||
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•3 years ago
|
||
Updated•3 years ago
|
Comment 15•3 years ago
|
||
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Updated•3 years ago
|
Assignee | ||
Comment 16•3 years ago
|
||
(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.
Assignee | ||
Comment 17•3 years ago
|
||
Depends on D132705
Comment 18•3 years ago
|
||
Comment 19•3 years ago
|
||
bugherder |
Updated•3 years ago
|
Comment 20•3 years ago
•
|
||
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.
Description
•