Replace i18n-content with i18nDynamic in polymer elements

Bug: 955194
Change-Id: I6d35b0897dc753d16ae37bc83dff502f960af154
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1899500
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Cr-Commit-Position: refs/heads/master@{#713407}

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -146,6 +146,9 @@ js_library("multidevice_setup_first_run") {
 }
 
 js_library("active_directory_password_change") {
+  deps = [
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
 }
 
 js_library("app_downloading") {
@@ -157,7 +160,9 @@ js_library("app_downloading") {
 
 js_library("arc_terms_of_service") {
   deps = [
+    ":html-echo",
     ":oobe_dialog_host_behavior",
+    "//ui/webui/resources/js:i18n_behavior",
   ]
 }
 
@@ -214,6 +219,9 @@ js_library("gaia_input") {
 }
 
 js_library("gaia_password_changed") {
+  deps = [
+    "//ui/webui/resources/js:i18n_behavior",
+  ]
 }
 
 js_library("hd-iron-icon") {

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

@@ -39,7 +39,7 @@
         <gaia-card id="gaiaCard" class="fit">
           <div slot="header" class="flex vertical layout end-justified start">
             <h1 id="welcomeMessage" class="welcome-message">
-              [[computeWelcomeMessage_(username)]]
+              [[i18nDynamic(locale, 'adPassChangeMessage', username)]]
             </h1>
           </div>
           <div slot="footer" class="flex vertical layout justified">
@@ -47,25 +47,29 @@
                 i18n-values="button-text:offlineLoginNextBtn">
               <gaia-input slot="inputs" id="oldPassword" type="password"
                   required>
-                <div slot="label" i18n-content="adPassChangeOldPasswordHint">
+                <div slot="label">
+                  [[i18nDynamic(locale, 'adPassChangeOldPasswordHint')]]
                 </div>
-                <div slot="error" i18n-content="adPassChangeOldPasswordError">
+                <div slot="error">
+                  [[i18nDynamic(locale, 'adPassChangeOldPasswordError')]]
                 </div>
               </gaia-input>
               <gaia-input slot="inputs" id="newPassword1" type="password"
                   required>
-                <div slot="label" i18n-content="adPassChangeNewPasswordHint">
+                <div slot="label">
+                  [[i18nDynamic(locale, 'adPassChangeNewPasswordHint')]]
                 </div>
-                <div slot="error"
-                    i18n-content="adPassChangeNewPasswordRejected">
+                <div slot="error">
+                  [[i18nDynamic(locale, 'adPassChangeNewPasswordRejected')]]
                 </div>
               </gaia-input>
               <gaia-input slot="inputs" id="newPassword2" type="password"
                   required>
-                <div slot="label"
-                    i18n-content="adPassChangeRepeatNewPasswordHint">
+                <div slot="label">
+                  [[i18nDynamic(locale, 'adPassChangeRepeatNewPasswordHint')]]
                 </div>
-                <div slot="error" i18n-content="adPassChangePasswordsMismatch">
+                <div slot="error">
+                  [[i18nDynamic(locale, 'adPassChangePasswordsMismatch')]]
                 </div>
               </gaia-input>
             </gaia-input-form>

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

@@ -19,6 +19,8 @@ var ACTIVE_DIRECTORY_PASSWORD_CHANGE_ERROR_STATE = {
 Polymer({
   is: 'active-directory-password-change',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /**
      * The user principal name.
@@ -52,15 +54,6 @@ Polymer({
     }
   },
 
-  /**
-   * @param {string} username
-   * @return {string}
-   * @private
-   */
-  computeWelcomeMessage_: function(username) {
-    return loadTimeData.getStringF('adPassChangeMessage', username);
-  },
-
   /** @private */
   onSubmit_: function() {
     if (!this.$.oldPassword.checkValidity() ||

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

@@ -34,13 +34,15 @@
             <hd-iron-icon slot="oobe-icon"
                 icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
             </hd-iron-icon>
-            <h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
+            <h1 slot="title">
+              [[i18nDynamic(locale, 'oauthEnrollScreenTitle')]]
+            </h1>
             <paper-progress slot="progress" indeterminate>
             </paper-progress>
 
             <div slot="footer" class="flex layout vertical" role="alert">
               <div class="oauth-enroll-step-message">
-                <span i18n-content="oauthEnrollWorking"></span>
+                [[i18nDynamic(locale, 'oauthEnrollWorking')]]
               </div>
             </div>
           </oobe-dialog>
@@ -72,15 +74,17 @@
           <hd-iron-icon slot="oobe-icon"
               icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
           </hd-iron-icon>
-          <h1 slot="title" i18n-content="oauthEnrollSuccessTitle"></h1>
+          <h1 slot="title">
+            [[i18nDynamic(locale, 'oauthEnrollSuccessTitle')]]
+          </h1>
           <div slot="subtitle">
             <div hidden="[[!isEmpty_(enrolledDomain_)]]">
               [[i18nDynamic(locale,'oauthEnrollSuccessTitle')]]
             </div>
             <div hidden="[[isEmpty_(enrolledDomain_)]]">
-              <div inner-h-t-m-l=
+              <html-echo content=
                   "[[successText_(locale, deviceName_, enrolledDomain_)]]">
-              </div>
+              </html-echo>
               <div>[[i18nDynamic(locale, 'oauthEnrollAbeSuccessSupport')]]</div>
             </div>
           </div>
@@ -94,7 +98,7 @@
             <oobe-text-button inverse id="success-done-button"
                 on-tap="onEnrollmentFinished_"
                 class="focus-on-show">
-              <div i18n-content="oauthEnrollDone"></div>
+              <div>[[i18nDynamic(locale, 'oauthEnrollDone')]]</div>
             </oobe-text-button>
           </div>
         </oobe-dialog>
@@ -105,31 +109,39 @@
           <hd-iron-icon slot="oobe-icon"
               icon1x="oobe-32:briefcase" icon2x="oobe-64:briefcase">
           </hd-iron-icon>
-          <h1 slot="title" i18n-content="oauthEnrollScreenTitle"></h1>
-          <div slot="subtitle" i18n-content="oauthEnrollDeviceInformation">
+          <h1 slot="title">
+            [[i18nDynamic(locale, 'oauthEnrollScreenTitle')]]
+          </h1>
+          <div slot="subtitle">
+            [[i18nDynamic(locale, 'oauthEnrollDeviceInformation')]]
           </div>
           <div slot="footer" class="layout vertical start">
             <div class="oauth-enroll-step-message">
-                      <span id="oauth-enroll-attribute-prompt-message"
-                            i18n-content="oauthEnrollAttributeExplanation">
-                      </span>
+              <span id="oauth-enroll-attribute-prompt-message">
+                [[i18nDynamic(locale, 'oauthEnrollAttributeExplanation')]]
+              </span>
               <a href="#" id="oauth-enroll-learn-more-link"
-                 class="oauth-enroll-link"
-                 i18n-content="oauthEnrollExplainAttributeLink"></a>
+                 class="oauth-enroll-link">
+                [[i18nDynamic(locale, 'oauthEnrollExplainAttributeLink')]]
+              </a>
             </div>
             <gaia-input id="oauth-enroll-asset-id" type="text"
                         class="focus-on-show">
-              <div slot="label" i18n-content="oauthEnrollAssetIdLabel">
+              <div slot="label">
+                [[i18nDynamic(locale, 'oauthEnrollAssetIdLabel')]]
               </div>
             </gaia-input>
             <gaia-input id="oauth-enroll-location" type="text">
-              <div slot="label" i18n-content="oauthEnrollLocationLabel">
+              <div slot="label">
+                [[i18nDynamic(locale, 'oauthEnrollLocationLabel')]]
               </div>
             </gaia-input>
           </div>
           <div slot="bottom-buttons" class="layout horizontal end-justified">
             <oobe-text-button id="attributes-skip" on-tap="skipAttributes_">
-              <div i18n-content="oauthEnrollSkip"></div>
+              <div>
+                [[i18nDynamic(locale, 'oauthEnrollSkip')]]
+              </div>
             </oobe-text-button>
             <div class="flex"></div>
             <oobe-next-button id="attributes-submit"

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

@@ -55,20 +55,24 @@
           </gaia-header>
           <div slot="footer" class="gaia-body-text"
               class="horizontal layout center">
-            <p i18n-content="passwordChangedTitle">
-            </p>
+            <p>[[i18nDynamic(locale, 'passwordChangedTitle')]]</p>
           </div>
           <gaia-input-form slot="footer" id="oldPasswordInputForm"
               disabled="[[disabled]]" on-submit="onPasswordSubmitted_"
               i18n-values="button-text:nextButtonText">
             <gaia-input slot="inputs" id="oldPasswordInput" type="password"
                 required>
-              <div slot="label" i18n-content="oldPasswordHint"></div>
-              <div slot="error" i18n-content="oldPasswordIncorrect"></div>
+              <div slot="label">
+                [[i18nDynamic(locale,'oldPasswordHint')]]
+              </div>
+              <div slot="error">
+                [[i18nDynamic(locale,'oldPasswordIncorrect')]]
+              </div>
             </gaia-input>
             <gaia-button id="forgot-password-link"
-                on-click="onForgotPasswordClicked_"
-                i18n-content="forgotOldPasswordButtonText" link></gaia-button>
+                on-click="onForgotPasswordClicked_" link>
+              [[i18nDynamic(locale,'forgotOldPasswordButtonText')]]
+            </gaia-button>
           </gaia-input-form>
         </gaia-card>
       </neon-animatable>
@@ -79,14 +83,18 @@
           <div slot="footer">
             <div class="gaia-body-text horizontal layout center">
               <iron-icon icon="cr:warning"></iron-icon>
-              <p i18n-content="passwordChangedProceedAnywayTitle" class="flex">
+              <p class="flex">
+                [[i18nDynamic(locale,'passwordChangedProceedAnywayTitle')]]
               </p>
             </div>
             <div class="horizontal layout justified center">
-              <gaia-button id="try-again-link" on-click="onTryAgainClicked_"
-                  i18n-content="passwordChangedTryAgain" link></gaia-button>
-              <gaia-button id="proceedAnywayBtn" on-click="onProceedClicked_"
-                  i18n-content="proceedAnywayButton"></gaia-button>
+              <gaia-button id="try-again-link"
+                  on-click="onTryAgainClicked_" link>
+                [[i18nDynamic(locale,'passwordChangedTryAgain')]]
+              </gaia-button>
+              <gaia-button id="proceedAnywayBtn" on-click="onProceedClicked_">
+                [[i18nDynamic(locale,'proceedAnywayButton')]]
+              </gaia-button>
             </div>
           </div>
         </gaia-card>

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

@@ -5,6 +5,8 @@
 Polymer({
   is: 'gaia-password-changed',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     email: String,
 

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

@@ -114,7 +114,7 @@
             class="multidevice-help-overlay-close-top
                 multidevice-help-overlay-close-button"
             on-click="hideWebviewOverlay_"
-            title="[[getOverlayCloseTopTitle_()]]">
+            title="[[i18nDynamic(locale, 'arcOverlayClose')]]">
         </div>
         <div id="multidevice-help-overlay-webview-container">
           <div class="multidevice-help-overlay-webview-loading
@@ -132,7 +132,7 @@
               on-click="hideWebviewOverlay_">
             <!-- TODO(crbug.com/894537): Use string that is specific to
                     MultiDevice. -->
-            <div i18n-content="arcOverlayClose"></div>
+            <div>[[i18nDynamic(locale, 'arcOverlayClose')]]</div>
           </oobe-text-button>
         </div>
       </div>

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

@@ -161,11 +161,6 @@ cr.define('multidevice_setup', function() {
       this.webviewSrc_ = event.detail;
       this.webviewOverlayHidden_ = false;
     },
-
-    /** @private */
-    getOverlayCloseTopTitle_: function() {
-      return this.i18n('arcOverlayClose');
-    },
   });
 
   return {

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

@@ -108,11 +108,13 @@
     </oobe-dialog>
     <cr-dialog id="forgotPasswordDlg"
         on-close="onDialogOverlayClosed_">
-      <div slot="body"
-          i18n-content="offlineLoginForgotPasswordDlg"></div>
+      <div slot="body">
+        [[i18nDynamic(locale, 'offlineLoginForgotPasswordDlg')]]
+      </div>
       <div slot="button-container">
         <cr-button autofocus on-tap="onForgotPasswordCloseTap_"
-            i18n-content="offlineLoginCloseBtn" class="action-button">
+            class="action-button">
+          [[i18nDynamic(locale, 'offlineLoginCloseBtn')]]
         </cr-button>
       </div>
     </cr-dialog>

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

@@ -138,7 +138,7 @@
 
   Example:
     <oobe-welcome-secondary-button icon="close">
-      <div i18n-content="oobeCloseButtonText"></div>
+      <div>[[i18nDynamic(locale, 'offlineLoginCloseBtn')]]</div>
     </oobe-welcome-secondary-button>
 
   Attributes:

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

@@ -74,5 +74,14 @@ login.createScreen(
               $('ad-password-change'), cr.ui.Bubble.Attachment.BOTTOM, error,
               BUBBLE_HORIZONTAL_PADDING, BUBBLE_VERTICAL_PADDING);
         },
+
+        /**
+         * Updates localized content of the screen that is not updated via
+         * template.
+         */
+        updateLocalizedContent: function() {
+          $('active-directory-password-change').i18nUpdateLocale();
+        },
+
       };
     });

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

@@ -56,6 +56,14 @@ login.createScreen('PasswordChangedScreen', 'password-changed', function() {
       // We'll get here after the successful online authentication.
       Oobe.showScreen({id: SCREEN_PASSWORD_CHANGED});
       Oobe.getInstance().setSigninUIState(SIGNIN_UI_STATE.PASSWORD_CHANGED);
-    }
+    },
+
+    /**
+     * Updates localized content of the screen that is not updated via template.
+     */
+    updateLocalizedContent: function() {
+      this.gaiaPasswordChanged_.i18nUpdateLocale();
+    },
+
   };
 });