Revert 221579 "Files.app: Let the PreviewPanel class control the..."

> Files.app: Let the PreviewPanel class control the visibility of the preview panel.
> 
> Originally, PreviewPanel is not used from any code.
> This CL lets the FileManager class and the FileSelectorHandler class use the PreviewPanel class to control the visibility of preview panel.
> 
> BUG=284215
> TEST=manually
> R=yoshiki@chromium.org
> 
> Review URL: https://codereview.chromium.org/23464030

TBR=hirono@chromium.org

Review URL: https://codereview.chromium.org/23903018

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@221613 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/file_manager/js/file_manager.js

@@ -81,15 +81,6 @@ DialogType.isModal = function(type) {
       type == DialogType.SELECT_OPEN_MULTI_FILE;
 };
 
-/**
- * @param {string} type Dialog type.
- * @return {boolean} Whther the type is open dialog.
- */
-DialogType.isOpenDialog = function(type) {
-  return type == DialogType.SELECT_OPEN_FILE ||
-         type == DialogType.SELECT_OPEN_MULTI_FILE;
-};
-
 /**
  * Bottom magrin of the list and tree for transparent preview panel.
  * @const
@@ -842,17 +833,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
          'pathclick', this.onBreadcrumbClick_.bind(this));
     this.searchBreadcrumbs_.setHideLast(false);
 
-    this.previewPanel_ = new PreviewPanel(
-        dom.querySelector('.preview-panel'),
-        DialogType.isOpenDialog(this.dialogType) ?
-            PreviewPanel.VisibilityType.ALWAYS_VISIBLE :
-            PreviewPanel.VisibilityType.AUTO,
-        this.getCurrentDirectory());
-    this.previewPanel_.addEventListener(
-        PreviewPanel.Event.VISIBILITY_CHANGE,
-        this.onPreviewPanelVisibilityChange_.bind(this));
-    this.previewPanel_.initialize();
-
     // Check the option to hide the selecting checkboxes.
     this.table_.showCheckboxes = this.showCheckboxes_;
 
@@ -1077,6 +1057,10 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     this.folderShortcutsModel_ = new FolderShortcutsDataModel();
 
     this.selectionHandler_ = new FileSelectionHandler(this);
+    this.selectionHandler_.addEventListener('show-preview-panel',
+        this.onPreviewPanelVisibilityChanged_.bind(this, true));
+    this.selectionHandler_.addEventListener('hide-preview-panel',
+        this.onPreviewPanelVisibilityChanged_.bind(this, false));
 
     var dataModel = this.directoryModel_.getFileList();
 
@@ -1515,9 +1499,8 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
    * Resize details and thumb views to fit the new window size.
    * @private
    */
