Display directories first in the tree view. Style file names at same indent as directory names (beyond disclosure arrow)

spec/extensions/tree-view-spec.coffee

@@ -9,16 +9,21 @@ describe "TreeView", ->
     treeView = new TreeView(project)
 
   describe ".initialize(project)", ->
-    it "renders the root of the project and its contents, with subdirectories collapsed", ->
+    it "renders the root of the project and its contents alphabetically with subdirectories first in a collapsed state", ->
       root = treeView.find('> li:first')
       expect(root.find('> .disclosure')).toHaveText('▾')
       expect(root.find('> .name')).toHaveText('fixtures/')
 
       rootEntries = root.find('.entries')
-      subdir = rootEntries.find('> li.directory:contains(dir/)')
-      expect(subdir).toExist()
-      expect(subdir.find('.disclosure')).toHaveText('▸')
-      expect(subdir.find('.entries')).not.toExist()
+      subdir1 = rootEntries.find('> li:eq(0)')
+      expect(subdir1.find('.disclosure')).toHaveText('▸')
+      expect(subdir1.find('.name')).toHaveText('dir/')
+      expect(subdir1.find('.entries')).not.toExist()
+
+      subdir2 = rootEntries.find('> li:eq(1)')
+      expect(subdir2.find('.disclosure')).toHaveText('▸')
+      expect(subdir2.find('.name')).toHaveText('zed/')
+      expect(subdir2.find('.entries')).not.toExist()
 
       expect(rootEntries.find('> .file:contains(sample.js)')).toExist()
       expect(rootEntries.find('> .file:contains(sample.txt)')).toExist()

spec/fixtures/zed/a

@@ -0,0 +1 @@
+a

src/app/directory.coffee

@@ -9,10 +9,12 @@ class Directory
     fs.base(@path)
 
   getEntries: ->
-    fs.list(@path).map (path) ->
+    directories = []
+    files = []
+    for path in fs.list(@path)
       if fs.isDirectory(path)
-        new Directory(path)
+        directories.push(new Directory(path))
       else
-        new File(path)
-
+        files.push(new File(path))
+    directories.concat(files)
 

static/tree-view.css

@@ -6,11 +6,14 @@
   padding: 0 1em;
 }
 
-
 .tree-view .disclosure {
   margin-right: .5em;
 }
 
 .tree-view .directory .entries {
-  padding-left: 2em;
+  padding-left: 2ex;
+}
+
+.tree-view .directory .entries .file {
+  padding-left: 2ex;
 }