2013327 - [computed panel] wrong matched selector order when rule applying on parent element is important

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: test case

Steps to reproduce

1. Open attached test case
2. Open the inspector
3. Select the <h1>::after node in the markup view
4. Select the computed panel
5. Expand the color property to see matched selectors

Expected results

I'm seeing 2 matched selectors in this order:

• h1::after > red
• h1 > blue

Actual results

The selectors are not in the right order:

• h1 > blue`
• h1::after > red

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: screenshot of the inspector showing the bug

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Note that this is not restricted to pseudo element, we have the same issue if an inherited rule has an important priority while the rule applying on the element does not (but it should still win)

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 2013327 - [devtools] Consider selector distance in CssSelectorInfo#compareTo. r=#devtools.

The distance property indicates if the selector applies to the element or to an ancestor (in such case, it is
negative and reflect how many level there is between the ancestor and the viewed element).
We need to use this when comparing those selectors, as an inherited declaration, even if important, can't
override a direct declaration.

A test case is added in browser_computed_matched-selectors-order.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/66677c72a60d
https://hg.mozilla.org/integration/autoland/rev/00b1fc551b60
[devtools] Consider selector distance in CssSelectorInfo#compareTo. r=devtools-reviewers,jdescottes.

Comment 5

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/00b1fc551b60