Show HN: Rethinking Tabs in Firefox
madprops.github.io
madprops.github.io
Having a menu that needs to be deployed makes the whole process slower -> I first have to open the menu, _and then_ I can start deciding which way I want to switch.
It doesn't seem like a big deal, but when you use the browser for hours a day it is, because there's this additional cognitive cycle of having to request information to be displayed first -- rather than have it always present.
Finally, the tabs on the bar on the top have virtually infinite surface and are super easy to click. You see, a 100x100px button has a defined surface where you have to point and click. The smaller the surface, the harder it is to click. But a button at the border of the screen has one dimension infinite: I don't have to aim accurately on the Y axis, I can move my mouse beyond the top of the screen and will still hit the tab.
This is not an option in Chrome, for some unexplicable reason (Chrome has marked it as wontfix)., and it's the main reason I use Firefox. It's possible to hack around it with extensions and opening the Chrome extensions settings XML file and manually setting the Ctrl+Tab and Ctrl+Shift+Tab shortcuts, but it's fragile and annoying to set up, and has some odd behaviours in certain circumstances.
There is a deterministic way: look at the pop-up that shows the thumbnail in the most-recently used (MRU) order. Just like Alt+Tab.
If you're tabbing through more than five tabs, it's probably faster to click, whichever method is used. But at least MRU ordering lets you easily switch between any two or three tabs. That is impossible with visual ordering.
Taking in visual information is super slow. I feel like a lot of interface designers don't get this. It's great that it's there as a training wheel to teach you the movements, but having to rely on it even as an experienced user is a constant source of frustration.
It's a good question. It seems to work better for window switching because I'm switching more frequently and in a more predictable pattern. It's usually between 2 windows (code window and browser window) or occasionally 3 (code, browser, documentation/reference material).
Whereas it's rare to be switching in a consistent pattern between any 2 code windows. If a situation like that does emerge, I rearrange them so the two I need are side by side.
alt+1
ctrl+shift+tab
1. The whole point of vertical tabs is that horizontal browser space is "cheap." Why not keep the tab list visible? Having it be a dropdown adds an unnecessary step.
2. Horizontal (Sidebery style) pinned tabs that just show the site icon are much cleaner. I have a row (8-12 tabs depending on how wide I drag the tab bar)of frequently used sites pinned at the top of my tab list.
3. It doesn't look like you have right-click move to window functionality, which is critical for my workflow. If you add it, be sure to make it work with the Titler extension so you can work with window names.
I'm glad you didn't put energy into tab trees - I think they are a waste of space. I have a window for each general category of tabs.
Yes, it's crazy.. but this is essentially my bookmark system. I take backups of the "session" so if something did happen, I can recover all of them. And every few years, I quickly go through them and start afresh. Bookmark what might still be relevant, and discard the rest. It works for me
Would love to know if anyone has a more elegant solution
https://chrome.google.com/webstore/detail/tabist/hdjegjggiog...
You might want to look into a plugin that will snapshot you tabs to a bookmark folder or html list so you can save the list and then close a lot of them.
I keep my browser window ~ 1/2 my screen width. If it grew, it would overlap other windows I am using.
So I wonder: what features do you use, which are broken by this extension, and which I am therefore missing out on?
(Aside from GP's searching tabs with %, which I didn't know was broken but does have a workaround in Sidebery)
The most typical case is that I am looking at a list of things, and I want to click on a result but if I hit back, I don't want to wait an eternity for the page to reload -- if it even does; more often than not something breaks in the back navigation and the results I was looking at are not longer available or the context has switched.
Basically I want cost-free backwards and forwards navigation, and tabs are how you do that. But essentially I want that hidden from me. I would much prefer if under the covers hitting back didn't navigate you away from a page, it just keeps the page you are on in a virtual tab in case you want to go back to it. Similarly, clicking a link shouldn't navigate away from the page you're on, but just put it in a virtual tab.
What would be the drawback to just show the page as it was without reloading? Too much memory consumed when retaining too much state from previous pages?
A pain to implement but kind of an interesting experiment
Hold my beer, I'm gonna try to "snapshot" with iframes or something.
[1] I don't know if it's even possible, since this goes beyond HTML, DOM, and memory; nowadays there might be a lot IO "open", e.g. webcams, sound, websockets, etc.
I'd say that's about 50% of my usage and the other 50% is hoarding every HN story to later bookmark and never revisit :P
I typically keep one window for each “navigation group”.
Answering a single question, understanding a specific topic, finding the product I’m going to purchase (then purchasing it). That way I once I’m done I can close the whole window without looking at the contents of the other tabs (and risking (more) rabbit holes)
Browsers model back/forward linearly whereas the mental model I want is more tree-like. If I end up going back a few times and then click a link in the same tab, I lose all ability to go forward again. So a lot of my tabs are the result of using “duplicate tab” so I can take actions that destroy the back/forwards state without losing the original.
If we’re going to have a browser implement instant, reliable back/forward, I’d also like to see some simple way of choosing from all forward actions I’ve previously taken. Because my browsing is so often non-linear.
I'm a tab hoarder, and your comment made me realize that it's mostly because I don't want to lose the source of a interesting links.
So I just open in new tab or duplicate tab to preserve the original tab and it's history.
On hckrnews.com I can first put my brain in "which of these is interesting to me mode", and then once they are all open, switch to reading.
I would prefer that a page like facebook, twitter, reddit only ever go back to the top when the refresh button is pressed. But since none of them behave as a web page should, it forces you to open everything in a new tab to preserve the page state. Middle click, close tab is the replacement for link click, back. And as others have said, browser back and forth is destructive. As you navigate you lose information. The link is still in history, but you have lost the relationship between what order things were navigated to and from, and which page led you to them.
There is a market for somebody to come around and completely redesign the browser chrome paradigm, replacing back/forth, history, tabs, and bookmarks with something more seamless that preserves state, intent, relationship, and time.
There should be multiple ways to open something. Super temporary, temporary, less temporary. There should be multiple ways to close something, remove from history, keep in history, minimize.
Compare using back/forward on a boring HTML site like Hacker News, and to something like say, the Google Search results page. What's funny is that Google itself has a page on how to optimize your website for bfcache implementations, with some Chromium-specific tweaks, but the left hand doesn't talk to the right at Google, so we're stuck with lots of full page refreshes on Google properties.
Yes, webapps, with their own internalized breadcrumb system.
That said, I'm wondering how this compares with TreeStyleTabs (1) for tab management.
1: https://addons.mozilla.org/en-US/firefox/addon/tree-style-ta...
Since browsers are a place where we do a lot of work, I think this kind of approach to tabs deserves to land upstream in browsers.
Yet, as many have said before, browsers do not seem to target power users: I cannot even change FF's shortcuts without recompiling the beast!
I didn't seem to have any issues getting the add-on installed in my Firefox. Yes, TST suffered from some instability when Firefox initially deprecated XUL and switched to the WebExtension model exclusively, but it seems to work fine now. It even picked up the theming changes in the latest update to Firefox seamlessly.
>I think this kind of approach to tabs deserves to land upstream in browsers
Edge comes close. It has the option to orient tabs vertically. However, it doesn't organize tabs in a hierarchical outline like TST does.
Did not know that. Edge is basically MS branded Chrome, right?
Brave currently has vertical tabs as a flag-enable-able option, and if they add tree hierarchy, I probably won’t switch. But if not, I’ll likely move to Orion, which has been working well for me.
The amount of nails FF has scattered in the road of moving the tab bar to the side is atrocious. At one point (in the halcyon days when the Firefox motto was "Your web, the way you like it.") tab placement was a user-configurable option in the preferences.
Then they removed that option, saying "Users can reenable the option with an extension."
Then they broke the extension for no good reason since, as you correctly note, with quite a bit of work is possible to install it.
I wish Firefox would get back to providing a functional browser instead of being a platform to install crap like "Pocket", "Hello", "Colorways", and whatever has flown beneath my radar.
So I’ve got tabs open for managing VMWare, Foreman, two monitoring systems, two cloud providers, gsuite, and about eight spreadsheets at all times because that’s how we track assets and do IPAM. That’s like 20+ tabs that I bounce between all day long. I’m not going to use bookmarks to navigate this, I want a max of two clicks to get to the right tab. And so Chrome’s tab groups solve my problem perfectly.
Also, in my defense, since automating things and deploying an ITAM tool is kinda my job, I started here less than a year ago. My predecessors were let go when a new manager came in and found out that the Linux env was ridiculously insecure, and then they refused to make the env comply with some of the most basic security guidelines (like security patching more than twice a year). Then my counterpart left for a better job after three months, so I’ve been left alone to support an infrastructure that’s falling down around itself while also trying to secure and enhance it (i.e. rebuild everything).
I also us multi-account containers and would love to find a way to make the little ribbon of color on the edge more prominent.
I use a bit of userChrome.css for this. I think this is the important part:
.contextual-identity-marker {
width: 40px !important;
left: 0;
opacity: 0.6;
}Tabs are for pages i'm going to use in the next 30 minutes (or that have state i want to keep), bookmarks for things i need a few times per month, and pocket/readlist for stuff i might want to read in the future.
No need to waste screen real-estate on anything i'm not going to use soon. And there's always history if i need to find something I've closed but didn't save to my bookmarks or pocket.
> Your freshest tabs are always at the top.
I think I'd hate this. Every time you switch tabs, the order would change. This ruins the spatial organization I have in my mind. When doing research and opening tons of tabs, I have a general idea of where each tab is, letting me jump between pages quickly, even faster than using tab search.
There's a reason why when you zoom out to see all your windows on Windows (using win+tab key), Mac OSX (using mission control), or Linux, the order of the windows generally stays the same.
Fortunately, I have exactly that already. The native tab bar gives the stable ordering, except I ignore that because I'm a tab hoarder and only look at the Tree Style Tabs sidebar. Ctrl-Tab gives the recency ordering.
I certainly have complaints about how TST isn't able to provide all of the native functionality (eg the Send Tab To Device menu is empty, and the stupid native tab bar is still visible without a userChrome.css hack). But in terms of ordering, Firefox already gives me the two different orders I care about in a form that works for me.
For bookmarks, I don’t want to have to manage a bunch of temporary bookmarks. With a tab I can just close it and move on, but if I had created a bookmark now I have to both close the tab and delete the bookmark.
Finding content: History search just isn't as good as being able to preview a page to see if it's the right one.
To-do list: There's some action remaining until the tab is dismissed, or research items to compare
This might benefit from using Firefox's Sidebar API: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Web...
I hear so many complaints about Mozilla for politics, etc, but my real complaint is that they haven't added a Vertical tabs option (which really should be the default on all browsers).
Don't get me wrong, there is nothing bad about the current implementation of tabs for the regular user, but when you are on 100-150 tabs then you know the tabs solution doesn't scale
Horizontal tabs are ridiculously bad given standard screen dimensions.
But while we are on that subject: I don't want to manage all that mess (my history, my bookmarks, my read-it-later extensions, my stars, etc.).
Plug me an IA, a cortana, a Jarvis or a duck and let me ask it in plain language what I am trying to remember.
After some beeping noises it comes back with some answers, built from the stream of data that passed through my browser. And I mean the whole stream: video, subtitles of those videos, audio track, images in webpages, full text, etc.
Not just a list of URL I visited.
Wait, that's just Google@home, right ? Should I just live in Google search then ?
Ah, I don't know. /rant
[1] https://github.com/piroor/treestyletab/wiki/Code-snippets-fo...
To provide a bit more context: OneTab closes (all, or specific) tabs and dumps the URLs in a stack, grouped by window or category to be quickly popped open/combed through at your leisure.
It's great for the times I get sidetracked and need to hold onto thirty pages of docs without keeping them open at all times; I use it as a sort of tab purgatory which I will probably not revisit (I have 1025 tabs saved at the moment ).
Just call them both "pages" and keep last N active in memory.
- Collapse history into start leaf and end nodes. The end nodes are your tabs/state. The steps to navigate to a node are less important for history. I don’t need to know the url of the Google page I used to get to fact X, what’s important is the fact. (The Google page won’t stay the same anyways)
- Opening a new tab starts a new history tree, with a possible parent tree.
Let me know if anyone wants to discuss this idea.
But this is very neat and exciting!!
If I'm researching something, I'll open more than 200 tabs. With Tree Style Tabs, each Google or Kagi search is a top-level tab, and each link I open from that gets opened in a sub tab. When I'm done, I'll store the useful tabs organized in an org-mode file - I have an Emacs script which grabs the currently-open tab URL and Title from Mozilla's sqlite database and adds them in org-mode link format to the current document (I can post it if anyone wants it). I can then close all that mess.
(defun ff-link-org ()
(interactive)
(insert (shell-command-to-string "lz4jsoncat $FIREFOX_DIR/sessionstore-backups/recovery.jsonlz4 | jq -r '.windows[0].tabs | sort_by(.lastAccessed)[-1] | .entries[.index-1] | \"[[\" + (.url) + \"][\" + (.title) + \"]]\"' | tr -d '\n'"))
)
(defun ff-link-org-xdotool ()
"Get Firefox link in Org mode format"
(interactive)
(shell-command "xdotool search 'Navigator' windowactivate --sync key --clearmodifiers Escape y o ; xdotool keydown alt key Tab ; xdotool keyup alt")
)
(global-set-key (kbd "C-c f") 'ff-link-org)
lz4jsoncat $FIREFOX_DIR/sessionstore-backups/recovery.jsonlz4 | jq -r '.windows[0].tabs | sort_by(.lastAccessed)[-1] | .entries[.index-1] | \"(\" + (.title) + \")[\" + (.url) + \"]\"' | tr -d '\n'
For work, tabs are my way of not losing information someone sent during a meeting or something. I click the link in the meeting chat and then go back later. I use a tab manager to sort them by domain, so all the wiki pages end up together, all the quip docs, etc.
Then every few months I go through all the tabs and either read them, bookmark them, or discard them.
Sideberry for vertical tabs - Horizontal tabs make zero sense.
Titler for window titles and then different windows (7-10) for general categories.
The lame issues:
Sidebery doesn't recognize the window titles so moving tabs between windows is a pain.
The fact that vertical tabs are not the firefox default and that FF makes it so difficult to remove the horizontal tabs.
I need keyboard accessibility to be at 100%
I really don't understand what's wrong with you people, first you came for the taskbars, now for our tabs. Will you never stop until everything's completely collapsed and hidden several clicks away? WHY?!? I can't believe this stupid trend that's forcing its way into all parts of UI these days. Yes, let's make everything useless because D E S I G N.
Tabs make sense for document viewers. Web browsers are not hypertext documents viewers anymore. They are full-fledged virtual machines for apps (only those that can be written in JS and use typesetting engine as a UI platform - which is nuts, but okay).
The point is, web apps, like normal apps, require proper window manager. Why the hell I should not be able to switch to app when popup alert is shown in another app? Why I can't put two apps side by side inside this VM? Why can't I switch between web apps opened in browser in a similar way as in KDE, Windows or MacOS (Stage Manager type switching would be great).
There so much space for experimentation here. But no, we keep pretending that web apps are documents that need to be shown in tabs.
Is it really a better solution to have a window manager in an app that's already in an OS with its own window manager?
Side-by-side tab tiling is an interesting idea to explore, a lot of IDEs have done that for years. But I don't know about a full-on window manager.
However the always open tabs I work with most of the time work better in full screen mode on my 15" laptop. Sentry, TeamCity, YouTrack, Bitbucket, AWS (more than one tab), Google Cloud Console, the web apps I'm working on. Little space for tiling.
Firefox had this as an addon before Quantum. I used it often, even with a tiling window manager, because the tab tiles didn't have their own toolbars/etc - it saved a lot of space. Its modern replacement isn't very useful, it just arranges multiple windows into tiles, each with their own toolbars/etc.
Now, since basically everything is an Internet app, perhaps the distinction between local and remote isn't too important anymore for most people.
Sounds like the the browser could behave much the same way for me.
TL;DR: I agree.
The app tabs are the ones that profit the least from the hypertext paradigm; other tabs tend to spawn new sub tabs which are more or less short lived. I use tree style tabs to manage that.
It's easy enough to use my actual window manager to manage the app style tabs, by putting them in their own window. But for the most part, this hasn't been necessary. The Firefox popout video player has been more useful than I would have thought, though.
Could you support this with arguments?
Other websites are not app-like at all: Wikipedia articles, blogs like substack, API documentation; these are documents. And they still make up a significant portion of my browsing -- so yes, my browser is still a hypertext viewer. YMMV, like I said, maybe you mostly have apps open; I don't.
And many websites are in-between: project management tools like JIRA and shopping websites like Amazon are document-based (tickets, product pages), but offer actions on top of those documents, like an app would have. They also have external links like, you know, hypertext.
And the latter is true for even the app-iest of apps, which makes it useful to have them in the browser (for the same reason, some desktop apps end up embedding browsers). And conversely, even the document websites have actions that are more or less central to the experience, e.g. Wikipedia has editing, blogs have comments.
So there isn't a clear line between app and document, that's a false dichotomy.
Yes, it's true that sometimes the line between document and app is blurred. But I would argue it's blurred exactly because we use things designed for document to make apps.
Take "links" for example. In web apps, practically every action item is a "link" - either a "<a href=" or <button " that opens another link. But it's not because these things are links - it's because there is no other option to do it without links. If all is you have is a hammer, everything becomes a nail. In a normal app (made in a UI framework designed for that, and not in hypertext engine), instead of links you would use events or function calls or some similar concept.
Likewise, "external" links. You can open external links from normal apps. You don't need to make app a HTML page for that.
So it's not a false dichotomy. If you have ever used desktop/tablet/mobile apps that have blog/comments functionality, you unlikely to think about those screens and functionality "as a document". No, it's just another screen of the app, that renders pixels and handles user input. You only think about it as a document when everything you have is "HTML documents".
On the flipside, I think Whatsapp Web is an app and not a document, even though I know that it's implemented in what was traditionally a document framework.
What I’m trying to say that it’s hard to draw the line between documents and apps if all you have is a tabbed document viewer and you forced to build apps on a document typesetting engine.
I disagree. They still very much fulfill that purpose.
> we keep pretending that web apps are documents that need to be shown in tabs.
Browsers do both web apps and documents (and honestly, blur the lines between them all of the time).
Also, I for one wholeheartedly want tabs for both of those use cases (and I don't think I am by any means alone in wanting that).
There is a thing called web-development, emerged in the last couple of decades. It's whole purpose is to develop apps using this hypertext document rendering engine. You're not wrong by saying that browsers' main job is still rendering HTML documents. But most of the web pages that people use day to day are not "documents", they are apps.
Here are tabs I have open at the moment:
- HN (board app, not a document)
- Soma.fm DefCon radion (music streaming app, not a document)
- Facebook (social network app, not a document)
- Eurosport Player (video player, not a document)
- research paper (PDF, document, but not HTML)
- another forum (board app, not a document)
- Canva (graphics editing app, not a document)
- Miro (whiteboard app, not a document)
What's the forum?
As someone who does web development, and has been doing it for longer than the last couple of decades, that statement seems unnecessarily dismissive.
> But most of the web pages that people use day to day are not "documents", they are apps.
While I would agree that the quantity of web pages people visit today that are 'apps' is substantially larger than it used to be, I do think there are a lot more plain HTML documents in use (particularly in boring corporate environments) than many who frequent HN would think.
Of course, if you are going to call anything that executes a significant amount of Javascript an 'app', I am not sure I'm interested in the argument.
My original response wasn't arguing about what was most common anyway -- you said "Web browsers are not hypertext documents viewers anymore." I was just pointing out that they still do a lot of that (and for things that I would not consider to be an 'app'). Admittedly the line between 'app' and 'document' is a bit fuzzy in some cases, but there are enough cases where (in my mind) it is not fuzzy that I still don't see your original comment as accurate.
(I remember browsers before tabs. It was awful.)