SmallStyle


2006-11-08

_ ToggleStyle の状態表示をステータスバーに表示する

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 でスタイルの無効化をしてたけど,これは結構便利かも.

本日のツッコミ(全5件) [ツッコミを入れる]
_ のり (2006-11-08 19:37)

おお、素晴らしい。そっちのほうが便利そうなので私もそのように改造しました! :p)

_ あーる (2006-11-09 10:00)

ステータスバーへの表示改造を試してみたのですが、イメージの両脇にスペースが入ってしまうし、クリックするとステータスバーの高さが変化してしまいます。cssを色々いじったけどわけが分からなくて……もし良かったらcssの変更についても教えてもらえませんか?

_ hb (2006-11-09 11:51)

> のりさん
togglestyle,かゆいところに手が届いた感じで便利に使ってます!!

> あーるさん
スタイルの定義部分を記述しました.確認してみてください.

_ あーる (2006-11-09 12:21)

これでバッチリです。のりさん、hbさん、本当に便利なモノをありがとうございます。
しかし、ステータスバー表示の順番をどうにかできないものかなぁ……。IE Tab、StatusBar Clock、Stylish、show Ip、そしてTogglyStyle。 Organize Status Barは何か微妙にうまく動作しないと思ったら、なんかbug #286619のせいみたいですね。

_ TrackBack (2007-03-06 19:24)

http://diary.noasobi.net/2007/03/diary_070306a.html
朝顔日記
朝顔日記 - ToggleStyle 2.1 リリース
ステータスバーのボタンで脊髄反射的にページスタイルを有効にしたり、無効にしたりする Firefox 拡張機能 ToggleStyle 2.1 を出した


about me

いろいろと興味を持ったことを書いてます.ちょっとしたことは hb(@smallstyle) on Twitter で書いてます.

Archive

2003|01|02|03|04|05|06|07|08|09|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|12|