text (letter/number) dynamically on icon

gNeandr

unread,

Nov 22, 2012, 3:45:45 PM11/22/12

to

Any good reference how to show up an icon on which a text (a single
number or letter) can be placed dynamically?

I have seen Firebug using that with a toolbarbutton. But that's a
overkill for my situation.
Also I would like to be flexible for exchanging the base icon in
different situations.

Erik Vold

unread,

Dec 6, 2012, 7:38:31 PM12/6/12

to gNeandr, dev-ext...@lists.mozilla.org

I don't think that there is a good reference on how to do this yet sadly.

I used Firebug as an example when I implemented it in Scriptish, you can follow my commits here: https://github.com/scriptish/scriptish/compare/f6f9dd08ab311129cc0e00552773223c31dff3fd...cfca58818c64a865f396f11cdf6e76e08fc441b5

Also I plan to implement this is my toolbarbutton module at some point, so you can follow that issue here: https://github.com/voldsoftware/toolbarbutton-jplib/issues/8

Erik

_______________________________________________
dev-extensions mailing list
dev-ext...@lists.mozilla.org
https://lists.mozilla.org/listinfo/dev-extensions

Arivald

unread,

Dec 7, 2012, 6:11:41 AM12/7/12

to

> From: "gNeandr" <gNeandr_@_g_m_x.de>
> To: dev-ext...@lists.mozilla.org
> Sent: Thursday, November 22, 2012 12:45:45 PM
> Subject: text (letter/number) dynamically on icon
>
> Any good reference how to show up an icon on which a text (a single
> number or letter) can be placed dynamically?
>
> I have seen Firebug using that with a toolbarbutton. But that's a
> overkill for my situation.
> Also I would like to be flexible for exchanging the base icon in
> different situations.
>

Maybe stack <label> over image?

--
Arivald

gNeandr

unread,

Dec 7, 2012, 12:12:52 PM12/7/12

to

Yes, indeed that works.

I defined this:
<hbox>
<image class="badge-image"/>
<label value="Q" class="badge-text"/>
</hbox>

with CSS:

.badge-image {
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
list-style-image: url("chrome://.....png");
height: 20px !important;
width : 20px !important;
}
.badge-text {
margin-left: -16px;
margin-top: 2px;
font-weight: bold;
color: black;
}

The height/width etc are very dependent with the image to use.

I also have it on a toolbarbox but at the moment have problems to add it
to a 'treecell'
.. hope to get that done also.

Next I'll try to change all of that to a xbl :>

gNeandr

unread,

Dec 7, 2012, 12:16:36 PM12/7/12

to dev-ext...@lists.mozilla.org

On 07.12.2012 01:38, Erik Vold wrote:
> I don't think that there is a good reference on how to do this yet sadly.
>
> I used Firebug as an example when I implemented it in Scriptish, you can follow my commits here: https://github.com/scriptish/scriptish/compare/f6f9dd08ab311129cc0e00552773223c31dff3fd...cfca58818c64a865f396f11cdf6e76e08fc441b5
>
> Also I plan to implement this is my toolbarbutton module at some point, so you can follow that issue here: https://github.com/voldsoftware/toolbarbutton-jplib/issues/8
>
> Erik
>

I know about that Firbug solution, but -- AFAIS -- it doesn't work with
icons.

See also other answer to 'Arivald' .. there I describe the soultion I
just found to work with 'image' and text on it and also a
'toolbarbutton' solution.

Thanks for pointing me to your pages.

Günter

gNeandr

unread,

Dec 7, 2012, 12:17:04 PM12/7/12

to

On 07.12.2012 01:38, Erik Vold wrote:

> I don't think that there is a good reference on how to do this yet sadly.
>
> I used Firebug as an example when I implemented it in Scriptish, you can follow my commits here: https://github.com/scriptish/scriptish/compare/f6f9dd08ab311129cc0e00552773223c31dff3fd...cfca58818c64a865f396f11cdf6e76e08fc441b5
>
> Also I plan to implement this is my toolbarbutton module at some point, so you can follow that issue here: https://github.com/voldsoftware/toolbarbutton-jplib/issues/8
>
> Erik
>

Mook

unread,

Dec 8, 2012, 12:02:38 AM12/8/12

to

On 12/7/2012 9:12 AM, gNeandr wrote:
> On 07.12.2012 12:11, Arivald wrote:
>>> From: "gNeandr" <gNeandr_@_g_m_x.de>

>>> Any good reference how to show up an icon on which a text (a single
>>> number or letter) can be placed dynamically?
>>>

<snip>

>> Maybe stack <label> over image?
>>
> Yes, indeed that works.
>

<snip>

>
> I also have it on a toolbarbox but at the moment have problems to add it
> to a 'treecell'
> .. hope to get that done also.
>
> Next I'll try to change all of that to a xbl :>

Putting it on a tree might or might not work; I am pretty sure it
doesn't, at least, for trees with custom tree views. One solution is to
manually composite it on a <html:canvas> and set the image to its data
URI instead... I think Songbird did that at some point.

HTH,

--
Mook

Arivald

unread,

Dec 10, 2012, 5:29:54 AM12/10/12

to

W dniu 2012-12-07 18:12, gNeandr pisze:

Yes, I will also try it in XBL.
But instead of CSS hack stacking You may try use <stack> element. It is
specifically designed to stack other elements.

https://developer.mozilla.org/en-US/docs/XUL/stack

--
Arivald

gNeandr

unread,

Dec 10, 2012, 6:03:51 AM12/10/12

to

Good to know! Thanks! I didn't recognized that <stack> element ;)

I have added "my approach" at different locations in our code but
noticed some problems:

1. treecell -- because I'm using CSS positioning it will not do it on a
treecell

2. menuitem -- maybe another problem, first I was able to get an icon at
all in front of an menuitem. It's shown after the selection on the
'closed' menu but not with the pull-down list.

It's working as outlined above, a bit different with a button also.

Not started to try with xbl .. Arivald, if you have a general solution I
would be very much interested to see it ;)
Thanks
Günter

Noit

unread,

Dec 15, 2012, 2:23:01 AM12/15/12

to

The stack element can also be used.