Fix https://github.com/mozilla/thimble.mozilla.org/issues/1886: allow…

… dropping deep into the filetree.

src/filesystem/impls/filer/lib/FileImport.js

@@ -5,9 +5,10 @@
 define(function (require, exports, module) {
     "use strict";
 
-    var LegacyFileImport = require("filesystem/impls/filer/lib/LegacyFileImport"),
-        WebKitFileImport = require("filesystem/impls/filer/lib/WebKitFileImport"),
-        FileSystemCache = require("filesystem/impls/filer/FileSystemCache");
+    var LegacyFileImport     = require("filesystem/impls/filer/lib/LegacyFileImport"),
+        WebKitFileImport     = require("filesystem/impls/filer/lib/WebKitFileImport"),
+        FileSystemCache      = require("filesystem/impls/filer/FileSystemCache"),
+        BrambleStartupState  = brackets.getModule("bramble/StartupState");
 
     /**
      * XXXBramble: the Drag and Drop and File APIs are a mess of incompatible
@@ -39,16 +40,18 @@ define(function (require, exports, module) {
     // error message we generate in rejectImport() below!
     var byteLimit = 3145728;
 
-
     // Support passing a DataTransfer object, or a FileList
-    exports.import = function(source, callback) {
+    exports.import = function(source, parentPath, callback) {
         if(!(source instanceof FileList || source instanceof DataTransfer)) {
             callback(new Error("[Bramble] expected DataTransfer or FileList to FileImport.import()"));
             return;
         }
 
+        // If we are given a sub-dir within the project, use that.  Otherwise use project root.
+        parentPath = parentPath || BrambleStartupState.project("root");
+
         var strategy = _create(byteLimit);
-        return strategy.import(source, function(err) {
+        return strategy.import(source, parentPath, function(err) {
             FileSystemCache.refresh(callback);
         });
     };

src/filesystem/impls/filer/lib/LegacyFileImport.js

@@ -50,7 +50,7 @@ define(function (require, exports, module) {
     }
 
     // We want event.dataTransfer.files for legacy browsers.
-    LegacyFileImport.prototype.import = function(source, callback) {
+    LegacyFileImport.prototype.import = function(source, parentPath, callback) {
         var files = source instanceof DataTransfer ? source.files : source;
         var byteLimit = this.byteLimit;
         var pathList = [];
@@ -194,7 +194,7 @@ define(function (require, exports, module) {
             reader.onload = function(e) {
                 delete reader.onload;
 
-                var filename = Path.join(StartupState.project("root"), item.name);
+                var filename = Path.join(parentPath, item.name);
                 var file = FileSystem.getFileForPath(filename);
                 var ext = Path.extname(filename).toLowerCase();
 

src/filesystem/impls/filer/lib/WebKitFileImport.js

@@ -50,7 +50,7 @@ define(function (require, exports, module) {
     }
 
     // We want event.dataTransfer.items for WebKit style browsers
-    WebKitFileImport.prototype.import = function(source, callback) {
+    WebKitFileImport.prototype.import = function(source, parentPath, callback) {
         var items = source instanceof DataTransfer ? source.items : source;
         var byteLimit = this.byteLimit;
         var pathList = [];
@@ -268,9 +268,9 @@ define(function (require, exports, module) {
             var err;
 
             if(entry.isDirectory) {
-                maybeImportDirectory(StartupState.project("root"), entry, deferred);
+                maybeImportDirectory(parentPath, entry, deferred);
             } else if (entry.isFile) {
-                maybeImportFile(StartupState.project("root"), entry, deferred);
+                maybeImportFile(parentPath, entry, deferred);
             } else {
                 // Skip it, we don't know what this is
                 err = new Error(Strings.DND_UNSUPPORTED_FILE_TYPE);

src/project/FileTreeView.js

@@ -40,7 +40,8 @@ define(function (require, exports, module) {
         LanguageManager   = require("language/LanguageManager"),
         FileTreeViewModel = require("project/FileTreeViewModel"),
         ViewUtils         = require("utils/ViewUtils"),
-        KeyEvent          = require("utils/KeyEvent");
+        KeyEvent          = require("utils/KeyEvent"),
+        DragAndDrop       = require("utils/DragAndDrop");
 
     var DOM = React.DOM;
 
@@ -449,6 +450,18 @@ define(function (require, exports, module) {
             e.preventDefault();
         },
 
+        /**
+         * When the user drags something over the file tree, use the location where they
+         * drag to set a hint for where files should be imported when dropped. This allows
+         * drag-and-drop to work deep into the filetree.
+         */
+        handleDragEnter: function (event) {
+            // If they drag over a file, assume they mean the file's parent dir.
+            DragAndDrop.setDropPathHint(this.props.parentPath);
+            event.stopPropagation();
+            event.preventDefault();
+        },
+
         /**
          * When the user double clicks, we will select this file and add it to the working
          * set (via the `selectInWorkingSet` action.)
@@ -499,7 +512,8 @@ define(function (require, exports, module) {
                     className: this.getClasses("jstree-leaf"),
                     onClick: this.handleClick,
                     onMouseDown: this.handleMouseDown,
-                    onDoubleClick: this.handleDoubleClick
+                    onDoubleClick: this.handleDoubleClick,
+                    onDragEnter: this.handleDragEnter
                 },
                 DOM.ins({
                     className: "jstree-icon"
@@ -694,6 +708,23 @@ define(function (require, exports, module) {
             event.preventDefault();
         },
 
+        /**
+         * If you drag something over a directory, make sure it's open so we can get
+         * at sub-directories for drop targets.
+         */
+        handleDragEnter: function(event) {
+            var isOpen = this.props.entry.get("open");
+            if(!isOpen) {
+                this.props.actions.setDirectoryOpen(this.myPath(), true);
+            }
+
+            // If they drag over a file, assume they mean the file's parent dir.
+            DragAndDrop.setDropPathHint(this.myPath());
+
+            event.stopPropagation();
+            event.preventDefault();
+        },
+
         /**
          * Create the data object to pass to extensions.
          *
@@ -742,7 +773,8 @@ define(function (require, exports, module) {
                 {
                     className: this.getClasses("jstree-" + nodeClass),
                     onClick: this.handleClick,
-                    onMouseDown: this.handleMouseDown
+                    onMouseDown: this.handleMouseDown,
+                    onDragEnter: this.handleDragEnter
                 },
                 _createAlignedIns(this.props.depth)
             ];

src/utils/DragAndDrop.js

@@ -50,6 +50,10 @@ define(function (require, exports, module) {
         ArchiveUtils    = require("filesystem/impls/filer/ArchiveUtils"),
         FileImport      = require("filesystem/impls/filer/lib/FileImport");
 
+    // If the user indicates they want to import files deep into the filetree
+    // this is the path they want to use as a parent dir root.
+    var _dropPathHint;
+
     /**
      * Returns true if the drag and drop items contains valid drop objects.
      * @param {Array.<DataTransferItem>} items Array of items being dragged
@@ -58,7 +62,6 @@ define(function (require, exports, module) {
     function isValidDrop(types) {
         var i = 0;
         var type;
-        console.log("Types", types);
 
         if (types) {
             for (var i = 0; i < types.length; i++) {
@@ -326,7 +329,7 @@ define(function (require, exports, module) {
      * and process them, such that they end
      */
     function processFiles(source, callback) {
-        FileImport.import(source, function(err, paths) {
+        FileImport.import(source, _dropPathHint, function(err, paths) {
             if(err) {
                 _showErrorDialog(err);
             }
@@ -335,14 +338,25 @@ define(function (require, exports, module) {
             paths = paths || [];
             openDroppedFiles(paths);
 
+            // Reset drop path, until we get an explicit one set in future.
+            _dropPathHint = null;
+
             callback(err);
         });
     }
 
+    /**
+     * Sets a path to a root dir to use for importing dropped paths (see FileTreeView.js)
+     */
+    function setDropPathHint(path) {
+        _dropPathHint = path;
+    }
+
     CommandManager.register(Strings.CMD_OPEN_DROPPED_FILES, Commands.FILE_OPEN_DROPPED_FILES, openDroppedFiles);
 
     // Export public API
     exports.attachHandlers      = attachHandlers;
     exports.isValidDrop         = isValidDrop;
     exports.openDroppedFiles    = openDroppedFiles;
+    exports.setDropPathHint     = setDropPathHint;
 });