Adding upstream version 126.0.upstream/126.0

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

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>