Yesterday when I talked about dealing with CSS fixed elements in Firefox I mentioned that one of the good looking solutions was Martin Tournoij's bookmarklet but that I lacked a good way to get access to bookmarklets because I don't use Firefox bookmarks and so don't have the bookmarks toolbar displayed. Today, after various poking around, I found out how to do this in my setup, which was partly difficult because Firefox sometimes hides one of the title bar and URL bar customization options.

First, what appears on the Firefox Bookmarks toolbar is mostly what's in the special "Bookmarks Toolbar" folder of your bookmarks (Firefox will add an "Other Bookmarks" menu at the end). You can't rename this folder and make a new version with all new contents; instead you have to make a new folder (say "Original Bookmarks Toolbar") and then move your current Bookmarks Toolbar contents to it one by one. This new folder has to go in either "Other Bookmarks" or "Bookmarks Menu". Once you've emptied out the Bookmarks Toolbar special folder, you can add bookmarklets to it and have them be the only thing in the Bookmarks toolbar. This is not particularly useful by itself unless you want an entire line of precious vertical content to always be consumed.

To make bookmarklets into almost buttons, you first should give them very short names (single letters are good). Then, you can add the entire Bookmarks Toolbar to the titlebar area, but it may be a little tricky. You get access to title bar customization by right click → "Customize toolbar...", but the Bookmarks toolbar doesn't appear as a customization element if you have it set to "Never show". Instead you need to set it to "Only show in new tab", at which point it will show up at the top (above "Drag your favorite items into the toolbar or overflow menu"). Now you can drag it to the titlebar, which will make the "Bookmarks Toolbar" entries for your bookmarklets show up in the titlebar once you exit customization and are on regular pages.

The "Bookmarks Toolbar" entries show as both a little globe icon and their title (which is why single letters are good, since they take only a bit of space). As far as I know there's no way to make the globe icon go away, and so bookmarklet buttons always take a bit more space than regular customization icons.

This is probably obvious, but clicking on the bookmarklet will invoke it; it's not a toggle. If you want to revert the effects of a bookmarklet like Martin Tournoij's, you need to refresh the page. With much more effort you could probably write an invertible bookmarklet, but I'm lazy (and also I don't know either Javascript or the modern browser DOM APIs, or for that matter if there's any easy way to go from nicely written out Javascript to something encoded ready to be a bookmarklet).

PS: I am already enjoying my new 'f' bookmarklet to make fixed position elements into regular ones. It's so convenient to just zap all the irritating headers away with a click. Maybe someday it'll have problems with sites that set a strict CSP, but not so far. For sites I visit regularly, I'm going to keep using Stylus styles because then they're applied automatically on the site (assuming the site is one that doesn't change its HTML around all the time).