tor-browser

commit d119a97b812e76fb8fa58f28f125d8c4be5dec95
parent 8472726a9ae67210f6028b5f877fda16147da51e
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Tue,  4 Nov 2025 14:39:01 +0000

Bug 1997523 - [devtools] Set specific class for inherited rules. r=devtools-reviewers,ochameau.

Remove the ruleview-header-inherited class on the inherited headers,
and then use the new ruleview-rule-inherited class to check if a rule
is inherited in checkRuleViewContent.

Differential Revision: https://phabricator.services.mozilla.com/D270849

Diffstat:
M
devtools/client/inspector/rules/rules.js
 | 
5
+----
M
devtools/client/inspector/rules/test/head.js
 | 
4
+---
M
devtools/client/inspector/rules/views/rule-editor.js
 | 
4
+++-

3 files changed, 5 insertions(+), 8 deletions(-)
diff --git a/devtools/client/inspector/rules/rules.js b/devtools/client/inspector/rules/rules.js
@@ -1558,10 +1558,7 @@ CssRuleView.prototype = {
           inheritedSectionLabel !== lastinheritedSectionLabel)
       ) {
         const div = this.styleDocument.createElementNS(HTML_NS, "div");
-        div.classList.add(
-          RULE_VIEW_HEADER_CLASSNAME,
-          "ruleview-header-inherited"
-        );
+        div.classList.add(RULE_VIEW_HEADER_CLASSNAME);
         div.setAttribute("role", "heading");
         div.setAttribute("aria-level", "3");
         div.textContent = rule.inheritedSectionLabel;
diff --git a/devtools/client/inspector/rules/test/head.js b/devtools/client/inspector/rules/test/head.js
@@ -1441,9 +1441,7 @@ function checkRuleViewContent(view, expectedElements) {
       );
     }
 
-    const isInherited = elementInView.matches(
-      ".ruleview-header-inherited ~ .ruleview-rule"
-    );
+    const isInherited = elementInView.matches(".ruleview-rule-inherited");
     is(
       isInherited,
       expectedElement.inherited ?? false,
diff --git a/devtools/client/inspector/rules/views/rule-editor.js b/devtools/client/inspector/rules/views/rule-editor.js
@@ -153,7 +153,9 @@ RuleEditor.prototype = {
 
   _create() {
     this.element = this.doc.createElement("div");
-    this.element.className = "ruleview-rule devtools-monospace";
+    this.element.className =
+      "ruleview-rule devtools-monospace" +
+      (this.rule.inherited ? " ruleview-rule-inherited" : "");
     this.element.dataset.ruleId = this.rule.domRule.actorID;
     this.element.setAttribute("uneditable", !this.isEditable);
     this.element.setAttribute("unmatched", this.rule.isUnmatched);