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