Comment redimensionner un panneau de barre d'état Jetpack correctement?

Question

Lorsque je crée un panneau de barre d'état dans Mozilla Jetpack, il ressemble à une boîte grise sans relief qui "interrompt" la barre d'état, car il lui manque les bordures/ombrage/etc. cela fait ressembler à un panneau de barre de statut normal. Comment puis-je l'obtenir pour ressembler à d'autres panneaux de barre d'état?

Answer 1

Il y a deux astuces. Celui plus important est d'envelopper votre barre d'état HTML dans une paire de <div> s qui sont décorés à l'aide de la déclaration -moz-appearance CSS:

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

Cela nous se rapproche, mais il y a un léger éclaircissement sur le côté gauche de la barre d'état réel qui est assez visible lorsqu'il est appliqué à un panneau de barre d'état au milieu de la barre. Vous pouvez résoudre ce problème en ajoutant un rembourrage de 50 pixels et une marge négative sur le côté gauche de la <div> extérieure:

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

Et voilà! Un panneau de barre d'état qui ne peut pas être distingué des panneaux normaux. Si votre contenu est entièrement HTML, vous avez terminé. Si, toutefois, vous souhaitez que le texte de votre panneau de barre d'état corresponde également, d'autres styles doivent être appliqués. Voici la source complète JavaScript pour savoir comment faire, en utilisant une feuille de style intégré: (. Cet exemple utilise également E4X to simulate multi-line strings in 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() 
});