SmallStyle

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