今回の拡張機能の 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 部品を表示する方法が変更されたりすることはありません。