Reland r221579: Files.app: Let the PreviewPanel class control the visibility of the preview panel.

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

 // 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.
 
 'use strict';
 
 /**
  * The current selection object.
  *
  * @param {FileManager} fileManager FileManager instance.
  * @param {Array.<number>} indexes Selected indexes.
  * @constructor
  */
 function FileSelection(fileManager, indexes) {
   this.fileManager_ = fileManager;
   this.computeBytesSequence_ = 0;
   this.indexes = indexes;
   this.entries = [];
   this.urls = [];
   this.totalCount = 0;
   this.fileCount = 0;
   this.directoryCount = 0;
   this.bytes = 0;
   this.showBytes = false;
   this.allDriveFilesPresent = false,
   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++) {
     var entry = fileManager.getFileList().item(this.indexes[i]);
     if (!entry)
       continue;
 
     this.entries.push(entry);
     this.urls.push(entry.toURL());
 
     if (this.iconType == null) {
       this.iconType = FileType.getIcon(entry);
     } else if (this.iconType != 'unknown') {
       var iconType = FileType.getIcon(entry);
       if (this.iconType != iconType)
         this.iconType = 'unknown';
     }
 
     if (entry.isFile) {
       this.fileCount += 1;
     } else {
       this.directoryCount += 1;
     }
     this.totalCount++;
   }
 
   this.tasks = new FileTasks(this.fileManager_);
+
+  Object.seal(this);
 }
 
 /**
  * Computes data required to get file tasks and requests the tasks.
  *
  * @param {function} callback The callback.
  */
 FileSelection.prototype.createTasks = function(callback) {
   if (!this.fileManager_.isOnDrive()) {
     this.tasks.init(this.urls);
@@ skipping 83 matching lines @@
  *
  * @param {FileManager} fileManager File manager instance.
  * @extends {cr.EventTarget}
  * @constructor
  */
 function FileSelectionHandler(fileManager) {
   this.fileManager_ = fileManager;
   // TODO(dgozman): create a shared object with most of UI elements.
   this.okButton_ = fileManager.okButton_;
   this.filenameInput_ = fileManager.filenameInput_;
-
-  this.previewPanel_ = fileManager.dialogDom_.querySelector('.preview-panel');
-  this.previewThumbnails_ = this.previewPanel_.
+  this.previewPanel_ = fileManager.previewPanel_;
+  this.previewPanelElement_ =
+      fileManager.dialogDom_.querySelector('.preview-panel');
+  this.previewThumbnails_ = this.previewPanelElement_.
       querySelector('.preview-thumbnails');
-  this.previewSummary_ = this.previewPanel_.querySelector('.preview-summary');
+  this.previewSummary_ =
+      this.previewPanelElement_.querySelector('.preview-summary');
   this.previewText_ = this.previewSummary_.querySelector('.preview-text');
   this.calculatingSize_ = this.previewSummary_.
       querySelector('.calculating-size');
   this.calculatingSize_.textContent = str('CALCULATING_SIZE');
 
   this.searchBreadcrumbs_ = fileManager.searchBreadcrumbs_;
   this.taskItems_ = fileManager.taskItems_;
 
   this.animationTimeout_ = null;
 }
@@ skipping 129 matching lines @@
   * @return {boolean} True if all files in the current selection are
   *                   available.
   */
 FileSelectionHandler.prototype.isFileSelectionAvailable = function() {
   return !this.fileManager_.isOnDrive() ||
       !this.fileManager_.isDriveOffline() ||
       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.
  *
  * @private
  */
 FileSelectionHandler.prototype.updatePreviewPanelText_ = function() {
   var selection = this.selection;
   if (selection.totalCount <= 1) {
     // Hides the preview text if zero or one file is selected. We shows a
     // breadcrumb list instead on the preview panel.
     this.hideCalculating_();
@@ skipping 87 matching lines @@
       if (this.selection != selection)
         return;
       selection.tasks.display(this.taskItems_);
       selection.tasks.updateMenuItem();
     }.bind(this));
   } else {
     this.taskItems_.hidden = true;
   }
 
   // Update preview panels.
-  var wasVisible = this.isPreviewPanelVisibile_();
+  var wasVisible = this.previewPanel_.visible;
   var thumbnailEntries;
   if (selection.totalCount == 0) {
     thumbnailEntries = [
       this.fileManager_.getCurrentDirectoryEntry()
     ];
   } else {
     thumbnailEntries = selection.entries;
     if (selection.totalCount != 1) {
       selection.computeBytes(function() {
         if (this.selection != selection)
           return;
         this.updatePreviewPanelText_();
       }.bind(this));
     }
   }
-  this.updatePreviewPanelVisibility_();
+  this.previewPanel_.entries = selection.entries;
   this.updatePreviewPanelText_();
   this.showPreviewThumbnails_(thumbnailEntries);
 
   // Update breadcrums.
   var updateTarget = null;
   var path = this.fileManager_.getCurrentDirectory();
   if (selection.totalCount == 1) {
     // Shows the breadcrumb list when a file is selected.
     updateTarget = selection.entries[0].fullPath;
   } else if (selection.totalCount == 0 &&
-             this.isPreviewPanelVisibile_()) {
+             this.previewPanel_.visible) {
     // Shows the breadcrumb list when no file is selected and the preview
     // panel is visible.
     updateTarget = path;
   }
   this.updatePreviewPanelBreadcrumbs_(updateTarget);
 
   // Scroll to item
   if (!wasVisible && this.selection.totalCount == 1) {
     var list = this.fileManager_.getCurrentList();
     list.scrollIndexIntoView(list.selectionModel.selectedIndex);
@@ skipping 218 matching lines @@
   style.left = (boxWidth - imageWidth) / 2 + 'px';
   style.top = (boxHeight - imageHeight) / 2 + 'px';
   style.position = 'relative';
 
   util.applyTransform(largeImage, transform);
 
   largeImageBox.appendChild(largeImage);
   largeImageBox.style.zIndex = 1000;
   return true;
 };