Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CLOSED] Stop using flexbox in editor's parent hierarchy #1801

Open
core-ai-bot opened this issue Aug 29, 2021 · 7 comments
Open

[CLOSED] Stop using flexbox in editor's parent hierarchy #1801

core-ai-bot opened this issue Aug 29, 2021 · 7 comments

Comments

@core-ai-bot
Copy link
Member

Issue by peterflynn
Tuesday Oct 16, 2012 at 01:31 GMT
Originally opened as adobe/brackets#1847


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.


peterflynn included the following code: https://github.com/adobe/brackets/pull/1847/commits

@core-ai-bot
Copy link
Member Author

Comment by peterflynn
Tuesday Oct 16, 2012 at 01:34 GMT


Randy noticed a bug when you use the show/hide sidebar toggle. I have a fix that I'll incorporate along with the first round of code review changes -- so don't actually merge this yet.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Tuesday Oct 16, 2012 at 15:16 GMT


Done with initial review.

@core-ai-bot
Copy link
Member Author

Comment by peterflynn
Tuesday Oct 16, 2012 at 21:00 GMT


Fixes pushed. This fixes the bug Randy spotted and one more I found (see commit comments), plus code review feedback.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Tuesday Oct 16, 2012 at 23:20 GMT


Done reviewing. Just 1 minor question about a comment.

@core-ai-bot
Copy link
Member Author

Comment by peterflynn
Wednesday Oct 17, 2012 at 00:45 GMT


@redmunds: pushed up a clarification to that comment.

@core-ai-bot
Copy link
Member Author

Comment by redmunds
Wednesday Oct 17, 2012 at 00:50 GMT


Looks good. Merging.

@core-ai-bot
Copy link
Member Author

Comment by peterflynn
Wednesday Oct 17, 2012 at 00:57 GMT


Thanks! (Also thanks to@gruehle who acted as another scenario-testing guinea pig for this change)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant