Bug 2005708 - [devtools] Handle SiblingCombinatorAfterScope selector warning in the Inspector. r=dshin,fluent-reviewers,devtools-reviewers,bolsson,ochameau

nchevobbe · nchevobbe · commit 202ae50fb8ff · 2025-12-16T06:55:33.000Z
Differential Revision: https://phabricator.services.mozilla.com/D276181
diff --git a/devtools/client/inspector/rules/test/browser_rules_selector_warnings.js b/devtools/client/inspector/rules/test/browser_rules_selector_warnings.js
@@ -7,6 +7,10 @@
 const TEST_URI = `
   <!DOCTYPE html>
   <style>
+    main, :scope ~ * {
+      outline-color: tomato;
+    }
+
     main, :has(form) {
       /* /!\ space between & and : is important */
       & :has(input),
@@ -26,6 +30,8 @@ const TEST_URI = `
 
 const UNCONSTRAINED_HAS_WARNING_MESSAGE =
   "This selector uses unconstrained :has(), which can be slow";
+const SIBLING_COMTINATOR_AFTER_SCOPE_WARNING_MESSAGE =
+  "Sibling selectors after :scope will never match anything";
 
 add_task(async function () {
   await addTab(
@@ -40,7 +46,7 @@ add_task(async function () {
   info(
     "Check that unconstrained :has() warnings are displayed for the rules selectors"
   );
-  const ruleSelectors = Array.from(
+  let ruleSelectors = Array.from(
     selectorText.querySelectorAll(".ruleview-selector")
   );
 
@@ -82,6 +88,24 @@ add_task(async function () {
     selectorText: ":has(form)",
     expectedWarnings: [UNCONSTRAINED_HAS_WARNING_MESSAGE],
   });
+
+  const scopeSiblingRuleEditor = getRuleViewRuleEditor(view, 3);
+  ruleSelectors = Array.from(
+    scopeSiblingRuleEditor.selectorText.querySelectorAll(".ruleview-selector")
+  );
+  // Warning is not displayed when the selector does not have warnings
+  await assertSelectorWarnings({
+    view,
+    selectorEl: ruleSelectors[0],
+    selectorText: "main",
+    expectedWarnings: [],
+  });
+  await assertSelectorWarnings({
+    view,
+    selectorEl: ruleSelectors[1],
+    selectorText: ":scope ~ *",
+    expectedWarnings: [SIBLING_COMTINATOR_AFTER_SCOPE_WARNING_MESSAGE],
+  });
 });
 
 async function assertSelectorWarnings({
diff --git a/devtools/client/locales/en-US/tooltips.ftl b/devtools/client/locales/en-US/tooltips.ftl
@@ -215,3 +215,6 @@ css-compatibility-learn-more-message = <span data-l10n-name="link">Learn more</s
 
 # :has() should not be translated
 css-selector-warning-unconstrained-has = This selector uses unconstrained <strong>:has()</strong>, which can be slow
+
+# :scope should not be translated
+css-selector-warning-sibling-combinator-after-scope = Sibling selectors after <strong>:scope</strong> will never match anything
diff --git a/devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js b/devtools/client/shared/widgets/tooltip/css-selector-warnings-tooltip-helper.js
@@ -12,6 +12,11 @@ const SELECTOR_WARNINGS = {
     // There could be a specific section on the MDN :has page for this: https://github.com/mdn/mdn/issues/469
     learnMoreUrl: null,
   },
+  SiblingCombinatorAfterScope: {
+    l10nId: "css-selector-warning-sibling-combinator-after-scope",
+    // Add the link to MDN when https://github.com/mdn/content/issues/42364 is addressed
+    learnMoreUrl: null,
+  },
 };
 
 class CssSelectorWarningsTooltipHelper {
