getElementsByClassName() не находит элемент в Firefox 25

В Firefox 24 Devtools-tweaks выделяет выбранные элементы в инспекторе Firefox более темно-синим цветом, поэтому они более заметным. Однако в бета-версии Firefox 25 он говорит, что он не определен при поиске панели с классом «iframe-ruleview» (правый список инспектора), хотя я вижу этот элемент в инспекторе DOM, это правильная панель со свойствами css .

Соответствующий код в контенте/инспекторTweaks.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 не определено, исключение, которое не позволяет остальной части этого кода работать.

Я попытался изменить его с помощью приведенного ниже примера, но я думаю, что он предназначен для открытия инструментов разработки из основного фрейма?

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 не определено.


person NoBugs    schedule 06.10.2013    source источник
comment
Попробуйте var frame = document.querySelector('.iframe-ruleview');   -  person Sergio    schedule 06.10.2013
comment
Покажите нам соответствующий HTML. Если в текущем кадре есть объект с классом iframe-ruleview, тогда он будет работать, значит, происходит что-то еще, и нам нужно увидеть HTML, чтобы предложить вам помощь в том, что еще не так.   -  person jfriend00    schedule 06.10.2013


Ответы (3)


Панели не создаются до тех пор, пока панель инструментов не будет открыта. Мы создали полезные методы для получения объектов внутри этих панелей. Я не уверен, как вы хотите прикрепить код, но вот пример того, как открыть панель инспектора и добавить свои настройки:

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, чтобы вам не приходилось использовать подобные хаки.

person Mike Ratcliffe    schedule 06.10.2013
comment
Спасибо, это где-нибудь задокументировано? Совместимо ли это с несколькими последними версиями Firefox? - person NoBugs; 07.10.2013
comment
Пока нет, так как наши инструменты развиваются очень быстрыми темпами. Я бы сказал, что лучшее место, где можно узнать о том, как открывать и получать доступ к инструментам, — это их тесты. Так, например, чтобы увидеть, как тесты получают доступ к представлению разметки, загрузите исходный код и просмотрите тесты в браузере/devtools/markupview/test. Обратите внимание, что тесты обычно загружают head.js по умолчанию и этот файл содержит множество вспомогательных функций. - person Mike Ratcliffe; 09.10.2013
comment
Спасибо, а где мне найти/запустить эти тесты? - person NoBugs; 10.10.2013
comment
Разве это не откроет инспектора? Я изменил «загрузку» на «pageshow», и, похоже, он работает в 25, хотя он все еще дает некоторые ошибки «frame» var notdefined. - person NoBugs; 14.10.2013

Глядя на этот пользовательский интерфейс в Firefox по ночам, <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) Ваш код не запускается до создания iframe просмотра правил, если это создание происходит асинхронно.

person Boris Zbarsky    schedule 06.10.2013
comment
В 25 я вижу его как iframe непосредственно в chrome://browser/content/devtools/инспекции/инспектор.xul, который является фреймом, который я накладываю. Как лучше всего дождаться создания элемента iframe-ruleview? - person NoBugs; 07.10.2013
comment
@NoBugs Видите ответ Майка Рэтклиффа? Он тот, кто на самом деле знает этот код. ;) - person Boris Zbarsky; 07.10.2013

Кажется, что «загрузка» не подойдет, но она доступна в событии «pageshow». Возможно, привязка порядка/события была изменена в 25.

person NoBugs    schedule 18.10.2013