Files app: Update grid view icons styles

Change icons for files without thumbnails to show the file's icon as
thumbnail. See crbug.com/992822#c14 for some screenshots.

Change generic icons SVG to have fill color --google-grey-700 to use
them background-image instead of -webkit-mask-image to simplify the CSS
logic to overwrite the generic icon to specific icons. For specific
icons we want to use their SVG color, which isn't possible when using
-webkit-mask-image.

Force the grey color for ".detail-icon" to have icons used as
-webkit-mask-image have the correct color. This in turn requires to
force the blue color for ".detail-checkmark" because this element is
child of ".detail-icon" causing it to inherit the color.

Change the JS logic to add CSS classes to make easier to style:
1. Initialize the ".img-container" with CSS class "no-thumbnail".
2. Remove "no-thumbnail" class once a thumbnail is loaded.
3. For FilesNg don't add the ".shield" div at all.
4. For FilesNg don't add the 2 divs ".checkmark.active" and
".checkmark.inactive". Instead add ".detail-checkmark" in the same place
it adds for folders, which is the same as File List.
5. Change setGenericThumbnail_() (for FilesNg) to set the attribute
"generic-thumbnail" as the mime type icon instead of media type, media
type is limited to: image, video, audio, raw, documents, etc, which is
too coarse to be able to customize icon per mime type/file type. This is
the same logic used for the File List and the smaller icon near the file
name.

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

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

@@ -1713,6 +1713,7 @@ body.files-ng #list-container .thumbnail-grid li {
 }
 
 body.files-ng grid .thumbnail-bottom .detail-icon {
+  color: var(--google-grey-700);
   cursor: pointer;
   height: 40px;
   padding-inline-end: 6px;
@@ -1788,6 +1789,7 @@ body.check-select .thumbnail-grid .thumbnail-item[selected] .checkmark.active {
 }
 
 body.files-ng .thumbnail-grid .img-container {
+  color: var(--google-grey-700);
   height: 120px;
 }
 
@@ -2184,6 +2186,7 @@ body:not(.files-ng) #list-container li .detail-icon {
 }
 
 body.files-ng #list-container list li .detail-icon {
+  color: var(--google-grey-700);
   height: 40px;
   margin-inline-end: 16px;
   margin-inline-start: 12px;
@@ -2193,6 +2196,7 @@ body.files-ng #list-container list li .detail-icon {
 #list-container li .detail-checkmark {
   background-position: center;
   background-repeat: no-repeat;
+  color: var(--google-blue-600);
   height: 28px;
   isolation: isolate;
   opacity: 0;

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

