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 37 matching lines @@
       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 75 matching lines @@
       scan,
       importer.Destination.GOOGLE_DRIVE);
 
   this.activeImportTask_ = 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');
+  // this.environment_.setCurrentDirectory();
+};
+
+/**
  * 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);
+    this.updateUi_(importer.ResponseId.IMPORTING);
     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');
 
   /** @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() {
+/** @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;
 };
 
 /**
  * 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;
 };