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..aad05362a7b799192084e66196de4c0ee17c7c35
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.js
@@ -0,0 +1,172 @@
+// 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() {

[Dan Beam, 2015/02/21 01:07:57]

i don't love that if we add this everything starts with 2 \s indent by default. 
i think this is similar to namespace { } in C++, therefore I wouldn't indent. 
iono what the precedent in chrome is like for this...

[stevenjb, 2015/02/23 21:31:57]

I agree this is awkward. I moved everything into the Polymer() block, let me
know what you think.

+  /**
+   * @typedef {{
+   *   showDisconnected: boolean,
+   *   iconType: string,
+   *   connected: boolean,
+   *   secure: boolean,
+   *   strength: number }}

[Dan Beam, 2015/02/21 01:07:57]

}} on next line

[stevenjb, 2015/02/23 21:31:57]

Done.

+   */
+  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 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} */ {
+        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%';

[Dan Beam, 2015/02/20 04:01:24]

nit: just create classes and change this style in CSS (.weak { top: -100%; }
...) and just use:

  icon.classList.toggle('weak', params.strength <= 25);
  ...

[stevenjb, 2015/02/23 21:31:58]

Done, but is there somewhere you can you point me to that provides a good
guideline as to when / why putting this in CSS is preferred?

+      }
+
+      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;

[Dan Beam, 2015/02/20 04:01:24]

badge.hidden = !params.secure;

[stevenjb, 2015/02/23 21:31:57]

Done. I moved the 'src' property to the .html since and renamed this
'badgeSecure' since src will never change.

+      if (params.secure) {
+        badge.hidden = false;
+        badge.src = RESOURCE_IMAGE_BASE + 'secure' + RESOURCE_IMAGE_EXT;
+      } else {
+        badge.hidden = true;
+      }
+    },
+  });
+})();