1

Firefox コンソールがネットワーク情報ダイアログをポップアップする方法を改善したいと考えています。オーバーレイを試しました：

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

しかし、うまくいかないようです。ソースを調べたところ、ファイルには要素を表示するコードがないように見えます。別のフォームがそれを呼び出しているに違いありません。Firefox 拡張機能から、このポップアップ ウィンドウに機能を追加する簡単な方法があるかどうか疑問に思っています。

- アップデート -

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);

残念ながら、アドオン コードからこのようなリスナーを作成する簡単な方法はないようです。store-original-function-and-replace トリックを実行しようとしましたが、実行されましたが、何らかの形で正しいコンテキストで元の関数を呼び出していないようです:

<?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>

^ 私は元々 と を試していまし.call(WebConsoleFrameた.call(WebConsoleFrame.prototype。通常、これは機能するはずですが、クロムコードの特別な状況である可能性がありますか?

上記のこのコードは、このオーバーレイで動作しています:

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

1 に答える 1

0

これはうまくいきます！Web コンソールのログ ポップアップに整形式の JSON が表示されます。残念ながら、JSON テキストを選択すると、選択範囲があちこちに広がります。(Firefox 21)。ただし、DevTools 関数を置き換えるのが最善の解決策かどうかはわかりません。アドオンはこちらから入手できます。

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>';
}
于 2013-06-06T01:22:11.817 に答える