Should I Make a Tree Style Tab Outliner?

Hi, this is kind of different, but I’ve noticed that I have a hard time getting stuff done online when my browser tabs/links/etc aren’t organized. So I’ve been thinking about fixing that. I know it’s not flashlights, but I figured I should ask here anyway.

Background

In the past I used an extension called Tabs Outliner to manage large amounts of tabs and links and notes and stuff, like for tracking and triaging a lot of tasks at work, and for pretty much everything else too. It worked well, and was one of the most popular extensions for a while.

But it hasn’t been maintained well, and it’s not open-source, and important features are locked behind a paywall which, last I checked, doesn’t even work. Plus, it’s tied to Google, and I’ve been trying to get rid of reliance on megacorps like that.

I tried switching to Firefox, and tried using its most popular alternatives like Tree Style Tab and Sidebery, but they lack most of the features I rely on, and Firefox was really struggling with less than 1% of my usual amount of tabs. It was making my entire computer run slow and hot and kept spiking the CPU for no apparent reason. So I switched back to Ungoogled Chromium, and things ran much faster and cooler.

But Tabs Outliner is still the least-bad option, and it has been getting worse for like a decade, and it can’t be fixed.

So I’ve been thinking about writing my own from scratch… and I wonder if anyone else might be interested?

What is it?

The general concept is a side panel or a separate window, which manages a structured tree of notes, tabs, and links. It lets you manage large collections of tabs, and pretty much replaces the browser’s bookmarks and session management and tabs groups, while also adding the ability to do other stuff.

I use it as a todo list, a log, a mind mapper, a session manager, a tab manager, a bookmark system, a report generator, a data organizer, and to generally sort out thoughts and help me focus on getting stuff done.

The tree

It’s pretty simple. You have a session, and in that session is a big tree of nested, collapsible “nodes”… which are things like windows, tabs, and text notes. You can organize it however you want, and it mostly build itself while you browse the web.

Side panels and/or windows

Each window can have its own collapsible, resizable side panel which shows only the branch containing that window and the nodes inside of that window. Or you can open a separate window with the entire tree, for larger-scale management tasks. In either case, it’s pretty easy to move entire nested groups of tabs between windows. Either drag and drop them with a mouse, move them around with keyboard shortcuts, or cut the branch in one window and paste it in another.

You can even define entire groups of windows, by placing them within the same parent node. Tabs cannot exist outside of windows, but notes or headings or unloaded tabs can.

Unloaded tabs

A window or tab can either be open or unloaded, and can have a note attached if desired. Unloading a tab just takes a hotkey or click, and completely frees up any resources that tab was using, and removes it from the tab bar at the top of the browser… just like closing the tab would do. As far as the browser can tell, it is closed. It goes beyond what “discarded” tabs do. But it stays in the tree, and can be loaded again right where it left off, just as easily.

This approach is so lightweight that it’s not a problem to have tens of thousands of nodes in your tree. The only ones which actually take any resources are the few which are actually open or “loaded” at any given time.

I’m not exaggerating about tens of thousands of tabs. My personal trees tend to have 4 to 5 digits worth of nodes, of which only 2 to 3 digits are actually loaded at any given time. So this is a hard requirement, an essential core function.

The browser’s “discarded tab” feature is not sufficient. I tried that. It made the browser choke. And discarded tabs have other problems beyond just performance… like, some parts of the tree refer to sites which don’t even exist any more, so they cannot be loaded, and if the browser ever attempts to load it, it’ll lose the data which had previously been saved. I’ve lost data that way.

Notes, tasks, queues, etc

The tree is, first and foremost, an outliner. And outliners are useful for all sorts of things.

Like, let’s say you have a bunch of messages to respond to, or a bunch of changes you need to review, or a bunch of bugs to triage, or … whatever. You can use the outline to build your own workflow to handle it. For example:

  • Make a text node called “to respond” or “to review” or “needs triage” or something like that.
  • Under that new note… open each message, change proposal, bug report, or other task you need to do.
  • Maybe add notes to each, in case there’s anything you want to remind yourself about later when you do those tasks.
  • Unload all those pages.

You have just created a todo list, or a task queue, with optional notes attached to each item. Now you can go through them one at a time, do whatever you need to do, and then either delete the tab or unload it and move it so it’s under a note called “done” or “waiting for reply” or “follow up next week” or “add to this week’s summary report” or something like that.

The tree is a living document where your tasks and ideas and notes and tabs live, and they flow through whatever queues or processes or other organizational systems you need in order to get stuff done.

There are lots of task management systems, of course. You could use a regular todo list, or a kanban, or a bullet journal, or whatever else… but having it in the browser sidebar is really convenient. With an outline in the sidebar, you don’t have to copy links and other data back and forth between the browser and other tools; it’s all right there and mostly builds itself automatically as you browse.

Session management

The tree makes the browser’s built-in session management mostly unnecessary. I turn that off, so when I run the browser, it won’t open new copies of whatever tabs I had open last time. It’s all saved in the tree anyway, and re-opening some of those pages can backfire. Like, if you need to be logged in to see a page, and the browser crashes, the browser’s built-in session thingy has a tendency to replace your old pages with login pages or even “404 not found”.

For example, if you had a dozen private messages open when a browser crashed, on a site with a short login cookie timeout… when you restart the browser, it tries to re-open those but you’re not logged in. So it redirects all of them to the login page, and replaces the page titles, so you can’t even tell who you were talking to.

At least when using the tree, you have direct control over if/when it tries to re-open old pages… and if opening the page causes it to do something which destroys old data (like the page title and URL), you can just hit undo and get the old data back.

Bookmarks

Bookmarks become mostly irrelevant with an outliner like this. You could still use them, but there’s generally not much point. They’re just a less convenient, less powerful way to do some of the same things.

Tab groups

The browser’s “tab groups” are also pretty much obsolete when using a system like this. My current tree has over 1000 “groups” (a.k.a. nodes which have children), which is well beyond what the browser’s built-in grouping system can handle. And unlike the browser’s native groups, the outline tree structure mostly builds itself instead of requiring manual steps and conscious decisions.

New tabs next to current

This is a little thing, but to help keep things more organized, new tabs would open as a child of the current tab. Ideally with some options about the precise placement according to user preferences. Chrome’s hardcoded behavior of “open new tabs at the extreme right end of the tab bar” is kind of insane, and fundamentally incompatible with structured tab systems like this which keep related pages together.

Backup, restore, and convert your data

I lost my session tree once, about a decade ago, due to hard drive corruption. That sucked. Never doing that again. I lost a lot of data I cared about. So backups are essential.

The tree can get pretty big and hold important data, so the user would be able to back up their data automatically to their own server, or do manual backups to the local computer.

For automatic backups, it periodically sends the entire session tree to a server of your choice, something you own and control. By default, it’s on the same computer as the browser, just running a very simple, lightweight, single-task web server. This gives you automatic snapshots of your session over time, and a failsafe in case anything goes wrong and you need to restore the session.

For direct local backups without a server, browsers don’t really allow extensions to do this automatically any more, so the user would have to hit a hotkey or press a button… which causes the browser to “download” a session file and save it in the downloads folder. It’s not as nice as the automatic backups, but it’s still handy if you can’t run the server for some reason.

The backup files are simple to read and convert to other formats, and I made a simple tool to convert them to human-readable plain text. Or at some point I also hope to add the ability to drag a node into a document, to paste that entire branch. Can be handy if you have, for example, been collecting notes and links about what you did at work this week, like which bugs were worked on and how… and then you could simply drag that into a weekly report.

I also plan to support reading old tab session files from Tabs Outliner, so users of the old extension can transfer their session into the new extension. In part because I personally want to transfer my session… so it’ll be supported pretty early in development.

Sync between browsers

This is still pretty far off in the future, but I’m trying to design things to make it compatible with the ability to sync your session tree between multiple browsers… even cross-browser, like between Chromium and Firefox. You would have to run your own server for this.

It’s something I’ve been wanting for a long time though, so I hope I’ll be able to do it. Because I tend to use more than one computer, and it’d be extremely useful if they all shared the same session tree.

They wouldn’t have the same tabs open, of course. Each browser would have different parts of the tree actually loaded… according to what’s relevant for that particular browser. But they would all use the same central tree.

Undo

I’m trying to structure the data in a way which records not just the current state of the tree, but also an event log or transaction log of how the tree has changed. And I’m trying to make it so the log can be played both forward and reverse.

This is pretty much required in order to let the user keep multiple browsers in sync. Each time a browser connects, it would download the list of changes since its last snapshot, and replay those changes in a forward direction to generate the current state of the tree. Then once all browsers have caught up, old transactions could be trimmed to save space.

