Bug 1580394 - [devtools] Don't wait for document to be ready to show PausesDebuggerOverlay. r=ochameau.

We're using the new `force` parameter for `insertAnonymousContent` to force creating a container
for the anonymous content, and we add a new option to the CanvasAnonymousHelper so highlighter
can choose to not wait for the dom to load.
For now we only use it for the paused debugger overlay as the other highlighters might need
an inspector front, which may require the dom to be ready.
We enable the assertions in  browser_dbg-paused-overlay-loading.js to check that the
highlighter is visible.
This required a few changes in the highlighter test actor.
First, it was waiting for an inspector front in its initialize method, which was
waiting indefinitely in our test as the document is paused. As this was only done
to retrieve the inspector actorID, we simply remove it and retrieve the actorID
through the connection and the target form when it's needed (for the eye dropper).
Secondly, the isPausedDebuggerOverlayVisible method was returning true even when
the highlighter wasn't displayed, so we check a few additional attributes.

Depends on D132034

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

devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay-loading.js

@@ -13,22 +13,31 @@ add_task(async function() {
   info("Reload the page to hit the debugger statement while loading");
   reload(dbg);
   await waitForPaused(dbg);
-  // TODO: Check that the overlay is displayed (Bug 1580394), it's not at the moment.
   ok(true, "We're paused");
 
-  // TODO: Resume with clicking on the overlay button, when Bug 1580394 is fixed.
-  info("Resume");
-  await resume(dbg);
-  ok(true, "We're not paused anymore");
-
-  info("Wait for a bit, just to make sure the overlay isn't displayed");
-  await waitForTime(5000);
-
-  const highlighterTestFront = await getHighlighterTestFront(dbg.toolbox);
-  const isPausedOverlayVisible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
-  is(
-    isPausedOverlayVisible,
-    false,
-    "The pause overlay is not visible after resuming"
+  info("Check that the paused overlay is displayed");
+  const highlighterTestFront = await dbg.toolbox.target.getFront(
+    "highlighterTest"
   );
+
+  await waitFor(async () => {
+    const visible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
+    return visible;
+  });
+  ok(true, "Paused debugger overlay is visible");
+
+  info("Click the resume button");
+  await highlighterTestFront.clickPausedDebuggerOverlayButton(
+    "paused-dbg-resume-button"
+  );
+
+  await waitFor(() => !isPaused(dbg), "Wait for the debugger to resume");
+  ok("The debugger isn't paused after clicking on the resume button");
+
+  await waitFor(async () => {
+    const visible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
+    return !visible;
+  });
+
+  ok(true, "The overlay is now hidden");
 });

devtools/client/debugger/test/mochitest/browser_dbg-paused-overlay.js

@@ -43,7 +43,7 @@ add_task(async function() {
   isPausedOverlayVisible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
   is(isPausedOverlayVisible, true, "The pause overlay is still visible");
 
-  info("Test clicking the resume button");
+  info("Test clicking the highlighter resume button");
   await highlighterTestFront.clickPausedDebuggerOverlayButton(
     "paused-dbg-resume-button"
   );
@@ -55,6 +55,24 @@ add_task(async function() {
     const visible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
     return !visible;
   });
-
   ok(true, "The overlay is now hidden");
+
+  info(
+    "Check that the highlighter is removed when clicking on the debugger resume button"
+  );
+  invokeInTab("doEval");
+  await waitFor(
+    async () => await highlighterTestFront.isPausedDebuggerOverlayVisible()
+  );
+  ok(true, "Paused debugger overlay is visible again");
+
+  info("Click debugger UI resume button");
+  debugger;
+  const resumeButton = await waitFor(() => findElement(dbg, "resume"));
+  resumeButton.click();
+  await waitFor(async () => {
+    const visible = await highlighterTestFront.isPausedDebuggerOverlayVisible();
+    return !visible;
+  });
+  ok(true, "The overlay is hidden after clicking on the resume button");
 });

devtools/client/shared/test/highlighter-test-actor.js

@@ -183,12 +183,6 @@ var highlighterTestSpec = protocol.generateActorSpec({
         value: RetVal("json"),
       },
     },
-    setInspectorActorID: {
-      request: {
-        inspectorActorID: Arg(0, "string"),
-      },
-      response: {},
-    },
   },
 });
 
@@ -361,7 +355,14 @@ var HighlighterTestActor = protocol.ActorClassWithSpec(highlighterTestSpec, {
     }
 
     const root = pauseOverlay.getElement("root");
-    return root.getAttribute("hidden") !== "true";
+    const toolbar = pauseOverlay.getElement("toolbar");
+
+    return (
+      root.getAttribute("hidden") !== "true" &&
+      root.getAttribute("overlay") == "true" &&
+      toolbar.getAttribute("hidden") !== "true" &&
+      !!toolbar.getTextContent()
+    );
   },
 
   /**
@@ -387,12 +388,8 @@ var HighlighterTestActor = protocol.ActorClassWithSpec(highlighterTestSpec, {
    * @returns {EyeDropper}
    */
   _getEyeDropper() {
-    if (!this._inspectorActorID) {
-      console.error(
-        "_inspectorActorID is not set, make sure setInspectorActorID was called"
-      );
-    }
-    const inspectorActor = this.conn.getActor(this._inspectorActorID);
+    const form = this.targetActor.form();
+    const inspectorActor = this.conn._getOrCreateActor(form.inspectorActor);
     return inspectorActor?._eyeDropper;
   },
 
