Inspector panel customization + temp NodeActor patch

Author: janodvarko

lib/firequery-actor.js

@@ -5,19 +5,21 @@
 /**
  * This module is loaded on the backend (can be a remote device) where
  * some module or features (such as Tracing console) don't have to
- * be available.
+ * be available. Also Firebug SDK isn't available on the backend.
  */
 
+// Add-on SDK
 const { Cu } = require("chrome");
 
-// Remote Debugging Protocol API
+// DevTools
 const { DebuggerServer } = Cu.import("resource://gre/modules/devtools/dbg-server.jsm", {});
 const { devtools } = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 const protocol = devtools["require"]("devtools/server/protocol");
 const { method, RetVal, ActorClass, Actor, Arg } = protocol;
 const Events = require("sdk/event/core");
 const { makeInfallible } = devtools["require"]("devtools/toolkit/DevToolsUtils.js");
 const DevToolsUtils = devtools["require"]("devtools/toolkit/DevToolsUtils");
+const { NodeActor } = devtools["require"]("devtools/server/actors/inspector");
 
 const Previewers = DebuggerServer.ObjectActorPreviewers;
 
@@ -79,6 +81,8 @@ var FireQueryActor = ActorClass(
 
     this.parent = parent;
     this.state = "detached";
+
+    this.onDomNodeForm = this.onDomNodeForm.bind(this);
   },
 
   /**
@@ -117,6 +121,8 @@ var FireQueryActor = ActorClass(
     this.state = "attached";
 
     Previewers.Object.unshift(this.onBuildPreview.bind(this));
+
+    DebuggerServer.on("domnode-form", this.onDomNodeForm);
   }), {
     request: {},
     response: {
@@ -202,6 +208,12 @@ var FireQueryActor = ActorClass(
       type: "detached"
     }
   }),
+
+  // Debugger Server Events
+
+  onDomNodeForm: function(eventId, nodeActor, form) {
+    form.jQueryCacheData = hasJQueryCache(nodeActor.rawNode);
+  }
 });
 
 // Helpers
@@ -245,5 +257,14 @@ function hasJQueryCache(object) {
   }
 };
 
+// Patching NodeActor (add custom info into actor form)
+// xxxHonza: Bug 1036949 - New API: MarkupView customization
+let originalForm = NodeActor.prototype.form;
+NodeActor.prototype.form = function(detail) {
+  let form = originalForm.apply(this, arguments);
+  DebuggerServer.emit("domnode-form", this, form);
+  return form;
+}
+
 // Exports from this module
 exports.FireQueryActor = FireQueryActor;

lib/inspector-overlay.js

@@ -6,11 +6,17 @@ module.metadata = {
   "stability": "stable"
 };
 
+// Add-on SDK
 const { Cu, Ci } = require("chrome");
-const { Trace, TraceError } = require("firebug.sdk/lib/core/trace.js").get(module.id);
 const { Class } = require("sdk/core/heritage");
+
+// Firebug SDK
+const { Trace, TraceError } = require("firebug.sdk/lib/core/trace.js").get(module.id);
 const { PanelOverlay } = require("firebug.sdk/lib/panel-overlay.js");
 
+// Constants
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+
 /**
  * @overlay This object represents an overlay for the existing
  * Inspector panel it's responsible for the panel customization.
@@ -22,14 +28,17 @@ const InspectorOverlay = Class(
   extends: PanelOverlay,
 
   overlayId: "fireQueryInspectorOverlay",
-  panelId: "webconsole",
+  panelId: "inspector",
 
   // Initialization
 
   initialize: function(options) {
     PanelOverlay.prototype.initialize.apply(this, arguments);
 
     Trace.sysout("InspectorOverlay.initialize;", options);
+
+    this.onMarkupViewRender = this.onMarkupViewRender.bind(this);
+    this.onMarkupViewLoaded = this.onMarkupViewLoaded.bind(this);
   },
 
   destroy: function() {
@@ -42,13 +51,47 @@ const InspectorOverlay = Class(
     PanelOverlay.prototype.onBuild.apply(this, arguments);
 
     Trace.sysout("InspectorOverlay.onBuild;", options);
+
+    // Handle MarkupView events.
+    this.panel.on("markupview-render", this.onMarkupViewRender);
+    this.panel.on("markuploaded", this.onMarkupViewLoaded);
   },
 
   onReady: function(options) {
     PanelOverlay.prototype.onReady.apply(this, arguments);
 
     Trace.sysout("InspectorOverlay.onReady;", options);
   },
+
+  // MarkupView Event Handlers
+
+  onMarkupViewRender: function(eventId, node, type, data, options) {
+    if (type != "element") {
+      return;
+    }
+
+    let value;
+    let nodeFront = data.node;
+    let cache = nodeFront._form.jQueryCacheData;
+
+    if (!cache) {
+      return;
+    }
+
+    let doc = node.ownerDocument;
+
+    for (var data in cache) {
+      if (cache.hasOwnProperty(data)) {
+        let label = doc.createElementNS(XHTML_NS, "span");
+        label.innerHTML = cache[data];
+        node.appendChild(label);
+      }
+    }
+  },
+
+  onMarkupViewLoaded: function() {
+    Trace.sysout("inspectorOverlay.onMarkupViewLoaded;");
+  },
 });
 
 // Exports from this module