1 files changed, 140 insertions, 0 deletions
diff --git a/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js
new file mode 100644
index 0000000000..b531730ed6
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js
@@ -0,0 +1,140 @@
+/* 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";
+
+// Tests for inspecting iframes and frames in browser context menu
+const IFRAME_URI = `data:text/html;charset=utf-8,${encodeURI(
+  `<div id="in-iframe">div in the iframe</div>`
+)}`;
+const TEST_IFRAME_DOC_URI = `data:text/html;charset=utf-8,${encodeURI(`
+  <div id="salutation">Salution in top document</div>
+  <iframe src="${IFRAME_URI}"></iframe>`)}`;
+
+// <frameset> acts as the body element, so we can't use them in a document with other elements
+// and have to set a dedicated document so we can test them.
+const SAME_ORIGIN_FRAME_URI = `https://example.com/document-builder.sjs?html=<h2 id=in-same-origin-frame>h2 in the same origin frame</h2>`;
+const REMOTE_ORIGIN_FRAME_URI = `https://example.org/document-builder.sjs?html=<h3 id=in-remote-frame>h3 in the remote frame</h3>`;
+const TEST_FRAME_DOC_URI = `https://example.com/document-builder.sjs?html=${encodeURI(`
+  <frameset cols="50%,50%">
+    <frame class=same-origin src="${SAME_ORIGIN_FRAME_URI}"></frame>
+    <frame class=remote src="${REMOTE_ORIGIN_FRAME_URI}"></frame>
+  </frameset>`)}`;
+
+add_task(async function () {
+  await pushPref("devtools.command-button-frames.enabled", true);
+  await addTab(TEST_IFRAME_DOC_URI);
+  info(
+    "Test inspecting element in <iframe> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["iframe", "#in-iframe"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(["iframe", "#in-iframe"], inspector),
+  });
+
+  info(
+    "Test inspecting element in <iframe> with iframe document selected in the frame picker"
+  );
+  await changeToolboxToFrame(IFRAME_URI, 2);
+  await testContextMenuWithinFrame({
+    selector: ["iframe", "#in-iframe"],
+    nodeFrontGetter: inspector => getNodeFront("#in-iframe", inspector),
+  });
+  await changeToolboxToFrame(TEST_IFRAME_DOC_URI, 2);
+
+  await navigateTo(TEST_FRAME_DOC_URI);
+
+  info(
+    "Test inspecting element in same origin <frame> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["frame.same-origin", "#in-same-origin-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(
+        ["frame.same-origin", "#in-same-origin-frame"],
+        inspector
+      ),
+  });
+
+  info(
+    "Test inspecting element in remote <frame> with top document selected in the frame picker"
+  );
+  await testContextMenuWithinFrame({
+    selector: ["frame.remote", "#in-remote-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFrontInFrames(["frame.remote", "#in-remote-frame"], inspector),
+  });
+
+  info(
+    "Test inspecting element in <frame> with frame document selected in the frame picker"
+  );
+  await changeToolboxToFrame(SAME_ORIGIN_FRAME_URI, 3);
+  await testContextMenuWithinFrame({
+    selector: ["frame.same-origin", "#in-same-origin-frame"],
+    nodeFrontGetter: inspector =>
+      getNodeFront("#in-same-origin-frame", inspector),
+  });
+});
+
+/**
+ * Pick a given element on the page with the 'Inspect Element' context menu entry and check
+ * that the expected node is selected in the markup view.
+ *
+ * @param {Object} options
+ * @param {Array<String>} options.selector: The selector of the element in the frame we
+ *                        want to select
+ * @param {Function} options.nodeFrontGetter: A function that will be executed to retrieve
+ *                   the nodeFront that should be selected as a result of the 'Inspect Element' action.
+ */
+async function testContextMenuWithinFrame({ selector, nodeFrontGetter }) {
+  info(
+    `Opening inspector via 'Inspect Element' context menu on ${JSON.stringify(
+      selector
+    )}`
+  );
+  await clickOnInspectMenuItem(selector);
+
+  info("Checking inspector state.");
+  const inspector = await getActiveInspector();
+  const nodeFront = await nodeFrontGetter(inspector);
+
+  is(
+    inspector.selection.nodeFront,
+    nodeFront,
+    "Right node is selected in the markup view"
+  );
+}
+
+/**
+ * Select a specific document in the toolbox frame picker
+ *
+ * @param {String} frameUrl: The frame URL to select
+ * @param {Number} expectedFramesCount: The number of frames that should be displayed in
+ *                 the frame picker
+ */
+async function changeToolboxToFrame(frameUrl, expectedFramesCount) {
+  const { toolbox } = await getActiveInspector();
+
+  const btn = toolbox.doc.getElementById("command-button-frames");
+  const panel = toolbox.doc.getElementById("command-button-frames-panel");
+  btn.click();
+  ok(panel, "popup panel has created.");
+  await waitUntil(() => panel.classList.contains("tooltip-visible"));
+
+  info("Select the iframe in the frame list.");
+  const menuList = toolbox.doc.getElementById("toolbox-frame-menu");
+  const frames = Array.from(menuList.querySelectorAll(".command"));
+  is(frames.length, expectedFramesCount, "Two frames shown in the switcher");
+
+  const innerFrameButton = frames.find(
+    frame => frame.querySelector(".label").textContent === frameUrl
+  );
+  ok(innerFrameButton, `Found frame button for inner frame "${frameUrl}"`);
+
+  const newRoot = toolbox.getPanel("inspector").once("new-root");
+  info(`Switch toolbox to inner frame "${frameUrl}"`);
+  innerFrameButton.click();
+  await newRoot;
+}