2 files changed, 44 insertions, 2 deletions
diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index c58d943..7e02be4 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -278,20 +278,29 @@ div.img-container > img {
   height: 61px;
   background-color: #F0F0F0;
   padding: 0px 14px 0px 14px;
+
+  opacity: 1;
+  -webkit-transform: translate(0, 0);
+}
+
+.preview-panel[hidden] {
+  -webkit-transition: all 220ms ease;
+  -webkit-transform: translate(0, 5px);
+   opacity: 0;
 }
 
 .preview-thumbnails {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   padding-left: 39px;
+  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .preview-thumbnails > div.img-container {
   width: 45px;
   height: 45px;
   position: relative;
-  margin-left: -39px;  /* Show 7 pixels of the overlapped image */
-  margin-right: 0;
+  margin: 0 0 0 -39px;  /* Show 7 pixels of the overlapped image */
   overflow: hidden;
   border: 1px solid white;
   background-color: #F2F2F2;
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 3d540ff..01a3c12 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -554,6 +554,7 @@ FileManager.prototype = {
     // Cache nodes we'll be manipulating.
     this.previewThumbnails_ =
         this.dialogDom_.querySelector('.preview-thumbnails');
+    this.previewPanel_ = this.dialogDom_.querySelector('.preview-panel');
     this.previewFilename_ = this.dialogDom_.querySelector('.preview-filename');
     this.previewSummary_ = this.dialogDom_.querySelector('.preview-summary');
     this.previewMetadata_ = this.dialogDom_.querySelector('.preview-metadata');
@@ -1689,6 +1690,7 @@ FileManager.prototype = {
 
     if (!selection.indexes.length) {
       this.updateCommonActionButtons_();
+      this.updatePreviewPanelVisibility_();
       cr.dispatchSimpleEvent(this, 'selection-summarized');
       return;
     }
@@ -1743,6 +1745,7 @@ FileManager.prototype = {
 
     // Now this.selection is complete. Update buttons.
     this.updateCommonActionButtons_();
+    this.updatePreviewPanelVisibility_();
 
     var self = this;
 
@@ -1779,6 +1782,36 @@ FileManager.prototype = {
     cacheNextFile();
   };
 
+  FileManager.prototype.updatePreviewPanelVisibility_ = function() {
+    var wasHidden = this.previewPanel_.hasAttribute('hidden');
+    var hide = (this.selection.totalCount == 0);
+
+    if (hide == wasHidden)
+      return;
+
+    if (this.hidingTimeout_) {
+      // Hiding is not complete. display == block.
+      clearTimeout(this.hidingTimeout_);
+      this.hidingTimeout_ = 0;
+    } else if (wasHidden) {
+      // Hiding complete. display == none.
+      this.previewPanel_.style.display = '';
+      this.onResize_();
+    }
+
+    var self = this;
+    if (hide) {
+      this.previewPanel_.setAttribute('hidden', '');
+      this.hidingTimeout_ = setTimeout(function() {
+          self.hidingTimeout_ = 0;
+          self.previewPanel_.style.display = 'none';
+          self.onResize_();
+        }, 250);
+    } else {
+      this.previewPanel_.removeAttribute('hidden');
+    }
+  };
+
 
   FileManager.prototype.createMetadataProvider_ = function() {
     // Subclass MetadataProvider to notify tests when the initialization