Allow tree view sidebar to be resized.

src/packages/tree-view/src/tree-view.coffee

@@ -27,7 +27,8 @@ class TreeView extends ScrollView
     @instance.serialize()
 
   @content: (rootView) ->
-    @ol class: 'tree-view tool-panel', tabindex: -1
+    @ol class: 'tree-view tool-panel', tabindex: -1, =>
+      @div class: 'tree-view-resizer'
 
   @deserialize: (state, rootView) ->
     treeView = new TreeView(rootView)
@@ -46,6 +47,7 @@ class TreeView extends ScrollView
   initialize: (@rootView) ->
     super
     @on 'click', '.entry', (e) => @entryClicked(e)
+    @on 'mousedown', '.tree-view-resizer', (e) => @resizeStarted(e)
     @command 'core:move-up', => @moveUp()
     @command 'core:move-down', => @moveDown()
     @command 'core:close', => @detach(); false
@@ -119,6 +121,18 @@ class TreeView extends ScrollView
 
     false
 
+  resizeStarted: (e) =>
+    $(document.body).bind('mousemove', @resizeTreeView)
+    $(document.body).bind('mouseup', @resizeStopped)
+
+  resizeStopped: (e) =>
+    $(document.body).unbind('mousemove', @resizeTreeView)
+    $(document.body).unbind('mouseup', @resizeStopped)
+
+  resizeTreeView: (e) =>
+    $('.tree-view').css(width: e.pageX)
+    $('.tree-view .tree-view-resizer').css(left: e.pageX + 12) # Tree view has padding-left: 12
+
   updateRoot: ->
     @root?.remove()
     if rootDirectory = @rootView.project.getRootDirectory()

src/packages/tree-view/stylesheets/tree-view.css

@@ -7,12 +7,25 @@
   -webkit-user-select: none;
   border-right: 2px solid #191919;
   min-width: 100px;
+  width: 200px;
   z-index: 2;
   padding-left: 12px;
 }
 
+.tree-view .tree-view-resizer {
+  position: fixed;
+  float: right;
+  left: 212px;
+  height: 100%;
+  width: 2px;
+  background: transparent;
+  cursor: col-resize;
+}
+
 .tree-view .entry {
   text-shadow: 0 -1px 0 #000;
+  text-wrap: none;
+  white-space: nowrap;
 }
 
 .tree-view .entries {