Loop/Development: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
mNo edit summary
(npm comes with node these days, and we currently can't use the latest react-tools, so we have to specifiy a version.)
Line 47: Line 47:
For Loop development, there's currently a couple of extra requirements on top of the [https://developer.mozilla.org/en-US/docs/Simple_Firefox_build#Build_prerequisites Firefox desktop build requirements].
For Loop development, there's currently a couple of extra requirements on top of the [https://developer.mozilla.org/en-US/docs/Simple_Firefox_build#Build_prerequisites Firefox desktop build requirements].


These are npm and react-tools, which both require an up-to-date version of [https://nodejs.org/ NodeJS]
These are [https://nodejs.org/ NodeJS] and react-tools, a package for Node.


Make sure you have npm installed:
Once you have Node installed, use npm (which comes with it) to react:


brew install npm
  npm install -g react-tools@0.12.2
 
and install react:
 
  npm install -g react-tools


=== Unit test and ui-showcase tools ===
=== Unit test and ui-showcase tools ===

Revision as of 18:25, 1 April 2015

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:

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 and react-tools, a package for Node.

Once you have Node installed, use npm (which comes with it) to react:

npm install -g react-tools@0.12.2

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. Running:

cd browser/components/loop
./build-jsx

will generate the js versions of the file. Even better you can use:

./build-jsx -w

to keep watching the jsx files and updating them as the change.

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.