Add support for custom entries in <cr_network_select/>.

ui/webui/resources/cr_elements/network/cr_network_select.js

 // Copyright 2015 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 wrapping cr-network-list including the
  * networkingPrivate calls to populate it.
  */
 
 Polymer({
@@ skipping 38 matching lines @@
     /**
      * If true, show the active network state.
      */
     showActive: {
       type: Boolean,
       value: false
     },
 
     /**
      * List of all network state data for all visible networks.
+     * Consists of networksFromAPI_ + networkStateAddon.
+     * See <cr-network-list-item/> for details.
+     *
      * @type {!Array<!CrOnc.NetworkStateProperties>}
      */
     networkStateList: {
       type: Array,
       value: function() { return []; }
-    }
+    },
+
+    /**
+     * Additional list of network states to be always added to networkStateList.
+     * See <cr-network-list-item/> for details.
+     *
+     * @type {!Array<!CrOnc.NetworkStateProperties>}
+     */
+    networkStateAddon: {
+      type: Array,
+      value: function() { return []; },
+      observer: "networkStateAddonChanged_"
+    },
+
+    /**
+     * Hides all buttons in list items.
+     */
+    noButtons: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * This is callback, which is called when user taps on list item.
+     *
+     * @type {Function}
+     */
+    onNetworkListItemSelectedObserver: {
+      type: Object,
+      value: null,
+    },
+
+    /**
+     * This event is fired on each NetworkStateProperties object when it has
+     * state 'Connected'.
+     *
+     * @type {String}
+     */
+    networkConnectedEvent: {
+      type: String,
+      value: null,
+    },
   },
 
   /**
+   * List of all network state data for all visible networks.
+   * @type {!Array<!CrOnc.NetworkStateProperties>}
+   */
+  networksFromAPI_: [],
+
+  /**
    * Listener function for chrome.networkingPrivate.onNetworkListChanged event.
    * @type {function(!Array<string>)}
    * @private
    */
   networkListChangedListener_: function() {},
 
   /**
    * Listener function for chrome.networkingPrivate.onDeviceStateListChanged
    * event.
    * @type {function(!Array<string>)}
@@ skipping 17 matching lines @@
 
   /** @override */
   detached: function() {
     chrome.networkingPrivate.onNetworkListChanged.removeListener(
         this.networkListChangedListener_);
     chrome.networkingPrivate.onDeviceStateListChanged.removeListener(
         this.deviceStateListChangedListener_);
   },
 
   /**
-   * Polymer chnaged function.
+   * Polymer changed function.
    * @private
    */
   networkListOpenedChanged_: function() {
     if (this.networkListOpened)
       chrome.networkingPrivate.requestNetworkScan();
   },
 
   /**
+   * Polymer changed function.
+   * @private
+   */
+  networkStateAddonChanged_: function() {
+    this.UpdateNetworkStateList_();
+  },
+
+  /**
    * Request the list of visible networks.
    * @private
    */
   refreshNetworks_: function() {
     var filter = {
       networkType: chrome.networkingPrivate.NetworkType.ALL,
       visible: true,
       configured: false
     };
     chrome.networkingPrivate.getNetworks(
         filter, this.getNetworksCallback_.bind(this));
   },
 
   /**
    * @param {!Array<!CrOnc.NetworkStateProperties>} states
    * @private
    */
   getNetworksCallback_: function(states) {
     this.activeNetworkState = states[0] || null;
-    this.networkStateList = states;
+    this.networksFromAPI_ = states;
+    this.UpdateNetworkStateList_();
   },
 
   /**
+   * Updates networkStateList.
+   * @private
+   */
+  UpdateNetworkStateList_: function() {
+    this.networkStateList =
+         Array.from(this.networksFromAPI_).concat(this.networkStateAddon);
+  },
+
+  /**
    * Event triggered when a cr-network-list-item is selected.
    * @param {!{detail: !CrOnc.NetworkStateProperties}} event
    * @private
    */
   onNetworkListItemSelected_: function(event) {
     var state = event.detail;
+    if (state.onTapEvent) {
+      this.fire(state.onTapEvent, state);
+      return;
+    }
+
+    if (this.onNetworkListItemSelectedObserver)
+      this.onNetworkListItemSelectedObserver(state);

[stevenjb, 2016/06/16 17:41:34]

Why have a callback in addition to firing an event?

Most of this should be unnecessary. We should be able to just handle
'on-selected' in the container without any extra work. The only thing we need to
add is something like:

if (!state.GUID)
  return;  // The 'selected' event may be handled by a container.

(We might want to rename the event 'network-item-selected' to make it more
specific)

[Alexander Alekseev, 2016/06/22 08:24:18]

Before user clicks on a network, we cannot proceed even if some network is
connected. Because it might be a wrong network. So we first wait for user click
(via onNetworkListItemSelectedObserver) and then wait for selected network to
receive "Connected" status (via OnNetworkConnected event).

[stevenjb, 2016/06/22 21:03:24]

I am still confused. If we relaly need to do something different in OOBE then we
should just provide a way to override the selected behavior rather than provide
an observer in addition to an event. It is very confusing.

+
     if (state.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED)
       return;
+
     chrome.networkingPrivate.startConnect(state.GUID, function() {
       var lastError = chrome.runtime.lastError;
       if (lastError && lastError != 'connecting')
         console.error('networkingPrivate.startConnect error: ' + lastError);
     });
   },
 });