Adding the structure

今回の拡張機能の UI はステータスバー上のアイコンです。この UI を実装するために、statusbarpanel 要素を navigator.xul ファイルの statusbar 要素に追加します。

<statusbar id="status-bar" class="chromeclass-status"
         ondragdrop="nsDragAndDrop.drop(event, contentAreaDNDObserver);">
<statusbarpanel id="component-bar"/>
<statusbarpanel id="statusbar-display"
        label="&statusText.label;" flex="1"/>
<statusbarpanel class="statusbarpanel-progress">
  <progressmeter class="progressmeter-statusbar"
          id="statusbar-icon" mode="normal" value="0"/>
</statusbarpanel>
<statusbarpanel class="statusbarpanel-iconic"
          id="tinderbox-status" status="none"/>
<statusbarpanel class="statusbarpanel-iconic" id="offline-status"/>
<statusbarpanel class="statusbarpanel-iconic" id="security-button"
                onclick="BrowserPageInfo(null, 'securityTab')"/>
</statusbar> 

statusbar XUL 要素は、アプリケーションの状態を表示するステータスバーを定義しています。これにはテキストメッセージ (例えば、Mozilla でドキュメントをロードし終えた時に表示される「完了」や、グラフィカルなメッセージ (例えば、Mozilla で表示しているドキュメントが SSL で暗号化されているかどうかを示す鍵のアイコン) を含めることができます。

ステータスバーは statusbarpanel XUL 要素で定義される複数のパネルから構成されています。各ステータスバーパネルは別々の情報を表示します。グラフィカルパネル (我々が作っている、アイコンを表示するようなもの) には statusbarpanel-iconic class が追加されます。これで、CSS スタイルシートで要素の見た目が定義されるようになります。

status 属性は、XUL の statusbarpanel 要素の定義にはありませんが、この拡張機能では現在の Tinderbox の状態を保持するのに使います。Tinderbox のステータスをサーバから取得する毎に status 属性の値を更新します。また、status の値に対応するアイコンが表示されるように CSS ルールを定義します。すべての XUL 要素は、XUL レンダリングエンジンが認識するもの以外に、追加の属性を持つことができます。エンジンは追加された属性を無視するので、属性を追加することで問題が起こったり、(CSS で明示的に指定する場合を除き) GUI 部品を表示する方法が変更されたりすることはありません。

Document Tags and Contributors

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