]>
This provides tree-style tab bar, like a folder tree of Windows Explorer. New tabs opened from links (or etc.) are automatically attached to the parent tab. If you often use many many tabs, it will help your web browsing because you can understand relations of tabs.
This is developed under a project to restructure TBE for Firefox 2.
See the FAQ if you meet troubles. When you cannot find out solutions from the page, throw bug reports to board or by E-mail, please. And, the RSS is available for tracking latest versions.
Released version includes following language packs:
Demonstration video:
Tree example. New tabs from link (or etc.) are opened as children of the original tab.
Tab bar can bemoved to leftside, rightside, top, or bottom. Horizontal tree is also available. Moreover, vertical tab bar can be shown/hidden automatically.
Drag and drop is available to modify relations of tabs and to rearrange. The behavior seems to be like "layer tree " of Adobe Illustrator/Photoshop.
A built-in theme, "Metal" is available. It will match to the default theme on Mac OS X.
Multiple Tab Handler can work with this. drag-and-do features of it will be more useful.
Informational Tab also works. With the Multiple Tab Handler, Firefox becomes like old Firefox powered by TBE.The service object of this addon always observes operations to open new tabs, and makes a tree of tabs if the service receives a message to notify to attach new tab to the parent as a child. You can use following methods to send messages to the service to insert new tabs to the existing tree, for your addons or user scripts.
BTW, there is no AIP to control tab tree from webpages, because Tree Style Tab opens any tabs from webpages as children of the tab of the page.
TreeStyleTabService.readyToOpenChildTab(in DOMNode/DOMWindow aParent, in boolean aMultiple)true" if you want to open multiple tabs in a time. If you wish to open only one tab, specify "false" or hand no value.TreeStyleTabService.readyToOpenNewTabGroup(in DOMNode aTabBrowser)tabbrowser.loadTabs() after this method is called, are becomes a sub tree of tabs (and the first tab becomes their "parent".)
TreeStyleTabService.stopToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab(), you have to call this method if you finish the operation before opening tab or finish to open multiple tabs.
TreeStyleTabService.checkToOpenChildTab(in DOMNode/DOMWindow aParent)readyToOpenChildTab() method has called for the "parent" or not.
readyToOpenChildTab() has already called, true. if not, false.For example:
// Example to open a new tab as a child of the current tab
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab);
gBrowser.addTab('http://www.example.jp/');
// Example to open multiple tabs as children of the current tab
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);
// Example to open multiple tabs as a "tab group"
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenNewTabGroup(gBrowser);
gBrowser.loadTabs([
'http://www.google.co.jp/',
'http://www.google.com/',
'http://www.google.co.jp/'
]);
// Example to cancel operation
if ('TreeStyleTabService' in window)
TreeStyleTabService.readyToOpenChildTab(gBrowser.selectedTab, true);
if (!confirm('Sure?')) {
if ('TreeStyleTabService' in window)
TreeStyleTabService.stopToOpenChildTab(gBrowser.selectedTab);
return;
}
gBrowser.addTab('http://www.example.jp/');
He will be happy when he uses Tree Style Tab with your addon, if your addon has a feature to open relational information of the current page as a new tab.
gBrowser.treeStyleTab.collapseExpandSubtree(in DOMNode aParentTab, in Boolean aCollapsed)Collapses or expands the sub tree following the tab, if it is a "parent". This does nothing if collapsing of tabs is disabled by user's preference.
true" means "to be collapsed", "false" is "to be expanded".TreeStyleTabService.canCollapseSubtree(in DOMNode aTabBrowser)Returns "can I collapse any tree of tabs in the tabbrowser?"
true if we can collapse trees of tabs, by user preference. Otherwise false.TreeStyleTabService.isSubtreeCollapsed(in DOMNode aParentTab)Returns "is the tree of the tab is collapsed?"
true if the tab has any child and the tree is collapsed. Otherwise false.TreeStyleTabService.isCollapsed(in DOMNode aChildTab)Returns "is the tree the tab belongs to collapsed? (is the tab itself collapsed?)"
true if the tab is a child of another tab and the tree is collapsed. Otherwise false.gBrowser.treeStyleTab.attachTabTo(in DOMNode aChildTab, in DOMNode aParentTab)Attaches a tab (and its sub tree) to another one as a new child. The attached child tab is moved under the parent automatically as user's preference.
gBrowser.treeStyleTab.partTab(in DOMNode aChildTab)Detaches the specified tab (and its sub tree) from its parent. Detached tab stay on its current position, and be not moved automatically. So you have to move it to another place manually if you want.
gBrowser.treeStyleTab.partAllChildren(in DOMNode aParentTab)Detaches all of children of the specified tab from the tree. Detached tabs stay on their current position, and be not moved automatically. So you have to move them manually if you want.
TreeStyleTabService.promoteTab(in DOMNode aTab)Promotes the specified tab as an upper level. This does nothing if the tab has no parent.
TreeStyleTabService.promoteCurrentTab()Promotes the current tab as an upper level. This does nothing if the tab has no parent.
TreeStyleTabService.demoteTab(in DOMNode aTab)Demotes the specified tab as a lower level. This does nothing if the tab has no sibling.
TreeStyleTabService.demoteCurrentTab()Demotes the current tab as a lower level. This does nothing if the tab has no sibling.
TreeStyleTabService.hasChildTabs(in DOMNode aTab)Checks that the tab has any children or not.
TreeStyleTabService.getChildTabs(in DOMNode aTab)Gets an array of tabs which are direct children of the tab.
TreeStyleTabService.getFirstChildTab(in DOMNode aTab)Gets the first-direct child from children of the tab.
nullTreeStyleTabService.getLastChildTab(in DOMNode aTab)Gets the last-direct child from children of the tab.
nullTreeStyleTabService.getDescendantTabs(in DOMNode aTab)Gets an array of any descendant tabs (children, grand children, and so on).
TreeStyleTabService.getLastDescendantTab(in DOMNode aTab)Gets the last tab from the list of descendant tabs of the tab.
nullTreeStyleTabService.getParentTab(in DOMNode aTab)Gets the parent tab of the tab.
nullTreeStyleTabService.getRootTab(in DOMNode aTab)Gets the top-level parent of the tab.
nullTreeStyleTabService.rootTabsGets an array of top-level parent tabs.
TreeStyleTabService.getNextSiblingTab(in DOMNode aTab)Gets the next tab in the same level.
nullTreeStyleTabService.getPreviousSiblingTab(in DOMNode aTab)Gets the previous tab in the same level.
nullThere is no GUI but you can those APIs introduced in ver.0.7.2009041401 or later.
TreeStyleTabService.setTabbarWidth(in Number aWidth, [in Boolena aForceExpanded])Changes the width of the tab bar to the value specified as the first argument. When "Auto Hide" is activated, shrunken width will change. If you wish to change expanded width of the tab bar anyway, specify "true" as the second argument.
This works only for vertical tab bar.
TreeStyleTabService.setContentWidth(in Number aWidth, [in Boolena aKeepWindowSize])Changes the width of the content area to the value specified as the first argument. If there are spaces on your screen, this expands the window. If you are in the fullscreen mode, or there is less spaces, width of the tab bar will be shrunken. To keep size of the window and resize only the tab bar, specify "true" as the second argument.
TreeStyleTabService.currentTabbarPositionTreeStyleTabService.currentTabbarPosition = String aPositionReturns the current position of the tab bar as a string, one of "top", "bottom", "left" or "right". If you set one of "top", "bottom", "left" or "right", then the position of the tab bar will be changed to the specified.
Because TreeStyleTabService.currentTabbarPosition is now available, TreeStyleTabService.changeTabbarPosition(in String aPosition) is deprecated. It is obsolete so you should not use it.
Tree Style Tabs controls tab focus for closing of the current tab, by default. If you wish to control tab focus as you like, you have to disable this TST feature like following:
// void TreeStyleTabService.registerTabFocusAllowance(in Function aAllowanceChecker)
TreeStyleTabService.registerTabFocusAllowance(function(aTabBrowser) {
return Prefs.getCharPref('myextension.focus.mode') != 'default';
});
When the function registered by TreeStyleTabService.registerTabFocusAllowance() returns false, TST never control focus of tabs, and you can move focus as you like on TabClose events.
TreeStyleTabService.treeViewEnabledTreeStyleTabService.treeViewEnabled = Boolean aEnabledReturns the current state of tree view. If you set false, all of collapsed trees are automatically expanded, and indentation is disabled. If true, collapsing of trees and indentations is applied again. Default value is always true.
You can the tree structure of tabs to bookmarks, when you create new bookmarks from tabs. For example:
var tabs = MyAddon.getTargetTabs();
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(tabs);
MyAddon.createBookmarksFromTabs(tabs);
// You must call this method even if you canceled to create bookmarks.
if ('TreeStyleTabBookmarksService' in window)
TreeStyleTabBookmarksService.endAddBookmarksFromTabs();
TreeStyleTabBookmarksService.beginAddBookmarksFromTabs(in Array aTabs)Sends a message that "new bookmarks may be created from tabs" to the service.
TreeStyleTabBookmarksService.endAddBookmarksFromTabs()Sends a message that "anyway creating of bookmarks finished" to the service.
Tree Style Tab provides some custom events. You can listen them via DOM2 Event API.
TreeStyleTabCollapsedStateChangeDispatched when a sub tree is collapsed or expanded.
originalTargetcollapsedtrue" means the sub tree is now collapsed, "false" means expanded.TreeStyleTabAutoHideStateChangeDispatched when the tab bar is shown or hidden by the "auto hide" feature.
originalTargetshowntrue" means the tab bar is now shown, "false" means "hidden".statetreestyletab-tabbar-autohide-state attribute of the tabbrowser element, so one of "expanded", "shrunken" or "hidden".TreeStyleTabTabbarPositionChangingDispatched just before the position of the tab bar is changed.
originalTargetoldPosition"top", "bottom", "left", or "right".newPosition"top", "bottom", "left", or "right".TreeStyleTabTabbarPositionChangedDispatched after the position of the tab bar is changed.
originalTargetoldPosition"top", "bottom", "left", or "right".newPosition"top", "bottom", "left", or "right".extensions.treestyletab.autoExpandSubtreeOnCollapsedChildFocusedextensions.treestyletab.autoCollapseExpandSubtreeOnSelect.whileFocusMovingByShortcut.tabs-newtab-button { visibility: collapse !important; } into the userChrome.css.gBrowser.treeStyleTab.partAllChildren(aTab)TreeStyleTabService.currentTabbarPositionTreeStyleTabService.treeViewEnabledTreeStyleTabService.promoteTab(aTab)TreeStyleTabService.promoteCurrentTab()TreeStyleTabService.demoteTab(aTab)TreeStyleTabService.demoteCurrentTab()treestyletab-tabbar-autohide-state attribute.extensions.treestyletab.tabbar.fixed.insensitiveArea)extensions.treestyletab.autoCollapseExpandSubTreeOnSelect.whileFocusMovingByShortcut to true.TreeStyleTabService.setTabbarWidth() and TreeStyleTabService.setContentWidth() are available.false".true".)true", customizable toolbars are shown on/below the vertical tab bar.false".tabbrowser.loadTabs() is available.