browser-home

Many years ago, I used to configure my web browser to display a local HTML file as the “homepage.” The local HTML file used icon images, CSS, and JavaScript to provide a simple user interface that made it easy for me to quickly access frequently visited sites. I did not use such a file at work, however, and Firefox eventually provided a way to configure “shortcuts” to sites on the default page that is shown when opening a new browser or tab. While not as nice as my solution, “Firefox Home” was good enough that I decided to not bother with setting up my local HTML file when I upgraded my computer one time.

I have been using “Firefox Home” for many years, both at home and at work. There was a significant issue with it, however. It would automatically access sites in order to update the icons that are displayed! I do not want such functionality, especially when I am tethered to my phone and have limited bandwidth. Such behavior also leaks information about what sites you have configured when connected to a non-trusted network. For these reasons, I have been planning on switching back to a custom solution.

At the beginning of this month, Mozilla released Firefox 89. It is probably one of the most hated releases ever, thanks to changes to the tab UI that make it difficult to quickly determine which tab is selected. (With Chrome becoming an ever greater threat to privacy, Firefox is in a position to “win back” many users, and I think it is unfortunate that Mozilla is ruining the opportunity through amazingly poor decisions. I wrote more than half a blog entry about the details, actually, but I deleted it because it was a bit depressing and had an “old man yells at cloud” feel.)

In that same release, Firefox made some changes to Firefox Home. It looks like they actually may have fixed the automatic access issue! The icons are now the icons configured in the linked page or simple icons that show the first character of the icon label. Without monitoring network traffic, however, I am not sure if the problem is resolved, as it is possible that the browser still automatically accesses the page to check for icon updates.

I have not bothered to investigate because another change is worse. The page includes a search field, which I used quite often before the change. After the change, typing into the search field no longer works. When you start typing, the focus is switched to the address bar! This results in terrible usability. My address bar is configured to provide auto-completion using my bookmarks, which gives me quick access to bookmarks without having to search through menus. When I use a search engine, I do not want to auto-complete using my bookmarks. With the new behavior, I frequently make mistakes and load bookmarks instead of performing searches, hurting focus and productivity.

To stop using “Firefox Home” ASAP, I started implementing a new local HTML file to use instead. I finished the initial implementation this morning, though I still need to prepare some nice icons for it. The initial implementation is simply called browser-home, and it uses raw JavaScript and CSS that is only tested in my browser. It is a quick solution, and I do not know if I will make a version for release or not.

The UI of browser-home is very similar to that of the old implementation that I used many years ago. The page has a number of “screens,” of which only one is displayed at a time. (It is like a tabbed interface, but it feels more like virtual desktops on Linux.) Each screen has a theme and an associated letter key. For example, my “Haskell” screen is associated with the h key. Changing screens can be done by simply pressing the associated key or using the mouse to press a button. There is a button for each screen, labeled with the associated letter, that is displayed in a row like the UI for changing virtual desktops.

Each screen has icons and search fields. To make every screen consistent, each screen has the same number of icons and search fields, but there are “disabled” placeholders to take up space on screens that do not have enough icons or search fields. My current configuration shows a single row of six icons above two search fields. Icons can be selected using a number key (1 for the first icon, etc.), using the tab and enter keys, or by using the mouse. The first search field can be focused by pressing the 0 key or using the mouse.

Icons can be loaded from an image or created automatically. Selecting an icon navigates the browser to the linked URL. The browser-home page is not kept in the (back button) history, fixing another annoyance of Firefox Home.

Here are two examples of usage, without being slowed down by the mouse:

• Perform a search
  1. Press Ctrl+T to open a new tab.
  2. Press 0 to focus the first search field. In my configuration, my default screen is the “frequent” (f) screen, and the first search field is for searching DuckDuckGo.
  3. Type the search query and press the enter key.
• Navigate to Hackage
  1. Press Ctrl+T to open a new tab.
  2. Press h to switch to the “Haskell” screen.
  3. Press 2 to activate the second icon, linking to Hackage.

The current version is hand-coded. If I can find the time, I would like to create software that writes the HTML and CSS based on configuration (perhaps in YAML format), as well as use a (better) language that compiles to JavaScript instead of using JavaScript directly. If there is interest in this kind of project, let me know.