Add support for custom entries in <cr_network_select/>.

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

Index: ui/webui/resources/cr_elements/network/cr_network_select.js
diff --git a/ui/webui/resources/cr_elements/network/cr_network_select.js b/ui/webui/resources/cr_elements/network/cr_network_select.js
index ecf439385f56ff69a6631ef683e0f4062b8df36b..26759a19b0b27cdc0554b70704eb7dcb2ecdf4bd 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_select.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_select.js
@@ -56,15 +56,65 @@ Polymer({
 
     /**
      * 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
@@ -102,7 +152,7 @@ Polymer({
   },
 
   /**
-   * Polymer chnaged function.
+   * Polymer changed function.
    * @private
    */
   networkListOpenedChanged_: function() {
@@ -111,6 +161,14 @@ Polymer({
   },
 
   /**
+   * Polymer changed function.
+   * @private
+   */
+  networkStateAddonChanged_: function() {
+    this.UpdateNetworkStateList_();
+  },
+
+  /**
    * Request the list of visible networks.
    * @private
    */
@@ -130,7 +188,17 @@ Polymer({
    */
   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);
   },
 
   /**
@@ -140,8 +208,17 @@ Polymer({
    */
   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')