Merge pull request #8537 from atom/as-gutter-z-index

Gutter z-index

spec/text-editor-component-spec.coffee

@@ -103,7 +103,7 @@ describe "TextEditorComponent", ->
 
       expect(linesNode.getBoundingClientRect().height).toBe(3.5 * lineHeightInPixels)
 
-    it "renders tiles upper in the stack in front of the ones below", ->
+    it "renders higher tiles in front of lower ones", ->
       wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
       component.measureDimensions()
       nextAnimationFrame()
@@ -601,6 +601,48 @@ describe "TextEditorComponent", ->
       expect(lineNode.offsetTop).toBe(top)
       expect(lineNode.textContent).toBe(text)
 
+    it "renders higher tiles in front of lower ones", ->
+      wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      tilesNodes = componentNode.querySelector(".line-numbers").querySelectorAll(".tile")
+
+      expect(tilesNodes[0].style.zIndex).toBe("2")
+      expect(tilesNodes[1].style.zIndex).toBe("1")
+      expect(tilesNodes[2].style.zIndex).toBe("0")
+
+      verticalScrollbarNode.scrollTop = 1 * lineHeightInPixels
+      verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
+      nextAnimationFrame()
+
+      tilesNodes = componentNode.querySelector(".line-numbers").querySelectorAll(".tile")
+
+      expect(tilesNodes[0].style.zIndex).toBe("3")
+      expect(tilesNodes[1].style.zIndex).toBe("2")
+      expect(tilesNodes[2].style.zIndex).toBe("1")
+      expect(tilesNodes[3].style.zIndex).toBe("0")
+
+    it "renders higher line numbers in front of lower ones", ->
+      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

@@ -42,6 +42,10 @@ class LineNumbersTileComponent
       @domNode.style['-webkit-transform'] = "translate3d(0, #{@newTileState.top}px, 0px)"
       @oldTileState.top = @newTileState.top
 
+    if @newTileState.zIndex isnt @oldTileState.zIndex
+      @domNode.style.zIndex = @newTileState.zIndex
+      @oldTileState.zIndex = @newTileState.zIndex
+
     if @newState.maxLineNumberDigits isnt @oldState.maxLineNumberDigits
       node.remove() for id, node of @lineNumberNodesById
       @oldState.tiles[@id] = {lineNumbers: {}}
@@ -84,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)
@@ -121,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

@@ -344,18 +344,20 @@ class TextEditorPresenter
       tile.left = -@scrollLeft
       tile.height = @tileSize * @lineHeight
       tile.display = "block"
-      tile.zIndex = zIndex--
+      tile.zIndex = zIndex
       tile.highlights ?= {}
 
       gutterTile = @lineNumberGutter.tiles[startRow] ?= {}
       gutterTile.top = startRow * @lineHeight - @scrollTop
       gutterTile.height = @tileSize * @lineHeight
       gutterTile.display = "block"
+      gutterTile.zIndex = zIndex
 
       @updateLinesState(tile, startRow, endRow) if @shouldUpdateLinesState
       @updateLineNumbersState(gutterTile, startRow, endRow) if @shouldUpdateLineNumbersState
 
       visibleTiles[startRow] = true
+      zIndex--
 
     if @mouseWheelScreenRow? and @model.tokenizedLineForScreenRow(@mouseWheelScreenRow)?
       mouseWheelTile = @tileForRow(@mouseWheelScreenRow)
@@ -588,7 +590,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
@@ -604,8 +608,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]