ChromeOS: Implement Language Selection screen of material design OOBE.

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

Index: chrome/browser/resources/chromeos/login/oobe_screen_network.js
diff --git a/chrome/browser/resources/chromeos/login/oobe_screen_network.js b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
index bba9c38824784f6b889e1bd8ff050631c19f5095..3977d51116cc3e859943eb0d43f55361982f6a0f 100644
--- a/chrome/browser/resources/chromeos/login/oobe_screen_network.js
+++ b/chrome/browser/resources/chromeos/login/oobe_screen_network.js
@@ -27,27 +27,27 @@ login.createScreen('NetworkScreen', 'connect', function() {
 
     /** @override */
     decorate: function() {
-      var self = this;
-
       Oobe.setupSelect($('language-select'),
                        loadTimeData.getValue('languageList'),
-                       function(languageId) {
-                         self.context.set(CONTEXT_KEY_LOCALE, languageId);
-                         self.commitContextChanges();
-                       });
+                       this.onLanguageSelected_.bind(this));
       Oobe.setupSelect($('keyboard-select'),
                        loadTimeData.getValue('inputMethodsList'),
-                       function(inputMethodId) {
-                         self.context.set(CONTEXT_KEY_INPUT_METHOD,
-                                          inputMethodId);
-                         self.commitContextChanges();
-                       });
+                       this.onKeyboardSelected_.bind(this));
       Oobe.setupSelect($('timezone-select'),
                        loadTimeData.getValue('timezoneList'),
-                       function(timezoneId) {
-                         self.context.set(CONTEXT_KEY_TIMEZONE, timezoneId);
-                         self.commitContextChanges();
-                       });
+                       this.onTimezoneSelected_.bind(this));
+
+      // ---------- Welcome screen
+      var welcomeScreen = $('oobe-welcome-md');
+      welcomeScreen.screen = this;
+
+      var languageList = loadTimeData.getValue('languageList');

[michaelpg, 2016/08/04 22:59:28]

this section looks like it's doing the same work that oobe.js does. is this a
different instance of oobe-welcome-md?

[Alexander Alekseev, 2016/08/04 23:06:44]

This is called during initialization.
The code that looks the same in oobe.js is called when language is changed, so
all strings are replaced.

The problem is that the initialization data and updates are different in
structure, that is why we have different implementations.

+      welcomeScreen.languages = languageList;
+      welcomeScreen.currentLanguage = Oobe.getSelectedTitle(languageList);
+
+      var inputMethodsList = loadTimeData.getValue('inputMethodsList');
+      welcomeScreen.keyboards = inputMethodsList;
+      // -------------------------
 
       this.dropdown_ = $('networks-list');
       cr.ui.DropDown.decorate(this.dropdown_);
@@ -81,6 +81,21 @@ login.createScreen('NetworkScreen', 'connect', function() {
       });
     },
 
+    onLanguageSelected_: function(languageId) {
+      this.context.set(CONTEXT_KEY_LOCALE, languageId);
+      this.commitContextChanges();
+    },
+
+    onKeyboardSelected_: function(inputMethodId) {
+      this.context.set(CONTEXT_KEY_INPUT_METHOD, inputMethodId);
+      this.commitContextChanges();
+    },
+
+    onTimezoneSelected_: function(timezoneId) {
+      this.context.set(CONTEXT_KEY_TIMEZONE, timezoneId);
+      this.commitContextChanges();
+    },
+
     onBeforeShow: function(data) {
       cr.ui.DropDown.show('networks-list', true, -1);
       this.classList.toggle('connect-debugging-view',