Fix chrome://network CSS for cr-network-icon

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 874e916aeb9270ecbe34f8c13e903717e0a27900..7a6dd35fc63c51990f854ea0d5ee1556de2bfddb 100644
--- a/chrome/browser/resources/chromeos/network_ui/network_ui.css
+++ b/chrome/browser/resources/chromeos/network_ui/network_ui.css
@@ -50,11 +50,6 @@ paper-button[raised].colored {
   font-weight: bold;
 }
 
-.state-table-icon-cell {
-  display: flex;
-  justify-content: center;
-}
-
 .state-table-expand-button-cell {
   text-align: center;
 }
@@ -75,6 +70,7 @@ paper-button[raised].colored {
 
 .state-table cr-network-icon {
   height: 25px;
+  vertical-align: middle;

[michaelpg, 2015/03/03 21:09:09]

w00t I figured this out! (kind of)

TL;DR: It's a trap. We should update cr-network-icon to be "display: block", add
a warning there that "display: inline-block" will screw with the positioning
with a link to the spec, and remove line 73. OR do some trickery**.

===================================

I still don't know why display:flex creates moar borders. But the reason this
vertical alignment nonsense is necessary at all is: *the cr-network-icon's
bottom margin is on the baseline*, which is too high.

Setting "display: block" or adding line 73 ("vertical-align: middle") fixes
this.

My explanation follows but it gets technical:

1. Without "display: flex", the table cell vertically centers its content. This
is the default for table cells.

2. So "vertical-align: middle" here looks weird -- it should be vertically
centered anyway.

3. In fact, the icon IS vertically centered within the <td> -- it's just a few
pixels too high. (Insert a bunch of <br>s in a sibling <td> or change the height
of the cell to see this.)

4. If I change cr-network-icon from "display: inline-block" to "display: block",
it becomes fully vertically centered. ("display: inline" also centers it but
this kills the icon.)

WTF, right?

===================================

The explanation is the very last line of
http://www.w3.org/TR/CSS2/visudet.html#leading:

    The baseline of an 'inline-block' is the baseline of its
    last line box in the normal flow, unless it has either no
    in-flow line boxes or if its 'overflow' property has a
    computed value other than 'visible', in which case the
    baseline is the bottom margin edge.

Examples here: http://jsfiddle.net/5g2ejzww/1/

In the 2nd row, the baseline of the 'inline-block' is the baseline of its
containing line box -- see how the baseline matches up (ABgjy -> ABgjy).

In the 3rd row, because the 'overflow' property is 'hidden' instead of
'visible', "the baseline is the bottom margin edge" -- as in, the bottom margin
is PLACED on the baseline. See how the bottom margin of the <div> is aligned
with the baseline of the container (ABgjy).

So because cr-network-icon uses both "overflow: hidden" and "display:
inline-block", the element is shifted up onto the baseline of the table cell.

More examples here: http://jsfiddle.net/Lxofxgpt/ and you can change the array
of vertical-align values to see how different options interact. Some
combinations are "safe", others are not (they're affected by an element being
"overflow: hidden"). Further confusing things, elements in a <td> are vertically
aligned if the <td> has "vertical-align: middle" (the default), but this is a
Separate Thing from using "vertical-align: middle" on inline-block elements. So
the way cr-network-icon will align is dependent on both its own vertical-align
and sibling elements's vertical-align, *and* whether it's within a <td> or not.

===================================

I would update cr-network-icon to be "display: block", and add a warning there
that "display: inline-block" will screw with the positioning with a link to the
spec.

** Some trickery: A 3rd option might be possible. See if you can wrap the
offending "overflow: hidden" element with your cr-network-icon element. In other
words, instead of:

<cr-network-icon> // overflow: hidden, display: inline-block, height/width: 25px
  <implementation...>
</cr-network-icon>

see if we can negate the positioning weirdness by making cr-network-icon
"overflow: visible":

<cr-network-icon> // display: inline-block
  <div> // overflow: hidden, height/width: 25px
    <implementation...>
  </div>
</cr-network-icon>

Not sure this will work. I don't think it's this simple. Time to memorize the
CSS spec....

[stevenjb, 2015/03/03 21:43:01]

TLDR; display:block in the icon does fix this and seems perfectly reasonable to
me. Included a short comment.

   width: 25px;
 }