Add i18n support to it2me web-app.

BUG=None
TEST=Check the javascript console after loading the app and make sure there are no error messages.

Review URL: http://codereview.chromium.org/7530032

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@95146 0039d316-1c4b-4281-b951-d872f2087c98

8 files changed, 334 insertions, 135 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 88d526e..1c07e3c 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -73,6 +73,7 @@
       'webapp/me2mom/debug_log.js',
       'webapp/me2mom/dividerbottom.png',
       'webapp/me2mom/dividertop.png',
+      'webapp/me2mom/l10n.js',
       'webapp/me2mom/main.css',
       'webapp/me2mom/manifest.json',
       'webapp/me2mom/oauth2.js',
@@ -84,6 +85,9 @@
       'webapp/me2mom/toolbar-stub.png',
       'webapp/me2mom/xhr.js',
     ],
+    'remoting_it2me_locale_files': [
+      'webapp/me2mom/_locales/en/messages.json',
+    ],
   },
 
   'target_defaults': {
@@ -226,6 +230,7 @@
         'webapp/build-webapp.py',
         '<@(remoting_it2me_files)',
         '<@(remoting_it2me_os_files)',
+        '<@(remoting_it2me_locale_files)',
       ],
       # Can't use a 'copies' because we need to manipulate
       # the manifest file to get the right plugin name.
@@ -244,6 +249,7 @@
             '<(_plugin_path)',
             '<@(remoting_it2me_files)',
             '<@(remoting_it2me_os_files)',
+            '<@(remoting_it2me_locale_files)',
           ],
           'outputs': [
             '<(_output_dir)',
@@ -258,6 +264,8 @@
             '<(name_suffix)',
             '<@(remoting_it2me_files)',
             '<@(remoting_it2me_os_files)',
+            '--locales',
+            '<@(remoting_it2me_locale_files)',
           ],
         },
       ],
diff --git a/remoting/webapp/build-webapp.py b/remoting/webapp/build-webapp.py
index 124f60a..a998797 100644
--- a/remoting/webapp/build-webapp.py
+++ b/remoting/webapp/build-webapp.py
@@ -46,7 +46,8 @@ def createZip(zip_path, directory):
   zip.close()
 
 
-def buildWebApp(mimetype, destination, zip_path, plugin, name_suffix, files):
+def buildWebApp(mimetype, destination, zip_path, plugin, name_suffix, files,
+                locales):
   """Does the main work of building the webapp directory and zipfile.
 
   Args:
@@ -59,6 +60,8 @@ def buildWebApp(mimetype, destination, zip_path, plugin, name_suffix, files):
     name_suffix: A string to append to the webapp's title.
     files: An array of strings listing the paths for resources to include
            in this webapp.
+    locales: An array of strings listing locales, which are copied, along
+             with their directory structure from the _locales directory down.
   """
   # Ensure a fresh directory.
   try:
@@ -96,6 +99,24 @@ def buildWebApp(mimetype, destination, zip_path, plugin, name_suffix, files):
     else:
       shutil.copy2(current_file, destination_file)
 
+  # Copy all the locales, preserving directory structure
+  destination_locales = os.path.join(destination, "_locales")
+  os.mkdir(destination_locales , 0775)
+  for current_locale in locales:
+    pos = current_locale.find("/_locales/")
+    if (pos == -1):
+      raise "Missing locales directory in " + current_locale
+    subtree = current_locale[pos+10:]
+    pos = subtree.find("/")
+    if (pos == -1):
+      raise "Malformed locale: " + current_locale
+    locale_id = subtree[:pos]
+    messages = subtree[pos+1:]
+    destination_dir = os.path.join(destination_locales, locale_id)
+    destination_file = os.path.join(destination_dir, messages)
+    os.mkdir(destination_dir, 0775)
+    shutil.copy2(current_locale, destination_file)
+
   # Copy the plugin.
   pluginName = os.path.basename(plugin)
   newPluginPath = os.path.join(destination, pluginName)
