From 6607f99c6cdc8f6eb3382571b05b7760430e0ff3 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 16 Apr 2014 13:56:24 -0600
Subject: [PATCH] Use padding-top/bottom rather than spacer divs in lines and
 gutter

It creates a simpler DOM structure.
---
 spec/editor-component-spec.coffee | 28 ++++++++++++++--------------
 src/gutter-component.coffee       | 11 ++++-------
 src/lines-component.coffee        | 15 ++++++---------
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee
index 7f373b547..eb39df405 100644
--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -49,14 +49,14 @@ describe "EditorComponent", ->
 
       expect(node.querySelector('.scroll-view-content').style['-webkit-transform']).toBe "translate(0px, #{-2.5 * lineHeightInPixels}px)"
 
-      lines = node.querySelectorAll('.line')
-      expect(lines.length).toBe 6
-      expect(lines[0].textContent).toBe editor.lineForScreenRow(2).text
-      expect(lines[5].textContent).toBe editor.lineForScreenRow(7).text
+      lineNodes = node.querySelectorAll('.line')
+      expect(lineNodes.length).toBe 6
+      expect(lineNodes[0].textContent).toBe editor.lineForScreenRow(2).text
+      expect(lineNodes[5].textContent).toBe editor.lineForScreenRow(7).text
 
-      spacers = node.querySelectorAll('.lines .spacer')
-      expect(spacers[0].offsetHeight).toBe 2 * lineHeightInPixels
-      expect(spacers[1].offsetHeight).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels
+      linesNode = node.querySelector('.lines')
+      expect(linesNode.style.paddingTop).toBe 2 * lineHeightInPixels + 'px'
+      expect(linesNode.style.paddingBottom).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels + 'px'
 
     describe "when indent guides are enabled", ->
       beforeEach ->
@@ -134,14 +134,14 @@ describe "EditorComponent", ->
 
       expect(node.querySelector('.line-numbers').style['-webkit-transform']).toBe "translateY(#{-2.5 * lineHeightInPixels}px)"
 
-      lines = node.querySelectorAll('.line-number')
-      expect(lines.length).toBe 6
-      expect(lines[0].textContent).toBe "#{nbsp}3"
-      expect(lines[5].textContent).toBe "#{nbsp}8"
+      lineNumberNodes = node.querySelectorAll('.line-number')
+      expect(lineNumberNodes.length).toBe 6
+      expect(lineNumberNodes[0].textContent).toBe "#{nbsp}3"
+      expect(lineNumberNodes[5].textContent).toBe "#{nbsp}8"
 
-      spacers = node.querySelectorAll('.line-numbers .spacer')
-      expect(spacers[0].offsetHeight).toBe 2 * lineHeightInPixels
-      expect(spacers[1].offsetHeight).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels
+      lineNumbersNode = node.querySelector('.line-numbers')
+      expect(lineNumbersNode.style.paddingTop).toBe 2 * lineHeightInPixels + 'px'
+      expect(lineNumbersNode.style.paddingBottom).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels + 'px'
 
     it "renders • characters for soft-wrapped lines", ->
       editor.setSoftWrap(true)
diff --git a/src/gutter-component.coffee b/src/gutter-component.coffee
index 7ab6c4846..8836a142a 100644
--- a/src/gutter-component.coffee
+++ b/src/gutter-component.coffee
@@ -12,12 +12,12 @@ GutterComponent = React.createClass
     {editor, visibleRowRange, scrollTop} = @props
     [startRow, endRow] = visibleRowRange
     lineHeightInPixels = editor.getLineHeight()
-    precedingHeight = startRow * lineHeightInPixels
-    followingHeight = (editor.getScreenLineCount() - endRow) * lineHeightInPixels
     maxDigits = editor.getLastBufferRow().toString().length
     style =
       height: editor.getScrollHeight()
       WebkitTransform: "translateY(#{-scrollTop}px)"
+      paddingTop: startRow * lineHeightInPixels
+      paddingBottom: (editor.getScreenLineCount() - endRow) * lineHeightInPixels
     wrapCount = 0
 
     lineNumbers = []
@@ -35,11 +35,8 @@ GutterComponent = React.createClass
       lastBufferRow = bufferRow
 
     div className: 'gutter',
-      div className: 'line-numbers', style: style, [
-        div className: 'spacer', key: 'top-spacer', style: {height: precedingHeight}
-        lineNumbers...
-        div className: 'spacer', key: 'bottom-spacer', style: {height: followingHeight}
-      ]
+      div className: 'line-numbers', style: style,
+        lineNumbers
 
   componentWillUnmount: ->
     @unsubscribe()
diff --git a/src/lines-component.coffee b/src/lines-component.coffee
index e3d81ab5e..56457c7e1 100644
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -14,15 +14,12 @@ LinesComponent = React.createClass
     {editor, visibleRowRange, showIndentGuide} = @props
     [startRow, endRow] = visibleRowRange
     lineHeightInPixels = editor.getLineHeight()
-    precedingHeight = startRow * lineHeightInPixels
-    followingHeight = (editor.getScreenLineCount() - endRow) * lineHeightInPixels
+    paddingTop = startRow * lineHeightInPixels
+    paddingBottom = (editor.getScreenLineCount() - endRow) * lineHeightInPixels
 
-    div className: 'lines', ref: 'lines', [
-      div className: 'spacer', key: 'top-spacer', style: {height: precedingHeight}
-      (for tokenizedLine in @props.editor.linesForScreenRows(startRow, endRow - 1)
-        LineComponent({tokenizedLine, showIndentGuide, key: tokenizedLine.id}))...
-      div className: 'spacer', key: 'bottom-spacer', style: {height: followingHeight}
-    ]
+    div className: 'lines', ref: 'lines', style: {paddingTop, paddingBottom},
+      for tokenizedLine in @props.editor.linesForScreenRows(startRow, endRow - 1)
+        LineComponent({tokenizedLine, showIndentGuide, key: tokenizedLine.id})
 
   componentDidMount: ->
     @measuredLines = new WeakSet
@@ -62,7 +59,7 @@ LinesComponent = React.createClass
 
     for tokenizedLine, i in @props.editor.linesForScreenRows(visibleStartRow, visibleEndRow - 1)
       unless @measuredLines.has(tokenizedLine)
-        lineNode = linesNode.children[i + 1]
+        lineNode = linesNode.children[i]
         @measureCharactersInLine(tokenizedLine, lineNode)
 
   measureCharactersInLine: (tokenizedLine, lineNode) ->