-  FileManager.prototype.onPreviewPanelVisibilityChange_ = function() {
-    var panelHeight = this.previewPanel_.visible ?
-        this.previewPanel_.height : 0;
+  FileManager.prototype.onPreviewPanelVisibilityChanged_ = function(visible) {
+    var panelHeight = visible ? this.getPreviewPanelHeight_() : 0;
     this.grid_.setBottomMarginForPanel(panelHeight);
     this.table_.setBottomMarginForPanel(panelHeight);
     this.directoryTree_.setBottomMarginForPanel(panelHeight);
@@ -1528,11 +1511,7 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
    * @private
    */
   FileManager.prototype.onDragStart_ = function() {
-    // On open file dialog, the preview panel is always shown.
-    if (DialogType.isOpenDialog(this.dialogType))
-      return;
-    this.previewPanel_.visibilityType =
-        PreviewPanel.VisibilityType.ALWAYS_HIDDEN;
+    this.selectionHandler_.setPreviewPanelMustBeHidden(true);
   };
 
   /**
@@ -1540,10 +1519,21 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
    * @private
    */
   FileManager.prototype.onDragEnd_ = function() {
-    // On open file dialog, the preview panel is always shown.
-    if (DialogType.isOpenDialog(this.dialogType))
-      return;
-    this.previewPanel_.visibilityType = PreviewPanel.VisibilityType.AUTO;
+    this.selectionHandler_.setPreviewPanelMustBeHidden(false);
+  };
+
+  /**
+   * Gets height of the preview panel, using cached value if available. This
+   * returns the value even when the preview panel is hidden.
+   *
+   * @return {number} Height of the preview panel. If failure, returns 0.
+   */
+  FileManager.prototype.getPreviewPanelHeight_ = function() {
+    if (!this.cachedPreviewPanelHeight_) {
+      var previewPanel = this.dialogDom_.querySelector('.preview-panel');
+      this.cachedPreviewPanelHeight_ = previewPanel.clientHeight;
+    }
+    return this.cachedPreviewPanelHeight_;
   };
 
   /**
@@ -2472,7 +2462,6 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
     this.updateUnformattedDriveStatus_();
     this.updateTitle_();
     this.updateGearMenu_();
-    this.previewPanel_.currentPath_ = this.getCurrentDirectory();
   };
 
   /**

chrome/browser/resources/file_manager/js/file_selection.js

@@ -26,7 +26,6 @@ function FileSelection(fileManager, indexes) {
   this.iconType = null;
   this.bytesKnown = false;
   this.mustBeHidden_ = false;
-  this.mimeTypes = null;
 
   // Synchronously compute what we can.
   for (var i = 0; i < this.indexes.length; i++) {
@@ -54,8 +53,6 @@ function FileSelection(fileManager, indexes) {
   }
 
   this.tasks = new FileTasks(this.fileManager_);
-
-  Object.seal(this);
 }
 
 /**
@@ -159,13 +156,11 @@ function FileSelectionHandler(fileManager) {
   // TODO(dgozman): create a shared object with most of UI elements.
   this.okButton_ = fileManager.okButton_;
   this.filenameInput_ = fileManager.filenameInput_;
-  this.previewPanel_ = fileManager.previewPanel_;
-  this.previewPanelElement_ =
-      fileManager.dialogDom_.querySelector('.preview-panel');
-  this.previewThumbnails_ = this.previewPanelElement_.
+
+  this.previewPanel_ = fileManager.dialogDom_.querySelector('.preview-panel');
+  this.previewThumbnails_ = this.previewPanel_.
       querySelector('.preview-thumbnails');
-  this.previewSummary_ =
-      this.previewPanelElement_.querySelector('.preview-summary');
+  this.previewSummary_ = this.previewPanel_.querySelector('.preview-summary');
   this.previewText_ = this.previewSummary_.querySelector('.preview-text');
   this.calculatingSize_ = this.previewSummary_.
       querySelector('.calculating-size');
@@ -314,6 +309,82 @@ FileSelectionHandler.prototype.isFileSelectionAvailable = function() {
       this.selection.allDriveFilesPresent;
 };
 
+/**
+ * Sets the flag to force the preview panel hidden.
+ * @param {boolean} hidden True to force hidden.
+ */
+FileSelectionHandler.prototype.setPreviewPanelMustBeHidden = function(hidden) {
+  this.previewPanelMustBeHidden_ = hidden;
+  this.updatePreviewPanelVisibility_();
+};
+
+/**
+ * Animates preview panel show/hide transitions.
+ *
+ * @private
+ */
+FileSelectionHandler.prototype.updatePreviewPanelVisibility_ = function() {
+  var panel = this.previewPanel_;
+  var state = panel.getAttribute('visibility');
+  var mustBeVisible =
+       // If one or more files are selected, show the file info.
+      (this.selection.totalCount > 0 ||
+       // If the directory is not root dir, show the directory info.
+       !PathUtil.isRootPath(this.fileManager_.getCurrentDirectory()) ||
+       // On Open File dialog, the preview panel is always shown.
+       this.fileManager_.dialogType == DialogType.SELECT_OPEN_FILE ||
+       this.fileManager_.dialogType == DialogType.SELECT_OPEN_MULTI_FILE);
+
+  var stopHidingAndShow = function() {
+    clearTimeout(this.hidingTimeout_);
+    this.hidingTimeout_ = 0;
+    setVisibility('visible');
+  }.bind(this);
+
+  var startHiding = function() {
+    setVisibility('hiding');
+    this.hidingTimeout_ = setTimeout(function() {
+        this.hidingTimeout_ = 0;
+        setVisibility('hidden');
+        cr.dispatchSimpleEvent(this, 'hide-preview-panel');
+      }.bind(this), 250);
+  }.bind(this);
+
+  var show = function() {
+    setVisibility('visible');
+    this.previewThumbnails_.textContent = '';
+    cr.dispatchSimpleEvent(this, 'show-preview-panel');
+  }.bind(this);
+
+  var setVisibility = function(visibility) {
+    panel.setAttribute('visibility', visibility);
+  };
+
+  switch (state) {
+    case 'visible':
+      if (!mustBeVisible || this.previewPanelMustBeHidden_)
+        startHiding();
+      break;
+
+    case 'hiding':
+      if (mustBeVisible && !this.previewPanelMustBeHidden_)
+        stopHidingAndShow();
+      break;
+
+    case 'hidden':
+      if (mustBeVisible && !this.previewPanelMustBeHidden_)
+        show();
+  }
+};
+
+/**
+ * @return {boolean} True if space reserverd for the preview panel.
+ * @private
+ */
+FileSelectionHandler.prototype.isPreviewPanelVisibile_ = function() {
+  return this.previewPanel_.getAttribute('visibility') == 'visible';
+};
+
 /**
  * Update the selection summary in preview panel.
  *
@@ -422,7 +493,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
   }
 
   // Update preview panels.
-  var wasVisible = this.previewPanel_.visible;
+  var wasVisible = this.isPreviewPanelVisibile_();
   var thumbnailEntries;
   if (selection.totalCount == 0) {
     thumbnailEntries = [
@@ -438,7 +509,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
       }.bind(this));
     }
   }
-  this.previewPanel_.entries = selection.entries;
+  this.updatePreviewPanelVisibility_();
   this.updatePreviewPanelText_();
   this.showPreviewThumbnails_(thumbnailEntries);
 
@@ -449,7 +520,7 @@ FileSelectionHandler.prototype.updateFileSelectionAsync = function(selection) {
     // Shows the breadcrumb list when a file is selected.
     updateTarget = selection.entries[0].fullPath;
   } else if (selection.totalCount == 0 &&
-             this.previewPanel_.visible) {
+             this.isPreviewPanelVisibile_()) {
     // Shows the breadcrumb list when no file is selected and the preview
     // panel is visible.
     updateTarget = path;

chrome/browser/resources/file_manager/js/main_scripts.js

@@ -101,7 +101,6 @@
 //<include src="suggest_apps_dialog.js"/>
 //<include src="text_measure.js"/>
 //<include src="tree.css.js"/>
-//<include src="ui/preview_panel.js"/>
 //<include src="url_constants.js"/>
 //<include src="volume_manager.js"/>
 //<include src="media/media_util.js"/>

chrome/browser/resources/file_manager/js/ui/preview_panel.js

@@ -92,11 +92,11 @@ PreviewPanel.Event = Object.freeze({
  */
 PreviewPanel.VisibilityType = Object.freeze({
   // Preview panel always shows.
-  ALWAYS_VISIBLE: 'alwaysVisible',
+  ALWAYS: 'always',
   // Preview panel shows when the entries property are set.
   AUTO: 'auto',
   // Preview panel does not show.
-  ALWAYS_HIDDEN: 'alwaysHidden'
+  HIDDEN: 'hidden'
 });
 
 /**
@@ -168,14 +168,14 @@ PreviewPanel.prototype.updateVisibility_ = function() {
   var visibility = this.element_.getAttribute('visibility');
   var newVisible = null;
   switch (this.visibilityType_) {
-    case PreviewPanel.VisibilityType.ALWAYS_VISIBLE:
+    case PreviewPanel.VisibilityType.ALWAYS:
       newVisible = true;
       break;
     case PreviewPanel.VisibilityType.AUTO:
       newVisible = this.entries_.length != 0 ||
                    !PathUtil.isRootPath(this.currentPath_);
       break;
-    case PreviewPanel.VisibilityType.ALWAYS_HIDDEN:
+    case PreviewPanel.VisibilityType.HIDDEN:
       newVisible = false;
       break;
     default:

chrome/browser/resources/file_manager/main.html

@@ -114,7 +114,6 @@
       <script src="js/suggest_apps_dialog.js"></script>
       <script src="js/text_measure.js"></script>
       <script src="js/tree.css.js"></script>
-      <script src="js/ui/preview_panel.js"></script>
       <script src="js/url_constants.js"></script>
       <script src="js/volume_manager.js"></script>
       <script src="js/media/media_util.js"></script>