diff options
Diffstat (limited to 'devtools/client/styleeditor')
4 files changed, 37 insertions, 6 deletions
diff --git a/devtools/client/styleeditor/StyleEditorUI.sys.mjs b/devtools/client/styleeditor/StyleEditorUI.sys.mjs index e00a88c3ad..e31bd4bcc1 100644 --- a/devtools/client/styleeditor/StyleEditorUI.sys.mjs +++ b/devtools/client/styleeditor/StyleEditorUI.sys.mjs @@ -1400,6 +1400,10 @@ export class StyleEditorUI extends EventEmitter { type.append(this.#panelDoc.createTextNode(`@${rule.type}\u00A0`)); if (rule.type == "layer" && rule.layerName) { type.append(this.#panelDoc.createTextNode(`${rule.layerName}\u00A0`)); + } else if (rule.type === "property") { + type.append( + this.#panelDoc.createTextNode(`${rule.propertyName}\u00A0`) + ); } const cond = this.#panelDoc.createElementNS(HTML_NS, "span"); @@ -1549,6 +1553,7 @@ export class StyleEditorUI extends EventEmitter { this.#loadingStyleSheets = null; this.#root.classList.remove("loading"); + this.emit("reloaded"); } async #handleStyleSheetResource(resource) { diff --git a/devtools/client/styleeditor/panel.js b/devtools/client/styleeditor/panel.js index 5a2772d095..a7f8cf77c7 100644 --- a/devtools/client/styleeditor/panel.js +++ b/devtools/client/styleeditor/panel.js @@ -48,6 +48,7 @@ StyleEditorPanel.prototype = { cssProperties ); this.UI.on("error", this._showError); + this.UI.on("reloaded", () => this.emit("reloaded")); await this.UI.initialize(options); return this; diff --git a/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js b/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js index a0a9bc93fd..d106d6780e 100644 --- a/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js +++ b/devtools/client/styleeditor/test/browser_styleeditor_at_rules_sidebar.js @@ -39,6 +39,8 @@ waitForExplicitFinish(); add_task(async function () { await pushPref("layout.css.container-queries.enabled", true); + // Enable @property rules + await pushPref("layout.css.properties-and-values.enabled", true); const { ui } = await openStyleEditorForURL(TESTCASE_URI); @@ -88,7 +90,7 @@ async function testInlineMediaEditor(ui, editor) { is(sidebar.hidden, false, "sidebar is showing on editor with @media"); const entries = sidebar.querySelectorAll(".at-rule-label"); - is(entries.length, 6, "6 @media rules displayed in sidebar"); + is(entries.length, 7, "7 at-rules displayed in sidebar"); await testRule({ ui, @@ -123,7 +125,6 @@ async function testInlineMediaEditor(ui, editor) { ui, editor, rule: entries[3], - conditionText: "", line: 16, type: "layer", layerName: "myLayer", @@ -146,6 +147,15 @@ async function testInlineMediaEditor(ui, editor) { line: 21, type: "support", }); + + await testRule({ + ui, + editor, + rule: entries[6], + line: 30, + type: "property", + propertyName: "--my-property", + }); } async function testMediaEditor(ui, editor) { @@ -273,27 +283,35 @@ async function testMediaRuleAdded(ui, editor) { * @param {StyleEditorUI} options.ui * @param {StyleSheetEditor} options.editor: The editor the rule is displayed in * @param {Element} options.rule: The rule element in the media sidebar - * @param {String} options.conditionText: media query condition text + * @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.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 ). + * @param {String} options.type: The type of the rule (container, layer, media, support, property ). * Defaults to "media". */ async function testRule({ ui, editor, rule, - conditionText, + conditionText = "", matches, layerName, + propertyName, line, type = "media", }) { const atTypeEl = rule.querySelector(".at-rule-type"); + let name; + if (type === "layer") { + name = layerName; + } else if (type === "property") { + name = propertyName; + } is( atTypeEl.textContent, - `@${type}\u00A0${layerName ? `${layerName}\u00A0` : ""}`, + `@${type}\u00A0${name ? `${name}\u00A0` : ""}`, "label for at-rule type is correct" ); diff --git a/devtools/client/styleeditor/test/media-rules.html b/devtools/client/styleeditor/test/media-rules.html index 76725bfb54..b74d97f6b2 100644 --- a/devtools/client/styleeditor/test/media-rules.html +++ b/devtools/client/styleeditor/test/media-rules.html @@ -2,6 +2,7 @@ <html> <head> <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="simple.css"/> <link rel="stylesheet" href="media-rules.css"/> <!-- This stylesheet is needed to ensure we cover the fix for Bug 1779043 --> @@ -38,6 +39,12 @@ } } } + + @property --my-property { + syntax: "<color>"; + inherits: true; + initial-value: #f06; + } </style> </head> <body> |