Revert "Render highlights on their own layer to avoid GPU artifacts"

spec/editor-component-spec.coffee

@@ -462,6 +462,12 @@ 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()
+      nextTick()
+      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", ->

src/editor-component.coffee

@@ -8,8 +8,6 @@ GutterComponent = require './gutter-component'
 InputComponent = require './input-component'
 CursorsComponent = require './cursors-component'
 LinesComponent = require './lines-component'
-HighlightsComponent = require './highlights-component'
-UnderlayerComponent = require './underlayer-component'
 ScrollbarComponent = require './scrollbar-component'
 ScrollbarCornerComponent = require './scrollbar-corner-component'
 SubscriberMixin = require './subscriber-mixin'
@@ -84,8 +82,8 @@ EditorComponent = React.createClass
     div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
       GutterComponent {
         ref: 'gutter', onMouseDown: @onGutterMouseDown, onWidthChanged: @onGutterWidthChanged,
-        lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits,
-        scrollTop, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow
+        lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight,
+        scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow
       }
 
       div ref: 'scrollView', className: 'scroll-view', onMouseDown: @onMouseDown,
@@ -105,14 +103,7 @@ EditorComponent = React.createClass
           editor, lineHeightInPixels, defaultCharWidth, lineDecorations, highlightDecorations,
           showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft,
           @scrollingVertically, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
-          visible, scrollViewHeight
-        }
-        HighlightsComponent {
-          editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, highlightDecorations, lineHeightInPixels,
-          defaultCharWidth, @scopedCharacterWidthsChangeCount
-        }
-        UnderlayerComponent {
-          scrollTop, scrollLeft, scrollHeight, scrollWidth
+          visible, scrollViewHeight, @scopedCharacterWidthsChangeCount
         }
 
       ScrollbarComponent

src/editor.coffee

@@ -443,8 +443,7 @@ class Editor extends Model
   getText: -> @buffer.getText()
 
   # Public: Replaces the entire contents of the buffer with the given {String}.
-  setText: (text) ->
-    @buffer.setText(text)
+  setText: (text) -> @buffer.setText(text)
 
   # Get the text in the given {Range}.
   #

src/gutter-component.coffee

@@ -15,10 +15,13 @@ GutterComponent = React.createClass
   measuredWidth: null
 
   render: ->
-    {scrollTop, onMouseDown} = @props
+    {scrollHeight, scrollViewHeight, scrollTop, onMouseDown} = @props
 
     div className: 'gutter', onClick: @onClick, onMouseDown: onMouseDown,
-      div className: 'line-numbers', ref: 'lineNumbers', style:
+      # 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 +38,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

src/highlights-component.coffee

@@ -8,16 +8,7 @@ HighlightsComponent = React.createClass
   displayName: 'HighlightsComponent'
 
   render: ->
-    if @isMounted()
-      {scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props
-      style =
-        height: scrollHeight
-        width: scrollWidth
-        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
-
-    div {className: 'highlights', style},
-      @renderHighlights() if @isMounted()
-
+    div className: 'highlights', @renderHighlights()
 
   renderHighlights: ->
     {editor, highlightDecorations, lineHeightInPixels} = @props
@@ -30,7 +21,4 @@ HighlightsComponent = React.createClass
     highlightComponents
 
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props,
-      'scrollTop', 'scrollLeft', 'highlightDecorations', 'lineHeightInPixels',
-      'defaultCharWidth', 'scopedCharacterWidthsChangeCount'
-    )
+    not isEqualForProperties(newProps, @props, 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth', 'scopedCharacterWidthsChangeCount')

src/lines-component.coffee

@@ -4,6 +4,8 @@ React = require 'react-atom-fork'
 {debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 {$$} = require 'space-pen'
 
+HighlightsComponent = require './highlights-component'
+
 DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
 AcceptFilter = {acceptNode: -> NodeFilter.FILTER_ACCEPT}
 WrapperDiv = document.createElement('div')
@@ -15,13 +17,16 @@ LinesComponent = React.createClass
   render: ->
     if @isMounted()
       {editor, highlightDecorations, scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props
-      {lineHeightInPixels, defaultCharWidth, scrollViewHeight} = @props
+      {lineHeightInPixels, defaultCharWidth, scrollViewHeight, scopedCharacterWidthsChangeCount} = @props
       style =
         height: Math.max(scrollHeight, scrollViewHeight)
         width: scrollWidth
         WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
 
-    div {className: 'lines', style}
+    # The lines 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: 'lines editor-colors', style},
+      HighlightsComponent({editor, highlightDecorations, lineHeightInPixels, defaultCharWidth, scopedCharacterWidthsChangeCount}) if @isMounted()
 
   componentWillMount: ->
     @measuredLines = new WeakSet
@@ -34,7 +39,7 @@ LinesComponent = React.createClass
     return true unless isEqualForProperties(newProps, @props,
       'renderedRowRange', 'lineDecorations', 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth',
       'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible',
-      'scrollViewHeight', 'mouseWheelScreenRow'
+      'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount'
     )
 
     {renderedRowRange, pendingChanges} = newProps

src/react-editor-view.coffee

@@ -34,7 +34,7 @@ class ReactEditorView extends View
     node = @component.getDOMNode()
 
     @scrollView = $(node).find('.scroll-view')
-    @underlayer = $(node).find('.underlayer')
+    @underlayer = $(node).find('.highlights').addClass('underlayer')
     @overlayer = $(node).find('.lines').addClass('overlayer')
     @hiddenInput = $(node).find('.hidden-input')
 

src/underlayer-component.coffee

@@ -1,20 +0,0 @@
-React = require 'react-atom-fork'
-{div} = require 'reactionary-atom-fork'
-{isEqualForProperties} = require 'underscore-plus'
-
-module.exports =
-UnderlayerComponent = React.createClass
-  displayName: 'UnderlayerComponent'
-
-  render: ->
-    if @isMounted()
-      {scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props
-      style =
-        height: scrollHeight
-        width: scrollWidth
-        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
-
-    div {className: 'underlayer', style}
-
-  shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(@props, newProps, 'scrollTop', 'scrollLeft', 'scrollHeight', 'scrollWidth')

static/editor.less

@@ -6,14 +6,13 @@
   .underlayer {
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
-  }
-
-  .highlights {
+    right: 0;
     z-index: -2;
   }
 
-  .lines, .highlights, .underlayer {
+  .lines {
     min-width: 100%;
   }