Firefox のシンプルなテーマ “rein” を “Scriptish” と “JSActions” に対応させる。

Pocket
LINEで送る

rein, the Firefox theme.

 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 の「スタイルの管理 -> 新しいスタイルを書く」から、適当な名前を付けて保存してください。
 

@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;
}

 これだけです。Greasemonkey とおんなじアイコン表示になりました。

 

 同様に、JSActions4 にも対応させてみましょう。

 JSActions は右クリックから JavaScript を実行できる、ほんとに便利な Add-ons です。おなじ JavaScript 系の Add-ons である Greasemonkey に比べ、どうしてここまで流行らないのか不思議なくらい。みんな、もっと、JSActions を使いましょうよ。5

 さておき。
 当然ながら、rein は JSActions 用のアイコンセットを持っていません。しかし、ブックマーク用など、フォルダ用のアイコンをセットを有しています。そのアイコンを流用しましょう。

@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;
}

 以上です。ブックマークと同じ、白いアイコンで統一されました。また、もともとの JSActions と違い、マウスオーバーで閉じていたフォルダが開くようにもなりました。

 デザインが統一されますと、すっきり気持ちがいいですね。

追記 2011/06/08

 rein/5.0 で Scriptish と JSActions に対応してくださいました。
 Scriptish は Greasemonkey とおんなじ挙動、JSActions は独自アイコンに。
 やったねっ。

リンク:

Pocket
LINEで送る

  1. 逆に Opera はずっと、オリジナルのテーマを使っていますね。定期的にデザインが変更されていますが、追いかけ続けています。 []
  2. 当たり前です。 []
  3. 古い Firefox を捨てて高速化したり、機能を追加したり。@teramako さんを参考に。 []
  4. ほんと便利。 []
  5. たとえば、Bookmarklet を右クリックメニューから実行したり。Make Link と同じようにアンカーを作ったり。 []
  6. 最新版はここから落とせます。人柱用。 []

コメントを残す