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

ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css

Index: ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
diff --git a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
index 3406bcc38f2ee57dfa71f5127b8cc16db506c10f..f7b18280c1bea0c6187742c071e1df2d3c76f5dd 100644
--- a/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
+++ b/ui/webui/resources/cr_elements/cr_network_icon/cr_network_icon.css
@@ -4,8 +4,10 @@
 
 :host {
   display: inline-block;
+  height: 50px;
   overflow: hidden;
   position: relative;
+  width: 50px;
 }
 
 #icon {
@@ -38,6 +40,34 @@
   top: -400%;
 }
 
+/* Connecting animation */
+
+#icon.connecting {
+  -webkit-animation: levels 2s infinite;
+  -webkit-animation-timing-function: steps(4, start);
+}
+
+@-webkit-keyframes levels {
+  from {
+    top: 0%;
+  }
+  to {
+    top: -400%;
+  }
+}
+
+/* Badges */
+
+/* Upper-left corner */
+#technology {
+  height: 40%;
+  margin-left: 0px;

[James Hawkins, 2015/02/27 19:46:05]

-webkit-margin-start

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

We don't currently invert badges for RTL, and I don't think we necessarily
should. (We don't do so in the status area / C++ code so if we change it in one
place we should change both).

Added a comment.

+  margin-top: 0px;
+  position: absolute;
+}
+
+/* Lower-right corner */
+#roaming,
 #secure {
   height: 40%;
   margin-left: 60%;

[James Hawkins, 2015/02/27 19:46:05]

-webkit-margin-start

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

ditto