Load stylesheet into the MarkupView

Author: janodvarko

chrome/skin/classic/shared/firequery.css

@@ -1,5 +1,8 @@
 /* See license.txt for terms of usage */
 
+/******************************************************************************/
+/* Console Panel */
+
 .kind-jQuery .cm-variable {
   color: #4B0082;
 }
@@ -10,3 +13,16 @@
   margin-left: 2px;
   cursor: pointer;
 }
+
+/******************************************************************************/
+/* Inspector Panel */
+
+.fireQueryNodeData {
+  font-size: 90%;
+  color: #4B0082;
+  background-color: #ddd;
+  margin-left: 3px;
+  margin-right: 3px;
+  padding: 0px 4px;
+  border-radius: 2px;
+}

lib/inspector-overlay.js

@@ -9,6 +9,7 @@ module.metadata = {
 // Add-on SDK
 const { Cu, Ci } = require("chrome");
 const { Class } = require("sdk/core/heritage");
+const { loadSheet, removeSheet } = require("sdk/stylesheet/utils");
 
 // Firebug SDK
 const { Trace, TraceError } = require("firebug.sdk/lib/core/trace.js").get(module.id);
@@ -78,19 +79,26 @@ const InspectorOverlay = Class(
       return;
     }
 
+    Trace.sysout("InspectorOverlay.onMarkupViewRender;", cache);
+
     let doc = node.ownerDocument;
 
     for (var data in cache) {
       if (cache.hasOwnProperty(data)) {
         let label = doc.createElementNS(XHTML_NS, "span");
-        label.innerHTML = cache[data];
+        label.className = "fireQueryNodeData";
+        label.innerHTML = JSON.stringify(cache[data]);
         node.appendChild(label);
       }
     }
   },
 
   onMarkupViewLoaded: function() {
     Trace.sysout("inspectorOverlay.onMarkupViewLoaded;");
+
+    // xxxHonza: unload on destroy.
+    let win = this.panel._markupFrame.contentWindow;
+    loadSheet(win, "chrome://firequery/skin/firequery.css", "author");
   },
 });