GeckoのDOMイベント処理の実装 (Gecko Inside ver.)

中野雅之
• 肩書き
• 正式: Mozilla Japan 国際化担当マネージャ
• 非公式: Mozilla Japan 大阪支部長
• 大阪の自宅で、自宅警備しながら仕事してます

中野雅之
• 色んなアカウント
• メールアドレス: masayuki@d-toybox.com
• Skype: masayuki-nakano
• Twitter: @d_toybox
• Blog: 「もずはっく日記」で検索

アジェンダ
• 簡単な用語解説
• DOMイベントの基礎知識
• Geckoのイベント処理の実装
• イベントとe10s

簡単な用語解説
• D3E
• DOM Level 3 Events の略
• DOM Level 4 Events にあたる仕様案の名前だった、”UI
Events” に改名され、マージされた
• DOM Level 3 KeyboardEvent key Values
• KeyboardEvent.keyの値を定義した仕様
• 元々は D3E で定義されていたものの分割された
• DOM Level 3 KeyboardEvent code Values
• KeyboardEvent.codeの値を定義した仕様
• 元々は UI Events で定義されていたものが分割された

• Edit Events
• UI Events からinputイベントとbeforeinputイベントを分離した
仕様
• しかし、迷走中
• inputイベントとbeforeinputイベントはそれぞれ、editと
beforeeditイベントに改名され、従来のinputイベントとの後
方互換性も無い

• PresShell
• “Presentation Shell”の略
• DOM document (window?)ひとつに対して、一つ生成される
• nsPresShell.cpp で PresShellとして実装され、nsIPresShell
抽象クラスでインターフェースが定義されている
• ESM
• イベントの前処理や後処理、イベントによって変化するコンテ
ンツの状態管理(:hover状態等)を管理している、
EventStateManagerの略
• PresShellに生成され、破棄される

• PresContext
• “Presentation Context”の略
• PresShellに生成され、破棄される
• RefCountable ではないので、クラスのメンバとして保存する
時は nsCOMPtr<nsIPresShell>を保存しておき、
GetPresContext()で取得する方が安全

• dispatch、fire
• 共にイベントを発火する意味で違いは無い
• default action
• イベントが発生した際にブラウザが行う動作、例えば、
wheelイベントに対する、スクロールやズーム処理が
wheelイベントのdefault action
• consumed
• Event.preventDefault()が呼び出され、default action
がキャンセルされている状態

DOM イベントの基礎
• フェイズと、プロパゲーション
• イベントを捕まえる
• イベントの伝播を抑制する
• ブラウザのイベント処理を妨害する
• Gecko独自のイベントグループ

capturing フェイズ
1. 最初はwindow
2. 次にdocument
3. rootからtargetの親
• targetの決定は、イベント
依存
• フォーカス
• 発生位置
• ……等々

target フェイズ
• targetフェイズは、
capturingフェイズの一部
でもあり、bubblingフェイズ
の一部でもある。
• windowやdocumentが
targetの場合も

bubbling フェイズ
1. target の親からroot
2. 次にdocument
3. 最後にwindow
• Event.bubblesが falseの場
合、bubblingは発生しない

イベントを捕まえる
• 書式:
• EventTarget.addEventListener(
イベント名, ハンドラ, Capture?);
• EventTarget.removeEventListener(
イベント名, ハンドラ, Capture?);
• イベント名: イベントの名前 "click" とか、 "keydown"
• ハンドラ: function foo(aEvent) { /* something */ }がお手軽で十分
• Capture?: trueなら、capturing フェイズと、target フェイズ、falseなら、target フェイ
ズと、bubbling フェイズ

• 単純な例1:
• 全ての要素で発生するkeydownイベントを知りたい
• イベントターゲットより先に知りたい
• removeする必要はない
document.addEventListener(
"keydown",
function (aEvent) { /* something */ },
true);

• 単純な例2:
• 全ての要素で発生するkeydownイベントを知りたい
• イベントターゲットより後に知りたい
• removeする必要がある
function keydownHandler(aEvent) {
/* something */
}
document.addEventListener(
"keydown", keydownHandler, false);
…
document.removeEventListener(
"keydown", keydownHandler, false);

