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

Question

ステータスバーパネルをMozilla Jetpackに作成すると、境界線や陰影などがないため、状態バーに「割り込み」する機能のないグレーのボックスのように見えます。通常のステータスバーパネルのように見えます。

他のステータスバーパネルのように表示するにはどうすればよいですか？

Answer 1

2つのトリックがあります。もっと重要なのは-moz-appearance CSS宣言を使用してスタイリングしている<div>秒のペアであなたのステータスバーHTMLをラップすることです：

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

これは私たちが近づくが、左側にわずかな軽量化がありますバーの真ん中のステータスバーパネルに適用すると、かなり目立つ実際のステータスバーが表示されます。あなたは、外<div>の左側に50ピクセルのパディングと負のマージンを追加することによってこの問題を解決することができます

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

のEtほら！ステータスバーパネルは通常のものと区別できません。あなたのコンテンツがすべて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() 
}); 

（この例ではまた、E4X to simulate multi-line strings in JavaScriptを使用しています。）