Vertical Toolbar 拡張機能の紹介

Vertical Toolbar

• ウィンドウの左端または右端にツールバーを追加する。
• ツールバーを自動的に隠す。
• 他のツールバーと一緒にカスタマイズ可能。

実装の話

自動的に隠す

CSS transition でツールバーの左マージンを滑らかに変更する。

#vertical-toolbox {
	min-width: 1px;
}

#vertical-toolbox > toolbar {
	-moz-transition-property: margin-left;
	-moz-transition-duration: 0.3s;
	-moz-transition-timing-function: ease-in;
	margin-left: (ツールバーの幅 * -1) px;
}

#vertical-toolbox:hover > toolbar {
	margin-left: 0px;
}

ツールバーとサイドバーを右側に配置する

dir属性にrtlをセットすると中身が逆転する。

<hbox id="browser" dir="rtl">
	<toolbox id="vertical-toolbox"> ...　（縦置きツールバー）
	<vbox id="sidebar-box"> ...　（サイドバー）
	<vbox id="appcontent"> ...　（コンテントエリア）
</hbox>

他のツールバーと一緒にカスタマイズ

Firefox 4 で導入された xul:toolbar 要素の toolboxid 属性

<toolbar id="vertical-toolbar"
         toolboxid="navigator-toolbox"
         customizable="true">

github.com/gomita/verticaltoolbar/