Question

在Firefox 24中，Devtools-tweaks使Firefox检查器中的选定项目以深蓝色显示，因此它们更加明显。然而，在Firefox 25测试版中，它表示在使用'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">本身位于<iframe id="toolbox-panel-iframe-inspector" class="toolbox-panel-iframe">内，它本身就是tabbrowser绑定中的匿名内容。

你应该确保两件事情是真的：

1）您的代码在{{1}}内运行。

2）如果创建异步，则在创建规则视图iframe之前，代码未运行。

Answer 3

似乎“加载”不起作用，但它可以在“pageshow”事件中使用。也许订单/事件绑定在25中已经改变。

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

3 个答案: