Let the description text in the preview panels managed by PreviewPanel class.

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

Index: chrome/browser/resources/file_manager/js/ui/preview_panel.js
diff --git a/chrome/browser/resources/file_manager/js/ui/preview_panel.js b/chrome/browser/resources/file_manager/js/ui/preview_panel.js
index 3e349c2bde76deffafde08931827ed436be95a97..f536b21bbfd54d6c19956c90af96e5bf13317cc0 100644
--- a/chrome/browser/resources/file_manager/js/ui/preview_panel.js
+++ b/chrome/browser/resources/file_manager/js/ui/preview_panel.js
@@ -55,24 +55,32 @@ var PreviewPanel = function(element, visibilityType, currentPath) {
   this.summaryElement_ = element.querySelector('.preview-summary');
 
   /**
+   * @type {CalculatingLabel}
+   * @private
+   */
+  this.calculatingLabel_ = new CalculatingLabel(
+      this.summaryElement_.querySelector('.calculating-size'));
+
+  /**
    * @type {HTMLElement}
    * @private
    */
-  this.textElement_ = element.querySelector('.preview-text');
+  this.previewText_ = element.querySelector('.preview-text');
 
   /**
-   * Function to be called at the end of visibility change.
-   * @type {function(boolean)}
+   * FileSelection to be displayed.
+   * @type {FileSelection}
    * @private
    */
-  this.visibilityChangedCallback_ = null;
+  this.selection_ = {entries: [], computeBytes: function() {}};
 
   /**
-   * Entries to be displayed.
-   * @type {Array.<Entry>}
+   * Sequence value that is incremented by every selection update nad is used to
+   * check if the callback is up to date or not.
+   * @type {number}
    * @private
    */
-  this.entries_ = [];
+  this.sequence_ = 0;
 
   cr.EventTarget.call(this);
 };
