Use CSS3 flex to lay out Files.app components.

Use CSS3 flex to lay out Files.app components.

This CL includes:
- Simple replacement by following rules.
    s/display: -webkit-box/display: flex/
    s/-webkit-box-orient: vertical/flex-direction: column/
    s/-webkit-box-orient: horizontal/flex-direction: row/
    s/-webkit-box-flex: 1/flex: auto/
    s/-webkit-box-flex: 0/flex: none/
    s/-webkit-box-pack: start/justify-content: flex-start/
    s/-webkit-box-pack: end/justify-content: flex-end/
    s/-webkit-box-pack: center/justify-content: center/
    s/-webkit-box-align: center/align-items: center/
    s/-webkit-box-align: baseline/align-items: baseline/
    s/-webkit-box-align: stretch/align-items: stretch/
- Flex items in "-webkit-box" don't shrink by default, but ones in "flex" shrink by default. So some flex items are specified "flex: none;" additionally. 
- "vertical-align: middle;" doesn't work for flex items, so specify "align-items: center;" for their parents.
- Some position adjustment taking care of difference between "-webkit-box" and "flex". (commented inline)

BUG=387568
Committed: https://src.chromium.org/viewvc/chrome?view=rev&revision=281985

[fukino, 2014-07-08 06:23:48]

yoshiki san, could you take a look?

https://codereview.chromium.org/376783002/diff/1/ui/file_manager/file_manager...
File ui/file_manager/file_manager/foreground/css/file_manager.css (right):

https://codereview.chromium.org/376783002/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:300: margin: -12px
-10px -13px -13px;
margin-right is added 3px because the "left: 3px" is ignored to calculate x
position of the following item in flex container.
margin-top is added 1px to take care of difference of "center" of odd height in
"display: flex" and "display: -webkit-box".

https://codereview.chromium.org/376783002/diff/1/ui/file_manager/file_manager...
ui/file_manager/file_manager/foreground/css/file_manager.css:311:
background-position: center 3px;
background-position-y is added 1px to take care of difference of "center" of odd
height in "display: flex" and "display: -webkit-box".

[yoshiki, 2014-07-09 04:37:58]

lgtm. Thanks for cleaning up!

[fukino, 2014-07-09 04:53:23]

On 2014/07/09 04:37:58, yoshiki wrote:
> lgtm. Thanks for cleaning up!

Thank you!

[fukino, 2014-07-09 04:53:28]

The CQ bit was checked by fukino@chromium.org

[commit-bot: I haz the power, 2014-07-09 04:56:49]

CQ is trying da patch. Follow status at
 https://chromium-status.appspot.com/cq/fukino@chromium.org/376783002/1

[commit-bot: I haz the power, 2014-07-09 07:28:55]

Change committed as 281985