Firefoxアドオンで匿名コンテンツ（XBL）が期待通りに機能しないinsertBeforeを使用する

Question

Firefox検索バーにdropmarkerを追加しようとしています。そのほとんどはXBLで実装された匿名コンテンツです。

var dropmarker_hbox = document.createElement("hbox"); 
dropmarker_hbox.setAttribute("anonid", "searchhistory-dropmarker-container"); 
dropmarker_hbox.setAttribute("class", "searchhistory-dropmarker-container"); 
var searchbar = document.getElementById("searchbar"); 
var textbox = document.getAnonymousElementByAttribute(searchbar, "anonid", "searchbar-textbox"); 
var hbox = document.getAnonymousElementByAttribute(textbox, "class", "autocomplete-textbox-container"); 
var go_hbox = document.getAnonymousElementByAttribute(searchbar, "class", "search-go-container"); 

textbox.insertBefore(dropmarker_hbox, go_hbox); 

DOMインスペクタで見て結果：私は以下のコードである検索バーの匿名の子コンテンツのうち、HBoxコンテナを、追加することによって開始したいXUL Structure

をだから私は二つの問題が生じています。まず、私の "searchhistory-dropmarker-container"をFirefoxの "search-go-container"の直前に表示したいが、insertBeforeが期待通りに動作しないようにする。

第2の問題は、「searchbar-textbox」ではなく「autocomplete-textbox-container」にコンテナを追加する必要があるということです。しかしそれによって、insertBeforeで例外が見つからないオブジェクトが発生し、appendChildで暗黙に失敗します。

なぜ "オートコンプリートテキストボックスコンテナ"にオブジェクトを追加できないのですか？ 「searchhistory-dropmarker-container」を「search-go-container」の直前に配置するにはどうすればよいですか？私は、 "search-go-container"が "searchbar-textbox"の直接の子ではないため、insertBeforeが期待どおりに動作していないと推測しています。

Answer 1

問題は、複数のXBLバインディングが組み合わされていることです。つまり、複雑になることです。まず、実際の<searchbar>タグに適用chrome://browser/content/search/search.xml#searchbarがあります。ここでは

<xul:stringbundle/> 

<xul:textbox class="searchbar-textbox" anonid="searchbar-textbox"> 
    <xul:box> 
    <xul:button> 
     ... 
    </xul:button> 
    </xul:box> 
    <xul:hbox class="search-go-container"> 
    <xul:image class="search-go-button" anonid="search-go-button" /> 
    </xul:hbox> 
</xul:textbox> 

あなたは「検索ゴーコンテナは」（検証するDOMインスペクタでそのparentNodeプロパティをチェックして自由に感じるtextbox要素の子であることがわかりますこの）。しかし、その構造は<textbox>タグに適用chrome://global/content/bindings/autocomplete.xml#autocompleteによってオーバーレイされている：

<xul:hbox class="autocomplete-textbox-container"> 
    <children includes="image|deck|stack|box"> 
    <xul:image class="autocomplete-icon"/> 
    </children> 

    <xul:hbox anonid="textbox-input-box" class="textbox-input-box"> 
    <children/> 
    <html:input anonid="input"/> 
    </xul:hbox> 

    <children includes="hbox"/> 
</xul:hbox> 

<xul:dropmarker anonid="historydropmarker" class="autocomplete-history-dropmarker"/> 

<xul:popupset anonid="popupset" class="autocomplete-result-popupset"/> 

<children includes="toolbarbutton"/> 

注複数のそのテキストボックスの子ノードの挿入ポイントをマーキング<children>タグを。要素が<children includes="hbox">ではなく、<children includes="image|deck|stack|box">の挿入ポイントに挿入されたようです.Geckoはさまざまな挿入ポイントをすべて動的に正しく処理できないようです。

あなたは、単にしかし、「オートコンプリート・テキストボックス・コンテナ」要素にあなたのボックスを追加することができます

hbox.appendChild(dropmarker_hbox); 

これは直感に反するようだが、それは実際には「検索ゴーコンテナ」の前に、あなたの要素が追加されます - "search-go-container"は実際の子ではなく、XBLによって実際の子ノードの最後に追加されるためです。