Merge pull request #16966 from wilsonpage/bug/976203

Bug 976203 - [Camera] Localization (l10n) missing from settings UI

apps/camera/js/app.js

@@ -15,7 +15,6 @@ var broadcast = require('lib/broadcast');
 var bindAll = require('lib/bind-all');
 var model = require('vendor/model');
 var debug = require('debug')('app');
-var LazyL10n = require('LazyL10n');
 var HudView = require('views/hud');
 var bind = require('lib/bind');
 var dcf = require('lib/dcf');
@@ -78,6 +77,7 @@ App.prototype.boot = function() {
   this.injectViews();
   this.bindEvents();
   this.miscStuff();
+  this.l10n();
   this.emit('boot');
   debug('booted');
 };
@@ -137,7 +137,6 @@ App.prototype.bindEvents = function() {
   bind(this.doc, 'visibilitychange', this.onVisibilityChange);
   bind(this.win, 'beforeunload', this.onBeforeUnload);
   bind(this.el, 'click', this.onClick);
-  //this.on('change', this.onStateChange);
   this.on('focus', this.onFocus);
   this.on('blur', this.onBlur);
   debug('events bound');
@@ -224,6 +223,23 @@ App.prototype.onBeforeUnload = function() {
   debug('beforeunload');
 };
 
+/**
+ * Initialize l10n 'localized' listener.
+ *
+ * Sometimes it may have completed
+ * before we reach this point, meaning
+ * we will have missed the 'localized'
+ * event. In this case, we emit the
+ * 'localized' event manually.
+ *
+ * @private
+ */
+App.prototype.l10n = function() {
+  var complete = navigator.mozL10n.readyState === 'complete';
+  bind(this.win, 'localized', this.firer('localized'));
+  if (complete) { this.emit('localized'); }
+};
+
 /**
  * Miscalaneous tasks to be
  * run when the app first
@@ -253,25 +269,13 @@ App.prototype.miscStuff = function() {
   });
 
 
-  if (!navigator.mozCameras) {
-    // TODO: Need to clarify what we
-    // should do in this condition.
-  }
-
+  dcf.init();
   performanceTesting.dispatch('initialising-camera-preview');
 
   // Prevent the phone
   // from going to sleep.
   lockscreen.disableTimeout();
 
-  // This must be tidied, but the
-  // important thing is it's out
-  // of camera.js
-  LazyL10n.get(function() {
-    dcf.init();
-    performanceTesting.dispatch('startup-path-done');
-  });
-
   // The screen wakelock should be on
   // at all times except when the
   // filmstrip preview is shown.

apps/camera/js/config/app.js

@@ -34,31 +34,30 @@ module.exports = {
   },
 
   pictureSizesFront: {
-    title: 'Camera Resolution',
     icon: 'icon-picture-size',
     maxPixelSize: window.CONFIG_MAX_IMAGE_PIXEL_SIZE,
     options: [
       // {
       //   key: '2048x1536'
       // }
     ],
-    persistent: true
+    persistent: true,
+    l10n: { title: 'camera-resolution' }
   },
 
   pictureSizesBack: {
-    title: 'Camera Resolution',
     icon: 'icon-picture-size',
     maxPixelSize: window.CONFIG_MAX_IMAGE_PIXEL_SIZE,
     options: [
       // {
       //   key: '2048x1536'
       // }
     ],
-    persistent: true
+    persistent: true,
+    l10n: { title: 'camera-resolution' }
   },
 
   recorderProfilesBack: {
-    title: 'Video Resolution',
     icon: 'icon-video-size',
     options: [
 
@@ -82,11 +81,11 @@ module.exports = {
         title: 'QCIF 176X144'
       }
     ],
-    persistent: true
+    persistent: true,
+    l10n: { title: 'video-resolution' }
   },
 
   recorderProfilesFront: {
-    title: 'Video Resolution',
     icon: 'icon-video-size',
     options: [
 
@@ -110,50 +109,48 @@ module.exports = {
         title: 'QCIF 176X144'
       }
     ],
-    persistent: true
+    persistent: true,
+    l10n: { title: 'video-resolution' }
   },
 
   flashModesPicture: {
-    title: 'Picture Flash',
     options: [
       {
         key: 'auto',
-        title: 'Auto',
-        icon: 'icon-flash-auto'
+        icon: 'icon-flash-auto',
+        l10n: { title: 'auto' }
       },
       {
         key: 'on',
-        title: 'On',
-        icon: 'icon-flash-on'
+        icon: 'icon-flash-on',
+        l10n: { title: 'on' }
       },
       {
         key: 'off',
-        title: 'Off',
-        icon: 'icon-flash-off'
+        icon: 'icon-flash-off',
+        l10n: { title: 'off' }
       }
     ],
     persistent: true
   },
 
   flashModesVideo: {
-    title: 'Video Flash',
     options: [
       {
-        key: 'torch',
-        title: 'On',
-        icon: 'icon-flash-on'
+        key: 'off',
+        icon: 'icon-flash-off',
+        l10n: { title: 'off' }
       },
       {
-        key: 'off',
-        title: 'Off',
-        icon: 'icon-flash-off'
+        key: 'torch',
+        icon: 'icon-flash-on',
+        l10n: { title: 'on' }
       }
     ],
     persistent: true
   },
 
   timer: {
-    title: 'Self Timer',
     icon: 'icon-self-timer',
     options: [
       {
@@ -163,48 +160,41 @@ module.exports = {
       },
       {
         key: '3secs',
-        title: '3 Seconds',
-        value: 3
+        value: 3,
+        l10n: { title: '3-seconds' }
       },
       {
         key: '5secs',
-        title: '5 Seconds',
-        value: 5
+        value: 5,
+        l10n: { title: '5-seconds' }
       },
       {
         key: '10secs',
-        title: '10 Seconds',
-        value: 10
+        value: 10,
+        l10n: { title: '10-seconds' }
       }
     ],
-    persistent: false
+    persistent: false,
+    l10n: { title: 'self-timer' }
   },
 
   hdr: {
     title: 'HDR',
     icon: 'icon-hdr',
     options: [
       {
-        key: 'auto',
-        title: 'Auto',
-        icon: 'A'
+        key: 'off',
+        l10n: { title: 'off' }
       },
       {
         key: 'on',
-        title: 'On',
-        icon: 'O'
-      },
-      {
-        key: 'off',
-        title: 'Off',
-        icon: 'O'
+        l10n: { title: 'on' }
       }
     ],
     persistent: true
   },
 
   scene: {
-    title: 'Scene Mode',
     icon: 'icon-scene',
     options: [
       {
@@ -220,24 +210,25 @@ module.exports = {
         title: 'Beauty'
       }
     ],
-    persistent: true
+    persistent: true,
+    l10n: { title: 'scene-mode' }
   },
 
   grid: {
-    title: 'Grid',
     icon: 'icon-frame-grid',
     options: [
       {
         key: 'on',
-        title: 'On'
+        l10n: { title: 'on' }
       },
       {
         key: 'off',
-        title: 'Off'
+        l10n: { title: 'off' }
       }
     ],
     selected: 'off',
-    persistent: true
+    persistent: true,
+    l10n: { title: 'grid' }
   },
 
   settingsMenu: {

apps/camera/js/config/require.js

@@ -1,8 +1,7 @@
 require.config({
   baseUrl: '/js',
   paths: {
-    'LazyL10n': '../shared/js/lazy_l10n',
-    'LazyLoader': '../shared/js/lazy_loader',
+    'l10n': '../shared/js/l10n',
     'asyncStorage': '../shared/js/async_storage',
     'getVideoRotation': '../shared/js/media/get_video_rotation',
     'performanceTesting': '../shared/js/performance_testing_helper',
@@ -18,10 +17,6 @@ require.config({
     'format': {
       exports: 'Format'
     },
-    'LazyL10n': {
-      deps: ['LazyLoader'],
-      exports: 'LazyL10n'
-    },
     'getVideoRotation': {
       deps: ['BlobView'],
       exports: 'getVideoRotation'
@@ -33,9 +28,6 @@ require.config({
     'BlobView': {
       exports: 'BlobView'
     },
-    'LazyLoader': {
-      exports: 'LazyLoader'
-    },
     'asyncStorage': {
       exports: 'asyncStorage'
     },

apps/camera/js/controllers/settings.js

@@ -45,6 +45,7 @@ SettingsController.prototype.configure = function() {
 SettingsController.prototype.bindEvents = function() {
   this.app.on('change:capabilities', this.onCapabilitiesChange);
   this.app.on('settings:toggle', this.toggleSettings);
+  this.app.on('localized', this.settings.localize);
 };
 
 /**
@@ -183,7 +184,6 @@ SettingsController.prototype.matchesCondition = function(item) {
   return !item.condition || test(item.condition);
 };
 
-
 /**
  * Settings aliases provide
  * convenient pointers to
@@ -229,6 +229,7 @@ var formatters = {
   pictureSizes: function(options) {
     var getMP = function(w, h) { return Math.round((w * h) / 1000000); };
     var maxPixelSize = this.get('maxPixelSize');
+    var MP = navigator.mozL10n.get('mp');
     var normalized = [];
 
     options.forEach(function(option) {
@@ -244,11 +245,11 @@ var formatters = {
       option.aspect = getAspect(w, h);
       option.mp = getMP(w, h);
 
-      var mp = option.mp ? option.mp + 'MP ' : '';
+      var mp = option.mp ? option.mp + MP + ' ' : '';
 
       normalized.push({
         key: w + 'x' + h,
-        title: mp + w + 'x' + h + ' ' + option.aspect,
+        title: mp + w + '×' + h + ' ' + option.aspect,
         data: option
       });
     });

apps/camera/js/lib/setting.js

@@ -31,12 +31,11 @@ function Setting(data) {
   this.configure(data);
   this.reset(data, { silent: true });
   this.updateSelected({ silent: true });
-
-  // Bind context
   this.isValidOption = this.isValidOption.bind(this);
   this.inflateOption = this.inflateOption.bind(this);
   this.select = this.select.bind(this);
   this.next = this.next.bind(this);
+  this.mozL10n = data.mozL10n; // Testing hook
 }
 
 Setting.prototype.configure = function(data) {
@@ -340,6 +339,35 @@ Setting.prototype.fetch = function() {
   if (this.fetched) { this.select(this.fetched, { silent: true }); }
 };
 
+/**
+ * Localize self and options objects
+ *
+ * @public
+ */
+Setting.prototype.localize = function() {
+  var options = this.get('options');
+  this.localizeObject(this._data);
+  options.forEach(this.localizeObject, this);
+  this.fire('change');
+};
+
+/**
+ * Adds localized keys from a
+ * defined `l10n` object map.
+ *
+ * @param  {Object} object
+ * @private
+ */
+Setting.prototype.localizeObject = function(object) {
+  var l10n = this.mozL10n || navigator.mozL10n;
+  var keys = object.l10n;
+  if (keys) {
+    each(keys, function(value, key) {
+      object[key] = l10n.get(value);
+    });
+  }
+};
+
 /**
  * Loops arrays or objects.
  *