getElementsByClassName() not finding element in Firefox 25

Question

In Firefox 24, Devtools-tweaks makes selected items in Firefox inspector outlined in darker blue, so they are more visible. In Firefox 25 beta, however, it says it's undefined when looking for the panel with 'iframe-ruleview' class (The right listing of the inspector), although I can see this element in DOM inspector, it is the right panel with css properties.

The relevant code in 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);
});

It says frame is undefined, an exception which keeps the rest of this code from working.

I tried changing it with the example below, but I think it's meant to open devtools from the main frame?

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

^ This code gives gBrowser not defined error.

Answer 1

It seems the 'load' won't do, but it is available in the 'pageshow' event. Maybe the order/event binding was changed in 25.