Tree Style Tab (aka TST)
This extension to Firefox provides the ability to work with tabs as "trees".
New tabs opened from the current tab are automatically organized as "children" of the current tab. Such "branches" are easily folded (collapsed) by clicking on the arrow shown in the "parent" tab, so you no longer need to suffer from too many visible tabs. If you want, you can restructure the tree via drag and drop.
- Such a tree of tabs will behave like a visual browsing history for you. For example, if you see a list of search results for a topic, each search result link will open in new child tab. New tabs opened from these "child" tabs will appear as descendants of their originating tabs. You'll easily dig and dig deeply, without losing your browsing trail - if you want to go back to the original search result, you just have to switch to the "root" tab.
- Moreover, each tree will reflect a group of tabs on a similar topic.
Please enjoy as you like!
Release builds
- The signed package of the latest version is available at Mozilla Add-ons (AMO). See also the
strict_min_version
information in the install manifest to know the minimum supported Firefox version. - Old packages are also downloadable on the AMO website. TST sometimes drops outdated versions of Firefox, but you may find old packages that support the dropped versions of Firefox.
- For even older versions of Firefox, Waterfox, or Palemoon, Classic Add-ons Archive possibly contains legacy packages of TST.
Development builds
- Builds for each commit are available at "Artifacts" of the CI/CD action. Please note that you need to log in to the GitHub to see artifacts.
- There is an automated build based on the latest source code also. It is available for everyone, but sometimes the automation system fails to update the build.
Development builds are not signed, so you need to load them by an atypical method. (Please click this section to see instructions.)
There are two methods to try them in your environment:
- Go to
about:debugging
and click "Load Temporary Add-on" button, then choose the downloaded file. The development build will be loaded and active until you restart Firefox. - If you want to try it as a regular addon instead of a temporary addon, you need to use Nightly instead of the stable Firefox or Firefox beta. On Nightly, go to
about:config
and setxpinstall.signatures.required
tofalse
. Then you will be able to install such an unsigned addon.
Also, you can build a custom development build locally. For example, here are the steps to build an XPI on Ubuntu (native, or WSL on Windows 10):
$ sudo apt install git nodejs npm jq zip
$ git clone --recursive https://github.com/piroor/treestyletab.git
$ cd treestyletab/webextensions
$ make
Steps to build a specific revision (for example bb467286d58b3da90fd1b2e6ee8a8016e3377b97):
$ cd treestyletab/webextensions
$ git checkout bb467286d58b3da90fd1b2e6ee8a8016e3377b97
$ git submodule update
$ make
Then you will see new .xpi
files in the current directory. You can install such a development build via about:debugging
. Click the Load Temporary Add-on
button and choose treestyletab/manifest.json
or a built .xpi
file.
Extensions that extend TST
TST provides an API for other extensions. Some extend the behavior of TST's sidebar panel:
- Multiple Tab Handler allows you to select multiple tabs with long-press on tabs. It also allows you to close multiple tabs with long-press on the closebox on tabs.
- TST Bookmarks Subpanel allows you to show a small "Bookmarks" sidebar panel below tabs in the TST's sidebar.
- TST More Tree Commands provides more context menu and keyboard shortcut commands to manipulate TST's tree.
- TST Active Tab in Collapsed Tree shows a small tab on a collapsed tree as an alias for the last active tab under the tree.
- TST Active Tab on Scroll Bar shows a marker to indicate the position of the active tab, on the scrollbar.
- TST Auto Group Tabs provides ability to group newly opened tabs automatically in various conditions.
- TST Lock Tree Collapsed allows you to lock arbitrary trees as collapsed. (This was a built-in feature on TST 3.3.0-3.3.6, and now separated.)
- TST Tab Drag Handle provides a small tooltip on tab labels to start dragging of tabs for specific operations. (This was a built-in feature on TST 2.6.0-3.3.6, and now separated.)
- TST Indent Line provides indent line like Visual Studio Code. This requires TST 3.9.0 and later.
- TST Open Bookmarks as Partial Tree allows you to open only some bookmarks in a folder as a partial tree. Moreover, it also provides ability to open tree of container tabs from bookmarks.
- TST-MiddleClick allows you to run "undo close tab" or "close currently active tab" command on middle click on the sidebar.
- Tree Style Tab Mouse Wheel allows you to switch active tab by wheel scrolling.
- Tab flip for Tree Style Tab allows you to move focus to the tab previously focused, by clicking on the active tab.
- Tree Style Tab Focus Preceding Tab on Close focuses the previous tab instead of the next tab when a tab is closed.
- Tab Unloader for Tree Style Tab allows you to unload tabs by clicking on them in the sidebar.
- Move unloaded tabs for Tree Style Tab allows you to move tabs in the sidebar without them becoming active.
- Tree Style Tab in Separate Window allows you to open the Tree Style Tab sidebar page in a new window.
- Auto Tab Discard supports the fake context menu in the Tree Style Tab sidebar.
- UnloadTabs supports the fake context menu in the Tree Style Tab sidebar.
- Bookmark Tree for Tree Style Tab allows you to bookmark and restore trees. (A similar feature is now built-in in TST since v3.2.0)
- TST Hoverswitch allows you to switch tabs by hovering over them.
- TST Colored Tabs gives custom background color for tabs based on their domain.
- Add Last Active Class To Tab helps you to give custom appearance for the "previously active tab".
- TST Change Close Tab Button Behavior allows you to close the parent and its all descendants with a middle-click on the closebox of a parent tab, whether the tree is expanded or collapsed.
- TST Select Random Tab adds a context menu option for selecting a random tab in a Tree Style Tab tree.
- TST Tab Search provides a search field (as a subpanel) to filter opened tabs in the sidebar.
- TST Fade Old Tabs sorts all tabs in 3 categories – 'recent', 'older' and 'oldest' by latest visit time, and applies different opacity to them.
- TST Colorize Tabs allows to set individual color for each tab in order to highlight it.
- TST New Tabs First puts a newly opened root level at the top of the sidebar.
- TST Tab Favorites marks frequently visited tabs as favorites and quickly navigate between them using hotkeys.
- TST Folder Expand Collapse allows to collapse/expand "group tab"'s subtree by single click, without activating the tab.
Similar projects
There are some similar project by someone not me providing similar features:
Vertical tab bar with grouping
Vertical tab bar without tree or grouping
Listing tabs with a search field
Some extensions provide a pop-up list of tabs with a search field that complements TST:
- Tab Manager v2
- TabSearch
- Tabby - Window & Tab Manager
- Tab Master 5000
- Power Tabs
- Tabs2List: provides not only sidebar panel but a toolbar button with a popup panel also. It has an option to show a search field in the panel by default.
for Google Chrome and Chromium
for Vivaldi
Requests, proposals, or unexpected trouble from bugs
All feedback is handled as GitHub issues.
Please read FAQ below, before you post any new feature request.
Basics
- TST is basically designed to be used as a permanently-shown tab management UI, an alternative of Firefox's native tab bar.
- To avoid users' confusion, TST respects Firefox's built-in behavior and features regarding the tab bar: tab context menu, gestures, etc.
- TST is designed to work with "tree of tabs".
- TST's tree is designed to work as an extended memory for your brain. To satisfy this concept, TST is designed to guess the relationship between tabs automatically, from the context.
- Better usability for ungrouped flat tabs in a vertical tab bar is an added benefit.
Any feature request unrelated to these points may be rejected, even if many people love it. For example: session management, search field, detailed focus control of tabs, and so on.
Instead of adding more features, I hope to make TST compatible with other tab-related extensions. If it is required for better compatibility, I have added public APIs for other extensions, and there are many implementations using this API.
If you need any new APIs, please file API proposals in the issue tracker.
FAQ / frequently rejected requests/proposals
Other browsers support
-
Support for Pale Moon, Waterfox, and other Firefox forks
Please use a forked version of TST for Pale Moon instead. TST is designed for latest release of Mozilla Firefox (*Please see also the
strict_min_version
information in the install manifest to know the minimum supported Firefox version), and other applications forked from Firefox are not supported."Waterfox Current" looks based on Firefox ESR68 and you can install TST 2.0 and later to it. However "Waterfox Classic" based on Firefox 56 is never supported.
-
Support for other browsers based on Chromium (ex. Google Chrome) and WebKit (ex. Safari)
TST can't be ported to other browsers because it depends on some Firefox specific APIs like
sidebar
, so it needs to be re-implemented completely. Sorry, but I won't re-implement TST as an extension for other browsers by myself because I use Firefox. (But there are some alternatives developed by others.) -
Support for Firefox Mobile
Currently I have no plan to add support for mobile devices (Android and iPhone) from some reasons:
- Firefox Mobile doesn't support Sidebar API.
- Mobile devices have limited RAM. Too many numbers of tabs opened by TST may lead OOM killer to kill Firefox Mobile.
Appearance
-
How to hide the top tab bar (horizontal tab strip)?
As a workaround, you can create a
userChrome.css
file. But please remind that I - the original author of TST - never recommend such an usage, because TST doesn't cover full features of the native tabs due to restrictions of WebExtensions API so some tab features become inaccessible, and I also believe that TST is not enough stable to replace Firefox's tab bar completely. Thus I usually use TST together with horizontal tab bar for safety.If I hid the tab bar on my environment in my daily use, I might maintain the userChrome.css hack by myself, but actually I don't do that. So guidance to hide the tab bar need to be maintained by people who really use. I think it is a nightmare for regular people who don't know how to research and find out solutions with debugger. I intentionally don't describe details how to hide the horizontal tab bar, to save people from critical troubles.
I say again, I don't recommend you to hide the horizontal tab bar if you cannot write any suitable userChrome.css hack by yourself. I have no motivation to investigate how to hide the horizontal tab bar, because I'll never do that and it may lead people to troubles.
-
How to apply GTK+ theme color on Linux?
Due to restrictions within Firefox, TST can not apply GTK+ theme color to its appearance by default. If you want TST's UI with colors to match other parts of Firefox, you need to configure your environment, Firefox and TST as:
- Set and export an environment variable
GTK_THEME
in your.profile
or somewhere like:export GTK_THEME=<Your theme name like Arc-Dark>
(I don't know why but CSS system colors on Firefox won't respect GTK's theme colors, if this environment variable is missing.) - Firefox's about:config
widget.content.allow-gtk-dark-theme
=true
(not default)widget.content.gtk-theme-override
=unset (default)
- TST's options (pattern 1, using "Proton" theme)
- "Appearance" => "Theme" => "Proton" (default)
- "Development" => "Color scheme" => "System Color" (default)
- TST's options (pattern 1b, using "Photon" theme)
- "Appearance" => "Theme" => "Photon" (default)
- "Advanced" => "Extra style rules..." => paste these lines (not default)
- "Development" => "Color scheme" => "System Color" (default)
- TST's options (pattern 2, using less extra style rules)
- "Appearance" => "Theme" => "High Contrast" (not default)
- "Advanced" => "Extra style rules..." => no active style rule (default)
- "Development" => "Color scheme" => "System Color" (default)
For more details, please see also the discussions in the issue #2667.
- Set and export an environment variable
-
How to apply colors customized via Firefox Color?
In short, there is a workaround:
- Go to TST's options.
- Choose "Development" => "Color scheme" => "Photon".
- Add a CSS declaration applying Firefox's native tab colors to "Advanced" => "Extra style rules for contents provided by Tree Style Tab".
For more detailed background, please see also my comment in the issue #2780.
-
I cannot find out suitable code snippet satisfying my demand. Is there any reference document?
Sadly there is no stable reference document due to unstableness of TST's DOM structure. The code snippets are just examples for the time they were written, and they may be broken by changes on TST itself, thus they need to be updated by users through investigation with the debugger.
Feature requests
-
Horizontal tab bar
It is not possible for Tree Style Tab to support horizontal tabs. TST 2.0 and later is implemented as a Firefox sidebar, there is no chance to provide a horizontal version of the extension.
-
Better support for non-indented tabs
This is beyond the scope of "Tree" Style Tab. There exist complementary extensions that can provide vertical tabs without a tree.
-
I don't need an automatically organized tree, I want to organize trees myself
You can switch off this behavior:
- Go to TST's configuration.
- "Development" section.
- Expand the section "All Configs". Then all internal configurations are listed.
- Clear the ☐
autoAttach
checkbox. - Clear the ☐
syncParentTabAndOpenerTab
checkbox.
With those preferences unset, TST will no longer automatically attach new tabs to a tree.
To select multiple tabs, for drag-and-drop: Shift/Ctrl-click. Multiple Tab Handler has additional features.
-
Add more minor/trivial options
Please see the list of helper extensions. For the appearance of tabs in the sidebar, custom user styles may help.
The variety of configurations for TST will not increase infinitely. Instead, I hope to reduce the variety. High customizability is out of scope. I want to limit options to those that are truly essential. Too many options would kill this project, because they would cloud the main concept of TST and would attract people who don't share my core vision.
Here is a list of policies about accepting or rejecting new option requests:
- If Firefox has the option, TST also should provide similar option to emulate it. (ex.
browser.tabs.closeTabByDblclick
emulation,browser.tabs.selectOwnerOnClose
emulation, warnings for closing multiple tabs, style switch for leftside/rightside sidebar) - If TST imitates Firefox's UI and Firefox doesn't provide any options to control them, TST basically don't provide options for them. (ex. visibility options for imitated context menu commands)
- If it is essential for accessibility, TST should provide the option. (ex. text direction option, animation effects, "High Contrast" theme, color switch for the toolbar button icon)
- If it is impossible to be done via simple CSS tricks, TST should provide the option. (ex. unfaviconizing of pinned tabs, positioning options for new tabs, drag-and-drop behavior)
- If it is already available during combination with another extension, TST don't provide options for them. (ex. coloring of tabs, suspending of tabs, detailed control of tab focus)
Please remind that some existing options may violate these policies due to historical reasons.
- If Firefox has the option, TST also should provide similar option to emulate it. (ex.
-
Controlling where new tabs are opened from links or bookmarks
Available with TST 3.7.0 and later, as an expert option: "Tabs from any other trigger" under the "New Tabs Behavior" section. We cannot control the behavior for each detailed case, due to limitations of the WebExtensions API.
-
High-power management of tree, like sorting child tabs, auto-modification of tree, renaming tabs, and so on
Please see the list of helper extensions. TST More Tree Commands's issue tracker may be a good place to track your request.
Please note that "useful" features won't be implemented to TST itself as a built-in feature. (There is another FAQ topic, please see it also.)
I believe that generally "tree of tabs should be a visualized history of web browsing", because they are built on relations where you came from. Possibly such a tree is facially chaotic, but it just mirrors your actual footmarks, so you'll easily find out where is the target tab based on a map in your mind. Moreover, those relations themselves may let you recall forgotten idea you thought while you were browsing those tabs.
On the other hand, sorted tabs based on URLs or something will be beautiful - but that's all. Such sorted tabs won't help me - I'm very forgetful. In other words, I just need something which memorizes my chaotic mind as-is.
By the way, my another addon Multiple Tab Handler will help you if you frequently modify tree by drag and drop. It provides ability to select multiple tabs by Ctrl-Click or Shift-Click and you can drag selected tabs at once.
-
Configuration UI to change appearance of tabs in the vertical tab bar, for example, color, height, visibility of the scrollbar, transparency of tabs, and so on
There is a plan to implement an input field to write custom CSS rules, so it will work like as
userChrome.css
. See the code snippets and details of inspection for the sidebar contents. -
Add an option to change the keyboard shortcut from F1
-
Better compatibility with session manager extensions, or add high-power session management feature
TST should work well with any other session manager extension together, if it respects
openerTabId
oftabs.Tab
. Tab Session Manager (aka TSM) is one of examples. (Moreover, TST also provides an API to open tabs with structure more safely. TST and the session manager extension will work together more smoothly, if it opens tabs via the API.)In other words, TST can't collaborate with any other extension if it does not give
openerTabId
as a hint to construct trees. On such cases it is required to improve the other collaborator extension itself. Sadly it beyonds my power and needs a cooperation by the extension's author.As a workaround, you can use TST's bookmarking feature to save trees of tabs. Select tabs (via Ctrl-click or Shift-click on tabs in the sidebar) and choose "Bookmark Tabs..." from the context menu, then TST creates a bookmark folder and bookmarks under the folder from selected tabs. After that please right-click on the bookmark folder and choose "Open All as a Tree", then you'll get tabs with restored tree structure.
Troubles, unexpected behaviors
-
I cannot drop tabs to the bookmarks toolbar to create bookmarks. (#2033)
In short: shift-dragging of tabs will allow you to drop tabs to the bookmarks toolbar. Otherwise TST Bookmarks Subpanel possibly helps you.
From a change introduced at the bug 1453153 (affects on Firefox 63 and later), now Firefox doesn't allow extensions to provide ability to do "creating bookmarks (or links) by drag and drop of tabs" and "detach a tab to a new window by dropping it outside of the window" in same time - those functionailities are quite exclusive. (For more technical details, see my comment at the issue #2033.)
Thus, now TST provides two different effects to gestures:
- Dragging tabs to out of the tab bar: detach dropped tabs to a new window. You cannot drop tabs to the bookmark toolbar.
- Shift-dragging tabs to out of the tab bar: create links to the desktop from dropped tabs. You can drop tabs to the bookmark toolbar to create bookmarks.
You can switch these behaviors. Please go to the "Drag and Drop" section of TST's options page. (By the way, TST Bookmarks Subpanel's small Bookmarks panel always accept drag and drop of TST's tree without such modifier keys.)
For more preference, you can use a small drag handles with a helper addon: they will appear when the cursor is hovering on left edge (or right edge for inverted appearance) of a tab for a while. You can start dragging of the tab from one of handles, with specified effect for each without any modifier key.
-
New tab is not opened as a child tab, if it is opened by something other extension
TST should work well with any other extension together, if it respects
openerTabId
oftabs.Tab
. Tabs opened with the information will automatically organized as children of the opener tab, by TST.In other words, TST can't collaborate with any other extension if it does not give
openerTabId
as a hint to construct trees. On such cases it is required to improve the other collaborator extension itself. Sadly it beyonds my power and needs a cooperation by the extension's author. -
New tab is not opened with expected position and container, when it is opened as a blank tab instead of the default new tab page. (#2176)
This is a known issue and hard (or impossible) to be fixed on TST, due to restrictions of WebExtensions API. TST cannot detect "a new blank tab is intentionally opened by the user with the keyboard shortcut Ctrl-T", because all new tabs are initially opened with the
about:blank
URL even if you open a new tab from a link. Sadly there is no more hint to detect the context how a new tab is opened by you.For a workaround, you can define a custom shortcut to open a new blank tab with TST's settings: assigning something shortcut for the command "Open a new tab: Child Tab" at the add-ons manager. Go to
about:addons
=> click the gear button => "Manage Extension Shortcuts" => "Tree Style Tab" => "Show 40 More" => "Open a new tab: Child Tab" => set something shortcut like Ctrl+Alt+T, then you'll get a child tab as expected with the shortcut instead of the default Ctrl-T. -
New tab is not opened with expected position and container, when it is opened with a custom URL instead of the default new tab page. (#2485)
You need to change the TST's option
New Tabs Behavior
=>Basic control for New Blank Tab
=>Guess a newly opened tab as opened by "New Blank Tab" action, when it is opened with the URL
to detect new tabs opened with any custom URL. It isabout:newtab
by default for Firefox's native new tabs.- If you use any addon providing a fixed custom new tab page (ex. Momentum), open a new tab and show the developer tool with the keyboard shortcut
Ctrl-Shift-K
, then typelocation.href
in the console. You'll see the actual URL of the new tab page likemoz-extension://XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/dashboard.html
. The UUID part is random due to security reasons. - If you use New Tab Override to set a custom URL for new tabs, you cannot get the actual internal URL of new tabs with the method above, because it is immediately redirected.
It is
moz-extension://XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/html/newtab.html
, the UUID part can be found atabout:debugging#/runtime/this-firefox
=>Extensions
=>New Tab Override
=>Internal UUID
.
- If you use any addon providing a fixed custom new tab page (ex. Momentum), open a new tab and show the developer tool with the keyboard shortcut
-
Tabs become flatten suddenly / tree structure is lost accidentally
Such a problem may happen sometimes regardless I'm continuously struggling to solve them. Sadly on most cases there is no way to get back lost tree structure. (Sometimes, closing the window and restoring it via Ctrl-Shift-N may restore the window with correct tree structure, but it is effective only on very limited cases.) There are some workarounds to save your tree of tabs before you encounter such a situation:
- Tab Session Manager supports saving sessions with tree information. Please remind that you need to activate compatibility option manually.
- TST allows you to take a snapshot of tabs tree to a bookmark folder. Select all tabs (via shift-click, ctrl-click, or "Select All Tabs"), and bookmark selected tabs via the "Bookmark Tabs..." command in tabs context menu on the sidebar panel. Created bookmarks will have
>
marks in their title, it means their tree level. Right click on the bookmark folder and choose the command "Open All as a Tree", then TST will open tabs from the bookmark folder with tree structure constructed from the>
marks of their title.
-
"Send Tab/Tree to Device" does not work (#2991)
In short: it is unavoidable problem. You need to use the feature very carefully due to unavoidable restrictions.
- Firefox does not allow addons to access Firefox Sync features like "send tab to device" directly. Such an API proposal was already rejected. See also: 1417183 - Provide a web extensions API-based way to send pages between devices (WONTFIX)
- Instead, storage.sync API is the only one method for addons to share user data across devices.
- Thus TST simulates Firefox's "send tab to device" feature based on storage.sync API. The simulated feature does not work same as Firefox's native one due to various restrictions.
- TST tries to suggest device name from available information, but it may have less identifiability because Firefox does not allow addons to get native device name. Thus you need to give enough identifiable name manually.
- storage.sync has no guarantee that written data is synchronize immediately. Even if you change device name from TST options or choose the "send tab/tree to device" command, you may need to wait until Firefox synchronize storage.sync data. Sadly we don't know when it happens.
- So, if you need to send or receive tabs via TST's "send tab/tree" command immediately, you'll need to run "sync now" command of Firefox itself on both sender and receiver Firefoxes after you ran the "send tab/tree" command.
- You cannot send tabs from Firefox Desktop to Firefox Mobile via TST's tab context menu. You need to install TST to both sender and receiver Firefoxes, but TST is not available on Firefox Mobile.
To avoid those restrictions I always use both horizontal and vertical tab bars together. I ordinary use Firefox's native "Send Tab to Device" command instead of TST's one. This is one of reasons why I don't recommend to hide the horizontal tab bar.
Other topics
-
How to donate to this project?
Thanks, but sorry, I have no plans to accept any donations for these reasons:
- The biggest reason is: because I want to keep me as the prime user of this project. I want to keep having a privilege to say "no" about requests that do not match my vision. My hands are already full with maintenance of Tree Style Tab for my use case. (Of course I know that donation is not payment, but I'm afraid that I would think about voices from people who did donation more seriously and it would unconsciously conflict with my policies.)
- Also, I'm afraid of social undermining.
- I'm an employee of the ClearCode Inc. My employer allows me to develop my extensions during business hours, because my job is technical support to customers (enterprise users of Firefox and Thunderbird) and the development increases my skills with Firefox and Thunderbird. In other words, my addon projects already have monetary support enoughly. Stagnation of my addon projects are mostly caused from technical reasons or lowering of motivation, not monetary reasons.
Any other contribution to this project is welcome - translation, debugging, triaging of issues, and more. If you have fixed a bug you met, please send a pull request - I'll merge it. If you have different plans about TST, please fork this project freely for your purpose, if needed.
-
How can I translate Tree Style Tab?
See the Notes for translators
Privacy Policy
This software does not collect any privacy data automatically, but this includes ability to synchronize options across multiple devices automatically via Firefox Sync. Any data you input to options, and URL of tabs you send to other devices may be sent to Mozilla's Sync server, if you configure Firefox to activate Firefox Sync.
このソフトウェアはいかなるプライバシー情報も自動的に収集しませんが、Firefox Syncを介して自動的に設定情報をデバイス間で同期する機能を含みます。 Firefox Syncを有効化している場合、設定画面に入力されたデータおよび他のデバイスに送信するよう指示したタブのURLは、Mozillaが運用するSyncサーバーに送信される場合があります。