17
edits
Changes
DXR -> Searchfox, MDN -> FF source docs, Bugs Ahoy -> Codetribute
This page will explain how to set up a development environment and start looking at the code. It has a walkthrough for you to try making a change to Firefox code on your local machine, so that you can see that change reflected in a copy of the browser.
It may take a few hours to go through this one-time setup. Not because it's particularly hard, but because the download and build can take a while. While the build is happening, you can look at bugs in Bugzilla, or read info for developers new to Mozilla on the Mozilla Developer Network. Build instructions for other Mozilla stuff that isn't desktop Firefox can be found here: [https://developerfirefox-source-docs.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions].
==Good First Bugs==
==Mentored Bugs==
There are also mentored bugs, which may be a little more difficult, but still good for beginners. Currently you can find these in Bugzilla or look for them in [https://wikicodetribute.mozilla.org/BugsAhoy Bugs AhoyCodetribute].
==But first!! Set up an environment==
Download and compile Firefox. The instructions depend on your platform. Here they are:
https://developerfirefox-source-docs.mozilla.org/en-UScontributing/docs/Simple_Firefox_buildcontribution_quickref.html
This might take a while - perhaps a couple of hours.
==Update to the latest build==
HINT: It might be tempting to look at searchbar.css, but that only styles the small input bar where you can quickly access major search enginges. You should look at browser.css, which contains the styling rules for the majority of the Firefox user interface.
===Use DXRSearchfox===
It turns out that browser.css has a lot of rules in it. Let's narrow down the actual rule we want to change.
It's time to use [https://dxr.mozillasearchfox.org/ DXRSearchfox], the Mozilla Cross Reference tool. You can search for "browser.css" and take a look through the results; see if any of the files that show up look like good candidates!
HINT: You can focus on XUL and XML XHTML files, which are used to define Firefox's user interface. Often, CSS files share filenames with the files that they are styling - in this case, browser.xul xhtml looks like a good match.
===Search for keywords===
browser.xul xhtml is a pretty big file, so it's usually best to search for keywords to find relevant parts. In this case, try searching for "tab" and see if you come across anything useful (such as a class or id attribute). If you do, see whether you can find the selector in browser.css.
HINT: In your search, you should come across a <tabs> element that represents the tabs in Firefox's interface. Everything you need can be found there, since it has a <tab> child with a class attribute that is present in browser.css.