@@ -141,11 +162,23 @@ def buildWebApp(mimetype, destination, zip_path, plugin, name_suffix, files):
 def main():
   if len(sys.argv) < 6:
     print ('Usage: build-webapp.py '
-           '<mime-type> <dst> <zip-path> <plugin> <other files...>')
+           '<mime-type> <dst> <zip-path> <plugin> <other files...> '
+           '--locales <locales...>')
     sys.exit(1)
 
+  reading_locales = False
+  files = []
+  locales = []
+  for arg in sys.argv[6:]:
+    if arg == "--locales":
+      reading_locales = True;
+    elif reading_locales:
+      locales.append(arg)
+    else:
+      files.append(arg)
+
   buildWebApp(sys.argv[1], sys.argv[2], sys.argv[3], sys.argv[4],
-              sys.argv[5], sys.argv[6:])
+              sys.argv[5], files, locales)
 
 
 if __name__ == '__main__':
diff --git a/remoting/webapp/me2mom/_locales/en/messages.json b/remoting/webapp/me2mom/_locales/en/messages.json
new file mode 100644
index 0000000..b219190
--- /dev/null
+++ b/remoting/webapp/me2mom/_locales/en/messages.json
@@ -0,0 +1,170 @@
+{
+  "accessCode": {
+    "message": "Access code",
+    "description": "Label for the access code entry box"
+  },
+  "accessCodeTimer": {
+    "message": "This access code will expire in",
+    "description": "Text preceding the access code timer"
+  },
+  "authenticateButton": {
+    "message": "Get OAuth2 Token…",
+    "description": "Label for the authenticate button"
+  },
+  "cancel": {
+    "message": "Cancel",
+    "description": "Label for general-purpose Cancel buttons"
+  },
+  "connectButton": {
+    "message": "Connect",
+    "description": "Label for the connect button"
+  },
+  "debugButton": {
+    "message": "Debug Log",
+    "description": "Label for the debug log button"
+  },
+  "descriptionConnect": {
+    "message": "Have the user whose computer you wish to access click ‘Share this computer’ and then have them read their access code to you.",
+    "description": "Description for the client app"
+  },
+  "descriptionShare": {
+    "message": "With Chromoting you can easily let another Chrome user see and control your computer.",
+    "description": "Description for the host app"
+  },
+  "disconnectButton": {
+    "message": "Disconnect",
+    "description": "Label for the debug log button"
+  },
+  "emailLabel": {
+    "message": "Email:",
+    "description": "Label to the left of the user's email address"
+  },
+  "errorGeneric": {
+    "message": "An error occurred.",
+    "description": "Generic error message"
+  },
+  "errorInvalidAccessCode": {
+    "message": "Invalid access code.",
+    "description": "Error displayed if an invalid access code is entered"
+  },
+  "errorMissingPlugin": {
+    "message": "The viewer plugin is missing or out-of-date. Please upgrade to a more recent version of Chrome.",
+    "description": "Error displayed if the client plugin fails to load"
+  },
+  "errorNoResponse": {
+    "message": "Failed to get response from server.",
+    "description": "Error displayed if an XHR request comes back empty"
+  },
+  "errorOAuthFailed": {
+    "message": "Unable to fetch OAuth2 token. Try revoking the token and authenticating again.",
+    "description": "Error displayed if the OAuth2 token cannot be refreshed"
+  },
+  "footerClient1": {
+    "message": "Click here to ",
+    "description": "Instructions to switch to host mode (first part, before the hyperlink--can be empty)"
+  },
+  "footerClient2": {
+    "message": "share this computer",
+    "description": "Instructions to switch to host mode (second part, hyperlinked--must not be empty)"
+  },
+  "footerClient3": {
+    "message": " with another user.",
+    "description": "Instructions to switch to host mode (third part, after the hyperlink--can be empty)"
+  },
+  "footerCrOS": {
+    "message": "Currently Hosting is not supported on Chromebooks. Hosting is supported on Windows, Mac OS X and Linux.",
+    "description": "Footer text displayed on ChromeOS in lieu of the mode switch hyperlink"
+  },
+  "footerHost1": {
+    "message": "Click here to ",
+    "description": "Instructions to switch to client mode (first part, before the hyperlink--can be empty)"
+  },
+  "footerHost2": {
+    "message": "access a shared computer",
+    "description": "Instructions to switch to client mode (second part, hyperlinked--must not be empty)"
+  },
+  "footerHost3": {
+    "message": ".",
+    "description": "Instructions to switch to client mode (third part, after the hyperlink--can be empty)"
+  },
+  "footerWaiting": {
+    "message": "waiting for connection…",
+    "description": "Footer text at the host when waiting for a client to connect"
+  },
+  "instructionsShareAbove": {
+    "message": "To begin sharing your desktop, read out the access code below to the person who will be assisting you.",
+    "description": "Instructions shown above the access code when it is ready to be conveyed to the client"
+  },
+  "instructionsShareBelow": {
+    "message": "Once they enter the code your sharing session will begin.",
+    "description": "Instructions shown below the access code when it is ready to be conveyed to the client"
+  },
+  "labelConnected": {
+    "message": "Connected:",
+    "description": "String displayed in front of the host in the in-session toolbar"
+  },
+  "messageGenerating": {
+    "message": "Generating access code…",
+    "description": "Text shown while generating an access code"
+  },
+  "messageSessionFinished": {
+    "message": "You are no longer connected to the remote desktop.",
+    "description": "Message displayed when the client has (been) disconnected"
+  },
+  "messageShared": {
+    "message": "Your desktop is currently being shared.",
+    "description": "Message shown on the host computer while a session is active"
+  },
+  "modeShare": {
+    "message": "Share",
+    "description": "Sub-title for the host app"
+  },
+  "modeConnect": {
+    "message": "Connect",
+    "description": "Sub-title for the client app"
+  },
+  "oauth2TokenLabel": {
+    "message": "OAuth2 Token:",
+    "description": "Label to the left of the authenticate/revoke button"
+  },
+  "ok": {
+    "message": "OK",
+    "description": "Label for general-purpose OK buttons"
+  },
+  "pageTitle": {
+    "message": "Chromoting",
+    "description": "Title of the main page"
+  },
+  "revokeButton": {
+    "message": "Revoke",
+    "description": "Label for the revoke button"
+  },
+  "scaleButton": {
+    "message": "Fit Screen",
+    "description": "Label for the scaling button"
+  },
+  "shareButton": {
+    "message": "Share This Computer",
+    "description": "Label for the share button"
+  },
+  "stopSharingButton": {
+    "message": "Stop Sharing",
+    "description": "Label for the 'stop sharing' button"
+  },
+  "unableToGetToken": {
+    "message": "Unable to get access token.",
+    "description": "Error message displayed if an access token could not be generated"
+  },
+  "verifyingCode": {
+    "message": "Verifying access code…",
+    "description": "Message displayed while the access code is verified"
+  },
+  "webappDescription": {
+    "message": "IT2Me-style remote support in Chrome.",
+    "description": "Web-app description"
+  },
+  "webappName": {
+    "message": "Remoting IT2Me",
+    "description": "Web-app name"
+  }
+}
\ No newline at end of file
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index 9690159..0c5a6d6 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -17,11 +17,12 @@ found in the LICENSE file.
     <link rel="stylesheet" href="toolbar.css" />
     <script src="client_session.js"></script>
     <script src="debug_log.js"></script>
