Chrome OS: implement parametrized strings for Sync Consent screen

This CL adds I18nBehavior.i18nRecursive and uses it for parametrized strings in
Chrome OS Sync Consent screen.

Bug: 822889
Change-Id: I0ca8c3b7a45ee1cea8a80a0e8ace388e958709c4
Reviewed-on: https://chromium-review.googlesource.com/1166464
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582309}

chrome/browser/resources/chromeos/login/sync_consent.html

@@ -45,10 +45,12 @@
           <div class="overview-list-item-text flex layout vertical
               center-justified">
             <div class="overview-list-item-title" consent-description>
-              [[i18nDynamic(locale, 'syncConsentScreenPersonalizeGoogleServicesName')]]
+              [[i18nDynamic(locale,
+                'syncConsentScreenPersonalizeGoogleServicesName')]]
             </div>
             <div class="overview-list-item-description" consent-description>
-              [[i18nDynamic(locale, 'syncConsentScreenPersonalizeGoogleServicesDescription')]]
+              [[i18nDynamic(locale,
+                'syncConsentScreenPersonalizeGoogleServicesDescription')]]
             </div>
           </div>
         </div>
@@ -66,14 +68,15 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="syncConsentNewDialog" role="dialog"
-        aria-label$="[[i18nDynamic(locale, 'syncConsentNewScreenTitle')]]"
+        aria-label$="[[i18nRecursive(locale, 'syncConsentNewScreenTitle',
+                                     'productName')]]"
         has-buttons no-footer-padding hidden>
       <img srcset="chrome://oobe/logo_24px-1x.svg 1x,
                    chrome://oobe/logo_24px-2x.svg 2x"
           slot="oobe-icon">
       </img>
       <h1 slot="title" consent-description>
-        [[i18nDynamic(locale, 'syncConsentNewScreenTitle')]]
+        [[i18nRecursive(locale, 'syncConsentNewScreenTitle', 'productName')]]
       </h1>
       <div slot="footer" class="layout vertical">
         <div class="sync-feature-item flex layout horizontal center">
@@ -102,7 +105,8 @@
           </hd-iron-icon>
           <div class="sync-feature-item-text flex layout vertical
               center-justified" consent-description>
-            [[i18nDynamic(locale, 'syncConsentNewImproveChrome')]]
+            [[i18nRecursive(locale, 'syncConsentNewImproveChrome',
+                            'productName')]]
           </div>
         </div>
         <div id="syncFeaturesDesc"
@@ -113,7 +117,8 @@
           </hd-iron-icon>
           <div class="sync-feature-item-text flex layout vertical
               center-justified" consent-description>
-            [[i18nDynamic(locale, 'syncConsentNewGoogleMayUse')]]
+            [[i18nRecursive(locale, 'syncConsentNewGoogleMayUse',
+                            'productName')]]
           </div>
         </div>
 
@@ -121,7 +126,8 @@
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <oobe-welcome-secondary-button id="moreOptionsButton"
             on-tap="onMoreOptionsButton_"
-            label-for-aria$="[[i18nDynamic(locale, 'syncConsentNewMoreOptions')]]">
+            label-for-aria$="[[i18nDynamic(locale,
+                'syncConsentNewMoreOptions')]]">
           <div consent-description>
             [[i18nDynamic(locale, 'syncConsentNewMoreOptions')]]
           </div>
@@ -146,7 +152,8 @@
       </h1>
       <div slot="subtitle">
         <div consent-description>
-          [[i18nDynamic(locale, 'syncConsentNewSyncOptionsSubtitle')]]
+          [[i18nRecursive(locale, 'syncConsentNewSyncOptionsSubtitle',
+                          'productName')]]
         </div>
         <div consent-description>
           [[i18nDynamic(locale, 'syncConsentNewChooseOption')]]
@@ -177,7 +184,8 @@
                   [[i18nDynamic(locale, 'syncConsentNewOptionJustSync')]]
                 </div>
                 <div class="sync-option-subtitle" consent-description>
-                  [[i18nDynamic(locale, 'syncConsentNewOptionJustSyncDsc')]]
+                  [[i18nRecursive(locale, 'syncConsentNewOptionJustSyncDsc',
+                                  'productName')]]
                 </div>
             </div>
           </paper-radio-button>
@@ -187,10 +195,12 @@
             <div class="options-list-item-text flex layout vertical
                 center-justified">
                 <div class="sync-option-title" consent-description>
-                  [[i18nDynamic(locale, 'syncConsentNewOptionSyncAndPersonalization')]]
+                  [[i18nDynamic(locale,
+                                'syncConsentNewOptionSyncAndPersonalization')]]
                 </div>
                 <div class="sync-option-subtitle" consent-description>
-                  [[i18nDynamic(locale, 'syncConsentNewOptionSyncAndPersonalizationDsc')]]
+                  [[i18nDynamic(locale,
+                      'syncConsentNewOptionSyncAndPersonalizationDsc')]]
                 </div>
             </div>
           </paper-radio-button>

ui/webui/resources/js/i18n_behavior.js

@@ -79,6 +79,29 @@ var I18nBehavior = {
     return this.i18n.apply(this, Array.prototype.slice.call(arguments, 1));
   },
 
+  /**
+   * Similar to 'i18nDynamic', but var_args valus are interpreted as keys in
+   * loadTimeData. This allows generation of strings that take other localized
+   * strings as parameters.
+   * @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. Values are interpreted as strings IDs if found in the
+   *     list of localized strings.
+   * @return {string} A translated, sanitized, substituted string.
+   */
+  i18nRecursive: function(locale, id, var_args) {
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (args.length > 0) {
+      // Try to replace IDs with localized values.
+      var self = this;
+      args = args.map(function(str) {
+        return self.i18nExists(str) ? loadTimeData.getString(str) : str;
+      });
+    }
+    return this.i18nDynamic.apply(this, [locale, id].concat(args));
+  },
+
   /**
    * Returns true if a translation exists for |id|.
    * @param {string} id