10 files changed, 268 insertions, 105 deletions

diff --git a/js/io/ui/file-picker/file-input-field.reel/file-input-field.html b/js/io/ui/file-picker/file-input-field.reel/file-input-field.html
index 2fcaa075..00df1c11 100755
--- a/js/io/ui/file-picker/file-input-field.reel/file-input-field.html
+++ b/js/io/ui/file-picker/file-input-field.reel/file-input-field.html
@@ -10,13 +10,21 @@
     <link rel="stylesheet" type="text/css" href="file-input-field.css">
     <script type="text/montage-serialization">
     {
+
+        "newFileDirectory": {
+            "prototype": "montage/ui/textfield.reel",
+            "properties": {
+                "element": {"#": "newFileDirectory"}
+            }
+        },
+
         "owner":{
             "module": "js/io/ui/file-picker/file-input-field.reel",
             "name": "FileInputField",
             "properties": {
                 "element": {"#": "fileInputField"},
                 "findDirectory": {"#": "findDirectory"},
-                "newFileDirectory": {"#": "newFileDirectory"}
+                "newFileDirectory": {"@": "newFileDirectory"}
             }
         }
     }
diff --git a/js/io/ui/file-picker/file-input-field.reel/file-input-field.js b/js/io/ui/file-picker/file-input-field.reel/file-input-field.js
index 651fd7fa..9e77759f 100755
--- a/js/io/ui/file-picker/file-input-field.reel/file-input-field.js
+++ b/js/io/ui/file-picker/file-input-field.reel/file-input-field.js
@@ -14,12 +14,10 @@ var FileInputField = exports.FileInputField = Montage.create(Component, {
         value: function() {
             var that = this;
             this.findDirectory.identifier = "findDirectory";
-
             this.findDirectory.addEventListener("click", this, false);
-
-            this.eventManager.addEventListener("pickerSelectionsDone", function(evt){that.handleFileInputPickerSelectionsDone(evt);}, false);
-
-            this.newFileDirectory.addEventListener("keyup", function(evt){that.handleNewFileDirectoryOnkeyup(evt);}, false);
+            this.eventManager.addEventListener("pickerSelectionsDone", this.handleFileInputPickerSelectionsDone, false);
+            this.addEventListener("change@newFileDirectory.value", this.handleNewFileDirectoryChange, false);
+            this.newFileDirectory.element.addEventListener("keyup", this, false);
         }
     },
 
@@ -63,17 +61,31 @@ var FileInputField = exports.FileInputField = Montage.create(Component, {
         }
     },
 
-    handleNewFileDirectoryOnkeyup:{
+    handleNewFileDirectoryChange:{
           value:function(evt){
-              if(this.newFileDirectory.value !== ""){
-                  var newFileDirectorySetEvent = document.createEvent("Events");
-                  newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
-                  newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
-                  this.eventManager.dispatchEvent(newFileDirectorySetEvent);
-              }
+              var newFileDirectorySetEvent = document.createEvent("Events");
+              newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
+              newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
+              newFileDirectorySetEvent.keyCode = evt.keyCode;
+              this.eventManager.dispatchEvent(newFileDirectorySetEvent);
           }
     },
 
+
+    handleKeyup:{
+        value: function(evt){
+            if(evt.keyCode === 13){
+                var enterKeyupEvent = document.createEvent("Events");
+                enterKeyupEvent.initEvent("enterKey", false, false);
+                this.eventManager.dispatchEvent(enterKeyupEvent);
+            }else if(evt.keyCode === 27){
+                var escKeyupEvent = document.createEvent("Events");
+                escKeyupEvent.initEvent("escKey", false, false);
+                this.eventManager.dispatchEvent(escKeyupEvent);
+            }
+        }
+    },
+
     handleFileInputPickerSelectionsDone:{
         value: function(evt){
             var selectedUri = "";
@@ -95,7 +107,7 @@ var FileInputField = exports.FileInputField = Montage.create(Component, {
             if(!!obj && obj.uri && obj.uri.length > 0){
                 selectedUri = obj.uri[0];
                 this.newFileDirectory.value = selectedUri;
-
+                this.newFileDirectory.element.focus();
                 var newFileDirectorySetEvent = document.createEvent("Events");
                   newFileDirectorySetEvent.initEvent("newFileDirectorySet", false, false);
                   newFileDirectorySetEvent.newFileDirectory = this.newFileDirectory.value;
diff --git a/js/io/ui/file-picker/file-picker-controller.js b/js/io/ui/file-picker/file-picker-controller.js
index 105dc223..436a50f3 100755
--- a/js/io/ui/file-picker/file-picker-controller.js
+++ b/js/io/ui/file-picker/file-picker-controller.js
@@ -23,6 +23,11 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
         }
     },
 
+    pickerNavChoices:{
+        enumerable: true,
+        value: null
+    },
+
     filePickerPopupType:{
         enumerable: false,
         value: "filePicker"
@@ -125,8 +130,6 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
             }
 
             if(!!storedUri){
-                // This is depracated -- use decodeURI instead
-                //aModel.currentRoot = unescape(storedUri);
                 aModel.currentRoot = decodeURI(storedUri);
             }
 
@@ -149,7 +152,7 @@ var FilePickerController = exports.FilePickerController = Montage.create(require
           writable:false,
         enumerable:true,
         value:function(callback, aModel){
-            var pickerNavChoices = Montage.create(pickerNavigatorReel);
+            var pickerNavChoices = this.pickerNavChoices = Montage.create(pickerNavigatorReel);
             var initUri = aModel.currentRoot;
 
             //remove extra / at the end
diff --git a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js
index 7a9d90b4..945b0301 100644
--- a/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js
+++ b/js/io/ui/file-picker/picker-navigator.reel/picker-navigator.js
@@ -258,12 +258,20 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
             this.element.addEventListener("refreshTreeSegment", function(evt){that.handlePickerNavRefreshTreeSegment(evt);}, false);
             this.resultsArea.addEventListener("click", function(evt){that.handleResultsAreaClick(evt);}, false);
             this.element.addEventListener("click", function(evt){that.handlePickerNavClick(evt);}, false);
-
             this.okButton.addEventListener("click", function(evt){that.handleOkButtonAction(evt);}, false);
             this.cancelButton.addEventListener("click", function(evt){that.handleCancelButtonAction(evt);}, false);
 
+            this.element.addEventListener("keyup", function(evt){
+                if(evt.keyCode == 27) {
+                    if(that.application.ninja.filePickerController.pickerNavChoices !== null){
+                        that.handleCancelButtonAction();
+                    }
+                }
+            }, true);
+
             //ready to show picker now
             this.element.style.visibility = "visible";
+            this.element.focus();
         }
     },
 
@@ -501,7 +509,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {
                     metadata = "Name: "+data.name;
                 }
                 metadata = metadata + "<br />" + "Type: "+data.type;
-                if(data.size){metadata = metadata + "<br />" + "Size: "+data.size;}
+                if(data.size){metadata = metadata + "<br />" + "Size: "+data.size+" bytes";}
                 if(data.creationDate){metadata = metadata + "<br />" + "Creation date: "+ this.formatTimestamp(data.creationDate);}
                 if(data.modifiedDate){metadata = metadata + "<br />" + "Modified date: "+ this.formatTimestamp(data.modifiedDate);}
             }
@@ -1071,6 +1079,7 @@ var PickerNavigator = exports.PickerNavigator = Montage.create(Component, {