And just like other webapps, Gaia can be run in Firefox and tested using Firefox’s developer tools!
This is a gamechanger for localization. You can preview the structure of any Gaia app in the Inspector. You can adjust the size of the viewport with the Responsive Design View. You can live-edit the underlying HTML code using Firebug. And if you change some code or edit a localization file, just reload to see your changes right away.
I recorded a 15-minute-long screencast to show how easy it can be to work on Gaia localization. Using the aproaches that I show in the screencast, you can:
- try out different ideas for translations and see them in context,
- test sizing and make sure all the elements fit in the UI,
- verify the consistency of the verbiage used in the UI,
- compare the interface with the wireframes.
Watch the screencast
Fun fact: while recording the part about looking for potential localizability issues (around the 9:00 mark), I stumbled upon a real localizability bug. I submitted a pull request with a fix, which has since been merged into Gaia’s main codebase.
Here are the notes that you can see me use in the screencast.
How to test the desktop builds
DEBUG=1 make profile
b2g -profile gaia/profile
Homekey is the main hardware button
Edit a file in Gaia’s code and restart to see changes
How to test Gaia in the browser
Can we do away with restarts?
Run Gaia in your Firefox
firefox -profile gaia/profile
Responsive Design View is your friend
Responsive Design View
Homescreen doesn’t work for now
But, you can try entering other apps’ URLs:
Edit a file and reload to see your changes!
How to use the devtools and Firebug with Gaia
- No restarts, no reloads; edit the DOM live
- Use the Inspector and the 3D View to understand the structure
- Use Firebug to edit the DOM live and try different translations
Don’t hesitate to ping me (stas on irc.mozilla.org) in
#b2g. For localization-related questions, I encourage you to ask in the mozilla.dev.l10n newsgroup.