Add editor.gpuDisabled option to prevent React editor from using layers

When gpuDisabled is true, we use `translate` instead of `translate3d`
to position various elements, preventing the creation of GPU layers.

src/cursor-component.coffee

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

src/cursors-component.coffee

@@ -12,7 +12,7 @@ CursorsComponent = React.createClass
   cursorBlinkIntervalHandle: null
 
   render: ->
-    {cursorPixelRects, scrollTop, scrollLeft, defaultCharWidth} = @props
+    {cursorPixelRects, scrollTop, scrollLeft, defaultCharWidth, gpuDisabled} = @props
     {blinkOff} = @state
 
     className = 'cursors'
@@ -34,7 +34,7 @@ CursorsComponent = React.createClass
 
   shouldComponentUpdate: (newProps, newState) ->
     not newState.blinkOff is @state.blinkOff or
-      not isEqualForProperties(newProps, @props, 'cursorPixelRects', 'scrollTop', 'scrollLeft', 'defaultCharWidth')
+      not isEqualForProperties(newProps, @props, 'cursorPixelRects', 'scrollTop', 'scrollLeft', 'defaultCharWidth', 'gpuDisabled')
 
   componentWillUpdate: (newProps) ->
     cursorsMoved = @props.cursorPixelRects? and

src/editor-component.coffee

@@ -74,7 +74,7 @@ EditorComponent = React.createClass
       verticallyScrollable = editor.verticallyScrollable()
       horizontallyScrollable = editor.horizontallyScrollable()
       hiddenInputStyle = @getHiddenInputPosition()
-      hiddenInputStyle.WebkitTransform = 'translateZ(0)'
+      hiddenInputStyle.WebkitTransform = 'translateZ(0)' unless @gpuDisabled
       if @mouseWheelScreenRow? and not (renderedStartRow <= @mouseWheelScreenRow < renderedEndRow)
         mouseWheelScreenRow = @mouseWheelScreenRow
 
@@ -87,7 +87,7 @@ EditorComponent = React.createClass
         GutterComponent {
           ref: 'gutter', onMouseDown: @onGutterMouseDown, onWidthChanged: @onGutterWidthChanged,
           lineDecorations, defaultCharWidth, editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight,
-          scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow
+          scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow, @gpuDisabled
         }
 
       div ref: 'scrollView', className: 'scroll-view', onMouseDown: @onMouseDown,
@@ -100,14 +100,14 @@ EditorComponent = React.createClass
 
         CursorsComponent {
           scrollTop, scrollLeft, cursorPixelRects, cursorBlinkPeriod, cursorBlinkResumeDelay,
-          lineHeightInPixels, defaultCharWidth, @scopedCharacterWidthsChangeCount
+          lineHeightInPixels, defaultCharWidth, @scopedCharacterWidthsChangeCount, @gpuDisabled
         }
         LinesComponent {
           ref: 'lines',
           editor, lineHeightInPixels, defaultCharWidth, lineDecorations, highlightDecorations,
           showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft,
           @scrollingVertically, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
-          visible, scrollViewHeight, @scopedCharacterWidthsChangeCount, lineWidth
+          visible, scrollViewHeight, @scopedCharacterWidthsChangeCount, lineWidth, @gpuDisabled
         }
 
       ScrollbarComponent
@@ -481,6 +481,7 @@ EditorComponent = React.createClass
     @subscribe atom.config.observe 'editor.showInvisibles', @setShowInvisibles
     @subscribe atom.config.observe 'editor.showLineNumbers', @setShowLineNumbers
     @subscribe atom.config.observe 'editor.scrollSensitivity', @setScrollSensitivity
+    @subscribe atom.config.observe 'editor.gpuDisabled', @setGPUDisabled
 
   onFocus: ->
     @refs.input.focus()
@@ -873,6 +874,11 @@ EditorComponent = React.createClass
     if scrollSensitivity = parseInt(scrollSensitivity)
       @scrollSensitivity = Math.abs(scrollSensitivity) / 100
 
+  setGPUDisabled: (gpuDisabled) ->
+    unless @gpuDisabled is gpuDisabled
+      @gpuDisabled = gpuDisabled
+      @requestUpdate()
+
   screenPositionForMouseEvent: (event) ->
     pixelPosition = @pixelPositionForMouseEvent(event)
     @props.editor.screenPositionForPixelPosition(pixelPosition)

src/editor-view.coffee

@@ -57,6 +57,7 @@ class EditorView extends View
     softTabs: true
     softWrapAtPreferredLineLength: false
     scrollSensitivity: 40
+    gpuDisabled: false
 
   @nextEditorId: 1
 

src/gutter-component.coffee

@@ -15,14 +15,22 @@ GutterComponent = React.createClass
   measuredWidth: null
 
   render: ->
-    {scrollHeight, scrollViewHeight, scrollTop, onMouseDown} = @props
+    {scrollHeight, scrollViewHeight, onMouseDown} = @props
 
     div className: 'gutter', onClick: @onClick, onMouseDown: onMouseDown,
       # 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)"
+        WebkitTransform: @getTransform()
+
+  getTransform: ->
+    {scrollTop, gpuDisabled} = @props
+
+    if gpuDisabled
+      "translate(0px, #{-scrollTop}px)"
+    else
+      "translate3d(0px, #{-scrollTop}px, 0px)"
 
   componentWillMount: ->
     @lineNumberNodesById = {}
@@ -39,7 +47,7 @@ GutterComponent = React.createClass
   shouldComponentUpdate: (newProps) ->
     return true unless isEqualForProperties(newProps, @props,
       'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'mouseWheelScreenRow', 'lineDecorations',
-      'scrollViewHeight'
+      'scrollViewHeight', 'gpuDisabled'
     )
 
     {renderedRowRange, pendingChanges, lineDecorations} = newProps

src/lines-component.coffee

@@ -16,18 +16,26 @@ LinesComponent = React.createClass
 
   render: ->
     if @isMounted()
-      {editor, highlightDecorations, scrollTop, scrollLeft, scrollHeight, scrollWidth} = @props
+      {editor, highlightDecorations, scrollHeight, scrollWidth} = @props
       {lineHeightInPixels, defaultCharWidth, scrollViewHeight, scopedCharacterWidthsChangeCount} = @props
       style =
         height: Math.max(scrollHeight, scrollViewHeight)
         width: scrollWidth
-        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
+        WebkitTransform: @getTransform()
 
     # 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})
 
+  getTransform: ->
+    {scrollTop, scrollLeft, gpuDisabled} = @props
+
+    if gpuDisabled
+      "translate(#{-scrollLeft}px, #{-scrollTop}px)"
+    else
+      "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
+
   componentWillMount: ->
     @measuredLines = new WeakSet
     @lineNodesByLineId = {}
@@ -39,7 +47,7 @@ LinesComponent = React.createClass
     return true unless isEqualForProperties(newProps, @props,
       'renderedRowRange', 'lineDecorations', 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth',
       'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible',
-      'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount', 'lineWidth'
+      'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount', 'lineWidth', 'gpuDisabled'
     )
 
     {renderedRowRange, pendingChanges} = newProps