Files.app: Add a new column in table view to reflect cloud import status.

ui/file_manager/file_manager/foreground/js/ui/file_table.js

Index: ui/file_manager/file_manager/foreground/js/ui/file_table.js
diff --git a/ui/file_manager/file_manager/foreground/js/ui/file_table.js b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
index da69b3ceddc0ca12bbb167b0f2e8e82892770705..415b06c166c154deb81a60d5cc743f7a5819a533 100644
--- a/ui/file_manager/file_manager/foreground/js/ui/file_table.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/file_table.js
@@ -241,20 +241,25 @@ FileTable.prototype.__proto__ = cr.ui.Table.prototype;
  * @param {!Element} self Table to decorate.
  * @param {MetadataCache} metadataCache To retrieve metadata.
  * @param {VolumeManagerWrapper} volumeManager To retrieve volume info.
+ * @param {!importer.HistoryLoader} historyLoader
  * @param {boolean} fullPage True if it's full page File Manager,
  *                           False if a file open/save dialog.
  */
-FileTable.decorate = function(self, metadataCache, volumeManager, fullPage) {
+FileTable.decorate =
+    function(self, metadataCache, volumeManager, historyLoader, fullPage) {
   cr.ui.Table.decorate(self);
   self.__proto__ = FileTable.prototype;
   self.metadataCache_ = metadataCache;
   self.volumeManager_ = volumeManager;
+  self.historyLoader_ = historyLoader;
 
   var columns = [
     new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'),
                                 fullPage ? 386 : 324),
     new cr.ui.table.TableColumn('size', str('SIZE_COLUMN_LABEL'),
                                 110, true),
+    new cr.ui.table.TableColumn('status', str('STATUS_COLUMN_LABEL'),
+                                20, true),
     new cr.ui.table.TableColumn('type', str('TYPE_COLUMN_LABEL'),
                                 fullPage ? 110 : 110),
     new cr.ui.table.TableColumn('modificationTime',
@@ -265,9 +270,10 @@ FileTable.decorate = function(self, metadataCache, volumeManager, fullPage) {
   columns[0].renderFunction = self.renderName_.bind(self);
   columns[1].renderFunction = self.renderSize_.bind(self);
   columns[1].defaultOrder = 'desc';
-  columns[2].renderFunction = self.renderType_.bind(self);
-  columns[3].renderFunction = self.renderDate_.bind(self);
-  columns[3].defaultOrder = 'desc';
+  columns[2].renderFunction = self.renderStatus_.bind(self);
+  columns[3].renderFunction = self.renderType_.bind(self);
+  columns[4].renderFunction = self.renderDate_.bind(self);
+  columns[4].defaultOrder = 'desc';
 
   var columnModel = new FileTableColumnModel(columns);
 
@@ -517,6 +523,84 @@ FileTable.prototype.updateSize_ = function(div, entry) {
 };
 
 /**
+ * Render the Status column of the detail table.
+ *
+ * @param {Entry} entry The Entry object to render.
+ * @param {string} columnId The id of the column to be rendered.
+ * @param {cr.ui.Table} table The table doing the rendering.
+ * @return {!HTMLDivElement} Created element.
+ * @private
+ */
+FileTable.prototype.renderStatus_ = function(entry, columnId, table) {
+  var div = /** @type {!HTMLDivElement} */ (
+      this.ownerDocument.createElement('div'));
+  div.className = 'status';
+  if (entry) {
+    this.updateStatus_(div, entry);
+  }
+
+  return div;
+};
+
+/**
+ * Returns the status of the entry w.r.t. the given import destination.
+ * @param {!Entry} entry
+ * @param {!importer.Destination} destination
+ * @return {!Promise<string>} The import status - will be 'imported', 'copied',
+ *     or 'unknown'.
+ */
+FileTable.prototype.getImportStatus_ = function(entry, destination) {
+  if (!entry.isFile) {
+    // Our import history doesn't deal with directories.
+    // TODO(kenobi): May need to revisit this if the above assumption changes.
+    return Promise.resolve('unknown');
+  }
+  // For the compiler.
+  var fileEntry = /** @type {!FileEntry} */ (entry);
+
+  return this.historyLoader_.getHistory()
+      .then(
+          /** @param {!importer.ImportHistory} history */
+          function(history) {
+            return Promise.all([
+                history.wasImported(fileEntry, destination),
+                history.wasCopied(fileEntry, destination)
+            ]);
+          })
+      .then(
+          /** @param {!Array<boolean>} status */
+          function(status) {
+            if (status[0]) {
+              return 'imported';
+            } else if (status[1]) {
+              return 'copied';
+            } else {
+              return 'unknown';
+            }
+          });
+};
+
+/**
+ * Render the status icon of the detail table.
+ *
+ * @param {!HTMLDivElement} div
+ * @param {!Entry} entry The Entry object to render.
+ * @private
+ */
+FileTable.prototype.updateStatus_ = function(div, entry) {
+  var icon = /** @type {!HTMLDivElement} */
+      (this.ownerDocument.createElement('div'));
+  icon.className = 'status-icon';
+  div.appendChild(icon);
+
+  this.getImportStatus_(entry, importer.Destination.GOOGLE_DRIVE).then(
+      /** @param {string} status */
+      function(status) {
+        icon.setAttribute('file-status-icon', status);
+      });
+};
+
+/**
  * Render the Type column of the detail table.
  *
  * @param {Entry} entry The Entry object to render.
@@ -602,6 +686,8 @@ FileTable.prototype.updateFileMetadata = function(item, entry) {
       /** @type {!HTMLDivElement} */ (item.querySelector('.date')), entry);
   this.updateSize_(
       /** @type {!HTMLDivElement} */ (item.querySelector('.size')), entry);
+  this.updateStatus_(
+      /** @type {!HTMLDivElement} */ (item.querySelector('.status')), entry);
 };
 
 /**
@@ -634,6 +720,10 @@ FileTable.prototype.updateListItemsMetadata = function(type, entries) {
       var props = this.metadataCache_.getCached(entry, 'external');
       filelist.updateListItemExternalProps(listItem, props);
     });
+  } else if (type === 'import-history') {

[mtomasz, 2015/01/14 00:34:34]

Is it method ever called with this type?

[Ben Kwa, 2015/01/14 16:19:34]

Yes, code was added to the FileManager to call this method with this new type of
update, when an import history change is detected.

+    forEachCell('.table-row-cell > .status', function(item, entry, unused) {
+      this.updateStatus_(item, entry);
+    });
   }
 };