+    <script src="l10n.js"></script>
     <script src="oauth2.js"></script>
     <script src="plugin_settings.js"></script>
     <script src="remoting.js"></script>
     <script src="xhr.js"></script>
-    <title>Chromoting</title>
+    <title i18n-content="pageTitle"></title>
   </head>
 
   <body onLoad="remoting.init();"
@@ -30,33 +31,32 @@ found in the LICENSE file.
     <!-- loading-mode is initially visible, but becomes hidden as soon as an
          AppMode is selected by remoting.init. All other divs are initially
          hidden, but are shown appropriately when the mode changes. -->
+    <!-- TODO(jamiewalch): This string is not localized because by the time we
+         get around to running localize(), it's hidden anyway. -->
     <section id="loading-mode" data-ui-mode="">
       <em>Loading&hellip;</em>
     </section> <!-- loading-mode -->
 
     <div id="control-panel" data-ui-mode="client host" hidden>
       <span id="email-status">
-        <span class="auth-status-label">Email:</span>
+        <span class="auth-status-label" i18n-content="emailLabel"></span>
         <span id="current-email"></span>
       </span> <!-- email-status -->
 
       <span id="oauth2-entry">
-        <form>
-          <span class="auth-status-label">OAuth2 Token:</span>
-          <input id="oauth2-token-button" type="button"
-                 onclick="remoting.oauth2.doAuthRedirect();"
-                 value="Get OAuth2 Token&hellip;" />
-          <input id="oauth2-clear-button" type="button"
-                 onclick="remoting.clearOAuth2();"
-                 value="Revoke" />
-        </form>
+        <span class="auth-status-label"
+              i18n-content="oauth2TokenLabel"></span>
+        <button id="oauth2-token-button" type="button"
+                onclick="remoting.oauth2.doAuthRedirect();"
+                i18n-content="authenticateButton"></button>
+        <button id="oauth2-clear-button" type="button"
+                onclick="remoting.clearOAuth2();"
+                i18n-content="revokeButton"></button>
       </span> <!-- oauth2-entry -->
 
       <span id="debug-enable">
