From 8d87eb2ed60bc6afb6b5f25ebbce621973f4f8be Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 18 Jun 2014 12:36:02 -0600
Subject: [PATCH] Style the .line-numbers div to be compatible w/ both themes
 and the GPU

The .line-numbers div has to have an opaque background because it's
sent as a texture to the GPU, and otherwise it will have isuses with
subpixel antialiasing.

However, themes style the background of the .gutter div, which was
getting obscured by the opaque background of the line numbers. This
commit adds the .gutter class to the .line-numbers div as well and
ensures it always fills the entire height of the editor.
---
 spec/editor-component-spec.coffee |  5 +++++
 src/editor-component.coffee       |  2 +-
 src/gutter-component.coffee       | 13 ++++++++-----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee
index e753272f6..7f4af3164 100644
--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -319,6 +319,11 @@ describe "EditorComponent", ->
       expect(component.lineNumberNodeForScreenRow(9).textContent).toBe "10"
       expect(gutterNode.offsetWidth).toBe initialGutterWidth
 
+    it "renders the .line-numbers div at the full height of the editor even if it's taller than its content", ->
+      node.style.height = node.offsetHeight + 100 + 'px'
+      component.measureScrollView()
+      expect(node.querySelector('.line-numbers').offsetHeight).toBe node.offsetHeight
+
     describe "fold decorations", ->
       describe "rendering fold decorations", ->
         it "adds the foldable class to line numbers when the line is foldable", ->
diff --git a/src/editor-component.coffee b/src/editor-component.coffee
index 2d7d5b88f..282b5e913 100644
--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -78,7 +78,7 @@ EditorComponent = React.createClass
     div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
       GutterComponent {
         ref: 'gutter', lineDecorations,
-        editor, renderedRowRange, maxLineNumberDigits,
+        editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight,
         scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow
       }
 
diff --git a/src/gutter-component.coffee b/src/gutter-component.coffee
index ee0b21bf2..c85e19c6b 100644
--- a/src/gutter-component.coffee
+++ b/src/gutter-component.coffee
@@ -14,11 +14,13 @@ GutterComponent = React.createClass
   dummyLineNumberNode: null
 
   render: ->
-    {scrollHeight, scrollTop} = @props
+    {scrollHeight, scrollViewHeight, scrollTop} = @props
 
-    div className: 'gutter editor-colors', onClick: @onClick,
-      div className: 'line-numbers', ref: 'lineNumbers', style:
-        height: scrollHeight
+    div className: 'gutter', onClick: @onClick,
+      # The line-numbers div must have the 'editor-colors' class so it has an
+      # opaque background to avoid sub-pixel anti-aliasing problems on the GPU
+      div className: 'gutter line-numbers editor-colors', ref: 'lineNumbers', style:
+        height: Math.max(scrollHeight, scrollViewHeight)
         WebkitTransform: "translate3d(0px, #{-scrollTop}px, 0px)"
 
   componentWillMount: ->
@@ -35,7 +37,8 @@ GutterComponent = React.createClass
   # visible row range.
   shouldComponentUpdate: (newProps) ->
     return true unless isEqualForProperties(newProps, @props,
-      'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'mouseWheelScreenRow', 'lineDecorations'
+      'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'mouseWheelScreenRow', 'lineDecorations',
+      'scrollViewHeight'
     )
 
     {renderedRowRange, pendingChanges, lineDecorations} = newProps