The Early Bird Gets The Bandwidth

A friend of mine introduced me to Firefox in 2007, and ever since, it's been my favourite browser.  At that time, I was using it for doing research for my political science papers.  I never thought I would ever work on the project...until now.

This last week in my Open Source Development course, I was tasked (along with the rest of the class) to work with Firefox Source Code.  To sum it up, my experience wasn't easy.  Here's my story.

I had to create a build environment which was simpler than I expected (it's a huge project!).  

In order to get Firefox to build on your local windows machine, you need to have:

• 64-bit version of Windows 7 or later
• Approximately 40 GB of free space on your hard drive
• Visual Studio 2015 or 2017 (each requires a different configuration setup)
• Rust (a system programming language)
• MozillaBuild package from Mozilla

You can find the step-by-step guide here if you'd like to try it out yourself.  I had to install some dependencies I was missing and luckily for me, I had the bandwidth to do it (hence the title!).  I sat in the library on campus just after 7:30AM.  No one else was really here and the network wasn't bogged down yet, so I decided to start the assignment early.  Now here's where it went downhill for me.

Checking Project Dependencies

Once I downloaded and extracted the MozillaBuild package, I now had to clone the source code using Mozilla's very own version control system, Mercurial.  No problem, its syntax is very similar to Git so no big deal.  I type:

hg clone https://hg.mozilla.org/mozilla-central

into the MozillaBuild start shell, hit the return key, and it starts downloading.  It takes about 45 minutes to complete...or does it?  I look at the console after I see the icon flashing in my toolbar.  With a smile on my face, I open it.  My smile dissipated. 

transaction abort!

I restarted the process and this time, it finished.  Phew, thank goodness.  Following through with the guide, I had to change directories to where the source code was located.  I enter:

mach bootstrap

 and after a second or two, this is what shows up on my screen:

I choose option 2 and all goes well.  Here it is in action:

After I enter option 1, all hell breaks loose and I get stuck on this problem for three days!  I keep receiving an ImportError where DLL's couldn't be loaded.  Here's the error:

If you look closely at this image, all of the files in the stack trace are Python scripts, but at the top of the image, it says that my version of Python is new enough, meaning that Python is being found in my Path and that it should be working.  After countless efforts in Google Searches, I had to ask for help.  One of my classmates, Jay Yin, reached out and I gladly accepted his offer to help me.  We both scratched our heads for a while, wondering why it senses everything is fine, then crashes seconds later.  Eventually, I decided to just uninstall and reinstall my version and try again.  

You guessed it, it worked. I now enter:

mach build

and watch the screen for about 5 minutes and am amazed to see how such a large project compiles and builds.  It was truly a magnificent sight.  I left my machine for a while as the process does take an hour or two. When I got back, I was very happy to see that it worked.  Three days later, and my problem was now solved.

Success!

I'm finally taking a look at the source code, and our professor, David Humphrey, has listed a few changes to make.  I was super-curious to get started and after a few changes in a few JavaScript, CSS, and DTD files, my very own build of Firefox was at my disposal.  Let's take a look.

 So there is my version of Nightly, running locally on my machine.  But it doesn't end there. Check out these GIF's!

I wanted to try something different, so why not adding a GIF in every tab.  Although distracting, I think it's an interesting take on what a browser is and it complements the colour scheme I implemented too.  We were asked to have a certain page load when a new window was opened (which I did), but I thought about having it happen when a new tab was opened too.  I found this function in the source code and made a slight change, noticeable right at the bottom of the image.

You can see it working below:

How awesome is this?  With a few adjustments, you can make something you use everyday ACTUALLY yours.  It is a fully capable browser that I have access to and it is truly amazing to see that I have the power to contribute to such a large project if I would like.

Final Takeaways

I had a meeting with my professor, David Humphrey, the first day I met him after class.  I asked him a simple question: "How can I make a contribution if I don't understand all of the inner workings of a project?"  His response was rather interesting:

You don't need to.

After getting an idea of working on such a large project (even though the changes made were rather silly), I now understand why he said that.  We are taught over and over that object-oriented software development is about breaking problems down into smaller modules and then piecing them together to work as a whole.  I couldn't agree more after seeing the beauty that this browser is.  If you naturally know enough about the problem you are trying to solve, you can dive right in and work on said problem.  Once you solve it, test it. Does it work?  If yes, great! If no, try again.  

We utilized a Slack channel in our classroom where everyone could help one another and ask questions/provide answers and it was really refreshing to see that everyone was really helpful and active in the success of everybody else; the reason why I entered this field in the first place.

Lastly, like the title says, when you start early, you can get a head start.  However, it doesn't mean it'll be any easier for you.  I didn't get the first build, and I'm honestly really happy that I didn't.  I learned a lot more about this process by working through my problems (with the help of a few individuals) and I'm better off because of it.  

I absolutely love open source.