TwitterFox

TwitterFoxのソースを覗いてみる。

ステータスバーのアイコンのイメージがcontent/statusbar.png。3つのアイコンが1枚のイメージにまとまっている。

content/twitternotifier.xulを見ると、こんな感じ。

<statusbar id="status-bar">
  ...
  <statusbarpanel id="twitternotifier-statusbar-button"
      class="statusbarpanel-menu-iconic"
      context="twitternotifier-main-menupopup"
      ondblclick="gTwitterNotifier.openURL('http://twitter.com/home')"
      onclick="return gTwitterNotifier.onClickStatusbarIcon(event)"
      tooltip="twitternotifier-tooltip">

    <label id="twitternotifier-statusbar-text" style="margin: 1px"/>
  </statusbarpanel>
  ..
</statusbar>

CSSのクラスを指定しているので、CSSでコントロールしているらしい。なので、content/twitternotifier.cssを見てみると、こんな感じ。

#twitternotifier-statusbar-button {
  list-style-image: url("chrome://twitternotifier/content/statusbar.png");
  display: -moz-box;
  -moz-image-region: rect(16px, 16px, 32px, 0px);
  padding-left: 3px;
  padding-right: 3px;
}

#twitternotifier-statusbar-button[state="active"] {
  list-style-image: url("chrome://twitternotifier/content/statusbar.png");
  -moz-image-region: rect(32px, 16px, 48px, 0px);
}

#twitternotifier-statusbar-button[state="error"] {
  list-style-image: url("chrome://twitternotifier/content/statusbar.png");
  -moz-image-region: rect(0px, 16px, 16px, 0px);
}

mozの独自拡張を使って、イメージを切り出している。

-moz-image-region: rect(top, right, bottom, left);

一番上の16x16がstate="error"の時のアイコン。一番下がstate="active"の時のアイコン。真ん中がその他の時。

content/twitternotifier.jsを見ると、stateを切り替える関数がある。

setButtonState: function(state) {
  var btn = this.$("twitternotifier-statusbar-button");
  btn.setAttribute("state", state);
},

こんな風に呼び出している。

showMessage: function(message) {
  var elem = this.$("twitternotifier-status-tooltip");
  if (message) {
    this.setButtonState("error");
    elem.setAttribute("value", message);
  }
  else {
    this.setButtonState("active");
    elem.setAttribute("value", "TwitterFox");
  }
},

messageは多分エラーメッセージで、エラーが発生すると、アイコンが赤くなって、マウスを上に持っていくと、ツールチップにエラーメッセージが表示されるらしい。