[i18n] migrate chromeos login welcome i18n

This CL changes the chromeos login welcome page (and welcome dialog) to
use i18nDynamic rather than i18n-content and i18n-values.

Bug: 677338
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I4c871e9b9e9f8dce8aa5c5da05972936e73e2a48
Reviewed-on: https://chromium-review.googlesource.com/596778
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#491543}

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

@@ -84,7 +84,7 @@
     <link rel="stylesheet" href="oobe_dialog_parameters.css">
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <oobe-welcome-dialog id="welcomeScreen" role="dialog"
-        i18n-values="aria-label:networkScreenGreeting"
+        aria-label="[[i18nDynamic(locale, 'networkScreenGreeting')]]"
         current-language="[[currentLanguage]]"
         on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
         on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
@@ -96,7 +96,7 @@
         debugging-link-visible="[[debuggingLinkVisible]]">
     </oobe-welcome-dialog>
     <oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
-        i18n-values="aria-label:languageSectionTitle">
+        aria-label="[[i18nDynamic(locale, 'languageSectionTitle')]]">
       <hd-iron-icon class="oobe-icon"
           icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
       </hd-iron-icon>
@@ -113,9 +113,9 @@
               [[i18nDynamic(locale, 'languageDropdownTitle')]]
             </div>
             <oobe-i18n-dropdown id="languageSelect" items="[[languages]]"
-                on-select-item="onLanguageSelected_"
-                class="focus-on-show"
-                i18n-values="label-for-aria:languageDropdownLabel">
+                on-select-item="onLanguageSelected_" class="focus-on-show"
+                label-for-aria=
+                    "[[i18nDynamic(locale, 'languageDropdownLabel')]]">
             </oobe-i18n-dropdown>
           </div>
           <div id="keyboardDropdownContainer"
@@ -127,7 +127,8 @@
             </div>
             <oobe-i18n-dropdown id="keyboardSelect" items="[[keyboards]]"
                 on-select-item="onKeyboardSelected_"
-                i18n-values="label-for-aria:keyboardDropdownLabel">
+                label-for-aria=
+                    "[[i18nDynamic(locale, 'keyboardDropdownLabel')]]">
             </oobe-i18n-dropdown>
           </div>
         </template>
@@ -139,7 +140,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons
-        i18n-values="aria-label:accessibilitySectionTitle">
+        aria-label="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
       <hd-iron-icon class="oobe-icon"
           icon1x="oobe-welcome-32:accessibility"
           icon2x="oobe-welcome-64:accessibility">
@@ -156,7 +157,7 @@
         <oobe-a11y-option checked="[[a11yStatus.spokenFeedbackEnabled]]"
             on-change="onA11yOptionChanged_"
             chrome-message="enableSpokenFeedback"
-            i18n-values="label-for-aria:spokenFeedbackOption"
+            label-for-aria="[[i18nDynamic(locale, 'spokenFeedbackOption')]]"
             class="focus-on-show">
           <span class="title">
             [[i18nDynamic(locale, 'spokenFeedbackOption')]]
@@ -169,9 +170,8 @@
           </span>
         </oobe-a11y-option>
         <oobe-a11y-option checked="[[a11yStatus.largeCursorEnabled]]"
-            on-change="onA11yOptionChanged_"
-            chrome-message="enableLargeCursor"
-            i18n-values="label-for-aria:largeCursorOption">
+            on-change="onA11yOptionChanged_" chrome-message="enableLargeCursor"
+            label-for-aria="[[i18nDynamic(locale, 'largeCursorOption')]]">
           <span class="title">
             [[i18nDynamic(locale, 'largeCursorOption')]]
           </span>
@@ -183,9 +183,8 @@
           </span>
         </oobe-a11y-option>
         <oobe-a11y-option checked="[[a11yStatus.highContrastEnabled]]"
-            on-change="onA11yOptionChanged_"
-            chrome-message="enableHighContrast"
-            i18n-values="label-for-aria:highContrastOption">
+            on-change="onA11yOptionChanged_" chrome-message="enableHighContrast"
+            label-for-aria="[[i18nDynamic(locale, 'highContrastOption')]]">
           <span class="title">
             [[i18nDynamic(locale, 'highContrastOption')]]
           </span>
@@ -199,7 +198,7 @@
         <oobe-a11y-option checked="[[a11yStatus.screenMagnifierEnabled]]"
             on-change="onA11yOptionChanged_"
             chrome-message="enableScreenMagnifier"
-            i18n-values="label-for-aria:screenMagnifierOption">
+            label-for-aria="[[i18nDynamic(locale, 'screenMagnifierOption')]]">
           <span class="title">
             [[i18nDynamic(locale, 'screenMagnifierOption')]]
           </span>
