Combine disparate strings for easier l10n.

* Interpolate on %s and %(name)s that the Mozilla l10n team is accustomed to using.
* Write email HTML from JS to simplify the translator's job

fixes #267

app/scripts/templates/complete_sign_up.mustache

@@ -12,7 +12,7 @@
     <div class="graphic graphic-checkbox">{{#t}}Success{{/t}}</div>
 
     {{#redirectTo}}
-      <p>{{#t}}You are now ready to use{{/t}} {{ service }}</p>
+      <p>{{#t}}You are now ready to use %(service)s{{/t}}</p>
 
       <a href="{{ redirectTo }}" autofocus>{{#t}}Continue{{/t}}</a>
     {{/redirectTo}}

app/scripts/templates/confirm.mustache

@@ -9,7 +9,7 @@
 
   <div class="graphic graphic-mail">{{#t}}Email Sent{{/t}}</div>
 
-  <p class="verification-email-message">{{#t}}A verification link has been sent to:{{/t}}<br/><span id="confirm-email">{{email}}</span>.</p>
+  <p class="verification-email-message">{{#t}}A verification link has been sent&nbsp;to: %(email)s{{/t}}</p>
 
   <div class="links">
     <a>{{#t}}Email not showing up? Send again{{/t}}</a>

app/scripts/templates/confirm_reset_password.mustache

@@ -9,7 +9,7 @@
 
   <div class="graphic graphic-mail">{{#t}}Email Sent{{/t}}</div>
 
-  <p class="verification-email-message">{{#t}}A reset link has been sent to:{{/t}}<br/><strong>{{email}}.</strong></p>
+  <p class="verification-email-message">{{#t}}A reset link has been sent to: %(email)s{{/t}}</p>
 
   <div class="links">
     <a>{{#t}}Email not showing up? Send again{{/t}}</a>

app/scripts/templates/reset_password_complete.mustache

@@ -10,7 +10,7 @@
   <div class="graphic graphic-checkbox">{{#t}}Success{{/t}}</div>
 
   {{#redirectTo}}
-    <p>{{#t}}Continue to{{/t}} {{ service }} {{#t}}on the <strong>Initial Client</strong>.{{/t}}</p>
+    <p>{{#t}}Continue to %(service)s on the <strong>Initial Client</strong>.{{/t}}</p>
 
     <a href="{{ redirectTo }}" autofocus>{{#t}}Continue{{/t}}</a>
   {{/redirectTo}}

app/scripts/templates/settings.mustache

@@ -7,7 +7,7 @@
   <div class="error"></div>
   <div class="success">{{#t}}Password changed{{/t}}</div>
 
-  <p>{{#t}}You are signed in as:{{/t}}<br /> {{ email }}</p>
+  <p>{{#t}}You are signed in as: %(email)s{{/t}}</p>
 
   <form>
     <div class="input-row">

app/scripts/views/base.js

@@ -48,14 +48,15 @@ function (_, Backbone, jQuery, Session) {
     getContext: function () {
       var ctx = this.context() || {};
 
-      ctx.t = this.translate;
+      ctx.t = _.bind(this.translate, this);
 
       return ctx;
     },
 
     translate: function () {
+      var self = this;
       return function (text) {
-        return translator.get(text);
+        return translator.get(text, self.getContext());
       };
     },
 

app/scripts/views/confirm.js

@@ -16,7 +16,8 @@ function (BaseView, ConfirmTemplate, Session) {
 
     context: function () {
       return {
-        email: Session.email
+        // HTML is written here to simplify the l10n community's job
+        email: '<strong id="confirm-email" class="email">' + Session.email + '</strong>'
       };
     }
   });

app/scripts/views/confirm_reset_password.js

@@ -16,7 +16,8 @@ function (BaseView, Template, Session) {
 
     context: function () {
       return {
-        email: Session.email
+        // HTML is written here to simplify the l10n community's job
+        email: '<strong id="confirm-email" class="email">' + Session.email + '</strong>'
       };
     }
   });

app/scripts/views/settings.js

@@ -21,7 +21,8 @@ function (_, BaseView, Template, FxaClient, Session) {
 
     context: function () {
       return {
-        email: Session.email
+        // HTML is written here to simplify the l10n community's job
+        email: '<strong id="email" class="email">' + Session.email + '</strong>'
       };
     },
 

app/styles/main.css

@@ -70,6 +70,10 @@ section p {
   font-size: 18px;
 }
 
+strong.email {
+  display: block;
+}
+
 .error {
   background: #D63920;
   color: #fff;

app/tests/main.js

@@ -55,6 +55,7 @@ require([
   '../tests/spec/lib/url',
   '../tests/spec/lib/session',
   '../tests/spec/lib/fxa-client',
+  '../tests/spec/lib/translator',
   '../tests/spec/views/base',
   '../tests/spec/views/sign_up',
   '../tests/spec/views/sign_in',