-        <form>
-          <input id="debug-log-toggle" type="button" value="Debug log"
-                 onclick="remoting.toggleDebugLog();"/>
-        </form>
+        <button type="button" onclick="remoting.toggleDebugLog();"
+                i18n-content="debugButton"></button>
       </span> <!-- debug-enable -->
     </div> <!-- control-panel -->
 
@@ -65,20 +65,15 @@ found in the LICENSE file.
          class="toolbar-container"
          hidden>
       <div class="toolbar-border">
-        <span id="session-status-message">Initialising...</span>
+        <span id="session-status-message" i18n-content="labelConnected"></span>
         <strong id="connected-to"></strong>
-        <button type="button" onclick="remoting.disconnect();">
-          Disconnect
-        </button>
+        <button type="button" onclick="remoting.disconnect();"
+                i18n-content="disconnectButton"></button>
         <span class="right-align">
-          <button type="button"
-                  onclick="remoting.toggleDebugLog();">
-            Debug log
-          </button>
-          <button type="button"
-                  onclick="remoting.toggleScaleToFit();">
-            Fit screen
-          </button>
+          <button type="button" onclick="remoting.toggleDebugLog();"
+                  i18n-content="debugButton"></button>
+          <button type="button" onclick="remoting.toggleScaleToFit();"
+                  i18n-content="scaleButton"></button>
         </span>
       </div>
       <div class="toolbar-stub">
@@ -90,72 +85,62 @@ found in the LICENSE file.
       <header class="choice-header">
         <img id="icon" src="chromoting128.png">
         <h1 data-ui-mode="host" class="icon-label">
-          Chromoting&nbsp;&rsaquo;&nbsp;Share
+          <span i18n-content="pageTitle">
+          </span>&nbsp;&rsaquo;&nbsp;<span i18n-content="modeShare">
+          </span>
         </h1>
         <h1 data-ui-mode="client" class="icon-label">
-          Chromoting&nbsp;&rsaquo;&nbsp;Connect
+          <span i18n-content="pageTitle">
+          </span>&nbsp;&rsaquo;&nbsp;<span i18n-content="modeConnect">
+          </span>
         </h1>
         <img id="divider-top" src="dividertop.png">
       </header>
 
       <div id="host-panel" data-ui-mode="host">
         <div data-ui-mode="host.unshared">
-          <div class="description">
-            With Chromoting you can easily let another Chrome user see and
-            control your computer.
-          </div>
+          <div class="description" i18n-content="descriptionShare"></div>
           <div class="centered-button">
             <button id="share-button" class="auth-status-control big-button"
-                    type="button" onclick="remoting.tryShare();">
-              Share this computer
-            </button>
+                    type="button" onclick="remoting.tryShare();"
+                    i18n-content="shareButton"></button>
           </div>
         </div> <!-- host.unshared -->
 
-        <div data-ui-mode="host.waiting-for-code">
-          <div class="message">
-            Generating access code&hellip;
-          </div>
+        <div data-ui-mode="host.waiting-for-code" class="message"
+             i18n-content="messageGenerating">
         </div> <!-- host.waiting-for-code -->
 
         <div data-ui-mode="host.waiting-for-connection">
