Files.app: Let the thumbnail images in the preview panels managed by PreviewPanel class.

chrome/browser/resources/file_manager/css/file_manager.css

Index: chrome/browser/resources/file_manager/css/file_manager.css
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index 1a235acb05afd6ff59adac17c7c25a2d5053249e..06d84263bce5c476c4ad7c6e1229f03c24ba7549 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -1100,24 +1100,42 @@ input.rename {
   padding-left: 25px;
 }
 
-.preview-thumbnails > .thumbnail {
+.preview-thumbnails > .img-container {
   background-color: white;
-  border: 1px solid #fff;
+  background-size: 35px 35px;  /* For file icons. */
+  border: 2px solid white;
   box-shadow: 0 1px 1px rgba(80, 80, 80, 0.5);
+  box-sizing: border-box;
+  cursor: pointer;
   height: 35px;
   margin: 0 0 0 -25px;  /* Overlapped images. */
+  overflow: hidden;
   position: relative;
   width: 35px;
 }
 
-.preview-thumbnails > .thumbnail > .img-container {
-  background-size: 35px 35px;
-  border: 1px solid white;
-  box-sizing: border-box;
-  height: 35px;
-  overflow: hidden;
-  position: relative;
-  width: 35px;
+.preview-thumbnails > .popup {
+  -webkit-transform: translate(0, 3px) scale(0.95);
+  background-color: #f2f2f2;
+  border: 2px solid #fff;
+  bottom: 8px;
+  box-shadow: 0 0 0 1px #F0F0F0,
+              0 0 0 2px #D0D0D0,
+              2px 2px 6px rgba(0, 0, 0, 0.2);
+  display: -webkit-flex;
+  left: -8px;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 180ms ease-in 300ms,
+              -webkit-transform 180ms ease-in 300ms;
+  z-index: 1000;
+}
+
+.preview-thumbnails.has-zoom:hover > .popup {
+  -webkit-transform: translate(0, 0) scale(1.0);
+  opacity: 1;
+  pointer-events: auto;
 }
 
 @-webkit-keyframes fadeIn {
@@ -1138,39 +1156,15 @@ input.rename {
   }
 }
 
-.preview-thumbnails > .popup {
-  -webkit-transform: translate(0, 3px) scale(0.95);
-  background-color: #f2f2f2;
-  border: 2px solid #fff;
-  box-shadow: 0 0 0 1px #F0F0F0,
-              0 0 0 2px #D0D0D0,
-              2px 2px 6px rgba(0, 0, 0, 0.2);
-  margin: 6px 0 0 -40px;
-  opacity: 0;
-  pointer-events: none;
-  position: absolute;
-  z-index: 1;  /* will be overridden with 1000 by script. */
+.preview-thumbnails img {
+  -webkit-animation: fadeIn 180ms ease-in-out;
 }
 
 .preview-thumbnails > .popup > img {
+  -webkit-flex: 1 1 0;
   -webkit-user-drag: none;
 }
 
-.preview-thumbnails > * {
-  transition: all 180ms ease-in;
-  transition-delay: 300ms;
-}
-
-.preview-thumbnails.has-zoom:hover > .popup {
-  -webkit-transform: translate(0, 0) scale(1.0);
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.preview-thumbnails.has-zoom:hover > .thumbnail {
-  opacity: 0;
-}
-
 /* Table splitter element */
 .table-header-splitter {
   background-image: -webkit-image-set(