Create jQuery cache grip + handle cache clicking

Author: janodvarko

lib/firequery-actor.js

@@ -156,7 +156,11 @@ var FireQueryActor = ActorClass(
 
         let cache = hasJQueryCache(desc.value);
         if (cache) {
-          grip.preview.cache = cache;
+          cache = Cu.unwaiveXrays(cache);
+          cache = makeDebuggeeValueIfNeeded(actor.obj, cache);
+          grip.preview.cache = actor.threadActor.createValueGrip(cache);
+
+          // xxxHonza: generate preview for the cache?
         }
       } else {
         items.push(null);

lib/jquery-renderer.js

@@ -12,15 +12,13 @@ const { Trace, TraceError } = require("firebug.sdk/lib/core/trace.js").get(modul
 // DevTools
 const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const { Widgets } = devtools.require("devtools/webconsole/console-output");
+const { VariablesView } = Cu.import("resource:///modules/devtools/VariablesView.jsm", {});
 
 const XHTML_NS = "http://www.w3.org/1999/xhtml";
 
 /**
  * @widget This object represents a widget that is used to render
  * generic jQuery object preview.
- *
- * xxxHonza: Use envelope "✉" to indicate jQuery data.
-
  */
 var JQueryRenderer = {
   byKind: "jQuery",
@@ -93,15 +91,34 @@ var JQueryRenderer = {
     }
   },
 
-  renderCache: function(element, parentNode) {
-    if (!element.preview.cache) {
+  renderCache: function(elementGrip, parentNode) {
+    let cacheGrip = elementGrip.preview ? elementGrip.preview.cache : null;
+    if (!cacheGrip) {
       return;
     }
 
-    let cache = this.document.createElementNS(XHTML_NS, "span");
-    cache.className = "cache"
-    cache.innerHTML = "✉"
-    parentNode.appendChild(cache);
+    // Render a little envelop sign if the element has jQuery data
+    // associated. Clicking on the envelope opens the variable view
+    // with detailed information.
+    let node = this.document.createElementNS(XHTML_NS, "span");
+    node.className = "cache"
+    node.innerHTML = "✉"
+    parentNode.appendChild(node);
+
+    // Click handler
+    let clickHandler = this.onClickCache.bind(this, cacheGrip);
+    this.message._addLinkCallback(node, clickHandler);
+  },
+
+  onClickCache: function(cacheGrip) {
+    Trace.sysout("JQueryRenderer.onClickCache;", cacheGrip);
+
+    // Open {@link VariablesView} displaying the jQuery object (cache).
+    this.output.openVariablesView({
+      label: VariablesView.getString(cacheGrip, { concise: true }),
+      objectActor: cacheGrip,
+      autofocus: true,
+    });
   }
 };