Playing the log in reverse allows for undo. So if you accidentally mess things up, you could undo those changes.

The transaction log concept also allows the outliner to work while you’re offline or otherwise don’t have access to your server. Like, if your server is at home but you’re at work, you could still do everything normally… and then after you get home where you can reach your private server again, it’d sync all those changes.

Support for multiple browsers

While I’m targeting Chromium initially, I hope to also support Firefox. I hear this can be quite a difficult task though, so details remain to be determined. A fairly large amount of code can probably be reused between them, but a lot of things would need to be written twice. For example, the two browser engines use totally different APIs for side panels.

Open-source

Of course.

No corporate cloud BS

A big part of the point of all this is to let the user control their own data, without relying on increasingly predatory corporate cloud services. Backups and sync would go to computers you own and control, not to some data mining advertising agency which collects your data so they can sell it to other corporations.

So, at minimum, a session backup server would be included, designed to make it as simple as possible to install and maintain.

Ideally, I’d also like to include cross-browser sync in the server… but that’s quite a bit more complicated. So that’s more of an aspirational goal for later, a factor to keep in mind while building the rest.

The question

This is a pretty big project. So I’m trying to figure out if I should actually do it. What I’m wanting to know is… Should I make it? Would people actually want something like this?

If nobody except me cares, I should probably not put in the effort to build it. But I get the feeling it may be something the world needs, and I’d like to check first before dumping a ton of time into it. It would be practically a full-time job.

8 Thanks

This sounds amazing! I would definitely love a tree for both my work and personal uses. I keep so many tabs open at once, and very few really need to be active. It would be great to keep a few active for emails and messaging, then keep the rest inactive to save resources.

1 Thank

I close my browser session every day. :sweat_smile: TST is absolutely sufficient for me.

2 Thanks

I keep wanting to share screenshots of the early proof of concept I made. But due to the nature of the data in browser session trees, a lot of it is really personal or private. So I’ll just show one small part of the tree for now, on a fairly new PC which hasn’t had time to accumulate many nodes yet.

This is not at all ready… just an early proof of concept:

Shown in this pic, from top to bottom:

  • A text note called “Flashlights”, which I’m using as a heading. Some of its descendants are loaded into open tabs, so the heading is a bright color.
  • A sub-heading, “Anduril”. It’s collapsed and none of its 8 children are open as tabs, so it’s a dim color.
  • My reddit page for unread messages. It’s open in a tab. Below it is a heading for stuff I should respond to, which currently only has 1 item inside.
  • The front page of BLF, currently open in a tab. It has a few children: My inbox, a group of 3 messages I should respond to, and then this page about whether I should make an outliner. That last one is the focused tab in this window, so it’s brighter and bold.
  • A collapsed subtree for browser setup pages. None are open right now.
  • A heading for “Projects”. A few of its descendants are open, so it’s a bright color. It is currently selected, meaning it is where the cursor is, so it’s highlighted. Its children are also highlighted, but in a dimmer color. If I press any keys while the side panel is focused, they’ll affect this node. Like, if I press Spacebar, it’ll collapse or expand the “Projects” branch, or if I press “N”, it’ll let me edit the note text. There are a bunch of other keys too.
  • Inside of “Projects” are a bunch of other tabs, links, and notes. Some are loaded, some unloaded. Some are expanded, some are collapsed. If I to anything to the “Projects” node, everything inside it is affected too… like if I were to drag “Projects” to a different window, the entire subtree would go to that window.
  • The “translate.google” node has a little menu hovering over it, because that’s where the mouse was when the screenshot was taken. In that menu are three buttons: “U” to unload the tab, “N” to add or edit a note, and “X” to close the tab and delete the node. These button labels match the hotkey for doing the same actions with a keyboard.
  • The “js reference” branch is a bright color because it contains open tabs, while the other branches and pages below it are dim since they don’t have any open tabs.

I guess I didn’t show any examples where a node has both a text note and a link, but that’s supported too. It helps a lot with remembering why a particular page was open or what you need to do with it.

2 Thanks

Yeah, very different than what I do. On my notebook, I exported my session… and it says the session started in 2014. It currently has about 3000 nodes in that tree. And that’s on a secondary computer where I tried not to accumulate too much.

