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.

[stevenjb, 2016/07/07 17:36:17]

Sets

[Alexander Alekseev, 2016/07/08 01:12:28]

Done.

+   */
   focus: function() {
     this.$.welcomeNextButton.focus();
   },
 
+  /**
+   * Handle "visible" event.

[stevenjb, 2016/07/07 17:36:17]

Handles (here and below)

[Alexander Alekseev, 2016/07/08 01:12:28]

Done.

+   *

[stevenjb, 2016/07/07 17:36:17]

nit: Empty line before @private is not needed.

[Alexander Alekseev, 2016/07/08 01:12:28]

Done.

+   * @private
+   */
   onAnimationFinish_: function() {
     this.focus();
   },
 
+  /**
+   * Handle "Next" button for "Welcome" screen.
+   *
+   * @private
+   */
   onWelcomeNextButtonClicked_: function() {
+    this.$.networkSelect.maxHeight = 280;

[stevenjb, 2016/07/07 17:36:17]

Instead of setting maxHeight to a specific value here, toggle a class and put
the value in CSS. (Or if you can just use #networkSelect[showActive=false] in
the CSS).

[Alexander Alekseev, 2016/07/08 01:12:29]

maxHeight is not CSS attribute here, and setting it in HTML (or in CSS as
standard CSS property) doesn't work. (It probably gets overwritten by smth.)

So I don't know why I have to use this here.

[stevenjb, 2016/07/08 17:43:35]

We should figure it out, because somebody later on is going to need to change
the height and may have a difficult time finding this.

Looking again at the HTML, do we ever need max-height to be anything other than
280? e.g. can't we just add 'max-height="280"' to the HTML? That seems to work
just fine in network_ui.html.

[Alexander Alekseev, 2016/07/09 04:31:30]

It seems that it works now, so this is done.

+    this.$.networkSelect.showActive = false;
+    var self = this;
+    this.$.networkSelect.customItems = [
+      {
+        customItemName: 'proxySettingsMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        customData: {
+          onTap: function() { self.OpenProxySettingsDialog_(); },
+        },
+      },
+      {
+        customItemName: 'addWiFiNetworkMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        customData: {
+          onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
+        },
+      },
+      {
+        customItemName: 'addMobileNetworkMenuName',
+        polymerIcon: 'oobe-welcome:add',
+        customData: {
+          onTap: function() { self.OpenAddWiFiNetworkDialog_(); },
+        },
+      },
+    ];
+    var self = this;

[stevenjb, 2016/07/07 17:36:17]

?

[Alexander Alekseev, 2016/07/08 01:12:29]

Done.

+    this.$.networkSection.hidden = false;
+    this.$.welcomeSection.hidden = true;
+  },
+
+  /**
+   * Handle Networwork Setup screen "Proxy settings" button.
+   *
+   * @private
+   */
+  OpenProxySettingsDialog_: function(item) {
+    chrome.send('launchProxySettingsDialog');
+  },
+
+  /**
+   * Handle Networwork Setup screen "Add WiFi network" button.
+   *
+   * @private
+   */
+  OpenAddWiFiNetworkDialog_: function(item) {
+    chrome.send('launchAddWiFiNetworkDialog');
+  },
+
+  /**
+   * Handle Networwork Setup screen "Add cellular network" button.
+   *
+   * @private
+   */
+  OpenAddMobileNetworkDialog_: 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.

[stevenjb, 2016/07/07 17:36:17]

This gets called when a network enters the 'Connected' state.

[Alexander Alekseev, 2016/07/08 01:12:28]

Done.

+   *
+   * @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 {!{detail: !CrOnc.NetworkStateProperties}} event
+   * @private
+   */
+  onNetworkListNetworkItemSelected_: function(event) {
+    var state = event.detail;
+    // If user has not previously made a selection and selected network
+    // is already connected, just continue to the next screen.
+    if (this.networkLastSelectedGuid_ == '' &&
+        state.ConnectionState == CrOnc.ConnectionState.CONNECTED) {
+      this.onSelectedNetworkConnected_();
+    }
+
+    // If user has previously selected another network, there
+    // is pending connection attempt. So even if new selection is currently
+    // connected, it may get disconnected at any time.
+    // So just send one more connection request to cancel current attempts.
+    this.networkLastSelectedGuid_ = state.GUID;
+
+    var self = this;
+    var networkStateCopy = JSON.parse(JSON.stringify(state));

[stevenjb, 2016/07/07 17:36:17]

var networkStateCopy = Object.assign({}, state);

[Alexander Alekseev, 2016/07/08 01:12:28]

Done.

+
+    chrome.networkingPrivate.startConnect(state.GUID, function() {
+      var lastError = chrome.runtime.lastError;
+      if (!lastError)
+        return;
+
+      if (lastError.message == 'connected') {
+        self.onNetworkConnected_({'detail': networkStateCopy});
+        return;
+      }
+
+      if (lastError.message != 'connecting')
+        console.error('networkingPrivate.startConnect error: ' + lastError);
+    });
+  },
+
+  /**
+   * @param {!Event} event
+   */
+  onNetworkListCustomItemSelected_: function(e) {
+    var itemState = e.detail;
+    itemState.customData.onTap();
+  },
 });