-          <div class="description">
-            To begin sharing your desktop, read out the access code below to the
-            person who will be assisting you.
-          </div>
-          <div id="access-code-display">
-          </div>
+          <div class="description" i18n-content="instructionsShareAbove"></div>
+          <div id="access-code-display"></div>
           <div id="access-code-countdown-container">
             <div id="access-code-countdown" class="expiring" hidden>
-              This access code will expire in
+              <span i18n-content="accessCodeTimer"></span>
               0:<span id="seconds-remaining"></span>
             </div>
           </div>
-          <div class="description">
-            Once they enter the code your sharing session will begin.
-          </div>
+          <div class="description" i18n-content="instructionsShareBelow"></div>
         </div> <!-- host.waiting-for-connection -->
 
         <div data-ui-mode="host.shared">
-          <div class="message">
-            Your desktop is currently being shared.
-          </div>
+          <div class="message" i18n-content="messageShared"></div>
           <div class="centered-button">
             <button type="button" class="big-button"
-                    onclick="remoting.cancelShare();">
-              Stop sharing
+                    onclick="remoting.cancelShare();"
+                    i18n-content="stopSharingButton">
             </button>
           </div>
         </div> <!-- host.shared -->
 
-        <div data-ui-mode="host.share-failed">
-          <div id="unable-to-get-token" class="message">
-            Unable to get access token.
-          </div>
+        <div data-ui-mode="host.share-failed" class="message">
+          <span id="unable-to-get-token" class="error-state"
+               i18n-content="unableToGetToken">
+          </span>
           <div class="centered-button">
             <button type="button" class="big-button"
-                    onclick="remoting.setMode('host.unshared');">
-              OK
+                    onclick="remoting.setMode('host.unshared');"
+                    i18n-content="ok">
             </button>
           </div>
         </div> <!-- host.share-failed -->
@@ -163,35 +148,26 @@ found in the LICENSE file.
 
       <div id="client-panel" data-ui-mode="client">
         <div data-ui-mode="client.unconnected">
-          <div class="description">
-            Have the user whose computer you wish to access click
-            ‘Share this computer’ and then have them read
-            their access code to you.
-          </div>
+          <div class="description" i18n-content="descriptionConnect"></div>
           <div id="access-code-entry-row">
             <form action="" onsubmit="remoting.tryConnect(); return false;">
-              <label class="auth-status-control" for="access-code-entry">
-                Access code
-              </label>
+              <label class="auth-status-control" for="access-code-entry"
+                     i18n-content="accessCode"></label>
               <input id="access-code-entry" class="auth-status-control"
                      type="text"/>
               <button id="connect-button" class="auth-status-control big-button"
-                      type="submit">
-                Connect
-              </button>
+                      type="submit" i18n-content="connectButton"></button>
             </form>
           </div> <!-- code-entry-row -->
         </div> <!-- client.unconnected -->
 
-        <div data-ui-mode="client.connecting">
-          <div class="message">
-            Verifying access code&hellip;
-            <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
-                 the eventual server response not to ignore responses for any
-                 subsequent requests. This should be unified with the host-side
-                 Cancel button in the footer.
-            -->
-          </div>
+        <!-- TODO(jamiewalch): Implement Cancel, being careful when ignoring
+             the eventual server response not to ignore responses for any
+             subsequent requests. This should be unified with the host-side
+             Cancel button in the footer.
+          -->
+        <div data-ui-mode="client.connecting" class="message"
+             i18n-content="verifyingCode">
         </div> <!-- client.connecting -->
 
         <div data-ui-mode="client.connect-failed"
@@ -200,16 +176,14 @@ found in the LICENSE file.
         </div> <!-- client.connect-failed -->
 
         <div data-ui-mode="client.session-finished"
-             class="message">
-          You are no longer connected to the remote desktop.
+             class="message" i18n-content="messageSessionFinished">
         </div> <!-- client.session-finished -->
 
         <div data-ui-mode="client.connect-failed client.session-finished"
              class="centered-button">
