如何在firefox插件的工具栏按钮上显示文本？

Question

我正在尝试在工具栏按钮上的图标上显示一个小文本(新消息计数),类似Chrome和Opera扩展,在工具栏图标上有徽章.文本不应覆盖整个图标,它应位于底部,以便用户仍然可以看到图标的主要部分并识别它的扩展名.我怎样才能做到这一点？

您可以在Chrome上的示例图片上看到我想要的内容:

我尝试使用stack元素中的description,span和div,但我无法将它们都放在底部.描述和div始终在中心显示文本,而span显示在图标的右侧,使整个按钮更宽.

<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

在一级方程式赛车中，我在等待雨停时浪费了一些时间，所以我用画布做了这个工作：

更新：当用户从工具栏中删除图标时，以前的方法存在缺陷，更新的方法更强大且代码更少。

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;
}