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..cc943030ca23575fe8d2ae5a7f96bffd3148e059
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
@@ -0,0 +1,157 @@
+// 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.
+ */
+
+/**
+ * Polymer class definition for 'cr-network-icon'.
+ * @element cr-network-icon
+ */
+Polymer('cr-network-icon', {
+  /** @const {string} */ RESOURCE_IMAGE_BASE:
+    'chrome://resources/cr_elements/cr_network_icon/',

[michaelpg, 2015/02/24 07:24:57]

i think you need 4 spaces here

[stevenjb, 2015/02/24 19:28:00]

You're correct. Done.

+
+  /** @const {string} */ RESOURCE_IMAGE_EXT: '.png',
+
+  /**
+   * @typedef {{
+   *   showDisconnected: boolean,
+   *   iconType: string,
+   *   connected: boolean,
+   *   secure: boolean,
+   *   strength: number
+   * }}
+   */
+  IconParams: {},

[Dan Beam, 2015/02/24 01:02:48]

unless these change, make them static, IMO

[stevenjb, 2015/02/24 19:28:00]

Going to switch back to an anonymous function, but with no indentation, that
seems to be the consensus at this point.

+
+  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 CrOnc.Type
+     * @default null
+     */
+    networkType: null,
+
+    /**
+     * 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,
+  },
+
+  /** @override */
+  attached: function() {
+    var params = /** @type {IconParams} */ {
+      connected: false,
+      iconType: 'ethernet',
+      secure: false,
+      showDisconnected: true,
+      strength: 0,
+    };
+    this.setIcon_(params);
+  },
+
+  /**
+   * Polymer networkState changed method. Updates the icon based on the
+   * network state.
+   */
+  networkStateChanged: function() {
+    var iconType =
+      this.getIconTypeFromNetworkType_(this.networkState.data.Type);

[michaelpg, 2015/02/24 07:24:57]

4 spaces

[stevenjb, 2015/02/24 19:28:00]

Done.

+    var params = /** @type {IconParams} */ {
+      connected: this.networkState.data.ConnectionState == 'Connected',
+      iconType: iconType,
+      secure: iconType == 'wifi' &&
+        this.networkState.getWiFiSecurity() != 'None',

[michaelpg, 2015/02/24 07:24:57]

4 spaces

[stevenjb, 2015/02/24 19:28:00]

Done.

+      showDisconnected: !this.isListItem,
+      strength: this.networkState.getStrength(),
+    };
+    this.setIcon_(params);
+  },
+
+  /**
+   * Polymer networkType changed method. Updates the icon based on the type
+   * of network, showing a disconnected icon where appropriate and no badges.
+   */
+  networkTypeChanged: function() {
+    var params = /** @type {IconParams} */ {
+      connected: false,
+      iconType: this.getIconTypeFromNetworkType_(this.networkType),
+      secure: false,
+      showDisconnected: true,
+      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 icon = this.$.icon;
+    if (params.iconType) {
+      icon.src =
+          this.RESOURCE_IMAGE_BASE + params.iconType + this.RESOURCE_IMAGE_EXT;
+    }
+
+    if (params.iconType == 'wifi' || params.iconType == 'mobile') {
+      var strength = (params.showDisconnected && !params.connected) ?
+            -1 : params.strength;

[michaelpg, 2015/02/24 07:24:57]

4 spaces, or align to (

[stevenjb, 2015/02/24 19:28:00]

Done.

+      icon.classList.toggle('multi-level', true);
+      icon.classList.toggle('level0', strength < 0);
+      icon.classList.toggle('level1', strength >= 0 && strength <= 25);
+      icon.classList.toggle('level2', strength > 25 && strength <= 50);
+      icon.classList.toggle('level3', strength > 50 && strength <= 75);
+      icon.classList.toggle('level4', strength > 75);

[Dan Beam, 2015/02/24 01:02:48]

what if a network changes from iconType == '{wifi,mobile}'?  then all these
level* classes are still hanging around.

[stevenjb, 2015/02/24 19:28:00]

Generally that shouldn't happen, but fair point. Fixed.

+    } else {
+      icon.classList.toggle('multi-level', false);
+    }
+
+    this.$.badgeSecure.hidden = !params.secure;
+  },
+
+  /**
+   * 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 {CrOnc.Type} networkType The ONC network type.
+   * @return {string} The icon type: ethernet, wifi, mobile, or vpn.
+   */
+  getIconTypeFromNetworkType_: function(networkType) {
+    if (networkType == CrOnc.Type.ETHERNET)
+      return 'ethernet';
+    else if (networkType == CrOnc.Type.WIFI)
+      return 'wifi';
+    else if (networkType == CrOnc.Type.CELLULAR)
+      return 'mobile';
+    else if (networkType == CrOnc.Type.WIMAX)
+      return 'mobile';
+    else if (networkType == CrOnc.Type.VPN)
+      return 'vpn';
+
+    console.error('Unrecognized network type: ' + networkType);
+    return 'ethernet';
+  },
+

[michaelpg, 2015/02/24 07:24:57]

nit: nix empty line

[stevenjb, 2015/02/24 19:28:00]

Done.

+});