commit e44fab07fd3d713e6495fbc2e49d262801e29704
parent 37c047a757209618976176c54ee5b2c9f0432cfb
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Tue, 2 Dec 2025 11:33:48 +0000
Bug 2003270 - [devtools] Show @position-try rules in StyleEditor at-rules sidebar. r=devtools-reviewers,layout-reviewers,emilio,bomsy
Differential Revision: https://phabricator.services.mozilla.com/D274599
Diffstat:
5 files changed, 39 insertions(+), 7 deletions(-)
diff --git a/devtools/client/styleeditor/StyleEditorUI.sys.mjs b/devtools/client/styleeditor/StyleEditorUI.sys.mjs
@@ -1442,6 +1442,10 @@ export class StyleEditorUI extends EventEmitter {
type.append(
this.#panelDoc.createTextNode(`${rule.propertyName}\u00A0`)
);
+ } else if (rule.type === "position-try") {
+ type.append(
+ this.#panelDoc.createTextNode(`${rule.positionTryName}\u00A0`)
+ );
}
const cond = this.#panelDoc.createElementNS(HTML_NS, "span");
diff --git a/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js b/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js
@@ -40,6 +40,8 @@ waitForExplicitFinish();
add_task(async function () {
// Enable @property rules
await pushPref("layout.css.properties-and-values.enabled", true);
+ // Enable anchor positioning
+ await pushPref("layout.css.anchor-positioning.enabled", true);
const { ui } = await openStyleEditorForURL(TESTCASE_URI);
@@ -50,10 +52,10 @@ add_task(async function () {
await openEditor(plainEditor);
testPlainEditor(plainEditor);
- info("Test editor for inline sheet with @media rules");
- const inlineMediaEditor = ui.editors[3];
- await openEditor(inlineMediaEditor);
- await testInlineMediaEditor(ui, inlineMediaEditor);
+ info("Test editor for inline sheet with at-rules");
+ const inlineAtRulesEditor = ui.editors[3];
+ await openEditor(inlineAtRulesEditor);
+ await testInlineAtRulesEditor(ui, inlineAtRulesEditor);
info("Test editor with @media rules");
const mediaEditor = ui.editors[1];
@@ -84,12 +86,12 @@ function testPlainEditor(editor) {
is(sidebar.hidden, true, "sidebar is hidden on editor without @media");
}
-async function testInlineMediaEditor(ui, editor) {
+async function testInlineAtRulesEditor(ui, editor) {
const sidebar = editor.details.querySelector(".stylesheet-sidebar");
is(sidebar.hidden, false, "sidebar is showing on editor with @media");
const entries = sidebar.querySelectorAll(".at-rule-label");
- is(entries.length, 7, "7 at-rules displayed in sidebar");
+ is(entries.length, 8, "8 at-rules displayed in sidebar");
await testRule({
ui,
@@ -155,6 +157,15 @@ async function testInlineMediaEditor(ui, editor) {
type: "property",
propertyName: "--my-property",
});
+
+ await testRule({
+ ui,
+ editor,
+ rule: entries[7],
+ line: 36,
+ type: "position-try",
+ positionTryName: "--pt-custom-bottom",
+ });
}
async function testMediaEditor(ui, editor) {
@@ -285,6 +296,7 @@ async function testMediaRuleAdded(ui, editor) {
* @param {string} options.conditionText: at-rule condition text (for @media, @container, @support)
* @param {boolean} options.matches: Whether or not the document matches the rule
* @param {string} options.layerName: Optional name of the @layer
+ * @param {string} options.positionTryName: Name of the @position-try if type is "position-try"
* @param {string} options.propertyName: Name of the @property if type is "property"
* @param {number} options.line: Line of the rule
* @param {string} options.type: The type of the rule (container, layer, media, support, property ).
@@ -297,6 +309,7 @@ async function testRule({
conditionText = "",
matches,
layerName,
+ positionTryName,
propertyName,
line,
type = "media",
@@ -307,6 +320,8 @@ async function testRule({
name = layerName;
} else if (type === "property") {
name = propertyName;
+ } else if (type === "position-try") {
+ name = positionTryName;
}
is(
atTypeEl.textContent,
diff --git a/devtools/client/styleeditor/test/media-rules.html b/devtools/client/styleeditor/test/media-rules.html
@@ -45,6 +45,12 @@
inherits: true;
initial-value: #f06;
}
+
+ @position-try --pt-custom-bottom {
+ top: anchor(bottom);
+ bottom: unset;
+ margin-top: 10px;
+ }
</style>
</head>
<body>
diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js
@@ -720,6 +720,13 @@ class StyleSheetsManager extends EventEmitter {
line: InspectorUtils.getRelativeRuleLine(rule),
column: InspectorUtils.getRuleColumn(rule),
});
+ } else if (className === "CSSPositionTryRule") {
+ atRules.push({
+ type: "position-try",
+ positionTryName: rule.name,
+ line: InspectorUtils.getRelativeRuleLine(rule),
+ column: InspectorUtils.getRuleColumn(rule),
+ });
}
}
return {
diff --git a/layout/inspector/InspectorUtils.cpp b/layout/inspector/InspectorUtils.cpp
@@ -568,6 +568,7 @@ static uint32_t CollectAtRules(ServoCSSRuleList& aRuleList,
case StyleCssRuleType::Media:
case StyleCssRuleType::Supports:
case StyleCssRuleType::LayerBlock:
+ case StyleCssRuleType::PositionTry:
case StyleCssRuleType::Property:
case StyleCssRuleType::Container: {
(void)aResult.AppendElement(OwningNonNull(*rule), fallible);
@@ -589,7 +590,6 @@ static uint32_t CollectAtRules(ServoCSSRuleList& aRuleList,
case StyleCssRuleType::FontPaletteValues:
case StyleCssRuleType::Scope:
case StyleCssRuleType::StartingStyle:
- case StyleCssRuleType::PositionTry:
case StyleCssRuleType::NestedDeclarations:
break;
}
