Hacking Firefox

  • Revision slug: Hacking_Firefox
  • Revision title: Hacking Firefox
  • Revision id: 46652
  • Created:
  • Creator: berkerpeksag
  • Is current revision? No
  • Comment one or more formatting changes

Revision Content

If you want to get started on how to hack the Firefox front-end and learn the basics on how to find your way around the UI code, you came to the right place. First things first, the languages that you'll mostly deal with are JavaScript and CSS. You should also know XML as you'll have to deal with XUL (XML User Interface Language). This page is organized as:

  • Downloading the source code
  • Compiling
  • Finding your way through the code
  • How to get help
  • Finding what to work on
  • Hacking the code
  • Learning Bugzilla

Let's get started.

Source code

The Firefox source code lives in a Mercurial repository named mozilla-central. Mercurial is a distributed version control system and it's usually pre-installed with developer tools in Linux and Mac OS, and you can get it with MozillaBuild on Windows (more details in the Compiling section). After you have Mercurial installed, open the terminal and type:

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

This will put the source code inside a folder named mozilla in your current working directory.

Compiling Firefox

Building Firefox might seem a daunting task at first. There are many different configuration options and combinations, but you'll usually not need to worry or know about most of them. If you have installed all the required tools and downloaded the source code, just follow the steps and you should not have major problems to do it. The best guide to start is the Simple Firefox build. A full build is a slow process which make take any time between 20min and 2 hours, depending on your computer and OS. You really need to succesfully build Firefox before continuing on the following steps.

Source code organization

The next problem is "where does the app/front-end code live?". You can navigate and search through the full source code online in MXR, which also makes it easy to link to specific files or lines in the source. The code is organized into various top-level folders. The front-end code lives in browser/ (In your HG tree, it would be mozilla/browser/). For a quick start, the most important files that you probably want to poke around are:

Knowing where to ask for help

#developers and #fx-team on the Mozilla IRC server is a good place to start. People should be able to guide you through the codebase and point you to the right direction. But don't expect everything easy in your hands. Do your research first: look at the code, this wiki and Google. This will give you experience on how to figure more things on your own. Use Mercurial to look at the history of a file, see the comments on the bugs and use the hg blame to see who wrote the code you're interested.

Finding what to work on

There are many ways to find interesting things to work on. One good way is to search Bugzilla for bugs marked as [good first bug]. In addition, the UX team always have lists of new features and improvements wanted for Firefox. Here is a handy list prepared for the Stanford Bootcamp. Other than that, feel free to ask around: there's no shortage of things to work on, and people will point you in the right directions.

Hacking the code

When you're ready to start coding, there are many tools and add-ons to help you. DOM inspector will show you the whole structure of the browser window and allow you to change properties and styles. The Error Console and the Javascript Shell allow you to quickly experiment and execute JS code in the running Firefox instance. Chromebug allows you to debug the code in a similar fashion as Firebug does for webpages.

After you've edited and saved the files, you need to recompile your changes. If all your changes were done in the browser/ folder, you just need to go open the terminal, go to the top-level folder were Firefox was compiled, and type:

make -f client.mk build MOZ_CURRENT_PROJECT=browser

This will be much faster than the initial, full compilation. Note that these rules vary for different parts of the code. 

Bonus: these are two interesting blog posts on the process of working in a Firefox front-end bug.

Learning Bugzilla

After your code is ready, you probably want to get your work included in Firefox itself. Every change to the code needs to have an associated bug in Bugzilla, our tracking system. After you have created a bugzilla account, file a bug in the proper component and attach your changes using a patch file that you can generate through:

hg diff > my-patch

After you do that, you'll request feedback and review from the peers associated with the area of the code that you want changed. Every change in the code needs to be reviewed by a peer. During the review process the reviewer will analyze your changes and might ask for modifications or improvements. After the review is done, someone will check in your code and your work will now be in Firefox! Congratulations!

Revision Source

