highlighter を キーボードで

Firefox 標準の Inspector の highlighter が 素敵です。(nightly)

しかし、マウスベース操作なため、vimperator的に残念だったので、専用 modeを作ってみた。


https://github.com/caisui/vimperator/blob/master/plugin/inspectorUI.js


特徴は こんな感じ

  • caret(単なるboxですが)をマウスポイントの代りに動かす独自 map
  • 独自commandを組込
  • DOM Inspecotr を call できる
  • (残念仕様ですが)Chrome に対しても 動作


mappings

h caret を caret size の 半分 上へ移動
j caret を caret size の 半分 左へ移動
k caret を caret size の 半分 下へ移動
l caret を caret size の 半分 右へ移動
gh,b caret を Node の 境界へ 移動(左)
gj caret を Node の 境界へ 移動(下)
gk caret を Node の 境界へ 移動(上)
gl,w caret を Node の 境界へ 移動(右)
gg caret を window の top へ
caret を window の bottom へ
^ caret を window の left へ
$ caret を window の right へ
caret 範囲内にある Node を 小さい順に切り替え
のリバース
breadcrumbs を右へ移動(Firefox 10 じゃないとエラー)
breadcrumbs を左へ移動(Firefox 10 じゃないとエラー)
次 の Node を 選択
前 の Node を 選択
zo caret を 拡大
zi caret を 縮小
zt ハイライトされている Node を 画面 top へ
zz ハイライトされている Node を 画面 中央へ
zb ハイライトされている Node を 画面 bottom へ
d ハイライトされている Node を 削除
e ハイライトされている Node の xml をecho
y ハイライトされている Node の xml をclipboardへ
i ハイライトされている Node を DOM Inspector で 開く(要 DOM Inspector)
o ハイライトされている Node を Object Inspector で 開く(要 DOM Inspector)
r ハイライトされている Node に 適用されている Style Rule 一覧 を echo
gc ハイライト対象を chrome に 切り替え(toggle)
? map 一覧を表示
Esc Inspector 終了
highlighter の 透過(toggle)

command は まだ 貧弱ですが、こんな感じ

:dom [--scratchpad] [--position=replace|beforebegin|afterbegin|beforeend|afeterend] expression

ハイライトNode に 挿入


挿入位置は、--positionで調整可(default は beforeend)
また、--scratchpad で scratch pad に 記述した内容を 挿入
(要 scratchpad.js)

:style value

ハイライトNode の style 属性を調整 (completer 装備)


:javascript expression


標準の:javascript そのままです(echo も 移植してます)