Put a decreasing z-index on line numbers

spec/text-editor-component-spec.coffee

@@ -623,6 +623,26 @@ describe "TextEditorComponent", ->
       expect(tilesNodes[2].style.zIndex).toBe("1")
       expect(tilesNodes[3].style.zIndex).toBe("0")
 
+    it "renders lines upper in the stack in front of the ones below in each tile", ->
+      wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      # Tile 0
+      expect(component.lineNumberNodeForScreenRow(0).style.zIndex).toBe("2")
+      expect(component.lineNumberNodeForScreenRow(1).style.zIndex).toBe("1")
+      expect(component.lineNumberNodeForScreenRow(2).style.zIndex).toBe("0")
+
+      # Tile 1
+      expect(component.lineNumberNodeForScreenRow(3).style.zIndex).toBe("2")
+      expect(component.lineNumberNodeForScreenRow(4).style.zIndex).toBe("1")
+      expect(component.lineNumberNodeForScreenRow(5).style.zIndex).toBe("0")
+
+      # Tile 2
+      expect(component.lineNumberNodeForScreenRow(6).style.zIndex).toBe("2")
+      expect(component.lineNumberNodeForScreenRow(7).style.zIndex).toBe("1")
+      expect(component.lineNumberNodeForScreenRow(8).style.zIndex).toBe("0")
+
     it "gives the line numbers container the same height as the wrapper node", ->
       linesNode = componentNode.querySelector(".line-numbers")
 

src/line-numbers-tile-component.coffee

@@ -88,9 +88,9 @@ class LineNumbersTileComponent
     return
 
   buildLineNumberHTML: (lineNumberState) ->
-    {screenRow, bufferRow, softWrapped, top, decorationClasses} = lineNumberState
+    {screenRow, bufferRow, softWrapped, top, decorationClasses, zIndex} = lineNumberState
     if screenRow?
-      style = "position: absolute; top: #{top}px;"
+      style = "position: absolute; top: #{top}px; z-index: #{zIndex};"
     else
       style = "visibility: hidden;"
     className = @buildLineNumberClassName(lineNumberState)
@@ -125,6 +125,10 @@ class LineNumbersTileComponent
       oldLineNumberState.top = newLineNumberState.top
       oldLineNumberState.screenRow = newLineNumberState.screenRow
 
+    unless oldLineNumberState.zIndex is newLineNumberState.zIndex
+      node.style.zIndex = newLineNumberState.zIndex
+      oldLineNumberState.zIndex = newLineNumberState.zIndex
+
   buildLineNumberClassName: ({bufferRow, foldable, decorationClasses, softWrapped}) ->
     className = "line-number line-number-#{bufferRow}"
     className += " " + decorationClasses.join(' ') if decorationClasses?

src/text-editor-presenter.coffee

@@ -589,7 +589,9 @@ class TextEditorPresenter
       wrapCount = 0
 
     if endRow > startRow
-      for bufferRow, i in @model.bufferRowsForScreenRows(startRow, endRow - 1)
+      bufferRows = @model.bufferRowsForScreenRows(startRow, endRow - 1)
+      zIndex = bufferRows.length - 1
+      for bufferRow, i in bufferRows
         if bufferRow is lastBufferRow
           wrapCount++
           id = bufferRow + '-' + wrapCount
@@ -605,8 +607,9 @@ class TextEditorPresenter
         decorationClasses = @lineNumberDecorationClassesForRow(screenRow)
         foldable = @model.isFoldableAtScreenRow(screenRow)
 
-        tileState.lineNumbers[id] = {screenRow, bufferRow, softWrapped, top, decorationClasses, foldable}
+        tileState.lineNumbers[id] = {screenRow, bufferRow, softWrapped, top, decorationClasses, foldable, zIndex}
         visibleLineNumberIds[id] = true
+        zIndex--
 
     for id of tileState.lineNumbers
       delete tileState.lineNumbers[id] unless visibleLineNumberIds[id]