Выводить надпись на иконке

KML · №1

Нужно на кнопке показать иконку и номер. Простейшее что приходит в голову намалевать кучу иконок с номерами или задействовать label кнопки.
Но как всегда хочется чего-то эдакого, возможно ли иметь всего одну иконку и средствами расширения добавлять поверх иконки номер?

Anton · №2

Можно внутрь кнопки поместить <stack> c <image> и <label>. Или генерировать изображение для кнопки "на лету" с помощью <canvas>.

hydrolizer · №3

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

Выделить код

Код:

var btn=document.getElementById("debug-button");
var anonNodes=document.getAnonymousNodes(btn);
Services.console.logStringMessage(anonNodes.length); // 1
Services.console.logStringMessage(anonNodes[0].nodeName); // xul:hbox
Services.console.logStringMessage(anonNodes[0].childNodes.length); // 0

- лэйбл и изображение как бы отсутствуют в childNodes фактически содержащего их объекта. Есть подозрение, что так происходит потому, что у кнопки в XBL-связке button-icon и button-text не просто помещены внутрь hbox, но еще и помещены внутрь тэга children:

Выделить код

Код:

<xul:hbox class="box-inherit button-box" xbl:inherits="align,dir,pack,orient"
          align="center" pack="center" flex="1" anonid="button-box">
  <children>
    <xul:image class="button-icon" xbl:inherits="src=image"/>
    <xul:label class="button-text" xbl:inherits="value=label,accesskey,crop"/>
  </children>
</xul:hbox>

(chrome://global/content/bindings/button.xml#button)
Но при всем при этом тот же DOM inspector прекрасно видит весь анонимный контент связки. В свое время я так и не выяснил, как всё же можно добраться до этого контента, и вопрос остался открытым.

Infocatcher · №4

hydrolizer пишет

как всё же можно добраться до этого контента

Вот такое работает из Custom Buttons:

Выделить код

Код:

alert(this.ownerDocument.getAnonymousElementByAttribute(this, "class", "toolbarbutton-text"));

hydrolizer · №5

Infocatcher
Сейчас проверил на обычной кнопке - возвращает null (собственно, я это пробовал и раньше, сейчас попробовал просто на всякий случай).

hydrolizer · №6

В общем, я влез-таки в код DOM inspector, и разобрался с его способом извлечения анонимного контента. Вот пример для обычной кнопки, относительно которой стандартные методы получения анонимного контента ничего не возвращают, и не видят:

Выделить код

Код:

var btn=document.getElementById("debug-button");
var walker=Cc["@mozilla.org/inspector/deep-tree-walker;1"].createInstance(Ci.inIDeepTreeWalker);
walker.showAnonymousContent = true;
walker.showSubDocuments = false;
walker.init(btn, Ci.nsIDOMNodeFilter.SHOW_ELEMENT);
var currentNode = walker.currentNode;
while (currentNode)
{
  currentNode = walker.nextNode();
  if (!currentNode) break;
  Services.console.logStringMessage(currentNode.nodeName+" "+currentNode.className);
}

Компонент inIDeepTreeWalker доступен и без установленного DOM inspector (проверял на чистом профиле), интерфейс у него примерно такой же, как у обычного TreeWalker'а.

Отредактировано hydrolizer (17-06-2011 12:38:16)

KML · №7

Anton пишет

Можно внутрь кнопки поместить <stack> c <image> и <label>.

Спасибо, отличное решение

Отредактировано KML (17-06-2011 13:54:09)

Полезная информация

№115-06-2011 18:16:07