Let's Mod: Firefox For Desktop

Let's Mod: Firefox For Desktop

How to setup the environment and build your first version of a Firefox-based browser

In this edition of the "Let's Mod" series, we are going to be talking about Firefox, a browser built by the Mozilla foundation which also happens to quite popular among privacy and security advocates. An interesting fact about the topic is that Firefox happens to be one of the last standing browsers in today market which is still based on Chromium.

As you people already know I'm also working on Chromium for Android which has been discussed in the first edition of this article set, but I observed some notable differences with Firefox when compared to chromium. We'll discuss this in detail in further episodes. Just a heads up for you React developers out there, you may end up liking Firefox more than Chromium when start experimenting around with the browser. Having said that, let's start with setting up the initial environment and pulling the code to build our very own Firefox browser.

Pre-Requisites

  • At least 50GB of spare storage
  • At least 8GB RAM
  • Git and Python pre-installed
  • 4 cores 4 threaded CPU is a minimum (an 8 core 16 thread is ideal for any light mod works as this can significantly reduce your build times, hence giving you a bigger headroom for errors)
  • Homebrew (If you are on a Mac)
  • XCode (If you are on a Mac, if not installed use the below commands to install it):
    sudo xcode-select --switch /Applications/Xcode.app
    sudo xcodebuild -license
    

Installing Mercurial

  • First things first, let's install Mercurial on our consoles; Mercurial is the Version Control System (VCS) that Firefox uses. You will need Mercurial to pull new codes and push your updates as well. Additionally, we’ll place user-wide python package installations on the $PATH , so that both hg and moz-phab are easily accessible. Refer to the code given below:
echo "export PATH=\"$(python3 -m site --user-base)/bin:$PATH\"" >> ~/.zshenv
python3 -m pip install --user mercurial
  • Now restart your shell for your new PATH variable to get loaded in. Once you shell restarts, you can check your Mercurial version be entering the code snippet given below on your consoles:
hg version

Note that if you’re using a shell other than zsh, you’ll need to manually add Python’s bin directory to your PATH as your shell probably won’t pick up the changes made in ~/.zshenv.

Bootstarping a copy of the Firefox's code

Now that all required dependencies have been set up, we can go ahead and download the source code and have Firefox automatically download the other dependencies it needs. The below command will download a lot of data (years of Firefox history!) and guide you through the interactive setup process:

curl https://hg.mozilla.org/mozilla-central/raw-file/default/python/mozboot/bin/bootstrap.py -O
python3 bootstrap.py

Although Firefox's preferred VCS is mercurial you can get the code from Git as well. Refer to the code given below.

python3 bootstrap.py --vcs=git

Refer to this link to know more about Git Cinnabar.

Choosing build types

Firefox can be built in 2 modes.

  • Full Build - Full build will basically compile all the required C++ components on your local machine. This becomes extremely useful when you are modding some backend functionality for your browser. For example, let's say you want to add a fully blown ad blocker into the browser at the network level, then you can fiddle with the installed C++ components for a full build

  • Artifact Build - Now Artifact builds are faster builds that you can implement wherein you will be downloading the compiled C++ compiled components and compiling Frontend components on your device. This is extremely useful when you are just doing some look and feel changes to the browser and making your browser your own. It provides for great balance and much faster build times albeit with a bit of compromise on bandwidth.

To set your build to artifact mode, add these lines to you mozconfig file:

# Automatically download and use compiled C++ components:
ac_add_options --enable-artifact-builds

# Write build artifacts to:
mk_add_options MOZ_OBJDIR=./objdir-frontend

To automatically download and use the debug version of the pre-built binary artifact (currently supported by Linux, OSX and Windows artifacts), add ac_add_options --enable-debug to your mozconfig file (with artifact builds option already enabled) as shown below:

# Enable debug versions of the pre-built binary artifacts:
ac_add_options --enable-debug

# Automatically download and use compiled C++ components:
ac_add_options --enable-artifact-builds

# Download debug info so that stack traces refers to file and columns rather than library and Hex address
ac_add_options --enable-artifact-build-symbols

# Write build artifacts to:
mk_add_options MOZ_OBJDIR=./objdir-frontend-debug-artifact

Finally, enter the following code in your console:

rm bootstrap.py
cd mozilla-unified
./mach build
./mach run

Conclusion

If you've following the steps given above, you should now have your own version of Firefox up and running! To only rebuild local changes (to avoid re-checking for pushes and/or unzipping the downloaded cached artifacts after local commits), you can use:

./mach build faster

With that, I want to tell what a great ton of fun it has been working with the Mozilla Community. I started off as Student Ambassador with the community and ended up starting a Firefox club in my college. Its been a really great journey and I'd love to take you through it further instalments of this series..

I would love if you people who are following me through this series join me on Matrix. You can find many opportunities to do your first codetribution here.

With that I sign off for this episode! Stay tuned for news on upcoming modifications.