@@ -213,7 +212,7 @@
         <oobe-a11y-option checked="[[a11yStatus.virtualKeyboardEnabled]]"
             on-change="onA11yOptionChanged_"
             chrome-message="enableVirtualKeyboard"
-            i18n-values="label-for-aria:virtualKeyboardOption">
+            label-for-aria="[[i18nDynamic(locale, 'virtualKeyboardOption')]]">
           <span class="title">
             [[i18nDynamic(locale, 'virtualKeyboardOption')]]
           </span>
@@ -232,7 +231,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons
-        i18n-values="aria-label:timezoneSectionTitle">
+        aria-label="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
       <hd-iron-icon class="oobe-icon"
           icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
       </hd-iron-icon>
@@ -248,7 +247,7 @@
           </div>
           <oobe-i18n-dropdown id="timezoneSelect" items="[[timezones]]"
               on-select-item="onTimezoneSelected_"
-              i18n-values="label-for-aria:timezoneDropdownLabel"
+              label-for-aria="[i18nDynamic(locale, 'timezoneDropdownLabel')]]"
               class="focus-on-show">
           </oobe-i18n-dropdown>
         </div>
@@ -260,7 +259,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog" hidden has-buttons
-        i18n-values="aria-label:advancedOptionsSectionTitle">
+        aria-label="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
       <div id="oobeBoxIcon" class="oobe-icon"></div>
       <div class="header">
         <h1 class="title">
@@ -303,7 +302,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="networkSelectionScreen" role="dialog" hidden has-buttons
-        i18n-values="aria-label:networkSectionTitle"
+        aria-label="[[i18nDynamic(locale, 'networkSectionTitle')]]"
         on-show-dialog="onNetworkSelectionScreenShown_">
       <hd-iron-icon class="oobe-icon"
           icon1x="oobe-welcome-32:wifi" icon2x="oobe-welcome-64:wifi">

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

@@ -134,6 +134,7 @@ Polymer({
       proxySettingsMenuName: loadTimeData.getString('proxySettingsMenuName'),
     };
 
+    this.$.welcomeScreen.i18nUpdateLocale();
     this.i18nUpdateLocale();
   },
 

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

@@ -3,6 +3,7 @@
      found in the LICENSE file. -->
 
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 
 <!--
   OOBE Welcome screen
@@ -15,13 +16,14 @@
     <div class="layout horizontal flex">
       <div class="vertical-margin"></div>
       <div class="welcome-content flex layout vertical center">
-        <h1 id="title" i18n-content="networkScreenGreeting"></h1>
+        <h1 id="title">[[i18nDynamic(locale, 'networkScreenGreeting')]]</h1>
         <img id="welcomeIllustration"
             srcset="images/welcome_illustration_1x.png 1x,
                     images/welcome_illustration_2x.png 2x">
         <div hidden="[[!debuggingLinkVisible]]">
-          <a href="#" i18n-content="debuggingFeaturesLink"
-              on-tap="onDebuggingLinkClicked_"></a>
+          <a href="#" on-tap="onDebuggingLinkClicked_">
+            [[i18nDynamic(locale, 'debuggingFeaturesLink')]]
+          </a>
         </div>
         <div class="flex"></div>
         <div id="buttons" class="layout horizontal center">
@@ -37,19 +39,19 @@
               icon1x="oobe-welcome-32:accessibility"
               icon2x="oobe-welcome-64:accessibility"
               on-tap="onAccessibilityClicked_">
-            <div i18n-content="accessibilityLink"></div>
+            <div>[[i18nDynamic(locale, 'accessibilityLink')]]</div>
           </oobe-welcome-secondary-button>
           <oobe-welcome-secondary-button id="timezoneSettingsButton"
               icon1x="oobe-welcome-32:timezone"
               icon2x="oobe-welcome-64:timezone"
               on-tap="onTimezoneClicked_"
               hidden="[[!timezoneButtonVisible]]">
-            <div i18n-content="timezoneButtonText"></div>
+            <div>[[i18nDynamic(locale, 'timezoneButtonText')]]</div>
           </oobe-welcome-secondary-button>
           <div class="flex"></div>
           <oobe-text-button id="welcomeNextButton"
               inverse on-tap="onNextClicked_">
-            <div i18n-content="welcomeNextButtonText"></div>
+            <div>[[i18nDynamic(locale, 'welcomeNextButtonText')]]</div>
           </oobe-text-button>
         </div>
         <div id="bottom-margin"></div>

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

@@ -59,6 +59,9 @@
 
   Polymer({
     is: 'oobe-welcome-dialog',
+
+    behaviors: [I18nBehavior],
+
     properties: {
       /**
        * Currently selected system language (display name).