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 も 移植してます)