getElementsByClassName（）在Firefox 25中找不到元素

Question

在Firefox 24中， Devtools-tweaks使Firefox檢查器中的選定項目以深藍色輪廓顯示，因此它們更加可見。 但是，在Firefox 25 beta中，它表示在查找帶有“ iframe-ruleview”類的面板時該界面未定義（檢查器的右側列表），盡管我可以在DOM檢查器中看到此元素，但它是具有css屬性的右側面板。

content / inspectorTweaks.js中的相關代碼：

// window.inspector is documented in inspector-panel.js
// .doc and window is inspector.xul window.
window.addEventListener('load',function() {
    var frame = document.getElementsByClassName('iframe-ruleview')[0];
    if (!frame.contentWindow.location.href.contains('cssruleview.xul')) {
        //Not the xul, it's a html we have to extend from here (Firefox 22+)
        frame.setAttribute('context',"dtCSSContext");
    }
    function styleit() {
        var frame = document.getElementById('markup-box').children[0];
        var doc = frame.contentDocument;
        var style= doc.createElement('style');
        style.appendChild(doc.createTextNode(
        '.theme-selected { border:1px solid blue; padding:1px; margin-left:-2px; border-radius:3px;}'+
        '.theme-twisty:not([open]) {top:5px; left:5px;}'
        ));
        doc.body.appendChild(style);//what's the equivalent for old xul file?
    }
    styleit();
    window.inspector.on("markuploaded", styleit);
    frame.addEventListener('load',styleit);
    //frame.contentWindow.addEventListener('load',styleit);
});

它說frame是未定義的，這是一個例外，使其余代碼無法正常工作。

我嘗試通過下面的示例進行更改，但是我認為這是要從主機打開devtools嗎？

window.addEventListener('load',function() {
    let {ConsoleUtils, gDevTools} = Components.utils.import("resource:///modules/devtools/gDevTools.jsm", {});
    let {devtools} = Components.utils.import("resource://gre/modules/devtools/Loader.jsm", {});
    let TargetFactory = devtools.TargetFactory;
    console.log('tf:')
    console.log(TargetFactory)
    console.log(devtools)
    let target = TargetFactory.forTab(gBrowser.selectedTab);

^此代碼使gBrowser未定義錯誤。

Answer 1

在打開工具箱之前不會創建面板。 我們創建了有用的方法來獲取這些面板中的對象。 我不確定您要如何附加代碼，但是這里有一個示例說明如何打開檢查器面板並添加您的調整：

let {ConsoleUtils, gDevTools} = Cu.import("resource:///modules/devtools/gDevTools.jsm", {});
let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
let TargetFactory = devtools.TargetFactory;
let target = TargetFactory.forTab(gBrowser.selectedTab);

gDevTools.showToolbox(target, "inspector").then(function(toolbox) {
  inspector = toolbox.getCurrentPanel();
  let doc = inspector._markupFrame.contentDocument;
  let style = doc.createElement('style');
  style.appendChild(doc.createTextNode(
    '.theme-selected { border:1px solid blue; padding:1px; margin-left:-2px; border-radius:3px;}'+
    '.theme-twisty:not([open]) {top:5px; left:5px;}'
  ));
  doc.body.appendChild(style);
});

我懷疑不是打開面板，您可能更喜歡聽工具箱的打開，但我認為您已經掌握了工具。

順便說一句，我們很快將使創建DevTools主題的方法變得更容易，這樣您就無需使用這種技巧。

Answer 2

每晚在Firefox中查看此UI， <iframe class='iframe-ruleview'>位於另一個<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe">在<iframe class="devtools-toolbox-bottom-iframe">內部，它本身就是tabbrowser綁定內的匿名內容。

您應該確保兩件事是正確的：

1）您的代碼正在<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe"> 。

2）如果RuleView iframe的創建是異步發生的，那么您的代碼就不會運行。

Answer 3

似乎“加載”不會執行，但在“ pageshow”事件中可用。 也許訂單/事件綁定已在25中更改。