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

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_network_item.js b/ui/webui/resources/cr_elements/network/cr_network_list_item.js
similarity index 26%
rename from ui/webui/resources/cr_elements/network/cr_network_list_network_item.js
rename to ui/webui/resources/cr_elements/network/cr_network_list_item.js
index bf9a90ca7522583cdfbc37aac1cfb3682473673b..45f2330a01b0b0211c441882ca2e4c95699fe7c0 100644
--- a/ui/webui/resources/cr_elements/network/cr_network_list_network_item.js
+++ b/ui/webui/resources/cr_elements/network/cr_network_list_item.js
@@ -6,79 +6,23 @@
  * @fileoverview Polymer element for displaying information about a network
  * in a list or summary based on ONC state properties.
  */
-(function() {
-'use strict';
 
-/**
- * TODO(stevenjb): Replace getText with a proper localization function that
- * handles string substitution.
- * Performs argument substitution, replacing $1, $2, etc in 'text' with
- * corresponding entries in |args|.
- * @param {string} text The string to perform the substitution on.
- * @param {?Array<string>=} opt_args The arguments to replace $1, $2, etc with.
- */
-function getText(text, opt_args) {
-  var res;
-  if (loadTimeData && loadTimeData.data_)
-    res = loadTimeData.getString(text) || text;
-  else
-    res = text;
-  if (!opt_args)
-    return res;
-  for (let i = 0; i < opt_args.length; ++i) {
-    let key = '$' + (i + 1);
-    res = res.replace(key, opt_args[i]);
-  }
-  return res;
-}
-
-/**
- * Returns the appropriate connection state text.
- * @param {string} state The connection state.
- * @param {string} name The name of the network.
- */
-function getConnectionStateText(state, name) {
-  if (state == CrOnc.ConnectionState.CONNECTED)
-    return name;
-  if (state == CrOnc.ConnectionState.CONNECTING)
-    return getText('networkConnecting', [name]);
-  if (state == CrOnc.ConnectionState.NOT_CONNECTED)
-    return getText('networkNotConnected');
-  return getText(state);
-};
-
-/**
- * Returns the name to display for |network|.
- * @param {?CrOnc.NetworkStateProperties} network
- */
-function getNetworkName(network) {
-  var name = network.Name;
-  if (!name)
-    return getText('OncType' + network.Type);
-  if (network.Type == 'VPN' && network.VPN &&
-      network.VPN.Type == 'ThirdPartyVPN' && network.VPN.ThirdPartyVPN) {
-    var providerName = network.VPN.ThirdPartyVPN.ProviderName;
-    if (providerName)
-      return getText('vpnNameTemplate', [providerName, name]);
-  }
-  return name;
-}
-
-/**
- * Polymer class definition for 'cr-network-list-network-item'.
- */
 Polymer({
-  is: 'cr-network-list-network-item',
+  is: 'cr-network-list-item',
 
   properties: {
+    /** @type {!CrNetworkList.CrNetworkListItemType|undefined} */
+    item: {
+      type: Object,
+      observer: 'itemChanged_',
+    },
+
     /**
      * The ONC data properties used to display the list item.
-     *
-     * @type {?CrOnc.NetworkStateProperties}
+     * @type {!CrOnc.NetworkStateProperties|undefined}
      */
     networkState: {
       type: Object,
-      value: null,
       observer: 'networkStateChanged_',
     },
 
@@ -89,65 +33,131 @@ Polymer({
      *      and displays the name of the network type plus the network name
      *      and connection state.
      */
-    listItem: {
+    isListItem: {
       type: Boolean,
       value: false,
-      observer: 'networkStateChanged_',
+      reflectToAttribute: true,
     },
 
-    /**
-     * Whether to show buttons.
-     */
+    /** Whether to show any buttons for network items. Defaults to false. */
     showButtons: {
       type: Boolean,
-      value: false,
+      reflectToAttribute: true,
     },
   },
 
-  /**
-   * Polymer networkState changed method. Updates the element based on the
-   * network state.
-   */
+  behaviors: [I18nBehavior],
+
+  /** @private */
+  itemChanged_: function() {
+    if (this.item && !this.item.hasOwnProperty('customItemName')) {
+      this.networkState =
+          /** @type {!CrOnc.NetworkStateProperties} */ (this.item);
+    } else if (this.networkState) {
+      this.networkState = undefined;
+    }
+  },
+
+  /** @private */
   networkStateChanged_: function() {
-    if (!this.networkState)
-      return;
-    var network = this.networkState;
-    var isDisconnected =
-        network.ConnectionState == CrOnc.ConnectionState.NOT_CONNECTED;
-
-    if (network.ConnectionState == CrOnc.ConnectionState.CONNECTED) {
-      this.fire("network-connected", this.networkState);
+    if (this.networkState &&
+        this.networkState.ConnectionState == CrOnc.ConnectionState.CONNECTED) {
+      this.fire('network-connected', this.networkState);
     }
+  },
 
-    var name = getNetworkName(network);
-    if (this.listItem) {
-      this.$.itemName.textContent = name;
-      this.$.itemName.classList.toggle('connected', !isDisconnected);
-      if (!isDisconnected) {
-        this.$.networkStateText.textContent =
-            getText('networkListItemConnected');
-        this.$.networkStateText.classList.toggle('connected', true);
-      }
-      return;
+  /**
+   * This gets called for network items and custom items.
+   * @private
+   */
+  getItemName_: function() {
+    if (this.item.hasOwnProperty('customItemName')) {
+      let item = /** @type {!CrNetworkList.CustomItemState} */ (this.item);
+      let name = item.customItemName || '';
+      if (this.i18nExists(item.customItemName))
+        name = this.i18n(item.customItemName);
+      return name;
     }
+    let network = /** @type {!CrOnc.NetworkStateProperties} */ (this.item);
+    if (this.isListItem)
+      return this.getNetworkName_(network);
+    return this.i18n('OncType' + network.Type);
+  },
+
+  /** @private */
+  isStateTextVisible_() {
+    return !!this.networkState && (!this.isListItem || this.isConnected_());
+  },
 
+  /** @private */
+  isStateTextConnected_() {
+    return this.isListItem && this.isConnected_();
+  },
+
+  /**
+   * This only gets called for network items once networkState is set.
+   * @private
+   */
+  getNetworkStateText_: function() {
+    if (!this.isStateTextVisible_())
+      return '';
+    let network = this.networkState;
+    if (this.isListItem)
+      return this.i18n('networkListItemConnected');
     if (network.Name && network.ConnectionState) {
-      this.$.itemName.textContent = getText('OncType' + network.Type);
-      this.$.itemName.classList.toggle('connected', false);
-      this.$.networkStateText.textContent =
-          getConnectionStateText(network.ConnectionState, name);
-      this.$.networkStateText.classList.toggle('connected', false);
-      return;
+      return this.getConnectionStateText_(
+          network.ConnectionState, this.getNetworkName_(network));
     }
+    return this.i18n('networkDisabled');
+  },
+
+  /**
+   * Returns the appropriate connection state text.
+   * @param {string} state The connection state.
+   * @param {string} name The name of the network.
+   * @return {string}
+   */
+  getConnectionStateText_: function(state, name) {
+    if (state == CrOnc.ConnectionState.CONNECTED)
+      return name;
+    if (state == CrOnc.ConnectionState.CONNECTING)
+      return this.i18n('networkConnecting', name);
+    if (state == CrOnc.ConnectionState.NOT_CONNECTED)
+      return this.i18n('networkNotConnected');
+    // TODO(stevenjb): Audit state translations and remove test.
+    if (this.i18nExists(state))
+      return this.i18n(state);
+    return state;
+  },
 
-    this.$.itemName.textContent = getText('OncType' + network.Type);
-    this.$.itemName.classList.toggle('connected', false);
-    this.$.networkStateText.textContent = getText('networkDisabled');
-    this.$.networkStateText.classList.toggle('connected', false);
-    if (network.Type == CrOnc.Type.CELLULAR) {
-      if (!network.GUID)
-        this.$.networkStateText.textContent = getText('networkDisabled');
+  /**
+   * Returns the name to display for |network|.
+   * @param {?CrOnc.NetworkStateProperties} network
+   * @return {string}
+   */
+  getNetworkName_: function(network) {
+    let name = network.Name;
+    if (!name)
+      return this.i18n('OncType' + network.Type);
+    if (network.Type == 'VPN' && network.VPN &&
+        network.VPN.Type == 'ThirdPartyVPN' && network.VPN.ThirdPartyVPN) {
+      let providerName = network.VPN.ThirdPartyVPN.ProviderName;
+      if (providerName)
+        return this.i18n('vpnNameTemplate', providerName, name);
     }
+    return name;
+  },
+
+  /** @private */
+  isSettingsButtonVisible_: function() {
+    return !!this.networkState && this.showButtons;
+  },
+
+  /** @private */
+  isConnected_: function() {
+    return this.networkState &&
+        this.networkState.ConnectionState !=
+        CrOnc.ConnectionState.NOT_CONNECTED;
   },
 
   /**
@@ -156,19 +166,8 @@ Polymer({
    * @private
    */
   fireShowDetails_: function(event) {
+    assert(this.networkState);
     this.fire('show-detail', this.networkState);
     event.stopPropagation();
   },
-
-  /** @private */
-  isStateVisible_(networkState, listItem) {
-    return !this.listItem ||
-        networkState.ConnectionState != CrOnc.ConnectionState.NOT_CONNECTED;
-  },
-
-  /** @private */
-  isSettingsButtonVisible_: function(showButtons, listItem) {
-    return showButtons && this.listItem;
-  },
 });
-})();