Take cursors off the GPU and position them on the lines layer

The compositor overhead is not worth it.

src/cursor-component.coffee

@@ -8,22 +8,11 @@ CursorComponent = React.createClass
 
   render: ->
     {pixelRect, defaultCharWidth} = @props
-    {height, width} = pixelRect
+    {top, left, height, width} = pixelRect
     width = defaultCharWidth if width is 0
-    WebkitTransform = @getTransform()
+    WebkitTransform = "translate(#{left}px, #{top}px)"
 
     div className: 'cursor', style: {height, width, WebkitTransform}
 
-  getTransform: ->
-    {pixelRect, scrollTop, scrollLeft, useHardwareAcceleration} = @props
-    {top, left} = pixelRect
-    top -= scrollTop
-    left -= scrollLeft
-
-    if useHardwareAcceleration
-      "translate3d(#{left}px, #{top}px, 0px)"
-    else
-      "translate(#{left}px, #{top}px)"
-
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'pixelRect', 'scrollTop', 'scrollLeft', 'defaultCharWidth')
+    not isEqualForProperties(newProps, @props, 'pixelRect', 'defaultCharWidth')

src/cursors-component.coffee

@@ -12,7 +12,7 @@ CursorsComponent = React.createClass
   cursorBlinkIntervalHandle: null
 
   render: ->
-    {performedInitialMeasurement, cursorPixelRects, scrollTop, scrollLeft, defaultCharWidth, useHardwareAcceleration} = @props
+    {performedInitialMeasurement, cursorPixelRects, defaultCharWidth} = @props
     {blinkOff} = @state
 
     className = 'cursors'
@@ -21,7 +21,7 @@ CursorsComponent = React.createClass
     div {className},
       if performedInitialMeasurement
         for key, pixelRect of cursorPixelRects
-          CursorComponent({key, pixelRect, scrollTop, scrollLeft, defaultCharWidth, useHardwareAcceleration})
+          CursorComponent({key, pixelRect, defaultCharWidth})
 
   getInitialState: ->
     blinkOff: false

src/editor-component.coffee

@@ -6,7 +6,6 @@ scrollbarStyle = require 'scrollbar-style'
 
 GutterComponent = require './gutter-component'
 InputComponent = require './input-component'
-CursorsComponent = require './cursors-component'
 LinesComponent = require './lines-component'
 ScrollbarComponent = require './scrollbar-component'
 ScrollbarCornerComponent = require './scrollbar-corner-component'
@@ -107,18 +106,14 @@ EditorComponent = React.createClass
           onFocus: @onInputFocused
           onBlur: @onInputBlurred
 
-        CursorsComponent {
-          scrollTop, scrollLeft, cursorPixelRects, cursorBlinkPeriod, cursorBlinkResumeDelay,
-          lineHeightInPixels, defaultCharWidth, @scopedCharacterWidthsChangeCount, @useHardwareAcceleration,
-          @performedInitialMeasurement
-        }
         LinesComponent {
           ref: 'lines',
           editor, lineHeightInPixels, defaultCharWidth, lineDecorations, highlightDecorations,
           showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft,
           @scrollingVertically, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
           @visible, scrollViewHeight, @scopedCharacterWidthsChangeCount, lineWidth, @useHardwareAcceleration,
-          placeholderText, @performedInitialMeasurement, @backgroundColor
+          placeholderText, @performedInitialMeasurement, @backgroundColor, cursorPixelRects,
+          cursorBlinkPeriod, cursorBlinkResumeDelay
         }
 
         ScrollbarComponent

src/lines-component.coffee

@@ -5,6 +5,7 @@ React = require 'react-atom-fork'
 {$$} = require 'space-pen'
 
 Decoration = require './decoration'
+CursorsComponent = require './cursors-component'
 HighlightsComponent = require './highlights-component'
 
 DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
@@ -16,11 +17,12 @@ LinesComponent = React.createClass
   displayName: 'LinesComponent'
 
   render: ->
-    {performedInitialMeasurement} = @props
+    {performedInitialMeasurement, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
 
     if performedInitialMeasurement
       {editor, highlightDecorations, scrollHeight, scrollWidth, placeholderText, backgroundColor} = @props
       {lineHeightInPixels, defaultCharWidth, scrollViewHeight, scopedCharacterWidthsChangeCount} = @props
+      {scrollTop, scrollLeft, cursorPixelRects} = @props
       style =
         height: Math.max(scrollHeight, scrollViewHeight)
         width: scrollWidth
@@ -29,7 +31,16 @@ LinesComponent = React.createClass
 
     div {className: 'lines', style},
       div className: 'placeholder-text', placeholderText if placeholderText?
-      HighlightsComponent({editor, highlightDecorations, lineHeightInPixels, defaultCharWidth, scopedCharacterWidthsChangeCount, performedInitialMeasurement})
+
+      CursorsComponent {
+        cursorPixelRects, cursorBlinkPeriod, cursorBlinkResumeDelay, lineHeightInPixels,
+        defaultCharWidth, scopedCharacterWidthsChangeCount, performedInitialMeasurement
+      }
+
+      HighlightsComponent {
+        editor, highlightDecorations, lineHeightInPixels, defaultCharWidth,
+        scopedCharacterWidthsChangeCount, performedInitialMeasurement
+      }
 
   getTransform: ->
     {scrollTop, scrollLeft, useHardwareAcceleration} = @props
@@ -51,7 +62,7 @@ LinesComponent = React.createClass
       'renderedRowRange', 'lineDecorations', 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth',
       'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible',
       'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount', 'lineWidth', 'useHardwareAcceleration',
-      'placeholderText', 'performedInitialMeasurement', 'backgroundColor'
+      'placeholderText', 'performedInitialMeasurement', 'backgroundColor', 'cursorPixelRects'
     )
 
     {renderedRowRange, pendingChanges} = newProps