ChromeOS: Implement Language Selection screen of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_welcome.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.js b/chrome/browser/resources/chromeos/login/oobe_welcome.js
index 5b489319198265e3f739778f0a5b0a38a18673de..b3ab4ed98a7ecd5c19d674a80cfa33d2ac96412c 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.js
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.js
@@ -11,15 +11,47 @@ Polymer({
 
   properties: {
     /**
-     * Currently selected system language.
+     * Currently selected system language (display name).
      */
     currentLanguage: {
       type: String,
-      value: 'English (US)',
+      value: null,
     },
 
     /**
-     * Flag that switches Welcome screen to Network Selection screen.
+     * List of languages for language selector dropdown.
+     */
+    oobeLanguages: {
+      type: Array,
+      value: null,
+    },
+
+    /**
+     * List of keyboards for keyboard selector dropdown.
+     */
+    oobeKeyboards: {
+      type: Array,
+      value: null,
+    },
+
+    /**
+     * Flag that shows Welcome screen.
+     */
+    welcomeScreenShown: {
+      type: Boolean,
+      value: true,
+    },
+
+    /**
+     * Flag that shows Language Selection screen.
+     */
+    languageSelectionScreenShown: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Flag that shows Network Selection screen.
      */
     networkSelectionScreenShown: {
       type: Boolean,
@@ -28,6 +60,15 @@ Polymer({
   },
 
   /**
+   * Hides all screens to help switching from one screen to another.
+   */
+  hideAllScreens_: function() {
+    this.welcomeScreenShown = false;
+    this.networkSelectionScreenShown = false;
+    this.languageSelectionScreenShown = false;
+  },
+
+  /**
    * GUID of the user-selected network. It is remembered after user taps on
    * network entry. After we receive event "connected" on this network,
    * OOBE will proceed.
@@ -85,10 +126,21 @@ Polymer({
    * @private
    */
   onWelcomeNextButtonClicked_: function() {
+    this.hideAllScreens_();
     this.networkSelectionScreenShown = true;
   },
 
   /**
+   * Handle "Language" button for "Welcome" screen.
+   *
+   * @private
+   */
+  onWelcomeSelectLanguageButtonClicked_: function() {
+    this.hideAllScreens_();
+    this.languageSelectionScreenShown = true;
+  },
+
+  /**
    * Handle Networwork Setup screen "Proxy settings" button.
    *
    * @private
@@ -185,4 +237,50 @@ Polymer({
     var itemState = e.detail;
     itemState.customData.onTap();
   },
+
+  onLanguageSelected_: function(event) {
+    var item = event.detail;
+    var languageId = item.value;
+    this.screen.onLanguageSelected_(languageId);
+  },
+
+  onKeyboardSelected_: function(event) {
+    var item = event.detail;
+    var inputMethodId = item.value;
+    this.screen.onKeyboardSelected_(inputMethodId);
+  },
+
+  /**
+   * Handle "OK" button for "LanguageSelection" screen.
+   *
+   * @private
+   */
+  closeLanguageSection_: function() {
+    this.hideAllScreens_();
+    this.welcomeScreenShown = true;
+  },
+
+  /**
+   * TODO(stevenjb): Replace getText with a proper localization function that
+   * handles string substitution.
+   * Performs argument substitution, replacing $1, $2, etc in 'text' with
+   * corresponding entries in |args|.
+   * @param {string} text The string to perform the substitution on.
+   * @param {?Array<string>=} opt_args The arguments to replace $1, $2, etc
+   *                                   with.
+   */
+  getText_: function(text, opt_args) {
+    var res;
+    if (loadTimeData && loadTimeData.data_)
+      res = loadTimeData.getString(text) || text;
+    else
+      res = text;
+    if (!opt_args)
+      return res;
+    for (let i = 0; i < opt_args.length; ++i) {
+      let key = '$' + (i + 1);
+      res = res.replace(key, opt_args[i]);
+    }
+    return res;
+  },
 });