Closed Bug 1129488 Opened 10 years ago Closed 3 years ago

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

Categories

(DevTools :: Inspector, defect, P2)

x86_64
Linux
defect

Tracking

(firefox97 verified)

VERIFIED FIXED
97 Branch
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)

+++ 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.
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.
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.
Priority: -- → P2
Whiteboard: [btpp-fix-later]
Product: Firefox → DevTools
See Also: → 1684699

This seems to be a duplicate of Bug 1535310

And also a duplicate of Bug 745489

See Also: → 1535310, 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

Flags: needinfo?(bugmail)

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

Flags: needinfo?(bugmail) → needinfo?(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.

Flags: needinfo?(emilio) → needinfo?(odvarko)

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

Honza

Flags: needinfo?(odvarko) → needinfo?(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.

Flags: needinfo?(jdescottes)

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.

Attached image chrome-element-inspector-shift.png (obsolete) —
Attachment #9250436 - Attachment is obsolete: true
Whiteboard: [btpp-fix-later] → [btpp-fix-later], dt-webcompat
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED

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

Blocks: 1745188
Pushed by nchevobbe@mozilla.com: https://hg.mozilla.org/integration/autoland/rev/ca7d6f80e62d [devtools] Make it possible to pick elements with pointer-events: none. r=ochameau
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → 97 Branch
QA Whiteboard: [qa-97b-p2]

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.

Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: