通常、 ポップアップ (*1) を開いているときは、キーボードからの入力が効かなくなる。このキーイベント横取りは nsIPopupBoxObject::enableKeyboardNavigator(false) で無効化することができる。このメソッドは enableRollup 同様、 showPopup した直後に呼び出す必要がある。一方ツールチップ (*1) ではデフォルトでキーボード入力イベントの横取りはしないようになっている。

*1 ここでいうポップアップとは popup か tooltip 要素を showPopup メソッドの引数 popuptype を「popup」にして開いたものを指し、ツールチップとは引数 popuptype を「tooltip」にしたものを指す。

ところで、 Firefox 3 では nsIPopupBoxObject::setConsumeRollupEvent というメソッドも使用可能だが、これがどういう効果があるのかよくわからん。

通常、 ポップアップを開いているときは、Firefox のウィンドウ内のどの部分をクリックしてもクリックイベントが横取りされ、クリックイベントが発生する代わりにポップアップが閉じられる。この動作は nsIPopupBoxObject::enableRollup メソッドで変更が可能である。 enableRollup はポップアップを開いた後に呼び出す必要があることに注意。

ここでひとつプラットフォーム依存の悩ましい問題があり、 Windows では enableRollup(false) すると、ツールチップのようにポップアップ内に配置したボタンなどの要素がクリック不可となってしまう。

Windows 以外での環境での動作を知りたいので、テストケースを使った動作確認よろしくお願いします。
popup testcase

—
Windows + Firefox 2 では以下のようになるはずです。
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
[1] x | o
[2] o | x
[3] o | x
[4] o | x
—
Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.9a4pre) Gecko/20070405 Minefield/3.0a4pre
上記と同じ結果。
—
一方、Linux + Firefox 2 ではポップアップ内のボタンは常にクリック可能。
Mozilla/5.0 (X11; U; Linux i686; ja; rv:1.8.1.1) Gecko/20060601 Firefox/2.0.0.1 (Ubuntu-edgy)
[1] x | o
[2] o | o
[3] o | o
[4] o | o
テストケースにはありませんが、 enableRollup(true) も試したところ、OKダイアログを閉じるときにクラッシュするバグがありました。

SCRAPBLOG : ポップアップとツールチップの仕様がOSによって違う (1) の補足

Windows + Firefox 2 で、以下の動作を確認。

1. テストケースを新しいタブで開く。
2. [popup as tooltip] か [tooltip as tooltip] ボタンを押してポップアップ・ツールチップを開く。
3. ツールチップを閉じずに別のタブへ切り替える。
4. [label] [menuitem] [button] [toolbarbutton] それぞれをクリックしてみる。

すると、なぜか4つすべての要素がクリック可能である。

<tooltip> 要素には、マウスがツールチップ上から逃げたときに自動で閉じる仕組みがあるのだが、その挙動が Windows と Linux とで異なるのが悩ましい。

まず前回と同じテストケースを開き、 [tooltip as popup] か [tooltip as tooltip] ボタンをクリックしてツールチップを表示させる。次にツールチップ上へマウスを乗せてからツールチップの外へ移動する。
このとき、 Windows + Firefox 2 ではすぐにツールチップが閉じる。しかし、 Linux ではすぐには閉じず、さらにもう一度ツールチップ上に乗る→ツールチップ外へ移動を繰り返したときにツールチップが閉じる。この動きは果たして正しいのだろうか？

この <tooltip> 要素特有の自動で閉じる仕組みは XBL にて実装されていて chrome://global/content/bindings/popup.xml の <handler event=”mouseout”> を見ればわかる。
Windows では event.relatedTarget を調べてツールチップ外へ逃げたことを識別可能であるようだが、 Linux ではなぜか event.relatedTarget が null となり、代わりに _mouseOutCount の値が2になった時点でツールチップを閉じているようだ。

ソースコードのコメントを読むと、マウスがツールチップ上に乗った時点で _mouseOutCount が1となり、マウスがツールチップから逃げた時点で _mouseOutCount が2となってツールチップが閉じられるような仕組みを想定しているようだ。しかし、実際はマウスがツールチップに乗ったときに発生する mouseout イベントでは event.relatedTarget が null ではないため、 if (!rel) の条件は偽となって _mouseOutCount は増えない。したがって、 Linux では2回ツールチップ外へ逃げたときにツールチップが閉じるという挙動になっている。もしかしてこれはバグだろうか？

なお、Windows + Firefox 3 では、SCRAPBLOG : Bug 373518 – event.relatedTarget is never set when leaving popup にあるようにツールチップ外へ逃げたときの event.relatedTarget が null となるため、 Linux とまったく同じ動きになる。そもそも Bug 373518 自体もバグなのか何なのかよくわからなくなってきた。

例によってMacでの動作は未確認ですので、情報お待ちしております。

ポップアップとツールチップの仕様が Windows と Linux で色々と違いがあって悩ましい。

まず、 <popup> と <tooltip> 要素内に <button> や <menuitem> などのクリックが可能な要素をいくつか配置する。次に、それぞれを showPopup(event.target, -1, -1, type, "bottomleft", "topleft") などとやってツールチップとして表示させる。
すると、 Linux では <button> も <menuitem> も問題なくクリック可能である。多分どんな要素に対してもマウスクリックイベントが伝わりそうな雰囲気。
しかし、 Windows では <button> をクリックしようとしても、何か透明な壁にさえぎられているかのようにクリックできない。なぜか <menuitem> だけはこの壁をすり抜けてクリックすることができる。これは憶測だが、この透明な壁によるマウスクリックイベントの奪取は DOM のレイヤーよりも上で行われているため、 キャプチャフェーズに対するイベントリスナをセットしたりしても、一向にクリックイベントを発生させることができない。

テストケース

Mac ではどうなるか知らん。情報求む！

XBL:XBL 1.0 Reference:Elements – MDC の和訳が完了。のべ6時間くらいかかった。
以下に意味がさっぱりわからん場所をメモしておきます。わかる方は補完よろしくお願いします。

• bindings 要素の解説
  (explicitly or inherited)
  →勘＋意訳「そのバインディングが継承されたものかそうでないかに関わらず」
• bindings 要素の注意
  URI in namespace declarations is an opaque string used to uniquely identify the namespace. It doesn’t have to (and often it doesn’t) point to some actual schema or a namespace-related resource.
  →難しい…
• children 要素の解説
  Only immediate children are matched against the selector.
  →children 要素直下にある要素だけが includes 属性とのマッチングが行われるということ？
• implementation 要素の解説
  For example, in JavaScript the value of this attribute represents the name of the corresponding class that is constructed for the implementation.
  →勘で和訳「例えば JavaScript では、この属性の値が、その実装のために生成されたクラス名に対応します。」

日付や時刻を入力するための XUL ウィジェットが実装された（Trunk ビルド限定）。

datepicker の方は、 type=”popup” でポップアップ式のカレンダー、 type=”grid” とすることで埋め込み式のカレンダーから入力させることも可能。

詳しくは以下の Wiki のページかXBLのソースを参照
XUL:Specs:DateTimePickers – MozillaWiki
chrome://global/content/bindings/datetimepicker.xml

いつのまにか scale という新しい XUL のウィジェットが実装されていた（Trunk ビルド限定）。
max, min 属性で最小値と最大値、 increment 属性でつまみを動かしたときのステップ数を指定し、値のセット/ゲットは value プロパティ（または属性）を通じて行う。
また、 onchange イベントハンドラにより変化に応じた処理が可能である。

<label value="やる気:" />
<scale value="0"
       min="-100"
       max="+100"
       increment="10"
       onchange="this.nextSibling.value = this.value;" />
<textbox />

orient 属性を vertical とすることで、縦方向のスライダも可能。

詳しくは以下の Wiki のページかXBLのソースを参照
XUL:Slider Tag – MozillaWiki
chrome://global/content/bindings/scale.xml

xul:menuitem 要素へアイコンの画像を表示させたい場合、menuitem-iconic クラス を付与して src 属性に画像の URI を指定すれば良い。この方法は xul:menu 要素や xul:toolbarbutton 要素 （type=”menu”） 配下に xul:menuitem 要素を置く場合であれば、うまく動作する。

<menu label="MENU">
  <menupopup>
    <menuitem class="menuitem-iconic" label="MENUITEM" src="http://www.mozilla.com/favicon.ico" />
  </menupopup>
</menu>

<toolbarbutton type="menu" label="TOOLBARBUTTON" >
  <menupopup>
    <menuitem class="menuitem-iconic" label="MENUITEM" src="http://www.mozilla.com/favicon.ico" />
  </menupopup>
</toolbarbutton>

ところが xul:menulist 要素配下に xul:menuitem 要素を置く場合、 xul:menupopup 要素のドロップダウンリスト中ではアイコンの画像が表示されない。

<menulist>
  <menupopup>
    <menuitem class="menuitem-iconic" label="２ちゃんねる"   src="http://www.2ch.net/favicon.ico" />
    <menuitem class="menuitem-iconic" label="PINKちゃんねる" src="http://www.bbspink.com/favicon.ico" />
    <menuitem class="menuitem-iconic" label="まちBBS"        src="http://www.machibbs.com/favicon.ico" />
    <menuitem class="menuitem-iconic" label="したらば"       src="http://jbbs.livedoor.jp/favicon.ico" />
  </menupopup>
</menulist>

ドロップダウンリスト中にも画像を表示させるには、 chrome://browser/skin/feeds/subscribe.css を参考にして以下のような CSS を適用してやる。下記の例ではついでにサイズの大きな画像を 16×16 px に縮小させている。

menulist menupopup > menuitem {
  -moz-padding-start: 23px;
}

menulist menupopup > menuitem.menuitem-iconic {
  -moz-padding-start: 2px;
}

menulist menupopup > .menuitem-iconic > .menu-iconic-left {
  display: -moz-box;
  min-width: 16px;
  -moz-padding-end: 2px;
}

menulist .menulist-icon,
menulist menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
  width: 16px;
  height: 16px;
}

先日XULのスピンボタンが実装されたと思いきや、今度は8月17日のトランクビルドにて Bug 345510 – Add <textbox type=”number”> がFixされ、スピンボタン付きの数値入力用テキストボックスが利用可能になった。通常の textbox 要素に type=”number” 属性をセットし、入力可能な最小値（min属性）、最大値（max属性）、増減（increment属性）を指定してやれば、思い通りにスピンボタンが動作してくれる。
また、属性 wraparound=”true” によって最小値と最大値が循環して入力できるようになる。また、属性 decimalplaces=”3″ などとすることで小数点以下何桁まで表示するかを指定可能である。

<textbox type="number" min="80" max="250" increment="10" />

詳しくは: chrome://global/content/bindings/numberbox.xml