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..e57cc541e4f62b1529ae6c0b57a7b70e1e823141 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,

[michaelpg, 2016/07/29 06:26:50]

a nullable string is weird... what about '' or undefined?

[stevenjb, 2016/07/29 16:11:52]

Generally undefined would be preferred if used in data binding so that the dom
is only updated when the property is set (vs. twice, once with the initial value
and once when set). Note: value: can be omitted if initially undefined.

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

     },
 
     /**
-     * Flag that switches Welcome screen to Network Selection screen.
+     * List of languages for language selector dropdown.
+     */
+    oobeLanguages: {

[michaelpg, 2016/07/29 06:26:50]

nit: why not just "languages"?

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+      type: Array,

[stevenjb, 2016/07/29 16:11:52]

@type these arrays.

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+      value: null,
+    },
+
+    /**
+     * List of keyboards for keyboard selector dropdown.
+     */
+    oobeKeyboards: {

[michaelpg, 2016/07/29 06:26:50]

same: "keyboards"?

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+      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,56 @@ Polymer({
     var itemState = e.detail;
     itemState.customData.onTap();
   },
+
+  onLanguageSelected_: function(event) {

[michaelpg, 2016/07/29 06:26:50]

@param {!Event} event, @private

[stevenjb, 2016/07/29 16:11:52]

Even better, '{!{detail: {!ItemType}}} event' (here and below) where ItemType is
the correct type for Item, which currently isn't clear.

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+    var item = event.detail;
+    if (!item)
+      return;
+
+    var languageId = item.value;
+    this.screen.onLanguageSelected_(languageId);
+  },
+
+  onKeyboardSelected_: function(event) {

[michaelpg, 2016/07/29 06:26:50]

@param {!Event} event, @private

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+    var item = event.detail;
+    if (!item)
+      return;
+
+    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.
+   */

[stevenjb, 2016/07/29 16:11:52]

We should either convert login/oobe to use the i18n{} translation model we are
using in Settings, or use a shared behavior like we used to do for Settings. I
wouldn't say that this is an absolute blocker for this CL, but it makes me sad
to see this copied here. Please at least replace (stevenjb) with someone on the
oobe/login team.

[Alexander Alekseev, 2016/08/01 22:21:43]

Done.

+  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;
+  },
 });