devtools: Include layer rules in CSS panel using rule tree (#43912)

DevTools was collecting CSS rules by walking stylesheets and matching
selector text. This ignored cascade order and did not correctly handle
rules inside layer blocks.

This change uses computed values (rule tree) to get the actual applied
rules in cascade order. It then maps those rules back to CSSStyleRule
using the declaration block identity, and walks the CSSOM to get
selector text and layer ancestry.

This fills ancestor_data with layer names and lets the inspector show
layered rules correctly.


Testing: 
- Verified using the minimized testcase from the issue

- Verified on https://www.sharyap.com/

- Confirmed that rules inside layer blocks are now shown with correct
order and hierarchy.


Fixes: #43541

Signed-off-by: arabson99 <arabiusman99@gmail.com>
This commit is contained in:
Abubakar Abdulazeez Usman
2026-04-07 12:26:12 +01:00
committed by GitHub
parent 57adfc136f
commit 750fb41bdb
7 changed files with 250 additions and 148 deletions

View File

@@ -2131,22 +2131,17 @@ impl ScriptThread {
DevtoolScriptControlMsg::GetAttributeStyle(id, node_id, reply) => {
devtools::handle_get_attribute_style(cx, &self.devtools_state, id, &node_id, reply)
},
DevtoolScriptControlMsg::GetStylesheetStyle(
id,
node_id,
selector,
stylesheet,
reply,
) => devtools::handle_get_stylesheet_style(
cx,
&self.devtools_state,
&documents,
id,
&node_id,
selector,
stylesheet,
reply,
),
DevtoolScriptControlMsg::GetStylesheetStyle(id, node_id, matched_rule, reply) => {
devtools::handle_get_stylesheet_style(
cx,
&self.devtools_state,
&documents,
id,
&node_id,
matched_rule,
reply,
)
},
DevtoolScriptControlMsg::GetSelectors(id, node_id, reply) => {
devtools::handle_get_selectors(
cx,