getElementsByClassName() Firefox에서 요소를 찾지 못했습니다. 25

Question

Firefox 24에서 Devtools-tweaks은 Firefox 관리자에서 선택된 항목을 어두운 파란색으로 윤곽을 그립니 다. 그러나 파이어 폭스 25 베타 버전에서는 'iframe-ruleview'클래스 (인스펙터의 올바른 목록)를 사용하여 패널을 찾을 때 정의되지 않았지만 DOM 속성에서이 요소를 볼 수는 있지만 CSS 속성이있는 올바른 패널이라고 정의되어있다. . 내용/inspectorTweaks.js에서

관련 코드 : 그것은 frame이 정의되지 말한다

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

, 작동이 코드의 나머지 부분을 계속 예외.

아래 예제에서 변경하려고했지만 기본 프레임에서 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

'로드'는하지 않지만 'pageshow'이벤트에서 사용할 수있는 것 같습니다. 주문/이벤트 바인딩이 25 개로 변경되었을 수 있습니다.

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) 규칙보기 iframe을 만들기 전에 코드가 실행되고 있지 않습니다. iframe이 비동기 적으로 발생하면 코드가 실행되고 있지 않습니다.

Answer 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 테마를 쉽게 만들 수 있도록 해킹을 사용하지 않아도됩니다.