adobe/brackets — pull request #1847 by peterflynn (2012-10-16 01:31:50+00:00)
Title: Stop using flexbox in editor's parent hierarchy

Noticeably improves performance when scrolling, dragging selections, etc.

Should fix bugs #1354 and adobe/brackets-shell#61.

Many thanks to @chicu123 for suggesting this as a performance bottleneck (and @jasonsanjose for confirming by noting suspicious repaint regions). Test data from Alex's original proof-of-concept patch suggest this change may improve typing performance by 1/3 and nearly double scrolling framerate!

So, the two wrinkles with this are:

**Vertical layout**
Without flexbox, you'd typically have to do the equivalent vertical layout programmatically with JS -- which is no problem in this case since CodeMirror needs to get a JS call anyway each time the editor's height changes. So all that's really needed is code to calculate the desired editor height, since we can't just measure its flex container any more.

**Horizontal layout**
The horizontal layout of the sidebar + content area (the vertical toolbar/editor/panels stack) used to use a horizontal flexbox. It now uses 'float: left' for the sidebar and an equivalent margin on the content stack. The margin is needed since non-floated boxes actually underlap their floated siblings (only the flowed content inside them is actually pushed inward). This would have caused several problems: CodeMirror's mouse handling blocked the sidebar, and 'position: relative' items like the toolbar would have drawn on top of the sidebar.