Bug 1446572 - Adjust node inspection for toolbox's selected frame. r=pbro

When inspecting a node with the toolbox focused on an inner frame, we need to
adjust the selectors used to remove hidden parent frames.

MozReview-Commit-ID: CXwb3FmnJFO

--HG--
extra : rebase_source : df8b01286fe8ebe38cb93cfe05bbd24e7f97d40d

devtools/client/framework/devtools.js

@@ -625,6 +625,10 @@ DevTools.prototype = {
     let toolbox = await gDevTools.showToolbox(target, "inspector", null, null, startTime);
     let inspector = toolbox.getCurrentPanel();
 
+    // If the toolbox has been switched into a nested frame, we should first remove
+    // selectors according to the frame depth.
+    nodeSelectors.splice(0, toolbox.selectedFrameDepth);
+
     // new-node-front tells us when the node has been selected, whether the
     // browser is remote or not.
     let onNewNode = inspector.selection.once("new-node-front");

devtools/client/framework/toolbox.js

@@ -2289,8 +2289,7 @@ Toolbox.prototype = {
    */
   onHightlightFrame: async function(frameId) {
     // Only enable frame highlighting when the top level document is targeted
-    if (this._supportsFrameHighlight &&
+    if (this._supportsFrameHighlight && this.rootFrameSelected) {
-        this.frameMap.get(this.selectedFrameId).parentID === undefined) {
       let frameActor = await this.walker.getNodeActorFromWindowID(frameId);
       this.highlighterUtils.highlightNodeFront(frameActor);
     }
@@ -2363,6 +2362,34 @@ Toolbox.prototype = {
     }
   },
 
+  /**
+   * Returns a 0-based selected frame depth.
+   *
+   * For example, if the root frame is selected, the returned value is 0.  For a sub-frame
+   * of the root document, the returned value is 1, and so on.
+   */
+  get selectedFrameDepth() {
+    // If the frame switcher is disabled, we won't have a selected frame ID.
+    // In this case, we're always showing the root frame.
+    if (!this.selectedFrameId) {
+      return 0;
+    }
+    let depth = 0;
+    let frame = this.frameMap.get(this.selectedFrameId);
+    while (frame) {
+      depth++;
+      frame = this.frameMap.get(frame.parentID);
+    }
+    return depth - 1;
+  },
+
+  /**
+   * Returns whether a root frame (with no parent frame) is selected.
+   */
+  get rootFrameSelected() {
+    return this.selectedFrameDepth == 0;
+  },
+
   /**
    * Switch to the last used host for the toolbox UI.
    */

devtools/client/inspector/test/browser_inspector_inspect_node_contextmenu.js

@@ -1,9 +1,9 @@
-/* -*- 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
@@ -18,21 +18,56 @@ const HTML = `
 const TEST_URI = "data:text/html;charset=utf-8," + encodeURI(HTML);
 
 add_task(async function() {
+  Services.prefs.setBoolPref("devtools.command-button-frames.enabled", true);
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref("devtools.command-button-frames.enabled");
+  });
+
   let tab = await addTab(TEST_URI);
   let testActor = await getTestActorWithoutToolbox(tab);
 
-  await testContextMenuWithinIframe(testActor);
+  // Use context menu with root frame selected in toolbox
+  await testContextMenuWithinIframe(testActor, async inspector => {
+    return getNodeFrontInFrame("#in-frame", "iframe", inspector);
+  });
+
+  // Use context menu with inner frame selected in toolbox
+  await changeToolboxToInnerFrame();
+  await testContextMenuWithinIframe(testActor, async inspector => {
+    return getNodeFront("#in-frame", inspector);
+  });
 });
 
-async function testContextMenuWithinIframe(testActor) {
+async function testContextMenuWithinIframe(testActor, nodeFrontGetter) {
   info("Opening inspector via 'Inspect Element' context menu item within an iframe");
   let selector = ["iframe", "#in-frame"];
   await clickOnInspectMenuItem(testActor, selector);
 
   info("Checking inspector state.");
   let inspector = getActiveInspector();
-  let nodeFront = await getNodeFrontInFrame("#in-frame", "iframe", inspector);
+  let nodeFront = await nodeFrontGetter(inspector);
 
   is(inspector.selection.nodeFront, nodeFront,
      "Right node is selected in the markup view");
 }
+
+async function changeToolboxToInnerFrame() {
+  let { toolbox } = getActiveInspector();
+
+  let frameButton = toolbox.doc.getElementById("command-button-frames");
+  let menu = await toolbox.showFramesMenu({
+    target: frameButton
+  });
+  await once(menu, "open");
+
+  let frames = menu.items;
+  is(frames.length, 2, "Two frames shown in the switcher");
+
+  let innerFrameButton = frames.filter(f => f.label == FRAME_URI)[0];
+  ok(innerFrameButton, "Found frame button for inner frame");
+
+  let newRoot = toolbox.getPanel("inspector").once("new-root");
+  info("Switch toolbox to inner frame");
+  innerFrameButton.click();
+  await newRoot;
+}