commit 202ae50fb8ff23ab8e855e2971df577cb7d62975
parent 803edf7d5098afd91731d5e0ab17b42f44cd682f
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Tue, 16 Dec 2025 06:53:12 +0000
Bug 2005708 - [devtools] Handle SiblingCombinatorAfterScope selector warning in the Inspector. r=dshin,fluent-reviewers,devtools-reviewers,bolsson,ochameau
Differential Revision: https://phabricator.services.mozilla.com/D276181
Diffstat:
3 files changed, 33 insertions(+), 1 deletion(-)
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 {
