status bar 最適化計画そのいち ( migratestatusbar.js )

ちょっと status bar ごちゃごちゃしてきたので整理すんべと思っていろいろやってみた結果そのいち。前書いた http://d.hatena.ne.jp/janus_wel/20081028/1225230512 がちょっとアレだったのと http://vimperator.org/trac/ticket/17 のコードが今更理解できたので混ぜて設定とかもできるようにしてみた。

http://d.hatena.ne.jp/janus_wel/20081028/1225230512 では favicon を表示してくれる element を clone していて、まぁ動いてくれるっちゃ動いてくれるんだけど clone 元と id がかぶっているのでよろしくない。そして id を変更してしまうと favicon のないページでは何も出てこなくなったりと Firefox 側で面倒を見てくれなくなる。

対して id:teramako が書いてる方は要素を移動させているというのがキモで、中身をいじってないなら動的な変更は Firefox 側でよしなにやってくれる。 RSS / Atom のあるページで feed button を表示してくれたり favicon を切り替えてくれたり favicon がないページでは適用している theme の default icon を表示してくれたりとかそういうの。

てなわけで feed button だけ移動させるのもちぐはぐな感じがする -> 全部移動させちゃえばいいじゃない -> 移動するためのおれ plugin 書いた -> あれ ? これ抽象化できね ? -> logic 抽象化した plugin 書いた -> 移動する要素と移動先の指定もできるようにしよう -> 完成 <- イマココ!!

http://coderepos.org/share/browser/lang/javascript/vimperator-plugins/trunk/migratestatusbar.js

liberator.globalVariables.migrate_elements に以下のような配列を指定すると移動するようになる。以下は star button, feed-button, favicon を移動させる。 local bookmark したらハートが出るから star button はいらなくね ? って設定したあとに一瞬おもったけど URL 長いとハート隠れちゃうので持ってくるようにしてる。うちはこれくらいしか使ってないけど他にも有用なものがあるかも。

liberator.globalVariables.migrate_elements = [
    {
        // star button of awesome bar
        id:    'star-button',
        dest:  'security-button',
        after: true,
    },
    {
        // icon that show the existence of RSS and Atom on current page
        id:    'feed-button',
        dest:  'security-button',
        after: true,
    },
    {
        // favicon of awesome bar
        id:    'page-proxy-stack',
        dest:  'liberator-statusline',
        after: false,
    },
];

スクリーンショットは以下に。移動なので awesome bar は当然悲惨な姿になる。

  • before
  • after

つづく。

status bar 最適化計画そのに ( statusbar_organizer.vimp )

http://d.hatena.ne.jp/janus_wel/20081127/1227807826 で status bar のアイコンも増えてちょっと使い勝手がよくなったんだけどちょと見栄え悪い。ていうかなにこの空白。キモい。主に padding がキモい。 Greasemonkey のサルはイラッとくる顔してるし。

てなわけで :style でこの空白を殺すことに。以下を ~/vimperator/colors/ に statusbar_organizer.vimp とかって保存。2.0pre だと ~/vimperator/plugin 以下の js/ vimp ファイルが自動的に読み込まれるので、 ~/vimperator/plugin/style/ を作ってその下に放り込んどくと楽。ゴメン、 evening.vimp の設定 ( http://coderepos.org/share/browser/lang/javascript/vimperator-plugins/trunk/colors/evening.vimp ) パクった。

" organize icons of status bar
style -name statusbar chrome://* <<EOM
#status-bar statusbarpanel {
    padding: 1px !important;
}
statusbarpanel > * {
    margin: 0 !important;
    padding:0 !important;
}
EOM

" vim: sw=4 sts=4 ts=4 et

vimpratorrc like に double quotation がコメント。 here document で流し込むのは定型で覚えればいいと思う。あとこうやって目的ごとにファイル切り分けとくといい感じにアレコレできてよいかも。これでだいぶマシになった。

  • before
  • after

つづく。

status bar 最適化計画そのさん ( pathtraq.js, yslow.js )

http://d.hatena.ne.jp/janus_wel/20081127/1227809863 でかなり引き締まった status bar だけどなんつーかさ、一番右のアレ、邪魔じゃね ? スペース使いすぎじゃね ? というわけで個別に何とかする plugin を書いた。

別 profile で YSlow 使ってて同じく盛大にスペース浪費してるので yslow.js も。 Pathtraq のアイコンは favicon からパクってきたんだけど著作権とか大丈夫かな ? まぁ文句言われたら差し替えよう。

で、 page/site の rating もこのままだと見られないんだけど vimp 的には pageinfo を使うのが正解だと思ったので pageinfo option を拡張してある。 pathtraq.js は 'p' 、 yslow.js は 'y' が指定可能でそれぞれ status bar に表示してた値 ( Pathtraq は page/site ratings 、 YSlow は grade, size, time ) を pageinfo に表示するようになる。

スクリーンショットは以下。


  • before
  • after

もうちょっとだけ続くんじゃ。