I’m really hoping to get the cross-browser sync thing working, so I won’t have to designate browsers as primary or secondary, with different data in each. It’d be a lot nicer to just share a single session across all of them, and not have to care which one I’m using at any given time.

1 Thank

This sounds awesome, even though I don’t have as many tabs (mostly because Firefox eats up 30gb of RAM if I stop caring)

It seems a bit more advanced than what I would need, normally I stick with regular TST but it would still be very nice to have.

Hmm…
Tree Style Tab looks interesting.
I have the Chromium-based extension SideTab Pro, which seems similar, but I almost never use it. :man_shrugging:

Yeah, this helps with that a lot. Unloaded tabs take basically zero RAM and zero CPU. That’s how my cheap little mini PC can handle my current session of 989 items… because only 21 are currently loaded.

I also limit the maximum amount of RAM and swap it’s allowed to consume, using Linux cgroups and a tiny little program I made called memjail. It limits the resources a group of processes are collectively allowed to use, and also lets me easily pause and unpause the entire set using a hotkey. I pause the browser while I’m not using it, which reduces its CPU use to zero, and keeps it from using power and leaking memory while it’s sitting there unused.

1 Thank

Hm, something seems wrong with your setup. I have ~15,000 tabs and FF is using about 7G memory. I am more worried with SSD wear.

Screenshot 2025-03-17 at 5.53.09 PM

Screenshot 2025-03-17 at 5.55.37 PM

1 Thank

That’s seriously impressive amounts of tab hoarding

IDK, maybe it’s just a memory leak in one of the “keepawake” sites, or a problem related to windows (I don’t like it but it’s what I have to use)
I just quit and relaunch FF every few days when it gets too slow and that fixes it temporarily. I’m not really the most well versed in programming stuff.

There aren’t really any other programs using more than 1gb aside from discord and the file explorer (probably indexing or something) and it goes down to a reasonable number after quitting FF


We talked about this in chat. You don’t have 15k tabs open… you’re using Auto Tab Discard which unloads like 99.5% of those tabs.

That’s like me saying I have 988 tabs using just 2.4 GiB of RAM because that’s how many are in my tree at the moment… when actually there are only 10 open. It’s an important distinction. Unloaded tabs mostly don’t count toward resource use.

Anyway, it sounds like you could probably get some good use out of an outliner thingy to organize all those tabs.

I’m working on it, but it’ll be a while before I have things in a release-able state. I’m very early in this project.

2 Thanks

In my defense, I didn’t say they were open, I said I have them (in my session). Chrome and Edge both have settings to discard tabs after some time. FireFox has the API to load/unload but they are only using it when the system is low on memory, and by then it’s usually too late. Auto Tab Discard does what Chrome / Edge are already doing. Hopefully it will not be needed much longer.

Actually I just want to get rid of the tabs, not outline or organize them. But I know that ~2% of them are “valuable” so I procrastinate :stuck_out_tongue:

So… you think I made it clear enough which nodes are marked for batch processing?

Nobody should have ever let me get near a stylesheet. :sweat_smile:

(blue = cursor, gold = marked)

Anyway, I’ve been plinking away at a from-scratch browser extension, and things are going pretty well so far. I figured I may as well make its default dark and light themes based on the themes I made for BLF, because… why not? At least it’ll have a distinct look. The user will be able to choose other themes though.

And I just added the ability to mark multiple nodes for batch processing. It’s handy, for example, while rearranging nodes in the tree, or when moving stuff from one window to another. Mark nodes in one window, switch to the other window, put the cursor where you want them to go, then hit a key to paste those nodes. It moves them all to a new place, without having to drag them around.

It’d be really handy when cleaning up an old session with thousands and thousands of items, reorganizing and de-duplicating them. But I have more features to add for that before I start on cleaning my own old sessions.

Like… in Vim, you can search for arbitrary strings by typing / followed by a string and then Enter, or search for whatever is currently under the cursor by hitting *, and then cycle through matches with n and N for next and previous matches. So I plan to implement the same workflow here, searching for arbitrary strings or for anything which matches the current URL, title, or note. Then you could de-dupe pretty quickly. Put the cursor on something, hit *, then m to mark the first copy it finds, then n (next) and m (mark) to mark the next copy, and so on, until you get back where you started. Then eventually p to paste them all into one place together, or just batch delete the copies with ;d or whatever keys you bound the “batch” and “delete” to. The ; thing is lifted from the Mutt email client, which lets you tag messages and then batch process them. Any single-message command can be batched by putting a ; in front, but you could use any key you like. Maybe b for “batch”.

