Reland of: Use proper localization mechanism for throbber-notice element.

Bug: 955194

Previously reviewed on: https://chromium-review.googlesource.com/c/chromium/src/+/1953626

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

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

@@ -70,7 +70,7 @@
         </gaia-card>
       </neon-animatable>
       <neon-animatable class="fit">
-        <throbber-notice class="fit" i18n-values="text:gaiaLoading">
+        <throbber-notice class="fit" text-key="gaiaLoading">
         </throbber-notice>
       </neon-animatable>
     </neon-animated-pages>

chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.html

@@ -35,7 +35,8 @@
     <oobe-dialog id="loading" role="dialog" no-header no-footer-padding
         hidden="[[isStepHidden_(step_, 'loading')]]">
       <div slot="footer" class="flex layout vertical center center-justified">
-        <throbber-notice text="Please wait">
+        <!--TODO(crbug.com/955194): use proper localization key -->
+        <throbber-notice text-key="gaiaLoading">
         </throbber-notice>
       </div>
     </oobe-dialog>

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

@@ -19,8 +19,7 @@
     <template is="dom-if" if="[[isMigratingMinimal_(uiState)]]">
       <oobe-dialog id="minimal-migration-dialog" tabindex="0" has-buttons>
         <div slot="footer" class="layout vertical">
-          <throbber-notice
-              text="[[i18nDynamic(locale,'gaiaLoading')]]"></throbber-notice>
+          <throbber-notice text-key="gaiaLoading"></throbber-notice>
         </div>
       </oobe-dialog>
     </template>

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

@@ -96,7 +96,7 @@
         </gaia-card>
       </neon-animatable>
       <neon-animatable class="fit">
-        <throbber-notice class="fit" i18n-values="text:gaiaLoading">
+        <throbber-notice class="fit" text-key="gaiaLoading">
         </throbber-notice>
       </neon-animatable>
     </neon-animated-pages>

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

@@ -118,7 +118,7 @@
           <div class="multidevice-help-overlay-webview-loading
                       layout horizontal center-center"
               hidden$="[[!isWebviewLoading_]]">
-            <throbber-notice i18n-values="text:gaiaLoading"></throbber-notice>
+            <throbber-notice text-key="gaiaLoading"></throbber-notice>
           </div>
           <webview id="multideviceHelpOverlayWebview"
               hidden$="[[isWebviewLoading_]]"

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

@@ -49,8 +49,7 @@
       </div>
       <div slot="footer" class="flex layout center-justified vertical">
         <div hidden="[[!isLoading_(uiState)]]">
-          <throbber-notice id="termsOfServiceLoadingThrobber"
-              text="[[i18nDynamic(locale, termsOfServiceLoading)]]">
+          <throbber-notice text-key="termsOfServiceLoading">
           </throbber-notice>
         </div>
         <webview id="termsOfServiceFrame" hidden="[[isLoading_(uiState)]]"

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

@@ -77,7 +77,7 @@
         </gaia-card>
       </neon-animatable>
       <neon-animatable class="fit">
-        <throbber-notice i18n-values="text:gaiaLoading" class="fit">
+        <throbber-notice text-key="gaiaLoading" class="fit">
         </throbber-notice>
       </neon-animatable>
     </neon-animated-pages>

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

@@ -79,7 +79,7 @@
     </oobe-dialog>
     <div id="gaia-loading" class="step-loading gaia-dialog"
         hidden="[[!isStep_(step_, 'loading', 'gaia-loading')]]">
-      <throbber-notice i18n-values="text:gaiaLoading"></throbber-notice>
+      <throbber-notice text-key="gaiaLoading"></throbber-notice>
     </div>
     <notification-card id="gaia-whitelist-error" type="fail" class="gaia-dialog"
         hidden="[[!isStep_(step_, 'whitelist-error')]]"

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

@@ -8,7 +8,7 @@
   <oobe-dialog id="recommend-apps-loading" role="dialog" no-header
                no-footer-padding>
     <div slot="footer" class="flex layout vertical center center-justified">
-      <throbber-notice i18n-values="text:recommendAppsLoading">
+      <throbber-notice text-key="recommendAppsLoading">
       </throbber-notice>
     </div>
   </oobe-dialog>

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

@@ -9,7 +9,7 @@
   <oobe-dialog id="sync-loading" role="dialog" no-header no-footer-padding
       hidden>
     <div slot="footer" class="flex layout vertical center center-justified">
-      <throbber-notice i18n-values="text:gaiaLoading">
+      <throbber-notice text-key="gaiaLoading">
       </throbber-notice>
     </div>
   </oobe-dialog>

chrome/browser/resources/chromeos/login/throbber_notice.css

@@ -16,7 +16,7 @@ paper-spinner-lite {
   width: 38px;
 }
 
-#spinner-comment {
+#comment {
+  @apply --oobe-default-font;
   color: #747474;
-  font-size: 13px;
 }

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

@@ -11,8 +11,9 @@
   <link rel="stylesheet" href="throbber_notice.css">
   <template>
     <paper-spinner-lite dir="ltr" active></paper-spinner-lite>
-    <div id="spinner-comment" aria-live="polite" aria-label="[[text]]"
-      [[text]]
+    <div id="comment" aria-live="polite"
+        aria-label$="[[i18nDynamic(locale, textKey)]]">
+      [[i18nDynamic(locale, textKey)]]
     </div>
   </template>
 </dom-module>

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

@@ -5,5 +5,7 @@
 Polymer({
   is: 'throbber-notice',
 
-  properties: {text: String}
+  behaviors: [OobeI18nBehavior],
+
+  properties: {textKey: String}
 });