Files.app: Added a header to the middle bar and polish the design.

This CL added a header element to main_new_ui.html and updated CSS to match the
height of items in the directory tree and the files list.

BUG=239283
TEST=manually

Review URL: https://chromiumcodereview.appspot.com/16043005

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

chrome/browser/resources/file_manager/css/file_manager.css

@@ -351,6 +351,16 @@ body[new-ui] #volume-list .volume-icon {
   width: 24px;
 }
 
+#middlebar-header {
+  -webkit-box-sizing: border-box;
+  -webkit-padding-start: 20px;
+  border-right: 1px solid rgb(212, 212, 212);
+  color: rgb(100, 100, 100);
+  height: 47px;
+  line-height: 40px;
+  position: absolute;
+  width: 100%;
+}
 
 #directory-tree {
   bottom: 0;
@@ -359,7 +369,7 @@ body[new-ui] #volume-list .volume-icon {
   overflow-y: auto;
   position: absolute;
   right: 0;
-  top: 0;
+  top: 47px;
 }
 
 body[new-ui] #directory-tree {
@@ -1594,7 +1604,7 @@ body[new-ui] .table-header-splitter {
 body[new-ui] .table-header {
   background-color: transparent;
   border-bottom: none;
-  height: 40px;
+  height: 47px;
 }
 
 .table-header-sort-image-desc::after {
@@ -1722,7 +1732,11 @@ body[new-ui] #list-container list:focus li.table-row[selected] .file-checkbox {
 }
 
 body[new-ui] #list-container li.table-row {
-  height: 30px;
+  border-style: none;
+  height: 29px;
+  margin: 0;
+  padding-bottom: 0;
+  padding-top: 0;
 }
 
 body[new-ui] #default-actions-list li {

chrome/browser/resources/file_manager/main_new_ui.html

@@ -276,6 +276,8 @@
           <div class="main-panel">
             <!-- The middle bar and spilitter are hidden by default, and will be shown by script if necessary. -->
             <div class="dialog-middlebar-contents" hidden>
+              <div id="middlebar-header"
+                   i18n-content="DRIVE_DIRECTORY_LABEL"></div>
               <tree id="directory-tree" tabindex="8"></tree>
             </div>
             <div class="splitter" id="middlebar-splitter" hidden></div>