[i18n] use Polymer data binding to change locale strings

This CL uses Polymer variable binding to swap out i18n strings rather
than using i18n-content.

BUG=692763
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2886843005
Cr-Commit-Position: refs/heads/master@{#476358}

chrome/browser/resources/chromeos/login/oobe_welcome.js

@@ -9,6 +9,8 @@
 Polymer({
   is: 'oobe-welcome-md',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /**
      * Currently selected system language (display name).
@@ -32,7 +34,7 @@ Polymer({
      */
     languages: {
       type: Array,
-      observer: "onLanguagesChanged_",
+      observer: 'onLanguagesChanged_',
     },
 
     /**
@@ -41,7 +43,7 @@ Polymer({
      */
     keyboards: {
       type: Array,
-      observer: "onKeyboardsChanged_",
+      observer: 'onKeyboardsChanged_',
     },
 
     /**
@@ -89,7 +91,7 @@ Polymer({
     /**
      * Controls displaying of "Enable debugging features" link.
      */
-     debuggingLinkVisible: Boolean,
+    debuggingLinkVisible: Boolean,
   },
 
   /**
@@ -130,6 +132,8 @@ Polymer({
       addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'),
       proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
     };
+
+    this.i18nUpdateLocale();
   },
 
   /**
@@ -207,21 +211,27 @@ Polymer({
         customItemName: 'proxySettingsMenuName',
         polymerIcon: 'oobe-welcome-20:add-proxy',
         customData: {
-          onTap: function() { self.OpenProxySettingsDialog_(); },
+          onTap: function() {
+            self.OpenProxySettingsDialog_();
+          },
         },
       },
       {
         customItemName: 'addWiFiNetworkMenuName',
         polymerIcon: 'oobe-welcome-20:add-wifi',
         customData: {
-          onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
+          onTap: function() {
+            self.OpenAddWiFiNetworkDialog_();
+          },
         },
       },
       {
         customItemName: 'addMobileNetworkMenuName',
         polymerIcon: 'oobe-welcome-20:add-cellular',
         customData: {
-          onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
+          onTap: function() {
+            self.OpenAddWiFiNetworkDialog_();
+          },
         },
       },
     ];
@@ -275,7 +285,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Proxy settings" button.
+   * Handle Network Setup screen "Proxy settings" button.
    *
    * @private
    */
@@ -284,7 +294,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add WiFi network" button.
+   * Handle Network Setup screen "Add WiFi network" button.
    *
    * @private
    */
@@ -293,7 +303,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add cellular network" button.
+   * Handle Network Setup screen "Add cellular network" button.
    *
    * @private
    */

chrome/test/data/webui/i18n_behavior_test.html

@@ -35,11 +35,17 @@ function testI18nAdvanced() {
   I18nBehavior.i18nAdvanced('customTag', {tags: ['X-FOO']});
 }
 
+function testI18nDynamic() {
+  var locale = 'en';
+  assertEquals("I'm just text, nobody should have a problem with me!",
+      I18nBehavior.i18nDynamic(locale, 'text'));
+}
+
 function testI18nExists() {
   assertTrue(I18nBehavior.i18nExists('text'));
   assertFalse(I18nBehavior.i18nExists('missingText'));
 }
- 
+
 </script>
 </body>
 </html>

ui/webui/resources/js/i18n_behavior.js

@@ -4,17 +4,23 @@
 
 /**
  * @fileoverview
- * 'I18nBehavior' is a behavior to mix in loading of
- * internationalization strings.
- *
- * Example:
- *   behaviors: [
- *     I18nBehavior,
- *   ],
+ * 'I18nBehavior' is a behavior to mix in loading of internationalization
+ * strings.
  */
 
 /** @polymerBehavior */
 var I18nBehavior = {
+  properties: {
+    /**
+     * The language the UI is presented in. Used to signal dynamic language
+     * change.
+     */
+    locale: {
+      type: String,
+      value: '',
+    },
+  },
+
   /**
    * Returns a translated string where $1 to $9 are replaced by the given
    * values.
@@ -59,6 +65,19 @@ var I18nBehavior = {
         .firstChild.innerHTML;
   },
 
+  /**
+   * Similar to 'i18n', with an unused |locale| parameter used to trigger
+   * updates when |this.locale| changes.
+   * @param {string} locale The UI language used.
+   * @param {string} id The ID of the string to translate.
+   * @param {...string} var_args Values to replace the placeholders $1 to $9
+   *     in the string.
+   * @return {string} A translated, sanitized, substituted string.
+   */
+  i18nDynamic: function(locale, id, var_args) {
+    return this.i18n.apply(this, Array.prototype.slice.call(arguments, 1));
+  },
+
   /**
    * Returns true if a translation exists for |id|.
    * @param {string} id
@@ -67,6 +86,14 @@ var I18nBehavior = {
   i18nExists: function(id) {
     return loadTimeData.valueExists(id);
   },
+
+  /**
+   * Call this when UI strings may have changed. This will send an update to any
+   * data bindings to i18nDynamic(locale, ...).
+   */
+  i18nUpdateLocale: function() {
+    this.locale = loadTimeData.getString('language');
+  },
 };
 
 /**