Of course, you could also just use n and d to go to the next match and delete it, without marking anything. But I usually prefer to put them all in one place to review them first and choose which one to keep, because they’re not necessarily all identical. Like, the same URL might have different notes or child nodes attached, and I would want to merge that extra data together before deleting the copies.

Anyway, just felt like posting sort of a progress report.

1 Thank

I guess I didn’t post it at the time, but a few days ago I made a little animation to more clearly show the marking and pasting of items…

mark/paste example

… and today I gave it the ability to attach longer notes to each item:

There is still a lot to do. Will be a while before it’s release-able. Like, the TreeView definitely lets you view and edit the tree, and it syncs real-time between multiple views and the TreeStore in the background… but the TreeStore doesn’t actually store the tree yet. For now, I’ve been working only with throwaway data so I can get stuff working before putting any real data in.

Everything so far works in both Chrome and Firefox though, so once I get far enough to build the server, it’ll be able to automatically sync the tree (i.e. your session) between different types of browsers.

2 Thanks

Browsers are messy to deal with. Every little thing takes forever since there are so many quirks and gotchas to discover and work around.

For example, today I was making it handle when new windows and tabs are created, and automatically update the session tree accordingly. But it was getting errors because the browser generates tabs.onCreated events (which give a windowId to put the tab in) before it generates a windows.onCreated event to actually make the window. So when told to put a new tab into a window, my code was correctly reporting, “hey, that window doesn’t exist”.

But I can’t fix the browser. I can only fix my code. I had to add dirty workarounds for stuff like this. So instead of complaining that the window doesn’t exist, it’ll create a new window node when it sees a windowId it doesn’t recognize, and just … trust the browser to follow up and actually create the window later.

There are a ton of things like this, so a lot of tasks which should be simple end up being a whole ordeal instead.

1 Thank

What is actually executed when the browser launches a new window? Chrome eats up a ton of ram because each tab seems to be considered as another instance of sorts…

I’m not sure how Chrome does it. For now, I’m mostly testing in a junk session in Firefox, so I can avoid messing up my real session in Ungoogled Chromium.

But in Firefox at least, I’ve confirmed several types of events consistently place things in the wrong order, referring to objects which haven’t been created yet. It’s a little frustrating. Not a huge hassle to work around, but at least an inconvenient thing I keep tripping over each time I find a new one.

I tried to switch to Firefox a couple months ago, and performance was terrible. It was getting crushed under a small fraction of the usual load I inflict on my browser, and it doesn’t have any good (or “good enough”) tree style tab outliner extensions. So I ended up switching back to Ungoogled Chromium, and it immediately made everything a lot faster and the entire computer runs cooler and quieter. But chromium still had only an old and barely-maintained tab tree manager, so I finally started making my own.

The performance differences were really surprising to me. I figured there would be some differences, but I wasn’t expecting it to be so extreme. And I’ve verified similar results even just within my own extension. Like, I gave it the ability to import old saved sessions from Tabs Outliner, and then measured how long it takes to import the same session in Firefox and Chrome. I tried Firefox first and got worried because it took several seconds to import a session… then I tried Chrome, and it was under a second.

Anyway, part of why I’ve been testing mostly in Firefox is because it goes so much slower. I figure if I can get stuff to run at a responsive speed in Firefox, it’ll be fine in Chrome too… but not necessarily the other way around.

As for Chrome using lots of RAM… I run it inside of a memory jail so the kernel blocks it from using more than the limit I set. It helps a lot. I also pause the entire cgroup while I’m not using it, which prevents bloating overnight and excess CPU use and other unwanted behaviors.

For this extension, I’ve been trying to fully dive into the Manifest V3 way of doing things… which means the extension threads can get killed and restarted at any time, when the browser feels like it. This prevents memory from leaking enough to matter, by basically rebooting threads a lot. It adds a significant amount of complexity, but it forces a leaner, cleaner approach to things and it’s required in order to run on current versions of the browser.

1 Thank

Most of that went over my head, I’m more of a hammer/nail kinda person, lol…as for memory leak and waste of resources keeping currently irrelevant tabs alive, I’ll have to look into a memory jail.