Bug 1893644 - [devtools] Display ::backdrop rules for popover elements. r=devtools-reviewers,bomsy.

Differential Revision: https://phabricator.services.mozilla.com/D208746

devtools/client/inspector/rules/test/browser_rules_pseudo-element_01.js

@@ -13,6 +13,8 @@ add_task(async function () {
   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();
@@ -24,7 +26,7 @@ add_task(async function () {
   await testParagraph(inspector, view);
   await testBody(inspector, view);
   await testList(inspector, view);
-  await testDialogBackdrop(inspector, view);
+  await testBackdrop(inspector, view);
   await testCustomHighlight(inspector, view);
   await testSlider(inspector, view);
   await testUrlFragmentTextDirective(inspector, view);
@@ -290,13 +292,85 @@ 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;
+
+  const onFullscreen = new Promise(resolve => {
+    BrowserTestUtils.addContentEventListener(
+      gBrowser.selectedBrowser,
+      "fullscreenchange",
+      resolve,
+      { once: true }
+    );
+  });
+
+  info("Request fullscreen");
+  await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => {
+    const canvas = content.document.querySelector("canvas");
+    canvas.requestFullscreen();
+  });
+
+  await onFullscreen;
+  ok(true, "canvas is fullscreen");
+
+  await assertPseudoElementRulesNumbers("canvas", inspector, view, {
+    elementRulesNb: 3,
+    backdropRules: 1,
+  });
+
+  assertGutters(view);
+
+  info("Exit fullscreen");
+  const onFullscreenExit = new Promise(resolve => {
+    BrowserTestUtils.addContentEventListener(
+      gBrowser.selectedBrowser,
+      "fullscreenchange",
+      resolve,
+      { once: true }
+    );
+  });
+  SpecialPowers.spawn(gBrowser.selectedBrowser, [], async () => {
+    content.document.exitFullscreen();
+  });
+  await onFullscreenExit;
+
+  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) {

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;
 }
 
@@ -171,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>
@@ -183,10 +190,13 @@ input::slider-track {
 
     <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");

devtools/server/actors/page-style.js

@@ -708,7 +708,7 @@ class PageStyleActor extends Actor {
       case "::marker":
         return this._nodeIsListItem(node);
       case "::backdrop":
-        return node.matches(":modal");
+        return node.matches(":modal, :popover-open");
       case "::cue":
         return node.nodeName == "VIDEO";
       case "::file-selector-button":