2006-11-08
_ ToggleStyle の状態表示をステータスバーに表示する
朝顔日記で公開されている,脊髄反射的にページの制作者スタイルを有効にしたり無効にしたりする拡張 「ToggleStyle」が,On/Off の状態がわかりやすくなってバージョンアップ.スクリーンショットではツールバーに CSS のアイコンが表示されるようになってわかりやすい.…が,個人的にはこういうステータス表示はステータスバーに出したい人なので,ちょっと手を加えてみました.なんのひねりもなしに,ツールバーを指定している部分をステータスバーにしただけですが.
togglestyle.xul は以下のように変更.
<statusbar id="status-bar"> <statusbarpanel id="StyleToggle-Checkbox"> <checkbox onclick="TS.toggle();" id="styletoggle" label="CSS" checked="true" tooltiptext="toggle css"/> </statusbarpanel> </statusbar>
togglestyle.css は以下のように変更.アイコン用の画像は 16x16px のものであればなんでもいいと思うので,お好みの画像を skin ディレクトリ以下に配置してください.
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); checkbox[id="styletoggle"] > hbox { border-style:none; } statusbarpanel[id="StyleToggle-Checkbox"], statusbarpanel[id="StyleToggle-Checkbox"] * { margin:0; padding:0; } checkbox[id="styletoggle"] > image, checkbox[id="styletoggle"] label { display:none; } checkbox[id="styletoggle"] > hbox > image { min-width:16px; height:16px; background: transparent none center center no-repeat; } checkbox[id="styletoggle"][checked="true"] > hbox>image { background-image:url("chrome://togglestyle/skin/enable.png"); } checkbox[id="styletoggle"] > hbox > image { background-image:url("chrome://togglestyle/skin/disable.png"); }
アイコンは famfamfam.com の SILK アイコンを拝借して,適当にスタイルを定義してできあがり.スクリーンショットは上がスタイル有効時,下がスタイル無効時の表示,みたいな感じで動いてます.今までは,Bookmarklet でスタイルの無効化をしてたけど,これは結構便利かも.
おお、素晴らしい。そっちのほうが便利そうなので私もそのように改造しました! :p)
ステータスバーへの表示改造を試してみたのですが、イメージの両脇にスペースが入ってしまうし、クリックするとステータスバーの高さが変化してしまいます。cssを色々いじったけどわけが分からなくて……もし良かったらcssの変更についても教えてもらえませんか?
> のりさん
togglestyle,かゆいところに手が届いた感じで便利に使ってます!!
> あーるさん
スタイルの定義部分を記述しました.確認してみてください.
これでバッチリです。のりさん、hbさん、本当に便利なモノをありがとうございます。
しかし、ステータスバー表示の順番をどうにかできないものかなぁ……。IE Tab、StatusBar Clock、Stylish、show Ip、そしてTogglyStyle。 Organize Status Barは何か微妙にうまく動作しないと思ったら、なんかbug #286619のせいみたいですね。
http://diary.noasobi.net/2007/03/diary_070306a.html
朝顔日記
朝顔日記 - ToggleStyle 2.1 リリース
ステータスバーのボタンで脊髄反射的にページスタイルを有効にしたり、無効にしたりする Firefox 拡張機能 ToggleStyle 2.1 を出した