Merging upstream version 127.0.

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

4 files changed, 205 insertions, 5 deletions

diff --git a/devtools/client/inspector/rules/test/browser_part2.toml b/devtools/client/inspector/rules/test/browser_part2.toml
index 1cffe88e6e..19d7e2997b 100644
--- a/devtools/client/inspector/rules/test/browser_part2.toml
+++ b/devtools/client/inspector/rules/test/browser_part2.toml
@@ -181,6 +181,8 @@ skip-if = [
 
 ["browser_rules_keyframeLineNumbers.js"]
 
+["browser_rules_keyframes-rule-nested.js"]
+
 ["browser_rules_keyframes-rule-shadowdom.js"]
 
 ["browser_rules_keyframes-rule_01.js"]
diff --git a/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js
new file mode 100644
index 0000000000..97b4b21a65
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_keyframes-rule-nested.js
@@ -0,0 +1,89 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that nested @keyframes rules are displayed correctly in the rule view
+
+const TEST_URI = `data:text/html,${encodeURIComponent(`
+  <style>
+    body {
+      animation-name: in-layer,
+                      in-starting-style,
+                      in-media,
+                      in-container;
+      animation-duration: 1s, 2s, 3s, 4s;
+      border: 4px solid;
+      outline: 4px solid;
+    }
+
+    @layer {
+      @keyframes in-layer {
+        from { color: red; }
+        to   { color: blue; }
+      }
+    }
+
+    @starting-style {
+      /* keyframes is considered as being outside of @starting-style */
+      @keyframes in-starting-style {
+        from { border-color: tomato; }
+        to   { border-color: gold; }
+      }
+    }
+
+    @media screen {
+      @keyframes in-media {
+        from { outline-color: purple; }
+        to   { outline-color: pink; }
+      }
+    }
+
+    @container (width > 0px) {
+      /* keyframes is considered as being outside of @container */
+      @keyframes in-container {
+        from { background-color: green; }
+        to   { background-color: lime; }
+      }
+    }
+  </style>
+  <h1>Nested <code>@keyframes</code></h1>
+`)}`;
+
+add_task(async function () {
+  await pushPref("layout.css.starting-style-at-rules.enabled", true);
+  await addTab(TEST_URI);
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("body", inspector);
+  const headers = Array.from(view.element.querySelectorAll(".ruleview-header"));
+  Assert.deepEqual(
+    headers.map(el => el.textContent),
+    [
+      "Keyframes in-layer",
+      "Keyframes in-starting-style",
+      "Keyframes in-media",
+      "Keyframes in-container",
+    ],
+    "Got expected keyframes sections"
+  );
+
+  info("Check that keyframes' keyframe ancestor rules are not displayed");
+  for (const headerEl of headers) {
+    const keyframeContainerId = headerEl
+      .querySelector("button")
+      .getAttribute("aria-controls");
+    const keyframeContainer = view.element.querySelector(
+      `#${keyframeContainerId}`
+    );
+    ok(
+      !!keyframeContainer,
+      `Got keyframe container for "${headerEl.textContent}"`
+    );
+    is(
+      keyframeContainer.querySelector(".ruleview-rule-ancestor"),
+      null,
+      `ancestor data are not displayed for "${headerEl.textContent}" keyframe rules`
+    );
+  }
+});
diff --git a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
index fcd0302624..d1919c6f36 100644
--- a/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js
@@ -5,13 +5,16 @@
 
 // Test that pseudoelements are displayed correctly in the rule view
 
-const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
+const TEST_URI = URL_ROOT + "doc_pseudoelement.html?#:~:text=fox";
 const PSEUDO_PREF = "devtools.inspector.show_pseudo_elements";
 
 add_task(async function () {
   await pushPref(PSEUDO_PREF, true);
   await pushPref("dom.customHighlightAPI.enabled", true);
+  await pushPref("dom.text_fragments.enabled", true);
   await pushPref("layout.css.modern-range-pseudos.enabled", true);
+  await pushPref("full-screen-api.transition-duration.enter", "0 0");
+  await pushPref("full-screen-api.transition-duration.leave", "0 0");
 
   await addTab(TEST_URI);
   const { inspector, view } = await openRuleView();
@@ -23,9 +26,11 @@ add_task(async function () {
   await testParagraph(inspector, view);
   await testBody(inspector, view);
   await testList(inspector, view);
-  await testDialogBackdrop(inspector, view);
   await testCustomHighlight(inspector, view);
   await testSlider(inspector, view);
+  await testUrlFragmentTextDirective(inspector, view);
+  // keep this one last as it makes the browser go fullscreen and seem to impact other tests
+  await testBackdrop(inspector, view);
 });
 
 async function testTopLeft(inspector, view) {
@@ -288,13 +293,80 @@ async function testList(inspector, view) {
   assertGutters(view);
 }
 
-async function testDialogBackdrop(inspector, view) {
+async function testBackdrop(inspector, view) {
+  info("Test ::backdrop for dialog element");
   await assertPseudoElementRulesNumbers("dialog", inspector, view, {
     elementRulesNb: 3,
     backdropRules: 1,
   });
 
+  info("Test ::backdrop for popover element");
+  await assertPseudoElementRulesNumbers(
+    "#in-dialog[popover]",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      backdropRules: 1,
+    }
+  );
+
   assertGutters(view);
+
+  info("Test ::backdrop rules are displayed when elements is fullscreen");
+
+  // Wait for the document being activated, so that
+  // fullscreen request won't be denied.
+  const onTabFocused = SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    return ContentTaskUtils.waitForCondition(
+      () => content.browsingContext.isActive && content.document.hasFocus(),
+      "document is active"
+    );
+  });
+  gBrowser.selectedBrowser.focus();
+  await onTabFocused;
+
+  info("Request fullscreen");
+  // Entering fullscreen is triggering an update, wait for it so it doesn't impact
+  // the rest of the test
+  let onInspectorUpdated = view.once("ruleview-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    const canvas = content.document.querySelector("canvas");
+    canvas.requestFullscreen();
+
+    await ContentTaskUtils.waitForCondition(
+      () => content.document.fullscreenElement === canvas,
+      "canvas is fullscreen"
+    );
+  });
+  await onInspectorUpdated;
+
+  await assertPseudoElementRulesNumbers("canvas", inspector, view, {
+    elementRulesNb: 3,
+    backdropRules: 1,
+  });
+
+  assertGutters(view);
+
+  // Exiting fullscreen is triggering an update, wait for it so it doesn't impact
+  // the rest of the test
+  onInspectorUpdated = view.once("ruleview-refreshed");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    content.document.exitFullscreen();
+    await ContentTaskUtils.waitForCondition(
+      () => content.document.fullscreenElement === null,
+      "canvas is no longer fullscreen"
+    );
+  });
+  await onInspectorUpdated;
+
+  info(
+    "Test ::backdrop rules are not displayed when elements are not fullscreen"
+  );
+  await assertPseudoElementRulesNumbers("canvas", inspector, view, {
+    elementRulesNb: 3,
+    backdropRules: 0,
+  });
 }
 
 async function testCustomHighlight(inspector, view) {
@@ -376,6 +448,19 @@ async function testSlider(inspector, view) {
   );
 }
 
