マウストレイルとは

マウスを右クリックして動かすと、その軌跡を表示する機能。右クリックを放すと軌跡は消滅する。

All-in-One Gestures の場合

DOM のレベルで実現している。右クリックの mousedown でジェスチャを開始すると、HTML の body 要素直下に aioTrailContainer 要素が生成される。その後、マウスを動かすにしたがってサイズが1×1の aioTrailDot 要素を複製して aioTrailContainer 下に appendChild する。この aioTrailDot 要素はサイズが1×1で、マウスポインタと同じ座標へ絶対配置されており、背景色がある。この aioTrailDot 要素を並べることで、あたかも一本のつながった線に見えるようになる。
この方式には以下のような問題点がある。
・縦長のページでマウストレイルを行うと重たい
・曲線が滑らかに描画されない
・DOM Inspector で Webページの DOM を調べながらマウスジェスチャをすると、Firefox がハングアップする。

Optimoz Mouse Gestures の場合

Windows では、C++製?の独自 XPCOM コンポーネント (mgMouseService.dll) を用い、 Windows ネイティブな?実装によってマウストレイルの描画を実現している。
この XPCOM は mgIMouseService というインタフェースを有し、 initTrails と stopTrails の2つのメソッドによって XUL からマウストレイルの描画を制御することができる。

Windows 以外のプラットフォームでは All-in-One Gestures と同じ実装方式である。

他にうまい方法はあるか？

マウストレイル開始時に ブラウザ上に canvas 要素をかぶせ、 dot の stroke を連続で行うことで実現可能。この方法では、 All-in-One Gestures の実装方式の問題点が解決され、曲線が滑らかに描画でき、縦長のページで動作が重たくなることも無い。しかし、以下のような問題点がある。
・canvas 要素が邪魔をしてマウスが通過したリンクを調べることができない。
・一時的にメモリ使用量が激増する。