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の文字などの下部が切れる事があるので注意です。