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.
If you see any problem, see FAQ at first. If there is no solution, post a report to the issue tracker on the GitHub please.
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)TreeStyleTabService.stopToOpenChildTab() manually if no new tab is opened.
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.readyToOpenChildTabNow(in DOMNode/DOMWindow aParent, in boolean aMultiple)TreeStyleTabService.stopToOpenChildTab() manually even if no new tab is opened actually.
(In exchange of that, you cannot open new tabs for the reservation in later event loops.)
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.readyToOpenNextSiblingTab(in DOMNode/DOMWindow aParent)TreeStyleTabService.stopToOpenChildTab() manually if no new tab is opened.
TreeStyleTabService.readyToOpenNextSiblingTabNow(in DOMNode/DOMWindow aParent)TreeStyleTabService.stopToOpenChildTab() manually even if no new tab is opened actually.
(In exchange of that, you cannot open new tabs for the reservation in later event loops.)
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".)
The reservation is effectual until a new tab is opened, so you have to call TreeStyleTabService.stopToOpenChildTab() manually if no new tab is opened.
TreeStyleTabService.readyToOpenNewTabGroupNow(in DOMNode aTabBrowser)tabbrowser.loadTabs() after this method is called, are becomes a sub tree of tabs (and the first tab becomes their "parent".)
This automatically cancels the reservation after the current event loop is finished, so you don't have to call TreeStyleTabService.stopToOpenChildTab() manually even if no new tab is opened actually.
(In exchange of that, you cannot open new tabs for the reservation in later event loops.)
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.detachTab(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.
This API was renamed from partTab(). For backward compatibility, the old name is still available.
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.
gBrowser.treeStyleTab.importTabs(in Array aTabs)Demotes the current tab as a lower level. This does nothing if the tab has no sibling.
gBrowser.treeStyleTab.moveTabs(in Array aMovedTabs, [in aDOMNode aReferenceTab])Moves the given array of tabs to another position, with their relations (tree structure). If they are remote tabs, they will be imported (and removed from the remote window).
insertBefore() of DOM level1. If you give nothing, tabs are placed in the end of the tab bar.gBrowser.treeStyleTab.importTabs(in Array aTabs, [in aDOMNode aReferenceTab])An alias for the gBrowser.treeStyleTab.moveTabs().
gBrowser.treeStyleTab.duplicateTabs(in Array aTabs, [in aDOMNode aReferenceTab])Duplicates the given array of tabs, with their relations (tree structure).
insertBefore() of DOM level1. If you give nothing, tabs are placed in the end of the tab bar.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.positionTreeStyleTabService.position = 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.
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.
When the current tab is closed, TST dispatches a custom event "TreeStyleTabFocusNextTab" before focusing to another tab. If you cancel the event by aEvent.preventDefault();, TST doesn't move focus.
window.addEventListener(
"TreeStyleTabFocusNextTab",
function(aEvent) {
if (Prefs.getCharPref('myextension.focus.mode') != 'default')
aEvent.preventDefault();
},
false
);
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.
nsDOMTreeStyleTabCollapsedStateChangeDispatched when a sub tree is collapsed or expanded.
originalTargetgetData('collapsed')true" means the sub tree is now collapsed, "false" means expanded.nsDOMTreeStyleTabAutoHideStateChangeDispatched when the tab bar is shown or hidden by the "auto hide" feature.
originalTargetgetData('shown')true" means the tab bar is now shown, "false" means "hidden".getData('state')treestyletab-tabbar-autohide-state attribute of the tabbrowser element, so one of "expanded", "shrunken" or "hidden".nsDOMTreeStyleTabTabbarPositionChangingDispatched just before the position of the tab bar is changed.
originalTargetgetData('oldPosition')"top", "bottom", "left", or "right".getData('newPosition')"top", "bottom", "left", or "right".nsDOMTreeStyleTabTabbarPositionChangedDispatched after the position of the tab bar is changed.
originalTargetgetData('oldPosition')"top", "bottom", "left", or "right".getData('newPosition')"top", "bottom", "left", or "right".false , not-focused trees are never collapsed by expansion of the newly focused tree..tabbrowser-tab { -moz-user-focus: normal !important; } to your userChrome.css.)partTab() is renamed to detachTab() . For backward compatibility, the old name is still available.GM_openInTab() in Greasemonkey scripts didn't become children of the current tab.gBrowser.treeStyleTab.moveTabs() , gBrowser.treeStyleTab.importTabs() , and gBrowser.treeStyleTab.duplicateTabs() to process multiple tabs with their tree structure.TreeStyleTabService.readyToOpenChildTabNow() , TreeStyleTabService.readyToOpenNextSiblingTabNow() , and TreeStyleTabService.readyToOpenNewTabGroupNow() . They are useful for reservation of new child tab, if the new tab is possibly canceled by some reason. Reservations made by these new API are automatically canceled with delay, so you don't have to call TreeStyleTabService.stopToOpenChildTab() manually.TreeStyleTabService.readyToOpenNextSiblingTab(aSourceTab) is available.TreeStyleTabService.currentTabbarPosition was renamed to TreeStyleTabService.position . For backward compatibility, the old name is still available.TreeStyleTabService.treeViewEnabled becomes "false", then stacked tabs in horizontal tab bar are correctly unstacked.getData() from events fired with old names (without "nsDOM" prefix).aEvent.getData(property name) to get the value from the event object.)getAncestorTabs() and "TreeStyleTabFocusNextTab" event. You can cancel focus handling of Tree Style Tab when the current tab is closed, by canceling of "TreeStyleTabFocusNextTab" events.window.open() with features) disappeared.TreeStyleTabService.readyToOpenChildTab() works correctly (ignores the call) if it is called in the sidebar panel. (reported by Bert Blaha)pinTab() are shown as icons, even if it is in a vertical tab bar on Minefield 3.7a6pre.window.open() is called with an option toolbars=no .:-moz-window-inactive pseudo class introduced by Bug 508482.extensions.treestyletab.autoExpandSubtreeOnCollapsedChildFocused extensions.treestyletab.autoCollapseExpandSubtreeOnSelect.whileFocusMovingByShortcut .tabs-newtab-button { visibility: collapse !important; } into the userChrome.css.gBrowser.treeStyleTab.partAllChildren(aTab)
TreeStyleTabService.currentTabbarPosition TreeStyleTabService.treeViewEnabled TreeStyleTabService.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.