Bug 1207044 - Refactor L10n/Intl in Clock to prepare for NGA

mozilla-b2g · Sep 23, 2015 · 8d25446 · 8d25446
1 parent aad942e
commit 8d25446
Show file tree

Hide file tree

Showing 21 changed files with 263 additions and 212 deletions.
diff --git a/apps/clock/index.html b/apps/clock/index.html
@@ -20,6 +20,17 @@
 
     <link rel="stylesheet" type="text/css" href="style/hacks.css">
 
+    <!-- Localization -->
+    <meta name="defaultLanguage" content="en-US">
+    <meta name="availableLanguages" content="en-US">
+    <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
+    <link rel="localization" href="locales/clock.{locale}.properties">
+    <link rel="localization" href="locales/alarms.{locale}.properties">
+    <script defer src="/shared/js/l10n.js"></script>
+    <script defer src="/shared/js/l10n_date.js"></script>
+    <script defer src="/shared/js/date_time_helper.js"></script>
+    <script defer src="/shared/js/moz_intl.js"></script>
+
     <!-- These are lazy loaded. Need to be included here so the build picks them up
     <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css" >
     <link rel="stylesheet" type="text/css" href="shared/style/buttons.css" >
@@ -29,8 +40,6 @@
       The following scripts are lazy loaded but left here to ensure
       they get copied over from shared during the build
     -->
-    <!-- <script defer src="/shared/js/l10n.js"></script> -->
-    <!-- <script defer src="/shared/js/l10n_date.js"></script> -->
     <!-- <script defer src="/shared/js/async_storage.js"></script> -->
     <!-- <script defer src="/shared/js/gesture_detector.js"></script> -->
     <!-- <script defer src="/shared/js/accessibility_helper.js"></script> -->
@@ -46,14 +55,6 @@
 
     <!-- Shared sounds -->
     <link rel="resources" type="directory" href="shared/resources/media/alarms/">
-
-    <!-- Localization -->
-    <meta name="defaultLanguage" content="en-US">
-    <meta name="availableLanguages" content="en-US">
-    <link rel="localization" href="/shared/locales/date/date.{locale}.properties">
-    <link rel="localization" href="locales/clock.{locale}.properties">
-    <link rel="localization" href="locales/alarms.{locale}.properties">
-    <script defer src="/shared/js/date_time_helper.js"></script>
   </head>
 
   <body class="theme-media">

