How do I style a Jetpack status bar panel correctly?

Question

When I create a status bar panel in Mozilla Jetpack, it looks like a featureless grey box which "interrupts" the status bar, as it lacks the borders/shading/etc. that make it look like a normal status bar panel.

How can I get it to look like other status bar panels?

Answer 1

There are two tricks involved. The more important one is to wrap your status bar HTML in a pair of <div>s which are styled using the -moz-appearance CSS declaration:

<div style="-moz-appearance:statusbar">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

This gets us close, but there is a slight lightening on the left-hand side of the real status bar which is quite noticeable when applied to a status bar panel in the middle of the bar. You can fix this by adding a 50-pixel padding and negative margin to the left-hand side of the outer <div>:

<div style="-moz-appearance:statusbar;margin-left:-50px;padding-left:50px">
    <div style="moz-appearance:statusbarpanel">
        Your content here
    </div>
</div>

Et voilà! A status bar panel which is indistinguishable from normal ones. If your content is all HTML, you're done. If, however, you want your status bar panel's text to match as well, there are a few other styles to apply. Here's the full JavaScript source for how to do so, using an embedded stylesheet:

jetpack.statusBar.append({
    html: (<><![CDATA[
        <style type="text/css">
            .statusbar {
                font-family: Tahoma;
                font-size: 11px;
                height: 22px;
                -moz-appearance: statusbar;
            }

            .statusbarpanel {
                height: 18px;
                line-height: 17px;
                -moz-appearance: statusbarpanel;
                padding-left: 4px;
                padding-right: 4px;
            }
        </style>

        <div class="statusbar">
            <div class="statusbarpanel">
                Your content here.
            </div>
        </div>
    ]]></>).toString()
});

(This example also uses E4X to simulate multi-line strings in JavaScript.)