Firefoxの拡張のドロップダウンなツールバー・ボタン

Firefoxの拡張でツールバー・ボタンはtoolbarbutton要素で作る。これをドロップダウンにするにはtype属性にmenuを指定してやり、子にmenupopupを作ってやれば良い。が、このままだと微妙に表示がおかしいというかちょっと残念な形になるということに気づいたのでメモ。別にバグるとかそういう致命的なものではないけどしっくりこない感じの挙動。

繰り返しになるけどドロップダウンなツールバー・ボタンは、

<toolbarbutton id="dropdown-test"
  label="ドロップダウン"
  type="menu">
  <menupoup>
    <menuitem label="項目 #1"/>
    <menuitem label="項目 #2"/>
    <menuitem label="項目 #3"/>
    <menuitem label="項目 #4"/>
  </menupoup>
</toolbarbutton>

このように作る。このdropdown-testのスタイルにlist-style-imageで画像を与えてやるとそれがアイコンになり、

といったように右に(ロケールによるけど)矢印付きで表示される。まるで問題ないように見えるのだが、ちょっとアレな感じになるのは、大きいアイコン表示でかつテキストも表示する場合。わかりやすいように他の普通のツールバー・ボタンと並べてみると、こんな感じになる。

普通のツールバー・ボタンのラベルが下に来ているのに対して、ドロップダウンの方はラベルが右に来てしまう。toolbarbutton要素に対して、class属性でtoolbarbutton-1を指定してやるとラベルは下に来るが、今度は矢印も下に来てしまう(上記画像のHomeというラベルの更に下に矢印が出る感じ)。見た目が悪いうえにツールバーが太くなってしまう。また、typeでmenu-buttonを指定した場合は、ラベルは下、矢印は右に来るのだけどアイコン部分をクリックした時の動作をきちんとコーディングしなければならなくなる。

これをtype="menu"の挙動のままラベルは下、矢印は右にするにはtoolbarbuttonへのスタイル指定で、

#dropdown-test {
  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu-vertical");
}

とmenu-verticalというビルトインのスタイルを適用してやれば良い。

このmenu-verticalはFirefoxのデフォルトのテーマでは使われていないからか、あまりメジャーじゃない模様。ゴリゴリCSSを書いて無理やり矢印を右に持っていこうとしてた苦労はいったい……。