イベントの伝播を抑制する
• 複数のイベントリスナを登録している場合、あるイベントハンドラ
で処理済みのイベントを他のイベントハンドラでは無視したい場
合が考えられる
• Event.stopPropagation()か、Event.stopImmediatePropagation()
を呼ぶと、それ以降のイベント発生を中止できる
• Event.stopPropagation()では、次のEventTarget以降でのイベ
ントハンドラの実行を中止できる
• Event.stopImmediatePropagation()では、同じEventTargetに登
録されている未処理のイベントハンドラも含めて、イベントハン
ドラの実行を中止できる

ブラウザのイベント処理を妨害する
• ブラウザにdefault actionを実行してもらいたくない場合が考え
られる
• Event.preventDefault()を呼び出すと、Event.defaultPrevented
属性値がtrueになる
• defaultPrevented属性がtrueなら、ブラウザはdefault action
を実行しない(ただし、タブの切替等、セキュリティ上、無視す
ることはある)
• Webアプリは Event.defaultPreventedの値を、処理前に確認
することで、Event.stopPropagation()の代用としても使える

Gecko独自のイベントグループ
• GeckoはDOMイベントを捕まえることでデフォルトアクションを
実装することがある
• WebコンテンツがEvent.stopPropagation()を呼び出したもの
の、Event.peventDefault()を呼び出していない場合にdefault
actionを実行する必要がある
• Webコンテンツと同じ様にイベントリスナを登録していると、
Event.stopPropagation()の呼び出しだけでdefault actionの実
行が抑制されてしまう
• 実はこのバグは多く、私自身も発見しては修正している

• GeckoはWebコンテンツの登録するイベントリスナをdefault
event groupに登録する
• Gecko内部や、UIはイベントリスナをSystem Event Groupに
登録する(べき)
• 最初にdefault event groupに登録されたリスナが実行され、そ
の後、system event groupに登録されたリスナが実行される、
つまり……

1. default event groupのcapturing phase
2. default event groupのtarget
3. default event groupのbubbling phase
4. system event groupのcapturing phase
5. system event groupのtarget
6. system event groupのbubbling phase
という順序で実行される

• Event.stopPropagation()やEvent.stopImmediatePropagation()
は各event group内での伝播を止めるのみ
• default event groupで呼び出していても、system event
groupでの実行は保証されている
• system event group内で呼び出した場合にはdefault event
groupと同様にそれ以降のイベントリスナは呼び出されない
のでsystem event groupに登録しているイベントリスナ全て
が実行を保証されている訳ではない

Geckoのイベント処理の実装
• OSネイティブなイベントをDOMイベントとしてWebアプ
リに通知するケースを解説
• 図にすると、次のように……

Geckoのイベント処理の実装
nsDocument
PresShell
widget EventDispatcher
EventStateManager
Widget*Event
dom::*Event
PreHandleEvent() PostHandleEvent()
Dispatch()
CreateEvent()
2
3
4
5
6
EventTargetChainItem
nsINode
EventListenerManager
HandleEvent() handler2
handler1
nsINode
HandleEvent() handler2
handler1
7
8
10
1
9

• イベントターゲットで、最初にイベントリスナが登録された時に、
インスタンスが生成され、そのノードに保存される
• そのノードに登録された全てのイベントリスナを管理する
• HandleEvent()が呼び出されると、イベントの名前とフェーズ、
イベントリスナのグループがマッチするものを探し、マッチした
場合に登録されているハンドラを実行する
• stopImmediatePropagation()が呼び出されたら、中断する

モジュール間の処理の流れの例
1. widget/ は、各 OS のネイティブイベントをハンドリングする
モジュール。ネイティブイベントが発生したら、内部イベント
である、Widget*Eventクラスのインスタンスをスタックに作
成し、その値を設定する
2. PresShellにイベントを送信、PresShellが target を決定す
る

3. EventStateManager::PreHandleEvent()が前処理を行う
• 後ほど詳しく……

4. PresShellがEventDispatcher::Dispatch()を呼び出す
5. EventDispatcher::CreateEvent()でWidget*Eventのクラスに
対応した、dom::*Eventクラスを選択し、そのインスタンスを
ヒープに作成する
6. EventListenerManagerを列挙した配列を用意し、
EventTargetChainItem::HandleEventTargetChain()を呼び
出す

