How can I display the text above the toolbar to complement Firefox?

Question

I am trying to display a small icon (the number of new messages) above the toolbar icon, something like the Chrome and Opera extensions, with the icons above the toolbar icons. The text should not cover the entire icon, it should be at the bottom so that the user can still see the main part of the icon and recognize what extension it is. How can i do this?

You can see what I want in this example image from Chrome:

I tried with the description, span and div inside the stack element, but I could not get them to not place anyone at the bottom. The description and div always display the text in the center, and the range displays it on the right side of the icon, making the entire button wider.

<toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton class="toolbarbutton-1"> <stack> <image></image> <description right="0" bottom="0" value="4"></description> <!-- <html:div right="0" bottom="0">5</html:div> --> </stack> </toolbarbutton> </toolbarpalette> 

Answer 1

I had time to spend time waiting for the rain to stop in Formula 1, so I did this work with a canvas:

UPDATED . The previous method was corrupted when the user removed the icon from the toolbar, the updated method is more reliable and with less code.

Xul

 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <hbox hidden="true"> <html:canvas id="toolbar_button_canvas" width="24" height="24"></html:canvas> </hbox> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="toolbar_button" class="toolbarbutton-1" /> </toolbarpalette> </overlay> 

CSS

 #toolbar_button { list-style-image:url("chrome://your_extension/skin/icon_024.png"); } toolbar[iconsize="small"] #toolbar_button { list-style-image:url("chrome://your_extension/skin/icon_016.png"); } 

Javascript

 show_status: function(display_text) { var btn = document.getElementById("toolbar_button"); var canvas = document.getElementById("toolbar_button_canvas"); var img_src = window.getComputedStyle(btn).listStyleImage.replace(/^url\("(chrome:\/\/your_extension\/skin\/icon_0\d{2}.png)"\)$/, "$1"); // get image path var csize = img_src.replace(/^chrome:\/\/your_extension\/skin\/icon_0(\d{2})\.png$/, "$1"); // get image size canvas.setAttribute("width", csize); canvas.setAttribute("height", csize); var ctx = canvas.getContext("2d"); var img = new Image(); img.onload = function() { ctx.textBaseline = "top"; ctx.font = "bold 9px sans-serif"; // has to go before measureText ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); if (display_text !== "") { var w = ctx.measureText(display_text).width; var h = 7; // 9 = font height var rp = ((canvas.width - 4) > w) ? 2 : 1; // right padding = 2, or 1 if text is wider var x = canvas.width - w - rp; var y = canvas.height - h - 1; // 1 = bottom padding ctx.fillStyle = "#f00"; // background color ctx.fillRect(x-rp, y-1, w+rp+rp, h+2); ctx.fillStyle = "#fff"; // text color ctx.fillText(display_text, x, y); //ctx.strokeText(display_text, x, y); } btn.image = canvas.toDataURL("image/png", ""); // set new toolbar image }; img.src = img_src; } 

Answer 2

my option with html: div

PS you can also try playing with z-index

What does http://f3.s.qip.ru/fTUvr2Cj.jpg look like ?

Xul

 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <toolbar id="nav-bar"> <hbox> <html:div style="color: #000000; font-size: 10px; font-weight: bold; margin-right: 10px; margin-top: 16px; position: fixed; right: 0;">5</html:div> <toolbarbutton insertafter="search-container" type="menu"> <menupopup> <menuitem class="menuitem-iconic" label="&count;"></menuitem> <menuitem class="menuitem-iconic" label="&size;"></menuitem> <menuitem class="menuitem-iconic" label="&time;"></menuitem> <menuseparator></menuseparator> <menuitem class="menuitem-iconic" label="&settings;"></menuitem> </menupopup> </toolbarbutton> </hbox> </toolbar> </overlay> 

Answer 3

I just used libraries from browser-action-jplib

And it worked great on my simple add-ons.

If you use the library, you may have problems with the AMO review

It can be solved using issue