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

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

 /* Copyright 2013 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. */
 
 paper-button[raised].colored {
   background: rgb(66, 133, 244);
   color: white;
 }
 
 #header {
@@ skipping 32 matching lines @@
 
 .state-table tr td {
   border: 1px solid rgb(220, 220, 220);
   font-size: 13px;
 }
 
 .state-table-header {
   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;
 }
 
 .state-table-expand-button {
   background-color: #fff;
   border: none;
   height: 20px;
   margin: 0;
   outline: none;
   padding: 0;
   width: 20px;
 }
 
 .state-table-expanded-cell {
   white-space: pre-wrap;
 }
 
 .state-table cr-network-icon {
   height: 25px;
   width: 25px;
 }
 
 #advanced-options {
   margin-top: 10px;
 }