Hacker News Reader

Comment by nine_k | Hacker News Reader

I can't describe in short how Tree Style Tab improves tab management.

* You can logically organize tabs, very valuable when you researching something, or when you work on multiple related web pages. Say, issue tracker, a PR or two github for this issue, a couple of doc pages related to the code, etc. The beauty of it is that the tabs mostly self-organize based on the opening order.

* You can expand and contract whole subtrees to keep current things in focus, and other things, readily available.

* You can have 30 or 50 tabs and still actually read the captions of the tabs!

* You can bookmark the whole subtree, or move it to a separate window, or close all of its tabs, or refresh all of its tabs, etc.

View on HN

Along with this, I added this snippet to firefox/userChrome.css:

    #TabsToolbar { visibility: collapse !important; }

I absolutely love it, now there's no title bar on my Firefox. My screen is big enough that I have the horizontal space to spare, and it feels sleek without the tabs on top. If you've tried out Firefox before and felt like it wasn't quite there yet, now is a good time to give it another try.

More info on userChrome here, if anybody wants to try it out: https://www.userchrome.org/how-create-userchrome-css.html

I do the same and I love it! I use the Tab Center Redux add-on for displaying tabs, but most of the time I don't and I know where my tabs are, switching between them using cmd+<index>. I toggle tab display using F1.

I've just modified my Firefox like this and I'm now also in love with it. Tree organization plus seeing whole/most tab names is such an improvement. F1 to easily hide the bar if I want the space back. Made a few "header" web pages to organize stuff under for later reading/watching (and can then collapse the tree when I don't need all of it.

Only issue is that removing the tab bar also got rid of the close/minimize/maximize buttons, but it's not a big deal since you can still drag the window to make it smaller, double click to maximize, and alt+F4 exists to close it. As long as I never want to minimize it anyway.

I was trying to think of a way to organize different sections like "work" and "personal", header web pages is a great idea.

I love tree style tabs but it takes up a lot of horizontal screen real estate. It's great when my browser is in fullscreen but most of the time I have a terminal on the right half with my browser on the left. This winds up smooshing the actual website to switch to a mobile layout (if I'm lucky). Otherwise the website is rendered useless.

Is it possible to make the sidebar float atop the webpage instead of pushing the content in? Then perhaps it could quickly autohide as you move your cursor near it.

You can turn it on and off quickly with the F1 key. And I'm pretty sure the hotkey is configurable.

My situation is a bit different: I have a 4K display, so space is not at such a premium, but I have 70-100 tabs open, in several large subtrees, and smaller subtrees within them, etc.

It is possible to make the tree pretty narrow if the screen is small, then the tabs begin to look more like the crowded top tab bar, but still allow for some structure.

My issue is that you can’t disable the default tab bar, so you end up wasting a lot of space by rendering each tab twice. It also makes the habit (of using the default horizontal tabs) a tough one to break.

You can hide the tab bar with css: https://superuser.com/questions/1268732/how-to-hide-tab-bar-...

Of course you can.

about:profiles

root directory → open directory