-          <button type="button" class="big-button"
+          <button type="button" class="big-button" i18n-content="ok"
                   onclick="remoting.setMode(
                                remoting.AppMode.CLIENT_UNCONNECTED);">
-            OK
           </button>
         </div>
       </div> <!-- client-panel -->
@@ -218,33 +192,30 @@ found in the LICENSE file.
         <img id="divider-bottom" src="dividerbottom.png">
 
         <div id="client-footer-text" data-ui-mode="client.unconnected">
-          Click here to
-          <a class="switch-mode"
-             href="#"
-             onclick="remoting.setAppMode(remoting.AppMode.HOST);">
-            share this computer</a>
-          with another user.
+          <span i18n-content="footerClient1"></span><a
+           class="switch-mode" href="#" i18n-content="footerClient2"
+           onclick="remoting.setAppMode(remoting.AppMode.HOST);"></a><span
+           i18n-content="footerClient3"></span>
         </div> <!-- client-footer-text -->
 
-        <div id="client-footer-text-cros" data-ui-mode="client.unconnected">
-          Currently Hosting is not supported on Chromebooks. Hosting is
-          supported on Win, Mac and Linux.
+        <div id="client-footer-text-cros" data-ui-mode="client.unconnected"
+             i18n-content="footerCrOS">
         </div> <!-- client-footer-text-cros -->
 
         <div id="host-footer-text" data-ui-mode="host.unshared">
-          Click here to <a class="switch-mode"
-             href="#"
-             onclick="remoting.setAppMode(remoting.AppMode.CLIENT);">
-            access a shared computer</a>.
+          <span i18n-content="footerHost1"></span><a
+           class="switch-mode" href="#" i18n-content="footerHost2"
+           onclick="remoting.setAppMode(remoting.AppMode.CLIENT);"></a><span
+           i18n-content="footerHost3"></span>
         </div> <!-- host-footer-text -->
 
         <div id="waiting-footer"
              data-ui-mode="host.waiting-for-connection host.waiting-for-code">
           <img src="spinner.gif">
-          <span class="waiting icon-label">waiting for connection&hellip;</span>
+          <span class="waiting icon-label" i18n-content="footerWaiting"></span>
           <button id="cancel-button" class="big-button"
-                  onclick="remoting.cancelPendingOperation();">
-            Cancel
+                  onclick="remoting.cancelPendingOperation();"
+                  i18n-content="cancel">
           </button>
         </div> <!-- waiting-footer -->
       </footer>
diff --git a/remoting/webapp/me2mom/debug_log.css b/remoting/webapp/me2mom/debug_log.css
index 39d851e..8463082 100644
--- a/remoting/webapp/me2mom/debug_log.css
+++ b/remoting/webapp/me2mom/debug_log.css
@@ -31,6 +31,6 @@
   padding: 0;
 }
 
-#debug-log-toggle {
+#debug-enable {
   float: right;
 }
