Confirm
2,816
edits
Changes
Created page with "==Would you like to fix a Firefox bug?== 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 mak..."
==Would you like to fix a Firefox bug?==
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.
==Good First Bugs==
You can find good first bugs in bugzilla.mozilla.org, that have been tagged "good first bug" in the whiteboard field.
==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 Bugs Ahoy.
==Set up an environment==
Download and compile Firefox. The instructions depend on your platform.
https://developer.mozilla.org/en-US/docs/Simple_Firefox_build
==Update to the latest build==
Before you tackle your first bug, here is a walkthrough of what you can do to set up for Firefox coding.
Let's download the source code for Firefox.
Run hg clone https://hg.mozilla.org/mozilla-central to get it. This is going to take a while.
Time to build Firefox.
Go to the new mozilla-central directory, and run ./mach build. This is going to take a very long time.
Let's make sure it works!
Run ./mach run -P blank. If the profile manager dialog appears, create a new profile named blank and continue starting Firefox.
==Code change walkthrough: Turn your tabs green==
===Find the right files===
The important thing to know about this mission is that Firefox's stylesheets are stored in browser/themes/ and toolkit/themes/. The first path is for Firefox-specific theming, while the second is for theming shared by all Gecko-based applications (such as Thunderbird).
See if you can find the right stylesheet to change under browser/themes/. There are different themes for each major platform (Windows, OS X, and Linux), so make sure you look in the correct subdirectory (ie. browser/themes/linux/ if you're using Linux).
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 MXR===
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 MXR, 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 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 looks like a good match.
===Search for keywords===
browser.xul 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.
===Change the code and rebuild===
Now that you have a selector to change in browser.css, all that remains is to make your changes and rebuild Firefox. You can perform a full build (./mach build), but in this case it is much faster to just rebuild browser/, like so:
./mach build browser/
When this is finished, run the local Firefox build and see whether your changes worked!
==Halp!==
If this didn't work:
Please visit #introduction on irc.mozilla.org and explain the problem you're having.
''hat tip to http://www.joshmatthews.net/trainingmontage/''
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.
==Good First Bugs==
You can find good first bugs in bugzilla.mozilla.org, that have been tagged "good first bug" in the whiteboard field.
==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 Bugs Ahoy.
==Set up an environment==
Download and compile Firefox. The instructions depend on your platform.
https://developer.mozilla.org/en-US/docs/Simple_Firefox_build
==Update to the latest build==
Before you tackle your first bug, here is a walkthrough of what you can do to set up for Firefox coding.
Let's download the source code for Firefox.
Run hg clone https://hg.mozilla.org/mozilla-central to get it. This is going to take a while.
Time to build Firefox.
Go to the new mozilla-central directory, and run ./mach build. This is going to take a very long time.
Let's make sure it works!
Run ./mach run -P blank. If the profile manager dialog appears, create a new profile named blank and continue starting Firefox.
==Code change walkthrough: Turn your tabs green==
===Find the right files===
The important thing to know about this mission is that Firefox's stylesheets are stored in browser/themes/ and toolkit/themes/. The first path is for Firefox-specific theming, while the second is for theming shared by all Gecko-based applications (such as Thunderbird).
See if you can find the right stylesheet to change under browser/themes/. There are different themes for each major platform (Windows, OS X, and Linux), so make sure you look in the correct subdirectory (ie. browser/themes/linux/ if you're using Linux).
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 MXR===
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 MXR, 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 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 looks like a good match.
===Search for keywords===
browser.xul 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.
===Change the code and rebuild===
Now that you have a selector to change in browser.css, all that remains is to make your changes and rebuild Firefox. You can perform a full build (./mach build), but in this case it is much faster to just rebuild browser/, like so:
./mach build browser/
When this is finished, run the local Firefox build and see whether your changes worked!
==Halp!==
If this didn't work:
Please visit #introduction on irc.mozilla.org and explain the problem you're having.
''hat tip to http://www.joshmatthews.net/trainingmontage/''
