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

chrome/browser/resources/file_manager/js/file_manager.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';
 
 /**
  * This variable is checked in SelectFileDialogExtensionBrowserTest.
  * @type {number}
  */
@@ skipping 64 matching lines @@
  */
 DialogType.isModal = function(type) {
   return type == DialogType.SELECT_FOLDER ||
       type == DialogType.SELECT_UPLOAD_FOLDER ||
       type == DialogType.SELECT_SAVEAS_FILE ||
       type == DialogType.SELECT_OPEN_FILE ||
       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
  */
 var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
 
 // Anonymous "namespace".
 (function() {
 
   // Private variables and helper functions.
 
@@ skipping 736 matching lines @@
     this.grid_ = dom.querySelector('.thumbnail-grid');
     this.spinner_ = dom.querySelector('#spinner-with-text');
     this.showSpinner_(true);
 
     this.searchBreadcrumbs_ = new BreadcrumbsController(
          dom.querySelector('#search-breadcrumbs'), this.metadataCache_);
     this.searchBreadcrumbs_.addEventListener(
          'pathclick', this.onBreadcrumbClick_.bind(this));
     this.searchBreadcrumbs_.setHideLast(false);
 
+    this.previewPanel_ = new PreviewPanel(
+        dom.querySelector('.preview-panel'),
+        DialogType.isOpenDialog(this.dialogType) ?
+            PreviewPanel.VisibilityType.ALWAYS :

[yoshiki, 2013/09/04 13:45:02]

ALWAYS_VISIBLE or FORCE_VISIBLE is better, instead of ALWAYS?

[hirono, 2013/09/05 02:26:20]

Done.

+            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_;
 
     var fullPage = this.dialogType == DialogType.FULL_PAGE;
     FileTable.decorate(this.table_, this.metadataCache_, fullPage);
     FileGrid.decorate(this.grid_, this.metadataCache_);
 
     this.document_.addEventListener('keydown', this.onKeyDown_.bind(this));
     this.document_.addEventListener('keyup', this.onKeyUp_.bind(this));
 
@@ skipping 204 matching lines @@
         this.fileFilter_,
         this.fileWatcher_,
         this.metadataCache_,
         this.volumeManager_,
         showSpecialSearchRoots);
     this.directoryModel_.start();
 
     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();
 
     this.table_.setupCompareFunctions(dataModel);
 
     dataModel.addEventListener('permuted',
                                this.updateStartupPrefs_.bind(this));
 
     this.directoryModel_.getFileListSelection().addEventListener('change',
         this.selectionHandler_.onFileSelectionChanged.bind(
@@ skipping 418 matching lines @@
    * @private
    */
   FileManager.prototype.onWatcherMetadataChanged_ = function(event) {
     this.updateMetadataInUI_(event.metadataType, event.urls, event.properties);
   };
 
   /**
    * Resize details and thumb views to fit the new window size.
    * @private
    */
-  FileManager.prototype.onPreviewPanelVisibilityChanged_ = function(visible) {
-    var panelHeight = visible ? this.getPreviewPanelHeight_() : 0;
+  FileManager.prototype.onPreviewPanelVisibilityChange_ = function() {
+    var panelHeight = this.previewPanel_.visible ?
+        this.previewPanel_.height : 0;
     this.grid_.setBottomMarginForPanel(panelHeight);
     this.table_.setBottomMarginForPanel(panelHeight);
     this.directoryTree_.setBottomMarginForPanel(panelHeight);
   };
 
   /**
    * Invoked when the drag is started on the list or the grid.
    * @private
    */
   FileManager.prototype.onDragStart_ = function() {
-    this.selectionHandler_.setPreviewPanelMustBeHidden(true);
+    // On open file dialog, the preview panel is always shown.
+    if (DialogType.isOpenDialog(this.dialogType))
+      return;
+    this.selectionHandler_.previewPanel_.visibilityType =

[yoshiki, 2013/09/04 13:45:02]

We can't access this.selectionHandler_.previewPanel_ directly, since it is
private variable. Couldn't you use this.previewPanel_? 

[hirono, 2013/09/05 02:26:20]

Done.

+        PreviewPanel.VisibilityType.HIDDEN;

[yoshiki, 2013/09/04 13:45:02]

ALWAYS_HIDDEN or FORCE_HIDDEN?

[hirono, 2013/09/05 02:26:20]

Done.

   };
 
   /**
    * Invoked when the drag is ended on the list or the grid.
    * @private
    */
   FileManager.prototype.onDragEnd_ = function() {
-    this.selectionHandler_.setPreviewPanelMustBeHidden(false);
+    // On open file dialog, the preview panel is always shown.
+    if (DialogType.isOpenDialog(this.dialogType))
+      return;
+    this.selectionHandler_.previewPanel_.visibilityType =
+        PreviewPanel.VisibilityType.AUTO;
   };
 
   /**
-   * 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_;
-  };
-
-  /**
    * Restores current directory and may be a selected item after page load (or
    * reload) or popping a state (after click on back/forward). If location.hash
    * is present it means that the user has navigated somewhere and that place
    * will be restored. defaultPath primarily is used with save/open dialogs.
    * Default path may also contain a file name. Freshly opened file manager
    * window has neither.
    *
    * @private
    */
   FileManager.prototype.setupCurrentDirectory_ = function() {
@@ skipping 903 matching lines @@
     if (this.closeOnUnmount_ && !event.initial &&
         PathUtil.getRootPath(event.previousDirEntry.fullPath) !=
             PathUtil.getRootPath(event.newDirEntry.fullPath)) {
       this.closeOnUnmount_ = false;
     }
 
     this.updateCommands();
     this.updateUnformattedDriveStatus_();
     this.updateTitle_();
     this.updateGearMenu_();
+    this.previewPanel_.currentPath_ = this.getCurrentDirectory();
   };
 
   /**
    * Updates commands' states by emiting canExecute events. Should be used
    * only if there is need to reevaluate states without an user action, eg.
    * external events.
    */
   FileManager.prototype.updateCommands = function() {
     var commands = this.dialogDom_.querySelectorAll('command');
     for (var i = 0; i < commands.length; i++) {
@@ skipping 1461 matching lines @@
    */
   FileManager.prototype.setCtrlKeyPressed_ = function(flag) {
     this.ctrlKeyPressed_ = flag;
     // Before the DOM is constructed, the key event can be handled.
     var cacheClearCommand =
         this.document_.querySelector('#drive-clear-local-cache');
     if (cacheClearCommand)
       cacheClearCommand.canExecuteChange();
   };
 })();