Optimization: Use absolute positioning instead of flexbox in editor

Flexbox was causing layouts and repaints to cover the entire scroll view instead of just the edited line. This cuts down on DOM manipulation cost significantly.
This commit is contained in:
Nathan Sobo
2012-09-25 13:27:46 -06:00
parent a6352497b9
commit 5f253d78e9
5 changed files with 38 additions and 23 deletions

View File

@@ -19,10 +19,9 @@ class Editor extends View
@content: (params) ->
@div class: @classes(params), tabindex: -1, =>
@input class: 'hidden-input', outlet: 'hiddenInput'
@div class: 'flexbox', =>
@subview 'gutter', new Gutter
@div class: 'scroll-view', outlet: 'scrollView', =>
@div class: 'lines', outlet: 'renderedLines', =>
@subview 'gutter', new Gutter
@div class: 'scroll-view', outlet: 'scrollView', =>
@div class: 'lines', outlet: 'renderedLines', =>
@div class: 'vertical-scrollbar', outlet: 'verticalScrollbar', =>
@div outlet: 'verticalScrollbarContent'
@@ -135,7 +134,7 @@ class Editor extends View
'page-down': @pageDown
'page-up': @pageUp
if not @mini
unless @mini
_.extend editorBindings,
'save': @save
'newline-below': @insertNewlineBelow
@@ -154,7 +153,6 @@ class Editor extends View
'show-previous-buffer': @loadPreviousEditSession
'toggle-line-comments': @toggleLineCommentsInSelection
for name, method of editorBindings
do (name, method) =>
@on name, => method.call(this); false
@@ -331,6 +329,10 @@ class Editor extends View
@verticalScrollbar.on 'scroll', =>
@scrollTop(@verticalScrollbar.scrollTop(), adjustVerticalScrollbar: false)
unless @mini
@gutter.widthChanged = (newWidth) =>
@scrollView.css('left', newWidth + 'px')
@scrollView.on 'scroll', =>
if @scrollView.scrollLeft() == 0
@gutter.removeClass('drop-shadow')
@@ -680,7 +682,7 @@ class Editor extends View
@height(@lineHeight) if @mini
fragment.remove()
@gutter.calculateDimensions()
@gutter.calculateWidth()
prepareForScrolling: ->
@adjustHeightOfRenderedLines()