create a new file `chrome/userChrome.css` and put this into it:

    #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
        opacity: 0;
        pointer-events: none;
    }
    
    #main-window:not([tabsintitlebar="true"]) #TabsToolbar {
        visibility: collapse !important;
    }
    
    #sidebar-header {
        display: none;
    }
    
    toolbarbutton#alltabs-button {
        -moz-binding: url(data:text/plain;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+DQo8IS0tIENvcHlyaWdodCAoYykgMjAxNyBIYWdnYWkgTnVjaGkNCkF2YWlsYWJsZSBmb3IgdXNlIHVuZGVyIHRoZSBNSVQgTGljZW5zZToNCmh0dHBzOi8vb3BlbnNvdXJjZS5vcmcvbGljZW5zZXMvTUlUDQogLS0+DQoNCjwhLS0gUnVuIHVzZXJDaHJvbWUuanMvdXNlckNocm9tZS54dWwgYW5kIC51Yy5qcy8udWMueHVsLy5jc3MgZmlsZXMgIC0tPg0KPGJpbmRpbmdzIHhtbG5zPSJodHRwOi8vd3d3Lm1vemlsbGEub3JnL3hibCI+DQogICAgPGJpbmRpbmcgaWQ9ImpzIj4NCiAgICAgICAgPGltcGxlbWVudGF0aW9uPg0KICAgICAgICAgICAgPGNvbnN0cnVjdG9yPjwhW0NEQVRBWw0KICAgICAgICAgICAgICAgIGlmKHdpbmRvdy51c2VyQ2hyb21lSnNNb2QpIHJldHVybjsNCiAgICAgICAgICAgICAgICB3aW5kb3cudXNlckNocm9tZUpzTW9kID0gdHJ1ZTsNCg0KICAgICAgICAgICAgICAgIHZhciBjaHJvbWVGaWxlcyA9IEZpbGVVdGlscy5nZXREaXIoIlVDaHJtIiwgW10pLmRpcmVjdG9yeUVudHJpZXM7DQogICAgICAgICAgICAgICAgdmFyIHh1bEZpbGVzID0gW107DQogICAgICAgICAgICAgICAgdmFyIHNzcyA9IENjWydAbW96aWxsYS5vcmcvY29udGVudC9zdHlsZS1zaGVldC1zZXJ2aWNlOzEnXS5nZXRTZXJ2aWNlKENpLm5zSVN0eWxlU2hlZXRTZXJ2aWNlKTsNCg0KICAgICAgICAgICAgICAgIHdoaWxlKGNocm9tZUZpbGVzLmhhc01vcmVFbGVtZW50cygpKSB7DQogICAgICAgICAgICAgICAgICAgIHZhciBmaWxlID0gY2hyb21lRmlsZXMuZ2V0TmV4dCgpLlF1ZXJ5SW50ZXJmYWNlKENpLm5zSUZpbGUpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZmlsZVVSSSA9IFNlcnZpY2VzLmlvLm5ld0ZpbGVVUkkoZmlsZSk7DQoNCiAgICAgICAgICAgICAgICAgICAgaWYoZmlsZS5pc0ZpbGUoKSkgew0KICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJub25lIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIGlmKC8oXnVzZXJDaHJvbWV8LnVjKS5qcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL2pzIjsNCiAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYoLyhedXNlckNocm9tZXwudWMpLnh1bCQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2VyY2hyb21lL3h1bCI7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKC8uYXMuY3NzJC9pLnRlc3QoZmlsZS5sZWFmTmFtZSkpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB0eXBlID0gImFnZW50c2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZigvXig/ISh1c2VyQ2hyb21lfHVzZXJDb250ZW50KS5jc3MkKS4rLmNzcyQvaS50ZXN0KGZpbGUubGVhZk5hbWUpKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHlwZSA9ICJ1c2Vyc2hlZXQiOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSAhPSAibm9uZSIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLVwgIiArIGZpbGUubGVhZk5hbWUgKyAiICgiICsgdHlwZSArICIpIik7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdHJ5IHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYodHlwZSA9PSAidXNlcmNocm9tZS9qcyIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIFNlcnZpY2VzLnNjcmlwdGxvYWRlci5sb2FkU3ViU2NyaXB0V2l0aE9wdGlvbnMoZmlsZVVSSS5zcGVjLCB7dGFyZ2V0OiB3aW5kb3csIGlnbm9yZUNhY2hlOiB0cnVlfSk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgZWxzZSBpZih0eXBlID09ICJ1c2VyY2hyb21lL3h1bCIpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHh1bEZpbGVzLnB1c2goZmlsZVVSSS5zcGVjKTsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBlbHNlIGlmKHR5cGUgPT0gImFnZW50c2hlZXQiKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZighc3NzLnNoZWV0UmVnaXN0ZXJlZChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuQUdFTlRfU0hFRVQpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGVsc2UgaWYodHlwZSA9PSAidXNlcnNoZWV0Iikgew0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYoIXNzcy5zaGVldFJlZ2lzdGVyZWQoZmlsZVVSSSwgc3NzLlVTRVJfU0hFRVQpKQ0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHNzcy5sb2FkQW5kUmVnaXN0ZXJTaGVldChmaWxlVVJJLCBzc3MuVVNFUl9TSEVFVCk7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9IGNhdGNoKGUpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY29uc29sZS5sb2coIiMjIyMjIyMjIyMgRVJST1I6ICIgKyBlICsgIiBhdCAiICsgZS5saW5lTnVtYmVyICsgIjoiICsgZS5jb2x1bW5OdW1iZXIpOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjb25zb2xlLmxvZygiLS0tLS0tLS0tLS8gIiArIGZpbGUubGVhZk5hbWUpOw0KICAgICAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KDQogICAgICAgICAgICAgICAgc2V0VGltZW91dChmdW5jdGlvbiBsb2FkWFVMKCkgew0KICAgICAgICAgICAgICAgICAgICBpZih4dWxGaWxlcy5sZW5ndGggPiAwKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5sb2FkT3ZlcmxheSh4dWxGaWxlcy5zaGlmdCgpLCBudWxsKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIHNldFRpbWVvdXQobG9hZFhVTCwgNSk7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICB9LCAwKTsNCiAgICAgICAgICAgIF1dPjwvY29uc3RydWN0b3I+DQogICAgICAgIDwvaW1wbGVtZW50YXRpb24+DQogICAgPC9iaW5kaW5nPg0KPC9iaW5kaW5ncz4=);
    }

