Popup ALT Attributes ALT属性のポップアップ表示の紹介

代替文字列のポップアップ表示

まずは名称にもなっている方の機能からご説明します。

MozillaのXULでは、<tooltip id="foobar"/>という要領で記述したtooltip要素のid属性を他の要素のtooltip属性に記述することで、その中の要素などをポイントしてしばらく待つとツールチップ型のポップアップが表示される、という機能があります。この時、popupshowingイベントをトリガーにして「どの要素の上でポップアップが表示されたか」を知ることができ、Mozillaではこの時に要素のtitle属性に記述されたテキストなどを取得して、場合に応じたポップアップを表示するようになっています。

この拡張機能はpopupshowingイベント発生時の処理に割り込んで、ポップアップが表示されたのがHTMLの中に埋め込まれた画像であればその代替文字列を取得して表示します。この処理自体はごくごく単純なもので、特筆するようなことは特にないです。

なお、画像でなかった場合や代替文字列がない場合などは、割り込みを終了してMozillaの元々の処理を続けます。

長いテキストの自動折り返し

名称になっている機能の処理が単純なのに比べて、ポップアップの自動折り返しについては少々ややこしいことをしています。

tooltip要素は、label属性に設定したテキストが内部のlabel要素（HTMLのlabelとは別物です）のvalue属性の値に代入されて、そのままポップアップの内容として表示されます。つまり、tooltip要素のlabel属性に書かれたテキストがポップアップ表示されるということです。

label要素は使い方が二つあります。一つはvalue属性に文字列を設定するもので、文字列が長くなっても折り返しはされません。Mozillaのポップアップが折り返されないのはこの制約によるものです。

もう一つの使い方は、HTMLの要素のように開始タグと終了タグの間に文字列を書く、つまり、label要素にテキストノードの子を持たせるというもので、この場合は文字列が長くなるとウィンドウの右端で折り返されます。この拡張機能は、value属性の値として書かれたテキストを自動的に要素の内容に置き換えることで、ポップアップの自動折り返しを実現しています。

この拡張機能はtooltip要素の属性が変更されたことをDOMAttrModifiedイベントで検知して、変更されたのがlabel属性であった場合（つまり、ポップアップするテキストが設定された時）、その値を取得して新しいテキストノードを作り、tooltip要素内部のlabel要素の子要素として挿入します。後は、ポップアップが表示されれば全体の幅が適当に計算されて、それに合わせてテキストも折り返し表示されるという寸法です。

ただ、開発環境では残念ながら、これだけでは正常に機能しませんでした。何故か表示されるポップアップの高さが1行分にしかならず、2行目以降が隠れてしまうのです。 試しにgetComputedStyle()メソッドで表示中のポップアップの「高さ」の値を調べてみたところ、内部的には正しい高さが取得できたので、レンダリング時の問題でそれが反映されていないらしいということが分かりました。そこでこの拡張機能では、ポップアップが表示されて「適切な高さ」が計算されたタイミングで（タイマーで0ミリ秒後に処理を送らせるだけでよいです）、その値を取得し改めて「ポップアップの高さ」として設定し直すことにより、ポップアップを強制的に正しいサイズで表示させるようにしています。