1350185 - Inspector doesn't select the node when opened from context menu (sometimes)

Status: NEW

(DevTools :: Inspector, defect, P2)

Description

[684sigma]

I have a problem with Firefox Beta 53. It also happens in Nightly 55. Doesn't happen in Beta 52.
Sometimes when I inspect elements using context menu, inspector doesn't select the node.
It happens unpredictably, however, I noticed one specific scenario when it happens

1. Open https://codemirror.net/demo/folding.html
2. Right-click on word "Demonstration", click "Inspect element"

Result: Inspector opens, but no node selected
Expected: The node should be selected

Comment 1

[YF (Yang)]

Regression window:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=1a3194836cb4c3da6ba3a9742a2d25cf26669b55&tochange=90b691bf09f5cc4fe7d0c6445fcf5afa2c34eeee

Comment 2

[Liz Henry (:lizzard)]

Too late for a fix for 53, as we are heading into the last week of the beta 53 cycle and no one is assigned.

Comment 3

[Patrick Brosset <:pbro>]

Interesting, definitely seem related to bug 1154645.
When right-clicking, we get the following message in the browser console:
unsafe/forbidden CPOW usage  css-logic.js:395:34

Alex: mind taking a look at what could cause this?

Comment 4

[Alexandre Poirot [:ochameau]]

That's related to page CSS behavior and this code:
http://searchfox.org/mozilla-central/source/toolkit/modules/css-selector.js#79-103

When right clicking on codemirror element, .CodeMirror-focused class is set on the editor <div>,
then we craft a selector based on that:
.CodeMirror-focused > div:nth-child(6) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(5) > div:nth-child(2) > pre:nth-child(2)

It then fails as the inspector takes the focus and codemirror <div> losses its .CodeMirror-focused class.

I'm wondering if we should remove this code:
http://searchfox.org/mozilla-central/source/toolkit/modules/css-selector.js#79-103
And ignore class name completely, or only use tag-name:nth-child(x) selectors which sounds like the most stateless ones.

Comment 5

[Patrick Brosset <:pbro>]

(In reply to Alexandre Poirot [:ochameau] from comment #4)
> I'm wondering if we should remove this code:
> http://searchfox.org/mozilla-central/source/toolkit/modules/css-selector.
> js#79-103
> And ignore class name completely, or only use tag-name:nth-child(x)
> selectors which sounds like the most stateless ones.
For the purpose of selecting an element with the context-menu, yes, I think that would be fine. But we should keep this code around for other use cases (for instance, you can right-click on nodes in the inspector and copy their CSS selectors from there. For this use case, we do want to keep classes).