Firefox4でも中止ボタンがしいたけに見えて困る

Firefox 4ではしいたけが育たない

Firefoxのアドオン「中止ボタンがしいたけに見えて困る」は、実用性はともかくとして著名なアドオンで、多くの人に使われています。アドオンといえば真っ先に出る方もいるかも。(いるの?)

しかしながら、Firefox 4はデフォルトだと「読み込んでる間だけ中止ボタンが出る」という稀有な環境のせいかどうかは分かりませんが、Firefox 4向けにはアドオンが対応しておらず、しいたけが育ちません。困った。

中止ボタンの歴史

昔のFirefox

少なくとも、昔のFirefoxの中止ボタンは、しいたけと見まごう気持ちもわかるんですよ。(画像はFirefox 1.5)

Firefox 3

しかし、Firefox3以降は単なる「×」だけになってしまって、傘も無くなってしまい、しいたけ感は一気に無くなってしまいました。

Firefox 4

しいたけもお終いか…と思われた所。Firefox4は…

傘がある!(四角いけど)
この傘の存在で、3で忘れられていた「しいたけ」の存在を思い起こさせてくれたのが、他ならぬFirefox 4なのです!!! (自論)

中止ボタンの品種改良に挑む

しいたけに寄りを戻しつつあるFirefox 4だというのに、しいたけが復権しないのはこれ如何に。アドオンが対応してないのなら、自分で何とか品種改良するしかありませんなこれは。

と言う訳で、Stylishの力を借りて、しいたけの復権を試みます。
(2011/05/28追記:)アドオンもできました。

形や色合いをしいたけっぽくする

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#urlbar-stop-button {
-moz-border-radius: 100% !important;
background-image: -moz-linear-gradient(left top, rgb(225, 174, 85), rgb(209, 140, 45) 49%, rgb(192, 108, 17) 51%, rgb(181, 102, 20)) !important;
list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QAgAAAAABIpQvtAAABdUlEQVR4nL3Rzy8DQRQH8O+86Zjdbf1KbapxIRLROBM3FwmRCHHyD9BIRfB/SMTRH+Lon3CQkNZSjVSo2g3b3YkZB7a0HMU7vXzzPnmZN8DfFJ8Wgju/5BmAT3ck39oZIbClFEaEoDOtjfpCKAqBJa3pFjB3AEAJe35+LPh+MHlxcb6gFDY+NvMMgE3PK8/7fjDp+42JZJ4lTRiGg1rrIyIMe171tVCYOgXAK5XLuXw+52iNWipFO1LafgdMsDHmgDGT97zqi21bLJdzHWNYjXO2n6Af8PNNIzc3V4euO2QBQL1+3xodHd8G3urfp6gLZQCs27ZtE5EgIiGltACsd1+bdaFis/mw6DhOj9amDICI2FgQBFE2mzsRAsdKvb12bOQcs0HQWE6nnYwxqHLOdhlje8ag1tfX29tsPqwohfZftmGrFbqWZfVrjWsilISQvpTyCUAJQDWddgaiKHR/3gRAFMVrSsX93Xkcx4NRFK/+iv6t3gFqiYqfCQlJAgAAAABJRU5ErkJggg==) !important;
-moz-image-region: rect(0px, 14px, 14px, 0px) !important;
}
#urlbar-stop-button:hover {
background-image: -moz-linear-gradient(left top, rgb(239, 185, 99), rgb(229, 166, 77) 49%, rgb(210, 131, 47) 51%, rgb(205, 131, 52)) !important;
}

アドオン作ってもいいんですけど、Windows以外の環境がどうなってるのか分からず面倒なので、とりあえずStylishでサクッとこんな感じに書いてみました。傘はCSSで、切り込みは元々の中止ボタンをベースに画像を起こしました。

適用するとこうなります。↓

!?………これは……しいたけ………!???

もっとしいたけ化

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#urlbar-stop-button {
-moz-border-radius: 100% !important;
background-image: -moz-linear-gradient(left top, rgb(225, 174, 85), rgb(209, 140, 45) 49%, rgb(192, 108, 17) 51%, rgb(181, 102, 20)) !important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAACn0lEQVR4nIWSPUwTYRiA3/f7vrv2eq2lpfITEiCgkMggaEzFAAMJDgxWZIDJgTAQWWUwTCYmDiyODm4OIi4kJgYTFxdqjTQSohTS8lugWK7XXrm79u67nhNuxGd8xicP7ei4hrbN0bKqcBljYzHa1tZBMpm0e+FoKBS8093d1dDb2+ccHR1blFLgnLsAAF6vhH19NyOp1PYgots6OzujxuMJyzAMwOHh4dH5+fnnmlZSDg+zn5LJ5A9K6XE+nz/Z29ttKBQKQ7HYw7tzc3MjgiBkBIFOe72+AhscHEiGwyEhGo0Oa5oW7e7u2tV1Pa8oyrfFxffK+Pijgamp6fuhUJ2oqmocUSz6fJIFinKGKysr91KpzXS1WnEqFZOXy1olm80qiUQincudnOu6zg3DyOVyx4/Pz8sUAIDZNgfOeXxra+tpOFz/JhQKhSllImMCi0Tq6wAQAaDCuf3TcdyPfn/AAQAgiAiEEMhkdj6vrq4uqKpaBABgjBFKGSKiwznX0+n0W9M0jYuqTBRFqNUcWF9fZ8vLy1kA+DUyMhIVRZEhIiAiQUT5ypXgjKZpZ6ZpfkHEGqOUwv7+PqZSqdbm5qaunp4bXYiAruvarusSQggVBMHT1NR4W5KkZ4qSz4qi5zcxTROWlj5IlmV3Tk5O3opErgYJITXO+XY+n39lmkaREIKCIHqCwWBfLncaCwT8jGxsbICun/tisQekv7+/nTFWrlat75WK+aRWc17s7GRGCwVls1ZzOWNMam9vHyoWiw10YWEBDw72nYmJyeuyLHtt23rtOPylLAe2JUmqSJLv5PAw+07TSlVRFBr9/kBjMrm2hgAAqqpiuaw1eDweBgB/GBO41+sFWZb/vWkYBj09zXWWSmq0paX166Vj/4+/5cg+31/Cu+oAAAAASUVORK5CYII=") !important;
-moz-image-region: rect(0px, 14px, 14px, 0px) !important;
}
#urlbar-stop-button:hover {
background-image: -moz-linear-gradient(left top, rgb(239, 185, 99), rgb(229, 166, 77) 49%, rgb(210, 131, 47) 51%, rgb(205, 131, 52)) !important;
}

しいたけだ……!! しいたけが育った……………!!

ちなみに分かる人はアドオン使わなくてもuserChrome.css使えば、ご自宅でしいたけを栽培できます。

そして (2011/05/28)

アドオンになりました。

面倒な再起動の必要も無く、ご家庭でしいたけの栽培が簡単にできますのでこちらもどうぞ。内容は後者と同じです。