From 635112f29d359fc9a4531137d8150afe680513bf Mon Sep 17 00:00:00 2001
From: Alexandre Poirot <poirot.alex@gmail.com>
Date: Wed, 18 Jan 2017 22:08:10 +0100
Subject: [PATCH] Bug 1326753 - Fix inspect node from browser context menu
 against elements in iframes. r=pbro

MozReview-Commit-ID: C4dvnISlneS

--HG--
extra : rebase_source : 09e5646b8ef214bff40bd2f8f6fa6b57ca348fd0
---
 devtools/client/framework/devtools-browser.js | 35 ++++++++++++++---
 devtools/client/inspector/test/browser.ini    |  1 +
 ...wser_inspector_inspect_node_contextmenu.js | 38 +++++++++++++++++++
 3 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js

diff --git a/devtools/client/framework/devtools-browser.js b/devtools/client/framework/devtools-browser.js
index 7298599b5e16..efe54eb8a26f 100644
--- a/devtools/client/framework/devtools-browser.js
+++ b/devtools/client/framework/devtools-browser.js
@@ -295,7 +295,13 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
 
   inspectNode: function (tab, node) {
     let target = TargetFactory.forTab(tab);
-    let selector = findCssSelector(node);
+
+    // Generate a cross iframes query selector
+    let selectors = [];
+    while(node) {
+      selectors.push(findCssSelector(node));
+      node = node.ownerDocument.defaultView.frameElement;
+    }
 
     return gDevTools.showToolbox(target, "inspector").then(toolbox => {
       let inspector = toolbox.getCurrentPanel();
@@ -304,11 +310,28 @@ var gDevToolsBrowser = exports.gDevToolsBrowser = {
       // browser is remote or not.
       let onNewNode = inspector.selection.once("new-node-front");
 
-      inspector.walker.getRootNode().then(rootNode => {
-        return inspector.walker.querySelector(rootNode, selector);
-      }).then(node => {
-        inspector.selection.setNodeFront(node, "browser-context-menu");
-      });
+      // Evaluate the cross iframes query selectors
+      function querySelectors(nodeFront) {
+        let selector = selectors.pop();
+        if (!selector) {
+          return Promise.resolve(nodeFront);
+        }
+        return inspector.walker.querySelector(nodeFront, selector)
+          .then(node => {
+            if (selectors.length > 0) {
+              return inspector.walker.children(node).then(({ nodes }) => {
+                return nodes[0]; // This is the NodeFront for the document node inside the iframe
+              });
+            }
+            return node;
+          }).then(querySelectors);
+      }
+      inspector.walker.getRootNode()
+        .then(querySelectors)
+        .then(node =>  {
+          // Select the final node
+          inspector.selection.setNodeFront(node, "browser-context-menu");
+        });
 
       return onNewNode.then(() => {
         // Now that the node has been selected, wait until the inspector is
diff --git a/devtools/client/inspector/test/browser.ini b/devtools/client/inspector/test/browser.ini
index adcca411d00b..5d52b07cc04d 100644
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -120,6 +120,7 @@ skip-if = (os == 'linux' && bits == 32 && debug) # bug 1328915, disable linux32
 [browser_inspector_initialization.js]
 skip-if = (e10s && debug) # Bug 1250058 - Docshell leak on debug e10s
 [browser_inspector_inspect-object-element.js]
+[browser_inspector_inspect_node_contextmenu.js]
 [browser_inspector_invalidate.js]
 [browser_inspector_keyboard-shortcuts-copy-outerhtml.js]
 subsuite = clipboard
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 000000000000..d3dbda4a7a3d
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js
@@ -0,0 +1,38 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* 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/. */
+/* globals getTestActorWithoutToolbox */
+"use strict";
+
+// Tests for inspect node in browser context menu
+
+const FRAME_URI = "data:text/html;charset=utf-8," +
+  encodeURI(`<div id="in-frame">div in the iframe</div>`);
+const HTML = `
+  <div id="salutation">Salution in top document</div>
+  <iframe src="${FRAME_URI}"></iframe>
+`;
+
+const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
+
+add_task(function* () {
+  let tab = yield addTab(TEST_URI);
+  let testActor = yield getTestActorWithoutToolbox(tab);
+
+  yield testContextMenuWithinIframe(testActor);
+});
+
+function* testContextMenuWithinIframe(testActor) {
+  info("Opening inspector via 'Inspect Element' context menu item within an iframe");
+  let selector = ["iframe", "#in-frame"];
+  yield clickOnInspectMenuItem(testActor, selector);
+
+  info("Checking inspector state.");
+  let inspector = getActiveInspector();
+  let nodeFront = yield getNodeFrontInFrame("#in-frame", "iframe", inspector);
+
+  is(inspector.selection.nodeFront, nodeFront,
+     "Right node is selected in the markup view");
+}