1648505 - Inactive CSS warning not updated when mutating the DOM in the Markup view

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[adriandecita]

Attachment: dom-tree-update.mkv

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:78.0) Gecko/20100101 Firefox/78.0

Steps to reproduce:

1. Open DOM and style inspector
2. Find and element with CSS rule that is not working for any reasons (I used flex rules) and select it. So inspector draws broken rule in grey colors meaning it is not active + adds a hint why it is so.
3. In inspector view, grab the selected element it drag it in to a flex-container (any element with applied 'display: flex')

Actual results:

Greyed out rule remains the same, despite the fact it is working now

Expected results:

Inspector should update rules hinting once changes in DOM tree affect these rules. At least when these changes are caused by legit inspector functionality

Comment 1

[BugBot [:suhaib / :marco]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Razvan Caliman [:rcaliman]]

Thanks for filing the issue, Adrian!

Indeed, the inactive CSS warning does not get removed when mutating the DOM such that the conditions are met.

For quick testing, I created a small sample.

Steps to reproduce:

• Run the following in a new tab:

data:text/html,<style>.flex-container {display: flex} .flex-item {align-self: stretch}</style><div class="flex-container"><span>flex container</span></div><div class="flex-item">flex item</div>

• Open DevTools > Inspector
• Inspect <div class="flex-item">
• In the Rules panel, notice align-self: stretch is marked inactive because the element is not a flex item or grid item
• In the Markup panel, expand <div class="flex-container">
• Drag and drop <div class="flex-item"> so it becomes a child of <div class="flex-container">
• Observe the Rules panel

Expected result:
No Inactive CSS warning because the element now satisfies the condition

Actual result:
Inactive CSS warning is still shown

Workaround:
Click on a different node, then back on <div class="flex-item"> to see the updated styles.