Jordan Santell open web engineer

Tofino

The tabbed web browser model hasn't changed in decades, yet the kind of tasks and activities performed in a browser today looks very different than the 90's. In 2016, we formed a small group inside of Mozilla with the goal of prototyping and exploring what a next-gen web browser looks like. Focusing on fast iterations, web technology, user testing, and new ideas, we created Tofino, an experimental web browser.

Pencil sketches of web browser ideas

Early sketches of Tofino ideas from Mozilla UXR.

Tofino was built on Electron, a desktop application framework that embeds node.js and webviews. Building with Electron rather than Firefox enabled us to experiment quickly with UX and backend services, using modern workflows with React and Redux, and having more control over our stack compared to building on an existing browser. Although we were not experimenting with the web platform, using Electron, which embeds Chrome's JavaScript engine (v8) and rendering engine (Blink), was controversial both inside and outside Mozilla. The underlying rendering and JavaScript engines were irrelevant for our goals, and there were no Mozilla alternatives for Electron that could compete with its features, documentation, and community. Concurrently, Mozilla was very interested in embedding, spinning up the SpiderNode and Positron efforts to explore the feasibility of an Electron-like framework backed by Mozilla's Gecko and SpiderMonkey.

Early navigation in Tofino.

Research

Within a few weeks, Tofino was a functional web browser prototyping UX researchers' experiments. After the initial 3 months, the project's goals changed, becoming less of an experimental product and more of a test bed for user research.

Comparing multiple products within a browser

Scraping microdata for a product comparison view based off of browsing history.

Later that summer, the Tofino project evolved again into researching browser technologies (Browser Futures Group). We learned a lot about building a browser within the Electron application model, designing a user agent service, and researching new ways of storing sync data.

Tofino web browser with several tabs open

Tofino's eventual UI mirrored Firefox's Australis UI as a baseline for research.

Outcome

There are artifacts linked throughout here, but summarizing the biggest takeaways from the project:

Tofino web browser iterating through image filters

Instagram-style filters in Tofino.

Resources

Support #BlackLivesMatterWays you can help