Gutter line numbers are rendered similarly to the scroll view's lines

spec/app/editor-spec.coffee

@@ -530,17 +530,12 @@ describe "Editor", ->
 
       expect(editor.gutter).not.toHaveClass('drop-shadow')
 
-    it "adjusts the margin-top to offset the line numbers", ->
-      editor.attachToDom()
-      editor.height(200)
-
-      editor.verticalScrollbar.scrollTop(editor.lineHeight / 2)
+    it "adjusts the padding-top to account for non-rendered line numbers", ->
+      editor.verticalScrollbar.scrollTop(editor.lineHeight * 2.5)
       editor.verticalScrollbar.trigger('scroll')
-      expect(editor.gutter.css('margin-top')).toBe "#{-editor.lineHeight / 2}px"
-
-      editor.verticalScrollbar.scrollTop(editor.lineHeight * 2)
-      editor.verticalScrollbar.trigger('scroll')
-      expect(editor.gutter.css('margin-top')).toBe "0px"
+      expect(editor.gutter.scrollTop()).toBe(editor.lineHeight * 2.5)
+      expect(editor.gutter.lineNumbers.css('padding-top')).toBe "#{editor.lineHeight * 2}px"
+      expect(editor.gutter.lineNumbers.css('padding-bottom')).toBe "#{editor.lineHeight * 5}px"
 
   describe "font size", ->
     it "sets the initial font size based on the value assigned to the root view", ->

src/app/editor.coffee

@@ -216,6 +216,7 @@ class Editor extends View
       @updateLines()
       scrollTop = @verticalScrollbar.scrollTop()
       @scrollView.scrollTop(scrollTop)
+      @gutter.scrollTop(scrollTop)
 
     @scrollView.on 'scroll', =>
       if @scrollView.scrollLeft() == 0
@@ -268,12 +269,17 @@ class Editor extends View
     @lastRenderedScreenRow = @getLastVisibleScreenRow()
 
     @gutter.renderLineNumbers(@firstRenderedScreenRow, @lastRenderedScreenRow)
-
     @insertLineElements(0, @buildLineElements(@firstRenderedScreenRow, @lastRenderedScreenRow))
-    @lines.css('padding-top', @firstRenderedScreenRow * @lineHeight)
-    @lines.css('padding-bottom', (@getLastScreenRow() - @lastRenderedScreenRow) * @lineHeight)
+
+    paddingTop = @firstRenderedScreenRow * @lineHeight
+    paddingBottom = (@getLastScreenRow() - @lastRenderedScreenRow) * @lineHeight
+    @lines.css('padding-top', paddingTop)
+    @gutter.lineNumbers.css('padding-top', paddingTop)
+    @lines.css('padding-bottom', paddingBottom)
+    @gutter.lineNumbers.css('padding-bottom', paddingBottom)
 
   updateLines: ->
+    window.xxx = this
     firstVisibleScreenRow = @getFirstVisibleScreenRow()
     lastVisibleScreenRow = @getLastVisibleScreenRow()
 
@@ -281,29 +287,33 @@ class Editor extends View
 
     if firstVisibleScreenRow > @firstRenderedScreenRow
       @removeLineElements(@firstRenderedScreenRow, firstVisibleScreenRow - 1)
-      @lines.css('padding-top', firstVisibleScreenRow * @lineHeight)
 
     if lastVisibleScreenRow < @lastRenderedScreenRow
       @removeLineElements(lastVisibleScreenRow + 1, @lastRenderedScreenRow)
-      @lines.css('padding-bottom', (@getLastScreenRow() - lastVisibleScreenRow) * @lineHeight)
 
     if firstVisibleScreenRow < @firstRenderedScreenRow
       newLinesStartRow = firstVisibleScreenRow
       newLinesEndRow = Math.min(@firstRenderedScreenRow - 1, lastVisibleScreenRow)
       lineElements = @buildLineElements(newLinesStartRow, newLinesEndRow)
       @insertLineElements(newLinesStartRow, lineElements)
-      @lines.css('padding-top', firstVisibleScreenRow * @lineHeight)
 
     if lastVisibleScreenRow > @lastRenderedScreenRow
       newLinesStartRow = Math.max(@lastRenderedScreenRow + 1, firstVisibleScreenRow)
       newLinesEndRow = lastVisibleScreenRow
       lineElements = @buildLineElements(newLinesStartRow, newLinesEndRow)
-
       @insertLineElements(newLinesStartRow, lineElements)
-      @lines.css('padding-bottom', (@getLastScreenRow() - lastVisibleScreenRow) * @lineHeight)
 
-    @firstRenderedScreenRow = firstVisibleScreenRow
-    @lastRenderedScreenRow = lastVisibleScreenRow
+    if firstVisibleScreenRow != @firstRenderedScreenRow
+      paddingTop = firstVisibleScreenRow * @lineHeight
+      @lines.css('padding-top', paddingTop)
+      @gutter.lineNumbers.css('padding-top', paddingTop)
+      @firstRenderedScreenRow = firstVisibleScreenRow
+
+    if lastVisibleScreenRow != @lastRenderedScreenRow
+      paddingBottom = (@getLastScreenRow() - lastVisibleScreenRow) * @lineHeight
+      @lines.css('padding-bottom', paddingBottom)
+      @gutter.lineNumbers.css('padding-bottom', paddingBottom)
+      @lastRenderedScreenRow = lastVisibleScreenRow
 
   getFirstVisibleScreenRow: ->
     Math.floor(@verticalScrollbar.scrollTop() / @lineHeight)

src/app/gutter.coffee

@@ -6,16 +6,15 @@ _ = require 'underscore'
 module.exports =
 class Gutter extends View
   @content: ->
-    @div class: 'gutter'
+    @div class: 'gutter', =>
+      @div outlet: 'lineNumbers', class: 'wtf'
 
   renderLineNumbers: (startScreenRow, endScreenRow) ->
     editor = @parentView
     lastScreenRow = -1
     rows = editor.bufferRowsForScreenRows(startScreenRow, endScreenRow)
 
-    @css('margin-top', -editor.verticalScrollbar.scrollTop() % editor.lineHeight)
-
-    this[0].innerHTML = $$$ ->
+    @lineNumbers[0].innerHTML = $$$ ->
       for row in rows
         @div {class: 'line-number'}, if row == lastScreenRow then '•' else row + 1
         lastScreenRow = row