Improve implementation of i18n for Install Flow following comments on #611

* Move install flow i18n logic to install_view.js (from options.js)
* Switch to using placeholders (instead of jQuery) for i18n messages with html.
* Switch to using moustache template instead of jQuery for i18n substitution.

// FREEBIE

js/chromium.js

@@ -158,8 +158,8 @@
     };
 
     // Translate
-    window.i18n = function(message) {
-        return chrome.i18n.getMessage(message);
+    window.i18n = function(message, substitutions) {
+        return chrome.i18n.getMessage(message, substitutions);
     };
 
     window.textsecure = window.textsecure || {};

js/options.js

@@ -58,31 +58,4 @@
             });
         });
     });
-
-    // Apply i18n
-    $(document).ready(function(){
-        // Basic Substitution
-        $('[data-i18n]').each(function(){
-            var $this = $(this);
-            $this.text(i18n($this.data('i18n')));
-        });
-
-        // Text with link to Play Store
-        var $installSignalLinkContent = $('<span>' + i18n('installSignalLink') + '</span>');
-        $installSignalLinkContent.find('a').attr({
-            class: 'link',
-            href: 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms',
-            target: '_blank'
-        });
-        $('#installSignalLink').append($installSignalLinkContent);
-
-        // Text with link to Twitter
-        var $installFollowUsContent = $('<span>' + i18n('installFollowUs') + '</span>');
-        $installFollowUsContent.find('a').attr({
-            class: 'link',
-            href: 'https://twitter.com/whispersystems',
-            target: '_blank'
-        });
-        $('#installFollowUs').append($installFollowUsContent);
-    });
 })();

js/views/install_view.js

@@ -6,8 +6,30 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.InstallView = Whisper.View.extend({
+        templateName: 'install_flow_template',
+        render_attributes: function() {
+            var installSignalHref = 'https://play.google.com/store/apps/details?id=org.thoughtcrime.securesms';
+            var twitterHref = 'https://twitter.com/whispersystems';
+            return {
+                installWelcome: i18n('installWelcome'),
+                installTagline: i18n('installTagline'),
+                installGetStartedButton: i18n('installGetStartedButton'),
+                installSignalLink: this.i18n_with_link('installSignalLink', installSignalHref),
+                installIHaveSignalButton: i18n('installIHaveSignalButton'),
+                installFollowUs: this.i18n_with_link('installFollowUs', twitterHref),
+                installAndroidInstructions: i18n('installAndroidInstructions'),
+                installLinkingWithNumber: i18n('installLinkingWithNumber'),
+                installComputerName: i18n('installComputerName'),
+                installFinalButton: i18n('installFinalButton'),
+                installTooManyDevices: i18n('installTooManyDevices'),
+                ok: i18n('ok'),
+            };
+        },
         initialize: function(options) {
             this.counter = 0;
+
+            this.render();
+
             this.$('#device-name').val(options.deviceName);
             this.$('#step1').show();
         },

js/views/whisper_view.js

@@ -56,6 +56,10 @@
                 });
                 this.$el.append(dialog.el);
             }.bind(this));
+        },
+        i18n_with_link: function(message, href){
+            var attrs = 'class="link" href="' + encodeURI(href) + '" target="_blank"';
+            return i18n(message, attrs);
         }
     },{
         // Class attributes