Update import details panel to comply (mostly) with UX direction.

ui/file_manager/file_manager/foreground/js/import_controller.js

 // 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.
 
 // Namespace
 var importer = importer || {};
 
 /** @enum {string} */
 importer.ResponseId = {
-  EXECUTABLE: 'executable',
+  READY: 'ready',
   HIDDEN: 'hidden',
-  ACTIVE_IMPORT: 'active_import',
-  INSUFFICIENT_SPACE: 'insufficient_space',
-  NO_MEDIA: 'no_media',
+  IMPORTING: 'importing',
+  INSUFFICIENT_SPACE: 'insufficient-space',
+  NO_MEDIA: 'no-media',
   SCANNING: 'scanning'
 };
 
 /**
- * @typedef {{
- *   id: !importer.ResponseId,
- *   label: string,
- *   visible: boolean,
- *   executable: boolean,
- *   coreIcon: string
- * }}
- */
-importer.CommandUpdate;
-
-/**
  * Class that orchestrates background activity and UI changes on
  * behalf of Cloud Import.
  *
  * @constructor
  * @struct
  *
  * @param {!importer.ControllerEnvironment} environment The class providing
  *     access to runtime environmental information, like the current directory,
  *     volume lookup and so-on.
  * @param {!importer.MediaScanner} scanner
@@ skipping 13 matching lines @@
   this.scanner_ = scanner;
 
   /** @private {!importer.CommandWidget} */
   this.commandWidget_ = commandWidget;
 
   /** @type {!importer.ScanManager} */
   this.scanManager_ = new importer.ScanManager(environment, scanner);
 
   /**
    * The active import task, if any.
-   * @private {importer.MediaImportHandler.ImportTask}
+   * @private {?{
+   *   scan: !importer.ScanResult,
+   *   task: !importer.MediaImportHandler.ImportTask
+   * }}
    */
-  this.activeImportTask_ = null;
+  this.activeImport_ = null;
 
   var listener = this.onScanEvent_.bind(this);
   this.scanner_.addObserver(listener);
   // Remove the observer when the foreground window is closed.
   window.addEventListener(
       'pagehide',
       function() {
         this.scanner_.removeObserver(listener);
       }.bind(this));
 
   this.environment_.addVolumeUnmountListener(
       this.onVolumeUnmounted_.bind(this));
 
   this.environment_.addDirectoryChangedListener(
       this.onDirectoryChanged_.bind(this));
 
   this.environment_.addSelectionChangedListener(
       this.onSelectionChanged_.bind(this));
 
   this.commandWidget_.addImportClickedListener(
       this.execute.bind(this));
