ChromeOS: Implement Language Selection screen of material design OOBE.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Polymer element for displaying material design OOBE.
  */
 
 Polymer({
   is: 'oobe-welcome-md',
 
   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,
       value: false,
     },
   },
 
   /**
+   * 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.
    */
   networkLastSelectedGuid_: '',
 
   /**
    * Sets proper focus.
    */
   focus: function() {
@@ skipping 37 matching lines @@
       },
     ];
   },
 
   /**
    * Handle "Next" button for "Welcome" screen.
    *
    * @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
    */
   OpenProxySettingsDialog_: function(item) {
     chrome.send('launchProxySettingsDialog');
   },
 
   /**
    * Handle Networwork Setup screen "Add WiFi network" button.
@@ skipping 76 matching lines @@
     });
   },
 
   /**
    * @param {!Event} event
    */
   onNetworkListCustomItemSelected_: function(e) {
     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;
+  },
 });