restart the browser

It also removes some other junk like the new tab button.

That didnt change anything in my Firefox 76.0.1 on Mac 10.14.6. Any advice is greatly appreciated.

Didnt work for my Chrome either (83.0.4103.61) This site can’t be reached. The webpage at chrome://profiles/ might be temporarily down or it may have moved permanently to a new web address. ERR_INVALID_URL

set

  toolkit.legacyUserProfileCustomizations.stylesheets

to true in

  about:config

and restart firefox which can be done from

  about:profiles

by clicking

  restart normally

Thanks this is very useful!

Note: To enable userChrome reading, set

  toolkit.legacyUserProfileCustomizations.stylesheets

to true in

  about:config

Thank you for the update on the instructions, but its still not working in Firefox. Anything else I can try or need to do?

You can do it, but I wish there was an easy way to sync the hacky configuration between computers.

Here's the official wiki page for style hacks: https://github.com/piroor/treestyletab/wiki/Code-snippets-fo...

You can hide the tab bar, the sidebar header, and change a whole lot more things with custom styles.

On wide screen monitors, a maximized browser is almost pointless these days - either lines are uncomfortably long, or on better designed sites, margins are enormous.

I generally size my Firefox so that the viewing portal is approximately square - the area with content is as wide as my monitor is high - leaving plenty of space for tab tree on the left, and then another 1/4 of a screen for things like terminals to be cascaded.

Cascaded windows are more efficient than tiled or docked windows. The bottom left corner of cascaded windows act a bit like tabs for selecting a window.

This is on two 30" monitors. If you're on a laptop then things may be different. On my Macbook, I fullscreen most apps and swipe between them, but I don't do any serious work on laptop screens, they're too small.

Sorry, is this in opposition to my comment, in support of it, or just an unrelated tidbit?

As I said, I prefer to have my browser at about 50% horizontal width. The only reason I wind up using it in fullscreen is because of the aforementioned issue with tree style tabs taking too much space.

I developed this extension with a dedicated window (Command+T to toggle) to make it easier.

https://addons.mozilla.org/en-US/firefox/addon/tab-manager-v...

Alternatively: I was thrown off by the new tab behavior in Tree-Style Tabs and didn't want the complexity of a tree of tabs. Vertical Tabs Reloaded[0] gives me the "tabs in a sidebar to the left" without the complexity.

[0]: https://addons.mozilla.org/en-US/firefox/addon/vertical-tabs...

How does this help? Easier to read tab titles since it's horizontal?

You can fit more tabs while still being able to read them, basically.

Was using it extensively, have customised it with userchrome file.

But then went to idea of having fewer tabs open and only w.r.t context I'm working on. Lesser number of tabs made things much more simpler for me.

Have been both sides, and must way for people with lots of tabs, tree style tabs is seriously good.

For this I use Simple Tab Groups: https://addons.mozilla.org/en-GB/firefox/addon/simple-tab-gr...

I have a "Work" group that I switch to when working, and separate groups for the different personal projects I'm working on. That ensures that my tab bar only has the tabs relevant to my current context, while being able to easily switch back to the previous context and I pick up that work again.

It does slow down when you have >100 tabs though, to the point that on my 2013 Mac it becomes noticeable during work; and on a browser restart or TST update, it can take upward of a minute of just being stuck.

I used TST religiously, but one day I closed it for a few minutes to get more real estate, and everything was so much faster I haven’t re-opened it.

That's when you get Auto Tab Discard[1]! You can set a number of tabs and time for each tab after which the extension will start discarding the tab contents and leaving a placeholder in place, that will re-load when you move to them.

I have a lowest-spec 2014 mbp and I can have hundreds of "open" tabs with no sweat.

[1] https://addons.mozilla.org/en-US/firefox/addon/auto-tab-disc...

Reply on news.ycombinator.com