Bug 1691349 - [devtools] Fix screenshot node on about:preferences. r=bomsy.

The context menu action was freezing because of an infinite
loop in getRect: since we weren't passing a boundary window,
the function uses the top window, which can be the windowRoot.
But then, we walk up through the window using window.parent,
which would never get us the windowRoot, hence the infinite loop.
We fix this by providing the boundary window to getReact.
A test is added to ensure we don't regress in the future.

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

devtools/client/inspector/markup/test/browser.ini

@@ -188,6 +188,7 @@ skip-if = verify
 [browser_markup_pseudo_on_reload.js]
 [browser_markup_remove_xul_attributes.js]
 [browser_markup_screenshot_node.js]
+[browser_markup_screenshot_node_about_page.js]
 [browser_markup_screenshot_node_iframe.js]
 [browser_markup_screenshot_node_shadowdom.js]
 [browser_markup_scrollable_badge.js]

devtools/client/inspector/markup/test/browser_markup_screenshot_node_about_page.js

@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_URL = `about:preferences`;
+
+// Test that the "Screenshot Node" feature works in about:preferences (See Bug 1691349).
+
+add_task(async function() {
+  const { inspector, toolbox } = await openInspectorForURL(TEST_URL);
+
+  info("Select the main content node");
+  await selectNode(".main-content", inspector);
+
+  info("Take a screenshot of the element and verify it looks as expected");
+  const image = await takeNodeScreenshot(inspector);
+  // We only check that we have the right background color, since it would be difficult
+  // to assert the look of any other area in the page.
+  await checkImageColorAt({
+    image,
+    x: 0,
+    y: 0,
+    expectedColor: `rgb(249, 249, 250)`,
+    label: "The screenshot was taken",
+  });
+
+  await toolbox.destroy();
+});

devtools/server/actors/screenshot-content.js

@@ -26,7 +26,7 @@ exports.ScreenshotContentActor = ActorClassWithSpec(screenshotContentSpec, {
   },
 
   _getRectForNode(node) {
-    return getRect(null, node, node.ownerGlobal);
+    return getRect(node.ownerGlobal.top, node, node.ownerGlobal);
   },
 
   /**