Add custom Polymer network icon element

ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js

Index: ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
new file mode 100644
index 0000000000000000000000000000000000000000..f970f00dafd3ae9f70da9551e8addeea7f9db49a
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
@@ -0,0 +1,178 @@
+// 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 for rendering network icons based on ONC
+ * state properties.
+ */
+
+(function() {
+  /**
+   * @typedef {{
+   *   showDisconnected: boolean,
+   *   iconType: string,
+   *   connected: boolean,
+   *   secure: boolean,
+   *   strength: number }}
+   */
+  var IconParams;
+
+  /** @const {string} */ var RESOURCE_IMAGE_BASE =
+      'chrome://resources/cr_elements/cr_network_icon/';
+  /** @const {string} */ var RESOURCE_IMAGE_EXT = '.png';
+
+
+  /**
+   * Gets the icon type from the network type. This allows multiple types
+   * (i.e. Cellular, WiMAX) to map to the same icon type (i.e. mobile).
+   * @param {string} networkType The ONC network type.
+   * @return {string} The icon type: ethernet, wifi, mobile, or vpn.
+   */
+  function getIconTypeFromNetworkType(networkType) {
+    if (networkType == 'Ethernet') {
+      return 'ethernet';
+    } else if (networkType == 'WiFi') {
+      return 'wifi';
+    } else if (networkType == 'Cellular') {
+      return 'mobile';
+    } else if (networkType == 'WiMAX') {
+      return 'mobile';
+    } else if (networkType == 'VPN') {
+      return 'vpn';
+    }
+    console.error('Unrecognized network type: ' + networkType);
+    return 'ethernet';
+  }
+
+
+  /**
+   * Polymer class definition for 'cr-network-icon'.
+   * @element cr-network-icon
+   */
+  Polymer('cr-network-icon', {
+    publish: {
+      /**
+       * If set, the ONC data properties will be used to display the icon.
+       *
+       * @attribute networkState
+       * @type CrOncDataElement
+       * @default null
+       */
+      networkState: null,
+
+
+      /**
+       * If set, the ONC network type will be used to display the icon.
+       *
+       * @attribute networkType
+       * @type string
+       * @default undefined
+       */
+      networkType: undefined,
+
+
+      /**
+       * If true, the icon is part of a list of networks and may be displayed
+       * differently, e.g. the disconnected image will never be shown for
+       * list items.
+       *
+       * @attribute isListItem
+       * @type boolean
+       * @default false
+       */
+      isListItem: false
+    },
+
+    attached: function() {
+      var params = /** @type {IconParams} */ {
+        showDisconnected: true,
+        iconType: 'ethernet',
+        secure: false,
+        connected: false,
+        strength: 0
+      };
+      this.setIcon_(params);
+    },
+
+    /**
+     * Updates the icon based on network state when the networkState property
+     * changes.
+     * @param {CrOncDataElement} oldValue Ignored.
+     * @param {CrOncDataElement} newValue The new network state used to set the
+     *     icon.
+     */
+    networkStateChanged: function(oldValue, newValue) {
+      var networkState = newValue;
+      var iconType = getIconTypeFromNetworkType(networkState.data.Type);
+      var params = /** @type {IconParams} */ {
+        showDisconnected: !this.isListItem,
+        iconType: iconType,
+        secure: iconType == 'wifi' && networkState.getWiFiSecurity() != 'None',
+        connected: networkState.data.ConnectionState == 'Connected',
+        strength: networkState.getStrength()
+      };
+      this.setIcon_(params);
+    },
+
+
+    /**
+     * Updates the icon based on network type when the networkType property
+     * changes.
+     * @param {string} oldValue Ignored.
+     * @param {string} newValue The new network type used to set the icon.
+     */
+    networkTypeChanged: function(oldValue, newValue) {
+      var networkType = newValue;
+      var params = /** @type {IconParams} */ {
+        showDisconnected: true,
+        iconType: getIconTypeFromNetworkType(networkType),
+        connected: false,
+        secure: false,
+        strength: 0
+      };
+      this.setIcon_(params);
+    },
+
+
+    /**
+     * Sets the icon and badge based on the current state and |strength|.
+     * @param {!IconParams} params The set of params describing the icon.
+     * @private
+     */
+    setIcon_: function(params) {
+      var iconOffset;
+      if (params.iconType == 'wifi' || params.iconType == 'mobile') {
+        if (params.showDisconnected && !params.connected) {
+          iconOffset = '0px';
+        } else if (params.strength <= 25) {
+          iconOffset = '-100%';
+        } else if (params.strength <= 50) {
+          iconOffset = '-200%';
+        } else if (params.strength <= 75) {
+          iconOffset = '-300%';
+        } else {
+          iconOffset = '-400%';
+        }
+      }
+
+      var icon = this.$.icon;
+      if (params.iconType) {
+        icon.src = RESOURCE_IMAGE_BASE + params.iconType + RESOURCE_IMAGE_EXT;
+        if (iconOffset) {
+          icon.style.height = '500%';
+          icon.style.top = iconOffset;
+        }
+      }
+
+      var badge = this.$.badge;
+      if (params.secure) {
+        badge.style.display = '';
+        badge.src = RESOURCE_IMAGE_BASE + 'secure' + RESOURCE_IMAGE_EXT;
+      } else {
+        badge.style.display = 'none';
+      }
+    }
+  });
+})();