Change oobe screens to use proper i18n implementation

Also adds parts required to show update-required screen

Bug: 692763
Change-Id: I233e38ca3ba4051a582c80badc176f98f582956a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1893288
Commit-Queue: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712150}

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

@@ -48,5 +48,6 @@
 <include src="../assistant_optin/assistant_optin_flow.html">
 <include src="multidevice_setup_first_run.html">
 <include src="security_token_pin.html">
+<include src="update_required_card.html">
 
 <script src="chrome://oobe/custom_elements.js"></script>

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

@@ -58,3 +58,4 @@
 // <include src="../assistant_optin/assistant_optin_flow.js">
 // <include src="multidevice_setup_first_run.js">
 // <include src="security_token_pin.js">
+// <include src="update_required_card.js">

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

@@ -19,15 +19,18 @@
     <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="$i18n{gaiaLoading}"></throbber-notice>
+          <throbber-notice
+              text="[[i18nDynamic(locale,'gaiaLoading')]]"></throbber-notice>
         </div>
       </oobe-dialog>
     </template>
     <template is="dom-if" if="[[isReady_(uiState)]]">
       <oobe-dialog tabindex="0" id="ready-dialog" has-buttons>
         <iron-icon slot="oobe-icon" class="warning-icon"></iron-icon>
-        <h1 slot="title">$i18n{migrationReadyTitle}</h1>
-        <div slot="subtitle">$i18n{migrationReadyDescription}</div>
+        <h1 slot="title">[[i18nDynamic(locale,'migrationReadyTitle')]]</h1>
+        <div slot="subtitle">
+          [[i18nDynamic(locale,'migrationReadyDescription')]]
+        </div>
         <template is="dom-if" if="[[isEnoughBattery]]">
           <div slot="footer" class="layout vertical center">
             <img srcset="images/security_update_1x.png 1x,
@@ -38,16 +41,17 @@
         <template is="dom-if" if="[[!isEnoughBattery]]">
           <div slot="footer" class="layout vertical" aria-live="polite">
             <div class="warning">
-              [[computeBatteryWarningLabel_(batteryPercent)]]
+              [[computeBatteryWarningLabel_(locale, batteryPercent)]]
             </div>
             <template is="dom-if" if="[[isCharging]]">
-              <div>$i18n{migrationChargingLabel}</div>
+              <div>[[i18nDynamic(locale,'migrationChargingLabel')]]</div>
             </template>
             <template is="dom-if" if="[[!isCharging]]">
-              <div>$i18n{migrationAskChargeMessage}</div>
+              <div>[[i18nDynamic(locale,'migrationAskChargeMessage')]]</div>
             </template>
             <div>
-              [[computeNecessaryBatteryLevelLabel_(necessaryBatteryPercent)]]
+              [[computeNecessaryBatteryLevelLabel_(locale,
+                                                   necessaryBatteryPercent)]]
             </div>
           </div>
         </template>
@@ -57,11 +61,11 @@
             <div class="flex"></div>
             <oobe-text-button border id="skip-button" on-tap="onSkip_"
                 hidden="[[isSkipHidden_()]]">
-              <div>$i18n{migrationButtonSkip}</div>
+              <div>[[i18nDynamic(locale,'migrationButtonSkip')]]</div>
             </oobe-text-button>
             <oobe-text-button inverse id="upgrade-button" on-tap="onUpgrade_"
                 disabled="[[isUpdateDisabled_(isEnoughBattery, isSkipped)]]">
-              <div>$i18n{migrationButtonUpdate}</div>
+              <div>[[i18nDynamic(locale,'migrationButtonUpdate')]]</div>
             </oobe-text-button>
           </div>
         </template>
@@ -70,15 +74,19 @@
     <template is="dom-if" if="[[isMigrating_(uiState)]]">
       <oobe-dialog id="migrating-dialog" tabindex="0">
         <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
-        <h1 slot="title">$i18n{migrationMigratingTitle}</h1>
-        <div slot="subtitle">$i18n{migrationMigratingDescription}</div>
+        <h1 slot="title">[[i18nDynamic(locale,'migrationMigratingTitle')]]</h1>
+        <div slot="subtitle">
+          [[i18nDynamic(locale,'migrationMigratingDescription')]]
+        </div>
         <div slot="footer" class="flex layout vertical">
           <paper-progress id="migration-progress"
               value="[[progress]]" max="1" step="0.001"
               indeterminate="[[isProgressIndeterminate_(progress)]]">
           </paper-progress>
           <template is="dom-if" if="[[!isProgressIndeterminate_(progress)]]">