+
+  this.commandWidget_.addDestinationClickedListener(
+      this.showDestination.bind(this));
 };
 
 /**
  * @param {!importer.ScanEvent} event Command event.
  * @param {importer.ScanResult} scan
  *
  * @private
  */
 importer.ImportController.prototype.onScanEvent_ = function(event, scan) {
   if (!this.scanManager_.isActiveScan(scan)) {
@@ skipping 46 matching lines @@
   } else {
     this.checkState_();
   }
 };
 
 /**
  * @param {!importer.MediaImportHandler.ImportTask} task
  * @private
  */
 importer.ImportController.prototype.onImportFinished_ = function(task) {
-  this.activeImportTask_ = null;
+  this.activeImport_ = null;
   this.scanManager_.reset();
   this.checkState_();
 };
 
 /**
  * Executes import against the current directory. Should only
  * be called when the current directory has been validated
  * by calling "update" on this class.
  */
 importer.ImportController.prototype.execute = function() {
-  console.assert(!this.activeImportTask_,
+  console.assert(!this.activeImport_,
       'Cannot execute while an import task is already active.');
   metrics.recordEnum('CloudImport.UserAction', 'IMPORT_INITIATED');
 
   var scan = this.scanManager_.getActiveScan();
   assert(scan != null);
 
   var importTask = this.importRunner_.importFromScanResult(
       scan,
       importer.Destination.GOOGLE_DRIVE);
 
-  this.activeImportTask_ = importTask;
+  this.activeImport_ = {
+    scan: scan,
+    task: importTask
+  };
   var taskFinished = this.onImportFinished_.bind(this, importTask);
   importTask.whenFinished.then(taskFinished).catch(taskFinished);
   this.checkState_();
 };
 
 /**
+ * Shows the import destination folder.
+ */
+importer.ImportController.prototype.showDestination = function() {
+  console.log('SET THE CURRENT DIRECTORY TO THE DESTINATION');
+};
+
+/**
  * Checks the environment and updates UI as needed.
  * @param {importer.ScanResult=} opt_scan If supplied,
  * @private
  */
 importer.ImportController.prototype.checkState_ = function(opt_scan) {
   // If there is no Google Drive mount, Drive may be disabled
   // or the machine may be running in guest mode.
   if (!this.environment_.isGoogleDriveMounted()) {
     this.updateUi_(importer.ResponseId.HIDDEN);
     return;
   }
 
-  if (!!this.activeImportTask_) {
-    this.updateUi_(importer.ResponseId.ACTIVE_IMPORT);
+  if (!!this.activeImport_) {
+    this.updateUi_(importer.ResponseId.IMPORTING, this.activeImport_.scan);
     return;
   }
 
   // If we don't have an existing scan, we'll try to create
   // one. When we do end up creating one (not getting
   // one from the cache) it'll be empty...even if there is
   // a current selection. This is because scans are
   // resolved asynchronously. And we like it that way.
   // We'll get notification when the scan is updated. When
   // that happens, we'll be called back with opt_scan
@@ skipping 30 matching lines @@
       /** @param {boolean} fits */
       function(fits) {
           if (!fits) {
             this.updateUi_(
                 importer.ResponseId.INSUFFICIENT_SPACE,
                 opt_scan);
             return;
           }
 
         this.updateUi_(
-            importer.ResponseId.EXECUTABLE,
+            importer.ResponseId.READY,  // to import...
             opt_scan);
       }.bind(this));
 };
 
 /**
  * @param {importer.ResponseId} responseId
  * @param {importer.ScanResult=} opt_scan
- *
- * @return {!importer.CommandUpdate}
  * @private
  */
 importer.ImportController.prototype.updateUi_ =
     function(responseId, opt_scan) {
-  switch(responseId) {
-    case importer.ResponseId.EXECUTABLE:
-      this.commandWidget_.update({
-        id: responseId,
-        label: strf(
-            'CLOUD_IMPORT_BUTTON_LABEL',
-            opt_scan.getFileEntries().length),
-        visible: true,
-        executable: true,
-        coreIcon: 'cloud-upload'
-      });
-      this.commandWidget_.updateDetails(opt_scan);
-      break;
-    case importer.ResponseId.HIDDEN:
-      this.commandWidget_.update({
-        id: responseId,
-        visible: false,
-        executable: false,
-        label: '** SHOULD NOT BE VISIBLE **',
-        coreIcon: 'cloud-off'
-      });
-      this.commandWidget_.setDetailsVisible(false);
-      break;
-    case importer.ResponseId.ACTIVE_IMPORT:
-      this.commandWidget_.update({
-        id: responseId,
-        visible: true,
-        executable: false,
-        label: str('CLOUD_IMPORT_ACTIVE_IMPORT_BUTTON_LABEL'),
-        coreIcon: 'swap-vert'
-      });
-      this.commandWidget_.setDetailsVisible(false);
-      break;
-    case importer.ResponseId.INSUFFICIENT_SPACE:
-      this.commandWidget_.update({
-        id: responseId,
-        visible: true,
-        executable: false,
-        label: strf(
-            'CLOUD_IMPORT_INSUFFICIENT_SPACE_BUTTON_LABEL',
-            util.bytesToString(opt_scan.getTotalBytes())),
-        coreIcon: 'report-problem'
-      });
-      this.commandWidget_.updateDetails(opt_scan);
-      break;
-    case importer.ResponseId.NO_MEDIA:
-      this.commandWidget_.update({
-        id: responseId,
-        visible: true,
-        executable: false,
-        label: str('CLOUD_IMPORT_EMPTY_SCAN_BUTTON_LABEL'),
-        coreIcon: 'cloud-done'
-      });
-      this.commandWidget_.updateDetails(
-          /** @type {!importer.ScanResult} */ (opt_scan));
-      break;
-    case importer.ResponseId.SCANNING:
-      this.commandWidget_.update({
-        id: responseId,
-        visible: true,
-        executable: false,
-        label: str('CLOUD_IMPORT_SCANNING_BUTTON_LABEL'),
-        coreIcon: 'autorenew'
-      });
-      this.commandWidget_.updateDetails(
-          /** @type {!importer.ScanResult} */ (opt_scan));
-      break;
-    default:
-      assertNotReached('Unrecognized response id: ' + responseId);
-  }
+  this.commandWidget_.update(responseId, opt_scan);
 };
 
 /**
  * @return {boolean} true if the current directory is scan eligible.
  * @private
  */
 importer.ImportController.prototype.isCurrentDirectoryScannable_ =
     function() {
   var directory = this.environment_.getCurrentDirectory();
   return !!directory &&
@@ skipping 219 matching lines @@
 importer.CommandWidget = function() {};
 
 /**
  * Install a listener that get's called when the user wants to initiate
  * import.
  *
  * @param {function()} listener
  */
 importer.CommandWidget.prototype.addImportClickedListener;
 
-/** @param {!importer.CommandUpdate} update */
+/**
+ * Install a listener that get's called when the user wants to initiate
+ * import.
+ *
+ * @param {function()} listener
+ */
+importer.CommandWidget.prototype.addDestinationClickedListener;
+
+/**
+ * @param {importer.ResponseId} responseId
+ * @param {importer.ScanResult=} opt_scan
+ */
 importer.CommandWidget.prototype.update;
 
-/** @param {!importer.ScanResult} scan */
-importer.CommandWidget.prototype.updateDetails;
-
-/** Resets details to default. */
-importer.CommandWidget.prototype.resetDetails;
-
 /**
  * Runtime implementation of CommandWidget.
  *
  * @constructor
  * @implements {importer.CommandWidget}
  * @struct
  */
 importer.RuntimeCommandWidget = function() {
 
   /** @private {Element} */
   this.importButton_ = document.getElementById('cloud-import-button');
   this.importButton_.onclick = this.onImportClicked_.bind(this);
 
   /** @private {Element} */
   this.detailsButton_ = document.getElementById('cloud-import-details-button');
   this.detailsButton_.onclick = this.toggleDetails_.bind(this);
 
   /** @private {Element} */
   this.detailsImportButton_ =
-      document.querySelector('#cloud-import-details .import');
+      document.querySelector('#cloud-import-details paper-button.import');
   this.detailsImportButton_.onclick = this.onImportClicked_.bind(this);
 
   /** @private {Element} */
   this.detailsPanel_ = document.getElementById('cloud-import-details');
+  this.detailsPanel_.addEventListener(
+      'transitionend',
+      this.onDetailsTransitionEnd_.bind(this),
+      false);
 
   /** @private {Element} */
-  this.photoCount_ =
-      document.querySelector('#cloud-import-details .photo-count');
+  this.detailsPanelBody_ =
+      document.querySelector('#cloud-import-details .main');
 
   /** @private {Element} */
-  this.spaceRequired_ =
-      document.querySelector('#cloud-import-details .space-required');
+  this.statusContent_ =
+      document.querySelector('#cloud-import-details .status .content');
+  this.statusContent_.onclick = this.onStatusClicked_.bind(this);
 
   /** @private {Element} */
-  this.icon_ = document.querySelector('#cloud-import-button core-icon');
+  this.toolbarIcon_ =
+      document.querySelector('#cloud-import-button core-icon');
+  this.statusIcon_ =
+      document.querySelector('#cloud-import-details .status core-icon');
 
   /** @private {function()} */
   this.importListener_;
+
+  /** @private {function()} */
+  this.destinationListener_;
 };
 
 /** @override */
 importer.RuntimeCommandWidget.prototype.addImportClickedListener =
     function(listener) {
   console.assert(!this.importListener_);
   this.importListener_ = listener;
 };
 
-/** @private */
-importer.RuntimeCommandWidget.prototype.onImportClicked_ = function() {
-  console.assert(!!this.importListener_);
+/** @override */
+importer.RuntimeCommandWidget.prototype.addDestinationClickedListener =
+    function(listener) {
+  console.assert(!this.destinationListener_);
+  this.destinationListener_ = listener;
+};
+
+/**
+ * @param {Event} event Click event.
+ * @private
+ */
+importer.RuntimeCommandWidget.prototype.onImportClicked_ = function(event) {
+  console.assert(!!this.importListener_, 'Listener not set.');
   this.importListener_();
 };
 
+/**
+ * @param {Event} event Click event.
+ * @private
+ */
+importer.RuntimeCommandWidget.prototype.onStatusClicked_ = function(event) {
+  console.assert(!!this.destinationListener_, 'Listener not set.');
+  // TODO(smckay): Only if the element is "destination-link".
+  this.destinationListener_();
+};
+
 /** @private */
 importer.RuntimeCommandWidget.prototype.toggleDetails_ = function() {
-  this.setDetailsVisible(this.detailsPanel_.className === 'offscreen');
+    this.setDetailsVisible(this.detailsPanel_.className === 'hidden');

[mtomasz, 2015/02/13 13:26:24]

Hidden attribute should be used instead?

[Steve McKay, 2015/02/13 17:31:44]

We both mark the element as hidden AND add the 'hidden' class to the element.
The 'hidden' class provides the smooth and sensual visual transition when
showing/hiding.

 };
 
 importer.RuntimeCommandWidget.prototype.setDetailsVisible = function(visible) {
   if (visible) {
+    this.detailsPanel_.hidden = false;
     this.detailsPanel_.className = '';

[mtomasz, 2015/02/13 13:26:24]

ditto

[Steve McKay, 2015/02/13 17:31:45]

Acknowledged.

   } else {
-    this.detailsPanel_.className = 'offscreen';
+    this.detailsPanel_.className = 'hidden';

[mtomasz, 2015/02/13 13:26:24]

ditto

[Steve McKay, 2015/02/13 17:31:45]

Acknowledged.

+  }
+};
+
+/** @private */
+importer.RuntimeCommandWidget.prototype.onDetailsTransitionEnd_ =
+    function() {
+  if (this.detailsPanel_.className === 'hidden') {
+    // if we simply make the panel invisible (via opacity)
+    // it'll still be sitting there grabing mouse events
+    // and so-on. So we *hide* hide it.
+    this.detailsPanel_.hidden = true;
   }
 };
 
 /** @override */
-importer.RuntimeCommandWidget.prototype.update = function(update) {
-    this.importButton_.setAttribute('title', update.label);
-    this.importButton_.disabled = !update.executable;
-    this.importButton_.style.display =
-        update.visible ? 'block' : 'none';
+importer.RuntimeCommandWidget.prototype.update =
+    function(responseId, opt_scan) {
+  switch(responseId) {
+    case importer.ResponseId.HIDDEN:
+      this.setDetailsVisible(false);
 
-    this.icon_.setAttribute('icon', update.coreIcon);
+      this.importButton_.disabled = true;
+      this.detailsButton_.disabled = true;
 
-    this.detailsButton_.disabled = !update.executable;
-    this.detailsButton_.style.display =
-        update.visible ? 'block' : 'none';
-};
+      this.importButton_.hidden = true;
+      this.detailsButton_.hidden = true;
 
-/** @override */
-importer.RuntimeCommandWidget.prototype.updateDetails = function(scan) {
-  this.photoCount_.textContent = scan.getFileEntries().length.toLocaleString();
-  this.spaceRequired_.textContent = util.bytesToString(scan.getTotalBytes());
-};
+      this.importButton_.setAttribute(
+          'title',
+          '** SHOULD NOT BE VISIBLE **');
+      this.statusContent_.innerHTML =
+          '** SHOULD NOT BE VISIBLE **';
 
-/** @override */
-importer.RuntimeCommandWidget.prototype.resetDetails = function() {
-  this.photoCount_.textContent = 0;
-  this.spaceRequired_.textContent = 0;
+      this.toolbarIcon_.setAttribute('icon', 'cloud-off');
+      this.statusIcon_.setAttribute('icon', 'cloud-off');
+
+      break;
+
+    case importer.ResponseId.IMPORTING:
+      console.assert(!!opt_scan, 'Scan not defined, but is required.');
+      this.setDetailsVisible(false);
+
+      this.importButton_.setAttribute('title', strf(
+          'CLOUD_IMPORT_TOOLTIP_IMPORTING',
+          opt_scan.getFileEntries().length));
+      this.statusContent_.innerHTML = strf(
+          'CLOUD_IMPORT_STATUS_IMPORTING',
+          opt_scan.getFileEntries().length);
+
+      this.importButton_.disabled = true;
+      this.detailsButton_.disabled = true;
+      this.detailsImportButton_.disabled = true;
+
+      this.importButton_.hidden = false;
+      this.detailsButton_.hidden = false;
+      this.detailsImportButton_.hidden = false;
+
+      this.toolbarIcon_.setAttribute('icon', 'autorenew');
+      this.statusIcon_.setAttribute('icon', 'autorenew');
+
+      break;
+
+    case importer.ResponseId.INSUFFICIENT_SPACE:
+      console.assert(!!opt_scan, 'Scan not defined, but is required.');
+
+      this.importButton_.setAttribute('title', strf(
+          'CLOUD_IMPORT_STATUS_INSUFFICIENT_SPACE'));
+      this.statusContent_.innerHTML = strf(
+          'CLOUD_IMPORT_STATUS_INSUFFICIENT_SPACE',
+          opt_scan.getFileEntries().length);
+
+      this.importButton_.disabled = true;
+      this.detailsButton_.disabled = false;
+      this.detailsImportButton_.disabled = true;
+
+      this.importButton_.hidden = false;
+      this.detailsButton_.hidden = false;
+      this.detailsImportButton_.hidden = false;
+
+      this.toolbarIcon_.setAttribute('icon', 'image:photo');
+      this.statusIcon_.setAttribute('icon', 'cloud-off');
+      break;
+
+    case importer.ResponseId.NO_MEDIA:
+      this.importButton_.setAttribute('title', str(
+          'CLOUD_IMPORT_STATUS_NO_MEDIA'));
+      this.statusContent_.innerHTML = str(
+          'CLOUD_IMPORT_STATUS_NO_MEDIA');
+
+      this.importButton_.disabled = true;
+      this.detailsButton_.disabled = true;
+      this.detailsImportButton_.disabled = true;
+
+      this.importButton_.hidden = false;
+      this.detailsButton_.hidden = false;
+      // Hidden for now, since this is also the "done" importing case.
+      this.detailsImportButton_.hidden = true;
+
+      this.toolbarIcon_.setAttribute('icon', 'cloud-done');
+      this.statusIcon_.setAttribute('icon', 'cloud-done');
+      break;
+
+    case importer.ResponseId.READY:
+      console.assert(!!opt_scan, 'Scan not defined, but is required.');
+
+      this.importButton_.setAttribute('title', strf(
+          'CLOUD_IMPORT_TOOLTIP_READY',
+          opt_scan.getFileEntries().length));
+      this.statusContent_.innerHTML = strf(
+          'CLOUD_IMPORT_STATUS_READY',
+          opt_scan.getFileEntries().length);
+
+      this.importButton_.disabled = false;
+      this.detailsButton_.disabled = false;
+      this.detailsImportButton_.disabled = false;
+
+      this.importButton_.hidden = false;
+      this.detailsButton_.hidden = false;
+      this.detailsImportButton_.hidden = false;
+
+      this.toolbarIcon_.setAttribute('icon', 'cloud-upload');
+      this.statusIcon_.setAttribute('icon', 'image:photo');
+      break;
+
+    case importer.ResponseId.SCANNING:
+      console.assert(!!opt_scan, 'Scan not defined, but is required.');
+
+      this.importButton_.setAttribute('title', str(
+          'CLOUD_IMPORT_TOOLTIP_SCANNING'));
+      this.statusContent_.innerHTML = strf(
+          'CLOUD_IMPORT_STATUS_SCANNING',
+          opt_scan.getFileEntries().length);
+
+      this.importButton_.disabled = true;
+      this.detailsButton_.disabled = true;
+      this.detailsImportButton_.disabled = true;
+
+      this.importButton_.hidden = false;
+      this.detailsButton_.hidden = false;
+      this.detailsImportButton_.hidden = true;
+
+      this.toolbarIcon_.setAttribute('icon', 'autorenew');
+      this.statusIcon_.setAttribute('icon', 'autorenew');
+      break;
+
+    default:
+      assertNotReached('Unrecognized response id: ' + responseId);
+  }
 };
 
 /**
  * A cache for ScanResults.
  *
  * @constructor
  * @struct
  *
  * @param {!importer.ControllerEnvironment} environment
  * @param {!importer.MediaScanner} scanner
@@ skipping 88 matching lines @@
   var directory = this.environment_.getCurrentDirectory();
   var url = directory.toURL();
   var scan = this.directoryScans_[url];
   if (!scan) {
     scan = this.scanner_.scan([directory]);
     this.directoryScans_[url] = scan;
   }
 
   return scan;
 };