From b35a2502c68a35188dc0ccdef848d01bace4b4cb Mon Sep 17 00:00:00 2001
From: Corey Johnson <cj@github.com>
Date: Mon, 14 May 2012 12:32:53 -0700
Subject: [PATCH] Gutter line numbers are rendered similarly to the scroll
 view's lines

---
 spec/app/editor-spec.coffee | 15 +++++----------
 src/app/editor.coffee       | 30 ++++++++++++++++++++----------
 src/app/gutter.coffee       |  7 +++----
 3 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/spec/app/editor-spec.coffee b/spec/app/editor-spec.coffee
index 04f63e10e..58c70f6d1 100644
--- a/spec/app/editor-spec.coffee
+++ b/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", ->
diff --git a/src/app/editor.coffee b/src/app/editor.coffee
index 51d5a9a9e..9da9198bd 100644
--- a/src/app/editor.coffee
+++ b/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)
diff --git a/src/app/gutter.coffee b/src/app/gutter.coffee
index 6018e9330..fbefad648 100644
--- a/src/app/gutter.coffee
+++ b/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
\ No newline at end of file