Merge pull request #2661 from atom/bo-fold-markers

Add fold markers to folded lines

spec/editor-component-spec.coffee

@@ -232,6 +232,19 @@ describe "EditorComponent", ->
         editor.setText("a\0b")
         expect(editor.pixelPositionForScreenPosition([0, Infinity]).left).toEqual 2 * charWidth
 
+    describe "when there is a fold", ->
+      it "renders a fold marker on the folded line", ->
+        foldedLineNode = component.lineNodeForScreenRow(4)
+        expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
+
+        editor.foldBufferRow(4)
+        foldedLineNode = component.lineNodeForScreenRow(4)
+        expect(foldedLineNode.querySelector('.fold-marker')).toBeTruthy()
+
+        editor.unfoldBufferRow(4)
+        foldedLineNode = component.lineNodeForScreenRow(4)
+        expect(foldedLineNode.querySelector('.fold-marker')).toBeFalsy()
+
   describe "gutter rendering", ->
     [gutter] = []
 
@@ -994,6 +1007,16 @@ describe "EditorComponent", ->
         nextAnimationFrame()
         expect(editor.getSelectedScreenRange()).toEqual [[2, 4], [6, 8]]
 
+    describe "when a line is folded", ->
+      beforeEach ->
+        editor.foldBufferRow 4
+
+      describe "when the folded line's fold-marker is clicked", ->
+        it "unfolds the buffer row", ->
+          target = component.lineNodeForScreenRow(4).querySelector '.fold-marker'
+          linesNode.dispatchEvent(buildMouseEvent('mousedown', clientCoordinatesForScreenPosition([4, 8]), {target}))
+          expect(editor.isFoldedAtBufferRow 4).toBe false
+
     clientCoordinatesForScreenPosition = (screenPosition) ->
       positionOffset = editor.pixelPositionForScreenPosition(screenPosition)
       scrollViewClientRect = node.querySelector('.scroll-view').getBoundingClientRect()

src/editor-component.coffee

@@ -485,6 +485,11 @@ EditorComponent = React.createClass
     {detail, shiftKey, metaKey} = event
     screenPosition = @screenPositionForMouseEvent(event)
 
+    if event.target?.classList.contains('fold-marker')
+      bufferRow = editor.bufferRowForScreenRow(screenPosition.row)
+      editor.unfoldBufferRow(bufferRow)
+      return
+
     if shiftKey
       editor.selectToScreenPosition(screenPosition)
     else if metaKey

src/lines-component.coffee

@@ -121,6 +121,7 @@ LinesComponent = React.createClass
     else
       lineHTML += @buildLineInnerHTML(line)
 
+    lineHTML += '<span class="fold-marker"></span>' if fold
     lineHTML += "</div>"
     lineHTML
 

static/editor.less

@@ -151,6 +151,10 @@
   }
 }
 
+.editor .fold-marker {
+  cursor: default;
+}
+
 .editor .fold-marker:after {
   .icon(0.8em, inline);
   content: @ellipsis;