mozilla
Your Search Results

    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 Image:tb-nostatus.png、success Image:tb-success.png、test failed Image:tb-testfailed.png、busted Image:tb-busted.png

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

    ドキュメントのタグと貢献者

    タグ: 
    Contributors to this page: Kohei
    最終更新者: Kohei,