Skip to content
This repository has been archived by the owner on Mar 3, 2023. It is now read-only.

Rewrite editor rendering layout to use new browser features and virtual DOM #13880

merged 306 commits into from May 5, 2017


Copy link

@nathansobo nathansobo commented Feb 26, 2017

In this PR, I plan to completely rewrite editor rendering to take advantage of CSS layout containment and intersection observers. This PR will also use Etch to perform declarative updates instead of the existing presenter with manual DOM manipulation, which has not aged well. I'm optimistic that a simpler layout, a cleaner approach to DOM updates, and better use of features such as layout containment can make our rendering faster and much more maintainable.

My goal is to rethink all of the DOM interactions associated with the editor to make sure things are as optimal as possible.


  • Content
    • Render initial lines
    • Render initial line numbers
    • Update on scroll
    • Update on buffer changes
    • Adjust soft wrap on resize
    • Scroll past end option
    • Mini editors working
    • Hide line numbers option
    • Placeholder text
    • Auto height and width
    • Synthetic scrolling
    • Dummy scrollbars
  • Cursors
    • Basic rendering
    • Auto-scroll
      • Vertical
      • Horizontal
    • Blinking
    • Option to hide with non-empty selections
    • Cursors positioned after a fold marker are not displayed correctly
    • Official API for customizing cursor styling
  • Input handling
    • Position hidden input element
    • Focus
    • Editor commands
    • Text input
    • IME input
    • Disabled input
    • Mouse handling
      • Single click to set cursor position
      • Double click to select word
      • Triple click to select line
      • Add cursors with cmd-click
      • Expand selections with shift-click
      • Drag selections
      • Autoscroll when dragging selections
      • Autoscroll when dragging gutter
      • Click/drag gutter to select lines
      • Click gutter to toggle folding
      • Destroy folds when clicking fold markers
      • Middle mouse paste on Linux
      • Scroll horizontally on shift-wheel
  • Decorations
    • Make marker layer events synchronous
    • Line
    • Line Number
    • Highlights
    • Highlight flashes
    • Overlays
    • Custom gutters
    • Blocks
    • Never decorate invalidated markers
    • Fix git-diff gutter decorations being shown at the end of the tile
  • Update on external changes
    • Resize
    • Gutter container resize
    • Font size and styling changes
    • Show/hide
    • Refresh scrollbar appearance when scrollbar styling changes
  • Other
    • Core tests passing
    • Package tests passing
    • Delete obsolete tests
    • Do we need to support onDidChangeFirstVisibleScreenRow?
    • Add screen-row data fields to line nodes for package compatibility
    • Audit API of previous TextEditorElement implementation
    • Clean up editor style sheets
    • Revisit virtual node recycling and explore other approaches
    • Schedule updates directly in editor model instead of via subscriptions
    • Ensure proper setup/teardown on attach/detach
    • Failed to activate the pigments package, cannot find highlights-component in the require cache We'll need to introduce a new API to support the use case that @abe33 is monkey patching private implementation details to support. We'll need to merge this before doing that.
    • Maintain logical scroll position when changing font size
  • Regressions
  • Optimization (any of these can happen after integrating and merging)
    • Contain layout of cursor position and selection count in status bar
    • When a tile is assigned a different start row, discard all of its lines rather than removing them 1 by 1
    • Recycle DOM nodes?
    • Optimize line numbers query in display layer
    • Cache isFoldable
    • Low-hanging fruits in keystroke code path

@nathansobo nathansobo changed the base branch from master to tj-upgrade-electron February 27, 2017 16:07
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 71c77d4 to 08ab871 Compare February 28, 2017 04:09
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 3 times, most recently from 549dcbc to a52a495 Compare March 2, 2017 12:52
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 0d09906 to b18e4bc Compare March 6, 2017 21:59
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 3 times, most recently from 56c74c7 to 3f1eac8 Compare March 8, 2017 03:47
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 7239e66 to ee03592 Compare March 10, 2017 05:16
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch 5 times, most recently from 7e6ac71 to a89b440 Compare March 22, 2017 10:41
Copy link

Is there a new issue for the remaining optimization tasks that I can follow?

Copy link

👏 Congratulations guys. Such awesome work.

Copy link

lierdakil commented Jul 3, 2017

So... uh... sorry if it's a wrong place to ask this question, but before this PR, all custom gutter decorations had an automatic .decoration CSS class (see here). Here, this is not the case (see here and here). Is it intentional? Because it's going to lead to some broken stylesheets and maybe even code.

P.S. Created #14941 for good measure.

Copy link

Levertion commented Jul 23, 2017

(at)abe33 Are you willing to fix some of your monkey-patches in packages to work with this new editor? We're adding an API to enable you to inject styled spans into the markup, but there some other places where things just need adjustment.

Will this deal with #8669 ? - it reads like it will. Thanks if so, that would be awesome.
Sorry abe33 if this sent you a message, not sure about how github comments work

Copy link

alexandernst commented Jul 23, 2017 via email

Copy link

Levertion commented Jul 23, 2017


No, this PR has nothing to do with #8669, but you can follow tree-sitter,
which does.

This api sounds like you would be able to recreate the highlighting though by putting your own spans in for custom highlighting, is this correct.

EDIT2:Found the source code from the blog page in

Copy link

theFroh commented Jul 28, 2017

Not entirely certain how related it is, but linter-ui-default#355. Steps to reproduce for me are to open a couple of files which will be linted, and then close them with CTRL-W (core:close). Interestingly, using the mouse to navigate to and close the tabs via their close button does not trigger this.

Copy link

steveoh commented Aug 9, 2017

would this be the pr that changed the way fonts are rendering?

Copy link

@steveoh That would be part of #12696 which updated Atom from Electron v1.3.5 (Chrome 52) to Electron v1.6.9 (Chrome 56).

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
None yet

Successfully merging this pull request may close these issues.

None yet