mirror of
https://github.com/atom/atom.git
synced 2026-01-23 05:48:10 -05:00
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:
@@ -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", ->
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user