ChromeOS: Implement Network 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: {
-    disabled: {
-      type: Boolean,
-      value: false,
-    },
+    /**
+     * Currently selected system language.
+     */
     currentLanguage: {
       type: String,
       value: 'English (US)',
     },
   },
 
+  /**
+   * 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_: '',
+
+  /**
+   * Set proper focus.
+   */
   focus: function() {
     this.$.welcomeNextButton.focus();
   },
 
+  /**
+   * Handle "visible" event.
+   *
+   * @private
+   */
   onAnimationFinish_: function() {
     this.focus();
   },
 
+  /**
+   * Handle "Next" button for "Welcome" screen.
+   *
+   * @private
+   */
   onWelcomeNextButtonClicked_: function() {
+    this.$.networkSelect.maxHeight = 280;
+    this.$.networkSelect.showActive = false;
+    this.$.networkSelect.networkStateAddon = [
+      {
+        customItemName: 'proxySettingsMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        onTapEvent: 'proxy-settings',
+      },
+      {
+        customItemName: 'addWiFiNetworkMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        onTapEvent: 'add-wifi-network',
+      },
+      {
+        customItemName: 'addMobileNetworkMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        onTapEvent: 'add-mobile-network',
+      },
+    ];
+    var self = this;
+    this.$.networkSelect.onNetworkListItemSelectedObserver = function(item) {
+      self.onNetworkListItemSelected_(item);
+    };
+    this.$.networkSection.hidden = false;
+    this.$.welcomeSection.hidden = true;
+  },
+
+  /**
+   * Handle Networwork Setup screen "Proxy settings" button.
+   *
+   * @param {networkStateAddon entry for the button} item
+   * @private
+   */
+  onProxySettings_: function(item) {
+    chrome.send('launchProxySettingsDialog');
+  },
+
+  /**
+   * Handle Networwork Setup screen "Add WiFi network" button.
+   *
+   * @param {networkStateAddon entry for the button} item
+   * @private
+   */
+  onAddWiFiNetwork_: function(item) {
+    chrome.send('launchAddWiFiNetworkDialog');
+  },
+
+  /**
+   * Handle Networwork Setup screen "Add cellular network" button.
+   *
+   * @param {networkStateAddon entry for the button} item
+   * @private
+   */
+  onAddMobileNetwork_: function(item) {
+    chrome.send('launchAddMobileNetworkDialog');
+  },
+
+  /**
+   * This is called when network setup is done.
+   *
+   * @private
+   */
+  onSelectedNetworkConnected_: function() {
     $('oobe-connect').hidden = false;
     $('oobe-welcome-md').hidden = true;
-  }
+  },
+
+  /**
+   * This is called on every network that has "Connected" state.
+   *
+   * @param {!{detail: !CrOnc.NetworkStateProperties}} event
+   * @private
+   */
+  onNetworkConnected_: function(event) {
+    var state = event.detail;
+    if (state.GUID != this.networkLastSelectedGuid_)
+      return;
+
+    this.onSelectedNetworkConnected_();
+  },
+
+  /**
+   * This is called when user taps on network entry in networks list.
+   *
+   * @param {!CrOnc.NetworkStateProperties} state
+   * @private
+   */
+  onNetworkListItemSelected_: function(state) {
+    if (state.ConnectionState == CrOnc.ConnectionState.CONNECTED) {
+      this.onSelectedNetworkConnected_();
+      return;
+    }
+
+    if (this.networkLastSelectedGuid_ != state.GUID)
+      this.networkLastSelectedGuid_ = state.GUID;
+  },
 });