Adjust the thumbnail view to match the specs.

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

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 1604e54a8f618295e857ee96aa727c9e020cd46f..c47dc007fb3a7ea3e72a64213e0db8dded5d2e44 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -1183,7 +1183,7 @@ body[new-ui] .img-container > img:not(.cached) {
   cursor: auto;
   display: -webkit-box;
   left: 0;
-  padding: 0 5px;
+  padding: 0 10px;
   position: absolute;
   right: 0;
 }
@@ -1196,8 +1196,8 @@ body[new-ui] .img-container > img:not(.cached) {
 
 /* The item width and margins are chosen so that the standard File Open/Save
    dialogs have three nicely aligned columns of thumbnails. */
-.thumbnail-grid .thumbnail-item {
-  border: 2px solid transparent;  /* Selection will make the border visible. */
+body:not([new-ui]) .thumbnail-grid .thumbnail-item {
+  border: 1px solid transparent;  /* Selection will make the border visible. */
   margin-left: 8px;
   margin-top: 7px;
   padding: 0;
@@ -1205,7 +1205,15 @@ body[new-ui] .img-container > img:not(.cached) {
   text-align: center;
 }
 
-.thumbnail-grid .thumbnail-frame {
+body[new-ui] .thumbnail-grid .thumbnail-item {
+  border: 3px solid transparent;  /* Selection will make the border visible. */
+  margin-left: 8px;

[hirono, 2013/05/28 08:28:36]

"-webkit-margin-start: 8px;" ?

[mtomasz, 2013/05/28 09:16:04]

Done.

+  margin-top: 7px;
+  padding: 0;
+  position: relative;
+}
+
+body:not([new-ui]) .thumbnail-grid .thumbnail-frame {
   background-image: -webkit-image-set(
     url('../images/files/ui/hashed_bg.gif') 1x,
     url('../images/files/ui/2x/hashed_bg.gif') 2x);
@@ -1219,7 +1227,10 @@ body[new-ui] .img-container > img:not(.cached) {
 
 body[new-ui] .thumbnail-grid .thumbnail-frame {
   background-color: rgb(245, 245, 245);
-  background-image: none;
+  height: 180px;
+  overflow: hidden;
+  position: relative;
+  width: 240px;
 }
 
 .thumbnail-grid .thumbnail-item[selected] .thumbnail-frame,
@@ -1233,13 +1244,18 @@ body:not([new-ui]) .thumbnail-grid .thumbnail-item:hover .thumbnail-frame {
   width: 100%;
 }
 
-.thumbnail-grid .thumbnail-bottom {
+body .thumbnail-grid .thumbnail-bottom {
   background: rgba(0, 0, 0, 0.75);
   color: #eee;
   height: 30px;
 }
 
-.thumbnail-item .thumbnail-bottom .file-checkbox {
+body[new-ui] .thumbnail-grid .thumbnail-bottom {
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+}
+
+body:not([new-ui]) .thumbnail-item .thumbnail-bottom .file-checkbox {
   left: 9px;
   position: absolute;
   top: 10px;
@@ -1259,12 +1275,17 @@ body[type='full-page'] .thumbnail-grid .thumbnail-item {
   margin-top: 20px;
 }
 
-body[type='full-page'] .thumbnail-grid .thumbnail-frame {
+body[type='full-page']:not([new-ui]) .thumbnail-grid .thumbnail-frame {
   height: 240px;
   padding-bottom: 34px;  /* .thumbnail-bottom height */
   width: 320px;
 }
 
+body[type='full-page'][new-ui] .thumbnail-grid .thumbnail-frame {
+  height: 240px;
+  width: 320px;
+}
+
 body[type='full-page'] .thumbnail-grid .thumbnail-bottom {
   height: 34px;
 }