-            <div aria-live="polite">[[computeProgressLabel_(progress)]]</div>
+            <div aria-live="polite">
+              [[computeProgressLabel_(locale, progress)]]
+            </div>
           </template>
         </div>
       </oobe-dialog>
@@ -87,19 +95,23 @@
       <oobe-dialog id="error-dialog" tabindex="0" has-buttons>
         <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
         </iron-icon>
-        <h1 slot="title">$i18n{migrationFailedTitle}</h1>
-        <div slot="subtitle">$i18n{migrationFailedSubtitle}</div>
-        <div slot="footer"><div>$i18n{migrationFailedMessage}</div></div>
+        <h1 slot="title">[[i18nDynamic(locale,'migrationFailedTitle')]]</h1>
+        <div slot="subtitle">
+          [[i18nDynamic(locale,'migrationFailedSubtitle')]]
+        </div>
+        <div slot="footer">
+          <div>[[i18nDynamic(locale,'migrationFailedMessage')]]</div>
+        </div>
         <div slot="bottom-buttons" class="flex layout horizontal">
           <div class="flex"></div>
 <if expr="_google_chrome">
           <oobe-text-button border on-tap="onReportAnIssue_">
-            <div>$i18n{migrationButtonReportAnIssue}</div>
+            <div>[[i18nDynamic(locale,'migrationButtonReportAnIssue')]]</div>
           </oobe-text-button>
 </if>
           <oobe-text-button inverse id="restart-button"
               on-tap="onRestartOnFailure_">
-            <div>$i18n{migrationButtonRestart}</div>
+            <div>[[i18nDynamic(locale,'migrationButtonRestart')]]</div>
           </oobe-text-button>
         </div>
       </oobe-dialog>
@@ -107,26 +119,34 @@
     <template is="dom-if" if="[[isNotEnoughSpace_(uiState)]]">
       <oobe-dialog id="insufficient-space-dialog" tabindex="0" has-buttons>
         <iron-icon slot="oobe-icon" class="chrome-logo"></iron-icon>
-        <h1 slot="title">$i18n{migrationReadyTitle}</h1>
-        <div slot="subtitle">$i18n{migrationReadyDescription}</div>
+        <h1 slot="title">[[i18nDynamic(locale,'migrationReadyTitle')]]</h1>
+        <div slot="subtitle">
+          [[i18nDynamic(locale,'migrationReadyDescription')]]
+        </div>
         <div slot="footer" class="layout vertical" aria-live="polite">
-          <div class="warning">$i18n{migrationNospaceWarningLabel}</div>
-          <div>$i18n{migrationAskFreeSpaceMessage}</div>
-          <div>[[computeAvailableSpaceLabel_(availableSpaceInString)]]</div>
-          <div>[[computeNecessarySpaceLabel_(necessarySpaceInString)]]</div>
+          <div class="warning">
+            [[i18nDynamic(locale,'migrationNospaceWarningLabel')]]
+          </div>
+          <div>[[i18nDynamic(locale,'migrationAskFreeSpaceMessage')]]</div>
+          <div>
+            [[computeAvailableSpaceLabel_(locale, availableSpaceInString)]]
+          </div>
+          <div>
+            [[computeNecessarySpaceLabel_(locale, necessarySpaceInString)]]
+          </div>
         </div>
         <div slot="bottom-buttons" class="flex layout horizontal">
           <div class="flex"></div>
           <template is="dom-if" if="[[!isResuming]]">
             <oobe-text-button inverse id="insufficient-space-skip-button"
                 on-tap="onSkip_">
-              <div>$i18n{migrationButtonContinue}</div>
+              <div>[[i18nDynamic(locale,'migrationButtonContinue')]]</div>
             </oobe-text-button>
           </template>
           <template is="dom-if" if="[[isResuming]]">
             <oobe-text-button inverse id="insufficient-space-restart-button"
                 on-tap="onRestartOnLowStorage_">
-              <div>$i18n{migrationButtonRestart}</div>
+              <div>[[i18nDynamic(locale,'migrationButtonRestart')]]</div>
             </oobe-text-button>
           </template>
         </div>

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