@@ -93,7 +101,7 @@ PreviewPanel.Event = Object.freeze({
 PreviewPanel.VisibilityType = Object.freeze({
   // Preview panel always shows.
   ALWAYS_VISIBLE: 'alwaysVisible',
-  // Preview panel shows when the entries property are set.
+  // Preview panel shows when the selection property are set.
   AUTO: 'auto',
   // Preview panel does not show.
   ALWAYS_HIDDEN: 'alwaysHidden'
@@ -112,12 +120,14 @@ PreviewPanel.prototype = {
   __proto__: cr.EventTarget.prototype,
 
   /**
-   * Setter for entries to be displayed in the preview panel.
-   * @param {Array.<Entry>} entries New entries.
+   * Setter for selection to be displayed in the preview panel.
+   * @param {FileSelection} selection New selection.
    */
-  set entries(entries) {
-    this.entries_ = entries;
+  set selection(selection) {

[yoshiki, 2013/09/06 06:56:03]

It should be a method like setSelection(selectio) rather than setter, since this
not only just simply set the data, but also modify other related-data.

[hirono, 2013/09/09 07:15:06]

Done.

+    this.sequence_++;
+    this.selection_ = selection;
     this.updateVisibility_();
+    this.updatePreviewText_();
   },
 
   /**
@@ -156,6 +166,7 @@ PreviewPanel.prototype = {
 PreviewPanel.prototype.initialize = function() {
   this.element_.addEventListener('webkitTransitionEnd',
                                  this.onTransitionEnd_.bind(this));
+  this.updatePreviewText_();
   this.updateVisibility_();
 };
 
@@ -172,8 +183,8 @@ PreviewPanel.prototype.updateVisibility_ = function() {
       newVisible = true;
       break;
     case PreviewPanel.VisibilityType.AUTO:
-      newVisible = this.entries_.length != 0 ||
-                   !PathUtil.isRootPath(this.currentPath_);
+      newVisible = this.selection_.entries.length != 0 ||
+          !PathUtil.isRootPath(this.currentPath_);
       break;
     case PreviewPanel.VisibilityType.ALWAYS_HIDDEN:
       newVisible = false;
@@ -198,6 +209,49 @@ PreviewPanel.prototype.updateVisibility_ = function() {
 };
 
 /**
+ * Update the text in the preview panel.
+ * @private
+ */
+PreviewPanel.prototype.updatePreviewText_ = function() {
+  var selection = this.selection_;
+
+  // Hides the preview text if zero or one file is selected. We shows a
+  // breadcrumb list instead on the preview panel.
+  if (selection.totalCount <= 1) {
+    this.calculatingLabel_.hidden = true;
+    this.previewText_.textContent = '';
+    return;
+  }
+
+  // Obtains the preview text.
+  var text = '';
+  if (selection.directoryCount == 0)
+    text = strf('MANY_FILES_SELECTED', selection.fileCount);
+  else if (selection.fileCount == 0)
+    text = strf('MANY_DIRECTORIES_SELECTED', selection.directoryCount);
+  else
+    text = strf('MANY_ENTRIES_SELECTED', selection.totalCount);
+
+  // Obtains the size of files.
+  this.calculatingLabel_.hidden = selection.bytesKnown;
+  if (selection.bytesKnown && selection.showBytes)
+    text += ', ' + util.bytesToString(selection.bytes);
+
+  // Set the preview text to the element.
+  this.previewText_.textContent = text;
+
+  // Request the byte calculation if needed.
+  if (!selection.bytesKnown) {
+    this.selection_.computeBytes(function(sequence) {
+      // Selection has been already updated.
+      if (this.sequence_ != sequence)
+        return;
+      this.updatePreviewText_();
+    }.bind(this, this.sequence_));
+  }
+};
+
+/**
  * Event handler to be called at the end of hiding transition.
  * @param {Event} event The webkitTransitionEnd event.
  * @private
@@ -211,3 +265,57 @@ PreviewPanel.prototype.onTransitionEnd_ = function(event) {
   this.element_.setAttribute('visibility', PreviewPanel.Visibility_.HIDDEN);
   cr.dispatchSimpleEvent(this, PreviewPanel.Event.VISIBILITY_CHANGE);
 };
+
+/**
+ * Animating colculating label.

[yoshiki, 2013/09/06 06:56:03]

s/colculating/calculating/

And please describe what this class represents, and what this class do.
"CalculatingLabel" (or "CalculatingSizeLabel") is somewhat misleading name I
think, so we'd be better to support it with the comment.

[hirono, 2013/09/09 07:15:06]

Done.

+ * @param {HTMLElement} element DOM element of the label.
+ * @constructor
+ */
+var CalculatingLabel = function(element) {

[yoshiki, 2013/09/06 06:56:03]

This should be move to PreviewPanel class like "PreviewPanel.CalculatingLabel",
since this class is used only from PreviewPanel.

[yoshiki, 2013/09/06 06:56:03]

How about renaming it to "CalculatingSizeLabel"? Just "CalculatingLabel" is
somewhat ambiguous.

[hirono, 2013/09/09 07:15:06]

Done.

[hirono, 2013/09/09 07:15:06]

Done.

+  this.element_ = element;
+  this.count_ = 0;
+  this.intervalID_ = null;
+  Object.seal(this);
+};
+
+/**
+ * Period in milliseconds.
+ * @const {number}
+ */
+CalculatingLabel.PERIOD = 500;
+
+CalculatingLabel.prototype = {
+  /**
+   * Set visibility of the label.
+   * When it is displayed, the text is animated.
+   * @param {boolean} hidden Whether to hide the label or not.
+   */
+  set hidden(hidden) {
+    this.element_.hidden = hidden;
+    if (!hidden) {
+      if (this.intervalID_ != null)
+        return;
+      this.count_ = 2;
+      this.intervalID_ =
+          setInterval(this.onStep_.bind(this), CalculatingLabel.PERIOD);
+      this.onStep_();
+    } else {
+      if (this.intervalID_ == null)
+        return;
+      clearInterval(this.intervalID_);
+      this.intervalID_ = null;
+    }
+  }
+};
+
+/**
+ * @private
+ */
+CalculatingLabel.prototype.onStep_ = function() {
+  var text = str('CALCULATING_SIZE');
+  for (var i = 0; i < ~~(this.count_ / 2) % 4; i++) {
+    text += '.';
+  }
+  this.element_.textContent = text;
+  this.count_++;
+};