Refactoring copy/paste code.

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 631 matching lines @@
     cr.ui.Grid.decorate(this.grid_);
 
     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.onCopy_.bind(this));
+    this.document_.addEventListener('copy', this.onCopy_.bind(this));
+    this.document_.addEventListener('beforecopy',
+                                    this.onBeforeCopy_.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.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.onCutBound_ = this.onCut_.bind(this);
-    this.document_.addEventListener('cut', this.onCutBound_);
+    this.document_.addEventListener('paste', this.onPaste_.bind(this));
+    // HACK(serya): 'paste'/'beforepaste' must be used.
+    // But 'beforepaste' is apparently broken.
+    var iframe = this.document_.querySelector('#command-dispatcher');
+    this.commandProbbingDoc_ = iframe.contentDocument;
+    this.commandProbbingDoc_.addEventListener('paste',
+        this.onBeforePaste_.bind(this));
+    this.document_.addEventListener('cut', this.onCut_.bind(this));
+    this.document_.addEventListener('beforecut', this.onBeforeCut_.bind(this));
 
     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(
         'keyup', this.onFilenameInputKeyUp_.bind(this));
     this.filenameInput_.addEventListener(
         'focus', this.onFilenameInputFocus_.bind(this));
 
     var listContainer = this.dialogDom_.querySelector('.list-container');
     listContainer.addEventListener('keydown', this.onListKeyDown_.bind(this));
     listContainer.addEventListener('keypress', this.onListKeyPress_.bind(this));
     this.okButton_.addEventListener('click', this.onOk_.bind(this));
     this.cancelButton_.addEventListener('click', this.onCancel_.bind(this));
 
     this.dialogDom_.querySelector('div.open-sidebar').addEventListener(
         'click', this.onToggleSidebar_.bind(this));
     this.dialogDom_.querySelector('div.open-sidebar').addEventListener(
         'keypress', this.onToggleSidebarPress_.bind(this));
     this.dialogDom_.querySelector('div.close-sidebar').addEventListener(
         'click', this.onToggleSidebar_.bind(this));
     this.dialogDom_.querySelector('div.close-sidebar').addEventListener(
         'keypress', this.onToggleSidebarPress_.bind(this));
     this.dialogContainer_ = this.dialogDom_.querySelector('.dialog-container');
-
     this.dialogDom_.querySelector('button.detail-view').addEventListener(
         'click', this.onDetailViewButtonClick_.bind(this));
     this.dialogDom_.querySelector('button.thumbnail-view').addEventListener(
         'click', this.onThumbnailViewButtonClick_.bind(this));
 
     cr.ui.ComboButton.decorate(this.taskItems_);
     this.taskItems_.addEventListener('select',
         this.onTaskItemClicked_.bind(this));
 
     this.dialogDom_.ownerDocument.defaultView.addEventListener(
@@ skipping 375 matching lines @@
   };
 
   /**
    * Force the canExecute events to be dispatched.
    */
   FileManager.prototype.updateCommands_ = function() {
     for (var key in this.commands_)
       this.commands_[key].disabled = !this.canExecute_(key);
   };
 
-  FileManager.prototype.canPaste_ = function(readonly) {
-    /**
-     * Fire a paste event and check the "paste" command can be executed.
-     *
-     * We need to peek the content in system clipboard. Only cut/copy/paste
-     * events contain clipboard data. So we need to fire a paste event and then
-     * peek the system clipboard immediately.
-     *
-     * @return {boolean} True if "paste" command can be executed for current
-     *                   directory.
-     */
-
-    var canPaste = false;
-    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.onPasteBound_);
-    this.document_.addEventListener('paste', clipboardCanPaste);
-    this.document_.execCommand('paste');
-    this.document_.removeEventListener('paste', clipboardCanPaste);
-    this.document_.addEventListener('paste', this.onPasteBound_);
-    return canPaste && !readonly;
+  FileManager.prototype.canPaste_ = function(clipboard) {
+    return clipboard &&
+           clipboard.types &&
+           clipboard.types.indexOf('fs/iscut') != -1;

[dgozman, 2012/03/28 08:28:14]

This method is not used.

[SeRya, 2012/03/28 08:43:07]

Done.

   };
 
   /**
    * @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;
     var path = this.directoryModel_.currentEntry.fullPath;
     switch (commandId) {
+      case 'copy':
       case 'cut':
-        return !readonly &&
-               this.selection &&
-               this.selection.totalCount > 0;
-
-      case 'copy':
-        return path != '/' &&
-               this.selection &&
-               this.selection.totalCount > 0;
+        return this.document_.queryCommandEnabled(commandId);
 
       case 'paste':
-        return this.canPaste_(readonly);
+        // HACK(serya): return this.document_.queryCommandEnabled('paste')
+        // should be used.
+        this.commandProbbingDoc_.execCommand('paste');
+        return !this.commands_.paste.disabled;
 
       case 'rename':
         return (// Initialized to the point where we have a current directory
                 !readonly &&
                 // Rename not in progress.
                 !this.isRenamingInProgress() &&
                 // Only one file selected.
                 this.selection &&
                 this.selection.totalCount == 1);
 
@@ skipping 145 matching lines @@
     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));
+    list.addEventListener('dragend', this.onDragEnd_.bind(this));
+    list.addEventListener('dragover', this.onDragOver_.bind(this));
+    list.addEventListener('drop', this.onDrop_.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 length = this.selection.dragNodes.length;
+    for (var i = 0; i < length; i++) {
       var listItem = this.selection.dragNodes[i];
       listItem.selected = true;
+      listItem.style.zIndex = length - i;
       container.appendChild(listItem);
     }
 
     this.cutOrCopyToClipboard_(dt, false);
 
     dt.setDragImage(container, 0, 0);
     dt.effectAllowed = 'copyMove';
   };
 
+  FileManager.prototype.onDragEnd_ = function(event) {
+    var container = this.document_.querySelector('#drag-image-container');
+    container.textContent = '';
+  };
+
+  FileManager.prototype.onDragOver_ = function(event) {
+    if (this.canPasteOrDrop_(event.dataTransfer)) {
+      event.preventDefault();

[dgozman, 2012/03/28 08:28:14]

It would be good to show cursor 'no-drop' otherwise.

[SeRya, 2012/03/28 08:43:07]

Let's do it later.

+    }
+  };
+
+  FileManager.prototype.onDrop_ = function(event) {
+    if (!this.canPasteOrDrop_(event.dataTransfer))
+      return;
+    event.preventDefault();
+    this.pasteFromClipboard_(event.dataTransfer);
+  };
+
   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();
     };
     this.showButter(strf('PASTE_ITEMS_REMAINING', progress.pendingItems),
                     options);
@@ skipping 1808 matching lines @@
     clipboard.setData('fs/directories', directories);
     clipboard.setData('fs/files', files);
 
     var files = this.selection.files;
     for(var i = 0; i < files.length; i++) {
       clipboard.items.add(files[i]);
     }
   }
 
   FileManager.prototype.onCopy_ = function(event) {
-    if (!this.selection || this.selection.totalCount == 0 ||
-        this.document_.activeElement.tagName == 'INPUT')
+    if (this.document_.activeElement.tagName == 'INPUT' ||
+        !this.canCopyOrDrag_()) {
       return;
-
+    }
     event.preventDefault();
     this.cutOrCopyToClipboard_(event.clipboardData, false);
-
     this.blinkSelection();
   };
 
+  FileManager.prototype.onBeforeCopy_ = function(event) {
+    event.returnValue = !this.canCopyOrDrag_();

[dgozman, 2012/03/28 08:28:14]

Please, add a comment that returnValue==false initiates the copy operation.

[SeRya, 2012/03/28 08:43:07]

Done.

+  };
+
+  FileManager.prototype.canCopyOrDrag_ = function() {
+    return this.selection && this.selection.totalCount > 0;
+  };
+
   FileManager.prototype.onCut_ = function(event) {
-    if (!this.selection || this.selection.totalCount == 0 ||
-        this.commands_['cut'].disabled ||
-        this.document_.activeElement.tagName == 'INPUT')
+    if (!this.document_.activeElement.tagName == 'INPUT' ||
+        this.canCutOrDrag_()) {
       return;
-
+    }
     event.preventDefault();
     this.cutOrCopyToClipboard_(event.clipboardData, true);
 
     this.blinkSelection();
   };
 
+  FileManager.prototype.onBeforeCut_ = function(event) {
+    event.returnValue = !this.canCutOrDrag_();
+  };
+
+  FileManager.prototype.canCutOrDrag_ = function() {
+    var ro = this.directoryModel_.readonly;
+    return !ro && this.selection && this.selection.totalCount > 0;
+  };
+
   FileManager.prototype.onPaste_ = function(event) {
-    // Check that the data copied by ourselves.
-    if (!event.clipboardData.getData('fs/isCut') ||
-        this.document_.activeElement.tagName == 'INPUT')
+    if (this.document_.activeElement.tagName == 'INPUT' ||
+        !this.canPasteOrDrop_(event.clipboardData)) {
       return;
+    }
     event.preventDefault();
     this.pasteFromClipboard_(event.clipboardData);
   };
 
+  FileManager.prototype.onBeforePaste_ = function(event) {
+    // TODO(serya) should be:
+    // event.returnValue = !this.canPasteOrDrop_(event.clipboardData);
+    this.commands_.paste.disabled =
+        !this.canPasteOrDrop_(event.clipboardData);
+  };
+
+  FileManager.prototype.canPasteOrDrop_ = function(clipboardData) {
+    var ro = this.directoryModel_.readonly;
+    return !ro && !!clipboardData.getData('fs/isCut');
+  };
+
   /**
    * Queue up a file copy operation based on the current system clipboard.
    */
   FileManager.prototype.pasteFromClipboard_ = function(clipboard) {
     var operationInfo = {
       isCut: clipboard.getData('fs/isCut'),
       isOnGData: clipboard.getData('fs/isOnGData'),
       sourceDir: clipboard.getData('fs/sourceDir'),
       directories: clipboard.getData('fs/directories'),
       files: clipboard.getData('fs/files')
@@ skipping 1232 matching lines @@
           });
       }, onError);
 
       function onError(err) {
         console.log('Error while checking free space: ' + err);
         setTimeout(doCheck, 1000 * 60);
       }
     }
   }
 })();