diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js index 84d964b06..38fe16f15 100644 --- a/spec/text-editor-component-spec.js +++ b/spec/text-editor-component-spec.js @@ -1508,7 +1508,7 @@ describe('TextEditorComponent', () => { } }) - it('renders multi-line highlights that span across tiles', async () => { + it('renders multi-line highlights', async () => { const {component, element, editor} = buildComponent({rowsPerTile: 3}) const marker = editor.markScreenRange([[2, 4], [3, 4]]) editor.decorateMarker(marker, {type: 'highlight', class: 'a'}) @@ -1516,9 +1516,7 @@ describe('TextEditorComponent', () => { await component.getNextUpdatePromise() { - // We have 2 top-level highlight divs due to the regions being split - // across 2 different tiles - expect(element.querySelectorAll('.highlight.a').length).toBe(2) + expect(element.querySelectorAll('.highlight.a').length).toBe(1) const regions = element.querySelectorAll('.highlight.a .region.a') expect(regions.length).toBe(2) @@ -1539,11 +1537,10 @@ describe('TextEditorComponent', () => { await component.getNextUpdatePromise() { - // Still split across 2 tiles - expect(element.querySelectorAll('.highlight.a').length).toBe(2) + expect(element.querySelectorAll('.highlight.a').length).toBe(1) const regions = element.querySelectorAll('.highlight.a .region.a') - expect(regions.length).toBe(4) // Each tile renders its + expect(regions.length).toBe(3) const region0Rect = regions[0].getBoundingClientRect() expect(region0Rect.top).toBe(lineNodeForScreenRow(component, 2).getBoundingClientRect().top) @@ -1553,21 +1550,15 @@ describe('TextEditorComponent', () => { const region1Rect = regions[1].getBoundingClientRect() expect(region1Rect.top).toBe(lineNodeForScreenRow(component, 3).getBoundingClientRect().top) - expect(region1Rect.bottom).toBe(lineNodeForScreenRow(component, 4).getBoundingClientRect().top) + expect(region1Rect.bottom).toBe(lineNodeForScreenRow(component, 5).getBoundingClientRect().top) expect(Math.round(region1Rect.left)).toBe(component.refs.content.getBoundingClientRect().left) expect(Math.round(region1Rect.right)).toBe(component.refs.content.getBoundingClientRect().right) const region2Rect = regions[2].getBoundingClientRect() - expect(region2Rect.top).toBe(lineNodeForScreenRow(component, 4).getBoundingClientRect().top) - expect(region2Rect.bottom).toBe(lineNodeForScreenRow(component, 5).getBoundingClientRect().top) + expect(region2Rect.top).toBe(lineNodeForScreenRow(component, 5).getBoundingClientRect().top) + expect(region2Rect.bottom).toBe(lineNodeForScreenRow(component, 6).getBoundingClientRect().top) expect(Math.round(region2Rect.left)).toBe(component.refs.content.getBoundingClientRect().left) - expect(Math.round(region2Rect.right)).toBe(component.refs.content.getBoundingClientRect().right) - - const region3Rect = regions[3].getBoundingClientRect() - expect(region3Rect.top).toBe(lineNodeForScreenRow(component, 5).getBoundingClientRect().top) - expect(region3Rect.bottom).toBe(lineNodeForScreenRow(component, 5).getBoundingClientRect().bottom) - expect(Math.round(region3Rect.left)).toBe(component.refs.content.getBoundingClientRect().left) - expect(Math.round(region3Rect.right)).toBe(clientLeftForCharacter(component, 5, 4)) + expect(Math.round(region2Rect.right)).toBe(clientLeftForCharacter(component, 5, 4)) } }) @@ -1580,20 +1571,15 @@ describe('TextEditorComponent', () => { // Flash on initial appearence of highlight await component.getNextUpdatePromise() const highlights = element.querySelectorAll('.highlight.a') - expect(highlights.length).toBe(2) // split across 2 tiles + expect(highlights.length).toBe(1) expect(highlights[0].classList.contains('b')).toBe(true) - expect(highlights[1].classList.contains('b')).toBe(true) - await conditionPromise(() => - !highlights[0].classList.contains('b') && - !highlights[1].classList.contains('b') - ) + await conditionPromise(() => !highlights[0].classList.contains('b')) // Don't flash on next update if another flash wasn't requested await setScrollTop(component, 100) expect(highlights[0].classList.contains('b')).toBe(false) - expect(highlights[1].classList.contains('b')).toBe(false) // Flashing the same class again before the first flash completes // removes the flash class and adds it back on the next frame to ensure @@ -1601,22 +1587,13 @@ describe('TextEditorComponent', () => { decoration.flash('e', 100) await component.getNextUpdatePromise() expect(highlights[0].classList.contains('e')).toBe(true) - expect(highlights[1].classList.contains('e')).toBe(true) decoration.flash('e', 100) await component.getNextUpdatePromise() expect(highlights[0].classList.contains('e')).toBe(false) - expect(highlights[1].classList.contains('e')).toBe(false) - await conditionPromise(() => - highlights[0].classList.contains('e') && - highlights[1].classList.contains('e') - ) - - await conditionPromise(() => - !highlights[0].classList.contains('e') && - !highlights[1].classList.contains('e') - ) + await conditionPromise(() => highlights[0].classList.contains('e')) + await conditionPromise(() => !highlights[0].classList.contains('e')) }) it("flashing a highlight decoration doesn't unflash other highlight decorations", async () => { @@ -1628,16 +1605,14 @@ describe('TextEditorComponent', () => { decoration.flash('c', 1000) await component.getNextUpdatePromise() const highlights = element.querySelectorAll('.highlight.a') + expect(highlights.length).toBe(1) expect(highlights[0].classList.contains('c')).toBe(true) - expect(highlights[1].classList.contains('c')).toBe(true) // Flash another class while the previously-flashed class is still highlighted decoration.flash('d', 100) await component.getNextUpdatePromise() expect(highlights[0].classList.contains('c')).toBe(true) - expect(highlights[1].classList.contains('c')).toBe(true) expect(highlights[0].classList.contains('d')).toBe(true) - expect(highlights[1].classList.contains('d')).toBe(true) }) it('supports layer decorations', async () => { @@ -2002,7 +1977,7 @@ describe('TextEditorComponent', () => { ]) assertLinesAreAlignedWithLineNumbers(component) expect(queryOnScreenLineElements(element).length).toBe(9) - expect(item1.previousSibling.className).toBe('highlights') + expect(item1.previousSibling).toBeNull() expect(item1.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 1)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 2)) @@ -2026,7 +2001,7 @@ describe('TextEditorComponent', () => { ]) assertLinesAreAlignedWithLineNumbers(component) expect(queryOnScreenLineElements(element).length).toBe(9) - expect(item1.previousSibling.className).toBe('highlights') + expect(item1.previousSibling).toBeNull() expect(item1.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 1)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 2)) @@ -2081,7 +2056,7 @@ describe('TextEditorComponent', () => { expect(element.contains(item1)).toBe(false) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7)) expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7)) @@ -2104,9 +2079,9 @@ describe('TextEditorComponent', () => { assertLinesAreAlignedWithLineNumbers(component) expect(queryOnScreenLineElements(element).length).toBe(9) expect(element.contains(item1)).toBe(false) - expect(item2.previousSibling.className).toBe('highlights') + expect(item2.previousSibling).toBeNull() expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 3)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(element.contains(item4)).toBe(false) expect(element.contains(item5)).toBe(false) @@ -2128,7 +2103,7 @@ describe('TextEditorComponent', () => { assertLinesAreAlignedWithLineNumbers(component) expect(queryOnScreenLineElements(element).length).toBe(9) expect(element.contains(item1)).toBe(false) - expect(item2.previousSibling.className).toBe('highlights') + expect(item2.previousSibling).toBeNull() expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 3)) expect(element.contains(item3)).toBe(false) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 9)) @@ -2155,7 +2130,7 @@ describe('TextEditorComponent', () => { expect(element.contains(item1)).toBe(false) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7)) expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7)) @@ -2185,7 +2160,7 @@ describe('TextEditorComponent', () => { expect(element.contains(item1)).toBe(false) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7)) expect(item5.previousSibling).toBe(lineNodeForScreenRow(component, 7)) @@ -2223,7 +2198,7 @@ describe('TextEditorComponent', () => { expect(element.contains(item1)).toBe(false) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7)) @@ -2250,7 +2225,7 @@ describe('TextEditorComponent', () => { expect(element.contains(item1)).toBe(false) expect(item2.previousSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item2.nextSibling).toBe(lineNodeForScreenRow(component, 1)) - expect(item3.previousSibling.className).toBe('highlights') + expect(item3.previousSibling).toBeNull() expect(item3.nextSibling).toBe(lineNodeForScreenRow(component, 0)) expect(item4.previousSibling).toBe(lineNodeForScreenRow(component, 6)) expect(item4.nextSibling).toBe(lineNodeForScreenRow(component, 7)) diff --git a/src/text-editor-component.js b/src/text-editor-component.js index 2d904c401..158b29b18 100644 --- a/src/text-editor-component.js +++ b/src/text-editor-component.js @@ -156,7 +156,7 @@ class TextEditorComponent { this.decorationsToRender = { lineNumbers: null, lines: null, - highlights: new Map(), + highlights: [], cursors: [], overlays: [], customGutter: new Map(), @@ -164,7 +164,7 @@ class TextEditorComponent { text: [] } this.decorationsToMeasure = { - highlights: new Map(), + highlights: [], cursors: new Map() } this.textDecorationsByMarker = new Map() @@ -546,7 +546,6 @@ class TextEditorComponent { } renderContent () { - let children let style = { contain: 'strict', overflow: 'hidden', @@ -557,17 +556,6 @@ class TextEditorComponent { style.height = ceilToPhysicalPixelBoundary(this.getScrollHeight()) + 'px' style.willChange = 'transform' style.transform = `translate(${-roundToPhysicalPixelBoundary(this.getScrollLeft())}px, ${-roundToPhysicalPixelBoundary(this.getScrollTop())}px)` - children = [ - this.renderLineTiles(), - this.renderBlockDecorationMeasurementArea(), - this.renderCharacterMeasurementLine() - ] - } else { - children = [ - this.renderLineTiles(), - this.renderBlockDecorationMeasurementArea(), - this.renderCharacterMeasurementLine() - ] } return $.div( @@ -576,10 +564,23 @@ class TextEditorComponent { on: {mousedown: this.didMouseDownOnContent}, style }, - children + this.renderHighlightDecorations(), + this.renderLineTiles(), + this.renderBlockDecorationMeasurementArea(), + this.renderCharacterMeasurementLine() ) } + renderHighlightDecorations () { + return $(HighlightsComponent, { + hasInitialMeasurements: this.hasInitialMeasurements, + highlightDecorations: this.decorationsToRender.highlights.slice(), + width: this.getScrollWidth(), + height: this.getScrollHeight(), + lineHeight: this.getLineHeight() + }) + } + renderLineTiles () { const children = [] const style = { @@ -615,7 +616,6 @@ class TextEditorComponent { lineDecorations: this.decorationsToRender.lines.slice(tileStartRow - startRow, tileEndRow - startRow), textDecorations: this.decorationsToRender.text.slice(tileStartRow - startRow, tileEndRow - startRow), blockDecorations: this.decorationsToRender.blocks.get(tileStartRow), - highlightDecorations: this.decorationsToRender.highlights.get(tileStartRow), displayLayer: this.props.model.displayLayer, nodePool: this.lineNodesPool, lineComponentsByScreenLineId @@ -963,7 +963,7 @@ class TextEditorComponent { this.decorationsToRender.customGutter.clear() this.decorationsToRender.blocks = new Map() this.decorationsToRender.text = [] - this.decorationsToMeasure.highlights.clear() + this.decorationsToMeasure.highlights.length = 0 this.decorationsToMeasure.cursors.clear() this.textDecorationsByMarker.clear() this.textDecorationBoundaries.length = 0 @@ -1061,34 +1061,16 @@ class TextEditorComponent { const {class: className, flashRequested, flashClass, flashDuration} = decoration decoration.flashRequested = false - - let tileStartRow = this.tileStartRowForRow(screenRange.start.row) - const rowsPerTile = this.getRowsPerTile() - - while (tileStartRow <= screenRange.end.row) { - const tileEndRow = tileStartRow + rowsPerTile - const screenRangeInTile = constrainRangeToRows(screenRange, tileStartRow, tileEndRow) - - let tileHighlights = this.decorationsToMeasure.highlights.get(tileStartRow) - if (!tileHighlights) { - tileHighlights = [] - this.decorationsToMeasure.highlights.set(tileStartRow, tileHighlights) - } - - tileHighlights.push({ - screenRange: screenRangeInTile, - key, - className, - flashRequested, - flashClass, - flashDuration - }) - - this.requestHorizontalMeasurement(screenRangeInTile.start.row, screenRangeInTile.start.column) - this.requestHorizontalMeasurement(screenRangeInTile.end.row, screenRangeInTile.end.column) - - tileStartRow = tileStartRow + rowsPerTile - } + this.decorationsToMeasure.highlights.push({ + screenRange, + key, + className, + flashRequested, + flashClass, + flashDuration + }) + this.requestHorizontalMeasurement(screenRange.start.row, screenRange.start.column) + this.requestHorizontalMeasurement(screenRange.end.row, screenRange.end.column) } addCursorDecorationToMeasure (decoration, marker, screenRange, reversed) { @@ -1309,18 +1291,16 @@ class TextEditorComponent { } updateHighlightsToRender () { - this.decorationsToRender.highlights.clear() - this.decorationsToMeasure.highlights.forEach((highlights, tileRow) => { - for (let i = 0, length = highlights.length; i < length; i++) { - const highlight = highlights[i] - const {start, end} = highlight.screenRange - highlight.startPixelTop = this.pixelPositionAfterBlocksForRow(start.row) - highlight.startPixelLeft = this.pixelLeftForRowAndColumn(start.row, start.column) - highlight.endPixelTop = this.pixelPositionAfterBlocksForRow(end.row) + this.getLineHeight() - highlight.endPixelLeft = this.pixelLeftForRowAndColumn(end.row, end.column) - } - this.decorationsToRender.highlights.set(tileRow, highlights) - }) + this.decorationsToRender.highlights.length = 0 + for (let i = 0; i < this.decorationsToMeasure.highlights.length; i++) { + const highlight = this.decorationsToMeasure.highlights[i] + const {start, end} = highlight.screenRange + highlight.startPixelTop = this.pixelPositionAfterBlocksForRow(start.row) + highlight.startPixelLeft = this.pixelLeftForRowAndColumn(start.row, start.column) + highlight.endPixelTop = this.pixelPositionAfterBlocksForRow(end.row) + this.getLineHeight() + highlight.endPixelLeft = this.pixelLeftForRowAndColumn(end.row, end.column) + this.decorationsToRender.highlights.push(highlight) + } } updateCursorsToRender () { @@ -3533,10 +3513,8 @@ class CursorsAndInputComponent { class LinesTileComponent { constructor (props) { - this.highlightComponentsByKey = new Map() this.props = props etch.initialize(this) - this.updateHighlights() this.createLines() this.updateBlockDecorations({}, props) } @@ -3550,16 +3528,10 @@ class LinesTileComponent { this.updateLines(oldProps, newProps) this.updateBlockDecorations(oldProps, newProps) } - this.updateHighlights() } } destroy () { - this.highlightComponentsByKey.forEach((highlightComponent) => { - highlightComponent.destroy() - }) - this.highlightComponentsByKey.clear() - for (let i = 0; i < this.lineComponents.length; i++) { this.lineComponents[i].destroy() } @@ -3580,12 +3552,7 @@ class LinesTileComponent { width: width + 'px', transform: `translateY(${top}px)` } - }, - $.div({ - ref: 'highlights', - className: 'highlights', - style: {layout: 'contain'} - }) + } // Lines and block decorations will be manually inserted here for efficiency ) } @@ -3775,40 +3742,6 @@ class LinesTileComponent { } } - updateHighlights () { - const {top, lineHeight, highlightDecorations} = this.props - - const visibleHighlightDecorations = new Set() - if (highlightDecorations) { - for (let i = 0; i < highlightDecorations.length; i++) { - const highlightDecoration = highlightDecorations[i] - - const highlightProps = Object.assign( - {parentTileTop: top, lineHeight}, - highlightDecorations[i] - ) - let highlightComponent = this.highlightComponentsByKey.get(highlightDecoration.key) - if (highlightComponent) { - highlightComponent.update(highlightProps) - } else { - highlightComponent = new HighlightComponent(highlightProps) - this.refs.highlights.appendChild(highlightComponent.element) - this.highlightComponentsByKey.set(highlightDecoration.key, highlightComponent) - } - - highlightDecorations[i].flashRequested = false - visibleHighlightDecorations.add(highlightDecoration.key) - } - } - - this.highlightComponentsByKey.forEach((highlightComponent, key) => { - if (!visibleHighlightDecorations.has(key)) { - highlightComponent.destroy() - this.highlightComponentsByKey.delete(key) - } - }) - } - shouldUpdate (newProps) { const oldProps = this.props if (oldProps.top !== newProps.top) return true @@ -3820,25 +3753,6 @@ class LinesTileComponent { if (!arraysEqual(oldProps.screenLines, newProps.screenLines)) return true if (!arraysEqual(oldProps.lineDecorations, newProps.lineDecorations)) return true - if (!oldProps.highlightDecorations && newProps.highlightDecorations) return true - if (oldProps.highlightDecorations && !newProps.highlightDecorations) return true - - if (oldProps.highlightDecorations && newProps.highlightDecorations) { - if (oldProps.highlightDecorations.length !== newProps.highlightDecorations.length) return true - - for (let i = 0, length = oldProps.highlightDecorations.length; i < length; i++) { - const oldHighlight = oldProps.highlightDecorations[i] - const newHighlight = newProps.highlightDecorations[i] - if (oldHighlight.className !== newHighlight.className) return true - if (newHighlight.flashRequested) return true - if (oldHighlight.startPixelTop !== newHighlight.startPixelTop) return true - if (oldHighlight.startPixelLeft !== newHighlight.startPixelLeft) return true - if (oldHighlight.endPixelTop !== newHighlight.endPixelTop) return true - if (oldHighlight.endPixelLeft !== newHighlight.endPixelLeft) return true - if (!oldHighlight.screenRange.isEqual(newHighlight.screenRange)) return true - } - } - if (oldProps.blockDecorations && newProps.blockDecorations) { if (oldProps.blockDecorations.size !== newProps.blockDecorations.size) return true @@ -4009,6 +3923,90 @@ class LineComponent { } } +class HighlightsComponent { + constructor (props) { + this.props = {} + this.element = document.createElement('div') + this.element.className = 'highlights' + this.element.style.contain = 'strict' + this.element.style.position = 'absolute' + this.element.style.overflow = 'hidden' + this.highlightComponentsByKey = new Map() + this.update(props) + } + + destroy () { + this.highlightComponentsByKey.forEach((highlightComponent) => { + highlightComponent.destroy() + }) + this.highlightComponentsByKey.clear() + } + + update (newProps) { + if (this.shouldUpdate(newProps)) { + this.props = newProps + const {height, width, lineHeight, highlightDecorations} = this.props + + this.element.style.height = height + 'px' + this.element.style.width = width + 'px' + + const visibleHighlightDecorations = new Set() + if (highlightDecorations) { + for (let i = 0; i < highlightDecorations.length; i++) { + const highlightDecoration = highlightDecorations[i] + const highlightProps = Object.assign({lineHeight}, highlightDecorations[i]) + + let highlightComponent = this.highlightComponentsByKey.get(highlightDecoration.key) + if (highlightComponent) { + highlightComponent.update(highlightProps) + } else { + highlightComponent = new HighlightComponent(highlightProps) + this.element.appendChild(highlightComponent.element) + this.highlightComponentsByKey.set(highlightDecoration.key, highlightComponent) + } + + highlightDecorations[i].flashRequested = false + visibleHighlightDecorations.add(highlightDecoration.key) + } + } + + this.highlightComponentsByKey.forEach((highlightComponent, key) => { + if (!visibleHighlightDecorations.has(key)) { + highlightComponent.destroy() + this.highlightComponentsByKey.delete(key) + } + }) + } + } + + shouldUpdate (newProps) { + const oldProps = this.props + + if (!newProps.hasInitialMeasurements) return false + + if (oldProps.width !== newProps.width) return true + if (oldProps.height !== newProps.height) return true + if (oldProps.lineHeight !== newProps.lineHeight) return true + if (!oldProps.highlightDecorations && newProps.highlightDecorations) return true + if (oldProps.highlightDecorations && !newProps.highlightDecorations) return true + if (oldProps.highlightDecorations && newProps.highlightDecorations) { + if (oldProps.highlightDecorations.length !== newProps.highlightDecorations.length) return true + + for (let i = 0, length = oldProps.highlightDecorations.length; i < length; i++) { + const oldHighlight = oldProps.highlightDecorations[i] + const newHighlight = newProps.highlightDecorations[i] + if (oldHighlight.className !== newHighlight.className) return true + if (newHighlight.flashRequested) return true + if (oldHighlight.startPixelTop !== newHighlight.startPixelTop) return true + if (oldHighlight.startPixelLeft !== newHighlight.startPixelLeft) return true + if (oldHighlight.endPixelTop !== newHighlight.endPixelTop) return true + if (oldHighlight.endPixelLeft !== newHighlight.endPixelLeft) return true + if (!oldHighlight.screenRange.isEqual(newHighlight.screenRange)) return true + } + } + } +} + class HighlightComponent { constructor (props) { this.props = props @@ -4054,15 +4052,12 @@ class HighlightComponent { } render () { - let {startPixelTop, endPixelTop} = this.props const { - className, screenRange, parentTileTop, lineHeight, - startPixelLeft, endPixelLeft + className, screenRange, lineHeight, + startPixelTop, startPixelLeft, endPixelTop, endPixelLeft } = this.props - startPixelTop -= parentTileTop - endPixelTop -= parentTileTop + const regionClassName = 'region ' + className - let regionClassName = 'region ' + className let children if (screenRange.start.row === screenRange.end.row) { children = $.div({ diff --git a/static/text-editor.less b/static/text-editor.less index 1a4a2db7d..21cba8482 100644 --- a/static/text-editor.less +++ b/static/text-editor.less @@ -70,10 +70,6 @@ atom-text-editor { } } - .lines { - background-color: inherit; - } - .highlight { background: none; padding: 0;