+async function testUrlFragmentTextDirective(inspector, view) {
+  await assertPseudoElementRulesNumbers(
+    ".url-fragment-text-directives",
+    inspector,
+    view,
+    {
+      elementRulesNb: 3,
+      targetTextRulesNb: 1,
+    }
+  );
+  assertGutters(view);
+}
+
 function convertTextPropsToString(textProps) {
   return textProps
     .map(
@@ -436,6 +521,9 @@ async function assertPseudoElementRulesNumbers(
     sliderTrackRules: elementStyle.rules.filter(
       rule => rule.pseudoElement === "::slider-track"
     ),
+    targetTextRules: elementStyle.rules.filter(
+      rule => rule.pseudoElement === "::target-text"
+    ),
   };
 
   is(
@@ -493,6 +581,11 @@ async function assertPseudoElementRulesNumbers(
     ruleNbs.sliderTrackRulesNb || 0,
     selector + " has the correct number of ::slider-track rules"
   );
+  is(
+    rules.targetTextRules.length,
+    ruleNbs.targetTextRulesNb || 0,
+    selector + " has the correct number of ::target-text rules"
+  );
 
   // If we do have pseudo element rules displayed, ensure we don't mark their selectors
   // as matched or unmatched
diff --git a/devtools/client/inspector/rules/test/doc_pseudoelement.html b/devtools/client/inspector/rules/test/doc_pseudoelement.html
index 8e077e220b..88611d6633 100644
--- a/devtools/client/inspector/rules/test/doc_pseudoelement.html
+++ b/devtools/client/inspector/rules/test/doc_pseudoelement.html
@@ -110,7 +110,11 @@ p:first-letter {
     color: purple;
 }
 
-dialog::backdrop {
+:is(
+    dialog,
+    [popover],
+    :fullscreen,
+)::backdrop {
     background-color: transparent;
 }
 
@@ -142,6 +146,10 @@ input::slider-thumb {
 input::slider-track {
     background: seagreen;
 }
+
+.url-fragment-text-directives::target-text {
+    background-color: salmon;
+}
     </style>
   </head>
   <body>
@@ -167,7 +175,10 @@ input::slider-track {
         <li id="list" class="box">List element</li>
     </ol>
 
-    <dialog>In dialog</dialog>
+    <dialog>
+        In dialog
+        <div id="in-dialog" popover>hello</div>
+    </dialog>
 
     <label>Range <input type="range" class="slider"></label>
     <label>Not range <input type="text" class="slider"></label>
@@ -177,10 +188,15 @@ input::slider-track {
         You can use them to examine, edit, and debug HTML, CSS, and JavaScript.
     </section>
 
+    <section class="url-fragment-text-directives">May the fox be with you</section>
+
+    <canvas></canvas>
+
     <script>
         "use strict";
         // This is the only way to have the ::backdrop style to be applied
         document.querySelector("dialog").showModal()
+        document.querySelector("#in-dialog").showPopover()
 
         // Register highlights for ::highlight pseudo elements
         const highlightsContainer = document.querySelector(".highlights-container");