User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Steps to reproduce:

https://jfrog.com/about/
Inspect cmd (Ctrl+Shift+c)
mouse over the 3 animations under "Once You Leap Forward, You Won’t Go Back"

Actual results:

only the container div class="container text-center" is located

Expected results:

the inner elements should be located

Thanks for the report, we could reproduce the issue. Nicolas will take a look.

The issue appears because the container element has a z-index: -1, which means it won't be a target of the mousemove event we listen to.
For those cases (like pointer-events: none), holding <kbd>Shift</kbd> while using the picker should give the actual element behind the cursor.
But here the picker is not doing a great job either:

https://searchfox.org/mozilla-central/rev/058ab60e5020d7c5c98cf82d298aa84626e0cd79/devtools/server/actors/inspector/node-picker.js#81,84,105,117

_findNodeAtMouseEventPosition(event) {
...
  const elements = winUtils.nodesFromRect(
...
  );
...
  return elements[0];

We're returning the first result from nodesFromRect, which doesn't seem to return things in any particular order (from what I could see).
It would be better if we'd return the first element that is not a parent of any of the other elements that are under the cursor, so we would have a potential "deepest" element here.

When picking nodes while holding Shift, we're calling
nodesFromRect, which returns a list of nodes, in no
particular order.
Instead of randomly picking the first one in the list,
return the first one that is not a parent of any of the
other matching elements.
This should potentially give us the deepest element (even
if in some situation we might miss "deeper" nodes from other
branches than the first "only child").

Backed out for causing dt failures in browser_inspector_picker-shift-key.js.

• Backout link
• Push with failures
• Failure Log

[task 2024-04-15T10:24:27.147Z] 10:24:27     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_picker-shift-key.js | The element main is now selected - 
[task 2024-04-15T10:24:27.148Z] 10:24:27     INFO - Shift-clicking element with negative z-index parent works
[task 2024-04-15T10:24:27.149Z] 10:24:27     INFO - Waiting for element "#negative-z-index-child" to be hovered
[task 2024-04-15T10:24:27.150Z] 10:24:27     INFO - Wait for picker-node-hovered
[task 2024-04-15T10:24:27.151Z] 10:24:27     INFO - Wait for highlighter shown
[task 2024-04-15T10:24:27.152Z] 10:24:27     INFO - Buffered messages finished
[task 2024-04-15T10:24:27.156Z] 10:24:27     INFO - TEST-UNEXPECTED-FAIL | devtools/client/inspector/test/browser_inspector_picker-shift-key.js | The highlighter is shown on #negative-z-index-child - Got "", expected "#negative-z-index-child"
[task 2024-04-15T10:24:27.156Z] 10:24:27     INFO - Stack trace:
[task 2024-04-15T10:24:27.157Z] 10:24:27     INFO - chrome://mochikit/content/browser-test.js:test_is:1620
[task 2024-04-15T10:24:27.157Z] 10:24:27     INFO - chrome://mochitests/content/browser/devtools/client/inspector/test/browser_inspector_picker-shift-key.js:null:86
[task 2024-04-15T10:24:27.158Z] 10:24:27     INFO - chrome://mochikit/content/browser-test.js:handleTask:1139
[task 2024-04-15T10:24:27.159Z] 10:24:27     INFO - chrome://mochikit/content/browser-test.js:_runTaskBasedTest:1211
[task 2024-04-15T10:24:27.159Z] 10:24:27     INFO - chrome://mochikit/content/browser-test.js:Tester_execTest:1353
[task 2024-04-15T10:24:27.160Z] 10:24:27     INFO - chrome://mochikit/content/browser-test.js:nextTest/<:1128
[task 2024-04-15T10:24:27.160Z] 10:24:27     INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:SimpleTest.waitForFocus/<:1058
[task 2024-04-15T10:24:27.298Z] 10:24:27     INFO - GECKO(15733) | console.log: "[DISPATCH] action type:" "CLEAR_FLEXBOX"
[task 2024-04-15T10:24:27.335Z] 10:24:27     INFO - TEST-PASS | devtools/client/inspector/test/browser_inspector_picker-shift-key.js | The element #negative-z-index-child is now selected - 

ah, it was hovering at the edge of the element, which in some platform would match another element. I changed that to actually hover in the center. TRY seems to be happier: https://treeherder.mozilla.org/jobs?repo=try&revision=2d2da979da0217bb7dced29d03eeeab933534f13

https://hg.mozilla.org/mozilla-central/rev/95490e5819b6