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

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

Index: ui/file_manager/file_manager/foreground/js/import_controller.js
diff --git a/ui/file_manager/file_manager/foreground/js/import_controller.js b/ui/file_manager/file_manager/foreground/js/import_controller.js
index f28a901630c26cba34a23934987c5da4471fb27a..cb066f0209e34afb7194785a3c6d75fdf312323f 100644
--- a/ui/file_manager/file_manager/foreground/js/import_controller.js
+++ b/ui/file_manager/file_manager/foreground/js/import_controller.js
@@ -7,26 +7,15 @@ 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.
  *
@@ -84,6 +73,9 @@ importer.ImportController =
 
   this.commandWidget_.addImportClickedListener(
       this.execute.bind(this));
+
+  this.commandWidget_.addDestinationClickedListener(
+      this.showDestination.bind(this));
 };
 
 /**
@@ -179,6 +171,14 @@ importer.ImportController.prototype.execute = function() {
 };
 
 /**
+ * Shows the import destination folder.
+ */
+importer.ImportController.prototype.showDestination = function() {
+  console.log('SET THE CURRENT DIRECTORY TO THE DESTINATION');
+  // this.environment_.setCurrentDirectory();
+};
+
+/**
  * Checks the environment and updates UI as needed.
  * @param {importer.ScanResult=} opt_scan If supplied,
  * @private
@@ -192,7 +192,7 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) {
   }
 
   if (!!this.activeImportTask_) {
-    this.updateUi_(importer.ResponseId.ACTIVE_IMPORT);
+    this.updateUi_(importer.ResponseId.IMPORTING);
     return;
   }
 
@@ -243,7 +243,7 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) {
           }
 
         this.updateUi_(
-            importer.ResponseId.EXECUTABLE,
+            importer.ResponseId.READY,  // to import...
             opt_scan);
       }.bind(this));
 };
@@ -251,82 +251,11 @@ importer.ImportController.prototype.checkState_ = function(opt_scan) {
 /**
  * @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);
 };
 
 /**
@@ -566,11 +495,19 @@ importer.CommandWidget = function() {};
  */
 importer.CommandWidget.prototype.addImportClickedListener;
 
-/** @param {!importer.CommandUpdate} update */
-importer.CommandWidget.prototype.update;
+/**
+ * Install a listener that get's called when the user wants to initiate
+ * import.
+ *
+ * @param {function()} listener
+ */
+importer.CommandWidget.prototype.addDestinationClickedListener;
 
-/** @param {!importer.ScanResult} scan */
-importer.CommandWidget.prototype.updateDetails;
+/**
+ * @param {importer.ResponseId} responseId
+ * @param {importer.ScanResult=} opt_scan
+ */
+importer.CommandWidget.prototype.update;
 
 /** Resets details to default. */
 importer.CommandWidget.prototype.resetDetails;
@@ -594,25 +531,32 @@ importer.RuntimeCommandWidget = function() {
 
   /** @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');
 
   /** @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 */
@@ -622,49 +566,197 @@ importer.RuntimeCommandWidget.prototype.addImportClickedListener =
   this.importListener_ = listener;
 };
 
