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..94be722d4fccafda1d2414d4188a12b815bd14fc
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr-network-icon.js
@@ -0,0 +1,160 @@
+// 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 }}
+   * @private
+   */
+  var IconParams_;

[michaelpg, 2015/02/09 19:38:54]

Still think this should neither be @private nor end in an underscore. It's just
a variable. The wrapping function() provides all the scoping we need.

[Jeremy Klein, 2015/02/09 19:45:49]

I'm fine with that too, as long as the '_' and '@private' agree.

[stevenjb, 2015/02/10 00:22:04]

Done.

+
+  /** @const {string} */ var kResourceImageBase =
+      'chrome://resources/cr_elements/cr_network_icon/';
+  /** @const {string} */ var kResourceImageExt = '.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'.
+   */
+  Polymer('cr-network-icon', {
+    publish: {
+      /**
+       * If set, the ONC data properties will be used to display the icon.
+       *
+       * @attribute networkState
+       * @type cr-onc-data

[Jeremy Klein, 2015/02/09 18:16:31]

I guess this one is a weird case because it's a Polymer doc. I still think
CrOncDataElement or just Element is correct here.

[michaelpg, 2015/02/09 19:38:54]

More generally we need to figure out which flavor of JSDoc to use and how to
compile it.

Polymer uses some custom annotations for use with core-doc-viewer to generate
documentation.

Closure won't consider attributes set inside this "publish" block as members of
the custom element, so it will complain about use of undefined
"this.networkState" or whatever.

So, 1. how can we make this work with Closure, and 2. do we want to use Polymer
annotations?

[Jeremy Klein, 2015/02/09 19:45:49]

The compiler pass I'm going to write for Polymer({}) will handle the publish
block by rewriting the whole function call in a form that the compiler can
understand. However, I'm holding off on writing the pass until 0.8 is
stabilized. Let's not worry too much about actual compilation for now.

As for whether or not we use the Polymer annotations, I don't have a strong
opinion. On one hand, it would make it easy for us to generate the documentation
sites if we wanted to. On the other, having both closure and polymer annotations
will make our code suuuuper doc-heavy. In general, there should be some overlap
in the docs (comments, @type, etc.), but both sets of docs have lots of things
the other doesn't require and I could see this getting bloated pretty quickly. 

[stevenjb, 2015/02/10 00:22:04]

I'm going to make this Element for now, we can fix this when we figure out what
we are doing with the compiler.

+       * @default {}
+       */
+      networkState: {},
+
+      /**
+       * 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 {cr-onc-data} oldValue Ignored.

[Jeremy Klein, 2015/02/09 18:16:31]

See other comment. The correct format would be CrOncDataElement, but I'm not
sure how we'll want to get that working. For now, this can't be compiled anyway,
so just switch to that.

[stevenjb, 2015/02/10 00:22:04]

I'm still uncomfortable using a type that isn't searchable in the code. I will
use Element here for now also.

+     * @param {cr-onc-data} newValue The new network state used to set the icon.
+     */
+    networkStateChanged: function(oldValue, newValue) {
+      var networkState = newValue;
+      var params = /** @type {IconParams} */ {};

[Jeremy Klein, 2015/02/09 18:16:31]

IconParams_

[stevenjb, 2015/02/10 00:22:04]

Acknowledged.

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

[Jeremy Klein, 2015/02/09 18:16:31]

IconParams_

[stevenjb, 2015/02/10 00:22:04]

Acknowledged.

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

[Jeremy Klein, 2015/02/09 18:16:31]

IconParams_

[stevenjb, 2015/02/10 00:22:04]

Acknowledged.

+     * @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';
+      }
+    }
+
+  });
+})();