- 1 Bug Tracking and Repositories
- 2 Getting started with Firefox Desktop and Standalone development
- 2.1 Additional Requirements
- 2.2 Standalone server - Link-clicker UI and unit test development
- 2.3 Developing
- 2.4 Linting
- 2.5 UI-showcase
- 2.6 Running Tests
- 3 Creating Patches
Bug Tracking and Repositories
Need Help, want to discuss with Loop developers?
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?
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.
Loop is contained across two repositories:
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
A lot of the content files use a Flux based architecture, read more about that here.
Getting started with Firefox Desktop and Standalone development
For Loop development, there's currently a couple of extra requirements on top of the Firefox desktop build requirements.
These are NodeJS (note, though, that you MUST currently use an old version, 0.10), react-tools and eslint.Note that when building Firefox itself, be sure to set
ac_add_options --enable-optimizein your mozconfig to avoid problems with automated tests timing out.
Install NodeJS 0.10 first, then follow the instructions below
Mac installation of node 0.10
brew install homebrew/versions/node010
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:
- In your APPDATA, you'll need to replace various parts, so:
- Now setup your profile file, replace the
<path to APPDATA>with the path you just worked out.
echo PATH=$PATH:/c/Program\ Files/nodejs:<path to APPDATA>/npm >> ~/.profile
- Now exit your shell/console and re-enter it.
- Complete the steps in the "All Platforms" section
If you need to change the path later, you can edit the ~/.profile file.
Once you have Node installed, use npm (which comes with it) to globally install the extra required items:
npm install -g email@example.com npm install -g eslint npm install -g eslint-plugin-react
Standalone server - Link-clicker UI and unit test development
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.
Visiting test pages
To view the unit tests visit:
To view the UI-showcase, visit:
Testing out changes to the standalone UI
The standalone part of Loop (also known as the link-clicker UI) can be viewed in any web browser, and is hosted on a server. You can hook the development server up to talk to one of the servers to be able to test changes to the standalone UI.
To do this, setup the standalone server as described above, then rather than a simple
make runserver, do:
LOOP_SERVER_URL=https://path/to/server make runserver
Replace the server path with one of:
- Development server: https://loop-dev.stage.mozaws.net
- Production server: https://loop.services.mozilla.com
(Generally its better to use the development server than the production one to avoid affecting the stats of production usage).
For the desktop side (also known as the link-generator):
- You may wish to create a new profile for testing purposes (since changing the pref below will loose your previously created conversations), e.g:
/path/to/firefox -createProfile myTestProfile ./mach run -P myTestProfile -purgecaches
- Visit about:config, change the
loop.serverpreference to be
- Restart Firefox after changing the pref
- From the Hello panel, select "Start a conversation"
- Copy the url, and paste it into a browser window, but change the url
You should now be able to join the room with that instance.
You can start up the jsx compiler so that it watches the files and continuously updates them whilst the jsx is left running:
cd browser/components/loop ./build-jsx -w
To stop watching files and quit jsx, just use
Note: Note: On windows, build-jsx doesn't currently do the version check for the react version, so please keep an eye on the suggested version in case it is updated.
We use eslint to parse the Loop files and check them for correctness before landing.
See the README.txt for how to run it.
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.
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
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.