Specifying the appearance

では、CSS を使って表示するアイコンを定義しましょう。まずは Tinderbox の状態 (none、success、test failed、and busted) を示すアイコンを作成し、Tinderbox の状態に対応するアイコンを表示する CSS のルールを作ります。

statusbarpanel#tinderbox-status {
  list-style-image: url("chrome://navigator/content/tb-nostatus.png");
}

statusbarpanel#tinderbox-status[status="success"] {
  list-style-image: url("chrome://navigator/content/tb-success.png");
}

statusbarpanel#tinderbox-status[status="testfailed"] {
  list-style-image: url("chrome://navigator/content/tb-testfailed.png");
}

statusbarpanel#tinderbox-status[status="busted"] {
  list-style-image: url("chrome://navigator/content/tb-busted.png");
}

Mozilla は外観を管理するスタイルシートの組み合わせを複数持つことができますが、それらの既存のスタイルシートの組み合わせすべてにいちいちルールを追加するのは面倒です (そして、新しいスタイルシートがインストールされた時にこの拡張機能が 【訳注: 上書きされて？】 壊れてしまうことも避けなければなりません)。そのために、このスタイルシートを tinderstatus.css という名前で navigator.xul と同じディレクトリに配置し、navigator.xul の先頭のグローバルスタイルシート参照のすぐ下で tinderstatus.css を参照するようにします。

<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<?xml-stylesheet
      href="chrome://navigator/content/tinderstatus.css"
      type="text/css"?>

我々のステータスパネル の status 属性に値が設定されたときに表示される画像を、CSS ルールの list-style-image プロパティを使って定義します。Tinderbox の状態ひとつごとに id 属性を定義し、ルールを作ります。

4 つの状態を示すアイコンを作るか、次のアイコンを使ってください。no status 、success 、test failed 、busted

もし今 Mozilla を再起動したら、「no status」アイコンが ブラウザのステータスバーに表示されているでしょう。【訳注: Mozilla を一旦終了した後、プロファイルディレクトリの XUL.mfl (Windows) XUL FastLoad File (Mac) もしくは XUL.mfasl (Unix) を削除する必要があるかもしれません】