!-->
An English version of this page is also available.
宣伝1。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacksや拡張機能開発チュートリアルと併せてどうぞ。
宣伝2。日経Linux 2011年9月号から、Linuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。そちらもよろしく。
Windowsのエクスプローラのフォルダツリーのように、Firefoxのタブをツリー状に表示します。リンクなどから開かれたタブは自動的にツリーになります。タブのグループ関係が視覚的に分かるので、大量のタブを開きがちな人にお勧めです。
この拡張機能は、タブブラウザ拡張の機能をFirefox 2向けに再実装する試みの一環として開発しています。
不具合に遭遇した場合は、まずよくある質問をご覧下さい。それでも解決方法が見つからない場合の障害報告はGitHubのイシュートラッカーにお願いします。
以下の言語パックを内蔵しています。
動画によるデモがありますので、まずはこちらをどうぞ。
ツリー表示の例。リンクなどからタブが開かれる時は、元のタブの子として開かれます。
タブバーは上下左右好きな位置に置けます。上下に置く場合は横長のツリーとなります。また、縦置きされたタブバーは自動的に隠すことができます。
タブの親子関係の変更や移動をドラッグ&ドロップで行えます。操作感としてはAdobe IllustratorやPhotoshopのレイヤツリーあたりに似ています。
Mac OS Xのデフォルトのテーマに合わせた組み込みのテーマ「Metal」も含んでいます。
マルチプルタブハンドラと同時に利用できます。タブのクローズボックスが一直線上に並ぶので、マルチプルタブハンドラ単体で使う場合に比べて、クローズボックスのドラッグで複数タブをまとめて閉じる操作をより簡単に行えるようになります。
情報化タブとも同時に利用できます。マルチプルタブハンドラと合わせて導入するとTBEのタブモードに近い感じになります。ツリー型タブでは新しいタブの追加操作を常時監視しており、タブを開く前に「これから新しい子タブを開く」ということをサービスに通知しておくことで、その次のタイミングで開かれたタブを指定されたタブの子として登録することで、タブのツリーを形成します。以下のメソッドを使用することで、自作のアドオンやスクリプトなどから開くタブをツリーの中に組み込むことができます。
なお、Webページ内のスクリプトなどから開かれるタブはすべて自動的にツリーの中に組み込まれます。子のタブを明示的に開くためのWebページ作者向けのAPIはありません。
TreeStyleTabService.readyToOpenChildTab(in DOMNode/DOMWindow aParent, in boolean aMultiple)TreeStyleTabService.stopToOpenChildTab()を呼んで「予約」を取り消す必要がある。
true、タブを1つだけ開きたい場合はfalseを指定する。TreeStyleTabService.readyToOpenChildTabNow(in DOMNode/DOMWindow aParent, in boolean aMultiple)TreeStyleTabService.stopToOpenChildTab()を呼ぶ必要がない。
(その代償として、このAPIを次回以降のイベントループで開かれるタブのために使う事はできない事に注意。)
true、タブを1つだけ開きたい場合はfalseを指定する。TreeStyleTabService.readyToOpenNextSiblingTab(in DOMNode/DOMWindow aParent)TreeStyleTabService.stopToOpenChildTab()を呼んで「予約」を取り消す必要がある。
TreeStyleTabService.readyToOpenNextSiblingTabNow(in DOMNode/DOMWindow aParent)TreeStyleTabService.stopToOpenChildTab()を呼ぶ必要がない。
(その代償として、このAPIを次回以降のイベントループで開かれるタブのために使う事はできない事に注意。)
TreeStyleTabService.readyToOpenNewTabGroup(in DOMNode aTabBrowser)tabbrowser.loadTabs()で開かれたタブのグループは自動的に、最初のタブを親とした一つのサブツリーとして開かれる。
この操作による「予約」は、新しいタブが開かれるまでの間有効である。もしタブが実際には開かれない場合には、手動でTreeStyleTabService.stopToOpenChildTab()を呼んで「予約」を取り消す必要がある。
TreeStyleTabService.readyToOpenNewTabGroupNow(in DOMNode aTabBrowser)tabbrowser.loadTabs()で開かれたタブのグループは自動的に、最初のタブを親とした一つのサブツリーとして開かれる。
この操作による「予約」は、現在のイベントループが終了した時に自動的に破棄されるため、タブが実際には開かれない場合でも手動でTreeStyleTabService.stopToOpenChildTab()を呼ぶ必要がない。
(その代償として、このAPIを次回以降のイベントループで開かれるタブのために使う事はできない事に注意。)
TreeStyleTabService.stopToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab()を実行した後にタブを開かずに操作を取りやめる場合や、複数の子タブを開き終わって操作を完了した後に、これを実行する。
TreeStyleTabService.checkToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab()が実行されたかどうか)を調べる。
true、そうでない場合はfalse。実際の利用例は以下の要領です。
// 現在のタブの子タブを一つだけ開く例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab);
gBrowser.addTab('http://www.example.jp/');
// 現在のタブの子として複数のタブを開く例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab, true);
gBrowser.addTab('http://www.example.jp/');
gBrowser.addTab('http://www.example.com/');
gBrowser.addTab('http://www.google.co.jp/');
if ('TreeStyleTabService' in window)
TreeStyleTabService.stopToOpenChildTab(gBrowser.selectedTab);
// 新しい「タブのグループ」を開く
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenNewTabGroup(gBrowser);
gBrowser.loadTabs([
'http://www.google.co.jp/',
'http://www.google.com/',
'http://www.google.co.jp/'
]);
// 操作をキャンセルする例
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab, true);
if (!confirm('本当に開いてもOK?')) {
if ('TreeStyleTabService' in window)
TreeStyleTabService.stopToOpenChildTab(gBrowser.selectedTab);
return;
}
gBrowser.addTab('http://www.example.jp/');
現在のタブに関連した情報を新しいタブで開くような機能について、このコードを入れておくと、ツリー型タブを利用している場合にユーザがより幸せになれるかもしれません。
gBrowser.treeStyleTab.collapseExpandSubtree(in DOMNode aParentTab, in Boolean aCollapsed)そのタブが子孫のタブを持っている場合に、サブツリーを開閉する。ユーザ設定でツリーの折り畳みが禁止されている場合は何もしない。
trueでサブツリーを折り畳み、falseで展開する。TreeStyleTabService.canCollapseSubtree(in DOMNode aTabBrowser)任意のtabbrowserについて、ツリーを折り畳める状態かどうかを調べる。
true、そうでなければfalse。TreeStyleTabService.isSubtreeCollapsed(in DOMNode aParentTab)任意のタブについて、ツリーが折り畳まれているかどうかを調べる。
true。それ以外の場合はfalse。TreeStyleTabService.isCollapsed(in DOMNode aChildTab)任意の子タブについて、折り畳まれているかどうか(そのタブが属しているツリーが折り畳まれているかどうか)を調べる。
true。それ以外の場合はfalse。gBrowser.treeStyleTab.attachTabTo(in DOMNode aChildTab, in DOMNode aParentTab)任意のタブを他のタブの子として登録する。子タブになったタブ(およびそのサブツリー)は、ユーザの設定に従って自動的に移動される。
gBrowser.treeStyleTab.detachTab(in DOMNode aChildTab)任意の子タブ(およびそのサブツリー)を、親タブのサブツリーから切り離す。ツリーから切り離されたタブはそのままの位置に留まるので、必要に応じて任意でタブバーの最後の位置に移動するなどすること。
このAPIは、かつてはpartTab()というメソッド名でした。互換性のため従来の名前でもAPIを利用できます。
gBrowser.treeStyleTab.partAllChildren(in DOMNode aParentTab)任意のタブのすべての子タブをそのタブのツリーから切り離す。ツリーから切り離されたタブはそのままの位置に留まるので、必要に応じて任意でタブバーの最後の位置に移動するなどすること。
TreeStyleTabService.promoteTab(in DOMNode aTab)任意のタブをツリー内の1つ上の階層に移動する。そのタブに親タブが無い場合は何もしない。
TreeStyleTabService.promoteCurrentTab()現在のタブをツリー内の1つ上の階層に移動する。現在のタブに親タブが無い場合は何もしない。
TreeStyleTabService.demoteTab(in DOMNode aTab)任意のタブをツリー内の1つ下の階層に移動する。そのタブの兄弟にあたるタブが無い場合は何もしない。
TreeStyleTabService.demoteCurrentTab()現在のタブをツリー内の1つ下の階層に移動する。現在の兄弟にあたるタブが無い場合は何もしない。
gBrowser.treeStyleTab.moveTabs(in Array aMovedTabs, [in aDOMNode aReferenceTab])指定されたタブ群を、親子関係(ツリー構造)を保ったまま別の位置に移動する。他のウィンドウのタブを渡した場合、それらのタブはウィンドウ間をまたいで移動される(元のウィンドウからはタブが消える)。
insertBefore()のように、タブ群はaReferenceTabで指定されたタブの前に置かれる形で移動される。何も指定しなかった場合、タブ群はタブバーの末尾に置かれる。gBrowser.treeStyleTab.importTabs(in Array aTabs, [in aDOMNode aReferenceTab])gBrowser.treeStyleTab.duplicateTabs(in Array aTabs, [in aDOMNode aReferenceTab])指定されたタブ群を、親子関係(ツリー構造)を保ったまま複製する。
insertBefore()のように、タブ群はaReferenceTabで指定されたタブの前に置かれる形で複製される。何も指定しなかった場合、タブ群はタブバーの末尾に複製される。TreeStyleTabService.hasChildTabs(in DOMNode aTab)タブが子を持っているかどうかを調べる。
TreeStyleTabService.getChildTabs(in DOMNode aTab)直接の子であるタブの配列を得る。
TreeStyleTabService.getFirstChildTab(in DOMNode aTab)最初の直接の子タブを得る。
nullTreeStyleTabService.getLastChildTab(in DOMNode aTab)最後の直接の子タブを得る。
nullTreeStyleTabService.getDescendantTabs(in DOMNode aTab)すべての子孫タブの配列を得る。
TreeStyleTabService.getLastDescendantTab(in DOMNode aTab)子孫の中で最後のタブを得る。
nullTreeStyleTabService.getParentTab(in DOMNode aTab)親のタブを得る。
nullTreeStyleTabService.getRootTab(in DOMNode aTab)最上位の親タブ(親を持たないタブ)を得る。
nullTreeStyleTabService.rootTabs最上位の親タブ(親を持たないタブ)の配列を得る。
TreeStyleTabService.getNextSiblingTab(in DOMNode aTab)同じ階層にある1つ次のタブを得る。
nullTreeStyleTabService.getPreviousSiblingTab(in DOMNode aTab)同じ階層にある1つ前のタブを得る。
nullGUIとしては機能を提供していませんが、バージョン0.7.2009041401以降では、指定の幅にウィンドウをリサイズするためのAPIが存在します。
TreeStyleTabService.setTabbarWidth(in Number aWidth, [in Boolena aForceExpanded])タブバーの幅を、第1引数で指定された幅に調整する。「自動でタブバーを畳む」状態の時は、畳まれた状態のタブバーの幅が変化する。この状態の時でも常に展開状態のタブバーの幅を変えたい場合は、第2引数にtrueを渡す。
このメソッドはタブバーを左または右に表示している場合にのみ機能する。
TreeStyleTabService.setContentWidth(in Number aWidth, [in Boolena aKeepWindowSize])内容領域の幅を、第1引数で指定された幅に調整する。通常のウィンドウ表示で、画面上に十分な余裕がある場合は、内容領域が指定幅になるようにウィンドウ自体を広げる。画面の幅が足りない場合、またはフルスクリーン表示の場合は、タブバーを縮める。第2引数にtrueを渡すと、ウィンドウのサイズを変えずに常にタブバーの幅だけを変化させる。
TreeStyleTabService.positionTreeStyleTabService.position = String aPositionアクセスするとタブバーの現在の表示位置を"top", "bottom", "left", "right"のいずれかの文字列で返す。また、"top", "bottom", "left", "right"のいずれかの文字列を代入すると、タブバーをその位置に移動する。
現在のタブを閉じた場合、ツリー型タブはツリーの構造に応じて適切なタブへフォーカスを移します。他のアドオンでタブのフォーカスを独自に制御する(現在のタブを閉じたら前に見ていたタブにフォーカスを移すなど)場合、ツリー型タブのこの挙動を抑止する必要があります。
ツリー型タブは、タブのフォーカスを変更する直前に「TreeStyleTabFocusNextTab」というイベントを発行します。このイベントがaEvent.preventDefault();でキャンセルされた場合、ツリー型タブはツリー型タブは独自のフォーカス制御を行わなくなります。
window.addEventListener(
"TreeStyleTabFocusNextTab",
function(aEvent) {
if (Prefs.getCharPref('myextension.focus.mode') != 'default')
aEvent.preventDefault();
},
false
);
TreeStyleTabService.treeViewEnabledTreeStyleTabService.treeViewEnabled = Boolean aEnabledアクセスすると、現在ツリー表示が有効かどうかを真偽値で返す。falseを代入するとツリーの折り畳みとインデントが解除され、すべてのタブがフラットな状態で表示されるようになる。trueを代入するとツリーの折り畳みとインデントが再度適用される。初期値は常にtrue。
複数のタブをまとめてブックマークする際に、ツリー構造をブックマークに保存させることができます。手順は以下の要領です。
var tabs = MyAddon.getTargetTabs();
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(tabs);
MyAddon.createBookmarksFromTabs(tabs);
// ブックマークの作成をキャンセルしたとしても、必ずこれは実行して下さい。
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.endAddBookmarksFromTabs();
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(in Array aTabs)これから作成されるブックマークにタブのツリー構造を保存する事を宣言する。
TreeStyleTabBookmarksService.endAddBookmarksFromTabs()タブからのブックマーク作成の終了を宣言する。
ツリー型タブは以下のカスタムイベントを場合に応じて発行します。これらのイベントはDOM2 Eventの仕組みを用いて捕捉できます。
nsDOMTreeStyleTabCollapsedStateChangeサブツリーの折り畳みの状態が変化した時に発行される。
originalTargetgetData('collapsed')trueの場合はツリーが折り畳まれ、falseの場合はツリーが展開されたことを示す。nsDOMTreeStyleTabAutoHideStateChangeタブバーが自動開閉された時に発行される。
originalTargetgetData('shown')trueの場合はタブバーが表示されたことを、falseの場合はタブバーが隠されたことを示す。getData('state')treestyletab-tabbar-autohide-state属性の値と同じ物("expanded", "shrunken", "hidden"のいずれか)がセットされる。nsDOMTreeStyleTabTabbarPositionChangingタブバーの位置が変更される直前に発行される。
originalTargetgetData('oldPosition')"top", "bottom", "left", "right"のいずれか。getData('newPosition')"top", "bottom", "left", "right"のいずれか。nsDOMTreeStyleTabTabbarPositionChangedタブバーの位置が変更された後に発行される。
originalTargetgetData('oldPosition')"top", "bottom", "left", "right"のいずれか。getData('newPosition')"top", "bottom", "left", "right"のいずれか。.tabbrowser-tab { -moz-user-focus: normal !important; } という風な記述を追加する必要があります)partTab() を detachTab() に名称変更した(後方互換性のため、従来の名称でも依然利用可能GM_openInTab()で開かれたタブが現在のタブの子にならなくなっていたのを修正gBrowser.treeStyleTab.moveTabs(), gBrowser.treeStyleTab.importTabs(), gBrowser.treeStyleTab.duplicateTabs()TreeStyleTabService.readyToOpenChildTabNow(), TreeStyleTabService.readyToOpenNextSiblingTabNow(), TreeStyleTabService.readyToOpenNewTabGroupNow() これらは、新しいタブが開かれる事自体がキャンセルされる可能性がある場面で新しい子タブを開く事を予約する場合に役立ちます。これらのAPIによって行われた新しい子タブの予約は時間が過ぎたら自動的にキャンセルされるため、手動で TreeStyleTabService.stopToOpenChildTab() を呼ぶ必要がありません。TreeStyleTabService.readyToOpenNextSiblingTab(aSourceTab)を追加。TreeStyleTabService.currentTabbarPositionをTreeStyleTabService.positionにリネームした(互換性のため旧来の名前でもアクセスは可能です)TreeStyleTabService.treeViewEnabledでツリー表示を無効化した時、横置きタブバーで重ねられたタブの表示が更新されていなかったのを修正getData()で情報を取得できるようにしたaEvent.getData(プロパティ名) でプロパティの内容を参照するようにしてください。)getAncestorTabs()と「TreeStyleTabFocusNextTab」イベントを追加し、TreeStyleTabFocusNextTabイベントをキャンセルすることでツリー型タブによるタブのフォーカス制御(現在のタブを閉じたときにどのタブにフォーカスを移すかの判断)を無効化できるようにしたTreeStyleTabService.readyToOpenChildTab()が呼ばれた場合にタブが開かれない問題を修正(reported by Bert Blaha)pinTab()されたタブをタブバーの上端にアイコン状に表示するようにしたwindow.open()のオプション指定によって一部のUIが隠されたウィンドウが開かれた時に、タブバーの位置に空白ができてしまう問題を修正:-moz-window-inactive疑似クラスを利用するようにしたextensions.treestyletab.autoExpandSubtreeOnCollapsedChildFocused:折り畳まれたツリーの中のタブにフォーカスした時に、ツリーを自動的に展開するかどうかextensions.treestyletab.autoCollapseExpandSubtreeOnSelect.whileFocusMovingByShortcut:Ctrl-Tabによるタブの切り替え中にツリーを展開するかどうか.tabs-newtab-button { visibility: collapse !important; } で代用可能なので)gBrowser.treeStyleTab.partAllChildren(aTab)TreeStyleTabService.currentTabbarPositionTreeStyleTabService.treeViewEnabledTreeStyleTabService.promoteTab(aTab)TreeStyleTabService.promoteCurrentTab()TreeStyleTabService.demoteTab(aTab)TreeStyleTabService.demoteCurrentTab()treestyletab-tabbar-autohide-state属性の値として現在のタブバーの状態を保持するようにしたextensions.treestyletab.tabbar.fixed.insensitiveAreaで変更可能)extensions.treestyletab.autoCollapseExpandSubTreeOnSelect.whileFocusMovingByShortcutをtrueに設定する)TreeStyleTabService.setTabbarWidth()とTreeStyleTabService.setContentWidth()を追加false に設定してください)trueにすると旧版の挙動に戻ります)falseに値を変更する)tabbrowser.loadTabs()のための新しいAPIを追加