-/** @private */
-importer.RuntimeCommandWidget.prototype.onImportClicked_ = function() {
+/** @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_);
   this.importListener_();
 };
 
+/**
+ * @param {Event} event Click event.
+ * @private
+ */
+importer.RuntimeCommandWidget.prototype.onStatusClicked_ = function(event) {
+  console.assert(!!this.destinationListener_);
+  // 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');
 };
 
 importer.RuntimeCommandWidget.prototype.setDetailsVisible = function(visible) {
   if (visible) {
+    this.detailsPanel_.style.display = 'block';

[mtomasz, 2015/02/12 03:22:01]

nit: Can we use this.detailsPanel_.hidden = false/true?

[Steve McKay, 2015/02/12 23:15:54]

Done.

     this.detailsPanel_.className = '';
   } else {
-    this.detailsPanel_.className = 'offscreen';
+    this.detailsPanel_.className = 'hidden';
+
+    // When hiding outself, we want to wait for the visually

[mtomasz, 2015/02/12 03:22:01]

We can listen to webkitTransitionEnd instead.

[Steve McKay, 2015/02/12 23:15:54]

Oh, thank you for saving me from that. I felt so dirty using a timeout. I should
remember that *everything* in web platform has an event.

+    // pleasing transition to finish before fully hiding
+    // the element. This is necessary because an invisible
+    // element is still on-screen (grapping mouse clicks)
+    // even if the user can't see it. And since CSS transitions
+    // don't cooperate with display: none...our hand was forced.
+    setTimeout(
+        /** @this {importer.RuntimeCommandWidget} */
+        function() {
+          this.detailsPanel_.style.display = 'none';
+        }.bind(this),
+        200);
   }
 };
 
 /** @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.importButton_.disabled = true;
+      this.detailsButton_.disabled = true;
 
-    this.icon_.setAttribute('icon', update.coreIcon);
+      this.importButton_.style.display = 'none';

[mtomasz, 2015/02/12 03:22:01]

nit: hidden = true
here and in other places

[Steve McKay, 2015/02/12 23:15:54]

Done.

+      this.detailsButton_.style.display = 'none';
 
-    this.detailsButton_.disabled = !update.executable;
-    this.detailsButton_.style.display =
-        update.visible ? 'block' : 'none';
-};
+      this.importButton_.setAttribute(
+          'title',
+          '** SHOULD NOT BE VISIBLE **');
+      this.statusContent_.innerHTML =
+          '** SHOULD NOT BE VISIBLE **';
 
-/** @override */
-importer.RuntimeCommandWidget.prototype.updateDetails = function(scan) {
-  this.photoCount_.textContent = scan.getFileEntries().length.toLocaleString();
-  this.spaceRequired_.textContent = util.bytesToString(scan.getTotalBytes());
+      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.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_.style.display = 'block';

[mtomasz, 2015/02/12 03:22:01]

nit: ditto here and in other places

[Steve McKay, 2015/02/12 23:15:54]

Done.

+      this.detailsButton_.style.display = 'block';
+      this.detailsImportButton_.style.display = 'block';
+
+      this.toolbarIcon_.setAttribute('icon', 'autorenew');
+      this.statusIcon_.setAttribute('icon', 'autorenew');
+
+      this.setDetailsVisible(false);
+      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_.style.display = 'block';
+      this.detailsButton_.style.display = 'block';
+      this.detailsImportButton_.style.display = 'block';
+
+      this.toolbarIcon_.setAttribute('icon', 'report-problem');
+      this.statusIcon_.setAttribute('icon', 'report-problem');
+      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 = false;
+      this.detailsButton_.disabled = false;
+      this.detailsImportButton_.disabled = true;
+
+      this.importButton_.style.display = 'block';
+      this.detailsButton_.style.display = 'block';
+      // Hidden for now, since this is also the "done" importing case.
+      this.detailsImportButton_.style.display = 'none';
+
+      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_.style.display = 'block';
+      this.detailsButton_.style.display = 'block';
+      this.detailsImportButton_.style.display = 'block';
+
+      this.toolbarIcon_.setAttribute('icon', 'cloud-upload');
+      this.statusIcon_.setAttribute('icon', 'assignment');
+      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_.style.display = 'block';
+      this.detailsButton_.style.display = 'block';
+      this.detailsImportButton_.style.display = 'none';
+
+      this.toolbarIcon_.setAttribute('icon', 'autorenew');
+      this.statusIcon_.setAttribute('icon', 'autorenew');
+      break;
+
+    default:
+      assertNotReached('Unrecognized response id: ' + responseId);
+  }
 };
 
 /** @override */
 importer.RuntimeCommandWidget.prototype.resetDetails = function() {
-  this.photoCount_.textContent = 0;
-  this.spaceRequired_.textContent = 0;
+  // this.photoCount_.textContent = 0;

[mtomasz, 2015/02/12 03:22:01]

nit: Is this commented out on purpose?

[Steve McKay, 2015/02/12 23:15:54]

Not needed anymore. Gone.

+  // this.spaceRequired_.textContent = 0;
 };
 
 /**