Dragging files (not dropping yet).

chrome/browser/resources/file_manager/js/file_manager.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.
 
 // Setting the src of an img to an empty string can crash the browser, so we
 // use an empty 1x1 gif instead.
 
 /**
  * FileManager constructor.
  *
@@ skipping 18 matching lines @@
   this.selection = null;
 
   this.butterTimer_ = null;
   this.currentButter_ = null;
   this.butterLastShowTime_ = 0;
 
   this.watchedDirectoryUrl_ = null;
 
   this.commands_ = {};
 
+  this.thumbnailUrlCache_ = {};
+
   this.document_ = dialogDom.ownerDocument;
   this.dialogType_ = this.params_.type || FileManager.DialogType.FULL_PAGE;
 
   metrics.recordEnum('Create', this.dialogType_,
       [FileManager.DialogType.SELECT_FOLDER,
       FileManager.DialogType.SELECT_SAVEAS_FILE,
       FileManager.DialogType.SELECT_OPEN_FILE,
       FileManager.DialogType.SELECT_OPEN_MULTI_FILE,
       FileManager.DialogType.FULL_PAGE]);
 
@@ skipping 592 matching lines @@
 
     this.downloadsWarning_ =
         this.dialogDom_.querySelector('.downloads-warning');
     var html = util.htmlUnescape(str('DOWNLOADS_DIRECTORY_WARNING'));
     this.downloadsWarning_.lastElementChild.innerHTML = html;
     var link = this.downloadsWarning_.querySelector('a');
     link.addEventListener('click', this.onDownloadsWarningClick_.bind(this));
 
     this.document_.addEventListener('keydown', this.onKeyDown_.bind(this));
     this.document_.addEventListener('copy',
-                                    this.copySelectionToClipboard_.bind(this));
+                                    this.onCopy_.bind(this));
     // Disable the default browser context menu.
     this.document_.addEventListener('contextmenu',
                                     function (e) { e.preventDefault() });
 
     // We need to store a reference to the function returned by bind. Later, in
     // canPaste function, we need to temporarily remove this event handler and
     // use another 'paste' event handler to check the state of system clipboard.
-    this.pasteFromClipboardBind_ = this.pasteFromClipboard_.bind(this);
-    this.document_.addEventListener('paste', this.pasteFromClipboardBind_);
+    this.onPasteBound_ = this.onPaste_.bind(this);
+    this.document_.addEventListener('paste', this.onPasteBound_);
 
     // In pasteFromClipboard function, we need to reset system clipboard after
     // 'cut' and 'paste' command sequence. The clipboardData.clearData doesn't
     // seem to work. We reset the system clipboard in another 'cut' event
     // handler as a workaround. This reference is used to temporarily remove
     // 'cut' event handler as well.
-    this.cutFromClipboardBind_ = this.cutSelectionToClipboard_.bind(this);
-    this.document_.addEventListener('cut', this.cutFromClipboardBind_);
+    this.onCutBound_ = this.onCut_.bind(this);
+    this.document_.addEventListener('cut', this.onCutBound_);
 
     this.renameInput_ = this.document_.createElement('input');
     this.renameInput_.className = 'rename';
 
     this.renameInput_.addEventListener(
         'keydown', this.onRenameInputKeyDown_.bind(this));
     this.renameInput_.addEventListener(
         'blur', this.onRenameInputBlur_.bind(this));
 
     this.filenameInput_.addEventListener(
@@ skipping 428 matching lines @@
     var clipboardCanPaste = function(event) {
       event.preventDefault();
       // Here we need to use lower case as clipboardData.types return lower
       // case DomStringList.
       if (event.clipboardData &&
           event.clipboardData.types &&
           event.clipboardData.types.indexOf('fs/iscut') != -1)
          canPaste = true;
     };
 
-    this.document_.removeEventListener('paste', this.pasteFromClipboardBind_);
+    this.document_.removeEventListener('paste', this.onPasteBound_);
     this.document_.addEventListener('paste', clipboardCanPaste);
     this.document_.execCommand('paste');
     this.document_.removeEventListener('paste', clipboardCanPaste);
-    this.document_.addEventListener('paste', this.pasteFromClipboardBind_);
+    this.document_.addEventListener('paste', this.onPasteBound_);
     return canPaste && !readonly;
   };
 
   /**
    * @param {string} commandId Command identifier.
    * @return {boolean} True if the command can be executed for current
    *                   selection.
    */
   FileManager.prototype.canExecute_ = function(commandId) {
     var readonly = this.directoryModel_.readonly;
@@ skipping 113 matching lines @@
    */
   FileManager.prototype.initGrid_ = function() {
     var self = this;
     this.grid_.itemConstructor = GridItem.bind(null, this);
 
     this.grid_.addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
     cr.ui.contextMenuHandler.setContextMenu(this.grid_, this.fileContextMenu_);
     this.grid_.addEventListener('mousedown',
                                 this.onGridOrTableMouseDown_.bind(this));
+    this.setupDragAndDrop_(this.grid_);
   };
 
   /**
    * Initialize the file list table.
    */
   FileManager.prototype.initTable_ = function() {
     var columns = [
         new cr.ui.table.TableColumn('name', str('NAME_COLUMN_LABEL'),
                                     64),
         new cr.ui.table.TableColumn('cachedSize_',
@@ skipping 24 matching lines @@
 
     // Don't pay attention to double clicks on the table header.
     this.table_.querySelector('.list').addEventListener(
         'dblclick', this.onDetailDoubleClick_.bind(this));
 
     cr.ui.contextMenuHandler.setContextMenu(this.table_.querySelector('.list'),
         this.fileContextMenu_);
 
     this.table_.addEventListener('mousedown',
                                  this.onGridOrTableMouseDown_.bind(this));
+    this.setupDragAndDrop_(this.table_.list);
+  };
+
+  FileManager.prototype.setupDragAndDrop_ = function(list) {
+    list.addEventListener('dragstart', this.onDragStart_.bind(this));
+  };
+
+  FileManager.prototype.onDragStart_ = function(event) {
+    var dt = event.dataTransfer;
+    var container = this.document_.querySelector('#drag-image-container');
+    container.textContent = '';
+    for (var i = 0; i < this.selection.dragNodes.length; i++) {
+      var listItem = this.selection.dragNodes[i];
+      listItem.selected = true;
+      container.appendChild(listItem);
+    }
+
+    this.cutOrCopyToClipboard_(dt, false);
+
+    dt.setDragImage(container, 0, 0);
+    dt.effectAllowed = 'copyMove';
   };
 
   FileManager.prototype.initButter_ = function() {
     var self = this;
     var progress = this.copyManager_.getProgress();
 
     var options = {progress: progress.percentage, actions:{}};
     options.actions[str('CANCEL_LABEL')] = function cancelPaste() {
       self.copyManager_.requestCancel();
     };
@@ skipping 413 matching lines @@
    *                                the image has been loaded before inserting
    *                                it into the DOM.
    * @return {HTMLDivElement}
    */
   FileManager.prototype.renderThumbnailBox_ = function(entry, fill,
                                                        opt_imageLoadCallback) {
     var box = this.document_.createElement('div');
     box.className = 'img-container';
     var img = this.document_.createElement('img');
     var self = this;
-    this.getThumbnailURL(entry, function(iconType, url, transform) {
+
+    function onThumbnailURL(iconType, url, transform) {
+      self.thumbnailUrlCache_[entry.fullPath] = {
+        iconType: iconType,
+        url: url,
+        transform: transform
+      };
       img.onload = function() {
         self.centerImage_(img.style, img.width, img.height, fill);
         if (opt_imageLoadCallback)
           opt_imageLoadCallback(img, transform);
         box.appendChild(img);
       };
       img.src = url;
       self.applyImageTransformation_(box, transform);
-    });
+    }
+
+   var cached = this.thumbnailUrlCache_[entry.fullPath];
+    if (cached)
+      onThumbnailURL(cached.iconType, cached.url, cached.transform);
+    else
+      this.getThumbnailURL(entry, onThumbnailURL);
+
     return box;
   };
 
   FileManager.prototype.decorateThumbnail_ = function(li, entry) {
     li.className = 'thumbnail-item';
 
     if (this.showCheckboxes_)
       li.appendChild(this.renderCheckbox_(entry));
 
     li.appendChild(this.renderThumbnailBox_(entry, false));
@@ skipping 317 matching lines @@
    */
   FileManager.prototype.summarizeSelection_ = function() {
     var selection = this.selection = {
       entries: [],
       urls: [],
       totalCount: 0,
       fileCount: 0,
       directoryCount: 0,
       bytes: 0,
       iconType: null,
-      indexes: this.currentList_.selectionModel.selectedIndexes
+      indexes: this.currentList_.selectionModel.selectedIndexes,
+      files: [],
+      dragNodes: []
     };
 
     if (!selection.indexes.length) {
       this.updateCommonActionButtons_();
       this.updatePreviewPanelVisibility_();
       cr.dispatchSimpleEvent(this, 'selection-summarized');
       return;
     }
 
     this.previewSummary_.textContent = str('COMPUTING_SELECTION');
@@ skipping 32 matching lines @@
         var thumbnail = this.renderThumbnailBox_(entry, true, imageLoadCalback);
         box.appendChild(thumbnail);
         box.style.zIndex = MAX_PREVIEW_THUMBAIL_COUNT + 1 - i;
         box.addEventListener('click',
             this.dispatchDefaultTask_.bind(this, selection));
 
         this.previewThumbnails_.appendChild(box);
         thumbnailCount++;
       }
 
+      // Items to drag are created in advance. Images must be loaded
+      // at the time the 'dragstart' event comes. Otherwise draggable
+      // image will be rendered without IMG tags.
+      if (selection.dragNodes.length < MAX_PREVIEW_THUMBAIL_COUNT)
+        selection.dragNodes.push(new GridItem(this, entry));
+
       selection.totalCount++;
 
       if (entry.isFile) {
         selection.fileCount += 1;
         if (!('cachedSize_' in entry)) {
           // Any file that hasn't been rendered may be missing its cachedSize_
           // property.  For example, visit a large file list, and press ctrl-a
           // to select all.  In this case, we need to asynchronously get the
           // sizes for these files before telling the world the selection has
           // been summarized.  See the 'computeNextFile' logic below.
           pendingFiles.push(entry);
           continue;
         } else {
           selection.bytes += entry.cachedSize_;
         }
+        // File object must be prepeared in advance for clipboard operations
+        // (copy, paste and drag). Clipboard object closes for write after
+        // returning control from that handlers so they may not have
+        // asynchronous operations.
+        // TODO(serya): Put file objects into the clipboard.
+        if (!this.isOnGData()) {
+          entry.file(function(f) {
+            selection.files.push(f);
+          });
+        }
       } else {
         selection.directoryCount += 1;
       }
     }
 
     // Now this.selection is complete. Update buttons.
     this.updateCommonActionButtons_();
     this.updatePreviewPanelVisibility_();
 
     var self = this;
@@ skipping 897 matching lines @@
           var listItem = self.currentList_.getListItemByIndex(selectedIndex);
           if (listItem)
             listItem.classList.remove('blink');
         }
     }, 100);
   };
 
   /**
    * Write the current selection to system clipboard.
    *
-   * @param {Event} event Cut or Copy event.
+   * @param {Clipboard} clipboard Clipboard from the event.
    * @param {boolean} isCut True if the current command is cut.
    */
