[i18n] use Polymer data binding to change locale strings

ui/webui/resources/js/i18n_behavior.js

 // Copyright 2015 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.
 
 /**
  * @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: {
+    /*

[Dan Beam, 2017/05/22 23:26:12]

should be /**

[dschuyler, 2017/05/22 23:31:42]

Done in prior patch (this was the error reported by closure).

done.

+     * The language the UI is presented in. Used to signal dynamic language
+     * change.
+     * @private
+     */
+    locale: {
+      type: String,
+      value: '',
+    },
+  },
+
   /**
    * Returns a translated string where $1 to $9 are replaced by the given
    * values.
    * @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, substituted string.
    * @private
    */
   i18nRaw_: function(id, var_args) {
@@ skipping 25 matching lines @@
    *          tags: (Array<string>|undefined)}} opts
    */
   i18nAdvanced: function(id, opts) {
     var args = [id].concat(opts.substitutions || []);
     var rawString = this.i18nRaw_.apply(this, args);
     return parseHtmlSubset('<b>' + rawString + '</b>', opts.tags, opts.attrs)
         .firstChild.innerHTML;
   },
 
   /**
+   * Similar to 'i18n', with updates whenever |language| changes.

[stevenjb, 2017/05/22 23:07:37]

nit: Similar to 'i18n', with an unused |locale| parameter used to trigger
updates when |this.locale| changes.

[dschuyler, 2017/05/22 23:30:17]

Done.

+   * @param {string} language The UI language used.

[stevenjb, 2017/05/22 23:07:37]

locale ?

[dschuyler, 2017/05/22 23:30:17]

Done.

+   * @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(language, id, var_args) {
+    return this.i18n.apply(this, Array.prototype.slice.call(arguments, 1));

[dschuyler, 2017/05/22 23:30:17]

Hmm, I've recently read that splicing |arguments| may be a bad idea on V8. I'm
tempted to replace the above with:

    var args = new Array(arguments.length);
    for (var i = 0; i < arguments.length; ++i)
      args[i] = arguments[i];
    return this.i18n.apply(this, args.slice(1));

Thought I'm not sure that it's necessary.

[stevenjb, 2017/05/22 23:37:00]

splicing or slicing? I wouldn't think that slice here would be that bad, I'd
expect it to pretty much do the same as above but hopefully more efficiently...

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

Yep, slicing. Thanks for catching the typo.

+  },
+
+  /**
    * Returns true if a translation exists for |id|.
    * @param {string} id
    * @return {boolean}
    */
   i18nExists: function(id) {
     return loadTimeData.valueExists(id);
   },
+
+  /**
+   * Called when UI strings change.

[stevenjb, 2017/05/22 23:07:37]

nit: Call this when UI strings may have changed (e.g. because the locale
changed). This will an update to any data bindings to i18nDynamic.

[dschuyler, 2017/05/22 23:30:17]

Changed to something similar, though not exact.

done.

+   */
+  updateLocalizedContent: function() {

[Dan Beam, 2017/05/22 23:15:56]

why shouldn't callers just set this.locale directly?

[dschuyler, 2017/05/22 23:30:17]

They sure could. I was trying to separate I18nBehavior internals from the class
mixing in the behavior.

+    this.locale = loadTimeData.getString('language');
+  },
 };
 
 /**
  * TODO(stevenjb): Replace with an interface. b/24294625
  * @typedef {{
  *   i18n: function(string, ...string): string}},
  *   i18nAdvanced: function({
  *     substitutions: (Array<string>|undefined),
  *     attrs: (Object<function(Node, string):boolean>|undefined),
  *     tags: (Array<string>|undefined)}, opts),
  *   i18nExists: function(string)
  * }}
  */
 I18nBehavior.Proto;