Sage のツールバーの改造

そーいやフィードリーダはこれまで全然使ってなかったなぁ．これからは意識して使うようにするか．と思い立って，とりあえず Sage をインストールした．機能に不満を感じ始めたら他のリーダに乗り換えるだろう，そのうち．

エクスプローラや IE, Firefox などのツールバーのアイコンボタンと言う方が適切か ?は全て小さいサイズ (16 * 16) に変更している俺にとっては，Sage のツールバーのアイコンがやや大きいのが気に食わなかった．だから改造した．と言っても userChrome.css に追記するだけで済んだ．スゲェ，スゲーよ XUL．と言って良いのか ?

Sage ツールバー 改造前 → Sage ツールバー 改造後

追記したのは以下の通り． 


/* Sage のツールバーのボタンを小さいものに変更する */
toolbarbutton.sage_button {
    list-style-image: url("chrome://sage/skin/toolbar-small.png") !important;
}

/* 「更新チェック」ボタン */
#checkFeeds {
    -moz-image-region: rect(0px 16px 16px 0px) !important;
}
#checkFeeds:hover {
    -moz-image-region: rect(16px 16px 32px 0px) !important;
}
#checkFeeds[disabled="true"] {
    -moz-image-region: rect(32px 16px 48px 0px) !important;
}
#checkFeeds:active {
    -moz-image-region: rect(48px 16px 64px 0px) !important;
}

/* 「フィードを発見する」ボタン */
#discoverFeeds {
    -moz-image-region: rect(0px 32px 16px 16px) !important;
}
#discoverFeeds:hover {
    -moz-image-region: rect(16px 32px 32px 16px) !important;
}
#discoverFeeds[disabled="true"] {
    -moz-image-region: rect(32px 32px 48px 16px) !important;
}
#discoverFeeds:active {
    -moz-image-region: rect(48px 32px 64px 16px) !important;
}

この改造方法はこの記事から着想を得た．要は chrome://sage/skin/sage.css (skin/classic/sage.css) での設定を上書きする形で userChrome.css に書けば良いだけのこと．