Loop/Development

Bug Tracking and Repositories

Tracking

Bugs are stored in bugzilla:

• Desktop & Standalone (aka 'link generator' and 'link clicker', respectively): 'Loop' product, 'Client' component
• Server: 'Loop' product, 'Server' component

Looking for bugs?

Try one of the good first bugs (simple bugs that are easy to fix) or a good next bug.

There's also mentored bugs where are developers have signed up to help you fix the bugs. Most of these will be in the good first and next bug groups above.

Or if not, take a look at our ranked priority list and choose one from there.

Repositories

Loop is contained across several repositories:

• Master repository for Desktop and Standalone UI: mozilla-central (there's a git mirror of it as well)
• Loop server

Directories

All files, apart from desktop locales are in mozilla-central, under browser/components/loop/. Within that directory there is:

• *.jsm - Various modules used within Firefox desktop
• build-jsx used to build the required jsx files
• content/ - These files are all used on the desktop for the Loop panel and conversation window. They are loaded into content space rather than chrome
• content/shared - Used for Firefox desktop, but also used for the standalone UI
• standalone/ - Files used by the standalone application, including commands to make and run a standalone server (see below)
• standalone/content - The content files for the standalone application
• ui/ - A UI showcase, used to aid development and layout of styles for the various parts of the UI

A small bit of integration code with Firefox can be found in browser-loop.js.

Loop Software Architecture

More details on the structure coming soon. We have parts of Loop that run in a web-content space (those typically below a content directory), and other parts that work in a gecko privileged space (these are typically in the root directory of browser/components/loop).

A lot of the content files use a Flux based architecture, read more about that here.

Getting started with Firefox Desktop and Standalone development

Additional Requirements

For Loop development, there's currently a couple of extra requirements on top of the Firefox desktop build requirements.

These are NodeJS, react-tools and eslint.

Install NodeJS first, then follow the instructions below.

Windows Specific

There's a little bit more set-up required specific to Windows.

• Start up the mozilla-build shell via one of the start-shell-msvc*.bat files
• Work out your APPDATA path:

echo $APPDATA

• In your APPDATA, you'll need to replace various parts, so:

c:\Users\moztest\AppData\Roaming

becomes:

/c/Users/moztest/AppData/Roaming

• Now setup your profile file, replace the <path to APPDATA> with the path you just worked out.

echo $PATH:/c/Program\ Files/nodejs:<path to APPDATA>/npm

• Now exit your shell/console and re-enter it.
• Complete the steps in the "All Platforms" section

All Platforms

Once you have Node installed, use npm (which comes with it) to globally install the extra required items:

npm install -g react-tools@0.12.2
npm install -g eslint
npm install -g eslint-plugin-react

Unit test and ui-showcase tools

We have a server that helps running the unit tests manually, there's also the ui-showcase which helps with previewing layouts before starting Firefox.

cd browser/components/loop/standalone
make install
make runserver

You only need to do make runserver on subsequent runs. Although make install may be required occasionally if dependencies get updated.

Developing

If you're altering any of the javascript files, you need to make sure you alter the jsx versions if they exist.

You can start up the jsx compiler so that it watches the files and continuously updates them whilst the jsx is left running:

On Mac and Linux:

cd browser/components/loop
./build-jsx -w

On Windows (build-jsx doesn't currently work on windows):

cd browser/components/loop
jsx -w -x jsx . .

To stop watching files and quit jsx, just use ctrl-c

Linting

We use eslint to parse the Loop files and check them for correctness before landing.

See the README.txt for how to run it.

UI-showcase

If you've got the standalone server running, you can view this by visiting http://localhost:3000/ui/ . This lets you layout the content pages (the parts displayed in the panel and conversation view) in a web context before loading and testing them in Firefox itself.

This can save you a considerable amount of time, because you don't have to (re-)build each time you made a change to see what effect it had.

Running Tests

There's a file located at browser/components/loop/run-all-loop-tests.sh which allows all loop related tests to be run at the same time.

For information on running the tests individually, see the README.txt file.

Creating Patches

Creating patches happens in exactly the same manner as for the rest of Firefox. See our documentation on the Mozilla Developer Network for how to create and submit a patch.