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

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

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 /* The order of z-index:
  * - 2: drag-selection-bodrder
  * - 3: preview-panel
  * - 500: scrollbar
  * - 500: splitter
  * - 550: autocomplete-suggestions
@@ skipping 1082 matching lines @@
 .preview-panel .progress-bar {
   -webkit-box-flex: 1;
 }
 
 .preview-thumbnails {
   -webkit-box-orient: horizontal;
   display: -webkit-box;
   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. */
-  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 {
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
 }
 
 @-webkit-keyframes fadeOut {
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
 }
 
-.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(
     url('../images/files/ui/vertical_separator.png') 1x,
     url('../images/files/ui/2x/vertical_separator.png') 2x);
   background-position: center;
   background-repeat: repeat-y;
   height: 20px;
   top: 10px;
   width: 5px;
@@ skipping 774 matching lines @@
 }
 
 .share-dialog-webview-wrapper:not(.loaded) .share-dialog-webview {
   visibility: hidden;
 }
 
 .share-dialog-frame .cr-dialog-text,
 .share-dialog-frame .cr-dialog-buttons {
   display: none;
 }