0

在 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 未定义错误。

4

3 回答 3

2

在工具箱打开之前不会创建面板。我们创建了有用的方法来获取这些面板中的对象。我不确定您要如何附加代码，但这里有一个如何打开检查器面板并添加您的调整的示例：

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 主题变得更容易，这样你就不需要像这样使用黑客了。

于 2013-10-06T23:02:10.390 回答
1

每晚在 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 之前，您的代码没有运行。

于 2013-10-06T13:10:46.617 回答
0

似乎“加载”不起作用，但它在“页面显示”事件中可用。也许订单/事件绑定在 25 年发生了变化。

于 2013-10-18T06:07:39.620 回答