Files app: Files list type icons for FilesNG

Resize the icons in the file list from 16x16 to 20x20 and overwrite all
icons for new style.

Check mark and folder icons use mask-image to follow the font color:
Folder has to be the same grey, instead of its black color and check
mark has to switch from blue to grey when it doesn't have the focus.

When the file list is in the multi-select mode (body.check-select)
background and image mask are reset so they aren't visible behind the
check mark icon.

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

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

@@ -2280,7 +2280,11 @@ body.files-ng #list-container li .detail-icon {
 }
 
 body.files-ng #list-container li .detail-checkmark {
-  background-image: url(../images/files/ui/list_check.svg);
+  -webkit-mask-image: url(../images/files/ui/list_check.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  background-color: currentColor;
+  background-image: none;
   height: 40px;
   width: 32px;
 }

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

@@ -17,54 +17,100 @@
   background-size: 16px 16px;
 }
 
+body.files-ng [file-type-icon] {
+  background-image: url(../images/filetype/filetype_generic.svg);
+  background-size: 20px 20px;
+}
+
 [file-type-icon='archive'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_archive.png) 1x,
       url(../images/filetype/2x/filetype_archive.png) 2x);
 }
 
+body.files-ng [file-type-icon='archive'] {
+  background-image: url(../images/filetype/filetype_archive.svg);
+}
+
 [file-type-icon='audio'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_audio.png) 1x,
       url(../images/filetype/2x/filetype_audio.png) 2x);
 }
 
+body.files-ng [file-type-icon='audio'] {
+  background-image: url(../images/filetype/filetype_audio.svg);
+}
+
 [file-type-icon='excel'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_excel.png) 1x,
       url(../images/filetype/2x/filetype_excel.png) 2x);
 }
 
+body.files-ng [file-type-icon='excel'] {
+  background-image: url(../images/filetype/filetype_excel.svg);
+}
+
 [file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_folder.png) 1x,
       url(../images/filetype/2x/filetype_folder.png) 2x);
 }
 
+body.files-ng [file-type-icon='folder'] {
+  -webkit-mask-image: url(../images/filetype/filetype_folder.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  background-color: currentColor;
+  background-image: none;
+}
+
+body.check-select.files-ng #list-container li[selected] [file-type-icon] {
+  -webkit-mask-image: none;
+  background: none;
+}
+
 .computers-root[file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/volumes/computer.png) 1x,
       url(../images/volumes/2x/computer.png) 2x);
 }
 
+body.files-ng .computers-root[file-type-icon='folder'] {
+  background-image: url(../images/volumes/computer.svg);
+}
+
 .external-media-root[file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/volumes/usb.png) 1x,
       url(../images/volumes/2x/usb.png) 2x);
 }
 
+body.files-ng .external-media-root[file-type-icon='folder'] {
+  background-image: url(../images/volumes/usb.svg);
+}
+
 .shared[file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_folder_shared.png) 1x,
       url(../images/filetype/2x/filetype_folder_shared.png) 2x);
 }
 
+body.files-ng .shared[file-type-icon='folder'] {
+  background-image: url(../images/filetype/filetype_folder_shared.svg);
+}
+
 .team-drive-root[file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/volumes/hard_drive.png) 1x,
       url(../images/volumes/2x/hard_drive.png) 2x);
 }
 
+body.files-ng .team-drive-root[file-type-icon='folder'] {
+  background-image: url(../images/volumes/hard_drive.svg);
+}
+
 .tree-row[selected] > [file-type-icon='folder'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_folder_active.png) 1x,
@@ -102,102 +148,170 @@
       url(../images/filetype/2x/filetype_gdoc.png) 2x);
 }
 
+body.files-ng [file-type-icon='gdoc'] {
+  background-image: url(../images/filetype/filetype_gdoc.svg);
+}
+
 [file-type-icon='gdraw'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gdraw.png) 1x,
       url(../images/filetype/2x/filetype_gdraw.png) 2x);
 }
 
+body.files-ng [file-type-icon='gdraw'] {
+  background-image: url(../images/filetype/filetype_gdraw.svg);
+}
+
 [file-type-icon='glink'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_generic.png) 1x,
       url(../images/filetype/2x/filetype_generic.png) 2x);
 }
 
