Firefox: Building The Fox

Grab a coffee.. or two

Firefox: an open source project with just under 18 million lines of source code made by 5,220 contributors in 379,660 commits (as of September 2017). Today I witnessed what it takes to build a web browser that caters to half a billion users!

Necessary Preparation

For this blog post, all assumptions are made using a MacOS environment. Incase you, the reader, are curious about the build process for Windows, Linux or another operating system, please check here.

There are various dependencies that need to be downloaded before pulling source code from Mercurial. These include HomeBrew, Python and XCode which luckily didn't take too long (I already had them installed so they just needed updating if anything). Following the build guide on MDN is straightforward and includes the respective commands to execute as well as a bit of troubleshooting should you stray from the light.

Points of Interest

The most interesting thing throughout the build process was the level of autononomy involved. At Seneca, we aren't really shown how to create this huge pipeline to automate the compilation of such a large codebase. I assume that it's self-teachable but watching everything flow down the screen was truly magnificient. I would be very interested in learning how to create such a thing as I'm sure all of us will run into it when we enter the industry.

At the end of 2 hours, I was sitting at my desk wondering "Geeze.. this was a long build process, I wonder if Mozilla has streamlined it internally for their devs?" Well thankfully I had David Humphrey, current professor and Mozillian, to ask via Slack. Here's what he had to say:

"They [devs] have to build locally while they are doing their coding, but there is an automated build infrastructure called the "Try Server" (ironically created by former Seneca students) which builds on every platform and runs tests. Basically every change gets built on Windows, Linux, Android, iOS, Mac and then in different configs (e.g., 64-bit, 32-bit) and with different optimizations, etc."

Furthermore, David linked our Slack channel a very interesting website that tracks Mozilla builds in real-time (amongst others I imagine). You can find it here.

He explained that "every config is listed in a row, and then different machines on the right are doing builds in various configurations. Orange means that some tests failed and red means that something broke. It can be really hard to get your stuff to land, because it can't regress performance tests - there's hundreds of thousands of tests to be ran. In the end, if you don't pass all tests, they "back out" of your change."

Exploring Source Code

The few modifications that we were required to make took place in browser.js and browser.css. While they were fairly straightforward, the effects were glorious. Low and behold: massive tabs, swirling colours, cat gifs and a "So I heard you like Cats" button for opening a New Window:

Brave Languages
Kill it with fire!!!

A few takeaways: 1. Being able to modify a component of Firefox takes mere seconds - who would have thought? 2. Being able to modify and see changes instantly reassures me that the Open Source world isn't as intimidating as it seems - my impacts can be far-reaching 3. Online labs at home rule.