@@ -168,52 +168,58 @@ Polymer({
 
   /**
    * Computes the label shown under progress bar.
+   * @param {string} locale
    * @param {number} progress
    * @return {string}
    * @private
    */
-  computeProgressLabel_: function(progress) {
+  computeProgressLabel_: function(locale, progress) {
     return this.i18n('migrationProgressLabel', Math.floor(progress * 100));
   },
 
   /**
    * Computes the warning label when battery level is not enough.
+   * @param {string} locale
    * @param {number} batteryPercent
    * @return {string}
    * @private
    */
-  computeBatteryWarningLabel_: function(batteryPercent) {
+  computeBatteryWarningLabel_: function(locale, batteryPercent) {
     return this.i18n('migrationBatteryWarningLabel', batteryPercent);
   },
 
   /**
    * Computes the label to show the necessary battery level for migration.
+   * @param {string} locale
    * @param {number} necessaryBatteryPercent
    * @return {string}
    * @private
    */
-  computeNecessaryBatteryLevelLabel_: function(necessaryBatteryPercent) {
+  computeNecessaryBatteryLevelLabel_: function(
+      locale, necessaryBatteryPercent) {
     return this.i18n(
         'migrationNecessaryBatteryLevelLabel', necessaryBatteryPercent);
   },
 
   /**
    * Computes the label to show the current available space.
+   * @param {string} locale
    * @param {string} availableSpaceInString
    * @return {string}
    * @private
    */
-  computeAvailableSpaceLabel_: function(availableSpaceInString) {
+  computeAvailableSpaceLabel_: function(locale, availableSpaceInString) {
     return this.i18n('migrationAvailableSpaceLabel', availableSpaceInString);
   },
 
   /**
    * Computes the label to show the necessary space to start migration.
+   * @param {string} locale
    * @param {string} necessarySpaceInString
    * @return {string}
    * @private
    */
-  computeNecessarySpaceLabel_: function(necessarySpaceInString) {
+  computeNecessarySpaceLabel_: function(locale, necessarySpaceInString) {
     return this.i18n('migrationNecessarySpaceLabel', necessarySpaceInString);
   },
 

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

@@ -95,6 +95,7 @@ cr.define('cr.ui.Oobe', function() {
       login.MarketingOptInScreen.register();
       login.AssistantOptInFlowScreen.register();
       login.MultiDeviceSetupScreen.register();
+      login.UpdateRequiredScreen.register();
 
       cr.ui.Bubble.decorate($('bubble-persistent'));
       $('bubble-persistent').persistent = true;

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

@@ -102,6 +102,7 @@ cr.define('cr.ui.Oobe', function() {
       login.MarketingOptInScreen.register();
       login.AssistantOptInFlowScreen.register();
       login.MultiDeviceSetupScreen.register();
+      login.UpdateRequiredScreen.register();
 
       cr.ui.Bubble.decorate($('bubble-persistent'));
       $('bubble-persistent').persistent = true;

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

@@ -8,19 +8,21 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_supervision_transition.css">
     <oobe-dialog id="supervisionTransitionDialog" role="alert"
-        aria-label$="[[getDialogA11yTitle_(isRemovingSupervision_, locale)]]">
+        aria-label$="[[getDialogA11yTitle_(locale, isRemovingSupervision_)]]">
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           aria-hidden="true">
       </iron-icon>
       <h1 slot="title" id="supervisionTitle">
         <div hidden="[[isRemovingSupervision_]]">
-          $i18n{addingSupervisionTitle}
+          [[i18nDynamic(locale,'addingSupervisionTitle')]]
         </div>
         <div hidden="[[!isRemovingSupervision_]]">
-          $i18n{removingSupervisionTitle}
+          [[i18nDynamic(locale,'removingSupervisionTitle')]]
         </div>
       </h1>
-      <div slot="subtitle">$i18n{supervisionTransitionIntroMessage}</div>
+      <div slot="subtitle">
+        [[i18nDynamic(locale,'supervisionTransitionIntroMessage')]]
+      </div>
       <div slot="footer" aria-live="off">
         <paper-progress class="slow" aria-hidden="true" indeterminate>
         </paper-progress>
@@ -32,12 +34,16 @@
       <iron-icon src="chrome://oobe/supervision_icon.png" slot="oobe-icon"
           aria-hidden="true">
       </iron-icon>
-      <h1 slot="title">$i18n{supervisionTransitionErrorTitle}</h1>
-      <div slot="subtitle">$i18n{supervisionTransitionErrorMessage}</div>
+      <h1 slot="title">
+        [[i18nDynamic(locale,'supervisionTransitionErrorTitle')]]
+      </h1>
+      <div slot="subtitle">
+        [[i18nDynamic(locale,'supervisionTransitionErrorMessage')]]
+      </div>
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <oobe-text-button id="accept-button" on-tap="onAcceptAndContinue_"
             inverse>
-          <div>$i18n{supervisionTransitionButton}</div>
+          <div>[[i18nDynamic(locale,'supervisionTransitionButton')]]</div>
         </oobe-text-button>
       </div>
     </oobe-dialog>

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

@@ -31,10 +31,9 @@ Polymer({
   },
 
   /** @private */
-  getDialogA11yTitle_: function(isRemovingSupervision, locale) {
-    return isRemovingSupervision ?
-        this.i18nDynamic(locale, 'removingSupervisionTitle') :
-        this.i18nDynamic(locale, 'addingSupervisionTitle');
+  getDialogA11yTitle_: function(locale, isRemovingSupervision) {
+    return isRemovingSupervision ? this.i18n('removingSupervisionTitle') :
+                                   this.i18n('addingSupervisionTitle');
   },
 
   /** @private */

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

@@ -22,34 +22,34 @@
       <div slot="subtitle">
         <div hidden="[[showOn_(ui_state, 'update-error')]]"
             class="update-error">
-          $i18n{errorMessage}
+          [[i18nDynamic(locale,'errorMessage')]]
         </div>
         <div>
-          $i18n{updateRequiredMessage}
+          [[i18nDynamic(locale,'updateRequiredMessage')]]
         </div>
       </div>
 
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <cr-button disabled="[[selectNetworkDisabled]]"
             on-click="onSelectNetworkClicked_">
-          $i18n{selectNetworkButtonCaption}
+          [[i18nDynamic(locale,'selectNetworkButtonCaption')]]
         </cr-button>
         <cr-button disabled="[[!isConnected]]" on-click="onUpdateClicked_">
-          $i18n{updateButtonCaption}
+          [[i18nDynamic(locale,'updateButtonCaption')]]
         </cr-button>
       </div>
     </oobe-dialog>
 
     <oobe-dialog hidden="[[showOn_(ui_state, 'update-process')]]" has-buttons>
       <h1 slot="title" hidden="[[!updateProgressUnavailable]]">
-        $i18n{checkingForUpdatesTitle}
+        [[i18nDynamic(locale,'checkingForUpdatesTitle')]]
       </h1>
       <paper-progress slot="progress" indeterminate
           hidden="[[!updateProgressUnavailable]]">
       </paper-progress>
 
       <h1 slot="title" hidden="[[updateProgressUnavailable]]">
-          $i18n{updatingTitle}
+          [[i18nDynamic(locale,'updatingTitle')]]
       </h1>
       <paper-progress slot="progress" min="0" max="100"
           value="[[updateProgressValue]]"
@@ -72,17 +72,17 @@
     <oobe-dialog hidden="[[showOn_(ui_state, 'update-need-permission')]]"
         has-buttons>
       <h1 slot="title">
-        $i18n{updateOverCellularPromptTitle}
+        [[i18nDynamic(locale,'updateOverCellularPromptTitle')]]
       </h1>
       <div slot="subtitle" class="update-subtitle">
-        $i18n{updateOverCellularPromptMessage}
+        [[i18nDynamic(locale,'updateOverCellularPromptMessage')]]
       </div>
       <div slot="bottom-buttons" class="layout horizontal end-justified">
         <cr-button on-click="onCellularPermissionRejected_">
-          $i18n{RejectUpdateOverCellularButton}
+          [[i18nDynamic(locale,'RejectUpdateOverCellularButton')]]
         </cr-button>
         <cr-button on-click="onCellularPermissionAccepted_">
-          $i18n{AcceptUpdateOverCellularButton}
+          [[i18nDynamic(locale,'AcceptUpdateOverCellularButton')]]
         </cr-button>
       </div>
     </oobe-dialog>
@@ -91,10 +91,10 @@
         hidden="[[showOn_(ui_state, 'update-completed-need-reboot', 'eol')]]">
       <div slot="subtitle">
         <div hidden="[[showOn_(ui_state, 'update-completed-need-reboot')]]">
-          $i18n{rebootNeededMessage}
+          [[i18nDynamic(locale,'rebootNeededMessage')]]
         </div>
         <div hidden="[[showOn_(ui_state, 'eol')]]">
-          $i18n{eolMessage}
+          [[i18nDynamic(locale,'eolMessage')]]
         </div>
       </div>
     </oobe-dialog>

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

@@ -5,6 +5,8 @@
 Polymer({
   is: 'update-required-card',
 
+  behaviors: [I18nBehavior, OobeDialogHostBehavior],
+
   properties: {
     /**
      * Is device connected to network?
@@ -29,6 +31,11 @@ Polymer({
     ui_state: {type: String},
   },
 
+  /** Called after resources are updated. */
+  updateLocalizedContent: function() {
+    this.i18nUpdateLocale();
+  },
+
   /**
    * @private
    */