Files app: FilesNG styles for file list rows

Implements layout/sizing, colors (background, font and borders) for rows
in the file list.

Hide image which was displayed when the folder is empty, as per
discussion with our PM.

Disable the animation for thumbnail, because during the transition to
show the "check select" icon it was showing both check-select icon and
the thumbnail, which is visually unpleasant/junky.

Reset the font-size for the whole body to 13px as verbally agreed with
our designer.

Bug: 992821
Change-Id: I02870761dd7a844d6a07a70d2aee792df061acc3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2026533Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#737690}

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

@@ -47,6 +47,10 @@ body {
   width: 100%;
 }
 
+body.files-ng {
+  font-size: 13px;
+}
+
 button:focus,
 input[type='button']:focus,
 input[type='submit']:focus,
@@ -1616,12 +1620,26 @@ html[dir='rtl'] .badge {
   background-color: rgb(232, 234, 237);
 }
 
+body.files-ng #list-container list > li[selected],
+body.files-ng #list-container list > li:active,
+body.files-ng #list-container list > li.accepts,
+body.files-ng #list-container list:focus > li[lead] {
+  background-color: var(--google-grey-100);
+  border-radius: 2px;
+}
+
 #list-container list:focus > li[selected],
 #list-container list:focus > li.accepts[selected],
 #list-container list:focus > li[lead] {
   background-color: rgb(216, 223, 240);
 }
 
+body.files-ng #list-container list:focus > li[selected],
+body.files-ng #list-container list:focus > li.accepts[selected],
+body.files-ng #list-container list:focus > li[lead] {
+  background-color: var(--google-blue-50);
+}
+
 #default-tasks-list:focus > li[selected],
 #default-tasks-list > li[selected] {
   background-color: rgb(216, 223, 240);
@@ -1638,6 +1656,15 @@ body.check-select #list-container list:focus > li[lead]:not([selected]),
   background-color: rgb(232, 234, 237);
 }
 
+body.files-ng #list-container li {
+  border: 1px solid transparent;
+}
+
+body.files-ng.check-select #list-container list:focus > li[lead] {
+  background-color: var(--google-blue-50);
+  border: 1px solid var(--google-blue-600);
+}
+
 #list-container.nohover grid > .accepts {
   background-color: transparent;
 }
@@ -2121,6 +2148,10 @@ body[drive='error'] #unmounted-panel > .error,
   width: 120px;
 }
 
+body.files-ng #empty-folder {
+  display: none;
+}
+
 #empty-folder > .label {
   color: rgb(180, 180, 180);
   font-size: 16px;
@@ -2156,7 +2187,6 @@ body.files-ng .table-header {
   border-bottom: none;
   color: var(--google-grey-700);
   font-family: 'Roboto Medium';
-  font-size: 13px;
   height: 56px;
   line-height: 20px;
   padding-bottom: 16px;
@@ -2176,7 +2206,7 @@ body.files-ng #list-container .table-header-cell:first-child
 
 body.files-ng .table-header-splitter {
   background-image: url(../images/common/dragger.svg);
-  background-repeat: no-repeat ;
+  background-repeat: no-repeat;
   height: inherit;
   width: 16px;
 }
@@ -2203,6 +2233,63 @@ body.files-ng .table-header-sort-image-asc::after {
   width: 16px;
 }
 
+body.files-ng #list-container li.table-row {
+  box-sizing: border-box;
+  height: 40px;
+  line-height: 20px;
+}
+
+body.files-ng.check-select #list-container list li[selected] .detail-thumbnail
+> .thumbnail {
+  animation: none;
+}
+
+body.files-ng .table-row-cell > * {
+  color: var(--google-grey-700);
+  padding: 0;
+  padding-inline-start: 24px;
+}
+
+body.files-ng #list-container .table-row-cell .size {
+  padding-inline-end: 5px;
+  padding-inline-start: 22px;
+}
+
+body.files-ng.check-select list:focus li[selected] .table-row-cell > * {
+  color: var(--google-blue-600);
+}
+
+body.files-ng .table-row-cell:first-child > * {
+  padding-inline-start: 0;
+}
+
+body.files-ng .table-row-cell .filename-label {
+  color: var(--google-grey-900);
+}
+
+body.files-ng.check-select list:focus li[selected] .table-row-cell
+.filename-label {
+  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 {
+  background-image: url(../images/files/ui/list_check.svg);
+  height: 40px;
+  width: 32px;
+}
+
+body.files-ng #list-container li .detail-thumbnail {
+  height: 32px;
+  width: 32px;
+}
+
 #new-folder-button {
   flex: none;
 }