まめ畑

ゆるゆると書いていきます

JetpackのStatusBarの問題点

Jetpackのリリース当初から使用可能だったAPIの、StatusBarですが少し注意する点があります。フォーラムでも少し話題が出てたので、メモ程度に残しておきます。
既にいくつか、ステータスバーに登録されるFeatureを使用している方は気づいていると思いますが、実はStatusBarにFeatureを追加していくとステータスバーの縦幅がどんどん太くなっていきます。特に大きいフォントを使用したり、Boldを指定していると顕著に見えます。また、ラジオボタンなど文字以外の要素を追加しても目立ちます。


画像で示すと以下の様になります。



見てわかるとおり、それまで追加されていたFeatureの使用している縦幅に新しく追加するFeatureが使用する幅が加えられてます(追加済みのFeatureのTOPに新しく追加されるため階段状に表示される)
中央に配置するためにFeature内でmargin-topやpadding-topなどを使用して位置を調整する事も可能なのですが、この方法だと今まで追加されているFeatureに依存してしまう場合があるという事と、場合によっては縦幅を増加させてしまいます。

現状で回避する方法はないのですが、フォントサイズを小さくする、アイコンのサイズを小さくするという方法をが現実的です。
どうしても太いのはいや!という方はJetpackのソースをいじれば解決します。
Firefoxプロファイルディレクトリ中の「\extensions\jetpack@labs.mozilla.com\content\js\status-bar-panel.js」の110行目を変更します。

//変更前
iframe.setAttribute("height", statusBar.boxObject.height);

//変更後
iframe.setAttribute("height", "20px");   //20-25px

と幅を書いてしまえば変更されませんが、Featureの文字などの下部が切れる事があるので注意です。