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

chrome/browser/resources/chromeos/network_ui/network_ui.css

Index: chrome/browser/resources/chromeos/network_ui/network_ui.css
diff --git a/chrome/browser/resources/chromeos/network_ui/network_ui.css b/chrome/browser/resources/chromeos/network_ui/network_ui.css
index c3fbf8736644002aaf8fd699a7fe1b7839b3b58e..874e916aeb9270ecbe34f8c13e903717e0a27900 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.css
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.css
@@ -50,6 +50,11 @@ paper-button[raised].colored {
   font-weight: bold;
 }
 
+.state-table-icon-cell {
+  display: flex;

[michaelpg, 2015/03/03 02:52:04]

I don't know why exactly but this affects the flow somehow, adding a second
border around the icons:

http://i.imgur.com/r5YH1eh.png

I disabled "display:flex" for the 3rd icon (cellular) -- see that it has the
regular border width.

I also set "display: flex" on the "Type" cell in the first row (eth1_gui) -- as
you can see the border surrounds the text content, not the entire <td> (or
rather, it seems the <td> is  sized around the text content, making it smaller
than the space it should occupy in the table).

[stevenjb, 2015/03/03 17:55:28]

Good catch. It seems that display: flex does not play well with tables (or at
least, after a bit of playing it is still not clear to me wtf is going on).

Adding .state-table cr-network-icon { vertical-align: middle; } seems to be the
correct thing to do here. I'll put up a CL with that shortly.

+  justify-content: center;
+}
+
 .state-table-expand-button-cell {
   text-align: center;
 }