モジュール間の処理の流れ
7. EventTargetChainItem::HandleEventTargetChain()で、受け
取った、各EventListenerManagerのHandleEvent()を実行し
ていく
8. EventListenerManager::HandleEvent()は、そのノードに登
録されたイベントリスナを順に実行していく
9. EventTargetChainItem::HandleEventTargetChain()が自身
をもう一度呼び出し、デフォルトアクションの実行のため、
System Event Groupに登録されたリスナを実行する。

モジュール間の処理の流れ
10. EventStateManager::PostHandleEvent()で、デフォルトアク
ションを実行したり、関連するイベントを生成したりする

Widget*Event、Internal*Event
• WidgetEventクラスが全てのイベントクラスの基底クラス
• WidgetMouseEventや、InternalFocusEventといった派生クラ
スが、イベントごとに定義・実装されている
• 各クラスは、ほぼ構造体であり、メンバのカプセル化はほとん
ど行われず、メンバにダイレクトにアクセスする (読み書き問
わず)
• widgetから生成されるイベントは、Widget*Event、それ以外
の場合は、DOMイベントのデータを保存するためだけのもの
は、Internal*Event と命名されている

Widget*Event、Internal*Event
• widget/
• widget/BasicEvents.h
• widget/ContentEvents.h
• widget/MiscEvents.h
• widget/MouseEvents.h
• widget/TextEvents.h
• widget/TouchEvents.h
• dom/events/
• dom/events/InternalMutationEvent.h

PresShell
• イベントの複雑な処理はEventStateManager、表示に関わる
部分はnsPresContextに分離されている
• イベント処理では widget で生成されたイベントを受け取り、
target の決定と、発火処理を行う
• PresShell::HandleEvent()や、関連メソッドを参照

EventStateManager::PreHandleEvent()
• PresShellがイベントを発火する直前に呼び出す
• マウスの操作によって変化する:hoverや、:activeといった要素
の状態設定を行う
• マウスのクリックカウント等、状態の保存や、その値の
Widget*Eventのメンバへの書き出しを行う
• ホイールの速度等、設定でカスタマイズできる項目を、
Widget*Eventのメンバの値を書き換えることで実現してる

EventDispatcher::CreateEvent()
• Widget*Eventクラスのインスタンスや、Internal*Eventクラス
のインスタンスから、DOMイベントの実装クラスを選択し、イ
ンスタンスを生成する
• Javascriptのdocument.createEvent()の実装でもある
• new MouseEvent(…)等は別
• EventListenerManager::HandleEventInternal()が最初のイベン
トリスナを見つけた時点で呼び出される

dom::Event
• DOMイベントの実装クラスは、名前空間 “mozilla::dom“に、
標準仕様と同じ名前で定義
• dom::KeyboardEvent、dom::WheelEvent等
• nsIDOMEventインターフェースを必ず継承している
• dom::Eventは、WidgetEventへのポインタを持ち、イベントの属
性値はここに保存している
• DOMイベントクラスは、Widget*Eventや Internal*Eventへ、
DOMからアクセスするためのラッパクラス

dom::Event
• 古くから実装されているDOMイベントクラスは、固有の、
nsIDOM*Eventインターフェースも継承している
• 新規作成時にはほとんど定義されない
• データにアクセスするだけなら、内部イベントクラスにアクセ
スする方が高速で、実装も単純化される
• nsIDOM*Eventのメソッドは全て、virtual callになるためパ
フォーマンスが悪い

dom::Event
• 内部イベントクラスを定義・実装する必要が無い、シン
プルなイベントを実装する際は、webidlで定義したイ
ベントから、実装コードを自動生成することも可能
• 自動生成の定義は dom/webidl/moz.build で定義
• dom/bindings/Codegen.py によって、ビルド時に
cppファイルが自動的に生成される

dom::Event
• 実装例
• dom/events/
• dom/events/Event.cpp
• dom/events/UIEvent.cpp
• dom/events/WheelEvent.cpp
• dom/svg/
• dom/svg/SVGZoomEvent.cpp

