Firefox のシンプルなテーマ “rein” を “Scriptish” と “JSActions” に対応させる。
Firefox 向けのテーマは数ありますが、シンプルでかわいいテーマ「rein」をずっと使い続けています。Firefox 1.0 正式版が公開されるよりも前から。 *1
ほんと、お世話になっています。
rein の特徴は、「多くのアドオンに対応している」こと。 どんなにデザインが統一されたテーマを入れましても、他の Add-ons のアイコンがばらばらでは残念でしょ？ その点、Add-ons をツールバーにおいても、「rein のデザイン」で統一してくれて気持ちがいいです。rein/4.0 も リリースされ、対応 Add-ons の数も増えました。 とはいえ、すべての Add-ons に対応しているわけではありません。 *2 たとえば、わたしが常用している Scriptish（Greasemonkey の改良版） *3 は、残念ながら対応されていません。
でも、本家の Greasemonkey には対応しています。 よし、rein が内部に持つ Greasemonkey のアイコンを Scriptish でも使えるようにしよう、と内部の CSS を書き換えました。
「（Firefox のプロファイルフォルダ）/extensionsrein@notiz.jp/chrome/rein.jar/global/add-ons/add-ons.css」を直接、書き換えてもよいのですが、Stylish でお手軽に書きましょう。下記の CSS を Stylish の「スタイルの管理 -> 新しいスタイルを書く」から、適当な名前を付けて保存してください。
[css] @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/ Scriptish /
scriptish-button {
-moz-box-orient: horizontal; list-style-image: url("chrome://global/skin/add-ons/greasemonkey.png") !important; }
toolbar[iconsize="small"] #scriptish-button { list-style-image: url("chrome://global/skin/add-ons/greasemonkey.png") !important; }
scriptish-button[scriptish-disabled] {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey-dis.png") !important; }
toolbar[iconsize="small"] #scriptish-button[scriptish-disabled] { list-style-image: url("chrome://global/skin/add-ons/greasemonkey-dis.png") !important; }
category-userscript > .category-icon {
list-style-image: url("chrome://global/skin/add-ons/greasemonkey-addon.png") !important; } [/css]
これだけです。Greasemonkey とおんなじアイコン表示になりました。
同様に、JSActions *4 にも対応させてみましょう。
JSActions は右クリックから JavaScript を実行できる、ほんとに便利な Add-ons です。おなじ JavaScript 系の Add-ons である Greasemonkey に比べ、どうしてここまで流行らないのか不思議なくらい。みんな、もっと、JSActions を使いましょうよ。 *5
さておき。 当然ながら、rein は JSActions 用のアイコンセットを持っていません。しかし、ブックマーク用など、フォルダ用のアイコンをセットを有しています。そのアイコンを流用しましょう。
[css] @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/ ::::: Action Icon ::::: / menu#JsActionsMenu { list-style-image: url("chrome://global/skin/icons/folder-item.png") !important; -moz-image-region: rect(0px, 32px, 16px, 16px) !important; }
menu#JsActionsMenu:hover { list-style-image: url("chrome://global/skin/icons/folder-item.png") !important; -moz-image-region: rect(16px, 32px, 32px, 16px) !important; }
/ ::::: Sub Folder Icon ::::: / menu#jsaSubFolder { list-style-image: url("chrome://global/skin/icons/folder-item.png") !important; -moz-image-region: rect(0px, 32px, 16px, 16px) !important; }
menu#jsaSubFolder:hover { list-style-image: url("chrome://global/skin/icons/folder-item.png") !important; -moz-image-region: rect(16px, 32px, 32px, 16px) !important; }
/ ::::: Script Icon ::::: / menuitem#jsaScript { list-style-image: url("chrome://global/skin/icons/folder-item.png") !important; -moz-image-region: rect(0px, 16px, 16px, 0px) !important; } [/css]
以上です。ブックマークと同じ、白いアイコンで統一されました。また、もともとの JSActions と違い、マウスオーバーで閉じていたフォルダが開くようにもなりました。
デザインが統一されますと、すっきり気持ちがいいですね。
追記 2011/06/08
rein/5.0 で Scriptish と JSActions に対応してくださいました。 Scriptish は Greasemonkey とおんなじ挙動、JSActions は独自アイコンに。 やったねっ。リンク：
- Mozilla - klee（rein の配布場所）
<li><a href="https://addons.mozilla.org/ja/firefox/addon/stylish/" title="Stylish :: Add-ons for Firefox">Stylish :: Add-ons for Firefox</a>
<li><a href="https://addons.mozilla.org/ja/firefox/addon/scriptish/" title="Scriptish :: Add-ons for Firefox">Scriptish :: Add-ons for Firefox</a>
<li><a href="http://hideaway.cc/Firefox/wiki.cgi?page=JSActions" title="JSActions - + HideAway Firefox +">JSActions - + HideAway Firefox +</a></li>
