Files.app: Hide preview panel if the selection is empty.

Previously we started to check the availability of commands that is called from
the preview panel to determine the visibility. But one command 'create-folder'is
always available, and thus the preview panel became to be always shown.

The CL add a lists of commands should be refered by preview panel when
determining the visibility.

BUG=438947
TEST=FileManagerJsTest.PreviewPanelModelTest
R=mtomasz@chromium.org
TBR=arv@chromium.org

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

Cr-Commit-Position: refs/heads/master@{#310470}

15 files changed, 286 insertions, 226 deletions

diff --git a/ui/file_manager/file_manager/common/js/util.js b/ui/file_manager/file_manager/common/js/util.js
index 29c7465..1d9a376 100644
--- a/ui/file_manager/file_manager/common/js/util.js
+++ b/ui/file_manager/file_manager/common/js/util.js
@@ -266,6 +266,21 @@ util.createChild = function(parent, opt_className, opt_tag) {
 };
 
 /**
+ * Obtains the element that should exist, decorates it with given type, and
+ * returns it.
+ * @param {string} query Query for the element.
+ * @param {function(new: T, ...)} type Type used to decorate.
+ * @private
+ * @template T
+ * @return {!T} Decorated element.
+ */
+util.queryDecoratedElement = function(query, type) {
+  var element = queryRequiredElement(document, query);
+  cr.ui.decorate(element, type);
+  return element;
+};
+
+/**
  * Updates the app state.
  *
  * @param {?string} currentDirectoryURL Currently opened directory as an URL.
diff --git a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp b/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp
index 9baee70..3f5687b 100644
--- a/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp
+++ b/ui/file_manager/file_manager/foreground/js/compiled_resources.gyp
@@ -88,6 +88,7 @@
           './metadata_update_controller.js',
           './naming_controller.js',
           './navigation_list_model.js',
+          './preview_panel_model.js',
           './progress_center_item_group.js',
           './scan_controller.js',
           './search_controller.js',
diff --git a/ui/file_manager/file_manager/foreground/js/file_manager.js b/ui/file_manager/file_manager/foreground/js/file_manager.js
index 512378b..af3e47f 100644
--- a/ui/file_manager/file_manager/foreground/js/file_manager.js
+++ b/ui/file_manager/file_manager/foreground/js/file_manager.js
@@ -738,12 +738,11 @@ FileManager.prototype = /** @struct */ {
         new PreviewPanel(
             queryRequiredElement(dom, '.preview-panel'),
             DialogType.isOpenDialog(this.dialogType) ?
-                PreviewPanel.VisibilityType.ALWAYS_VISIBLE :
-                PreviewPanel.VisibilityType.AUTO,
+                PreviewPanelModel.VisibilityType.ALWAYS_VISIBLE :
+                PreviewPanelModel.VisibilityType.AUTO,
             this.metadataCache_,
             this.volumeManager_,
-            this.historyLoader_,
-            this.isCommandEnabled_.bind(this)),
+            this.historyLoader_),
         new LocationLine(
             queryRequiredElement(dom, '#location-breadcrumbs'),
             queryRequiredElement(dom, '#location-volume-icon'),
@@ -1254,27 +1253,6 @@ FileManager.prototype = /** @struct */ {
   };
 
   /**
-   * Returns true if the command is known to be enabled according
-   * to the command handler.
-   *
-   * <p>NOTE: This delegating method is necessary as the consumer
-   * (PreviewPanel) is initialized prior to the CommandHandler.
-   * This allows us to inject a "command enabled" check function
-   * into PreviewPanel.
-   * TODO(mtomasz): Refactor to initialize PreviewPanel after CommandHandler,
-   *     then directly inject the check using CommandHandler.isCommandEnabled.
-   *     See crbug.com/436957.
-   *
-   * @param {string} id Command id.
-   * @return {boolean} True if the command is known to be enabled (very
-   *     recently).
-   * @private
-   */
-  FileManager.prototype.isCommandEnabled_ = function(id) {
-    return !!this.commandHandler && this.commandHandler.isCommandEnabled(id);
-  };
-
-  /**
    * @return {!cr.ui.List} Current list object.
    */
   FileManager.prototype.getCurrentList = function() {
diff --git a/ui/file_manager/file_manager/foreground/js/file_manager_commands.js b/ui/file_manager/file_manager/foreground/js/file_manager_commands.js
index e594bda..b090cc2 100644
--- a/ui/file_manager/file_manager/foreground/js/file_manager_commands.js
+++ b/ui/file_manager/file_manager/foreground/js/file_manager_commands.js
@@ -270,16 +270,6 @@ CommandHandler.prototype.updateAvailability = function() {
 };
 
 /**
- * @param {string} id Command id
- * @return {boolean} True if the specified command was "very recently"
- *     known to be enabled.
- */
-CommandHandler.prototype.isCommandEnabled = function(id) {
-  var command = this.commands_[id];
-  return !!command && !command.disabled;
-};
-
-/**
  * Checks if the handler should ignore the current event, eg. since there is
  * a popup dialog currently opened.
  *
diff --git a/ui/file_manager/file_manager/foreground/js/main_scripts.js b/ui/file_manager/file_manager/foreground/js/main_scripts.js
index 5da910c..e40240e 100644
--- a/ui/file_manager/file_manager/foreground/js/main_scripts.js
+++ b/ui/file_manager/file_manager/foreground/js/main_scripts.js
@@ -104,6 +104,7 @@
 //<include src="metadata_update_controller.js">
 //<include src="naming_controller.js">
 //<include src="navigation_list_model.js">
+//<include src="preview_panel_model.js">
 //<include src="progress_center_item_group.js">
 //<include src="scan_controller.js">
 //<include src="search_controller.js">
diff --git a/ui/file_manager/file_manager/foreground/js/main_window_component.js b/ui/file_manager/file_manager/foreground/js/main_window_component.js
index 162a572..754d3363 100644
--- a/ui/file_manager/file_manager/foreground/js/main_window_component.js
+++ b/ui/file_manager/file_manager/foreground/js/main_window_component.js
@@ -347,8 +347,6 @@ MainWindowComponent.prototype.onDirectoryChanged_ = function(event) {
     this.ui_.locationLine.show(event.newDirEntry);
   else
     this.ui_.locationLine.hide();
-  this.ui_.previewPanel.currentEntry = util.isFakeEntry(event.newDirEntry) ?
-      null : /** @type {Entry} */ (event.newDirEntry);
 };
 
 /**
diff --git a/ui/file_manager/file_manager/foreground/js/preview_panel_model.js b/ui/file_manager/file_manager/foreground/js/preview_panel_model.js
new file mode 100644
index 0000000..cb7db23
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/js/preview_panel_model.js
@@ -0,0 +1,113 @@
+// Copyright 2014 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.
+
+/**
+ * @param {PreviewPanelModel.VisibilityType} initialVisibilityType
+ * @param {!Array<!cr.ui.Command>} autoVisibilityCommands
+ * @extends {cr.EventTarget}
+ * @constructor
+ * @struct
+ * @suppress {checkStructDictInheritance}
+ */
+function PreviewPanelModel(initialVisibilityType, autoVisibilityCommands) {
+  cr.EventTarget.call(this);
+
+  /**
+   * @type {!PreviewPanelModel.VisibilityType}
+   * @private
+   */
+  this.visibilityType_ = initialVisibilityType;
+
+  /**
+   * @type {!Array<!cr.ui.Command>}
+   * @const
+   * @private
+   */
+  this.autoVisibilityCommands_ = autoVisibilityCommands;
+
+  /**
+   * FileSelection to be displayed.
+   * @type {FileSelection}
+   * @private
+   */
+  this.selection_ = /** @type {FileSelection} */
+      ({entries: [], computeBytes: function() {}, totalCount: 0});
+
+  /**
+   * Visibility type of the preview panel.
+   * @type {boolean}
+   * @private
+   */
+  this.visible = false;
+
+  for (var i = 0; i < this.autoVisibilityCommands_.length; i++) {
+    this.autoVisibilityCommands_[i].addEventListener(
+        'disabledChange', this.updateVisibility_.bind(this));
+  }
+
+  this.updateVisibility_();
+}
+
+PreviewPanelModel.prototype.__proto__ = cr.EventTarget.prototype;
+
+/**
+ * Visibility type of the preview panel.
+ * @enum {string}
+ * @const
+ */
+PreviewPanelModel.VisibilityType = {
+  // Preview panel always shows.
+  ALWAYS_VISIBLE: 'alwaysVisible',
+  // Preview panel shows when the selection property are set.
+  AUTO: 'auto',
+  // Preview panel does not show.
+  ALWAYS_HIDDEN: 'alwaysHidden'
+};
+
+/**
+ * @enum {string}
+ */
+PreviewPanelModel.EventType = {
+  CHANGE: 'change'
+};
+
+PreviewPanelModel.prototype.setSelection = function(selection) {
+  this.selection_ = selection;
+  this.updateVisibility_();
+};
+
+PreviewPanelModel.prototype.setVisibilityType = function(type) {
+  this.visibilityType_ = type;
+  this.updateVisibility_();
+};
+
+PreviewPanelModel.prototype.updateVisibility_ = function() {
+  // Get the new visibility value.
+  var newVisible = true;
+  switch (this.visibilityType_) {
+    case PreviewPanelModel.VisibilityType.ALWAYS_VISIBLE:
+      newVisible = true;
+      break;
+    case PreviewPanelModel.VisibilityType.AUTO:
+      newVisible =
+          this.selection_.entries.length !== 0 ||
+          this.autoVisibilityCommands_.some(function(command) {
+            return !command.disabled;
+          });
+      break;
+    case PreviewPanelModel.VisibilityType.ALWAYS_HIDDEN:
+      newVisible = false;
+      break;
+    default:
+      assertNotReached();
+  }
+
+  // If the visibility has been already the new value, just return.
+  if (this.visible === newVisible)
+    return;
+
+  // Set the new visibility value.
+  this.visible = newVisible;
+  cr.dispatchSimpleEvent(this, PreviewPanelModel.EventType.CHANGE);
+};
diff --git a/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.html b/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.html
new file mode 100644
index 0000000..4a12a6b
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- Copyright 2014 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.
+  -->
+<command id="test-command"></command>
+
+<script src="../../../../../ui/webui/resources/js/assert.js"></script>
+<script src="../../../../../ui/webui/resources/js/cr.js"></script>
+<script src="../../../../../ui/webui/resources/js/cr/event_target.js"></script>
+<script src="../../../../../ui/webui/resources/js/cr/ui.js"></script>
+<script src="../../../../../ui/webui/resources/js/cr/ui/command.js"></script>
+<script src="../../../../../ui/webui/resources/js/util.js"></script>
+<script src="../../common/js/unittest_util.js"></script>
+<script src="../../common/js/util.js"></script>
+<script src="preview_panel_model.js"></script>
+
+<script src="preview_panel_model_unittest.js"></script>
diff --git a/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.js b/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.js
new file mode 100644
index 0000000..4d13498
--- /dev/null
+++ b/ui/file_manager/file_manager/foreground/js/preview_panel_model_unittest.js
@@ -0,0 +1,41 @@
+// Copyright 2014 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.
+
+var waitFulfill = null;
+
+function testPreviewPanelModel() {
+  var command = util.queryDecoratedElement('#test-command', cr.ui.Command);
+  command.disabled = true;
+  var model = new PreviewPanelModel(
+      PreviewPanelModel.VisibilityType.AUTO,
+      [command]);
+  var visibleList = [];
+  model.addEventListener(PreviewPanelModel.EventType.CHANGE, function() {
+    visibleList.push(model.visible);
+  });
+
+  assertFalse(model.visible);
+  // Shoulld turn visible = true.
+  model.setSelection({entries: ["NotEmpty"]});
+  // Shoulld turn visible = false.
+  model.setSelection({entries: []});
+  // Shoulld turn visible = true.
+  command.disabled = false;
+  // Shoulld turn visible = false.
+  command.disabled = true;
+  // Shoulld turn visible = true.
+  model.setVisibilityType(PreviewPanelModel.VisibilityType.ALWAYS_VISIBLE);
+  // Shoulld turn visible = false.
+  model.setVisibilityType(PreviewPanelModel.VisibilityType.ALWAYS_HIDDEN);
+  command.disabled = true;
+  model.setSelection({entries: ["NotEmpty"]});
+
+  assertEquals(6, visibleList.length);
+  assertTrue(visibleList[0]);
+  assertFalse(visibleList[1]);
+  assertTrue(visibleList[2]);
+  assertFalse(visibleList[3]);
+  assertTrue(visibleList[4]);
+  assertFalse(visibleList[5]);
+}
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
index 208e090..8c9b4c3 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_manager_ui.js
@@ -118,7 +118,7 @@ function FileManagerUI(element, launchParam) {
    * @type {!cr.ui.Menu}
    * @const
    */
-  this.textContextMenu = FileManagerUI.queryDecoratedElement_(
+  this.textContextMenu = util.queryDecoratedElement(
       '#text-context-menu', cr.ui.Menu);
 
   /**
@@ -149,7 +149,7 @@ function FileManagerUI(element, launchParam) {
    * @type {!cr.ui.MenuButton}
    * @const
    */
-  this.gearButton = FileManagerUI.queryDecoratedElement_(
+  this.gearButton = util.queryDecoratedElement(
       '#gear-button', cr.ui.MenuButton);
 
   /**
@@ -188,7 +188,7 @@ function FileManagerUI(element, launchParam) {
    * @type {!cr.ui.Menu}
    * @const
    */
-  this.fileContextMenu = FileManagerUI.queryDecoratedElement_(
+  this.fileContextMenu = util.queryDecoratedElement(
       '#file-context-menu', cr.ui.Menu);
 
   /**
@@ -216,7 +216,7 @@ function FileManagerUI(element, launchParam) {
    * @type {!cr.ui.ComboButton}
    * @const
    */
-  this.taskMenuButton = FileManagerUI.queryDecoratedElement_(
+  this.taskMenuButton = util.queryDecoratedElement(
       '#tasks', cr.ui.ComboButton);
   this.taskMenuButton.showMenu = function(shouldSetFocus) {
     // Prevent the empty menu from opening.
@@ -251,21 +251,6 @@ function FileManagerUI(element, launchParam) {
 }
 
 /**
- * Obtains the element that should exist, decorates it with given type, and
- * returns it.
- * @param {string} query Query for the element.
- * @param {function(new: T, ...)} type Type used to decorate.
- * @private
- * @template T
- * @return {!T} Decorated element.
- */
-FileManagerUI.queryDecoratedElement_ = function(query, type) {
-  var element = queryRequiredElement(document, query);
-  type.decorate(element);
-  return element;
-};
-
-/**
  * Initializes here elements, which are expensive or hidden in the beginning.
  *
  * @param {!FileTable} table
@@ -305,7 +290,6 @@ FileManagerUI.prototype.initAdditionalUI = function(
   this.previewPanel.addEventListener(
       PreviewPanel.Event.VISIBILITY_CHANGE,
       this.onPreviewPanelVisibilityChange_.bind(this));
-  this.previewPanel.initialize();
 
   // Location line.
   this.locationLine = locationLine;
@@ -334,10 +318,9 @@ FileManagerUI.prototype.initDirectoryTree = function(directoryTree) {
 
   // Set up the context menu for the volume/shortcut items in directory tree.
   this.directoryTree.contextMenuForRootItems =
-      FileManagerUI.queryDecoratedElement_('#roots-context-menu', cr.ui.Menu);
+      util.queryDecoratedElement('#roots-context-menu', cr.ui.Menu);
   this.directoryTree.contextMenuForSubitems =
-      FileManagerUI.queryDecoratedElement_(
-          '#directory-tree-context-menu', cr.ui.Menu);
+      util.queryDecoratedElement('#directory-tree-context-menu', cr.ui.Menu);
 
   // Visible height of the directory tree depends on the size of progress
   // center panel. When the size of progress center panel changes, directory
@@ -414,7 +397,8 @@ FileManagerUI.prototype.onDragging_ = 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.previewPanel.visibilityType =
+      PreviewPanelModel.VisibilityType.ALWAYS_HIDDEN;
 };
 
 /**
@@ -425,7 +409,8 @@ FileManagerUI.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.previewPanel.visibilityType =
+      PreviewPanelModel.VisibilityType.AUTO;
 };
 
 /**
diff --git a/ui/file_manager/file_manager/foreground/js/ui/preview_panel.js b/ui/file_manager/file_manager/foreground/js/ui/preview_panel.js
index c8c0f15..76064eb 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/preview_panel.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/preview_panel.js
@@ -4,14 +4,12 @@
 
 /**
  * PreviewPanel UI class.
- * @param {Element} element DOM Element of preview panel.
- * @param {PreviewPanel.VisibilityType} visibilityType Initial value of the
+ * @param {!Element} element DOM Element of preview panel.
+ * @param {PreviewPanelModel.VisibilityType} visibilityType Initial value of the
  *     visibility type.
  * @param {MetadataCache} metadataCache Metadata cache.
  * @param {VolumeManagerWrapper} volumeManager Volume manager.
  * @param {!importer.HistoryLoader} historyLoader
- * @param {function(string): boolean} commandEnabledTest A function
- *     that returns true if the named command is enabled.
  * @constructor
  * @extends {cr.EventTarget}
  */
@@ -19,8 +17,9 @@ var PreviewPanel = function(element,
                             visibilityType,
                             metadataCache,
                             volumeManager,
-                            historyLoader,
-                            commandEnabledTest) {
+                            historyLoader) {
+  cr.EventTarget.call(this);
+
   /**
    * The cached height of preview panel.
    * @type {number}
@@ -30,27 +29,26 @@ var PreviewPanel = function(element,
 
   /**
    * Visibility type of the preview panel.
-   * @type {PreviewPanel.VisibilityType}
+   * @type {!PreviewPanelModel}
+   * @const
    * @private
    */
-  this.visibilityType_ = visibilityType;
-
-  /**
-   * Current entry to be displayed.
-   * @type {Entry}
-   * @private
-   */
-  this.currentEntry_ = null;
+  this.model_ = new PreviewPanelModel(visibilityType, [
+    util.queryDecoratedElement('#share', cr.ui.Command),
+    util.queryDecoratedElement('#cloud-import', cr.ui.Command)
+  ]);
 
   /**
    * Dom element of the preview panel.
-   * @type {Element}
+   * @type {!Element}
+   * @const
    * @private
    */
   this.element_ = element;
 
   /**
-   * @type {PreviewPanel.Thumbnails}
+   * @type {!PreviewPanel.Thumbnails}
+   * @const
    */
   this.thumbnails = new PreviewPanel.Thumbnails(
       element.querySelector('.preview-thumbnails'),
@@ -86,6 +84,19 @@ var PreviewPanel = function(element,
       ({entries: [], computeBytes: function() {}, totalCount: 0});
 
   /**
+   * @type {!PromiseSlot}
+   * @const
+   * @private
+   */
+  this.visibilityPromiseSlot_ = new PromiseSlot(function(visible) {
+    if (this.element_.getAttribute('visibility') ===
+        PreviewPanel.Visibility_.HIDING) {
+      this.element_.setAttribute('visibility', PreviewPanel.Visibility_.HIDDEN);
+    }
+    cr.dispatchSimpleEvent(this, PreviewPanel.Event.VISIBILITY_CHANGE);
+  }.bind(this), function(error) { console.error(error.stack || error); });
+
+  /**
    * Sequence value that is incremented by every selection update and is used to
    * check if the callback is up to date or not.
    * @type {number}
@@ -99,22 +110,10 @@ var PreviewPanel = function(element,
    */
   this.volumeManager_ = volumeManager;
 
-  /**
-   * List of command ids that are should be checked when determining
-   * auto-visibility.
-   *
-   * @private {Array.<string>}
-   */
-  this.autoVisibilityCommandIds_ = [];
-
-  /**
-   * A function that returns true if a named command is enabled.
-   * This is used when determining visibility of the preview panel.
-   * @private {function(string): boolean}
-   */
-  this.commandEnabled_ = commandEnabledTest;
-
   cr.EventTarget.call(this);
+  this.model_.addEventListener(
+      PreviewPanelModel.EventType.CHANGE, this.onModelChanged_.bind(this));
+  this.onModelChanged_();
 };
 
 /**
@@ -126,61 +125,27 @@ PreviewPanel.Event = {
   // Event to be triggered at the end of visibility change.
   VISIBILITY_CHANGE: 'visibilityChange'
 };
-Object.freeze(PreviewPanel.Event);
-
-/**
- * Visibility type of the preview panel.
- * @enum {string}
- * @const
- */
-PreviewPanel.VisibilityType = {
-  // Preview panel always shows.
-  ALWAYS_VISIBLE: 'alwaysVisible',
-  // Preview panel shows when the selection property are set.
-  AUTO: 'auto',
-  // Preview panel does not show.
-  ALWAYS_HIDDEN: 'alwaysHidden'
-};
-Object.freeze(PreviewPanel.VisibilityType);
 
 /**
  * @enum {string}
  * @const
- * @private
  */
 PreviewPanel.Visibility_ = {
   VISIBLE: 'visible',
   HIDING: 'hiding',
   HIDDEN: 'hidden'
 };
-Object.freeze(PreviewPanel.Visibility_);
 
 PreviewPanel.prototype = {
   __proto__: cr.EventTarget.prototype,
 
   /**
-   * Setter for the current entry.
-   * @param {Entry} entry New entry.
-   */
-  set currentEntry(entry) {
-    if (util.isSameEntry(this.currentEntry_, entry))
-      return;
-    this.currentEntry_ = entry;
-    this.updateVisibility_();
-    this.updatePreviewArea_();
-  },
-
-  /**
    * Setter for the visibility type.
-   * @param {PreviewPanel.VisibilityType} visibilityType New value of visibility
-   *     type.
+   * @param {PreviewPanelModel.VisibilityType} visibilityType New value of
+   *     visibility type.
    */
   set visibilityType(visibilityType) {
-    this.visibilityType_ = visibilityType;
-    this.updateVisibility_();
-    // Also update the preview area contents, because the update is suppressed
-    // while the visibility is hiding or hidden.
-    this.updatePreviewArea_();
+    this.model_.setVisibilityType(visibilityType);
   },
 
   get visible() {
@@ -199,97 +164,60 @@ PreviewPanel.prototype = {
 };
 
 /**
- * Initializes the element.
- */
-PreviewPanel.prototype.initialize = function() {
-  this.element_.addEventListener('webkitTransitionEnd',
-                                 this.onTransitionEnd_.bind(this));
-
-  this.autoVisibilityCommandIds_ = this.findAutoVisibilityCommandIds_();
-  this.updateVisibility_();
-  // Also update the preview area contents, because the update is suppressed
-  // while the visibility is hiding or hidden.
-  this.updatePreviewArea_();
-};
-
-/**
- * @return {Array.<string>} List of command ids for the "AUTO" visibility type
- * (which currently happen to correspond to "full-page" commands).
- * @private
- */
-PreviewPanel.prototype.findAutoVisibilityCommandIds_ = function() {
-  if (this.visibilityType_ != PreviewPanel.VisibilityType.AUTO) {
-    return [];
-  }
-  // Find all relevent command elements. Convert the resulting NodeList
-  // to an Array.
-  var elements = Array.prototype.slice.call(
-      this.element_.querySelectorAll('div[class~=buttonbar] button[command]'));
-
-  return elements.map(
-      function(e) {
-        // We can assume that the command attribute starts with '#';
-        return e.getAttribute('command').substring(1);
-      });
-};
-
-/**
- * @return {boolean} True if one of the known "auto visibility"
- *     (non-dialog mode) commands is enabled.
- * @private
- */
-PreviewPanel.prototype.hasEnabledAutoVisibilityCommand_ = function() {
-  return this.autoVisibilityCommandIds_.some(
-      this.commandEnabled_.bind(this));
-};
-
-/**
  * Apply the selection and update the view of the preview panel.
  * @param {FileSelection} selection Selection to be applied.
  */
 PreviewPanel.prototype.setSelection = function(selection) {
   this.sequence_++;
   this.selection_ = selection;
-  this.updateVisibility_();
+  this.model_.setSelection(selection);
   this.updatePreviewArea_();
 };
 
 /**
- * Update the visibility of the preview panel.
+ * webkitTransitionEnd does not always fire (e.g. when animation is aborted or
+ * when no paint happens during the animation).  This function sets up a timer
+ * and call the fulfill callback of the returned promise when the timer expires.
  * @private
  */
-PreviewPanel.prototype.updateVisibility_ = function() {
-  // Get the new visibility value.
-  var visibility = this.element_.getAttribute('visibility');
-  var newVisible = null;
-  switch (this.visibilityType_) {
-    case PreviewPanel.VisibilityType.ALWAYS_VISIBLE:
-      newVisible = true;
-      break;
-    case PreviewPanel.VisibilityType.AUTO:
-      newVisible = this.selection_.entries.length !== 0 ||
-          this.hasEnabledAutoVisibilityCommand_();
-      break;
-    case PreviewPanel.VisibilityType.ALWAYS_HIDDEN:
-      newVisible = false;
-      break;
-    default:
-      console.error('Invalid visibilityType.');
-      return;
-  }
-
-  // If the visibility has been already the new value, just return.
-  if ((visibility == PreviewPanel.Visibility_.VISIBLE && newVisible) ||
-      (visibility == PreviewPanel.Visibility_.HIDDEN && !newVisible))
-    return;
+PreviewPanel.prototype.waitForTransitionEnd_ = function() {
+  // Keep this sync with CSS.
+  var PREVIEW_PANEL_TRANSITION_MS = 220;
+
+  return new Promise(function(fulfill) {
+    var timeoutId;
+    var onTransitionEnd = function(event) {
+      if (event &&
+          (event.target !== this.element_ ||
+           event.propertyName !== 'opacity')) {
+        return;
+      }
+      this.element_.removeEventListener('webkitTransitionEnd', onTransitionEnd);
+      clearTimeout(timeoutId);
+      fulfill();
+    }.bind(this);
+    this.element_.addEventListener('webkitTransitionEnd', onTransitionEnd);
+    timeoutId = setTimeout(onTransitionEnd, PREVIEW_PANEL_TRANSITION_MS);
+  }.bind(this));
+};
 
-  // Set the new visibility value.
-  if (newVisible) {
-    this.element_.setAttribute('visibility', PreviewPanel.Visibility_.VISIBLE);
-    cr.dispatchSimpleEvent(this, PreviewPanel.Event.VISIBILITY_CHANGE);
+/**
+ * Handles the model change event and update the visibility of the preview
+ * panel.
+ * @private
+ */
+PreviewPanel.prototype.onModelChanged_ = function() {
+  var promise;
+  if (this.model_.visible) {
+    this.element_.setAttribute(
+        'visibility', PreviewPanel.Visibility_.VISIBLE);
+    this.updatePreviewArea_();
+    promise = Promise.resolve();
   } else {
     this.element_.setAttribute('visibility', PreviewPanel.Visibility_.HIDING);
+    promise = this.waitForTransitionEnd_();
   }
+  this.visibilityPromiseSlot_.setPromise(promise);
 };
 
 /**
@@ -354,21 +282,6 @@ PreviewPanel.prototype.updatePreviewArea_ = function() {
 };
 
 /**
- * Event handler to be called at the end of hiding transition.
- * @param {Event} event The webkitTransitionEnd event.
- * @private
- */
-PreviewPanel.prototype.onTransitionEnd_ = function(event) {
-  if (event.target != this.element_ || event.propertyName != 'opacity')
-    return;
-  var visibility = this.element_.getAttribute('visibility');
-  if (visibility != PreviewPanel.Visibility_.HIDING)
-    return;
-  this.element_.setAttribute('visibility', PreviewPanel.Visibility_.HIDDEN);
-  cr.dispatchSimpleEvent(this, PreviewPanel.Event.VISIBILITY_CHANGE);
-};
-
-/**
  * Animating label that is shown during the bytes of selection entries is being
  * calculated.
  *
diff --git a/ui/file_manager/file_manager/main.html b/ui/file_manager/file_manager/main.html
index 089ba9b..1b3bde6 100644
--- a/ui/file_manager/file_manager/main.html
+++ b/ui/file_manager/file_manager/main.html
@@ -117,6 +117,7 @@
       <script src="foreground/js/metadata_update_controller.js"></script>
       <script src="foreground/js/naming_controller.js"></script>
       <script src="foreground/js/navigation_list_model.js"></script>
+      <script src="foreground/js/preview_panel_model.js"></script>
       <script src="foreground/js/progress_center_item_group.js"></script>
       <script src="foreground/js/scan_controller.js"></script>
       <script src="foreground/js/search_controller.js"></script>
@@ -210,10 +211,13 @@
       <command id="open-with" i18n-values="label:OPEN_WITH_BUTTON_LABEL">
       <command id="zip-selection"
                i18n-values="label:ZIP_SELECTION_BUTTON_LABEL">
-      <command id="share" i18n-values="label:SHARE_BUTTON_LABEL"
-               shortcut="U+00BE" hide-shortcut-text><!-- Shortcut: '.' -->
 
-      <command id="cloud-import" i18n-values="label:CLOUD_IMPORT_BUTTON_LABEL">
+      <!-- The following commands' availability is refered by preview panel.
+           Set disabled until availability is obtained once. -->
+      <command id="share" i18n-values="label:SHARE_BUTTON_LABEL" disabled
+               shortcut="U+00BE" hide-shortcut-text><!-- Shortcut: '.' -->
+      <command id="cloud-import" i18n-values="label:CLOUD_IMPORT_BUTTON_LABEL"
+               disabled>
 
       <command id="zoom-in" shortcut="U+00BB-Ctrl">
       <command id="zoom-out" shortcut="U+00BD-Ctrl">
diff --git a/ui/file_manager/gallery/js/compiled_resources.gyp b/ui/file_manager/gallery/js/compiled_resources.gyp
index dcd9ba9..c0e377b 100644
--- a/ui/file_manager/gallery/js/compiled_resources.gyp
+++ b/ui/file_manager/gallery/js/compiled_resources.gyp
@@ -10,9 +10,11 @@
           '../../../../third_party/jstemplate/compiled_resources.gyp:jstemplate',
           '../../../webui/resources/js/cr.js',
           '../../../webui/resources/js/cr/event_target.js',
+          '../../../webui/resources/js/cr/ui.js',
           '../../../webui/resources/js/cr/ui/array_data_model.js',
           '../../../webui/resources/js/cr/ui/dialogs.js',
           '../../../webui/resources/js/load_time_data.js',
+          '../../../webui/resources/js/util.js',
           '../../file_manager/common/js/util.js',
           '../../file_manager/common/js/async_util.js',
           '../../file_manager/common/js/volume_manager_common.js',
diff --git a/ui/file_manager/video_player/js/compiled_resources.gyp b/ui/file_manager/video_player/js/compiled_resources.gyp
index bc208fa..37016de2 100644
--- a/ui/file_manager/video_player/js/compiled_resources.gyp
+++ b/ui/file_manager/video_player/js/compiled_resources.gyp
@@ -9,8 +9,10 @@
         'depends': [
           '../../../webui/resources/js/cr.js',
           '../../../webui/resources/js/cr/event_target.js',
+          '../../../webui/resources/js/cr/ui.js',
           '../../../webui/resources/js/cr/ui/array_data_model.js',
           '../../../webui/resources/js/load_time_data.js',
+          '../../../webui/resources/js/util.js',
           '../../file_manager/common/js/util.js',
           '../../file_manager/common/js/async_util.js',
           '../../file_manager/common/js/file_type.js',
@@ -53,7 +55,6 @@
 	  # Referenced in common/js/util.js.
 	  # TODO(yawano): Remove dependency to cr/ui/dialogs from common/js/util.js.
           '../../../webui/resources/js/cr/ui/dialogs.js',
-          '../../../webui/resources/js/load_time_data.js',
           '../../../webui/resources/js/i18n_template_no_process.js',
           '../../file_manager/common/js/async_util.js',
           '../../file_manager/common/js/file_type.js',
diff --git a/ui/webui/resources/js/util.js b/ui/webui/resources/js/util.js
index 2c40592d..a2c2a44 100644
--- a/ui/webui/resources/js/util.js
+++ b/ui/webui/resources/js/util.js
@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-<include src="assert.js">
+// <include src="assert.js">
 
 /**
  * Alias for document.getElementById.