Support badges and connecting animation in cr-network-icon element

ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html

Index: ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html
index a8a53fb2ffa2440bd47394afbfb943335fcae32c..fac042a536a587e4311f93695bdbfdb86d55be4f 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.html
@@ -4,8 +4,11 @@
   <template>
     <link rel="stylesheet" href="cr_network_icon.css">
     <img id="icon">
+    <img id="technology">
+    <img id="roaming"
+        src="chrome://resources/cr_elements/cr_network_icon/badge_roaming.png">

[michaelpg, 2015/02/27 20:38:41]

I wonder if it would be better not to define the src until we know we want to
display (load) the image. Or to use something like <template if="{{roaming}}">
instead of toggling visibility in the JS.

[stevenjb, 2015/02/27 22:14:05]

Fair point, but the badges are pretty small. It seems like additional complexity
(badge logic would be split between JS and CSS) for a very minor optimization,
imho.

     <img id="secure"
-        src="chrome://resources/cr_elements/cr_network_icon/secure.png">
+        src="chrome://resources/cr_elements/cr_network_icon/badge_secure.png">
   </template>
   <script src="cr_network_icon.js"></script>
 </polymer-element>