menulist 要素内の menuitem 要素に画像が表示されない

コンテキストメニューやボタンなどをクリックしたときに出てくるポップアップメニューを表すための要素として、https://developer.mozilla.org/ja/docs/XUL/menupopup:menupopup 要素 があります。 そして、この要素の中の各項目を表すための要素として、menuitem 要素 があります。

menuitem 要素にはアイコン画像を付けることができます。 ドキュメントによれば、menuitem 要素の image 属性にアイコン画像のURI を記述し、クラスとして "menuitem-iconic" を指定すれば、アイコン画像が表示されるようになっています。

例えば、menu 要素内に menupopup 要素を入れた場合、以下のようにアイコン画像が表示されます。

<menu><menupopup><menuitemlabel="Hello World!"class="menuitem-iconic"image="hw_icon.png" /></menupopup></menu>

しかし、以下のように menulist 要素の中に menupopup 要素を入れた場合、選択された項目として表示されている部分には画像が表示されるものの、項目一覧のポップアップ中には画像が表示されませんでした。

<menulist><menupopup><menuitemlabel="Hello World!"class="menuitem-iconic"image="hw_icon.png" /><menuitemlabel="これは画像なし" /></menupopup></menulist>

menulist 要素内の menuitem 要素の画像はCSS で非表示にされている

そもそもXUL の構造的にどうなってるのかをDOM Inspector を使って調べてみると、下記画像のような感じになっていました。

詳しい仕組みは調べていませんが、mozilla のアプリケーション側が自動的に menu-iconic-left というクラス名の hbox 要素や menu-iconic-icon というクラス名を持つ image 要素を作っているようです。 これらのXUL の構造は、menu 要素の中の menuitem 要素でも menulist 要素の中の menuitem 要素でも違いはないようでした。

XUL の構造は同じなのになぜ見た目が違うのかというと、CSS でのスタイル指定が違っているからのようでした。 Windows 用Firefox 20 beta のデフォルトCSS だと、menulist 要素内の menu-iconic-left というクラス名の hbox 要素には "display: none" のスタイル指定が適用されていました。 これでは当然アイコン画像は表示されません。

menulist 要素内の menuitem 要素の画像を表示するようにCSS を書く

menulist menupopup.menuitem-iconic.menu-iconic-left{display: -moz-box;visibility:visible;}

上のような感じでCSS を書いておけば、menu-iconic-left というクラス名の hbox 要素が表示されるはずなので、アイコン画像も表示されるようになるはずです。 Windows 環境だと以下のようになりました。 padding などは特にいじってないので、必要に応じていじるといいかもしれません。

また、Linux 環境でもちゃんと表示されました。 (visibility: visible というスタイル指定は、Linux 環境用。)

他にもっとちゃんとした方法があるのかもしれませんが、調べた限りでは他に良い方法はなさそうだったのでCSS をいじるのが一番いいのかなーと思います。

関連情報

• SCRAPBLOG : menulist 要素内での menuitem-iconic クラス : この記事で書いたのと同じく、CSS をいじって画像を表示させる方法について書かれている
• Images with a menulist - Google groups :CSS で背景画像として画像を表示させることができる、とか書かれてる。 確かに Windows 環境だと表示されるけどLinux 環境だったら表示されなかったし微妙な感じがする
• Thumb images (list-image-style) not working in MENULIST • mozillaZine Forums : いろいろ方法が書かれてるけど、どれも微妙な感じがする