From c6116468e40949a67924fab709e66a693663d087 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Thu, 24 Jul 2014 16:54:01 -0700
Subject: [PATCH] Apply background color of root editor node to lines as an
 inline style

This ensures lines have an opaque background that matches whatever the
editor is styled as, but avoids the need to apply the .editor-colors
class to the .lines div. That approach fell down when people were
setting the background color via means other than .editor-colors, such
as styling mini editors via the .editor.mini selector in the settings
view.
---
 spec/editor-component-spec.coffee | 10 ++++++++++
 src/editor-component.coffee       | 12 +++++++++++-
 src/lines-component.coffee        |  5 +++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee
index 112ffec88..7f9626111 100644
--- a/spec/editor-component-spec.coffee
+++ b/spec/editor-component-spec.coffee
@@ -199,6 +199,16 @@ describe "EditorComponent", ->
       atom.config.set("editor.showInvisibles", false)
       expect(component.lineNodeForScreenRow(10).textContent).toBe nbsp
 
+    it "gives the lines div the same background color as the editor to improve GPU performance", ->
+      linesNode = componentNode.querySelector('.lines')
+      backgroundColor = getComputedStyle(wrapperNode).backgroundColor
+      expect(linesNode.style.backgroundColor).toBe backgroundColor
+
+      wrapperNode.style.backgroundColor = 'rgb(255, 0, 0)'
+      advanceClock(component.domPollingInterval)
+      runSetImmediateCallbacks()
+      expect(linesNode.style.backgroundColor).toBe 'rgb(255, 0, 0)'
+
     describe "when showInvisibles is enabled", ->
       invisibles = null
 
diff --git a/src/editor-component.coffee b/src/editor-component.coffee
index 543212e81..f9e015ad7 100644
--- a/src/editor-component.coffee
+++ b/src/editor-component.coffee
@@ -24,6 +24,7 @@ EditorComponent = React.createClass
 
   visible: false
   autoHeight: false
+  backgroundColor: null
   pendingScrollTop: null
   pendingScrollLeft: null
   selectOnMouseMove: false
@@ -118,7 +119,7 @@ EditorComponent = React.createClass
           showIndentGuide, renderedRowRange, @pendingChanges, scrollTop, scrollLeft,
           @scrollingVertically, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
           @visible, scrollViewHeight, @scopedCharacterWidthsChangeCount, lineWidth, @useHardwareAcceleration,
-          placeholderText, @performedInitialMeasurement
+          placeholderText, @performedInitialMeasurement, @backgroundColor
         }
 
         ScrollbarComponent
@@ -221,6 +222,7 @@ EditorComponent = React.createClass
     @updatesPaused = true
     @measureLineHeightAndDefaultCharWidth()
     @measureHeightAndWidth()
+    @sampleBackgroundColor()
     @measureScrollbars()
     @props.editor.setVisible(true)
     @updatesPaused = false
@@ -772,6 +774,7 @@ EditorComponent = React.createClass
     if @visible = @isVisible()
       if wasVisible
         @measureHeightAndWidth()
+        @sampleBackgroundColor()
       else
         @performInitialMeasurement()
         @forceUpdate()
@@ -813,6 +816,13 @@ EditorComponent = React.createClass
     clientWidth -= paddingLeft
     editor.setWidth(clientWidth) if clientWidth > 0
 
+  sampleBackgroundColor: (suppressUpdate) ->
+    {parentView} = @props
+    {backgroundColor} = getComputedStyle(parentView.element)
+    if backgroundColor isnt @backgroundColor
+      @backgroundColor = backgroundColor
+      @requestUpdate() unless suppressUpdate
+
   measureLineHeightAndDefaultCharWidthIfNeeded: (prevState) ->
     if not isEqualForProperties(prevState, @state, 'lineHeight', 'fontSize', 'fontFamily')
       if @visible
diff --git a/src/lines-component.coffee b/src/lines-component.coffee
index 14135089a..c4c2980ff 100644
--- a/src/lines-component.coffee
+++ b/src/lines-component.coffee
@@ -19,12 +19,13 @@ LinesComponent = React.createClass
     {performedInitialMeasurement} = @props
 
     if performedInitialMeasurement
-      {editor, highlightDecorations, scrollHeight, scrollWidth, placeholderText} = @props
+      {editor, highlightDecorations, scrollHeight, scrollWidth, placeholderText, backgroundColor} = @props
       {lineHeightInPixels, defaultCharWidth, scrollViewHeight, scopedCharacterWidthsChangeCount} = @props
       style =
         height: Math.max(scrollHeight, scrollViewHeight)
         width: scrollWidth
         WebkitTransform: @getTransform()
+        backgroundColor: backgroundColor
 
     div {className: 'lines', style},
       div className: 'placeholder-text', placeholderText if placeholderText?
@@ -50,7 +51,7 @@ LinesComponent = React.createClass
       'renderedRowRange', 'lineDecorations', 'highlightDecorations', 'lineHeightInPixels', 'defaultCharWidth',
       'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles', 'visible',
       'scrollViewHeight', 'mouseWheelScreenRow', 'scopedCharacterWidthsChangeCount', 'lineWidth', 'useHardwareAcceleration',
-      'placeholderText', 'performedInitialMeasurement'
+      'placeholderText', 'performedInitialMeasurement', 'backgroundColor'
     )
 
     {renderedRowRange, pendingChanges} = newProps