@@ -484,12 +481,6 @@ var HighlighterTestActor = protocol.ActorClassWithSpec(highlighterTestSpec, {
       return `${nodeStr} : ${h.getElement("root").getTextContent()}`;
     });
   },
-
-  // This will be automatically called as part of the initialization of the
-  // HighlighterTestActor.
-  setInspectorActorID(inspectorActorID) {
-    this._inspectorActorID = inspectorActorID;
-  },
 });
 exports.HighlighterTestActor = HighlighterTestActor;
 
@@ -504,11 +495,6 @@ class HighlighterTestFront extends protocol.FrontClassWithSpec(
     this._highlighter = null;
   }
 
-  async initialize() {
-    const inspectorFront = await this.targetFront.getFront("inspector");
-    await this.setInspectorActorID(inspectorFront.actorID);
-  }
-
   /**
    * Override the highlighter getter with a custom method that returns
    * the currently active highlighter instance.

devtools/server/actors/highlighters/paused-debugger.js

@@ -38,7 +38,8 @@ function PausedDebuggerOverlay(highlighterEnv, options = {}) {
 
   this.markup = new CanvasFrameAnonymousContentHelper(
     highlighterEnv,
-    this._buildMarkup.bind(this)
+    this._buildMarkup.bind(this),
+    { waitForDocumentToLoad: false }
   );
   this.isReady = this.markup.initialize();
 }

devtools/server/actors/highlighters/utils/markup.js

@@ -196,10 +196,19 @@ exports.isNodeValid = isNodeValid;
  * @param {Function} nodeBuilder
  *        A function that, when executed, returns a DOM node to be inserted into
  *        the canvasFrame.
+ * @param {Object} options
+ * @param {Boolean} options.waitForDocumentToLoad
+ *        Set to false to try to insert the anonymous content even if the document
+ *        isn't loaded yet. Defaults to true.
  */
-function CanvasFrameAnonymousContentHelper(highlighterEnv, nodeBuilder) {
+function CanvasFrameAnonymousContentHelper(
+  highlighterEnv,
+  nodeBuilder,
+  { waitForDocumentToLoad = true } = {}
+) {
   this.highlighterEnv = highlighterEnv;
   this.nodeBuilder = nodeBuilder;
+  this.waitForDocumentToLoad = !!waitForDocumentToLoad;
 
   this._onWindowReady = this._onWindowReady.bind(this);
   this.highlighterEnv.on("window-ready", this._onWindowReady);
@@ -219,7 +228,9 @@ CanvasFrameAnonymousContentHelper.prototype = {
     const doc = this.highlighterEnv.document;
     if (
       doc.documentElement &&
-      (isDocumentReady(doc) || doc.readyState !== "uninitialized")
+      (!this.waitForDocumentToLoad ||
+        isDocumentReady(doc) ||
+        doc.readyState !== "uninitialized")
     ) {
       this._insert();
     }
@@ -255,7 +266,9 @@ CanvasFrameAnonymousContentHelper.prototype = {
   },
 
   async _insert() {
-    await waitForContentLoaded(this.highlighterEnv.window);
+    if (this.waitForDocumentToLoad) {
+      await waitForContentLoaded(this.highlighterEnv.window);
+    }
     if (!this.highlighterEnv) {
       // CanvasFrameAnonymousContentHelper was already destroyed.
       return;
@@ -293,7 +306,9 @@ CanvasFrameAnonymousContentHelper.prototype = {
         }
       }
 
-      await waitForContentLoaded(this._iframe);
+      if (this.waitForDocumentToLoad) {
+        await waitForContentLoaded(this._iframe);
+      }
       if (!this.highlighterEnv) {
         // CanvasFrameAnonymousContentHelper was already destroyed.
         return;
@@ -326,8 +341,12 @@ CanvasFrameAnonymousContentHelper.prototype = {
     // that scenario, fixes when we're adding anonymous content in a tab that
     // is not the active one (see bug 1260043 and bug 1260044)
     try {
+      // If we didn't wait for the document to load, we want to force a layout update
+      // to ensure the anonymous content will be rendered (see Bug 1580394).
+      const forceSynchronousLayoutUpdate = !this.waitForDocumentToLoad;
       this._content = this.anonymousContentDocument.insertAnonymousContent(
-        node
+        node,
+        forceSynchronousLayoutUpdate
       );
     } catch (e) {
       // If the `insertAnonymousContent` fails throwing a `NS_ERROR_UNEXPECTED`, it means

devtools/server/actors/thread.js

@@ -77,13 +77,6 @@ loader.lazyRequireGetter(
   true
 );
 
-loader.lazyRequireGetter(
-  this,
-  "isDocumentReady",
-  "devtools/server/actors/inspector/utils",
-  true
-);
-
 const PROMISE_REACTIONS = new WeakMap();
 function cacheReactionsForFrame(frame) {
   if (frame.asyncPromise) {
@@ -477,15 +470,6 @@ const ThreadActor = ActorClassWithSpec(threadSpec, {
       return false;
     }
 
-    // Document#insertAnonymousContent requires an access to a CustomContentContainer, which
-    // is only available once the DOM is loaded.
-    // If that's not the case, we simply don't show the overlay. We can't wait for the
-    // DOM to be loaded _and then_ show the overlay, as this will only happen once we resume
-    // and might get the overlay in the page while we're not paused anymore.
-    if (!isDocumentReady(window.document)) {
-      return false;
-    }
-
     // Ignore privileged document (top level window, special about:* pages, …).
     if (window.isChromeWindow) {
       return false;