EventDispatcher::Dispatch()
• PresShellから呼び出される
• 最初に、 targetのPreHandleEvent()を実行する
• windowからtargetノードまで辿り、作成されている全ての
EventListenerManagerを列挙し、配列に格納
• EventTargetChainItem::HandleEventTargetChain()にその配
列を渡す
• その後、 targetのPostHandleEvent()を実行する
• 発火が終了しても、DOM イベントが JS の変数等から参照
されている場合、内部イベントをヒープにコピーする
• 発火処理後、スタックにある内部イベントは破棄されるた
め

EventTargetChainItem::HandleEventTargetChain()
• EventDispatcher::Dispatch()に呼び出される
• 列挙されている、windowからtargetの親ノードまでの
EventListenerManagerの、HandleEvent()を実行していく
(capturingフェーズ)
• Event.stopPropagation()がHandleEvent()実行中に呼び出さ
れていたら、ループを中断する

• 次に、targetのEventListenerManagerのHandleEvent()を呼び
出す (targetフェーズ)
• Event.stopPropagation()か、
Event.stopImmediatePropagation()が既に呼び出されていた
場合、実行しない

• 次に、列挙された、targetの親から、windowまでの
EventListenerManagerの、HandleEvent() を実行していく
(bubbling フェーズ)
• Event.bubblesがfalseなら実行しない
• Event.stopPropagation()か、
Event.stopImmediatePropagation()が既に呼び出されていた
場合、実行しない

• 次に、イベントターゲットが生成した、CSS boxを実装している、
nsIFrame::HandleEvent()を呼び出す
• PresShellがEventDispatcher::Dispatch()に渡したcallbackク
ラス経由で呼び出し
• default actionの実装に利用可能

• 最後に、System Event Groupのイベントリスナが登録されて
いる場合、capturing、target、bubblingフェーズを再度、処理
する
• 通常のWebコンテンツからは登録不可
• Web コンテンツにEvent.stopPropagation()等を呼び出されて
いても実行される
• default actionの実装に利用可能
• System Event Group 内のリスナで、stopPropagation()等を
呼ぶと中断される

EventStateManager::PostHandleEvent()
• PresShellが最後に呼び出す
• イベントの後処理や、default actionを実行
• マウスホイールによるスクロール処理やズーム処理
• mouseupからclickイベントや、dblclickイベントの生成
• mousemoveから、 mouseover、mouseout、mouseenter、
mouseleaveイベントの生成

イベントとe10s
PresShell
widget
EventStateManager
PostHandleEvent()
1
2 5
6
TabParent
3 4
PuppetWidget
7
PresShell
9
EventStateManager
EventDispatcher
etc.
11
12
TabChild
8
10
13

イベントとe10s
• e10sではネイティブのイベント入力は全てchromeプロセスで
処理し、Widget*Eventをwidget/からdispatchする
• フォーカスを持った要素が子プロセス内にある場合、
EventStateManager::PostHandleEvent()がイベントを
TabParent経由で子プロセスへ送信する
• 一部例外のイベントもあり(WidgetCompositionEvent等)
• 子要素ではTabChildがイベントを受け取ると、PuppetWidget
へ送信し、PuppetWidgetから子プロセス内のPresShellにイベ
ントを送信し同様に処理される
• つまり……

イベントとe10s
• 子プロセスに送信されるイベントは、親プロセスのdefault
actionの一部
• 子プロセスには非同期で送信されているため、親プロセスは
そのイベントがconsumedとなったかどうかを知ることができ
ない
• OS側に非同期でイベントの処理結果を返す方法が無い限り、
嘘の結果しか返せない
• 各OSがモダンな結果になることを期待したい
• IMEのみ、即座にコンテンツの情報を返したりする必要があ
るため、ContentCacheという仕組みを用意している

GeckoのDOMイベント処理の実装 (Gecko Inside ver.)

Recommended

Recommended

More Related Content

Similar to GeckoのDOMイベント処理の実装 (Gecko Inside ver.)

Similar to GeckoのDOMイベント処理の実装 (Gecko Inside ver.) (20)

Recently uploaded

Recently uploaded (10)

GeckoのDOMイベント処理の実装 (Gecko Inside ver.)