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

[nathansobo]

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.

Tasks

• 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
  • Ensure autoscrolling works correctly (when clicking "go to code" the cursor is positioned correctly, but scroll top is wrong).
  • Stack-overflow exception with Nuclide Debugger (Rewrite editor rendering layout to use new browser features and virtual DOM #13880 (comment))
  • Failed to activate the minimap-autohider package, cannot read property onDidChangeScrollTop of null
  • Uncaught TypeError: this.textEditorElement.getFirstVisibleScreenRow is not a function from minimap
  • Uncaught TypeError: editorElement.component.pixelPositionForMouseEvent is not a function from linter-ui-default
  • With atom-material-syntax matching brackets are not highlighted
  • highlight-selected does not highlight selected words but it works when setting a custom highlight-selected style in the personal style sheet.
  • Matching brackets are not highlighted when they occur on the same line and material-syntax is on (Rewrite editor rendering layout to use new browser features and virtual DOM #13880 (comment))
  • Uncaught TypeError: Cannot read property 'id' of null (Rewrite editor rendering layout to use new browser features and virtual DOM #13880 (comment))
  • Content of mini editors is shifted right as if there were a gutter, but there isn't. (Rewrite editor rendering layout to use new browser features and virtual DOM #13880 (comment))
  • Subpixel anti-aliasing sometimes breaks for a specific tile, possibly due to its contents overflowing.
  • Tiles are laid out incorrectly during the first frame (Rewrite editor rendering layout to use new browser features and virtual DOM #13880 (comment))
  • Editor width for soft-wrap should take into account vertical scroll bar width
  • Clicking past the last line does not update cursor position when scrollPastEnd is disabled.
• 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

[alexandernst]

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

[maxbrunsfeld]

👏 Congratulations guys. Such awesome work.

[lierdakil]

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.

[Levertion]

(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

[alexandernst]

No, this PR has nothing to do with #8669, but you can follow tree-sitter, which does. El El dom, 23 jul 2017 a las 15:49, Levertion <notifications@github.com> escribió:

…

@abe33 <https://github.com/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 <#8669> ? - it reads like it will. Thanks if so, that would be awesome — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#13880 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAFef2klJ5QoOA_PB_hq3pfW7b9srKaHks5sQ09XgaJpZM4MMdrz> .

[Levertion]

@alexandernst

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 atom.io blog page in https://github.com/atom/atom/pull/14790/files#diff-561e90889eebfd1149f1b29006d738c4R1790

[theFroh]

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.

[steveoh]

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

[Arcanemagus]

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