Use CSS3 flex to lay out Files.app components.

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

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 96eab73bc759a110562c0e5ac2f586d43ff13960..cdc269156b24206a3984de31a11c64788f11ea45 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -42,12 +42,12 @@ html.col-resize * {
 
 /* Outer frame of the dialog. */
 body {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
   cursor: default;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
   height: 100%;
   margin: 0;
   padding: 0;
@@ -76,6 +76,7 @@ a:focus {
 /* TODO(mtomasz): Flip scrollbars to the opposite side for RTL languages. */
 .scrollbar-vertical {
   bottom: 0;
+  flex: none;
   position: absolute;
   right: 0;
   top: 0;
@@ -111,11 +112,11 @@ a:focus {
 
 /* Main part of the dialog between header and footer. */
 .dialog-container {
-  -webkit-box-align: stretch;
-  -webkit-box-flex: 1;
-  -webkit-box-orient: horizontal;
+  align-items: stretch;
   background-color: white;  /* Makes #drag-container invisible. */
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: row;
   overflow: hidden;
   position: relative;
 }
@@ -128,19 +129,18 @@ a:focus {
 
 /* List/grid and preview are inside this container. */
 .dialog-main {
-  -webkit-box-align: stretch;
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  align-items: stretch;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
 }
 
 /* Directory tree at the left. */
 .dialog-navigation-list {
   -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
-  -webkit-box-flex: 0;
-  -webkit-box-orient: vertical;
   background-color: #f1f1f1;
   display: flex;
+  flex: none;
   flex-direction: column;
   max-width: 40%;
   min-width: 100px;
@@ -175,13 +175,13 @@ a:focus {
 }
 
 .dialog-navigation-list-contents {
-  display: -webkit-box;
+  display: flex;
   flex: 1 1 auto;
   position: relative;
 }
 
 .dialog-navigation-list-footer {
-  display: -webkit-flex;
+  display: flex;
   flex: none;
   flex-direction: column;
 }
@@ -189,8 +189,8 @@ a:focus {
 /* A vertical splitter between the roots list and the file list. It is actually
    a transparent area centered on the roots list right border.*/
 div.splitter {
-  -webkit-box-flex: 0;
   cursor: col-resize;
+  flex: none;
   margin-left: -3px;
   margin-right: -3px;
   position: relative;
@@ -199,9 +199,9 @@ div.splitter {
 }
 
 #navigation-list {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
 }
 
 #navigation-list > * {
@@ -209,6 +209,10 @@ div.splitter {
   padding: 0 5px;
 }
 
+#navigation-list > .spacer {
+  flex: none;
+}
+
 #navigation-list > .accepts,
 #navigation-list > [lead][selected],
 #navigation-list > [lead],
@@ -227,14 +231,15 @@ div.splitter {
 }
 
 #navigation-list li.root-item {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
+  flex: none;
   line-height: 22px;  /* To accommodate for icons. */
   padding-left: 11px;
 }
 
 #navigation-list li.root-item > .root-label {
-  -webkit-box-flex: 1;
+  flex: auto;
   margin: 0 2px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -243,6 +248,7 @@ div.splitter {
 
 #navigation-list .volume-icon {
   background-repeat: no-repeat;
+  flex: none;
   height: 24px;
   width: 24px;
 }
@@ -252,6 +258,7 @@ div.splitter {
   -webkit-box-sizing: border-box;
   -webkit-padding-start: 20px;
   color: rgb(100, 100, 100);
+  flex: none;
   height: 47px;
   line-height: 40px;
   overflow-x: hidden;
@@ -263,6 +270,7 @@ div.splitter {
 #directory-tree {
   -webkit-border-end: 1px solid rgba(20, 20, 22, 0.1);
   bottom: 0;
+  flex: none;
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
@@ -273,8 +281,9 @@ div.splitter {
 }
 
 #directory-tree .tree-row {
+  align-items: center;
   cursor: pointer;
-  display: -webkit-box;
+  display: flex;
   line-height: 29px;
   padding: 0 3px;
 }
@@ -285,12 +294,12 @@ div.splitter {
 }
 
 #directory-tree .tree-row > .expand-icon {
+  flex: none;
   height: 37px;
   left: 3px;
-  margin: -13px;
+  margin: -12px -10px -13px -13px;

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

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".

   right: 3px;
   top: 0;
-  vertical-align: middle;
   width: 37px;
 }
 
@@ -299,16 +308,16 @@ div.splitter {
 }
 
 #directory-tree .tree-row > .volume-icon {
-  background-position: center 2px;
+  background-position: center 3px;

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

background-position-y is added 1px to take care of difference of "center" of odd
height in "display: flex" and "display: -webkit-box".

   background-repeat: no-repeat;
+  flex: none;
   height: 24px;
-  vertical-align: middle;
   width: 24px;
 }
 
 #directory-tree .tree-row > .label {
-  -webkit-box-flex: 1;
   display: block;
+  flex: auto;
   margin: 0 3px;
   overflow-x: hidden;
   text-overflow: ellipsis;
@@ -356,7 +365,6 @@ div.splitter {
   margin-right: 6px;
   opacity: 0.7;
   transition: opacity 70ms linear;
-  vertical-align: middle;
   width: 20px;
 }
 
@@ -375,9 +383,10 @@ div.splitter {
 /* Breadcrumbs and things under the title but above the list view. */
 .dialog-header {
   -webkit-app-region: drag;
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
+  align-items: center;
   display: flex;
+  flex: none;
+  flex-direction: row;
   height: 48px;
   margin: 0;
   transition: all 180ms ease;
@@ -482,15 +491,15 @@ div.splitter {
 
 /* Container for the detail and thumbnail list views. */
 .dialog-body {
-  -webkit-box-flex: 1;
   -webkit-transition: all 180ms ease;
   border-top: 1px solid rgba(20, 20, 22, 0.1);
+  flex: auto;
   position: relative;
 }
 
 .main-panel {
   bottom: 0;
-  display: -webkit-box;
+  display: flex;
   left: 0;
   position: absolute;
   right: 0;
@@ -498,7 +507,8 @@ div.splitter {
 }
 
 .dialog-middlebar-contents {
-  display: -webkit-box;
+  display: flex;
+  flex: none;
   max-width: 50%;
   min-width: 45px;
   position: relative;
@@ -507,10 +517,11 @@ div.splitter {
 
 /* Container for the ok/cancel buttons. */
 .dialog-footer {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
+  align-items: center;
   border-top: 1px solid rgb(225, 225, 225);
-  display: -webkit-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
   outline: none;
   padding: 10px;
 }
@@ -528,17 +539,17 @@ div.splitter {
 }
 
 .progressable .progress-bar {
-  -webkit-box-flex: 1;
   -webkit-margin-end: 20px;
   -webkit-margin-start: 20px;
+  flex: auto;
 }
 
 /* The container for breadcrumb elements. */
 .breadcrumbs {
-  -webkit-box-align: center;
-  -webkit-box-flex: 1;
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
+  flex: auto;
+  flex-direction: row;
   line-height: 20px;
   overflow: hidden;
   padding-top: 1px;
@@ -556,6 +567,7 @@ div.splitter {
 .breadcrumb-path {
   color: #969696;
   cursor: pointer;
+  flex: none;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -575,6 +587,7 @@ div.splitter {
     url('../images/files/ui/2x/breadcrumb-separator.png') 2x);
   background-position: center center;
   background-repeat: no-repeat;
+  flex: none;
   height: 10px;
   overflow: hidden;
   width: 25px;
@@ -593,27 +606,27 @@ html[dir='rtl'] .breadcrumbs .separator {
 }
 
 .filelist-panel {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
 }
 
 #list-container {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
   position: relative;
 }
 
 #detail-table {
-  -webkit-box-flex: 1;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
+  flex-direction: column;
 }
 
 #detail-table > list,
 .thumbnail-grid {
-  -webkit-box-flex: 1;
+  flex: auto;
   padding-bottom: 0;  /* For the preview panel. Will be overridden by JS. */
 }
 
@@ -649,8 +662,7 @@ html[dir='rtl'] .breadcrumbs .separator {
 }
 
 .downloads-warning {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
+  align-items: center;
   background-color: #f0f0f0;
   background-image: -webkit-image-set(
     url('../images/files/ui/warning_icon_square.png') 1x,
@@ -658,7 +670,9 @@ html[dir='rtl'] .breadcrumbs .separator {
   background-position: 15px center;
   background-repeat: no-repeat;
   color: #666;
-  display: -webkit-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
   font-size: 13px;
   height: 57px;
   overflow: hidden;
@@ -667,27 +681,28 @@ html[dir='rtl'] .breadcrumbs .separator {
 }
 
 .downloads-warning[hidden] {
-  display: -webkit-box !important;  /* Overrides [hidden] for animation. */
+  display: flex !important;  /* Overrides [hidden] for animation. */
   height: 0;
 }
 
 @-webkit-keyframes heightAnimation {
   0% {
+    display: flex;
     height: 0;
-    display: -webkit-box;
   }
 }
 
 /* Drive space warning banner. */
 .volume-warning {
   -webkit-animation: heightAnimation 70ms linear;
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
+  align-items: center;
   background-image: url(chrome://resources/images/clouds.png);
   background-repeat: repeat-x;
   background-size: 150px 44px;
   color: #333;
-  display: -webkit-box;
+  display: flex;
+  flex: none;
+  flex-direction: row;
   font-size: 13px;
   height: 44px;
   overflow: hidden;
@@ -706,11 +721,13 @@ html[dir='rtl'] .breadcrumbs .separator {
   background-position: center;
   background-repeat: no-repeat;
   background-size: 25px 22px;
+  flex: none;
   height: 44px;
   width: 50px;
 }
 
 .volume-warning .drive-text {
+  flex: none;
   margin-right: 11px;
 }
 
@@ -740,12 +757,12 @@ body[type='full-page'] .detail-name .detail-icon {
 }
 
 .thumbnail-bottom {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: center;
+  align-items: center;
   bottom: 0;
   cursor: auto;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
   left: 0;
   padding: 0 10px;
   position: absolute;
@@ -753,7 +770,7 @@ body[type='full-page'] .detail-name .detail-icon {
 }
 
 .thumbnail-bottom .filename-label {
-  -webkit-box-flex: 1;
+  flex: auto;
 }
 
 /* Styles specific for the grid view. */
@@ -878,7 +895,7 @@ input.rename {
 
 .table-row-cell .filename-label,
 .table-row-cell input.rename {
-  -webkit-box-flex: 1;
+  flex: auto;
 }
 
 li[renaming=''] .filename-label {
@@ -900,14 +917,14 @@ li[renaming=''] .filename-label {
 
 /* Bottom pane describing current selection. */
 .preview-panel {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
   -webkit-transition: background-color 150ms ease;
+  align-items: center;
   background: linear-gradient(
       to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 1));
   border-top: 1px solid rgba(20, 20, 22, 0.1);
   bottom: 0;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
   height: 51px;
   left: 0;
   opacity: 1;
@@ -932,28 +949,30 @@ li[renaming=''] .filename-label {
 
 .preview-panel > .left,
 .dialog-footer > .left {
-  -webkit-box-align: center;
-  -webkit-box-flex: 1;
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
+  flex: auto;
+  flex-direction: row;
 }
 
 .preview-panel > .right,
 .dialog-footer > .right {
-  -webkit-box-pack: end;
+  flex: none;
+  justify-content: flex-end;
 }
 
 .preview-panel .preparing-label {
   -webkit-margin-start: 30px;
+  flex: none;
 }
 
 .preview-panel .progress-bar {
-  -webkit-box-flex: 1;
+  flex: auto;
 }
 
 .preview-thumbnails {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
   padding-left: 25px;
 }
 
@@ -979,7 +998,7 @@ li[renaming=''] .filename-label {
   box-shadow: 0 0 0 1px #F0F0F0,
               0 0 0 2px #D0D0D0,
               2px 2px 6px rgba(0, 0, 0, 0.2);
-  display: -webkit-flex;
+  display: flex;
   left: -8px;
   opacity: 0;
   pointer-events: none;
@@ -1009,7 +1028,7 @@ li[renaming=''] .filename-label {
 }
 
 .preview-thumbnails > .popup > img {
-  -webkit-flex: 1 1 0;
+  flex: 1 1 0;
   -webkit-user-drag: none;
 }
 
@@ -1032,6 +1051,7 @@ li[renaming=''] .filename-label {
 /* Container for a table header. */
 .table-header {
   box-sizing: border-box;
+  flex: none;
   height: 47px;
 }
 
@@ -1073,9 +1093,9 @@ li[renaming=''] .filename-label {
 }
 
 .table-row-cell > * {
-  -webkit-box-align: center;
-  -webkit-box-flex: 1;
-  -webkit-box-orient: horizontal;
+  align-items: center;
+  flex: auto;
+  flex-direction: row;
   padding: 0 10px;
 }
 
@@ -1084,7 +1104,7 @@ li[renaming=''] .filename-label {
 }
 
 .table-row-cell > .detail-name {
-  display: -webkit-box;
+  display: flex;
 }
 
 .table-row-cell > .detail-name {
@@ -1098,7 +1118,7 @@ li[renaming=''] .filename-label {
 }
 
 .table-row-cell {
-  -webkit-box-align: center;
+  align-items: center;
 }
 
 #list-container li.table-row,
@@ -1119,7 +1139,7 @@ li[renaming=''] .filename-label {
 }
 
 .preview-panel .spacer {
-  -webkit-box-flex: 1;
+  flex: auto;
 }
 
 #delete-button {
@@ -1155,10 +1175,9 @@ li[renaming=''] .filename-label {
 }
 
 #preview-lines {
-  -webkit-box-flex: 1;
   -webkit-margin-end: 10px;
   -webkit-margin-start: 10px;
-  vertical-align: middle;
+  flex: auto;
 }
 
 /* The selection summary text at the bottom of the preview pane. */
@@ -1176,27 +1195,26 @@ li[renaming=''] .filename-label {
 }
 
 .detail-name > * {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
+  flex: none;
 }
 
 #filename-input-box {
-  -webkit-box-align: center;
-  -webkit-box-flex: 1;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
+  flex: auto;
 }
 
 #filename-input-box input {
-  -webkit-box-flex: 1;
-  display: -webkit-box;
+  flex: auto;
   padding: 1px 2px;
 }
 
 #filename-input-box .filename-label {
-  -webkit-box-orient: horizontal;
   background-color: white;
   color: #333;
-  display: -webkit-box;
+  flex: none;
   padding-right: 4px;
 }
 
@@ -1239,12 +1257,12 @@ body[overlay-visible] > :not(.overlay-pane) {
 }
 
 #drag-container .drag-contents {
-  -webkit-box-orient: horizontal;
   background-color: #fafafa;
   border: 1px solid #bbb;
   border-radius: 3px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .2);
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
   line-height: 0;
   margin-bottom: 5px;
   padding: 6px;
@@ -1252,16 +1270,17 @@ body[overlay-visible] > :not(.overlay-pane) {
 }
 
 #drag-container .drag-contents.for-image  {
+  flex: none;
   padding: 2px;
 }
 
 #drag-container .thumbnail-item {
-  -webkit-box-orient: horizontal;
-  display: -webkit-box;
+  display: flex;
+  flex-direction: row;
 }
 
 #drag-container .label {
-  -webkit-box-flex: 1;
+  flex: auto;
   font-weight: bold;
   line-height: 24px;
   max-width: 320px;
@@ -1326,11 +1345,11 @@ body[unformatted] .dialog-container .filelist-panel {
 
 #unmounted-panel > *,
 #format-panel > * {
-  -webkit-box-align: center;
-  -webkit-box-orient: horizontal;
-  -webkit-box-pack: start;
+  align-items: center;
   display: none;
+  flex-direction: row;
   height: 22px;
+  justify-content: flex-start;
   margin-bottom: 10px;
 }
 
@@ -1351,7 +1370,7 @@ body[drive='mounting'] #unmounted-panel > .loading,
 body[drive='error'] #unmounted-panel > .error,
 #format-panel > #format-button,
 #unmounted-panel.retry-enabled > .learn-more {
-  display: -webkit-box;
+  display: flex;
 }
 
 .plain-link {
@@ -1434,6 +1453,7 @@ body[drive='error'] #unmounted-panel > .error,
 #no-search-results {
   bottom: 0;
   display: none;
+  flex: none;
   left: 0;
   padding: 10px;
   position: absolute;
@@ -1446,14 +1466,14 @@ body[drive='error'] #unmounted-panel > .error,
 }
 
 #volume-space-info-contents {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
 }
 
 #volume-space-info-contents > div {
-  -webkit-box-flex: 1;
   -webkit-margin-start: 15px;
-  display: -webkit-box;
+  display: flex;
+  flex: auto;
 }
 
 #list-container .table-header-inner {
@@ -1470,6 +1490,7 @@ body[drive='error'] #unmounted-panel > .error,
 }
 
 #new-folder-button {
+  flex: none;
   margin-right: 30px;
 }
 
@@ -1491,6 +1512,7 @@ list.autocomplete-suggestions {
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .5);
   box-sizing: border-box;  /* To match the width with the search box's. */
   color: rgb(34, 34, 34);
+  flex: none;
   overflow: hidden;
   padding: 5px 0;
   position: fixed;
@@ -1499,8 +1521,8 @@ list.autocomplete-suggestions {
 }
 
 list.autocomplete-suggestions > li {
-  -webkit-box-align: center;
-  display: -webkit-box;
+  align-items: center;
+  display: flex;
   padding: 3px 0;
 }
 
@@ -1510,7 +1532,7 @@ list.autocomplete-suggestions > li > div.detail-icon {
 }
 
 list.autocomplete-suggestions > li > div.detail-text {
-  -webkit-box-flex: 1;
+  flex: auto;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }