[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..fa66c580d9b6304c95e260fd76480d7a4689e3f0 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: '',
     },
 
+    /*
+     * Signal dynamic language change.
+     * Note: the type and value are arbitrary, but the value does need to change
+     * to cause a str('...', i18n_) update.
+     * @private
+     */
+    i18n_: {
+      type: Number,
+      value: 0,
+    },
+
     /**
      * 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,8 @@ Polymer({
       addWiFiNetworkMenuName: loadTimeData.getString('addWiFiNetworkMenuName'),
       proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
     };
+
+    this.set('i18n_', this.i18n_ + 1);

[Alexander Alekseev, 2017/05/20 01:21:12]

I don't like the idea of per-screen JS depencence.

This particular screen object has updateLocalizedContent() call for a very
special reason: it is using "special" cr-network-list element that requires this
ugly code.

UI objects should not have explicit updateLocalizedContent() methods. We can
hide them in behavior, but I don't like the idea of explicit
updateLocalizedContent() in every object.

[dschuyler, 2017/05/20 01:44:48]

I agree that it is not pretty, but it's a special case (changing the language a
page is displayed in without reloading the page). I think oobe and login are the
corner case rather than the common case (and for that reason I believe that
special casing here is appropriate).

[Alexander Alekseev, 2017/05/20 01:50:57]

I believe that OOBE/Login is likely a half of Chrome OS UI.
(It also includes a lot of chrome://settings code).

Could you wrap it all into a polymer behavior?

[Dan Beam, 2017/05/20 02:03:29]

i don't know how a behavior would help that the binding syntax needs something
that changes to re-run

[Dan Beam, 2017/05/20 02:03:29]

fwiw: this could also just be

this.i18n_++;

[Alexander Alekseev, 2017/05/20 02:25:21]

updateLocalizedContent should go into the behavior.
Behaviors can have properties.

Also I posted this above: http://stackoverflow.com/a/31129122 .

[dschuyler, 2017/05/23 00:03:18]

Acknowledged.

[dschuyler, 2017/05/23 00:03:18]

Acknowledged.

[dschuyler, 2017/05/23 00:03:18]

I'd like that (moving the existing code) to be a separate CL.

[dschuyler, 2017/05/23 00:03:18]

Done.

   },
 
   /**
@@ -139,7 +152,7 @@ Polymer({
   hideAllScreens_: function() {
     this.$.welcomeScreen.hidden = true;
 
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog')
+    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
     for (var i = 0; i < screens.length; ++i) {
       screens[i].hidden = true;
     }
@@ -160,11 +173,20 @@ Polymer({
   },
 
   /**
+   * Get the i18n string for the given tag.
+   * @return {string}
+   * @private
+   */
+  str_: function(tag) {
+    return loadTimeData.getString(tag);
+  },
+
+  /**
    * Returns active screen object.
    * @private
    */
   getActiveScreen_: function() {
-    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog')
+    var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
     for (var i = 0; i < screens.length; ++i) {
       if (!screens[i].hidden)
         return screens[i];
@@ -207,21 +229,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 +303,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Proxy settings" button.
+   * Handle Network Setup screen "Proxy settings" button.
    *
    * @private
    */
@@ -284,7 +312,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add WiFi network" button.
+   * Handle Network Setup screen "Add WiFi network" button.
    *
    * @private
    */
@@ -293,7 +321,7 @@ Polymer({
   },
 
   /**
-   * Handle Networwork Setup screen "Add cellular network" button.
+   * Handle Network Setup screen "Add cellular network" button.
    *
    * @private
    */