1 files changed, 152 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js
new file mode 100644
index 0000000000..bb79e7f81b
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu_nested.js
@@ -0,0 +1,152 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Test Inspect Element feature with nested iframes of different origins.
+// root (example.net)
+//   remote_frame1 (example.com)
+//     nested_same_process_frame (example.com, same as parent)
+//   same_process_frame (example.net, same as root)
+//   remote_frame2 (example.org)
+//     nested_remote_frame (example.com)
+
+// Build the remote_frame1 hierarchy
+const NESTED_SAME_PROCESS_FRAME_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(
+    `<div id="in-nested_same_process_frame">in-nested_same_process_frame`
+  );
+const REMOTE_FRAME1_HTML = `<iframe id="nested_same_process_frame" src="${NESTED_SAME_PROCESS_FRAME_URI}"></iframe>`;
+const REMOTE_FRAME1_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(REMOTE_FRAME1_HTML);
+
+// Build the same_process_frame hierarchy
+const SAME_PROCESS_FRAME_URI =
+  "https://example.net/document-builder.sjs?html=" +
+  encodeURI(`<div id="in-same_process_frame">in-same_process_frame`);
+
+// Build the remote_frame2 hierarchy
+const NESTED_REMOTE_FRAME_URI =
+  "https://example.com/document-builder.sjs?html=" +
+  encodeURI(`<div id="in-nested_remote_frame">in-nested_remote_frame`);
+const REMOTE_FRAME2_HTML = `<iframe id="nested_remote_frame" src="${NESTED_REMOTE_FRAME_URI}"></iframe>`;
+const REMOTE_FRAME2_URI =
+  "https://example.org/document-builder.sjs?html=" +
+  encodeURI(REMOTE_FRAME2_HTML);
+
+// Assemble all frames in a single test page.
+const HTML = `
+  <iframe id="remote_frame1" src="${REMOTE_FRAME1_URI}"></iframe>
+  <iframe id="same_process_frame" src="${SAME_PROCESS_FRAME_URI}"></iframe>
+  <iframe id="remote_frame2" src="${REMOTE_FRAME2_URI}"></iframe>
+`;
+const TEST_URI =
+  "https://example.net/document-builder.sjs?html=" + encodeURI(HTML);
+
+add_task(async function () {
+  const tab = await addTab(TEST_URI);
+
+  info("Retrieve the browsing context for nested_same_process_frame");
+  const nestedSameProcessFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      const remote_frame1 = content.document.getElementById("remote_frame1");
+      return SpecialPowers.spawn(remote_frame1, [], function () {
+        return content.document.getElementById(
+          "nested_same_process_frame"
+        ).browsingContext;
+      });
+    }
+  );
+  await inspectElementInBrowsingContext(
+    nestedSameProcessFrameBC,
+    "#in-nested_same_process_frame"
+  );
+  await checkSelectedNode("in-nested_same_process_frame");
+
+  info("Retrieve the browsing context for same_process_frame");
+  const sameProcessFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      return content.document.getElementById("same_process_frame")
+        .browsingContext;
+    }
+  );
+  await inspectElementInBrowsingContext(
+    sameProcessFrameBC,
+    "#in-same_process_frame"
+  );
+  await checkSelectedNode("in-same_process_frame");
+
+  info("Retrieve the browsing context for nested_remote_frame");
+  const nestedRemoteFrameBC = await SpecialPowers.spawn(
+    tab.linkedBrowser,
+    [],
+    function () {
+      const remote_frame2 = content.document.getElementById("remote_frame2");
+      return SpecialPowers.spawn(remote_frame2, [], function () {
+        return content.document.getElementById(
+          "nested_remote_frame"
+        ).browsingContext;
+      });
+    }
+  );
+  await inspectElementInBrowsingContext(
+    nestedRemoteFrameBC,
+    "#in-nested_remote_frame"
+  );
+  await checkSelectedNode("in-nested_remote_frame");
+});
+
+/**
+ * Check the id of currently selected node front in the inspector.
+ */
+async function checkSelectedNode(id) {
+  const inspector = await getActiveInspector();
+  is(
+    inspector.selection.nodeFront.id,
+    id,
+    "The correct node is selected in the markup view"
+  );
+}
+
+/**
+ * Use inspect element on the element matching the provided selector in a given
+ * browsing context.
+ *
+ * Note: adapted from head.js `clickOnInspectMenuItem` in order to work with a
+ * browsingContext instead of a test actor.
+ */
+async function inspectElementInBrowsingContext(browsingContext, selector) {
+  info(
+    `Show the context menu for selector "${selector}" in browsing context ${browsingContext.id}`
+  );
+  const contentAreaContextMenu = document.querySelector(
+    "#contentAreaContextMenu"
+  );
+  const contextOpened = once(contentAreaContextMenu, "popupshown");
+
+  const options = { type: "contextmenu", button: 2 };
+  await BrowserTestUtils.synthesizeMouse(
+    selector,
+    0,
+    0,
+    options,
+    browsingContext
+  );
+
+  await contextOpened;
+
+  info("Triggering the inspect action");
+  await gContextMenu.inspectNode();
+
+  info("Hiding the menu");
+  const contextClosed = once(contentAreaContextMenu, "popuphidden");
+  contentAreaContextMenu.hidePopup();
+  await contextClosed;
+}