firefox - Jetpack ステータス バー パネルのスタイルを正しく設定するにはどうすればよいですか?

Question

Mozilla Jetpackでステータス バー パネルを作成すると、ボーダー/シェーディングなどが欠けているため、ステータス バーを「中断」する機能のない灰色のボックスのように見えます。これにより、通常のステータス バー パネルのように見えます。

他のステータス バー パネルのように見せるにはどうすればよいですか?

Answer 1

2 つのトリックが含まれます。より重要なのは、 CSS 宣言<div>を使用してスタイル設定された のペアでステータス バーの HTML をラップすることです。-moz-appearance

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

これでかなり近づきますが、実際のステータス バーの左側がわずかに明るくなり、バーの中央にあるステータス バー パネルに適用するとかなり目立ちます。これを修正するには、outer の左側に 50 ピクセルのパディングと負のマージンを追加します<div>。

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

ほら！通常のものと見分けがつかないステータスバーパネル。コンテンツがすべて HTML であれば、完了です。ただし、ステータス バー パネルのテキストも一致させたい場合は、他にいくつかのスタイルを適用できます。埋め込みスタイルシートを使用してこれを行う方法の完全な JavaScript ソースを次に示します。

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

(この例では、JavaScript で複数行の文字列をシミュレートするために E4Xも使用しています。)