Files app: File grid update styles

Initial re-style for file grid, updates the size, spaces and some colors
in the file grid.

Some styles are shared between file list and file grid and also previous
look'n'feel and the new one, so CSS selectors are hard to overwrite for
new look'n'feel in the file grid.

Add":not(files-ng)" to the icon selector to simplify the issue and add
"#list-container list" when the rule should apply only to file list.

Add a new test: add file-ng flag showGridViewDownloads

Test: browser_tests --gtest_filter="*showGridViewDownloads*"
Bug: 992822
Change-Id: Ia761775207377a3aa94c5fe1762702cc2afbda62
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2072685
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#746132}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -775,6 +775,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
     FilesAppBrowserTest,
     ::testing::Values(TestCase("showGridViewDownloads"),
                       TestCase("showGridViewDownloads").InGuestMode(),
+                      TestCase("showGridViewDownloads").FilesNg(),
                       TestCase("showGridViewDrive"),
                       TestCase("showGridViewButtonSwitches"),
                       TestCase("showGridViewKeyboardSelectionA11y"),

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

@@ -1630,6 +1630,12 @@ html[dir='rtl'] .banner-close {
   width: 100%;
 }
 
+body.files-ng .thumbnail-grid {
+  padding-inline-end: 20px;
+  padding-inline-start: 16px;
+  padding-top: 20px;
+}
+
 body[type='full-page'] .thumbnail-frame > .img-container {
   position: relative;
 }
@@ -1651,6 +1657,10 @@ body[type='full-page'] .detail-name .detail-icon {
   right: 0;
 }
 
+body.files-ng .thumbnail-bottom {
+  padding: 0;
+}
+
 .thumbnail-bottom .detail-icon {
   flex: none;
   height: 16px;
@@ -1663,6 +1673,10 @@ body[type='full-page'] .detail-name .detail-icon {
   padding-inline-end: 6px;
 }
 
+body.files-ng .thumbnail-item .filename-label {
+  padding-inline-end: 12px;
+}
+
 /* Styles specific for the grid view. */
 
 .thumbnail-grid .thumbnail-item {
@@ -1676,11 +1690,36 @@ body[type='full-page'] .detail-name .detail-icon {
   width: 180px;
 }
 
+body.files-ng .thumbnail-grid .thumbnail-item {
+  background-color: inherit;
+  border-radius: 4px;
+  height: 160px;
+  margin-inline-start: 16px;
+  margin-top: 16px;
+}
+
 .thumbnail-grid .thumbnail-item.directory {
   box-shadow: 0 1px rgba(0, 0, 0, 15%);
   height: 40px;
 }
 
+body.files-ng .thumbnail-item.directory   {
+  box-shadow: none;
+  height: 40px;
+}
+
+body.files-ng #list-container .thumbnail-grid li {
+  border: 1px solid rgba(0, 0, 0, 14%);
+}
+
+body.files-ng grid .thumbnail-bottom .detail-icon {
+  cursor: pointer;
+  height: 40px;
+  padding-inline-end: 6px;
+  padding-inline-start: 6px;
+  width: 32px;
+}
+
 .thumbnail-grid .thumbnail-frame {
   height: 100%;
   width: 100%;
@@ -1695,6 +1734,7 @@ body[type='full-page'] .detail-name .detail-icon {
  background-color: rgba(51, 103, 214, 50%);
 
 }
+
 .thumbnail-grid .thumbnail-item[lead]:not([selected]) .shield {
   background-color: rgba(51, 103, 214, 20%);
 }
@@ -1747,6 +1787,10 @@ body.check-select .thumbnail-grid .thumbnail-item[selected] .checkmark.active {
   width: 100%;
 }
 
+body.files-ng .thumbnail-grid .img-container {
+  height: 120px;
+}
+
 .thumbnail-grid .img-container > .thumbnail {
   -webkit-user-drag: none;
   background-color: rgb(230, 230, 230);
@@ -1783,6 +1827,11 @@ body.check-select .thumbnail-grid .thumbnail-item[selected] .checkmark.active {
   height: 40px;
 }
 
+body.files-ng .thumbnail-grid .thumbnail-bottom {
+  background-color: white;
+  color: var(--google-grey-900);
+}
+
 .thumbnail-grid .thumbnail-item.directory .thumbnail-bottom {
   background-color: rgb(255, 255, 255);
 }
@@ -1797,6 +1846,29 @@ body.check-select .thumbnail-grid .thumbnail-item[selected] .checkmark.active {
   background-color: rgb(232, 246, 253);
 }
 
+/** TODO(lucmult): Style the bg without focus */
+body.files-ng .thumbnail-grid .thumbnail-item[selected] .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[lead] .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[selected].directory
+    .thumbnail-bottom,
+body.files-ng .thumbnail-grid .thumbnail-item[lead].directory
+    .thumbnail-bottom {
+  background-color: var(--google-blue-50);
+  color: var(--google-blue-600);
+}
+
+body.files-ng #list-container .thumbnail-grid .thumbnail-item[lead] {
+  /* 2px border: 1px via box-shadow + 1px via border, to accommodate
+     the difference between regular border 1px and selected border 2px.*/
+  border-color: var(--google-blue-600);
+  box-shadow: 0 0 0 1px var(--google-blue-600);
+}
+
+body.files-ng #list-container .thumbnail-grid .thumbnail-item[lead].directory
+    .shield {
+  height: 36px;
+}
+
 .thumbnail-grid > .spacer.folder-spacer {
   height: 5px;
 }
@@ -2105,12 +2177,19 @@ li[renaming=''] .badge {
   width: 24px;
 }
 
-#list-container li .detail-icon {
+body:not(.files-ng) #list-container li .detail-icon {
   height: 28px;
   margin-inline-end: 6px;
   width: 28px;
 }
 
+body.files-ng #list-container list li .detail-icon {
+  height: 40px;
+  margin-inline-end: 16px;
+  margin-inline-start: 12px;
+  width: 32px;
+}
+
 #list-container li .detail-checkmark {
   background-position: center;
   background-repeat: no-repeat;
@@ -2544,13 +2623,6 @@ body.files-ng.check-select list:focus li[selected] .table-row-cell
   color: var(--google-blue-600);
 }
 
-body.files-ng #list-container li .detail-icon {
-  height: 40px;
-  margin-inline-end: 16px;
-  margin-inline-start: 12px;
-  width: 32px;
-}
-
 body.files-ng #list-container li .detail-checkmark {
   -webkit-mask-image: url(../images/files/ui/list_check.svg);
   -webkit-mask-position: center;