@@ -31,7 +31,8 @@ body.files-ng [file-type-icon] {
 }
 
 body.files-ng [file-type-icon='archive'] {
-  background-image: url(../images/filetype/filetype_archive.svg);
+  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
+  background-color: currentColor;
 }
 
 [file-type-icon='audio'] {
@@ -321,24 +322,114 @@ body.files-ng [file-type-icon='word'] {
   background-repeat: no-repeat;
 }
 
+body.files-ng .no-thumbnail[generic-thumbnail] {
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 48px;
+  background-color: transparent;
+  background-image: url(../images/files/ui/filetype_placeholder_generic.svg);
+  background-position: center;
+  background-size: 48px;
+}
+
 [generic-thumbnail='audio'] {
   background-image: -webkit-image-set(
       url(../images/files/ui/filetype_placeholder_audio.png) 1x,
       url(../images/files/ui/2x/filetype_placeholder_audio.png) 2x);
 }
 
+body.files-ng .no-thumbnail[generic-thumbnail='audio'] {
+  background-image: url(../images/filetype/filetype_audio.svg);
+}
+
 [generic-thumbnail='image'] {
   background-image: -webkit-image-set(
       url(../images/files/ui/filetype_placeholder_image.png) 1x,
       url(../images/files/ui/2x/filetype_placeholder_image.png) 2x);
 }
 
+body.files-ng .no-thumbnail[generic-thumbnail='image'],
+body.files-ng .no-thumbnail[generic-thumbnail='raw'] {
+  background-image: url(../images/filetype/filetype_image.svg);
+}
+
 [generic-thumbnail='video'] {
   background-image: -webkit-image-set(
       url(../images/files/ui/filetype_placeholder_video.png) 1x,
       url(../images/files/ui/2x/filetype_placeholder_video.png) 2x);
 }
 
+body.files-ng .no-thumbnail[generic-thumbnail='video'] {
+  background-image: url(../images/filetype/filetype_video.svg);
+}
+
+/* grid view large icons for known types. */
+body.files-ng .no-thumbnail[generic-thumbnail='archive'] {
+  -webkit-mask-image: url(../images/filetype/filetype_archive.svg);
+  background-color: currentColor;
+  background-image: none;
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='tini'] {
+  background-image: url(../images/filetype/filetype_tini.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='excel'] {
+  background-image: url(../images/filetype/filetype_excel.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gdoc'] {
+  background-image: url(../images/filetype/filetype_gdoc.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gdraw'] {
+  background-image: url(../images/filetype/filetype_gdraw.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gsheet'] {
+  background-image: url(../images/filetype/filetype_gsheet.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gslides'] {
+  background-image: url(../images/filetype/filetype_gslides.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gtable'] {
+  background-image: url(../images/filetype/filetype_gtable.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gform'] {
+  background-image: url(../images/filetype/filetype_gform.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gmap'] {
+  background-image: url(../images/filetype/filetype_gmap.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='gsite'] {
+  background-image: url(../images/filetype/filetype_gsite.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='pdf'] {
+  background-image: url(../images/filetype/filetype_pdf.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='ppt'] {
+  background-image: url(../images/filetype/filetype_ppt.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='script'] {
+  background-image: url(../images/filetype/filetype_script.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='sites'] {
+  background-image: url(../images/filetype/filetype_sites.svg);
+}
+
+body.files-ng .no-thumbnail[generic-thumbnail='word'] {
+  background-image: url(../images/filetype/filetype_word.svg);
+}
+
 /* Icons for volume types. A ".tree-row > .file-row" component in any rules
    means the rule only matches in files-ng. */
 

ui/file_manager/file_manager/foreground/images/files/ui/filetype_placeholder_generic.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <path d="M11 2l5 5v10.0044c0 .5499-.4558.9956-1.0025.9956h-9.995C4.4488 18 4 17.5554 4 16.9991V3.001C4 2.448 4.4379 2 5.003 2H11zm-1 2H6v12h8V8h-4V4z"/>
+  <path fill="#5f6368" d="M11 2l5 5v10.0044c0 .5499-.4558.9956-1.0025.9956h-9.995C4.4488 18 4 17.5554 4 16.9991V3.001C4 2.448 4.4379 2 5.003 2H11zm-1 2H6v12h8V8h-4V4z"/>
 </svg>

ui/file_manager/file_manager/foreground/images/filetype/filetype_generic.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
-  <path d="M11 2l5 5v10a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1h6zm-1 2H6v12h8V8h-4V4z"/>
+  <path fill="#5f6368" d="M11 2l5 5v10a1 1 0 01-1 1H5a1 1 0 01-1-1V3a1 1 0 011-1h6zm-1 2H6v12h8V8h-4V4z"/>
 </svg>

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -222,8 +222,8 @@ class FileGrid extends cr.ui.Grid {
                 .contentMimeType;
         if (!event.dataUrl) {
           FileGrid.clearThumbnailImage_(assertInstanceof(box, HTMLDivElement));
-          FileGrid.setGenericThumbnail_(
-              assertInstanceof(box, HTMLDivElement), entry);
+          this.setGenericThumbnail_(
+              assertInstanceof(box, HTMLDivElement), entry, mimeType);
         } else {
           FileGrid.setThumbnailImage_(
               assertInstanceof(box, HTMLDivElement), entry,
@@ -612,24 +612,28 @@ class FileGrid extends cr.ui.Grid {
     li.appendChild(frame);
 
     const box = li.ownerDocument.createElement('div');
-    box.className = 'img-container';
+    box.classList.add('img-container', 'no-thumbnail');
     frame.appendChild(box);
     if (entry) {
       this.decorateThumbnailBox_(assertInstanceof(li, HTMLLIElement), entry);
     }
 
-    const shield = li.ownerDocument.createElement('div');
-    shield.className = 'shield';
-    frame.appendChild(shield);
+    if (!util.isFilesNg()) {
+      const shield = li.ownerDocument.createElement('div');
+      shield.className = 'shield';
+      frame.appendChild(shield);
+    }
 
     const isDirectory = entry && entry.isDirectory;
     if (!isDirectory) {
-      const activeCheckmark = li.ownerDocument.createElement('div');
-      activeCheckmark.className = 'checkmark active';
-      frame.appendChild(activeCheckmark);
-      const inactiveCheckmark = li.ownerDocument.createElement('div');
-      inactiveCheckmark.className = 'checkmark inactive';
-      frame.appendChild(inactiveCheckmark);
+      if (!util.isFilesNg()) {
+        const activeCheckmark = li.ownerDocument.createElement('div');
+        activeCheckmark.className = 'checkmark active';
+        frame.appendChild(activeCheckmark);
+        const inactiveCheckmark = li.ownerDocument.createElement('div');
+        inactiveCheckmark.className = 'checkmark inactive';
+        frame.appendChild(inactiveCheckmark);
+      }
     }
 
     const badge = li.ownerDocument.createElement('div');
@@ -644,7 +648,9 @@ class FileGrid extends cr.ui.Grid {
     const locationInfo = this.volumeManager_.getLocationInfo(entry);
     const detailIcon = filelist.renderFileTypeIcon(
         li.ownerDocument, entry, locationInfo, mimeType);
-    if (isDirectory) {
+
+    // For FilesNg we add the checkmark in the same location.
+    if (isDirectory || util.isFilesNg()) {
       const checkmark = li.ownerDocument.createElement('div');
       checkmark.className = 'detail-checkmark';
       detailIcon.appendChild(checkmark);
@@ -676,7 +682,7 @@ class FileGrid extends cr.ui.Grid {
     }
 
     if (entry.isDirectory) {
-      FileGrid.setGenericThumbnail_(box, entry);
+      this.setGenericThumbnail_(box, entry);
       return;
     }
 
@@ -685,21 +691,19 @@ class FileGrid extends cr.ui.Grid {
     const thumbnailData = this.listThumbnailLoader_ ?
         this.listThumbnailLoader_.getThumbnailFromCache(entry) :
         null;
+    const mimeType =
+        this.metadataModel_.getCache([entry], ['contentMimeType'])[0]
+            .contentMimeType;
     if (thumbnailData && thumbnailData.dataUrl) {
-      const mimeType =
-          this.metadataModel_.getCache([entry], ['contentMimeType'])[0]
-              .contentMimeType;
       FileGrid.setThumbnailImage_(
           box, entry, thumbnailData.dataUrl, (thumbnailData.width || 0),
           (thumbnailData.height || 0), mimeType);
       li.classList.toggle('thumbnail-loaded', true);
     } else {
-      FileGrid.setGenericThumbnail_(box, entry);
+      this.setGenericThumbnail_(box, entry, mimeType);
       li.classList.toggle('thumbnail-loaded', false);
     }
-    const mimeType =
-        this.metadataModel_.getCache([entry], ['contentMimeType'])[0]
-            .contentMimeType;
+
     li.classList.toggle(
         'can-hide-filename',
         FileType.isImage(entry, mimeType) || FileType.isRaw(entry, mimeType));
@@ -766,6 +770,7 @@ class FileGrid extends cr.ui.Grid {
   static setThumbnailImage_(box, entry, dataUrl, width, height, opt_mimeType) {
     const thumbnail = box.ownerDocument.createElement('div');
     thumbnail.classList.add('thumbnail');
+    box.classList.toggle('no-thumbnail', false);
 
     // If the image is JPEG or the thumbnail is larger than the grid size,
     // resize it to cover the thumbnail box.
@@ -796,6 +801,7 @@ class FileGrid extends cr.ui.Grid {
     for (let i = 0; i < oldThumbnails.length; i++) {
       box.removeChild(oldThumbnails[i]);
     }
+    box.classList.toggle('no-thumbnail', true);
     return;
   }
 
@@ -803,14 +809,23 @@ class FileGrid extends cr.ui.Grid {
    * Sets a generic thumbnail on the box.
    * @param {!HTMLDivElement} box A div element to hold thumbnails.
    * @param {!Entry} entry An entry of the thumbnail.
+   * @param {string=} opt_mimeType Optional mime type for the file.
    * @private
    */
-  static setGenericThumbnail_(box, entry) {
+  setGenericThumbnail_(box, entry, opt_mimeType) {
     if (entry.isDirectory) {
       box.setAttribute('generic-thumbnail', 'folder');
     } else {
-      const mediaType = FileType.getMediaType(entry);
-      box.setAttribute('generic-thumbnail', mediaType);
+      if (!util.isFilesNg()) {
+        const mediaType = FileType.getMediaType(entry);
+        box.setAttribute('generic-thumbnail', mediaType);
+      } else {
+        box.classList.toggle('no-thumbnail', true);
+        const locationInfo = this.volumeManager_.getLocationInfo(entry);
+        const icon =
+            FileType.getIcon(entry, opt_mimeType, locationInfo.rootType);
+        box.setAttribute('generic-thumbnail', icon);
+      }
     }
   }