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.
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.
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'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:
- The effort of investigating big technical challenges evolved into the Firefox Browser Architecture group.
- The storage experiments evolved into Mentat, a persistent, embedded knowledge base built in Rust. In 2018, work on Mentat was paused due to timelines working with Firefox's data stores.
- Tofino was forked as Photino to prototype Mozilla's Photon UI, released in Firefox 57 as a part of Firefox Quantum.
- The user agent service concept is awesome.
Instagram-style filters in Tofino.
Resources
- Tofino on GitHub
- Mentat on GitHub
- Mozilla Tofino blog
- Nick Alexander: Tofino, data storage, and how we got to Mentat
- Myk Melez: Project Positron
- Ehsan Akhgari: Project SpiderNode
- Richard Newman: Introducing Mentat, a flexible embedded knowledge store
- Nick Alexander: Pausing work on Mentat
- Richard Newman: Different kinds of storage
- Richard Newman: Thinking about Syncing, Part 1: timelines
- Richard Newman: Thinking about Syncing, Part 2: timelines and change
- Richard Newman: Thinking about Syncing, Part 3: separation of concerns
- Richard Newman: Thinking about Syncing, Part 4: keeping track