-  FileManager.prototype.cutOrCopyToClipboard_ = function(event, isCut) {
-      event.preventDefault();
+  FileManager.prototype.cutOrCopyToClipboard_ = function(clipboard, isCut) {
+    var directories  = '';
+    var files = '';
+    for(var i = 0, entry; i < this.selection.entries.length; i++) {
+      entry = this.selection.entries[i];
+      if (entry.isDirectory)
+        directories += entry.fullPath + '\n';
+      else
+        files += entry.fullPath + '\n';
+    }
 
-      var directories  = '';
-      var files = '';
-      for(var i = 0, entry; i < this.selection.entries.length; i++) {
-        entry = this.selection.entries[i];
-        if (entry.isDirectory)
-          directories += entry.fullPath + '\n';
-        else
-          files += entry.fullPath + '\n';
-      }
-
-      event.clipboardData.setData('fs/isCut', isCut.toString());
-      event.clipboardData.setData('fs/isOnGData',
-                                  this.isOnGData().toString());
-      event.clipboardData.setData('fs/sourceDir',
+    clipboard.setData('fs/isCut', isCut.toString());
+    clipboard.setData('fs/sourceDir',
                                   this.directoryModel_.currentEntry.fullPath);
-      event.clipboardData.setData('fs/directories', directories);
-      event.clipboardData.setData('fs/files', files);
+    clipboard.setData('fs/sourceOnGData', this.isOnGData());
+    clipboard.setData('fs/directories', directories);
+    clipboard.setData('fs/files', files);
   }
 
-  FileManager.prototype.copySelectionToClipboard_ = function(event) {
-      if (!this.selection || this.selection.totalCount == 0)
-        return;
+  FileManager.prototype.onCopy_ = function(event) {
+    if (!this.selection || this.selection.totalCount == 0)
+      return;
 
-      this.cutOrCopyToClipboard_(event, false);
+    event.preventDefault();
+    this.cutOrCopyToClipboard_(event.clipboardData, false);
 
-      this.blinkSelection();
+    this.blinkSelection();
   };
 
-  FileManager.prototype.cutSelectionToClipboard_ = function(event) {
+  FileManager.prototype.onCut_ = function(event) {
     if (!this.selection || this.selection.totalCount == 0 ||
         this.commands_['cut'].disabled)
       return;
 
-    this.cutOrCopyToClipboard_(event, true);
+    event.preventDefault();
+    this.cutOrCopyToClipboard_(event.clipboardData, true);
 
     this.blinkSelection();
   };
 
+  FileManager.prototype.onPaste_ = function(event) {
+    event.preventDefault();
+    this.pasteFromClipboard_(event.clipboardData);
+  };
+
   /**
    * Queue up a file copy operation based on the current system clipboard.
    */
-  FileManager.prototype.pasteFromClipboard_ = function(event) {
-    event.preventDefault();
-
+  FileManager.prototype.pasteFromClipboard_ = function(clipboard) {
     if (!event.clipboardData.getData('fs/isCut'))
       return;
 
-    var clipboard = {
-      isCut: event.clipboardData.getData('fs/isCut'),
-      isOnGData: event.clipboardData.getData('fs/isOnGData'),
-      sourceDir: event.clipboardData.getData('fs/sourceDir'),
-      directories: event.clipboardData.getData('fs/directories'),
-      files: event.clipboardData.getData('fs/files')
+    var operationInfo = {
+      isCut: clipboard.getData('fs/isCut'),
+      sourceDir: clipboard.getData('fs/sourceDir'),
+      sourceOnGData: clipboard.getData('fs/sourceOnGData'),
+      directories: clipboard.getData('fs/directories'),
+      files: clipboard.getData('fs/files')
     };
 
-    this.copyManager_.paste(clipboard,
+    // If both source and target are on GData, FileCopyManager uses
+    // FileEntry.copyTo() / FileEntry.moveTo() to copy / move files.
+    var sourceAndTargetOnGData = operationInfo.sourceOnGData &&
+                                 this.isOnGData();
+    this.copyManager_.paste(operationInfo,
                             this.directoryModel_.currentEntry,
                             this.isOnGData(),
                             this.filesystem_.root);
 
     var clearClipboard = function (event) {
       event.preventDefault();
       event.clipboardData.setData('fs/clear', '');
     }
 
     // On cut, we clear the clipboard after the file is pasted/moved so we don't
     // try to move/delete the original file again.
-    if (clipboard.isCut == 'true') {
-      this.document_.removeEventListener('cut', this.cutFromClipboardBind_);
+    if (operationInfo.isCut == 'true') {
+      this.document_.removeEventListener('cut', this.onCutBound_);
       this.document_.addEventListener('cut', clearClipboard);
       this.document_.execCommand('cut');
       this.document_.removeEventListener('cut', clearClipboard);
-      this.document_.addEventListener('cut', this.cutFromClipboardBind_);
+      this.document_.addEventListener('cut', this.onCutBound_);
     }
   };
 
   /**
    * Update the selection summary UI when the selection summarization completes.
    */
   FileManager.prototype.onSelectionSummarized_ = function() {
     var selection = this.selection;
     var bytes = util.bytesToSi(selection.bytes);
     var text = '';
@@ skipping 105 matching lines @@
       if (this.selection &&
           this.selection.totalCount == 1 &&
           this.selection.entries[0].isFile &&
           this.filenameInput_.value != this.selection.entries[0].name) {
         this.filenameInput_.value = this.selection.entries[0].name;
       }
     }
 
     this.updateOkButton_();
 
-    var self = this;
-    setTimeout(function() { self.onSelectionChangeComplete_(event) }, 0);
+    var newThumbnailUrlCache = {};
+    if (this.selection) {
+      const entries = this.selection.entries;
+      for (var i = 0; i < entries.length; i++) {
+        var path = entries[i].fullPath;
+        if (path in this.thumbnailUrlCache_)
+          newThumbnailUrlCache[path] = this.thumbnailUrlCache_[path];
+      }
+    }
+    this.thumbnailUrlCache_ = newThumbnailUrlCache;
+
+    setTimeout(this.onSelectionChangeComplete_.bind(this, event), 0);
   };
 
   /**
    * Handle selection change related tasks that won't run properly during
    * the actual selection change event.
    */
   FileManager.prototype.onSelectionChangeComplete_ = function(event) {
     // Inform tests it's OK to click buttons now.
     chrome.test.sendMessage('selection-change-complete');
 
@@ skipping 232 matching lines @@
       if (metadata && dm.rootEntry == rootEntry)
         dm.readonly = metadata.isReadOnly;
     });
   };
 
   FileManager.prototype.findListItemForEvent_ = function(event) {
     return this.findListItemForNode_(event.srcElement);
   };
 
   FileManager.prototype.findListItemForNode_ = function(node) {
-    var list = this.currentList_;
-    // Assume list items are direct children of the list.
-    if (node == list)
-      return null;
-    while (node) {
-      var parent = node.parentNode;
-      if (parent == list && node instanceof cr.ui.ListItem)
-        return node;
-      node = parent;
-    }
-    return null;
+    var item = this.currentList_.getListItemAncestor(node);
+    // TODO(serya): list should check that.
+    return item && this.currentList_.isItem(item) ? item : null;
   };
 
   FileManager.prototype.onGridOrTableMouseDown_ = function(event) {
     var item = this.findListItemForEvent_(event);
     if (!item)
       return;
 
     if (this.allowRenameClick_(event, item)) {
       event.preventDefault();
       this.directoryModel_.fileListSelection.selectedIndex = item.listIndex;
@@ skipping 736 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();