Bug 1307940 - Add icon next to ElementNodeRep to select node in inspector; r=bgrins,jdescottes
authornchevobbe <nchevobbe@mozilla.com>
Fri, 21 Apr 2017 09:23:11 +0200
changeset 354656 d366721c625ac0144e3150c79779c8be9593419b
parent 354571 c100351d959148fd1f75ff0544ea0a215f8f7c22
child 354657 41707640410633e895f2c10f135c8992304d2208
push id31708
push userihsiao@mozilla.com
push dateTue, 25 Apr 2017 03:16:26 +0000
treeherdermozilla-central@f0621f7f0520 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, jdescottes
bugs1307940
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1307940 - Add icon next to ElementNodeRep to select node in inspector; r=bgrins,jdescottes MozReview-Commit-ID: InGASswqAAA
devtools/client/themes/webconsole.css
devtools/client/webconsole/new-console-output/components/grip-message-body.js
devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -795,16 +795,27 @@ a.learn-more-link.webconsole-learn-more-
   margin-inline-end: 5px;
 }
 
 .message.startGroup .icon,
 .message.startGroupCollapsed .icon {
   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%;
   border-collapse: collapse;
   --consoletable-border: 1px solid var(--table-splitter-color);
 }
 
 .new-consoletable thead,
--- a/devtools/client/webconsole/new-console-output/components/grip-message-body.js
+++ b/devtools/client/webconsole/new-console-output/components/grip-message-body.js
@@ -56,19 +56,21 @@ function GripMessageBody(props) {
 
   let styleObject;
   if (userProvidedStyle && userProvidedStyle !== "") {
     styleObject = cleanupStyle(userProvidedStyle, serviceContainer.createElement);
   }
 
   let onDOMNodeMouseOver;
   let onDOMNodeMouseOut;
+  let onInspectIconClick;
   if (serviceContainer) {
     onDOMNodeMouseOver = (object) => serviceContainer.highlightDomElement(object);
     onDOMNodeMouseOut = serviceContainer.unHighlightDomElement;
+    onInspectIconClick = (object) => serviceContainer.openNodeInInspector(object);
   }
 
   return (
     // @TODO once there is a longString rep, also turn off quotes for those.
     typeof grip === "string"
       ? StringRep({
         object: grip,
         useQuotes: useQuotes,
@@ -76,16 +78,17 @@ function GripMessageBody(props) {
         mode: props.mode,
         style: styleObject
       })
       : Rep({
         object: grip,
         objectLink: VariablesViewLink,
         onDOMNodeMouseOver,
         onDOMNodeMouseOut,
+        onInspectIconClick,
         defaultRep: Grip,
         mode: props.mode,
       })
   );
 }
 
 function cleanupStyle(userProvidedStyle, createElement) {
   // Regular expression that matches the allowed CSS property names.
--- a/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
+++ b/devtools/client/webconsole/new-console-output/new-console-output-wrapper.js
@@ -96,18 +96,36 @@ NewConsoleOutputWrapper.prototype = {
             ? this.toolbox.highlighterUtils.highlightDomValueGrip(grip, options)
             : null;
         },
         unHighlightDomElement: (forceHide = false) => {
           return this.toolbox && this.toolbox.highlighterUtils
             ? 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
       }
     });
 
     let provider = React.createElement(
       Provider,