diff --git a/apps/clock/js/banner/banner.html b/apps/clock/js/banner/banner.html
@@ -1 +1 @@
-<p>${notice}</p>
+<p data-l10n-id="${noticeId}" data-l10n-args="${noticeArgs}"></p>
diff --git a/apps/clock/js/banner/main.js b/apps/clock/js/banner/main.js
@@ -3,7 +3,6 @@ define(function(require) {
 
   var Template = require('template');
   var Utils = require('utils');
-  var mozL10n = require('l10n');
   var html = require('text!banner/banner.html');
 
   function Banner(node) {
@@ -25,7 +24,7 @@ define(function(require) {
     constructor: Banner,
 
     render: function bn_render(alarmTime) {
-      var timeLeft, tl, countdownType, localTimes, unitObj;
+      var timeLeft, tl, countdownType, localTimes;
 
       timeLeft = +alarmTime - Date.now();
       // generate human readable numbers to pass to localization function
@@ -39,41 +38,33 @@ define(function(require) {
       if (tl.days) {
         //countdown-moreThanADay localized only for en-US while 913466 is open
         countdownType = 'countdown-moreThanADay';
-        localTimes = [
-          ['days', 'nRemainDays', tl.days],
-          ['hours', 'nAndRemainHours', tl.hours]
-        ];
+        localTimes = {
+          'days': tl.days,
+          'hours': tl.hours
+        };
       } else if (tl.hours > 0) {
         countdownType = 'countdown-moreThanAnHour';
-        localTimes = [
-          ['hours', 'nHours', tl.hours],
-          ['minutes', 'nRemainMinutes', tl.minutes]
-        ];
+        localTimes = {
+          'hours': tl.hours,
+          'minutes': tl.minutes
+        };
       } else {
         countdownType = 'countdown-lessThanAnHour';
-        localTimes = [
-          ['minutes', 'nMinutes', tl.minutes]
-        ];
+        localTimes = {
+          'minutes': tl.minutes
+        };
       }
 
-      // Create an object to pass to mozL10n.get
-      // e.g. {minutes: mozL10n.get('nMinutes', {n: 3})}
-      unitObj = localTimes.reduce(function(lcl, time) {
-        lcl[time[0]] = mozL10n.get(time[1], {n: time[2]});
-        return lcl;
-      }, {});
-
-      // mozL10n.get interpolates the units in unitObj inside the
-      // localization string for countdownType
-      return mozL10n.get(countdownType, unitObj);
+      return {
+        noticeId: countdownType,
+        noticeArgs: JSON.stringify(localTimes)
+      };
     },
 
     show: function bn_show(alarmTime) {
       // Render the Banner notice
       this.notice.innerHTML = this.tmpl.interpolate(
-        {notice: this.render(alarmTime)},
-        // Localization strings contain <strong> tags
-        {safe: ['notice']}
+        this.render(alarmTime)
       );
       // 'visible' class controls the animation
       this.notice.classList.add('visible');

diff --git a/apps/clock/js/form_button.js b/apps/clock/js/form_button.js
@@ -91,7 +91,21 @@ FormButton.prototype = {
    */
   refresh: function() {
     var value = this.value;
-    this.button.textContent = this.formatLabel(value);
+
+    var label = this.formatLabel(value);
+
+    var labelPromise = label.then ? label : Promise.resolve(label);
+
+    return labelPromise.then((l10nId) => {
+      if (typeof l10nId === 'string') {
+        this.button.setAttribute('data-l10n-id', l10nId);
+      } else if (l10nId.raw) {
+        this.button.removeAttribute('data-l10n-id');
+        this.button.textContent = l10nId.raw;
+      } else {
+        navigator.mozL10n.setAttributes(this.button, l10nId.id, l10nId.args);
+      }
+    });
   },
 
   /**
@@ -158,7 +172,7 @@ FormButton.prototype = {
    *
    */
   formatLabel: function(value) {
-    return value;
+    return {raw: value};
   },
 
   /**

diff --git a/apps/clock/js/l10n.js b/apps/clock/js/l10n.js
diff --git a/apps/clock/js/panels/alarm/alarm_list.js b/apps/clock/js/panels/alarm/alarm_list.js
@@ -4,7 +4,6 @@ define(function(require) {
 var Banner = require('banner/main');
 var alarmDatabase = require('alarm_database');
 var Utils = require('utils');
-var _ = require('l10n').get;
 var App = require('app');
 var alarmTemplate = require('tmpl!panels/alarm/list_item.html');
 var AsyncQueue = require('async_queue');
@@ -100,10 +99,21 @@ AlarmListPanel.prototype = {
     link.dataset.id = alarm.id;
 
     li.querySelector('.time').innerHTML = Utils.getLocalizedTimeHtml(d);
-    li.querySelector('.label').textContent = alarm.label || _('alarm');
-    li.querySelector('.repeat').textContent =
-      (alarm.isRepeating() ? Utils.summarizeDaysOfWeek(alarm.repeat) : '');
-
+    if (alarm.label) {
+      li.querySelector('.label').removeAttribute('data-l10n-id');
+      li.querySelector('.label').textContent = alarm.label;
+    } else {
+      li.querySelector('.label').setAttribute('data-l10n-id', 'alarm');
+    }
+    if (alarm.isRepeating()) {
+      Utils.summarizeDaysOfWeek(alarm.repeat).then(l10nId => {
+        if (typeof l10nId === 'string') {
+          li.querySelector('.repeat').setAttribute('data-l10n-id', l10nId);
+        } else if (l10nId.raw) {
+          li.querySelector('.repeat').textContent = l10nId.raw;
+        }
+      });
+    }
     return li;
   },
 

diff --git a/apps/clock/js/panels/alarm/clock_view.js b/apps/clock/js/panels/alarm/clock_view.js
@@ -1,10 +1,10 @@
 define(function(require) {
 'use strict';
+ /* global mozIntl */
 
 var asyncStorage = require('shared/js/async_storage');
 var Utils = require('utils');
 var SETTINGS_CLOCKMODE = 'settings_clockoptions_mode';
-var mozL10n = require('l10n');
 var viewMode = null;
 
 // Retrieve stored view mode data as early as possible.
@@ -116,19 +116,25 @@ var ClockView = {
 
   updateDayDate: function cv_updateDayDate() {
     var d = new Date();
-    var f = new mozL10n.DateTimeFormat();
-    var format = mozL10n.get('dateFormat');
+    var f = mozIntl.DateTimeFormat(navigator.languages, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      format: {
+        day: '<b>$&</b>'
+      }
+    });
 
     // If the date of the month is part of the locale format as a
     // number, insert bold tags to accentuate the number itself. %d
     // and %e are strings that represent the day of the month (1-31).
-    format = format.replace(/(%d|%e)/g, '<b>$1</b>');
 
     var remainMillisecond = (24 - d.getHours()) * 3600 * 1000 -
                             d.getMinutes() * 60 * 1000 -
                             d.getMilliseconds();
 
-    this.dayDate.innerHTML = f.localeFormat(d, format);
+    var dateString = f.format(d);
+    this.dayDate.innerHTML = dateString;
 
     this.timeouts.dayDate = setTimeout(
       this.updateDayDate.bind(this), remainMillisecond

diff --git a/apps/clock/js/panels/alarm_edit/main.js b/apps/clock/js/panels/alarm_edit/main.js
@@ -1,15 +1,13 @@
 'use strict';
-/* global KeyEvent */
+/* global KeyEvent, mozIntl */
 define(function(require) {
 var Alarm = require('alarm');
 var ClockView = require('panels/alarm/clock_view');
 var AudioManager = require('audio_manager');
 var FormButton = require('form_button');
 var Sounds = require('sounds');
 var Utils = require('utils');
-var mozL10n = require('l10n');
 var Panel = require('panel');
-var _ = mozL10n.get;
 var html = require('text!panels/alarm_edit/panel.html');
 var constants = require('constants');
 
@@ -56,7 +54,7 @@ var AlarmEdit = function() {
       var splitValue = value.split(':');
       date.setHours(splitValue[0]);
       date.setMinutes(splitValue[1]);
-      return Utils.getLocalizedTimeText(date);
+      return { raw: Utils.getLocalizedTimeText(date) };
     }.bind(this)
   });
   this.buttons.repeat = new FormButton(this.selects.repeat, {
@@ -73,7 +71,7 @@ var AlarmEdit = function() {
   this.buttons.snooze = new FormButton(this.selects.snooze, {
     id: 'snooze-menu',
     formatLabel: function(snooze) {
-      return _('nMinutes', {n: snooze});
+      return { id: 'nMinutes', args: {minutes: snooze} };
     }
   });
 
@@ -88,9 +86,9 @@ var AlarmEdit = function() {
     this.element.scrollTop = 0;
   }.bind(this));
 
-  // When the language changes, the value of 'weekStartsOnMonday'
+  // When the language changes, the value of 'firstDayOfTheWeek'
   // might change.
-  mozL10n.ready(this.updateL10n.bind(this));
+  navigator.mozL10n.ready(this.updateL10n.bind(this));
 
   this.headers.header.addEventListener('action', handleDomEvent);
   this.buttons.done.addEventListener('click', handleDomEvent);
@@ -135,15 +133,17 @@ Utils.extend(AlarmEdit.prototype, {
   updateL10n: function() {
     // Move the weekdays around to properly account for whether the
     // week starts on Sunday or Monday.
-    var weekStartsOnMonday = parseInt(_('weekStartsOnMonday'), 10);
-    var parent = this.sundayListItem.parentElement;
-    if (weekStartsOnMonday) {
-      // Sunday gets moved to the end.
-      parent.appendChild(this.sundayListItem);
-    } else {
-      // Sunday goes first.
-      parent.insertBefore(this.sundayListItem, parent.firstChild);
-    }
+    mozIntl.calendarInfo('firstDayOfTheWeek').then(firstDay => {
+      var weekStartsOnMonday = parseInt(firstDay, 10) === 1;
+      var parent = this.sundayListItem.parentElement;
+      if (weekStartsOnMonday) {
+        // Sunday gets moved to the end.
+        parent.appendChild(this.sundayListItem);
+      } else {
+        // Sunday goes first.
+        parent.insertBefore(this.sundayListItem, parent.firstChild);
+      }
+    });
   },
 
   // The name `handleEvent` is already defined by the Panel class, so this

diff --git a/apps/clock/js/panels/alarm_edit/panel.html b/apps/clock/js/panels/alarm_edit/panel.html
@@ -52,10 +52,10 @@ <h1 class="edit-alarm-title" data-l10n-id="editAlarm"></h1>
   <li>
     <label class="view-alarm-lbl snooze-lbl" data-l10n-id="snooze-label">Snooze</label>
     <select id="snooze-select">
-      <option data-l10n-id="nMinutes" data-l10n-args='{"n": "5"}'  value="5">  5 minutes</option>
-      <option data-l10n-id="nMinutes" data-l10n-args='{"n": "10"}' value="10">10 minutes</option>
-      <option data-l10n-id="nMinutes" data-l10n-args='{"n": "15"}' value="15">15 minutes</option>
-      <option data-l10n-id="nMinutes" data-l10n-args='{"n": "20"}' value="20">20 minutes</option>
+      <option data-l10n-id="nMinutes" data-l10n-args='{"minutes": "5"}'  value="5">  5 minutes</option>
+      <option data-l10n-id="nMinutes" data-l10n-args='{"minutes": "10"}' value="10">10 minutes</option>
+      <option data-l10n-id="nMinutes" data-l10n-args='{"minutes": "15"}' value="15">15 minutes</option>
+      <option data-l10n-id="nMinutes" data-l10n-args='{"minutes": "20"}' value="20">20 minutes</option>
     </select>
   </li>
   <li>

diff --git a/apps/clock/js/panels/stopwatch/main.js b/apps/clock/js/panels/stopwatch/main.js
@@ -5,7 +5,6 @@ define(function(require) {
   var Stopwatch = require('stopwatch');
   var Utils = require('utils');
   var Template = require('template');
-  var mozL10n = require('l10n');
   var html = require('text!panels/stopwatch/panel.html');
   var lapHtml = require('text!panels/stopwatch/list_item.html');
   var priv = new WeakMap();
@@ -217,7 +216,7 @@ define(function(require) {
       time: Utils.format.durationMs(time)
     });
     li.innerHTML = html;
-    mozL10n.setAttributes(
+    navigator.mozL10n.setAttributes(
       li.querySelector('.lap-name'),
       'lap-number',
       { n: num }
@@ -228,7 +227,7 @@ define(function(require) {
   function updateLapDom(num, time, li) {
     li.querySelector('.lap-duration').textContent =
       Utils.format.durationMs(time);
-    mozL10n.setAttributes(
+    navigator.mozL10n.setAttributes(
       li.querySelector('.lap-name'),
       'lap-number',
       { n: num }

diff --git a/apps/clock/js/picker/picker.js b/apps/clock/js/picker/picker.js
@@ -1,7 +1,6 @@
 define(function(require) {
   'use strict';
   var Spinner = require('picker/spinner');
-  var _ = require('l10n').get;
   /**
    * Picker
    *
@@ -25,11 +24,6 @@ define(function(require) {
    *       range: [0, 60],
    *       isPadded: true,
    *       valueText: 'nSpinnerMinutes'
-   *     },
-   *     seconds: {
-   *       range: [0, 60],
-   *       isPadded: true,
-   *       valueText: 'nSpinnerSeconds'
    *     }
    *   }
    * });
@@ -50,16 +44,19 @@ define(function(require) {
       this.nodes[picker] = setup.element.querySelector('.picker-' + picker);
 
       for (var i = range[0]; i <= range[1]; i++) {
-        values.push(isPadded && i < 10 ? '0' + i : '' + i);
+        var value = isPadded && i < 10 ? '0' + i : '' + i;
+        values.push(value);
         if (valueText) {
-          textValues.push(_(valueText, { n: i }));
+          textValues.push({id: valueText, args: { n: i }});
+        } else {
+          textValues.push({raw: value });
         }
       }
 
       this.spinners[picker] = new Spinner({
         element: this.nodes[picker],
         values: values,
-        textValues: textValues.length ? textValues : values
+        textValues: textValues
       });
     }, this);
   }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<p>${notice}</p>
		<p data-l10n-id="${noticeId}" data-l10n-args="${noticeArgs}"></p>