<p>If you want to get started on how to hack the Firefox front-end and learn the basics on how to find your way around the UI code, you came to the right place. First things first, the languages that you'll mostly deal with are JavaScript and CSS. You should also know XML as you'll have to deal with XUL (XML User Interface Language). This page is organized as:</p>
<ul> <li>Downloading the source code</li> <li>Compiling</li> <li>Finding your way through the code</li> <li>How to get help</li> <li>Finding what to work on</li> <li>Hacking the code</li> <li>Learning Bugzilla</li>
</ul>
<p>Let's get started.</p>
<h3 name="Start_with_the_basics">Source code</h3>
<p>The Firefox source code lives in a Mercurial repository named mozilla-central. Mercurial is a distributed version control system and it's usually pre-installed with developer tools in Linux and Mac OS, and you can get it with MozillaBuild on Windows (more details in the Compiling section). After you have Mercurial installed, open the terminal and type:</p>
<pre>hg clone https://hg.mozilla.org/mozilla-central/ mozilla
</pre>
<p>This will put the source code inside a folder named mozilla in your current working directory.</p>
<h3 name="Build_the_Fox">Compiling Firefox</h3>
<p>Building Firefox might seem a daunting task at first. There are many different configuration options and combinations, but you'll usually not need to worry or know about most of them. If you have installed all the required tools and downloaded the source code, just follow the steps and you should not have major problems to do it. The best guide to start is the <a class="internal" href="/En/Simple_Firefox_build" title="https://developer.mozilla.org/En/Simple_Firefox_build">Simple Firefox build</a>. A full build is a slow process which make take any time between 20min and 2 hours, depending on your computer and OS. You really need to succesfully build Firefox before continuing on the following steps.</p>
<h3 name="Source_code_organization">Source code organization</h3>
<p>The next problem is "where does the app/front-end code live?". You can navigate and search through the full source code online in <a class="external" href="http://mxr.mozilla.org/mozilla-central/" title="http://mxr.mozilla.org/mozilla-central/">MXR</a>, which also makes it easy to link to specific files or lines in the source. The code is organized into various <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/" title="http://mxr.mozilla.org/mozilla-central/source/">top-level folders</a>. The front-end code lives in <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/" title="http://mxr.mozilla.org/mozilla-central/source/browser/">browser/</a> (In your HG tree, it would be <code>mozilla/browser/</code>). For a quick start, the most important files that you probably want to poke around are:</p>
<ul> <li>main front-end code: <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.js">browser.js</a></li> <li>structure: <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xul" title="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.xul">browser.xul</a></li> <li>tabs-related code: <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/tabbrowser.xml" title="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/tabbrowser.xml">tabbrowser.xml</a></li> <li>general appeareance: <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css" title="http://mxr.mozilla.org/mozilla-central/source/browser/base/content/browser.css">browser.css</a></li> <li>OS specific appearance: <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/browser.css" title="http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/browser.css">windows</a> (<a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/browser-aero.css" title="http://mxr.mozilla.org/mozilla-central/source/browser/themes/winstripe/browser/browser-aero.css">2</a>), <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/themes/pinstripe/browser/browser.css" title="http://mxr.mozilla.org/mozilla-central/source/browser/themes/pinstripe/browser/browser.css">mac</a>, <a class="external" href="http://mxr.mozilla.org/mozilla-central/source/browser/themes/gnomestripe/browser/browser.css" title="http://mxr.mozilla.org/mozilla-central/source/browser/themes/gnomestripe/browser/browser.css">linux</a></li>
</ul>
<h3 name="Knowing_where_to_ask_for_help">Knowing where to ask for help</h3>
<p><span class="nowiki">#developers</span> and <span class="nowiki">#fx-team</span> on the <a class="link-irc" href="irc://irc.mozilla.org">Mozilla IRC server</a> is a good place to start. People should be able to guide you through the codebase and point you to the right direction. But don't expect everything easy in your hands. Do your research first: look at the code, this wiki and Google. This will give you experience on how to figure more things on your own. Use Mercurial to look at the history of a file, see the comments on the bugs and use the <em>hg blame</em> to see who wrote the code you're interested.</p>
<h3 name="Text_file_format">Finding what to work on</h3>
<p>There are many ways to find interesting things to work on. One good way is to search Bugzilla for <a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?status_whiteboard_type=allwordssubstr&amp;status_whiteboard=%5Bgood%20first%20bug%5D&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;list_id=314531" title="https://bugzilla.mozilla.org/buglist.cgi?status_whiteboard_type=allwordssubstr&amp;status_whiteboard=[good first bug]&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED&amp;list_id=314531">bugs marked as [good first bug]</a>. In addition, the UX team always have lists of new features and improvements wanted for Firefox. Here is a handy list prepared for the <a class="external" href="http://etherpad.mozilla.com:9000/stanford" title="http://etherpad.mozilla.com:9000/stanford">Stanford Bootcamp</a>. Other than that, feel free to ask around: there's no shortage of things to work on, and people will point you in the right directions.</p>
<h3 name="Picking_bugs_to_work_on">Hacking the code</h3>
<p>When you're ready to start coding, there are many tools and add-ons to help you. <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/" title="https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/">DOM inspector</a> will show you the whole structure of the browser window and allow you to change properties and styles. The <a href="/en/Error_Console" title="https://developer.mozilla.org/en/Error_Console">Error Console</a> and the <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/extension-developer/" title="https://addons.mozilla.org/en-US/firefox/addon/extension-developer/">Javascript Shell</a> allow you to quickly experiment and execute JS code in the running Firefox instance. <a class="external" href="http://getfirebug.com/wiki/index.php/Chromebug" title="http://getfirebug.com/wiki/index.php/Chromebug">Chromebug</a> allows you to debug the code in a similar fashion as Firebug does for webpages.</p>
<p>After you've edited and saved the files, you need to recompile your changes. If all your changes were done in the browser/ folder, you just need to go open the terminal, go to the top-level folder were Firefox was compiled, and type:</p>
<pre>make -f client.mk build MOZ_CURRENT_PROJECT=browser
</pre>
<p>This will be much faster than the initial, full compilation. Note that these rules vary for different parts of the code. </p>
<p>Bonus: these are two interesting <a class="external" href="http://blog.mozilla.com/jorendorff/2011/04/18/how-to-fix-a-bug-episode-434494-part-1/" title="http://blog.mozilla.com/jorendorff/2011/04/18/how-to-fix-a-bug-episode-434494-part-1/">blog</a> <a class="external" href="http://blog.mozilla.com/jorendorff/2011/04/20/how-to-fix-a-bug-episode-434494-part-2/" title="http://blog.mozilla.com/jorendorff/2011/04/20/how-to-fix-a-bug-episode-434494-part-2/">posts</a> on the process of working in a Firefox front-end bug.</p><h3 name="Changing_the_user_experience">Learning Bugzilla</h3>
<p>After your code is ready, you probably want to get your work included in Firefox itself. Every change to the code needs to have an associated bug in Bugzilla, our tracking system. After you have created a bugzilla account, file a bug in the proper component and attach your changes using a patch file that you can generate through:</p>
<pre>hg diff &gt; my-patch
</pre>
<p>After you do that, you'll request feedback and review from the peers associated with the area of the code that you want changed. Every change in the code needs to be reviewed by a peer. During the review process the reviewer will analyze your changes and might ask for modifications or improvements. After the review is done, someone will check in your code and your work will now be in Firefox! Congratulations!</p>
Revert to this revision