--- a/devtools/client/dom/content/components/dom-tree.js
+++ b/devtools/client/dom/content/components/dom-tree.js
@@ -53,37 +53,52 @@ var DomTree = React.createClass({
    */
   render: function () {
     let columns = [{
       "id": "value"
     }];
 
     let onDOMNodeMouseOver;
     let onDOMNodeMouseOut;
+    let onInspectIconClick;
     let toolbox = DomProvider.getToolbox();
     if (toolbox) {
       onDOMNodeMouseOver = (grip, options = {}) => {
         return toolbox.highlighterUtils
           ? toolbox.highlighterUtils.highlightDomValueGrip(grip, options)
           : null;
       };
       onDOMNodeMouseOut = (forceHide = false) => {
         return toolbox.highlighterUtils
           ? toolbox.highlighterUtils.unhighlight(forceHide)
           : null;
       };
+      onInspectIconClick = async (grip) => {
+        let onSelectInspector = toolbox.selectTool("inspector");
+        let onGripNodeToFront = toolbox.highlighterUtils.gripToNodeFront(grip);
+        let [
+          front,
+          inspector
+        ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
+
+        let onInspectorUpdated = inspector.once("inspector-updated");
+        let onNodeFrontSet = toolbox.selection.setNodeFront(front, "console");
+
+        return Promise.all([onNodeFrontSet, onInspectorUpdated]);
+      };
     }
 
     // This is the integration point with Reps. The DomTree is using
     // Reps to render all values. The code also specifies default rep
     // used for data types that don't have its own specific template.
     let renderValue = props => {
       return Rep(Object.assign({}, props, {
         onDOMNodeMouseOver,
         onDOMNodeMouseOut,
+        onInspectIconClick,
         defaultRep: Grip,
         cropLimit: 50,
       }));
     };
 
     return (
       TreeView({
         object: this.props.object,

--- a/devtools/client/dom/test/browser.ini
+++ b/devtools/client/dom/test/browser.ini
@@ -7,8 +7,9 @@ support-files =
   page_basic.html
   page_hover_nodes.html
   !/devtools/client/framework/test/shared-head.js
 
 [browser_dom_array.js]
 [browser_dom_basic.js]
 [browser_dom_refresh.js]
 [browser_dom_nodes_highlight.js]
+[browser_dom_nodes_select.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/dom/test/browser_dom_nodes_select.js
@@ -0,0 +1,43 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TEST_PAGE_URL = URL_ROOT + "page_hover_nodes.html";
+
+/**
+ * Checks whether hovering nodes highlight them in the content page
+ */
+add_task(async function () {
+  info("Test DOM panel node highlight started");
+
+  let { panel } = await addTestTab(TEST_PAGE_URL);
+  const toolbox = gDevTools.getToolbox(panel.target);
+  let node = getRowByIndex(panel, 2);
+
+  // Loading the inspector panel at first, to make it possible to listen for
+  // new node selections
+
+  await toolbox.loadTool("inspector");
+  const inspector = toolbox.getPanel("inspector");
+
+  let openInInspectorIcon = node.querySelector(".open-inspector");
+  ok(node !== null, "Node was logged as expected");
+
+  info("Clicking on the inspector icon and waiting for the " +
+       "inspector to be selected");
+  let onInspectorSelected = toolbox.once("inspector-selected");
+  let onInspectorUpdated = inspector.once("inspector-updated");
+  let onNewNode = toolbox.selection.once("new-node-front");
+
+  openInInspectorIcon.click();
+
+  await onInspectorSelected;
+  await onInspectorUpdated;
+  let nodeFront = await onNewNode;
+
+  ok(true, "Inspector selected and new node got selected");
+  is(nodeFront.displayName, "h1", "The expected node was selected");
+});