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

 // Copyright (c) 2012 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 for utility functions.
  */
 var filelist = {};
 
 /**
@@ skipping 223 matching lines @@
 /**
  * Inherits from cr.ui.Table.
  */
 FileTable.prototype.__proto__ = cr.ui.Table.prototype;
 
 /**
  * Decorates the element.
  * @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'),

[Steve McKay, 2015/01/14 20:30:16]

Will this be visible to everyone in all contexts? SHould it not be constrained
to just eligible media mounts and only when the feature is enabled?

[Ben Kwa, 2015/01/15 16:36:56]

Partially done - fixed to only show this column when the cloud import feature is
enabled.  For showing/hiding the column only for eligible media mounts, that's
considerably more complex, so if that's okay I'd like to handle it as a
follow-on CL.

+                                20, true),
     new cr.ui.table.TableColumn('type', str('TYPE_COLUMN_LABEL'),
                                 fullPage ? 110 : 110),
     new cr.ui.table.TableColumn('modificationTime',
                                 str('DATE_COLUMN_LABEL'),
                                 fullPage ? 150 : 210)
   ];
 
   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);
 
   self.columnModel = columnModel;
   self.setDateTimeFormat(true);
   self.setRenderFunction(self.renderTableRow_.bind(self,
       self.getRenderFunction()));
 
   self.scrollBar_ = new MainPanelScrollBar();
   self.scrollBar_.initialize(self, self.list);
@@ skipping 229 matching lines @@
     } else if (externalProps.hosted) {
       div.textContent = '--';
       return;
     }
   }
 
   div.textContent = util.bytesToString(filesystemProps.size);
 };
 
 /**
+ * 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 status-icon';
+  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) {
+  this.getImportStatus_(entry, importer.Destination.GOOGLE_DRIVE).then(
+      /** @param {string} status */
+      function(status) {
+        div.setAttribute('file-status-icon', status);
+      });
+};
+
+/**
  * Render the Type 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.renderType_ = function(entry, columnId, table) {
   var div = /** @type {!HTMLDivElement} */
@@ skipping 65 matching lines @@
  * Updates the file metadata in the table item.
  *
  * @param {Element} item Table item.
  * @param {Entry} entry File entry.
  */
 FileTable.prototype.updateFileMetadata = function(item, entry) {
   this.updateDate_(
       /** @type {!HTMLDivElement} */ (item.querySelector('.date')), entry);
   this.updateSize_(
       /** @type {!HTMLDivElement} */ (item.querySelector('.size')), entry);
+  this.updateStatus_(
+      /** @type {!HTMLDivElement} */ (item.querySelector('.status')), entry);
 };
 
 /**
  * Updates list items 'in place' on metadata change.
  * @param {string} type Type of metadata change.
  * @param {Array.<Entry>} entries Entries to update.
  */
 FileTable.prototype.updateListItemsMetadata = function(type, entries) {
   var urls = util.entriesToURLs(entries);
   var forEachCell = function(selector, callback) {
@@ skipping 12 matching lines @@
     });
     forEachCell('.table-row-cell > .size', function(item, entry, unused) {
       this.updateSize_(item, entry);
     });
   } else if (type === 'external') {
     // The cell name does not matter as the entire list item is needed.
     forEachCell('.table-row-cell > .date', function(item, entry, listItem) {
       var props = this.metadataCache_.getCached(entry, 'external');
       filelist.updateListItemExternalProps(listItem, props);
     });
+  } else if (type === 'import-history') {
+    forEachCell('.table-row-cell > .status', function(item, entry, unused) {
+      this.updateStatus_(item, entry);
+    });
   }
 };
 
 /**
  * Renders table row.
  * @param {function(Entry, cr.ui.Table)} baseRenderFunction Base renderer.
  * @param {Entry} entry Corresponding entry.
  * @return {HTMLLIElement} Created element.
  * @private
  */
@@ skipping 129 matching lines @@
     return;
 
   if (externalProps.customIconUrl)
     iconDiv.style.backgroundImage = 'url(' + externalProps.customIconUrl + ')';
   else
     iconDiv.style.backgroundImage = '';  // Back to the default image.
 
   if (li.classList.contains('directory'))
     iconDiv.classList.toggle('shared', externalProps.shared);
 };