¿Cómo puedo Estilo un panel de barra de estado Jetpack correctamente?

Question

Cuando creo un panel de barra de estado en la Mozilla Jetpack , se ve como un cuadro gris sin rasgos distintivos, que " interrumpe" la barra de estado, ya que carece de la frontera / sombreado / etc. que hacen que parezca un cuadro normal barra de estado.

¿Cómo puedo conseguir que se vea como otros paneles de la barra de estado?

Answer 1

Hay dos trucos involucrados. El más importante es para envolver la barra de estado HTML en un par de <div>s que se diseñó usando la declaración -moz-appearance CSS:

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

Esto nos acerca, pero hay una ligera aligeramiento en el lado izquierdo de la barra de estado real, que es bastante notable cuando se aplica a un panel de la barra de estado en el centro de la barra. Puede solucionar este problema mediante la adición de un relleno de 50 píxeles y un margen negativo al lado izquierdo de la <div> externa:

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

Et voilà! Un panel de la barra de estado que es indistinguible de las normales. Si su contenido es todo el HTML, ya está hecho. Sin embargo, si desea que el texto de su estado de panel de la barra para que coincida también, hay algunos otros estilos a aplicar. Aquí está la fuente de JavaScript completa de cómo hacerlo, utilizando una hoja de estilo incrustada:

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

(Este ejemplo también utiliza E4X para simular cadenas multilínea en JavaScript .)