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.

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

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