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

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

Merged
merged 306 commits into from May 5, 2017

Conversation

@nathansobo
Copy link
Contributor

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.

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 (#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 (#13880 (comment))
    • Uncaught TypeError: Cannot read property 'id' of null (#13880 (comment))
    • Content of mini editors is shifted right as if there were a gutter, but there isn't. (#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 (#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
@nathansobo nathansobo changed the base branch from master to tj-upgrade-electron Feb 27, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 71c77d4 to 08ab871 Feb 27, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch from 97028f5 to f9f5e03 Feb 28, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 3 times, most recently from 549dcbc to a52a495 Feb 28, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch from f9f5e03 to fa91e29 Mar 3, 2017
@nathansobo nathansobo force-pushed the tj-upgrade-electron branch from fa91e29 to 903d009 Mar 4, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 0d09906 to b18e4bc Mar 6, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch from 903d009 to 82fc106 Mar 7, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch from f8ea9b4 to d708eaf Mar 7, 2017
@nathansobo nathansobo force-pushed the tj-upgrade-electron branch from 82fc106 to 0bcffbf Mar 8, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 3 times, most recently from 56c74c7 to 3f1eac8 Mar 8, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch from 0bcffbf to 74694ee Mar 9, 2017
@nathansobo nathansobo force-pushed the tj-upgrade-electron branch from 74694ee to 370f3b9 Mar 10, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch from 5a33334 to 4869de0 Mar 10, 2017
@nathansobo nathansobo force-pushed the tj-upgrade-electron branch from 370f3b9 to 241c87e Mar 10, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch 2 times, most recently from 7239e66 to ee03592 Mar 10, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch from 241c87e to ccbb63b Mar 14, 2017
@nathansobo nathansobo force-pushed the ns-editor-rendering branch from 9561b00 to 75b76e8 Mar 17, 2017
@thomasjo thomasjo force-pushed the tj-upgrade-electron branch 5 times, most recently from 7e6ac71 to a89b440 Mar 17, 2017
@alexandernst
Copy link

alexandernst commented May 6, 2017

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

@maxbrunsfeld
Copy link
Contributor

maxbrunsfeld commented May 8, 2017

👏 Congratulations guys. Such awesome work.

@lierdakil
Copy link
Contributor

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.

@Levertion
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

@alexandernst
Copy link

alexandernst commented Jul 23, 2017

@Levertion
Copy link

Levertion commented Jul 23, 2017

@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
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.

@steveoh
Copy link

steveoh commented Aug 9, 2017

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

@Arcanemagus
Copy link
Member

Arcanemagus commented Aug 9, 2017

@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 join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

You can’t perform that action at this time.