Guided Tour of Flock's Code

Published on 02 May 2006

As a developer, the question I usually ask to myself when I get interested into contributing in an Open Source project is: where do I start from? Flock's source weights several megabytes (40 Mb for the 0.5.x branch), and I understand that it can be impressive for anyone willing to dig into Flock's source. I will try to give an overview of the source code to help the developers interested in our codebase. It's not so hard, after all Flock's source code is separated into several modules of reasonable size.

Prepare your Environment (or not)

First of all, I recommand you to set up a Flock development environement. You should not be afraid of it:
  • At least for Linux and MacOSX, you have only one script to launch to have a working environment
  • The debug build will use a different profile directory (~/.flock/browserdebug instead of ~/.flock/browser) so it will not interfere with your daily usage of Flock
If you prefer to browse the source code before setting up a developer environment, then our Subversion web mirror is for you.


Flock is based on Firefox, itself build using Mozilla. Basically the browser/ directory correspond to Firefox and Flock's specific code, while all the rest of the mozilla/ directory is the platform or other modules. Unless you want to hack the XUL toolkit or the way HTML pages are rendered (Gecko), you don't have to hack any other directory than browser/. If you have a working development environment, you can access the mozilla/ directory using the $m variable (for exemple, "cd $m").

Firefox, and Flock's Specific Codebase

This is the interesting part. So let's go inside browser/, the directory containing most of Firefox and Flock's code. If you go to base/, then content/, you will see browser.xul and browser.js. browser.xul is the main browser's user interface file, while browser.js contains the main Javascript code. Easy, right? This is pure Firefox' code, but it's useful to refer to when you're hacking anything related to Firefox: Firefox itself, an extension... Or Flock. Now let's go (finally!) to Flock's specific codebase. It's located in mozilla/components/flock/. You can access this directory by using the variable $c, for exemple "cd $c". The subdirectories of flock/ correspond to the different modules. You will find a lot of directories, including: For each module, you have up to 4 directories:
  • content: XUL and Javascript files. You can start by working only on these files, most of the work is there.
  • src: XPCOM componement. Usually C++ files, but sometimes Javascript.
  • public: idl files, that are basically interfaces (like .h files) toaccess C++ classes from Javascript.
  • theme or skin: CSS files for the theme. It's a piece of cake to theme XUL windows if you are used to design websites.
So, do you have a better idea of the way Flock's source code is organized? Just start hacking! You can use the fmake command to recompile only from the current directory, and the "flock" command will launch the debug browser. If you have any question, remember that all the team is on to discuss about Flock's developement!

technorati tags: , , , ,

TAGS: flock