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

Review URL: https://codereview.chromium.org/376783002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@281985 0039d316-1c4b-4281-b951-d872f2087c98

ui/file_manager/file_manager/foreground/css/combobutton.css

@@ -3,8 +3,8 @@
  * found in the LICENSE file. */
 
 .buttonbar button.combobutton {
-  -webkit-box-align: stretch;
-  display: -webkit-box;
+  align-items: stretch;
+  display: flex;
 }
 
 .buttonbar .combobutton > .action {

ui/file_manager/file_manager/foreground/css/common.css

@@ -61,7 +61,7 @@ input.common[type='checkbox'].white:checked::after {
 
 input.common[type='checkbox']::after {
   content: '';
-  display: -webkit-box;
+  display: flex;
   height: 15px;
   left: -2px;
   position: absolute;
@@ -116,7 +116,7 @@ input.common[type='checkbox']::after {
 }
 
 .buttonbar {
-  display: -webkit-box;
+  display: flex;
   height: 31px;
 }
 
@@ -365,11 +365,11 @@ html[dir='rtl'] .entry-name {
 /* Pop-up dialogs. */
 
 .cr-dialog-container {
-  -webkit-box-align: center;
-  -webkit-box-pack: center;
   -webkit-user-select: none;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
   height: 100%;
+  justify-content: center;
   left: 0;
   overflow: hidden;
   position: absolute;
@@ -380,14 +380,14 @@ html[dir='rtl'] .entry-name {
 }
 
 .cr-dialog-frame {
-  -webkit-box-orient: vertical;
   background-color: rgb(250, 250, 250);
   border: 1px solid rgb(255, 255, 255);
   border-radius: 2px;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
   color: rgb(34, 34, 34);
   cursor: default;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: column;
   padding: 20px;
   position: relative;
   width: 460px;
@@ -476,9 +476,9 @@ html[dir='rtl'] .entry-name {
 }
 
 .cr-dialog-buttons {
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: end;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
   padding-top: 10px;
 }
 

ui/file_manager/file_manager/foreground/css/drive_welcome.css

@@ -18,8 +18,8 @@
 }
 
 .drive-welcome-links {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
 }
 
 .drive-welcome-button {
@@ -70,7 +70,7 @@
 
 /* Header welcome banner. */
 .drive-welcome.header {
-  -webkit-box-flex: 0;
+  flex: none;
   height: 100px;
   overflow: hidden;
   position: relative;
@@ -83,10 +83,10 @@
 }
 
 .drive-welcome.header .drive-welcome-wrapper {
-  -webkit-box-orient: horizontal;
   background-size: 308px 100px;
   bottom: 0;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
   left: 0;
   position: absolute;
   right: 0;
@@ -100,9 +100,9 @@
 }
 
 .drive-welcome.header .drive-welcome-message {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
 }
 
 .drive-welcome.header .drive-welcome-title {
@@ -122,6 +122,7 @@
 /* Full page welcome banner. */
 .drive-welcome.page {
   bottom: 0;
+  flex: none;
   left: 0;
   position: absolute;
   right: 0;
@@ -137,11 +138,11 @@
 }
 
 .drive-welcome.page .drive-welcome-wrapper {
-  -webkit-box-align: center;
-  -webkit-box-orient: vertical;
+  align-items: center;
   background-size: 520px 173px;
   bottom: 0;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: column;
   font-size: 120%;
   left: 0;
   overflow: hidden;

ui/file_manager/file_manager/foreground/css/table.css

@@ -13,13 +13,13 @@ html.col-resize * {
 }
 
 .table-row {
-  display: -webkit-box;
+  display: flex;
   text-align: start;
   width: 100%;
 }
 
 .table-row-cell {
-  display: -webkit-box;
+  display: flex;
   overflow: hidden;
 }
 
@@ -37,7 +37,7 @@ html.col-resize * {
 .table-header-inner {
   -webkit-user-select: none;
   cursor: default;
-  display: -webkit-box;
+  display: flex;
   position: relative;
   text-align: start;
 }