Использование insertBefore с анонимным контентом (XBL) не работает должным образом в дополнении Firefox - PullRequest
Новая
       16

Использование insertBefore с анонимным контентом (XBL) не работает должным образом в дополнении Firefox

0 голосов
/ 07 января 2012

Я пытаюсь добавить маркер в панель поиска Firefox. В основном это анонимный контент, реализованный на XBL. Я хочу начать с добавления контейнера hbox среди анонимного дочернего содержимого панели поиска, как показано ниже: 

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 Inspector: XUL Structure

Итак, у меня две проблемы. Сначала я хочу, чтобы мой «searchhistory-dropmarker-container» отображался прямо перед Firefox «search-go-container», но insertBefore не работает должным образом.

Вторая проблема заключается в том, что структура DOM предполагает, что я должен добавить свой контейнер в «autocomplete-textbox-container», а не в «searchbar-textbox». Но выполнение этого вызывает исключение объекта not found с insertBefore и просто молча завершается с appendChild.

Так почему я не могу добавить объекты в "autocomplete-textbox-container"? Как мне разместить «searchhistory-dropmarker-container» прямо перед «search-go-container»? Я предполагаю, что insertBefore не работает должным образом, потому что search-go-container не является прямым потомком searchbar-textbox.

1 Ответ

0 голосов
/ 10 января 2012

Проблема в том, что вы видите комбинацию нескольких привязок XBL, что означает, что все усложняется.Сначала chrome://browser/content/search/search.xml#searchbar применяется к фактическому тегу <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>

Здесь вы можете видеть, что «search-go-container» является дочерним элементом элемента textbox (не стесняйтесь проверять его parentNode свойство в DOM Inspector, чтобы проверить это).Но эта структура перекрывается с помощью chrome://global/content/bindings/autocomplete.xml#autocomplete, применяемого к тегу <textbox>: 

<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="image|deck|stack|box">, а не <children includes="hbox"> - кажется, что Gecko не может корректно обрабатывать все различные точки вставки динамически.

Вы можете просто добавить свой блок кОднако элемент "autocomplete-textbox-container": 

hbox.appendChild(dropmarker_hbox);

Это кажется нелогичным, но фактически добавит ваш элемент перед "search-go-container" - потому что "search-go-container" нене фактический дочерний элемент, а скорее добавленный в конце реальных дочерних узлов XBL.

...