Style the .line-numbers div to be compatible w/ both themes and the GPU

The .line-numbers div has to have an opaque background because it's
sent as a texture to the GPU, and otherwise it will have isuses with
subpixel antialiasing.

However, themes style the background of the .gutter div, which was
getting obscured by the opaque background of the line numbers. This
commit adds the .gutter class to the .line-numbers div as well and
ensures it always fills the entire height of the editor.
This commit is contained in:
Nathan Sobo
2014-06-18 12:36:02 -06:00
parent 29d26a4fae
commit 8d87eb2ed6
3 changed files with 14 additions and 6 deletions

View File

@@ -319,6 +319,11 @@ 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()
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", ->

View File

@@ -78,7 +78,7 @@ EditorComponent = React.createClass
div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
GutterComponent {
ref: 'gutter', lineDecorations,
editor, renderedRowRange, maxLineNumberDigits,
editor, renderedRowRange, maxLineNumberDigits, scrollViewHeight,
scrollTop, scrollHeight, lineHeightInPixels, @pendingChanges, mouseWheelScreenRow
}

View File

@@ -14,11 +14,13 @@ GutterComponent = React.createClass
dummyLineNumberNode: null
render: ->
{scrollHeight, scrollTop} = @props
{scrollHeight, scrollViewHeight, scrollTop} = @props
div className: 'gutter editor-colors', onClick: @onClick,
div className: 'line-numbers', ref: 'lineNumbers', style:
height: scrollHeight
div className: 'gutter', onClick: @onClick,
# 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 +37,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