#24 Support links in the tooltip window

Author: janodvarko

data/markup-tooltip.js

@@ -132,6 +132,17 @@ function getRequiredSize() {
  */
 addEventListener("click", updateSize);
 
+/**
+ * Navigation within the toolbox
+ */
+function onNavigate(event) {
+  var target = event.target;
+  var repObject = event.detail.repObject;
+
+  postChromeMessage("navigate", repObject);
+}
+addEventListener("fbsdk:navigate", onNavigate, true);
+
 // Final initialize message posted to the chrome indicating that
 // all content modules has been successfully loaded.
 postChromeMessage("ready");

data/reps/element.js

@@ -32,7 +32,7 @@ var Element = React.createClass(
 
     if (mode == "tiny") {
       return (
-        ObjectLink({className: ""}, 
+        ObjectLink({className: "element", object: grip},
           SPAN({className: ""},
             SPAN({className: "selectorTag"},
               this.getSelectorTag(grip)

data/reps/regexp.js

@@ -26,9 +26,9 @@ var RegExp = React.createClass(
     var grip = this.props.object;
     return (
       ObjectLink({className: "regexp"},
-        SPAN({"class": "objectTitle"}, this.getTitle(grip)),
+        SPAN({className: "objectTitle"}, this.getTitle(grip)),
         SPAN(" "),
-        SPAN({"class": "regexpSource"}, this.getSource(grip))
+        SPAN({className: "regexpSource"}, this.getSource(grip))
       )
     )
   },

data/reps/text-node.js

@@ -40,7 +40,7 @@ var TextNode = React.createClass(
     return (
       ObjectLink({className: "textNode"},
         "<",
-        SPAN({"class": "nodeTag"}, "TextNode"),
+        SPAN({className: "nodeTag"}, "TextNode"),
         " textContent=\"",
         SPAN({className: "nodeValue"},
           this.getTextContent(grip)

lib/data-tooltip.js

@@ -26,8 +26,12 @@ const { Trace, TraceError, FBTrace } = require("firebug.sdk/lib/core/trace.js").
 const { Content } = require("firebug.sdk/lib/core/content.js");
 const { Locale } = require("firebug.sdk/lib/core/locale.js");
 
+// FireQuery
+const { FireQueryToolboxOverlay } = require("./firequery-toolbox-overlay.js");
+
 // Constants
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
+const ToolboxOverlayId = FireQueryToolboxOverlay.prototype.overlayId;
 
 /**
  * This object implements a tooltip used in the MarkupView that
@@ -36,6 +40,7 @@ const XHTML_NS = "http://www.w3.org/1999/xhtml";
  * of the iframe is implemented by markup-tooltip.html
  */
 function DataTooltip(options) {
+  this.context = options.context;
   this.toolbox = options.toolbox;
   this.markup = options.markup;
   this.target = options.target;
@@ -125,6 +130,18 @@ DataTooltip.prototype =
     });
   },
 
+  onNavigate: function(grip) {
+    let toolboxOverlay = this.context.getOverlay(ToolboxOverlayId);
+    return toolboxOverlay.front.getNode(grip.actor).then(response => {
+      var node = response.node;
+      this.markup.showNode(node).then(() => {
+        // Mark the node as selected and focused.
+        this.markup.markNodeAsSelected(node);
+        this.markup.maybeFocusNewSelection();
+      });
+    });
+  },
+
   // Tooltip Content Communication
 
   onContentMessage: function(event) {
@@ -141,6 +158,9 @@ DataTooltip.prototype =
     case "getPrototypeAndProperties":
       this.onGetPrototypeAndProperties(data.args);
       break;
+    case "navigate":
+      this.onNavigate(data.args);
+      break;
     }
   },
 

lib/firequery-actor.js

@@ -359,6 +359,21 @@ var FireQueryActor = ActorClass(
     response: RetVal("json"),
   }),
 
+  /**
+   * Returns nodeActor/nodeFront according to given actor ID.
+   */
+  getNode: method(expectState("attached", function(actorId) {
+    let walkerActor = this.conn.getActor(this.walkerActorID);
+    return walkerActor.getNodeActorFromObjectActor(actorId);
+  }), {
+    request: {
+      actor: Arg(0, "string"),
+    },
+    response: {
+      node: RetVal("disconnectedNode"),
+    }
+  }),
+
   // Events
 
   /**

lib/inspector-overlay.js

@@ -232,6 +232,7 @@ const InspectorOverlay = Class(
     this.getJQueryData(nodeFront).then(response => {
       // Create jQuery data tooltip object.
       let dataTooltip = new DataTooltip({
+        context: this.context,
         toolbox: this.toolbox,
         markup: this.panel.markup,
         target: event.target,