Staś Małolepszy

How to test localizability of Gaia system apps

With HTML5, it's easy to debug Gaia and test ideas for translations using developer tools included in Firefox—right on your desktop. Watch the screencast and see for yourself.

Gaia is a collection of HTML5 apps running ontop of Gecko. These apps are akin to regular websites you visit on the Web every day and they're made using the same technologies: HTML, JavaScript and CSS.

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.

Note: As of August 2012, you'll need Firefox Nightly or Aurora to make the most of Gaia webapps. Beta and Release don't support all the APIs yet. (What are the release channels?)

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.

Script

Here are the notes that you can see me use in the screencast.

How to test the desktop builds

  • Instructions: http://informationisart.com/11
  • DEBUG=1 make profile
  • b2g -profile gaia/profile
  • Home key is the main hardware button
  • Edit a file in Gaia's code and restart to see changes

    e.g., apps/browser/locales/browser.en-US.properties

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

    Tools > Web Developer > Responsive Design View

    Ctrl+Shift+M

  • Homescreen doesn't work for now

  • But, you can try entering other apps' URLs:

    http://browser.gaiamobile.org:8080

    http://calendar.gaiamobile.org:8080

    http://email.gaiamobile.org:8080

    http://dialer.gaiamobile.org:8080

    http://clock.gaiamobile.org:8080

  • Edit a file and reload to see your changes!

    e.g., apps/browser/locales/browser.en-US.properties

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

Discussion

Don't hesitate to ping me (stas on irc.mozilla.org) in #l10n, #gaia or #b2g. For localization-related questions, I encourage you to ask in the mozilla.dev.l10n newsgroup.

Published on 06.08.2012
Permalink: http://informationisart.com/13

Staś Małolepszy

Thoughts about the Internet, the information society, Mozilla and human-computer interactions.

Latest notes