Add support for custom entries in <cr_network_select/>.

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

Index: ui/webui/resources/cr_elements/network/cr_network_list_item.js
diff --git a/ui/webui/resources/cr_elements/network/cr_network_list_item.js b/ui/webui/resources/cr_elements/network/cr_network_list_item.js
index b922df8e63ac67e95353137151b75b079d990ec0..4b2fe795f27f897c61412b9b08980c39fe34091c 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_list_item.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_list_item.js
@@ -73,8 +73,30 @@ Polymer({
   properties: {
     /**
      * The ONC data properties used to display the list item.
+     * This is either CrOnc.NetworkStateProperties object, or substitution
+     * object like:
+     * {
+     *   noButtons: false,                 // If true, all buttons are hiden.
      *
-     * @type {?CrOnc.NetworkStateProperties}
+     *   overrideText: 'textId',           // Display given text (or text by
+     *                                     // given Id via getText(textId) )
+     *                                     // intead of network name.
+     *
+     *   overridePolymerIcon: 'icons:add", // Polymer icon to display instead of
+     *                                     // network icon.
+     *
+     *   onTapEvent: "my-ontap-event",     // This event will be fired on-tap.
+     * }
+     *
+     * @type {(
+     *           ?CrOnc.NetworkStateProperties|
+     *           {
+     *             noButtons: ?boolean,
+     *             overrideText: string,
+     *             overridePolymerIcon: ?String,
+     *             onTapEvent: ?String
+     *           }
+     *       )}

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

This is pretty ugly. I don't think that wedging in button behavior to this
(poorly named) element is the correct approach.

We should create a separate element, e.g. cr_network_list_button.html. It should
be straightforward to allow cr-network-list to support either.

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

Done.

      */
     networkState: {
       type: Object,
@@ -96,6 +118,51 @@ Polymer({
       value: 'none',
       observer: 'networkStateChanged_'
     },
+
+    /**
+     * Hides all buttons in the item.
+     */
+    noButtons: {
+      type: Boolean,
+      value: false,
+      observer: 'updateButtons_'
+    },
+
+    /**
+     * Hides Settings button.
+     */
+    settingsButtonHidden: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Hides "known buttons" block.
+     */
+    knownButtonsHidden: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * This event is fired with NetworkStateProperties object if it has
+     * state 'Connected'.
+     *
+     * @type {String}
+     */
+    networkConnectedEvent: {
+      type: String,
+      value: null,
+    },
+  },
+
+  /**
+   * Returns true if this list entry is not a network.
+   *
+   * @private
+   */
+  isOverridden_: function() {
+    return this.networkState && this.networkState.overrideText != null;
   },
 
   /**
@@ -106,10 +173,22 @@ Polymer({
     if (!this.networkState)
       return;
 
+    if (this.isOverridden_()) {
+      this.$.networkName.textContent = getText(this.networkState.overrideText);
+      return;
+    }
+
     var network = this.networkState;
+
+    if (this.networkConnectedEvent &&
+        network.ConnectionState == CrOnc.ConnectionState.CONNECTED) {
+      this.fire(this.networkConnectedEvent, this.networkState);
+    }
+
     var isDisconnected =
         network.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
     var name = getNetworkName(network);
+
     if (this.isListItem_(this.listItemType)) {
       this.$.networkName.textContent = name;
       this.$.networkName.classList.toggle('connected', !isDisconnected);
@@ -132,6 +211,7 @@ Polymer({
       if (!network.GUID)
         this.$.networkStateText.textContent = getText('networkDisabled');
     }
+    this.updateButtons_();
   },
 
   /**
@@ -140,6 +220,9 @@ Polymer({
    * @private
    */
   sharedIcon_: function(networkState) {
+    if (this.isOverridden_())
+      return '';
+
     var source = (networkState && networkState.Source) || '';
     var isShared = (source == CrOnc.Source.DEVICE ||
                     source == CrOnc.Source.DEVICE_POLICY);
@@ -152,6 +235,9 @@ Polymer({
    * @private
    */
   preferredIcon_: function(networkState) {
+    if (this.isOverridden_())
+      return '';
+
     var isPreferred = networkState && networkState.Priority > 0;
     return isPreferred ? 'cr:star' : 'cr:star-border';
   },
@@ -192,6 +278,9 @@ Polymer({
    * @private
    */
   isPolicyManaged_: function(networkState) {
+    if (this.isOverridden_())
+      return false;
+
     var source = (networkState && networkState.Source) || '';
     var isPolicyManaged = source == CrOnc.Source.USER_POLICY ||
                           source == CrOnc.Source.DEVICE_POLICY;
@@ -204,6 +293,9 @@ Polymer({
    * @private
    */
   isListItem_: function(listItemType) {
+    if (this.isOverridden_())
+      return true;
+
     return listItemType != 'none';
   },
 
@@ -214,7 +306,25 @@ Polymer({
    * @private
    */
   isListItemType_: function(listItemType, type) {
+    if (this.isOverridden_())
+      return false;
+
     return listItemType == type;
   },
+
+  /**
+   * Updates buttons visibility.
+   * @private
+   */
+  updateButtons_: function() {
+    if (this.noButtons) {
+      this.settingsButtonHidden = true;
+      this.knownButtonsHidden = true;
+      return;
+    }
+    this.settingsButtonHidden =
+         !this.isListItemType_(this.listItemType, 'visible');
+    this.knownButtonsHidden = !this.isListItemType_(this.listItemType, 'known');
+  }
 });
 })();