1583641 - [InactiveCSS] hints on pseudo-element rules displayed in their binding elements' rules are incorrect

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[untainsyd]

Attachment: css_hints_bug.png

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

Steps to reproduce:

I have been doing web-page and i have tried to align custom <li> dots/bullets for my unordered list and i used "display: inline-block;" and "vertical-align: middle;" for mine task.

Actual results:

Firefox Dev. Tools CSS-hints noticed for me that:
"vertical-align has no effect on this element since it’s not an inline or table-cell element.
Try adding display:inline or display:table-cell. Learn more"

Expected results:

This hints wouldn't have appeared because "vertical-align: middle" works in this case.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Test case

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Test case

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1583641 - Fix inactive CSS vertical-align warning when set inside ::before r?pbro!

Comment 4

[Patrick Brosset <:pbro>]

Changing the description to reflect what the problem here actually is.

Some STRs:

• Open the test case: attachment 9100855 [details]
• Open the inspector
• Select the <div>
• In the Rules panel, expand the "pseudo elements" section to reveal the div::before rule
  ==> Notice that the vertical-align property is marked as inactive, this is WRONG
• Now open the div and select the ::before pseudo-element in the DOM tree
  ==> Notice that the same rule in the Rules panel has the vertical-align property marked as active. This is CORRECT.

The problem is the following:

• When we explicitely select pseudo-element in the DOM tree, everything goes well, because the DOM node and computed style information we pass to the InactiveCSS helper are the right ones.
• When we only select the parent div element in the DOM tree, but still show the corresponding pseudo-elements rules in the Rules panel, we pass the div and its computed style to the InactiveCSS helper. So we evaluate the inactivity state of the pseudo-element by looking at the div's styles, which is wrong.

Comment 5

[Patrick Brosset <:pbro>]

Attachment: Bug 1583641 - Walk the DOM to select the actual pseudo-element node and it style

The inactive-property-helper can sometimes be called for properties inside rules
that match pseudo-elements, even though the node being passed is not the pseudo-
element itself.

This happens because the Rules view has a feature whereby selecting, say, a <div>
will show its rules, but also any pseudo-element rules that may be applied that
result in the creation of a pseudo-element inside of it.
So if you have div::before { content: "" } in CSS, then selecting that div will
also show this rule in the Rules view.

This patch adds a check for this case, and when it happens, walks the DOM to
find the right pseudo-element, and then gets its style.