Files app: FilesNG styles for file list header

Initial layout, sizes, colors, font and icons for file list header. It
still needs a few touches in the colors and hover/ripple effects.

Remove fill color from arrow up/down SVG icons so it's controlled by
CSS. These 2 files weren't used before this CL.

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

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

@@ -1229,6 +1229,10 @@ body.check-select #read-only-indicator {
   top: 40px;
 }
 
+body.files-ng .list-view .loading-indicator {
+  top: 56px;
+}
+
 .thumbnail-view .loading-indicator {
   top: 0;
 }
@@ -2148,6 +2152,57 @@ body[drive='error'] #unmounted-panel > .error,
   padding-inline-start: 8px;
 }
 
+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;
+  padding-top: 20px;
+}
+
+body.files-ng .table-header-label {
+  line-height: 20px;
+  margin-inline-end: 5px;
+  margin-inline-start: 24px;
+}
+
+body.files-ng #list-container .table-header-cell:first-child
+.table-header-label {
+  margin-inline-start: 12px;
+}
+
+body.files-ng .table-header-splitter {
+  background-image: url(../images/common/dragger.svg);
+  background-repeat: no-repeat ;
+  height: inherit;
+  width: 16px;
+}
+
+body.files-ng .table-header-sort-image-desc::after {
+  -webkit-mask-image: url(../images/common/arrow_up_small.svg);
+  -webkit-mask-repeat: no-repeat;
+  background-color: var(--google-grey-700);
+  background-image: none;
+  display: inline-block;
+  margin-inline-start: 8px;
+  padding: 0;
+  width: 16px;
+}
+
+body.files-ng .table-header-sort-image-asc::after {
+  -webkit-mask-image: url(../images/common/arrow_down_small.svg);
+  -webkit-mask-repeat: no-repeat;
+  background-color: var(--google-grey-700);
+  background-image: none;
+  display: inline-block;
+  margin-inline-start: 8px;
+  padding: 0;
+  width: 16px;
+}
+
 #new-folder-button {
   flex: none;
 }

ui/file_manager/file_manager/foreground/images/common/arrow_down_small.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#5F6368" d="M7.2 10.85L3.39 6.84 2.4 7.86 8 13.6l5.6-5.74-.99-1.02-3.81 4.01V2.4H7.2z"/>
+  <path d="M7.2 10.85L3.39 6.84 2.4 7.86 8 13.6l5.6-5.74-.99-1.02-3.81 4.01V2.4H7.2z"/>
 </svg>

ui/file_manager/file_manager/foreground/images/common/arrow_up_small.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#5F6368" d="M8.8 5.15l3.81 4.01.99-1.02L8 2.4 2.4 8.14l.99 1.02L7.2 5.15v8.45h1.6z"/>
+  <path  d="M8.8 5.15l3.81 4.01.99-1.02L8 2.4 2.4 8.14l.99 1.02L7.2 5.15v8.45h1.6z"/>
 </svg>