Use octicon disclosure arrow

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

@@ -26,17 +26,17 @@ describe "TreeView", ->
 
   describe ".initialize(project)", ->
     it "renders the root of the project and its contents alphabetically with subdirectories first in a collapsed state", ->
-      expect(treeView.root.find('> .header .disclosure-arrow')).toHaveText('▾')
+      expect(treeView.root.find('> .header .disclosure-arrow')).not.toHaveClass('expanded')
       expect(treeView.root.find('> .header .name')).toHaveText('tree-view')
 
       rootEntries = treeView.root.find('.entries')
       subdir0 = rootEntries.find('> li:eq(0)')
-      expect(subdir0.find('.disclosure-arrow')).toHaveText('▸')
+      expect(subdir0).not.toHaveClass('expanded')
       expect(subdir0.find('.name')).toHaveText('dir1')
       expect(subdir0.find('.entries')).not.toExist()
 
       subdir2 = rootEntries.find('> li:eq(1)')
-      expect(subdir2.find('.disclosure-arrow')).toHaveText('▸')
+      expect(subdir2).not.toHaveClass('expanded')
       expect(subdir2.find('.name')).toHaveText('dir2')
       expect(subdir2.find('.entries')).not.toExist()
 
@@ -211,16 +211,16 @@ describe "TreeView", ->
     it "expands / collapses the associated directory", ->
       subdir = treeView.root.find('.entries > li:contains(dir1)').view()
 
-      expect(subdir.disclosureArrow).toHaveText('▸')
+      expect(subdir).not.toHaveClass('expanded')
       expect(subdir.find('.entries')).not.toExist()
 
       subdir.disclosureArrow.click()
 
-      expect(subdir.disclosureArrow).toHaveText('▾')
+      expect(subdir).toHaveClass('expanded')
       expect(subdir.find('.entries')).toExist()
 
       subdir.disclosureArrow.click()
-      expect(subdir.disclosureArrow).toHaveText('▸')
+      expect(subdir).not.toHaveClass('expanded')
       expect(subdir.find('.entries')).not.toExist()
 
     it "restores the expansion state of descendant directories", ->

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

@@ -9,7 +9,7 @@ class DirectoryView extends View
   @content: ({directory, isExpanded} = {}) ->
     @li class: 'directory entry', =>
       @div outlet: 'header', class: 'header', =>
-        @span '▸', class: 'disclosure-arrow', outlet: 'disclosureArrow'
+        @span class: 'disclosure-arrow', outlet: 'disclosureArrow'
         @span directory.getBaseName(), class: 'name', outlet: 'directoryName'
       @span "", class: 'highlight'
 
@@ -48,7 +48,6 @@ class DirectoryView extends View
   expand: ->
     return if @isExpanded
     @addClass('expanded')
-    @disclosureArrow.text('▾')
     @buildEntries()
     @watchEntries()
     @deserializeEntryExpansionStates(@entryStates) if @entryStates?
@@ -58,7 +57,6 @@ class DirectoryView extends View
   collapse: ->
     @entryStates = @serializeEntryExpansionStates()
     @removeClass('expanded')
-    @disclosureArrow.text('▸')
     @unwatchEntries()
     @entries.remove()
     @entries = null

static/tree-view.css

@@ -41,7 +41,6 @@
 }
 
 .tree-view .disclosure-arrow {
-  width: 13px;
   display: inline-block;
 }
 
@@ -98,6 +97,15 @@
   left: 0;
 }
 
+.tree-view .disclosure-arrow:before {
+  font-family: 'Octicons Regular';
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
+  margin-right: 3px;
+  -webkit-font-smoothing: antialiased;
+}
+
 .tree-view .directory .header .name:before {
   content: "\f016";
   top: -5px;
@@ -122,3 +130,13 @@
   content: "\f014";
   top: -2px;
 }
+
+.tree-view .directory > .header .disclosure-arrow:before {
+  content: "\f05a";
+  top: -2px;
+}
+
+.tree-view .directory.expanded > .header .disclosure-arrow:before {
+  content: "\f05b";
+  top: -2px;
+}