WebUI: cr-network-list: Use a single list of cr-network-list-items

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

Index: ui/webui/resources/cr_elements/network/cr_network_list.js
diff --git a/ui/webui/resources/cr_elements/network/cr_network_list.js b/ui/webui/resources/cr_elements/network/cr_network_list.js
index 84544f227557debfbd91a8bdfa21e496725a3001..02345d55a0da3a3521d35eb5d71bc4ebcd28d7ad 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_list.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_list.js
@@ -6,8 +6,6 @@
  * @fileoverview Polymer element for displaying a collapsable list of networks.
  */
 
-(function() {
-
 /**
  * Polymer class definition for 'cr-network-list'.
  * TODO(stevenjb): Update with iron-list(?) once implemented in Polymer 1.0.
@@ -22,62 +20,80 @@ Polymer({
     maxHeight: {
       type: Number,
       value: 1000,
-      observer: 'maxHeightChanged_'
+      observer: 'maxHeightChanged_',
     },
 
     /**
      * The list of network state properties for the items to display.
-     * See <cr-network-list-network-item/> for details.
-     *
      * @type {!Array<!CrOnc.NetworkStateProperties>}
      */
     networks: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
     /**
-     * The list of custom state properties for the items to display.
-     * See <cr-network-list-custom-item/> for details.
-     *
-     * @type {!Array<Object>}
+     * The list of custom items to display after the list of networks.
+     * @type {!Array<!CrNetworkList.CustomItemState>}
      */
     customItems: {
       type: Array,
-      value: function() { return []; }
+      value: function() {
+        return [];
+      }
     },
 
-    /**
-     * True if the list is opened.
-     */
+    /** True if the list is opened. */
     opened: {
       type: Boolean,
-      value: true
+      value: true,
     },
 
-    /**
-     * Shows all buttons from the list items.
-     */
+    /** True if action buttons should be shown for the itmes. */
     showButtons: {
       type: Boolean,
       value: false,
+      reflectToAttribute: true,
+    },
+
+    /** Whether to show separators between all items. */
+    showSeparators: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
     },
   },
 
-  /**
-   * Polymer maxHeight changed method.
-   */
+  /** @private */
   maxHeightChanged_: function() {
     this.$.container.style.maxHeight = this.maxHeight + 'px';
   },
 
   /**
+   * Returns a combined list of networks and custom items.
+   * @return {!Array<!CrNetworkList.CrNetworkListItemType>}
+   * @private
+   */
+  getItems_: function() {
+    let customItems = this.customItems.slice();
+    // Flag the first custom item with isFirstCustomItem = true.
+    if (!this.showSeparators && customItems.length > 0)
+      customItems[0].isFirstCustomItem = true;
+    return this.networks.concat(customItems);
+  },
+
+  /**
    * Event triggered when a list item is tapped.
-   * @param {!{model: {item: !CrOnc.NetworkStateProperties}}} event
+   * @param {!{model: {item: !CrNetworkList.CrNetworkListItemType}}} event
    * @private
    */
   onTap_: function(event) {
-    this.fire('selected', event.model.item);
+    let item = event.model.item;
+    if (item.hasOwnProperty('customItemName'))
+      this.fire('custom-item-selected', event.model.item);
+    else
+      this.fire('selected', event.model.item);
   },
 });
-})();