Add custom Polymer network icon element

ui/webui/resources/cr_elements/cr_network_icon/cr-network-icon.js

+// 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.
+
+/**

[michaelpg, 2015/02/10 08:11:25]

If we're following jhawkin's suggested convention, we need two line breaks
before a top-level /** */ including this one or the Closure linter will
complain.

[stevenjb, 2015/02/11 00:16:12]

Done.

[stevenjb, 2015/02/11 00:16:12]

Done.

+ * @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 kResourceImageBase =

[michaelpg, 2015/02/10 08:11:25]

RESOURCE_IMAGE_BASE, RESOURCE_IMAGE_EXT

1.
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Constants
2. https://github.com/GoogleWebComponents/style-guide

[stevenjb, 2015/02/11 00:16:12]

Done.

+      'chrome://resources/cr_elements/cr_network_icon/';
+  /** @const {string} */ var kResourceImageExt = '.png';
+
+  /**

[michaelpg, 2015/02/10 08:11:25]

These aren't technically top-level blocks so we don't strictly need two line
breaks before /** here, but should we use them to remain consistent?

[stevenjb, 2015/02/11 00:16:12]

I went ahead and added them, since the only reason this isn't "top level" is to
provide local "namespaced" typedefs and constants.

+   * 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'.

[michaelpg, 2015/02/10 08:11:25]

@element cr-network-icon

[stevenjb, 2015/02/11 00:16:12]

Done.

+   */
+  Polymer('cr-network-icon', {
+    publish: {
+      /**
+       * If set, the ONC data properties will be used to display the icon.
+       *
+       * @attribute networkState
+       * @type Element
+       * @default {}
+       */
+      networkState: {},

[michaelpg, 2015/02/10 08:11:25]

I would encourage you to set this to null and set this.data = {} in the created
callback to guarantee all instances of data are unique.

[stevenjb, 2015/02/11 00:16:11]

Done. I also added a created() method here that initializes the icon to
something reasonable, with a TODO that we really need a constructor that passes
in a value for networkState, which I believe we will be able to do with .8.

+
+      /**
+       * 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
+    },
+
+    /**
+     * Updates the icon based on network state when the networkState property
+     * changes.
+     * @param {Element} oldValue Ignored.
+     * @param {Element} newValue The new network state used to set the icon.
+     */
+    networkStateChanged: function(oldValue, newValue) {
+      var networkState = newValue;
+      var params = /** @type {IconParams} */ {};
+      params.showDisconnected = !this.isListItem;
+      params.iconType = getIconTypeFromNetworkType(networkState.data.Type);
+      if (params.iconType_ == 'wifi')
+        params.secure = networkState.getWiFiSecurity() != 'None';
+      params.connected = networkState.data.ConnectionState == 'Connected';
+      params.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} */ {};
+      params.showDisconnected = true;
+      params.iconType = getIconTypeFromNetworkType(networkType);
+      params.connected = false;
+      params.secure = false;
+      params.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 = kResourceImageBase + params.iconType + kResourceImageExt;
+        if (iconOffset) {
+          icon.style.height = '500%';
+          icon.style.top = iconOffset;
+        }
+      }
+
+      var badge = this.$.badge;
+      if (params.secure) {
+        badge.style.display = '';
+        badge.src = kResourceImageBase + 'secure' + kResourceImageExt;
+      } else {
+        badge.style.display = 'none';
+      }
+    }
+

[michaelpg, 2015/02/10 08:11:25]

nit: remove extra space?

[stevenjb, 2015/02/11 00:16:12]

Done.

+  });
+})();