How to dynamically decorate an icon/button (ie create an icon badge)

Jan Honza Odvarko

unread,

Jan 25, 2011, 4:23:45 AM1/25/11

to

Since the status bar became an obsolete piece of UI in Firefox 40, we
(Firebug team) need an alternative place (Firefox toolbar) where to
display:

1) The old "Firebug status bar icon" (aka Firebug start button) -
Firebug entry point.
2) The error counter (red number in the status bar informing the user
about errors on the page)

#1 is done and there is currently a button (available in the customize
toolbar dialog) having the same features as the old status bar icon.

#2 the idea is to draw the number of errors into the toolbar button.
Something like iOS "badges" paradigm used for app icons (e.g. number
of emails).

Any recommendation how to implement this "icon badge" ?
Should I create a little canvas that overlays the icon?

Thanks for any tips!
Honza

johnjbarton

unread,

Jan 25, 2011, 10:35:10 AM1/25/11

to

I've seen an addon that implements badges for its icons:
http://code.google.com/p/fbug/source/browse/branches/firebug1.7/content/firebug/firebugOverlay.xul#230

jjb

Jan Honza Odvarko

unread,

Jan 25, 2011, 11:45:06 AM1/25/11

to

> I've seen an addon that implements badges for its icons:http://code.google.com/p/fbug/source/browse/branches/firebug1.7/conte...
>
> jjb
Yes, I have noticed that plugin too ;-)

The difference is that BON is using limited set of badges, while I
wanted (if possible) to draw a number (of errors) into it.

Honza

Jim

unread,

Jan 25, 2011, 12:27:20 PM1/25/11

to

On 01/25/2011 10:45 AM, Jan Honza Odvarko wrote:
> Yes, I have noticed that plugin too ;-)
>
> The difference is that BON is using limited set of badges, while I
> wanted (if possible) to draw a number (of errors) into it.

You should be able to replace the <image> elements in that example with
a <label> element that you can put text into. Alternately, I suppose you
could use SVG filters somehow, though that's almost certainly 1) more
complicated, and 2) slower.

- Jim

Dao

unread,

Jan 27, 2011, 4:50:46 AM1/27/11

to

On 25.01.2011 18:27, Jim wrote:
> On 01/25/2011 10:45 AM, Jan Honza Odvarko wrote:
>> Yes, I have noticed that plugin too ;-)
>>
>> The difference is that BON is using limited set of badges, while I
>> wanted (if possible) to draw a number (of errors) into it.
>
> You should be able to replace the <image> elements in that example with
> a <label> element that you can put text into.

Right, and you can style the label however you want. <canvas> would be
overkill here.

Jan Honza Odvarko

unread,

Jan 27, 2011, 8:31:09 AM1/27/11

to

> Right, and you can style the label however you want. <canvas> would be
> overkill here.

Yes, agree.

In the end I used something like as follows (within menu-button
derived binding):

<xul:stack>
<xul:image/>
<xul:label/>
</xul:stack>

Thanks for all the tips!

Honza

Tom

unread,

Feb 2, 2011, 9:45:42 AM2/2/11

to

Hi there,

Thanks for the great examples. I am trying to do something similar
for ReminderFox (overlay the number of upcoming reminders over the
toolbar icon). I am able to get some text overlay going, but I am not
sure how to do the overlay and still hook into the mechanism that
Firefox uses to set toolbars to use small icons.

Previously I defined a css rule to bind to the toolbar button to
handle large/small icon:
#reminderFox_openButton {
list-style-image: url("chrome://reminderfox/skin/images/foxy-
head-25.png");
}
toolbar[iconsize="small"] #reminderFox_openButton {
list-style-image: url("chrome://reminderfox/skin/images/foxy-
head-15.png");
}

But if I'm using the xul stack mechanism I can't seem to get it to
style into the "small" icon on the toolbar. When I set "Use small
icons" on the toolbar, it just badly resizes my icon:
<toolbarbutton id="reminderFox_openButton"
label="&rf.main.icons.openReminderfox.label;" >
<stack id="toolbar_icon_stack">
<image id="reminderFox_openButton" />
<label id="overlay_label" value="1+" align="left" />
</stack>
</toolbarbutton>

What did you do here?
Thanks
Tom

Jan Honza Odvarko

unread,

Feb 23, 2011, 3:20:02 PM2/23/11

to

Here are some pointers to the Firebug source code where you can get some inspiration:

Definition of the Firebug start button (overlay)
http://code.google.com/p/fbug/source/browse/branches/firebug1.7/content/firebug/start-button/startButtonOverlay.xul#68

CSS for that button:
http://code.google.com/p/fbug/source/browse/branches/firebug1.7/skin/classic/firebug.css#82

Honza

Sheppy

unread,

Feb 23, 2011, 3:32:04 PM2/23/11

to

On Feb 23, 3:20 pm, Jan Honza Odvarko <odva...@gmail.com> wrote:
> Here are some pointers to the Firebug source code where you can get some inspiration:
>

> Definition of the Firebug start button (overlay)http://code.google.com/p/fbug/source/browse/branches/firebug1.7/conte...
>
> CSS for that button:http://code.google.com/p/fbug/source/browse/branches/firebug1.7/skin/...

Once someone sorts out how to do this, adding an article to devmo
about it would be really awesome.

Eric Shepherd
Developer Documentation Lead
Mozilla
http://www.bitstampede.com/