Merge pull request #8098 from atom/as-tiles-z-index

Render tiles upper in the stack in front of the ones below

src/lines-component.coffee

@@ -13,6 +13,9 @@ class LinesComponent extends TiledComponent
   constructor: ({@presenter, @hostElement, @useShadowDOM, visible}) ->
     @domNode = document.createElement('div')
     @domNode.classList.add('lines')
+    @tilesNode = document.createElement("div")
+    @tilesNode.style.zIndex = 0
+    @domNode.appendChild(@tilesNode)
 
     @cursorsComponent = new CursorsComponent
     @domNode.appendChild(@cursorsComponent.getDomNode())
@@ -62,7 +65,7 @@ class LinesComponent extends TiledComponent
   getNewState: (state) ->
     state.content
 
-  getTilesNode: -> @domNode
+  getTilesNode: -> @tilesNode
 
   measureLineHeightAndDefaultCharWidth: ->
     @domNode.appendChild(DummyLineNode)

src/lines-tile-component.coffee

@@ -44,6 +44,10 @@ class LinesTileComponent
       @domNode.style.backgroundColor = @newState.backgroundColor
       @oldState.backgroundColor = @newState.backgroundColor
 
+    if @newTileState.zIndex isnt @oldTileState.zIndex
+      @domNode.style.zIndex = @newTileState.zIndex
+      @oldTileState.zIndex = @newTileState.zIndex
+
     if @newTileState.display isnt @oldTileState.display
       @domNode.style.display = @newTileState.display
       @oldTileState.display = @newTileState.display

src/text-editor-presenter.coffee

@@ -322,10 +322,16 @@ class TextEditorPresenter
       @tileForRow(@model.getScreenLineCount()), @tileForRow(@endRow)
     )
 
+  getTilesCount: ->
+    Math.ceil(
+      (@getEndTileRow() - @getStartTileRow() + 1) / @tileSize
+    )
+
   updateTilesState: ->
     return unless @startRow? and @endRow? and @lineHeight?
 
     visibleTiles = {}
+    zIndex = @getTilesCount() - 1
     for startRow in [@getStartTileRow()..@getEndTileRow()] by @tileSize
       endRow = Math.min(@model.getScreenLineCount(), startRow + @tileSize)
 
@@ -334,6 +340,7 @@ class TextEditorPresenter
       tile.left = -@scrollLeft
       tile.height = @tileSize * @lineHeight
       tile.display = "block"
+      tile.zIndex = zIndex--
       tile.highlights ?= {}
 
       gutterTile = @lineNumberGutter.tiles[startRow] ?= {}