+body.files-ng [file-type-icon='glink'] {
+  background-image: url(../images/filetype/filetype_generic.svg);
+}
+
 [file-type-icon='gsheet'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gsheet.png) 1x,
       url(../images/filetype/2x/filetype_gsheet.png) 2x);
 }
 
+body.files-ng [file-type-icon='gsheet'] {
+  background-image: url(../images/filetype/filetype_gsheet.svg);
+}
+
 [file-type-icon='gslides'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gslides.png) 1x,
       url(../images/filetype/2x/filetype_gslides.png) 2x);
 }
 
+body.files-ng [file-type-icon='gslides'] {
+  background-image: url(../images/filetype/filetype_gslides.svg);
+}
+
 [file-type-icon='gtable'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gtable.png) 1x,
       url(../images/filetype/2x/filetype_gtable.png) 2x);
 }
 
+body.files-ng [file-type-icon='gtable'] {
+  background-image: url(../images/filetype/filetype_gtable.svg);
+}
+
 [file-type-icon='gform'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gform.png) 1x,
       url(../images/filetype/2x/filetype_gform.png) 2x);
 }
 
+body.files-ng [file-type-icon='gform'] {
+  background-image: url(../images/filetype/filetype_gform.svg);
+}
+
 [file-type-icon='gmap'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gmap.png) 1x,
       url(../images/filetype/2x/filetype_gmap.png) 2x);
 }
 
+body.files-ng [file-type-icon='gmap'] {
+  background-image: url(../images/filetype/filetype_gmap.svg);
+}
+
 [file-type-icon='gsite'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_gsite.png) 1x,
       url(../images/filetype/2x/filetype_gsite.png) 2x);
 }
 
+body.files-ng [file-type-icon='gsite'] {
+  background-image: url(../images/filetype/filetype_gsite.svg);
+}
+
 [file-type-icon='image'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_image.png) 1x,
       url(../images/filetype/2x/filetype_image.png) 2x);
 }
 
+body.files-ng [file-type-icon='image'] {
+  background-image: url(../images/filetype/filetype_image.svg);
+}
+
 [file-type-icon='pdf'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_pdf.png) 1x,
       url(../images/filetype/2x/filetype_pdf.png) 2x);
 }
 
+body.files-ng [file-type-icon='pdf'] {
+  background-image: url(../images/filetype/filetype_pdf.svg);
+}
+
 [file-type-icon='ppt'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_ppt.png) 1x,
       url(../images/filetype/2x/filetype_ppt.png) 2x);
 }
 
+body.files-ng [file-type-icon='ppt'] {
+  background-image: url(../images/filetype/filetype_ppt.svg);
+}
+
 [file-type-icon='script'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_script.png) 1x,
       url(../images/filetype/2x/filetype_script.png) 2x);
 }
 
+body.files-ng [file-type-icon='script'] {
+  background-image: url(../images/filetype/filetype_script.svg);
+}
+
 [file-type-icon='sites'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_sites.png) 1x,
       url(../images/filetype/2x/filetype_sites.png) 2x);
 }
 
+body.files-ng [file-type-icon='sites'] {
+  background-image: url(../images/filetype/filetype_sites.svg);
+}
+
 [file-type-icon='tini'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_tini.png) 1x,
       url(../images/filetype/2x/filetype_tini.png) 2x);
 }
 
+body.files-ng [file-type-icon='tini'] {
+  background-image: url(../images/filetype/filetype_tini.svg);
+}
+
 [file-type-icon='video'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_video.png) 1x,
       url(../images/filetype/2x/filetype_video.png) 2x);
 }
 
+body.files-ng [file-type-icon='video'] {
+  background-image: url(../images/filetype/filetype_video.svg);
+}
+
 [file-type-icon='word'] {
   background-image: -webkit-image-set(
       url(../images/filetype/filetype_word.png) 1x,
       url(../images/filetype/2x/filetype_word.png) 2x);
 }
 
+body.files-ng [file-type-icon='word'] {
+  background-image: url(../images/filetype/filetype_word.svg);
+}
+
 /* Large generic thumbnails, used when a file does not have a thumbnail. */
 [generic-thumbnail] {
   background-image: -webkit-image-set(