Bug 1307940 - Add icon next to ElementNodeRep to select node in inspector; r=bgrins,jdescottes

MozReview-Commit-ID: InGASswqAAA

--HG--
extra : rebase_source : 0c522bdf2aafeca61019352d537982a3983803bd

devtools/client/themes/webconsole.css

@@ -800,6 +800,17 @@ a.learn-more-link.webconsole-learn-more-link {
   display: none;
 }
 
+/*
+ * Open DOMNode in inspector button. Style need to be reset in the new
+ * console since its style is already defined in reps.css .
+ */
+.webconsole-output-wrapper .open-inspector {
+  background: unset;
+  padding-left: unset;
+  margin-left: unset;
+  cursor: unset;
+}
+
 /* console.table() */
 .new-consoletable {
   width: 100%;

devtools/client/webconsole/new-console-output/components/grip-message-body.js

@@ -61,9 +61,11 @@ function GripMessageBody(props) {
 
   let onDOMNodeMouseOver;
   let onDOMNodeMouseOut;
+  let onInspectIconClick;
   if (serviceContainer) {
     onDOMNodeMouseOver = (object) => serviceContainer.highlightDomElement(object);
     onDOMNodeMouseOut = serviceContainer.unHighlightDomElement;
+    onInspectIconClick = (object) => serviceContainer.openNodeInInspector(object);
   }
 
   return (
@@ -81,6 +83,7 @@ function GripMessageBody(props) {
         objectLink: VariablesViewLink,
         onDOMNodeMouseOver,
         onDOMNodeMouseOut,
+        onInspectIconClick,
         defaultRep: Grip,
         mode: props.mode,
       })

devtools/client/webconsole/new-console-output/new-console-output-wrapper.js

@@ -101,8 +101,26 @@ NewConsoleOutputWrapper.prototype = {
             ? this.toolbox.highlighterUtils.unhighlight(forceHide)
             : null;
         },
+        openNodeInInspector: async (grip) => {
+          if (!this.toolbox) {
+            return Promise.reject("no toolbox");
+          }
+
+          let onSelectInspector = this.toolbox.selectTool("inspector");
+          let onGripNodeToFront = this.toolbox.highlighterUtils.gripToNodeFront(grip);
+          let [
+            front,
+            inspector
+          ] = await Promise.all([onGripNodeToFront, onSelectInspector]);
+
+          let onInspectorUpdated = inspector.once("inspector-updated");
+          let onNodeFrontSet = this.toolbox.selection.setNodeFront(front, "console");
+
+          return Promise.all([onNodeFrontSet, onInspectorUpdated]);
+        }
       }
     });
+
     let filterBar = FilterBar({
       serviceContainer: {
         attachRefToHud