diff --git a/remoting/webapp/me2mom/l10n.js b/remoting/webapp/me2mom/l10n.js
new file mode 100644
index 0000000..ce20602
--- /dev/null
+++ b/remoting/webapp/me2mom/l10n.js
@@ -0,0 +1,25 @@
+/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/**
+ * Localize the document by replacing innerText of nodes with an i18n-content
+ * attribute with the corresponding localized string.
+ */
+
+var l10n = l10n || {};
+
+l10n.localize = function() {
+  var elements = document.querySelectorAll('[i18n-content]');
+  for (var i = 0; i < elements.length; ++i) {
+    var element = elements[i];
+    var tag = element.getAttribute('i18n-content');
+    var translation = chrome.i18n.getMessage(tag);
+    if (translation) {
+      element.innerText = translation;
+    } else {
+      console.error('Missing translation for "' + tag +'":', element);
+    }
+  }
+}
diff --git a/remoting/webapp/me2mom/manifest.json b/remoting/webapp/me2mom/manifest.json
index 8070a13..4c931eef 100644
--- a/remoting/webapp/me2mom/manifest.json
+++ b/remoting/webapp/me2mom/manifest.json
@@ -1,7 +1,8 @@
 {
-  "name": "Remoting IT2Me NAME_SUFFIX",
+  "name": "__MSG_webappName__ NAME_SUFFIX",
   "version": "1.0.UNIQUE_VERSION",
-  "description": "IT2Me-style remote support in Chrome.",
+  "description": "__MSG_webappDescription__",
+  "default_locale": "en",
   "app": {
     "launch": {
       "local_path": "choice.html"
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index 84c8b1e..7958963 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -36,16 +36,13 @@ remoting.AppMode = {
 remoting.EMAIL = 'email';
 remoting.HOST_PLUGIN_ID = 'host-plugin-id';
 
-// TODO(jamiewalch): Replace this with a proper l10n strategy.
 /** @enum {string} */
 remoting.ClientError = {
-  NO_RESPONSE: 'Failed to get response from server.',
-  INVALID_ACCESS_CODE: 'Invalid access code.',
-  MISSING_PLUGIN: 'The viewer plugin is missing or out-of-date. Please ' +
-      'upgrade to a more recent version of Chrome.',
-  OAUTH_FETCH_FAILED: 'Unable to fetch OAuth2 token. Try revoking the ' +
-      'token and authenticating again.',
-  OTHER_ERROR: 'An error occurred.'
+  NO_RESPONSE: 'errorNoResponse',
+  INVALID_ACCESS_CODE: 'errorInvalidAccessCode',
+  MISSING_PLUGIN: 'errorMissingPlugin',
+  OAUTH_FETCH_FAILED: 'errorOAuthFailed',
+  OTHER_ERROR: 'errorGeneric'
 };
 
 /**
@@ -174,6 +171,7 @@ remoting.toggleDebugLog = function() {
 }
 
 remoting.init = function() {
+  l10n.localize();
   // Create global objects.
   remoting.oauth2 = new remoting.OAuth2();
   remoting.debug =
@@ -366,18 +364,6 @@ remoting.cancelShare = function() {
   disableTimeoutCountdown_();
 }
 
-/**
- * Show a client message that stays on the screeen until the state changes.
- *
- * @param {string} message The message to display.
- * @param {string} opt_host The host to display after the message.
- */
-function setClientStateMessage(message, opt_host) {
-  document.getElementById('session-status-message').innerText = message;
-  opt_host = opt_host || '';
-  document.getElementById('connected-to').innerText = opt_host;
-}
-
 function updateStatistics() {
   if (remoting.session.state != remoting.ClientSession.State.CONNECTED)
     return;
@@ -422,12 +408,6 @@ function onClientStateChange_(oldState) {
   } else if (state == remoting.ClientSession.State.INITIALIZING) {
     remoting.debug.log('Initializing connection');
   } else if (state == remoting.ClientSession.State.CONNECTED) {
-    var split = remoting.hostJid.split('/');
-    var host = null;
-    if (split.length == 2) {
-      host = split[0];
-    }
-    setClientStateMessage('Connected to', host);
     remoting.setMode(remoting.AppMode.IN_SESSION);
     updateStatistics();
     var accessCode = document.getElementById('access-code-entry');
@@ -467,10 +447,19 @@ function startSession_() {
   });
 }
 
+/**
+ * @param {ClientError} errorMsg The error to be localized and displayed.
+ * @return {void} Nothing.
+ */
 function showConnectError_(errorMsg) {
   remoting.debug.log('Connection failed: ' + errorMsg);
-  var errorNode = document.getElementById('connect-error-message');
-  errorNode.innerText = errorMsg;
+  var translation = chrome.i18n.getMessage(errorMsg);
+  if (translation) {
+    var errorNode = document.getElementById('connect-error-message');
+    errorNode.innerText = translation;
+  } else {
+    remoting.debug.error('Missing translation for ' + errorMsg);
+  }
   remoting.accessCode = '';
   if (remoting.session) {
     remoting.session.disconnect();
@@ -486,6 +475,8 @@ function parseServerResponse_(xhr) {
     if (host.data && host.data.jabberId) {
       remoting.hostJid = host.data.jabberId;
       remoting.hostPublicKey = host.data.publicKey;
+      var split = remoting.hostJid.split('/');
+      document.getElementById('connected-to').innerText = split[0];
       startSession_();
       return;
     }