How to hook into the Firefox Network Request Popup?

Question

I want to try to improve the way the Firefox console pops up network info dialogs. I tried overlay:

overlay chrome://browser/content/NetworkPanel.xhtml chrome://devtooltweaks/content/netWinOverlay.xul

but it doesn't seem to work. I looked in the source, and the file looks like there's no code to display elements, another form must be calling it. I'm wondering if there is an easy way to add features to this popup window, from a Firefox extension?

--Update--

I found some relevant code in NetworkPanel.jsm:

   // Set the document object and update the content once the panel is loaded.
   this.iframe.addEventListener("load", function onLoad() {
     if (!self.iframe) {
       return;
     }

     self.iframe.removeEventListener("load", onLoad, true);
     self.update();
   }, true);

Unfortunately it doesn't seem like there's any easy way to create a listener like this from addon code. I tried to do the store-original-function-and-replace trick, it runs, but it doesn't seem to be calling the original function in the right context somehow:

<?xml version="1.0" encoding="utf-8"?>
<overlay id="helloworldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script>
var origOpenNetPanel = WebConsoleFrame.prototype.openNetworkPanel;
WebConsoleFrame.prototype.openNetworkPanel = function WCF_openNetworkPanel(aNode, aHttpActivity) {
    //Run the original, in its natural ('this') environment:
    var netPanel = origOpenNetPanel.call(this, aNode, aHttpActivity);
    //todo: add modification.
    return netPanel;
}
</script>
</overlay>

^ I had originally tried .call(WebConsoleFrame and .call(WebConsoleFrame.prototype. Usually this should work, it may be some special circumstance in chrome code?

This code above is working with this overlay:

overlay chrome://browser/content/devtools/webconsole.xul chrome://devtooltweaks/content/netWinOverlay.xul

Answer 1

This works! It shows pretty-print JSON in the web console log popups. Unfortunately if you select the JSON text, the selection goes all over the place. (on Firefox 21). I'm not sure this is the best solution though, replacing a DevTools function. Addon is available here.

WebConsoleFrame.prototype.origOpenNP = WebConsoleFrame.prototype.openNetworkPanel;
WebConsoleFrame.prototype.openNetworkPanel = function WCF_openNetworkPanel(aNode, aHttpActivity) {
    //Run the original, in its natural ('this') environment:
    var netPanel = WebConsoleFrame.prototype.origOpenNP.call(
                   this, aNode, aHttpActivity);
    netPanel.iframe.addEventListener('load',function(event) {
        //for(a in netPanel.iframe) {dump(a+"\n");}
        var doc = event.originalTarget;
        doc.body.style.backgroundColor='blue';
        var respDiv = doc.getElementById('responseBody');
        if (!respDiv) {
            respDiv = doc.getElementById('responseBodyCached');
        }
        if (respDiv) {
            var a = doc.createElement('button');
            a.appendChild(doc.createTextNode('JSON'));
            respDiv.childNodes[1].appendChild(a);
            a.addEventListener('click',function() {
                var fetch = doc.getElementById('responseBodyFetchLink');
                if (fetch) {
                    var evt = doc.createEvent("MouseEvents");
                    evt.initMouseEvent("mousedown", true, true, doc.parentWindow,
                      0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    fetch.dispatchEvent(evt);
                }
                for (let i=0; i<respDiv.children.length; i++) {
                    if (respDiv.children[i].nodeName == 'table') {
                        var resp = respDiv.children[i].textContent;
                        let obj = JSON.parse(resp);
                        let str = JSON.stringify(obj, undefined, 4);
                        respDiv.children[i].innerHTML = window.netWinTweak.syntaxHighlight(str);
                        break;
                    }
                }
            });
        }
    },true);

    return netPanel;
}

var netWinTweak = netWinTweak || {};
// From http://stackoverflow.com/questions/4810841/json-pretty-print-using-javascript
netWinTweak.syntaxHighlight = function(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return '<style>pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }'+
'.string { color: green; }'+
'.number { color: darkorange; }'+
'.boolean { color: blue; }'+
'.null { color: magenta; }'+
'.key { color: red; } </style>'+
'<pre>'+json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    })+'</pre>';
}