Use preloaded thumbnails for consistent drag&drop experience.

Sometimes, drag&drop shadows will show thumbnails, and if those haven't
been loaded yet, it will show filenames. However, the thumbnails are
might have been preloaded by other parts of the filesapp, so use these
if possible.
Still keep the old logic as a fall-back.

Bug: 755792
Tested: manually
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I6a716984bd8854655e4bada2851ef69ab0f7a8b4
Reviewed-on: https://chromium-review.googlesource.com/654499
Commit-Queue: Marianne Thieffry <mariannet@google.com>
Reviewed-by: Naoki Fukino <fukino@chromium.org>
Reviewed-by: Keigo Oka <oka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#501564}

ui/file_manager/file_manager/foreground/js/file_transfer_controller.js

@@ -919,8 +919,8 @@ FileTransferController.prototype.renderThumbnail_ = function() {
     return container;
   }
 
-  // Option 2. Thumbnail image available, then render it without
-  // a label.
+  // Option 2. Thumbnail image available from preloadedThumbnailImagePromise_,
+  // then render it without a label.
   if (this.preloadedThumbnailImagePromise_ &&
       this.preloadedThumbnailImagePromise_.value) {
     var thumbnailImage = this.preloadedThumbnailImagePromise_.value;
@@ -951,7 +951,24 @@ FileTransferController.prototype.renderThumbnail_ = function() {
     return container;
   }
 
-  // Option 3. Thumbnail not available. Render an icon and a label.
+  // Option 3. Thumbnail image available from file grid / list, render it
+  // without a label.
+  // Because of Option 1, there is only exactly one item selected.
+  var index = this.selectionHandler_.selection.indexes[0];
+  // We only need one of the thumbnails.
+  var thumbnail = this.listContainer_.currentView.getThumbnail(index);
+  if (thumbnail) {
+    var canvas = document.createElement('canvas');
+    canvas.width = FileTransferController.DRAG_THUMBNAIL_SIZE_;
+    canvas.height = FileTransferController.DRAG_THUMBNAIL_SIZE_;
+    canvas.style.backgroundImage = thumbnail.style.backgroundImage;
+    canvas.style.backgroundSize = 'cover';
+    canvas.classList.add('for-image');
+    contents.appendChild(canvas);
+    return container;
+  }
+
+  // Option 4. Thumbnail not available. Render an icon and a label.
   var entry = this.selectionHandler_.selection.entries[0];
   var icon = this.document_.createElement('div');
   icon.className = 'detail-icon';

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -135,6 +135,25 @@ FileGrid.prototype.setListThumbnailLoader = function(listThumbnailLoader) {
   }
 };
 
+/**
+ * Returns the element containing the thumbnail of a certain list item as
+ * background image.
+ * @param {number} index The index of the item containing the desired thumbnail.
+ * @return {?Element} The element containing the thumbnail, or null, if an error
+ *     occurred.
+ */
+FileGrid.prototype.getThumbnail = function(index) {
+  var listItem = this.getListItemByIndex(index);
+  if (!listItem) {
+    return null;
+  }
+  var container = listItem.querySelector('.img-container');
+  if (!container) {
+    return null;
+  }
+  return container.querySelector('.thumbnail');
+};
+
 /**
  * Handles thumbnail loaded event.
  * @param {!Event} event An event.

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

@@ -521,6 +521,25 @@ FileTable.prototype.setListThumbnailLoader = function(listThumbnailLoader) {
   }
 };
 
+/**
+ * Returns the element containing the thumbnail of a certain list item as
+ * background image.
+ * @param {number} index The index of the item containing the desired thumbnail.
+ * @return {?Element} The element containing the thumbnail, or null, if an error
+ *     occurred.
+ */
+FileTable.prototype.getThumbnail = function(index) {
+  var listItem = this.getListItemByIndex(index);
+  if (!listItem) {
+    return null;
+  }
+  var container = listItem.querySelector('.detail-thumbnail');
+  if (!container) {
+    return null;
+  }
+  return container.querySelector('.thumbnail');
+};
+
 /**
  * Handles thumbnail loaded event.
  * @param {!Event} event An event.