[i18n] use Polymer data binding to change locale strings

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

Index: chrome/browser/resources/chromeos/login/oobe_welcome.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.js b/chrome/browser/resources/chromeos/login/oobe_welcome.js
index aeaba1a63b61b01e7d01a541a52fe440aeee76c6..2886e112da7f9c78b6d8d88d97a70b6dbf718c9c 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.js
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.js
@@ -32,7 +32,7 @@ Polymer({
      */
     languages: {
       type: Array,
-      observer: "onLanguagesChanged_",
+      observer: 'onLanguagesChanged_',
     },
 
     /**
@@ -41,7 +41,7 @@ Polymer({
      */
     keyboards: {
       type: Array,
-      observer: "onKeyboardsChanged_",
+      observer: 'onKeyboardsChanged_',
     },
 
     /**
@@ -77,6 +77,17 @@ Polymer({
       value: '',
     },
 
+    /*
+     * Dynamically change languages.
+     * @private
+     */
+    i18n_: {
+      type: Object,
+      value: function() {
+        return {};

[Dan Beam, 2017/05/18 00:04:57]

set this only when ready, IMO

[dschuyler, 2017/05/18 00:46:57]

Done.

+      },
+    },
+
     /**
      * True when connected to a network.
      * @private
@@ -89,7 +100,7 @@ Polymer({
     /**
      * Controls displaying of "Enable debugging features" link.
      */
-     debuggingLinkVisible: Boolean,
+    debuggingLinkVisible: Boolean,
   },
 
   /**
@@ -130,6 +141,26 @@ Polymer({
       addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'),
       proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
     };
+
+    // I18n tags in this list are updated in the i18n_ object to reflect the
+    // current i18n locale selected by the user.
+    var i18nTags = [
+      'accessibilitySectionHint', 'accessibilitySectionTitle',
+      'highContrastOption',       'highContrastOptionOff',
+      'highContrastOptionOn',     'keyboardDropdownTitle',
+      'languageDropdownTitle',    'languageSectionTitle',
+      'largeCursorOption',        'largeCursorOptionOff',
+      'largeCursorOptionOn',      'networkSectionHint',
+      'networkSectionTitle',      'oobeOKButtonText',
+      'screenMagnifierOption',    'screenMagnifierOptionOff',
+      'screenMagnifierOptionOn',  'spokenFeedbackOption',
+      'spokenFeedbackOptionOff',  'spokenFeedbackOptionOn',
+      'timezoneDropdownTitle',    'timezoneSectionTitle',
+      'virtualKeyboardOption',    'virtualKeyboardOptionOff',
+      'virtualKeyboardOptionOn',
+    ];

[Dan Beam, 2017/05/18 00:04:57]

var i18n = {};
i18nTags.forEach(function(tag) {
  i18n[tag] = loadTimeData.getString(tag);
});
this.i18n_ = i18n;

[dschuyler, 2017/05/18 00:46:57]

Done.

+    for (var i in i18nTags)
+      this.set('i18n_.' + i18nTags[i], loadTimeData.getString(i18nTags[i]));
   },
 
   /**
@@ -139,8 +170,8 @@ Polymer({
   hideAllScreens_: function() {
     this.$.welcomeScreen.hidden = true;
 
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog')

[Dan Beam, 2017/05/18 00:04:57]

this line should've ended with a ;

[dschuyler, 2017/05/18 00:46:57]

Done.

-    for (var i = 0; i < screens.length; ++i) {
+    var screens = Polymer.dom(this.root).querySelectorAll(
+        'oobe-dialog') for (var i = 0; i < screens.length; ++i) {
       screens[i].hidden = true;
     }
   },
@@ -164,8 +195,8 @@ Polymer({
    * @private
    */
   getActiveScreen_: function() {
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog')
-    for (var i = 0; i < screens.length; ++i) {
+    var screens = Polymer.dom(this.root).querySelectorAll(

[Dan Beam, 2017/05/18 00:04:57]

same

[dschuyler, 2017/05/18 00:46:57]

Done.

+        'oobe-dialog') for (var i = 0; i < screens.length; ++i) {
       if (!screens[i].hidden)
         return screens[i];
     }
@@ -207,21 +238,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 +312,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Proxy settings" button.
+   * Handle Network Setup screen "Proxy settings" button.
    *
    * @private
    */
@@ -284,7 +321,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add WiFi network" button.
+   * Handle Network Setup screen "Add WiFi network" button.
    *
    * @private
    */
@@ -293,7 +330,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add cellular network" button.
+   * Handle Network Setup screen "Add cellular network" button.
    *
    * @private
    */