Add scrolling benchmark to React editor

📝 Add solution for "TypeError: Unable to watch path"

CONTRIBUTING.md

@@ -1,64 +1,74 @@
 # :tada: Contributing to Atom :tada:
 
-These are just guidelines, not rules, use your best judgement and feel free
-to propose changes to this document in a pull request.
+The following is a set of guidelines for contributing to Atom and its packages,
+which are hosted in the [Atom Organization](https://github.com/atom) on GitHub.
+If you're unsure which package is causing your problem or if you're having an
+issue with Atom core, please use the feedback form in the application or email
+[atom@github.com](mailto:atom@github.com). These are just guidelines, not rules,
+use your best judgement and feel free to propose changes to this document in a
+pull request.
 
-## Issues
-  * Include screenshots and animated GIFs whenever possible, they are immensely
-    helpful.
-  * Include the behavior you expected to happen and other places you've seen
-    that behavior such as Emacs, vi, Xcode, etc.
-  * Check the Console app for stack traces to include if reporting a crash.
-  * Check the Dev tools (`alt-cmd-i`) for errors and stack traces to include.
+## Submitting Issues
+
+* Include screenshots and animated GIFs whenever possible; they are immensely
+  helpful.
+* Include the behavior you expected and other places you've seen that behavior
+  such as Emacs, vi, Xcode, etc.
+* Check the dev tools (`alt-cmd-i`) for errors and stack traces to include.
+* On Mac, check Console.app for stack traces to include if reporting a crash.
+* Perform a cursory search to see if a similar issue has already been submitted.
 
 ### Package Repositories
 
 This is the repository for the core Atom editor only. Atom comes bundled with
 many packages and themes that are stored in other repos under the
-[atom organization](https://github.com/atom) such as [tabs](https://github.com/atom/tabs),
+[Atom organization](https://github.com/atom) such as
+[tabs](https://github.com/atom/tabs),
 [find-and-replace](https://github.com/atom/find-and-replace),
-[language-javascript](https://github.com/atom/language-javascript),
-and [atom-light-ui](http://github.com/atom/atom-light-ui).
+[language-javascript](https://github.com/atom/language-javascript), and
+[atom-light-ui](http://github.com/atom/atom-light-ui).
 
-If you think you know which package is causing the issue you are reporting, feel
-free to open up the issue in that specific repository instead. When in doubt
-just open the issue here but be aware that it may get closed here and reopened
-in the proper package's repository.
+For more information on how to work with Atom's official packages, see
+[Contributing to Atom Packages](https://atom.io/docs/latest/contributing-to-packages.html)
 
 ## Pull Requests
-  * Include screenshots and animated GIFs whenever possible.
-  * Follow the [CoffeeScript](#coffeescript-styleguide),
-    [JavaScript](https://github.com/styleguide/javascript),
-    and [CSS](https://github.com/styleguide/css) styleguides
-  * Include thoughtfully worded [Jasmine](http://jasmine.github.io/)
-    specs
-  * Avoid placing files in `vendor`. 3rd-party packages should be added as a
-    `package.json` dependency.
-  * Files end with a newline.
-  * Requires should be in the following order:
+
+* Include screenshots and animated GIFs in your pull request whenever possible.
+* Follow the [CoffeeScript](#coffeescript-styleguide),
+  [JavaScript](https://github.com/styleguide/javascript),
+  and [CSS](https://github.com/styleguide/css) styleguides.
+* Include thoughtfully-worded, well-structured
+  [Jasmine](http://jasmine.github.io/) specs.
+* Document new code based on the
+  [Documentation Styleguide](#documentation-styleguide)
+* End files with a newline.
+* Place requires in the following order:
     * Built in Node Modules (such as `path`)
     * Built in Atom and Atom Shell Modules (such as `atom`, `shell`)
     * Local Modules (using relative paths)
-  * Class variables and methods should be in the following order:
-    * Class methods (methods starting with a `@`)
-    * Instance methods
-  * Beware of platform differences
+* Place class properties in the following order:
+    * Class methods and properties (methods starting with a `@`)
+    * Instance methods and properties
+* Avoid platform-dependent code:
     * Use `require('atom').fs.getHomeDirectory()` to get the home directory.
     * Use `path.join()` to concatenate filenames.
-    * Temporary directory is not `/tmp` on Windows, use `os.tmpdir()` when
-      possible
+    * Use `os.tmpdir()` rather than `/tmp` when you need to reference the
+      temporary directory.
 
 ## Git Commit Messages
-  * Use the present tense
-  * Reference issues and pull requests liberally
-  * Consider starting the commit message with an applicable emoji:
+
+* Use the present tense ("Add feature" not "Added feature")
+* Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
+* Limit the first line to 72 characters or less
+* Reference issues and pull requests liberally
+* Consider starting the commit message with an applicable emoji:
     * :lipstick: `:lipstick:` when improving the format/structure of the code
     * :racehorse: `:racehorse:` when improving performance
     * :non-potable_water: `:non-potable_water:` when plugging memory leaks
     * :memo: `:memo:` when writing docs
     * :penguin: `:penguin:` when fixing something on Linux
     * :apple: `:apple:` when fixing something on Mac OS
-    * :bug: `:bug:` when fixing a bug 
+    * :bug: `:bug:` when fixing a bug
     * :fire: `:fire:` when removing code or files
     * :green_heart: `:green_heart:` when fixing the CI build
     * :white_check_mark: `:white_check_mark:` when adding tests
@@ -67,17 +77,24 @@ in the proper package's repository.
 ## CoffeeScript Styleguide
 
 * Set parameter defaults without spaces around the equal sign
-  * `clear = (count=1) ->` instead of `clear = (count = 1) ->`
+    * `clear = (count=1) ->` instead of `clear = (count = 1) ->`
+* Use parentheses if it improves code clarity.
+* Prefer alphabetic keywords to symbolic keywords:
+    * `a is b` instead of `a == b`
+* Avoid spaces inside the curly-braces of hash literals:
+    * `{a: 1, b: 2}` instead of `{ a: 1, b: 2 }`
+* Include a single line of whitespace between methods.
 
 ## Documentation Styleguide
 
 * Use [TomDoc](http://tomdoc.org).
 * Use [Markdown](https://daringfireball.net/projects/markdown).
-* Reference classes with `{ClassName}`.
-* Reference instance methods with `{ClassName::methodName}`.
-* Reference class methods with `{ClassName.methodName}`.
-* Delegate to comments elsewhere with `{Delegates to: ClassName.methodName}`
-  style notation.
+* Reference methods and classes in markdown with the custom `{}` notation:
+    * Reference classes with `{ClassName}`
+    * Reference instance methods with `{ClassName::methodName}`
+    * Reference class methods with `{ClassName.methodName}`
+    * Delegate to comments elsewhere with `{Delegates to: ClassName.methodName}`
+      style notation.
 
 ### Example
 

apm/package.json

@@ -6,6 +6,6 @@
     "url": "https://github.com/atom/atom.git"
   },
   "dependencies": {
-    "atom-package-manager": "0.54.0"
+    "atom-package-manager": "0.57.0"
   }
 }

atom.sh

@@ -70,16 +70,18 @@ elif [ $OS == 'Linux' ]; then
   USR_DIRECTORY=$(readlink -f $(dirname $SCRIPT)/..)
   ATOM_PATH="$USR_DIRECTORY/share/atom/atom"
 
-  [ -x "$ATOM_PATH" ] || ATOM_PATH='/tmp/atom-build/Atom/atom'
+  : ${TMPDIR:=/tmp}
+
+  [ -x "$ATOM_PATH" ] || ATOM_PATH="$TMPDIR/atom-build/Atom/atom"
 
   if [ $EXPECT_OUTPUT ]; then
     "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@"
     exit $?
   else
     (
-    nohup "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@" > /tmp/atom-nohup.out 2>&1
+    nohup "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@" > "$TMPDIR/atom-nohup.out" 2>&1
     if [ $? -ne 0 ]; then
-      cat /tmp/atom-nohup.out
+      cat "$TMPDIR/atom-nohup.out"
       exit $?
     fi
     ) &

build/Gruntfile.coffee

@@ -36,35 +36,23 @@ module.exports = (grunt) ->
     grunt.log.write = (args...) -> grunt.log
 
   [major, minor, patch] = packageJson.version.split('.')
+  tmpDir = os.tmpdir()
+  appName = if process.platform is 'darwin' then 'Atom.app' else 'Atom'
+  buildDir = grunt.option('build-dir') ? path.join(tmpDir, 'atom-build')
+  atomShellDownloadDir = path.join(os.tmpdir(), 'atom-cached-atom-shells')
+  symbolsDir = path.join(buildDir, 'Atom.breakpad.syms')
+  shellAppDir = path.join(buildDir, appName)
   if process.platform is 'win32'
-    appName = 'Atom'
-    tmpDir = os.tmpdir()
-    buildDir = grunt.option('build-dir') ? path.join(tmpDir, 'atom-build')
-    symbolsDir = path.join(buildDir, 'Atom.breakpad.syms')
-    shellAppDir = path.join(buildDir, appName)
     contentsDir = shellAppDir
     appDir = path.join(shellAppDir, 'resources', 'app')
-    atomShellDownloadDir = path.join(os.tmpdir(), 'atom-cached-atom-shells')
     installDir = path.join(process.env.ProgramFiles, appName)
   else if process.platform is 'darwin'
-    appName = 'Atom.app'
-    tmpDir = '/tmp'
-    buildDir = grunt.option('build-dir') ? path.join(tmpDir, 'atom-build')
-    symbolsDir = path.join(buildDir, 'Atom.breakpad.syms')
-    shellAppDir = path.join(buildDir, appName)
     contentsDir = path.join(shellAppDir, 'Contents')
     appDir = path.join(contentsDir, 'Resources', 'app')
-    atomShellDownloadDir = '/tmp/atom-cached-atom-shells'
     installDir = path.join('/Applications', appName)
   else
-    appName = 'Atom'
-    tmpDir = '/tmp'
-    buildDir = grunt.option('build-dir') ? path.join(tmpDir, 'atom-build')
-    symbolsDir = path.join(buildDir, 'Atom.breakpad.syms')
-    shellAppDir = path.join(buildDir, appName)
     contentsDir = shellAppDir
     appDir = path.join(shellAppDir, 'resources', 'app')
-    atomShellDownloadDir = '/tmp/atom-cached-atom-shells'
     installDir = process.env.INSTALL_PREFIX ? '/usr/local'
 
   coffeeConfig =

build/package.json

@@ -18,7 +18,7 @@
     "grunt-contrib-coffee": "~0.9.0",
     "grunt-contrib-less": "~0.8.0",
     "grunt-cson": "0.8.0",
-    "grunt-download-atom-shell": "~0.7.0",
+    "grunt-download-atom-shell": "~0.7.2",
     "grunt-lesslint": "0.13.0",
     "grunt-markdown": "~0.4.0",
     "grunt-peg": "~1.1.0",

build/tasks/clean-task.coffee

@@ -5,7 +5,7 @@ module.exports = (grunt) ->
   {rm} = require('./task-helpers')(grunt)
 
   grunt.registerTask 'partial-clean', 'Delete some of the build files', ->
-    tmpdir = if process.platform is 'win32' then os.tmpdir() else '/tmp'
+    tmpdir = os.tmpdir()
 
     rm grunt.config.get('atom.buildDir')
     rm require('../src/coffee-cache').cacheDir

docs/build-instructions/freebsd.md

@@ -15,7 +15,7 @@ FreeBSD -RELEASE 64-bit is the recommended platform.
   ```sh
   git clone https://github.com/atom/atom
   cd atom
-  script/build # Creates application at /tmp/atom-build/Atom
+  script/build # Creates application at $TMPDIR/atom-build/Atom
   sudo script/grunt install # Installs command to /usr/local/bin/atom
   ```
 

docs/build-instructions/linux.md

@@ -10,14 +10,40 @@ Ubuntu LTS 12.04 64-bit is the recommended platform.
   * libgnome-keyring-dev `sudo apt-get install libgnome-keyring-dev` (refer to your distribution's manual on how to install packages if you are not on Debian or Ubuntu-based systems)
   * `npm config set python /usr/bin/python2 -g` to ensure that gyp uses Python 2
 
+
 ## Instructions
 
   ```sh
   git clone https://github.com/atom/atom
   cd atom
-  script/build # Creates application at /tmp/atom-build/Atom
+  script/build # Creates application at $TMPDIR/atom-build/Atom
   sudo script/grunt install # Installs command to /usr/local/bin/atom
-  script/grunt mkdeb # Generates a .deb package at /tmp/atom-build
+  script/grunt mkdeb # Generates a .deb package at $TMPDIR/atom-build
   ```
 
+
 ## Troubleshooting
+
+
+### Exception: "TypeError: Unable to watch path"
+
+If you get following error with a big traceback right after Atom starts:
+
+  ```
+  TypeError: Unable to watch path
+  ```
+
+you have to increase number of watched files by inotify.  For testing if
+this is the reason for this error you can issue
+
+  ```sh
+  sudo sysctl fs.inotify.max_user_watches=32768
+  ```
+
+and restart Atom.  If Atom now works fine, you can make this setting permanent:
+
+  ```sh
+  echo 32768 > /proc/sys/fs/inotify/max_user_watches
+  ```
+
+See also https://github.com/atom/atom/issues/2082.

docs/build-instructions/windows.md

@@ -3,40 +3,33 @@
 ## Requirements
 
   * Windows 7 or later
-  * [Visual C++ 2010 SP1 Express](http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs#DownloadFamilies_4)
-  * [node.js - 32bit](http://nodejs.org/download/) v0.10.x
-  * [Python 2.7.x](http://www.python.org/download/)
+  * [Visual C++ 2010 Express](http://www.visualstudio.com/en-us/downloads/download-visual-studio-vs#DownloadFamilies_4) with [SP1](http://www.microsoft.com/en-us/download/details.aspx?id=23691)
+  * [node.js](http://nodejs.org/download/) v0.10.x
+  * [Python](http://www.python.org/download/) v2.7.x
   * [GitHub for Windows](http://windows.github.com/)
-    to your PATH
-  * Open the Windows GitHub shell (NOT the Standard PowerShell, the shortcut labeled 'Git Shell' - make sure you have logged in at least once to the GitHub for Windows GUI App)
-  * `$env:Path = $env:Path + ";C:\path\to\atom\repo\node_modules"`
 
 ## Instructions
 
   ```bat
+  # Use the `Git Shell` app which was installed by GitHub for Windows. Also Make
+  # sure you have logged into the GitHub for Windows GUI App.
   cd C:\
-  git clone https://github.com/atom/atom
+  git clone https://github.com/atom/atom/
   cd atom
   script\build
   ```
 
-## Why do I have to use GitHub for Windows? Can't I just use my existing Git?
+## Why do I have to use GitHub for Windows?
 
-You totally can! GitHub for Windows's Git Shell just takes less work to set up. You need to have Posix tools in your `%PATH%` (i.e. `grep`, `sed`, et al.), which isn't the default configuration when you install Git. To fix this, you probably need to fiddle with your system PATH.
+You don't, You can use your existing Git! GitHub for Windows's Git Shell is just
+easier to set up. You need to have Posix tools in your `%PATH%` (i.e. `grep`,
+`sed`, et al.), which isn't the default configuration when you install Git. To
+fix this, you probably need to fiddle with your system PATH.
 
 ## Troubleshooting
 
-Some of the most common errors include:
+### Common Errors
+* `node is not recognized`
 
-    gyp WARN install got an error, rolling back install
-and
-
-    >> The system cannot find the path specified.
-
-These two error messages can usually be ignored. The solution to these errors is to re-run `script\build`, possibly several times.
-
-If your Visual Studio is in a non-standard location, and you get the error `You must have Visual Studio 2010 or 2012 installed`, you need to modify `apm\node_modules\atom-package-manager\lib\config.js` around line 90 and replace the variable with your Visual Studio directory plus Common7/IDE.
-
-Example:
-
-    vs2010Path = "H:/VS2010/Common7/IDE"
+  * If you just installed node you need to restart your computer before node is
+  available on your Path.

docs/contributing-to-packages.md

@@ -0,0 +1,52 @@
+# Contributing to Official Atom Packages
+
+If you think you know which package is causing the issue you are reporting, feel
+free to open up the issue in that specific repository instead. When in doubt
+just open the issue here but be aware that it may get closed here and reopened
+in the proper package's repository.
+
+## Hacking on Packages
+
+### Cloning
+
+The first step is creating your own clone. You can of course do this manually
+with git, or you can use the `apm develop` command to create a clone based on
+the package's `repository` field in the `package.json`.
+
+For example, if you want to make changes to the `tree-view` package, run the
+following command:
+
+```
+> apm develop tree-view
+Cloning https://github.com/atom/tree-view ✓
+Installing modules ✓
+~/.atom/dev/packages/tree-view -> ~/github/tree-view
+```
+
+This clones the `tree-view` repository to `~/github`. If you prefer a different
+path, specify it via the `ATOM_REPOS_HOME` environment variable.
+
+### Running in Development Mode
+
+Editing a package in Atom is a bit of a circular experience: you're using Atom
+to modify itself. What happens if you temporarily break something? You don't
+want the version of Atom you're using to edit to become useless in the process.
+For this reason, you'll only want to load packages in **development mode** while
+you are working on them. You'll perform your editing in **stable mode**, only
+switching to development mode to test your changes.
+
+To open a development mode window, use the "Application: Open Dev" command,
+which is normally bound to `cmd-shift-o`. You can also run dev mode from the
+command line with `atom --dev`.
+
+To load your package in development mode, create a symlink to it in
+`~/.atom/dev/packages`. This occurs automatically when you clone the package
+with `apm develop`. You can also run `apm link --dev` and `apm unlink --dev`
+from the package directory to create and remove dev-mode symlinks.
+
+### Installing Dependencies
+
+Finally, you need to install the cloned package's dependencies by running
+`apm install` within the package directory. This step is also performed
+automatically the first time you run `apm develop`, but you'll want to keep
+dependencies up to date by running `apm update` after pulling upstream changes.

docs/contributing.md

@@ -1,142 +0,0 @@
-# Contributing to Atom Packages
-
-The following is a set of guidelines for contributing to Atom packages, which
-are hosted in the [Atom Organization](https://github.com/atom) on GitHub. If
-you're unsure which package is causing your problem or if you're having an issue
-with Atom core, please use the feedback form in the application or email
-[atom@github.com](mailto:atom@github.com).
-
-## Submitting Issues
-
-* Include screenshots and animated GIFs whenever possible; they are immensely
-  helpful.
-* Include the behavior you expected and other places you've seen that behavior
-  such as Emacs, vi, Xcode, etc.
-* Check the dev tools (`alt-cmd-i`) for errors and stack traces to include.
-* Check Console.app for stack traces to include if reporting a crash.
-* Perform a cursory search to see if a similar issue has already been submitted.
-
-## Hacking on Packages
-
-### Cloning
-
-The first step is creating your own clone. You can of course do this manually
-with git, or you can use the `apm develop` command to create a clone based on
-the package's `repository` field in the `package.json`.
-
-For example, if you want to make changes to the `tree-view` package, run the
-following command:
-
-```
-> apm develop tree-view
-Cloning https://github.com/atom/tree-view ✓
-Installing modules ✓
-~/.atom/dev/packages/tree-view -> ~/github/tree-view
-```
-
-This clones the `tree-view` repository to `~/github`. If you prefer a different
-path, specify it via the `ATOM_REPOS_HOME` environment variable.
-
-### Running in Development Mode
-
-Editing a package in Atom is a bit of a circular experience: you're using Atom
-to modify itself. What happens if you temporarily break something? You don't
-want the version of Atom you're using to edit to become useless in the process.
-For this reason, you'll only want to load packages in **development mode** while
-you are working on them. You'll perform your editing in **stable mode**, only
-switching to development mode to test your changes.
-
-To open a development mode window, use the "Application: Open Dev" command,
-which is normally bound to `cmd-shift-o`. You can also run dev mode from the
-command line with `atom --dev`.
-
-To load your package in development mode, create a symlink to it in
-`~/.atom/dev/packages`. This occurs automatically when you clone the package
-with `apm develop`. You can also run `apm link --dev` and `apm unlink --dev`
-from the package directory to create and remove dev-mode symlinks.
-
-### Installing Dependencies
-
-Finally, you need to install the cloned package's dependencies by running
-`apm install` within the package directory. This step is also performed
-automatically the first time you run `apm develop`, but you'll want to keep
-dependencies up to date by running `apm update` after pulling upstream changes.
-
-## Submitting Pull Requests
-
-### Code Guidelines
-
-* Include screenshots and animated GIFs in your pull request whenever possible.
-* Follow the [CoffeeScript](#coffeescript-styleguide),
-  [JavaScript](https://github.com/styleguide/javascript),
-  and [CSS](https://github.com/styleguide/css) styleguides.
-* Include thoughtfully-worded, well-structured
-  [Jasmine](http://pivotal.github.com/jasmine) specs.
-* Document new code based on the
-  [Documentation Styleguide](#documentation-styleguide)
-* End files with a newline.
-* Place requires in the following order:
-  * Built in Node Modules (such as `path`)
-  * Built in Atom and Atom Shell Modules (such as `atom`, `shell`)
-  * Local Modules (using relative paths)
-* Place class properties in the following order:
-  * Class methods and properties (methods starting with a `@`)
-  * Instance methods and properties
-* Avoid platform-dependent code:
-  * Use `require('atom').fs.getHomeDirectory()` to get the home directory.
-  * Use `path.join()` to concatenate filenames.
-  * Use `os.tmpdir()` rather than `/tmp` when you need to reference the
-    temporary directory.
-
-### Commit Message Guidelines
-  * Use the present tense ("Add feature" not "Added feature")
-  * Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
-  * Limit the first line to 72 characters or less
-  * Reference issues and pull requests liberally
-  * Consider starting the commit message with an applicable emoji:
-    * :lipstick: when improving the format/structure of the code
-    * :racehorse: when improving performance
-    * :non-potable_water: when plugging memory leaks
-    * :memo: when writing docs
-    * :bulb: Check out the [Emoji Cheat Sheet](http://www.emoji-cheat-sheet.com)
-      for more ideas.
-
-## CoffeeScript Styleguide
-
-* Use parentheses if it improves code clarity.
-* Prefer alphabetic keywords to symbolic keywords:
-  * `a is b` instead of `a == b`
-* Avoid spaces inside the curly-braces of hash literals:
-  * `{a: 1, b: 2}` instead of `{ a: 1, b: 2 }`
-* Set parameter defaults without spaces around the equal sign:
-  * `clear = (count=1) ->` instead of `clear = (count = 1) ->`
-* Include a single line of whitespace between methods.
-
-## Documentation Styleguide
-
-* Use [TomDoc](http://tomdoc.org).
-* Use [Markdown](https://daringfireball.net/projects/markdown).
-* Reference methods and classes in markdown with the custom `{}` notation:
-  * Reference classes with `{ClassName}`
-  * Reference instance methods with `{ClassName::methodName}`
-  * Reference class methods with `{ClassName.methodName}`
-
-### Example
-
-```coffee
-# Public: Disable the package with the given name.
-#
-# This method emits multiple events:
-#
-# * `package-will-be-disabled` - before the package is disabled.
-# * `package-disabled`         - after the package is disabled.
-#
-# name     - The {String} name of the package to disable.
-# options  - The {Object} with disable options (default: {}):
-#   :trackTime - `true` to track the amount of time disabling took.
-#   :ignoreErrors - `true` to catch and ignore errors thrown.
-# callback - The {Function} to call after the package has been disabled.
-#
-# Returns `undefined`.
-disablePackage: (name, options, callback) ->
-```

docs/contributing.md

@@ -0,0 +1 @@
+../CONTRIBUTING.md

docs/index.md

@@ -5,6 +5,7 @@
 * [Creating a Package](creating-a-package.md)
 * [Creating a Theme](creating-a-theme.md)
 * [Publishing a Package](publishing-a-package.md)
+* [Writing Specs](writing-specs.md)
 * [Converting a TextMate Bundle](converting-a-text-mate-bundle.md)
 * [Converting a TextMate Theme](converting-a-text-mate-theme.md)
 * [Contributing](contributing.md)

docs/writing-specs.md

@@ -0,0 +1,61 @@
+# Writting specs
+
+Atom uses [Jasmine](http://jasmine.github.io/2.0/introduction.html) as its spec framework. Any new functionality should have specs to guard against regressions.
+
+## Create a new spec
+
+[Atom specs](https://github.com/atom/atom/tree/master/spec) and [package specs](https://github.com/atom/markdown-preview/tree/master/spec) are added to their respective `spec` directory. The example below creates a spec for Atom core.
+
+0. Create a spec file
+
+  Spec files **must** end with `-spec` so add `sample-spec.coffee` to `atom/spec`.
+
+0. Add one or more `describe` method
+
+  The `describe` method takes two arguments, a description and a function. If the description explains a behavior it typically begins with `when` if it is more like a unit test it begins with the method name.
+
+  ```coffee
+  describe "when a test is written", ->
+    # contents
+  ```
+
+  or
+
+  ```coffee
+  describe "Editor::moveUp", ->
+    # contents
+  ```
+
+0. Add one or more `it` method
+
+  The `it` method also takes two arugments, a description and a function. Try and make the description flow with the `it` method. For example, a description of `this should work` doesn't read well as `it this should work`. But a description of `should work` sounds great as `it should work`.
+
+  ```coffee
+  describe "when a test is written", ->
+    it "has some expectations that should pass", ->
+      # Expectations
+  ```
+
+0. Add one or more expectations
+
+  The best way to learn about expectations is to read the [jamsine documentation](http://jasmine.github.io/2.0/introduction.html#section-Expectations) about them. Below is a simple example.
+
+  ```coffee
+  describe "when a test is written", ->
+    it "has some expectations that should pass", ->
+      expect("apples").toEqual("apples")
+      expect("oranges").not.toEqual("apples")
+  ```
+
+## Runnings specs
+
+Most of the time you'll want to run specs by triggering the `window:run-package-specs` command. This command is not only to run package specs, it is also for Atom core specs. This will run all the specs in the current project's spec directory. If you want to run the Atom core specs and **all** the default package specs trigger the `window:run-all-specs` command.
+
+To run a limited subset of specs use the `fdescribe` or `fit` methods. You can use those to focus a single spec or several specs. In the example above, focusing an individual spec looks like this:
+
+```coffee
+describe "when a test is written", ->
+  fit "has some expectations that should pass", ->
+    expect("apples").toEqual("apples")
+    expect("oranges").not.toEqual("apples")
+```

docs/your-first-package.md

@@ -149,6 +149,8 @@ ASCII art professional!
 
 * [Getting your project on GitHub guide](http://guides.github.com/overviews/desktop)
 
+* [Writing specs](writing-specs.md) for your package
+
 * [Creating a package guide](creating-a-package.html) for more information
   on the mechanics of packages
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "atom",
   "productName": "Atom",
-  "version": "0.96.0",
+  "version": "0.97.0",
   "description": "A hackable text editor for the 21st Century.",
   "main": "./src/browser/main.js",
   "repository": {
@@ -20,7 +20,7 @@
   "atomShellVersion": "0.12.5",
   "dependencies": {
     "async": "0.2.6",
-    "atom-keymap": "^0.19.0",
+    "atom-keymap": "^0.22.0",
     "bootstrap": "git+https://github.com/atom/bootstrap.git#6af81906189f1747fd6c93479e3d998ebe041372",
     "clear-cut": "0.4.0",
     "coffee-script": "1.7.0",
@@ -45,8 +45,8 @@
     "property-accessors": "^1",
     "q": "^1.0.1",
     "random-words": "0.0.1",
-    "react": "^0.10.0",
-    "reactionary": "^0.9.0",
+    "react-atom-fork": "^0.10.0",
+    "reactionary-atom-fork": "^0.9.0",
     "runas": "^0.5",
     "scandal": "0.15.2",
     "scoped-property-store": "^0.9.0",
@@ -54,11 +54,11 @@
     "season": "^1.0.2",
     "semver": "1.1.4",
     "serializable": "^1",
-    "space-pen": "3.1.1",
+    "space-pen": "3.2.0",
     "temp": "0.5.0",
     "text-buffer": "^2.2.2",
     "theorist": "^1",
-    "underscore-plus": "^1.2.1",
+    "underscore-plus": "^1.3.0",
     "vm-compatibility-layer": "0.1.0"
   },
   "packageDependencies": {
@@ -75,31 +75,31 @@
     "autosave": "0.13.0",
     "background-tips": "0.13.0",
     "bookmarks": "0.22.0",
-    "bracket-matcher": "0.34.0",
+    "bracket-matcher": "0.38.0",
     "command-palette": "0.21.0",
     "deprecation-cop": "0.5.0",
     "dev-live-reload": "0.30.0",
     "exception-reporting": "0.17.0",
     "feedback": "0.33.0",
-    "find-and-replace": "0.105.0",
+    "find-and-replace": "0.106.0",
     "fuzzy-finder": "0.51.0",
     "git-diff": "0.28.0",
-    "go-to-line": "0.20.0",
+    "go-to-line": "0.21.0",
     "grammar-selector": "0.26.0",
     "image-view": "0.33.0",
     "keybinding-resolver": "0.17.0",
     "link": "0.22.0",
-    "markdown-preview": "0.71.0",
+    "markdown-preview": "0.72.0",
     "metrics": "0.32.0",
     "open-on-github": "0.28.0",
     "package-generator": "0.30.0",
     "release-notes": "0.31.0",
-    "settings-view": "0.115.0",
+    "settings-view": "0.116.0",
     "snippets": "0.43.0",
     "spell-check": "0.35.0",
     "status-bar": "0.40.0",
     "styleguide": "0.29.0",
-    "symbols-view": "0.52.0",
+    "symbols-view": "0.53.0",
     "tabs": "0.40.0",
     "timecop": "0.18.0",
     "tree-view": "0.93.0",
@@ -110,7 +110,7 @@
     "language-c": "0.15.0",
     "language-coffee-script": "0.22.0",
     "language-css": "0.16.0",
-    "language-gfm": "0.37.0",
+    "language-gfm": "0.38.0",
     "language-git": "0.9.0",
     "language-go": "0.12.0",
     "language-html": "0.22.0",
@@ -124,8 +124,8 @@
     "language-perl": "0.8.0",
     "language-php": "0.14.0",
     "language-property-list": "0.7.0",
-    "language-python": "0.16.0",
-    "language-ruby": "0.24.0",
+    "language-python": "0.17.0",
+    "language-ruby": "0.25.0",
     "language-ruby-on-rails": "0.14.0",
     "language-sass": "0.11.0",
     "language-shellscript": "0.8.0",

script/bootstrap

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+var fs = require('fs');
+
 var nodeVersion = process.versions.node.split('.')
 var nodeMajorVersion = +nodeVersion[0]
 var nodeMinorVersion = +nodeVersion[1]
@@ -8,6 +10,12 @@ if (nodeMajorVersion === 0 && nodeMinorVersion < 10) {
   process.exit(1);
 }
 
+// Make sure python2.7 is installed
+if (process.platform == 'win32' && !fs.existsSync('C:\\Python27\\')) {
+  console.warn("You must have Python 2.7 installed at 'C:\\Python27\\'");
+  process.exit(1);
+}
+
 var safeExec = require('./utils/child-process-wrapper.js').safeExec;
 var fs = require('fs');
 var path = require('path');

script/clean

@@ -8,7 +8,7 @@ var productName = require('../package.json').productName;
 
 process.chdir(path.dirname(__dirname));
 var home = process.env[(process.platform === 'win32') ? 'USERPROFILE' : 'HOME'];
-var tmpdir = process.platform === 'win32' ? os.tmpdir() : '/tmp';
+var tmpdir = os.tmpdir();
 
 // Windows: Use START as a way to ignore error if Atom.exe isnt running
 var killatom = process.platform === 'win32' ? 'START taskkill /F /IM ' + productName + '.exe' : 'pkill -9 ' + productName + ' || true';

spec/display-buffer-spec.coffee

@@ -948,7 +948,7 @@ describe "DisplayBuffer", ->
       it "returns the start and end positions of the marker based on the line height and character widths assigned to the DisplayBuffer", ->
         marker = displayBuffer.markScreenRange([[5, 10], [6, 4]])
 
-        displayBuffer.setLineHeight(20)
+        displayBuffer.setLineHeightInPixels(20)
         displayBuffer.setDefaultCharWidth(10)
         displayBuffer.setScopedCharWidths(["source.js", "keyword.control.js"], r: 11, e: 11, t: 11, u: 11, n: 11)
 
@@ -959,7 +959,7 @@ describe "DisplayBuffer", ->
   describe "::setScrollTop", ->
     beforeEach ->
       displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)
 
     it "disallows negative values", ->
       displayBuffer.setHeight(displayBuffer.getScrollHeight() + 100)
@@ -979,7 +979,7 @@ describe "DisplayBuffer", ->
   describe "::setScrollLeft", ->
     beforeEach ->
       displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)
       displayBuffer.setDefaultCharWidth(10)
 
     it "disallows negative values", ->
@@ -1000,7 +1000,7 @@ describe "DisplayBuffer", ->
   describe "::scrollToScreenPosition(position)", ->
     it "sets the scroll top and scroll left so the given screen position is in view", ->
       displayBuffer.manageScrollPosition = true
-      displayBuffer.setLineHeight(10)
+      displayBuffer.setLineHeightInPixels(10)
       displayBuffer.setDefaultCharWidth(10)
       displayBuffer.setHorizontalScrollbarHeight(0)
 

spec/editor-component-spec.coffee

@@ -1,12 +1,16 @@
-{extend, flatten, toArray, last} = require 'underscore-plus'
+_ = require 'underscore-plus'
+{extend, flatten, toArray, last} = _
+
 ReactEditorView = require '../src/react-editor-view'
 nbsp = String.fromCharCode(160)
 
 describe "EditorComponent", ->
   [contentNode, editor, wrapperView, component, node, verticalScrollbarNode, horizontalScrollbarNode] = []
-  [lineHeightInPixels, charWidth, delayAnimationFrames, nextAnimationFrame] = []
+  [lineHeightInPixels, charWidth, delayAnimationFrames, nextAnimationFrame, lineOverdrawMargin] = []
 
   beforeEach ->
+    lineOverdrawMargin = 2
+
     waitsForPromise ->
       atom.packages.activatePackage('language-javascript')
 
@@ -29,69 +33,156 @@ describe "EditorComponent", ->
       contentNode = document.querySelector('#jasmine-content')
       contentNode.style.width = '1000px'
 
-      wrapperView = new ReactEditorView(editor)
+      wrapperView = new ReactEditorView(editor, {lineOverdrawMargin})
       wrapperView.attachToDom()
       {component} = wrapperView
       component.setLineHeight(1.3)
       component.setFontSize(20)
 
-      lineHeightInPixels = editor.getLineHeight()
+      lineHeightInPixels = editor.getLineHeightInPixels()
       charWidth = editor.getDefaultCharWidth()
       node = component.getDOMNode()
       verticalScrollbarNode = node.querySelector('.vertical-scrollbar')
       horizontalScrollbarNode = node.querySelector('.horizontal-scrollbar')
 
+      node.style.height = editor.getLineCount() * lineHeightInPixels + 'px'
+      node.style.width = '1000px'
+      component.measureHeightAndWidth()
+
   afterEach ->
     contentNode.style.width = ''
 
   describe "line rendering", ->
-    it "renders only the currently-visible lines", ->
+    it "renders the currently-visible lines plus the overdraw margin", ->
       node.style.height = 4.5 * lineHeightInPixels + 'px'
       component.measureHeightAndWidth()
 
-      lines = node.querySelectorAll('.line')
-      expect(lines.length).toBe 6
-      expect(lines[0].textContent).toBe editor.lineForScreenRow(0).text
-      expect(lines[5].textContent).toBe editor.lineForScreenRow(5).text
+      linesNode = node.querySelector('.lines')
+      expect(linesNode.style['-webkit-transform']).toBe "translate3d(0px, 0px, 0px)"
+      expect(node.querySelectorAll('.line').length).toBe 6 + 2 # no margin above
+      expect(component.lineNodeForScreenRow(0).textContent).toBe editor.lineForScreenRow(0).text
+      expect(component.lineNodeForScreenRow(0).offsetTop).toBe 0
+      expect(component.lineNodeForScreenRow(5).textContent).toBe editor.lineForScreenRow(5).text
+      expect(component.lineNodeForScreenRow(5).offsetTop).toBe 5 * lineHeightInPixels
 
-      verticalScrollbarNode.scrollTop = 2.5 * lineHeightInPixels
+      verticalScrollbarNode.scrollTop = 4.5 * lineHeightInPixels
       verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
 
-      expect(node.querySelector('.scroll-view-content').style['-webkit-transform']).toBe "translate3d(0px, #{-2.5 * lineHeightInPixels}px, 0)"
+      expect(linesNode.style['-webkit-transform']).toBe "translate3d(0px, #{-4.5 * lineHeightInPixels}px, 0px)"
+      expect(node.querySelectorAll('.line').length).toBe 6 + 4 # margin above and below
+      expect(component.lineNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(2).textContent).toBe editor.lineForScreenRow(2).text
+      expect(component.lineNodeForScreenRow(9).offsetTop).toBe 9 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(9).textContent).toBe editor.lineForScreenRow(9).text
 
-      lineNodes = node.querySelectorAll('.line')
-      expect(lineNodes.length).toBe 6
-      expect(lineNodes[0].offsetTop).toBe 2 * lineHeightInPixels
-      expect(lineNodes[0].textContent).toBe editor.lineForScreenRow(2).text
-      expect(lineNodes[5].textContent).toBe editor.lineForScreenRow(7).text
-
-    it "updates absolute positions of subsequent lines when lines are inserted or removed", ->
+    it "updates the top position of subsequent lines when lines are inserted or removed", ->
       editor.getBuffer().deleteRows(0, 1)
       lineNodes = node.querySelectorAll('.line')
-      expect(lineNodes[0].offsetTop).toBe 0
-      expect(lineNodes[1].offsetTop).toBe 1 * lineHeightInPixels
-      expect(lineNodes[2].offsetTop).toBe 2 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(0).offsetTop).toBe 0
+      expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
 
       editor.getBuffer().insert([0, 0], '\n\n')
       lineNodes = node.querySelectorAll('.line')
-      expect(lineNodes[0].offsetTop).toBe 0
-      expect(lineNodes[1].offsetTop).toBe 1 * lineHeightInPixels
-      expect(lineNodes[2].offsetTop).toBe 2 * lineHeightInPixels
-      expect(lineNodes[3].offsetTop).toBe 3 * lineHeightInPixels
-      expect(lineNodes[4].offsetTop).toBe 4 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(0).offsetTop).toBe 0 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(3).offsetTop).toBe 3 * lineHeightInPixels
+      expect(component.lineNodeForScreenRow(4).offsetTop).toBe 4 * lineHeightInPixels
+
+    it "updates the top position of lines when the line height changes", ->
+      initialLineHeightInPixels = editor.getLineHeightInPixels()
+      component.setLineHeight(2)
+
+      newLineHeightInPixels = editor.getLineHeightInPixels()
+      expect(newLineHeightInPixels).not.toBe initialLineHeightInPixels
+      expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * newLineHeightInPixels
+
+    it "updates the top position of lines when the font size changes", ->
+      initialLineHeightInPixels = editor.getLineHeightInPixels()
+      component.setFontSize(10)
+
+      newLineHeightInPixels = editor.getLineHeightInPixels()
+      expect(newLineHeightInPixels).not.toBe initialLineHeightInPixels
+      expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * newLineHeightInPixels
+
+    it "updates the top position of lines when the font family changes", ->
+      # Can't find a font that changes the line height, but we think one might exist
+      linesComponent = component.refs.scrollView.refs.lines
+      spyOn(linesComponent, 'measureLineHeightInPixelsAndCharWidth').andCallFake -> editor.setLineHeightInPixels(10)
+
+      initialLineHeightInPixels = editor.getLineHeightInPixels()
+      component.setFontFamily('sans-serif')
+
+      expect(linesComponent.measureLineHeightInPixelsAndCharWidth).toHaveBeenCalled()
+      newLineHeightInPixels = editor.getLineHeightInPixels()
+      expect(newLineHeightInPixels).not.toBe initialLineHeightInPixels
+      expect(component.lineNodeForScreenRow(1).offsetTop).toBe 1 * newLineHeightInPixels
+
+    it "renders the .lines div at the full height of the editor if there aren't enough lines to scroll vertically", ->
+      editor.setText('')
+      node.style.height = '300px'
+      component.measureHeightAndWidth()
+
+      linesNode = node.querySelector('.lines')
+      expect(linesNode.offsetHeight).toBe 300
+
+    describe "when showInvisibles is enabled", ->
+      invisibles = null
+
+      beforeEach ->
+        invisibles =
+          eol: 'E'
+          space: 'S'
+          tab: 'T'
+          cr: 'C'
+
+        atom.config.set("editor.showInvisibles", true)
+        atom.config.set("editor.invisibles", invisibles)
+
+      it "re-renders the lines when the showInvisibles config option changes", ->
+        editor.setText " a line with tabs\tand spaces "
+
+        expect(component.lineNodeForScreenRow(0).textContent).toBe "#{invisibles.space}a line with tabs#{invisibles.tab} and spaces#{invisibles.space}#{invisibles.eol}"
+        atom.config.set("editor.showInvisibles", false)
+        expect(component.lineNodeForScreenRow(0).textContent).toBe " a line with tabs  and spaces "
+        atom.config.set("editor.showInvisibles", true)
+        expect(component.lineNodeForScreenRow(0).textContent).toBe "#{invisibles.space}a line with tabs#{invisibles.tab} and spaces#{invisibles.space}#{invisibles.eol}"
+
+      it "displays spaces, tabs, and newlines as visible characters", ->
+        editor.setText " a line with tabs\tand spaces "
+        expect(component.lineNodeForScreenRow(0).textContent).toBe "#{invisibles.space}a line with tabs#{invisibles.tab} and spaces#{invisibles.space}#{invisibles.eol}"
+
+      it "displays newlines as their own token outside of the other tokens' scopes", ->
+        editor.setText "var"
+        expect(component.lineNodeForScreenRow(0).innerHTML).toBe "<span class=\"source js\"><span class=\"storage modifier js\">var</span></span><span class=\"invisible-character\">#{invisibles.eol}</span>"
+
+      it "displays trailing carriage returns using a visible, non-empty value", ->
+        editor.setText "a line that ends with a carriage return\r\n"
+        expect(component.lineNodeForScreenRow(0).textContent).toBe "a line that ends with a carriage return#{invisibles.cr}#{invisibles.eol}"
+
+      describe "when soft wrapping is enabled", ->
+        beforeEach ->
+          editor.setText "a line that wraps "
+          editor.setSoftWrap(true)
+          node.style.width = 15 * charWidth + 'px'
+          component.measureHeightAndWidth()
+
+        it "doesn't show end of line invisibles at the end of wrapped lines", ->
+          expect(component.lineNodeForScreenRow(0).textContent).toBe "a line that "
+          expect(component.lineNodeForScreenRow(1).textContent).toBe "wraps#{invisibles.space}#{invisibles.eol}"
 
     describe "when indent guides are enabled", ->
       beforeEach ->
         component.setShowIndentGuide(true)
 
       it "adds an 'indent-guide' class to spans comprising the leading whitespace", ->
-        lines = node.querySelectorAll('.line')
-        line1LeafNodes = getLeafNodes(lines[1])
+        line1LeafNodes = getLeafNodes(component.lineNodeForScreenRow(1))
         expect(line1LeafNodes[0].textContent).toBe '  '
         expect(line1LeafNodes[0].classList.contains('indent-guide')).toBe true
         expect(line1LeafNodes[1].classList.contains('indent-guide')).toBe false
 
-        line2LeafNodes = getLeafNodes(lines[2])
+        line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
         expect(line2LeafNodes[0].textContent).toBe '  '
         expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe true
         expect(line2LeafNodes[1].textContent).toBe '  '
@@ -101,8 +192,7 @@ describe "EditorComponent", ->
       it "renders leading whitespace spans with the 'indent-guide' class for empty lines", ->
         editor.getBuffer().insert([1, Infinity], '\n')
 
-        lines = node.querySelectorAll('.line')
-        line2LeafNodes = getLeafNodes(lines[2])
+        line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
 
         expect(line2LeafNodes.length).toBe 3
         expect(line2LeafNodes[0].textContent).toBe '  '
@@ -114,8 +204,7 @@ describe "EditorComponent", ->
 
       it "renders indent guides correctly on lines containing only whitespace", ->
         editor.getBuffer().insert([1, Infinity], '\n      ')
-        lines = node.querySelectorAll('.line')
-        line2LeafNodes = getLeafNodes(lines[2])
+        line2LeafNodes = getLeafNodes(component.lineNodeForScreenRow(2))
         expect(line2LeafNodes.length).toBe 3
         expect(line2LeafNodes[0].textContent).toBe '  '
         expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe true
@@ -125,9 +214,8 @@ describe "EditorComponent", ->
         expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe true
 
       it "does not render indent guides in trailing whitespace for lines containing non whitespace characters", ->
-        editor.getBuffer().setText ("  hi  ")
-        lines = node.querySelectorAll('.line')
-        line0LeafNodes = getLeafNodes(lines[0])
+        editor.getBuffer().setText "  hi  "
+        line0LeafNodes = getLeafNodes(component.lineNodeForScreenRow(0))
         expect(line0LeafNodes[0].textContent).toBe '  '
         expect(line0LeafNodes[0].classList.contains('indent-guide')).toBe true
         expect(line0LeafNodes[1].textContent).toBe '  '
@@ -144,40 +232,39 @@ describe "EditorComponent", ->
       node.style.height = 4.5 * lineHeightInPixels + 'px'
       component.measureHeightAndWidth()
 
-      lines = node.querySelectorAll('.line-number')
-      expect(lines.length).toBe 6
-      expect(lines[0].textContent).toBe "#{nbsp}1"
-      expect(lines[5].textContent).toBe "#{nbsp}6"
+      expect(node.querySelectorAll('.line-number').length).toBe 6 + 2 + 1 # line overdraw margin below + dummy line number
+      expect(component.lineNumberNodeForScreenRow(0).textContent).toBe "#{nbsp}1"
+      expect(component.lineNumberNodeForScreenRow(5).textContent).toBe "#{nbsp}6"
 
       verticalScrollbarNode.scrollTop = 2.5 * lineHeightInPixels
       verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
 
-      expect(node.querySelector('.line-numbers').style['-webkit-transform']).toBe "translate3d(0, #{-2.5 * lineHeightInPixels}px, 0)"
+      expect(node.querySelectorAll('.line-number').length).toBe 6 + 4 + 1 # line overdraw margin above/below + dummy line number
 
-      lineNumberNodes = node.querySelectorAll('.line-number')
-      expect(lineNumberNodes.length).toBe 6
-      expect(lineNumberNodes[0].offsetTop).toBe 2 * lineHeightInPixels
-      expect(lineNumberNodes[5].offsetTop).toBe 7 * lineHeightInPixels
-      expect(lineNumberNodes[0].textContent).toBe "#{nbsp}3"
-      expect(lineNumberNodes[5].textContent).toBe "#{nbsp}8"
+      expect(component.lineNumberNodeForScreenRow(2).textContent).toBe "#{nbsp}3"
+      expect(component.lineNumberNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
+      return
+      expect(component.lineNumberNodeForScreenRow(7).textContent).toBe "#{nbsp}8"
+      expect(component.lineNumberNodeForScreenRow(7).offsetTop).toBe 7 * lineHeightInPixels
 
-    it "updates absolute positions of subsequent line numbers when lines are inserted or removed", ->
+    it "updates the translation of subsequent line numbers when lines are inserted or removed", ->
       editor.getBuffer().insert([0, 0], '\n\n')
 
       lineNumberNodes = node.querySelectorAll('.line-number')
-      expect(lineNumberNodes[0].offsetTop).toBe 0
-      expect(lineNumberNodes[1].offsetTop).toBe 1 * lineHeightInPixels
-      expect(lineNumberNodes[2].offsetTop).toBe 2 * lineHeightInPixels
-      expect(lineNumberNodes[3].offsetTop).toBe 3 * lineHeightInPixels
-      expect(lineNumberNodes[4].offsetTop).toBe 4 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(0).offsetTop).toBe 0
+      expect(component.lineNumberNodeForScreenRow(1).offsetTop).toBe 1 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(3).offsetTop).toBe 3 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(4).offsetTop).toBe 4 * lineHeightInPixels
 
       editor.getBuffer().insert([0, 0], '\n\n')
-      lineNumberNodes = node.querySelectorAll('.line-number')
-      expect(lineNumberNodes[0].offsetTop).toBe 0
-      expect(lineNumberNodes[1].offsetTop).toBe 1 * lineHeightInPixels
-      expect(lineNumberNodes[2].offsetTop).toBe 2 * lineHeightInPixels
-      expect(lineNumberNodes[3].offsetTop).toBe 3 * lineHeightInPixels
-      expect(lineNumberNodes[4].offsetTop).toBe 4 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(0).offsetTop).toBe 0
+      expect(component.lineNumberNodeForScreenRow(1).offsetTop).toBe 1 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(2).offsetTop).toBe 2 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(3).offsetTop).toBe 3 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(4).offsetTop).toBe 4 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(5).offsetTop).toBe 5 * lineHeightInPixels
+      expect(component.lineNumberNodeForScreenRow(6).offsetTop).toBe 6 * lineHeightInPixels
 
     it "renders • characters for soft-wrapped lines", ->
       editor.setSoftWrap(true)
@@ -185,43 +272,50 @@ describe "EditorComponent", ->
       node.style.width = 30 * charWidth + 'px'
       component.measureHeightAndWidth()
 
-      lines = node.querySelectorAll('.line-number')
-      expect(lines.length).toBe 6
-      expect(lines[0].textContent).toBe "#{nbsp}1"
-      expect(lines[1].textContent).toBe "#{nbsp}•"
-      expect(lines[2].textContent).toBe "#{nbsp}2"
-      expect(lines[3].textContent).toBe "#{nbsp}•"
-      expect(lines[4].textContent).toBe "#{nbsp}3"
-      expect(lines[5].textContent).toBe "#{nbsp}•"
+      expect(node.querySelectorAll('.line-number').length).toBe 6 + lineOverdrawMargin + 1 # 1 dummy line node
+      expect(component.lineNumberNodeForScreenRow(0).textContent).toBe "#{nbsp}1"
+      expect(component.lineNumberNodeForScreenRow(1).textContent).toBe "#{nbsp}•"
+      expect(component.lineNumberNodeForScreenRow(2).textContent).toBe "#{nbsp}2"
+      expect(component.lineNumberNodeForScreenRow(3).textContent).toBe "#{nbsp}•"
+      expect(component.lineNumberNodeForScreenRow(4).textContent).toBe "#{nbsp}3"
+      expect(component.lineNumberNodeForScreenRow(5).textContent).toBe "#{nbsp}•"
 
-    it "pads line numbers to be right justified based on the maximum number of line number digits", ->
+    it "pads line numbers to be right-justified based on the maximum number of line number digits", ->
       editor.getBuffer().setText([1..10].join('\n'))
-      lineNumberNodes = toArray(node.querySelectorAll('.line-number'))
+      for screenRow in [0..8]
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe "#{nbsp}#{screenRow + 1}"
+      expect(component.lineNumberNodeForScreenRow(9).textContent).toBe "10"
 
-      for node, i in lineNumberNodes[0..8]
-        expect(node.textContent).toBe "#{nbsp}#{i + 1}"
-      expect(lineNumberNodes[9].textContent).toBe '10'
+      gutterNode = node.querySelector('.gutter')
+      initialGutterWidth = gutterNode.offsetWidth
 
       # Removes padding when the max number of digits goes down
       editor.getBuffer().delete([[1, 0], [2, 0]])
-      lineNumberNodes = toArray(node.querySelectorAll('.line-number'))
-      for node, i in lineNumberNodes
-        expect(node.textContent).toBe "#{i + 1}"
+      for screenRow in [0..8]
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe "#{screenRow + 1}"
+      expect(gutterNode.offsetWidth).toBeLessThan initialGutterWidth
+
+      # Increases padding when the max number of digits goes up
+      editor.getBuffer().insert([0, 0], '\n\n')
+      for screenRow in [0..8]
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe "#{nbsp}#{screenRow + 1}"
+      expect(component.lineNumberNodeForScreenRow(9).textContent).toBe "10"
+      expect(gutterNode.offsetWidth).toBe initialGutterWidth
 
   describe "cursor rendering", ->
-    it "renders the currently visible cursors", ->
+    it "renders the currently visible cursors, translated relative to the scroll position", ->
       cursor1 = editor.getCursor()
       cursor1.setScreenPosition([0, 5])
 
       node.style.height = 4.5 * lineHeightInPixels + 'px'
+      node.style.width = 20 * lineHeightInPixels + 'px'
       component.measureHeightAndWidth()
 
       cursorNodes = node.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 1
       expect(cursorNodes[0].offsetHeight).toBe lineHeightInPixels
       expect(cursorNodes[0].offsetWidth).toBe charWidth
-      expect(cursorNodes[0].offsetTop).toBe 0
-      expect(cursorNodes[0].offsetLeft).toBe 5 * charWidth
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate3d(#{5 * charWidth}px, #{0 * lineHeightInPixels}px, 0px)"
 
       cursor2 = editor.addCursorAtScreenPosition([6, 11])
       cursor3 = editor.addCursorAtScreenPosition([4, 10])
@@ -229,25 +323,23 @@ describe "EditorComponent", ->
       cursorNodes = node.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 2
       expect(cursorNodes[0].offsetTop).toBe 0
-      expect(cursorNodes[0].offsetLeft).toBe 5 * charWidth
-      expect(cursorNodes[1].offsetTop).toBe 4 * lineHeightInPixels
-      expect(cursorNodes[1].offsetLeft).toBe 10 * charWidth
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate3d(#{5 * charWidth}px, #{0 * lineHeightInPixels}px, 0px)"
+      expect(cursorNodes[1].style['-webkit-transform']).toBe "translate3d(#{10 * charWidth}px, #{4 * lineHeightInPixels}px, 0px)"
 
       verticalScrollbarNode.scrollTop = 2.5 * lineHeightInPixels
       verticalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
+      horizontalScrollbarNode.scrollLeft = 3.5 * charWidth
+      horizontalScrollbarNode.dispatchEvent(new UIEvent('scroll'))
 
       cursorNodes = node.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 2
-      expect(cursorNodes[0].offsetTop).toBe 6 * lineHeightInPixels
-      expect(cursorNodes[0].offsetLeft).toBe 11 * charWidth
-      expect(cursorNodes[1].offsetTop).toBe 4 * lineHeightInPixels
-      expect(cursorNodes[1].offsetLeft).toBe 10 * charWidth
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate3d(#{(11 - 3.5) * charWidth}px, #{(6 - 2.5) * lineHeightInPixels}px, 0px)"
+      expect(cursorNodes[1].style['-webkit-transform']).toBe "translate3d(#{(10 - 3.5) * charWidth}px, #{(4 - 2.5) * lineHeightInPixels}px, 0px)"
 
       cursor3.destroy()
       cursorNodes = node.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 1
-      expect(cursorNodes[0].offsetTop).toBe 6 * lineHeightInPixels
-      expect(cursorNodes[0].offsetLeft).toBe 11 * charWidth
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate3d(#{(11 - 3.5) * charWidth}px, #{(6 - 2.5) * lineHeightInPixels}px, 0px)"
 
     it "accounts for character widths when positioning cursors", ->
       atom.config.set('editor.fontFamily', 'sans-serif')
@@ -256,7 +348,7 @@ describe "EditorComponent", ->
       cursor = node.querySelector('.cursor')
       cursorRect = cursor.getBoundingClientRect()
 
-      cursorLocationTextNode = node.querySelector('.storage.type.function.js').firstChild.firstChild
+      cursorLocationTextNode = component.lineNodeForScreenRow(0).querySelector('.storage.type.function.js').firstChild
       range = document.createRange()
       range.setStart(cursorLocationTextNode, 0)
       range.setEnd(cursorLocationTextNode, 1)
@@ -266,44 +358,22 @@ describe "EditorComponent", ->
       expect(cursorRect.width).toBe rangeRect.width
 
     it "blinks cursors when they aren't moving", ->
-      editor.addCursorAtScreenPosition([1, 0])
-      [cursorNode1, cursorNode2] = node.querySelectorAll('.cursor')
-      expect(cursorNode1.classList.contains('blink-off')).toBe false
-      expect(cursorNode2.classList.contains('blink-off')).toBe false
+      spyOn(_._, 'now').andCallFake -> window.now # Ensure _.debounce is based on our fake spec timeline
+      cursorsNode = node.querySelector('.cursors')
 
+      expect(cursorsNode.classList.contains('blink-off')).toBe false
       advanceClock(component.props.cursorBlinkPeriod / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe true
-      expect(cursorNode2.classList.contains('blink-off')).toBe true
-
+      expect(cursorsNode.classList.contains('blink-off')).toBe true
       advanceClock(component.props.cursorBlinkPeriod / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe false
-      expect(cursorNode2.classList.contains('blink-off')).toBe false
+      expect(cursorsNode.classList.contains('blink-off')).toBe false
 
-      advanceClock(component.props.cursorBlinkPeriod / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe true
-      expect(cursorNode2.classList.contains('blink-off')).toBe true
-
-      # Stop blinking immediately when cursors move
-      advanceClock(component.props.cursorBlinkPeriod / 4)
-      expect(cursorNode1.classList.contains('blink-off')).toBe true
-      expect(cursorNode2.classList.contains('blink-off')).toBe true
-
-      # Stop blinking for one full period after moving the cursor
+      # Stop blinking after moving the cursor
       editor.moveCursorRight()
-      expect(cursorNode1.classList.contains('blink-off')).toBe false
-      expect(cursorNode2.classList.contains('blink-off')).toBe false
-
-      advanceClock(component.props.cursorBlinkResumeDelay / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe false
-      expect(cursorNode2.classList.contains('blink-off')).toBe false
-
-      advanceClock(component.props.cursorBlinkResumeDelay / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe true
-      expect(cursorNode2.classList.contains('blink-off')).toBe true
+      expect(cursorsNode.classList.contains('blink-off')).toBe false
 
+      advanceClock(component.props.cursorBlinkResumeDelay)
       advanceClock(component.props.cursorBlinkPeriod / 2)
-      expect(cursorNode1.classList.contains('blink-off')).toBe false
-      expect(cursorNode2.classList.contains('blink-off')).toBe false
+      expect(cursorsNode.classList.contains('blink-off')).toBe true
 
     it "renders the hidden input field at the position of the last cursor if it is on screen", ->
       inputNode = node.querySelector('.hidden-input')
@@ -330,13 +400,13 @@ describe "EditorComponent", ->
 
       cursorNodes = node.querySelectorAll('.cursor')
       expect(cursorNodes.length).toBe 1
-      expect(cursorNodes[0].offsetTop).toBe 6 * lineHeightInPixels
-      expect(cursorNodes[0].offsetLeft).toBe 8 * charWidth
+      expect(cursorNodes[0].style['-webkit-transform']).toBe "translate3d(#{8 * charWidth}px, #{6 * lineHeightInPixels}px, 0px)"
 
   describe "selection rendering", ->
-    scrollViewClientLeft = null
+    [scrollViewNode, scrollViewClientLeft] = []
 
     beforeEach ->
+      scrollViewNode = node.querySelector('.scroll-view')
       scrollViewClientLeft = node.querySelector('.scroll-view').getBoundingClientRect().left
 
     it "renders 1 region for 1-line selections", ->
@@ -360,7 +430,7 @@ describe "EditorComponent", ->
       expect(region1Rect.top).toBe 1 * lineHeightInPixels
       expect(region1Rect.height).toBe 1 * lineHeightInPixels
       expect(region1Rect.left).toBe scrollViewClientLeft + 6 * charWidth
-      expect(Math.ceil(region1Rect.right)).toBe node.clientWidth # TODO: Remove ceiling when react-wrapper is removed
+      expect(region1Rect.right).toBe scrollViewNode.getBoundingClientRect().right
 
       region2Rect = regions[1].getBoundingClientRect()
       expect(region2Rect.top).toBe 2 * lineHeightInPixels
@@ -377,13 +447,13 @@ describe "EditorComponent", ->
       expect(region1Rect.top).toBe 1 * lineHeightInPixels
       expect(region1Rect.height).toBe 1 * lineHeightInPixels
       expect(region1Rect.left).toBe scrollViewClientLeft + 6 * charWidth
-      expect(Math.ceil(region1Rect.right)).toBe node.clientWidth # TODO: Remove ceiling when react-wrapper is removed
+      expect(region1Rect.right).toBe scrollViewNode.getBoundingClientRect().right
 
       region2Rect = regions[1].getBoundingClientRect()
       expect(region2Rect.top).toBe 2 * lineHeightInPixels
       expect(region2Rect.height).toBe 3 * lineHeightInPixels
       expect(region2Rect.left).toBe scrollViewClientLeft + 0
-      expect(Math.ceil(region2Rect.right)).toBe node.clientWidth # TODO: Remove ceiling when react-wrapper is removed
+      expect(region2Rect.right).toBe scrollViewNode.getBoundingClientRect().right
 
       region3Rect = regions[2].getBoundingClientRect()
       expect(region3Rect.top).toBe 5 * lineHeightInPixels
@@ -391,9 +461,12 @@ describe "EditorComponent", ->
       expect(region3Rect.left).toBe scrollViewClientLeft + 0
       expect(region3Rect.width).toBe 10 * charWidth
 
-    it "does not render empty selections", ->
-      expect(editor.getSelection().isEmpty()).toBe true
-      expect(node.querySelectorAll('.selection').length).toBe 0
+    it "does not render empty selections unless they are the first selection (to prevent a Chromium rendering artifact caused by removing it)", ->
+      editor.addSelectionForBufferRange([[2, 2], [2, 2]])
+      expect(editor.getSelection(0).isEmpty()).toBe true
+      expect(editor.getSelection(1).isEmpty()).toBe true
+
+      expect(node.querySelectorAll('.selection').length).toBe 1
 
   describe "mouse interactions", ->
     linesNode = null
@@ -527,16 +600,16 @@ describe "EditorComponent", ->
       editor.setScrollTop(10)
       expect(verticalScrollbarNode.scrollTop).toBe 10
 
-    it "updates the horizontal scrollbar and scroll view content x transform based on the scrollLeft of the model", ->
+    it "updates the horizontal scrollbar and the x transform of the lines based on the scrollLeft of the model", ->
       node.style.width = 30 * charWidth + 'px'
       component.measureHeightAndWidth()
 
-      scrollViewContentNode = node.querySelector('.scroll-view-content')
-      expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate3d(0px, 0px, 0)"
+      linesNode = node.querySelector('.lines')
+      expect(linesNode.style['-webkit-transform']).toBe "translate3d(0px, 0px, 0px)"
       expect(horizontalScrollbarNode.scrollLeft).toBe 0
 
       editor.setScrollLeft(100)
-      expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate3d(-100px, 0px, 0)"
+      expect(linesNode.style['-webkit-transform']).toBe "translate3d(-100px, 0px, 0px)"
       expect(horizontalScrollbarNode.scrollLeft).toBe 100
 
     it "updates the scrollLeft of the model when the scrollLeft of the horizontal scrollbar changes", ->
@@ -554,7 +627,7 @@ describe "EditorComponent", ->
       node.style.width = 10 * charWidth + 'px'
       component.measureHeightAndWidth()
       editor.setScrollBottom(editor.getScrollHeight())
-      lastLineNode = last(node.querySelectorAll('.line'))
+      lastLineNode = component.lineNodeForScreenRow(editor.getLastScreenRow())
       bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
       topOfHorizontalScrollbar = horizontalScrollbarNode.getBoundingClientRect().top
       expect(bottomOfLastLine).toBe topOfHorizontalScrollbar
@@ -562,7 +635,6 @@ describe "EditorComponent", ->
       # Scroll so there's no space below the last line when the horizontal scrollbar disappears
       node.style.width = 100 * charWidth + 'px'
       component.measureHeightAndWidth()
-      lastLineNode = last(node.querySelectorAll('.line'))
       bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
       bottomOfEditor = node.getBoundingClientRect().bottom
       expect(bottomOfLastLine).toBe bottomOfEditor
@@ -574,11 +646,9 @@ describe "EditorComponent", ->
 
       editor.setScrollLeft(Infinity)
 
-      lineNodes = node.querySelectorAll('.line')
-      rightOfLongestLine = lineNodes[6].getBoundingClientRect().right
+      rightOfLongestLine = component.lineNodeForScreenRow(6).getBoundingClientRect().right
       leftOfVerticalScrollbar = verticalScrollbarNode.getBoundingClientRect().left
-
-      expect(rightOfLongestLine).toBe leftOfVerticalScrollbar - 1 # Leave 1 px so the cursor is visible on the end of the line
+      expect(Math.round(rightOfLongestLine)).toBe leftOfVerticalScrollbar - 1 # Leave 1 px so the cursor is visible on the end of the line
 
     it "only displays dummy scrollbars when scrollable in that direction", ->
       expect(verticalScrollbarNode.style.display).toBe 'none'
@@ -670,6 +740,32 @@ describe "EditorComponent", ->
         expect(verticalScrollbarNode.scrollTop).toBe 10
         expect(horizontalScrollbarNode.scrollLeft).toBe 15
 
+      describe "when the mousewheel event's target is a line", ->
+        it "keeps the line on the DOM if it is scrolled off-screen", ->
+          node.style.height = 4.5 * lineHeightInPixels + 'px'
+          node.style.width = 20 * charWidth + 'px'
+          component.measureHeightAndWidth()
+
+          lineNode = node.querySelector('.line')
+          wheelEvent = new WheelEvent('mousewheel', wheelDeltaX: 0, wheelDeltaY: -500)
+          Object.defineProperty(wheelEvent, 'target', get: -> lineNode)
+          node.dispatchEvent(wheelEvent)
+
+          expect(node.contains(lineNode)).toBe true
+
+      describe "when the mousewheel event's target is a line number", ->
+        it "keeps the line number on the DOM if it is scrolled off-screen", ->
+          node.style.height = 4.5 * lineHeightInPixels + 'px'
+          node.style.width = 20 * charWidth + 'px'
+          component.measureHeightAndWidth()
+
+          lineNumberNode = node.querySelectorAll('.line-number')[1]
+          wheelEvent = new WheelEvent('mousewheel', wheelDeltaX: 0, wheelDeltaY: -500)
+          Object.defineProperty(wheelEvent, 'target', get: -> lineNumberNode)
+          node.dispatchEvent(wheelEvent)
+
+          expect(node.contains(lineNumberNode)).toBe true
+
   describe "input events", ->
     inputNode = null
 
@@ -705,3 +801,24 @@ describe "EditorComponent", ->
 
         expect(editor.consolidateSelections).toHaveBeenCalled()
         expect(event.abortKeyBinding).toHaveBeenCalled()
+
+  describe "hiding and showing the editor", ->
+    describe "when fontSize, fontFamily, or lineHeight changes while the editor is hidden", ->
+      it "does not attempt to measure the lineHeight and defaultCharWidth until the editor becomes visible again", ->
+        wrapperView.hide()
+        initialLineHeightInPixels = editor.getLineHeightInPixels()
+        initialCharWidth = editor.getDefaultCharWidth()
+
+        component.setLineHeight(2)
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
+        expect(editor.getDefaultCharWidth()).toBe initialCharWidth
+        component.setFontSize(22)
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
+        expect(editor.getDefaultCharWidth()).toBe initialCharWidth
+        component.setFontFamily('monospace')
+        expect(editor.getLineHeightInPixels()).toBe initialLineHeightInPixels
+        expect(editor.getDefaultCharWidth()).toBe initialCharWidth
+
+        wrapperView.show()
+        expect(editor.getLineHeightInPixels()).not.toBe initialLineHeightInPixels
+        expect(editor.getDefaultCharWidth()).not.toBe initialCharWidth

spec/editor-spec.coffee

@@ -696,7 +696,7 @@ describe "Editor", ->
         editor.manageScrollPosition = true
         editor.setVerticalScrollMargin(2)
         editor.setHorizontalScrollMargin(2)
-        editor.setLineHeight(10)
+        editor.setLineHeightInPixels(10)
         editor.setDefaultCharWidth(10)
         editor.setHorizontalScrollbarHeight(0)
         editor.setHeight(5.5 * 10)
@@ -1135,7 +1135,7 @@ describe "Editor", ->
       describe "when the 'autoscroll' option is true", ->
         it "autoscrolls to the selection", ->
           editor.manageScrollPosition = true
-          editor.setLineHeight(10)
+          editor.setLineHeightInPixels(10)
           editor.setDefaultCharWidth(10)
           editor.setHeight(50)
           editor.setWidth(50)
@@ -3123,7 +3123,7 @@ describe "Editor", ->
   describe ".scrollToCursorPosition()", ->
     it "scrolls the last cursor into view", ->
       editor.setCursorScreenPosition([8, 8])
-      editor.setLineHeight(10)
+      editor.setLineHeightInPixels(10)
       editor.setDefaultCharWidth(10)
       editor.setHeight(50)
       editor.setWidth(50)
@@ -3139,7 +3139,7 @@ describe "Editor", ->
     it "scrolls one screen height up or down", ->
       editor.manageScrollPosition = true
 
-      editor.setLineHeight(10)
+      editor.setLineHeightInPixels(10)
       editor.setHeight(50)
       expect(editor.getScrollHeight()).toBe 130
 

spec/editor-view-spec.coffee

@@ -33,10 +33,10 @@ describe "EditorView", ->
         $('#jasmine-content').append(this)
 
     waitsForPromise ->
-      atom.packages.activatePackage('language-text', sync: true)
+      atom.packages.activatePackage('language-text')
 
     waitsForPromise ->
-      atom.packages.activatePackage('language-javascript', sync: true)
+      atom.packages.activatePackage('language-javascript')
 
   getLineHeight = ->
     return cachedLineHeight if cachedLineHeight?

spec/spec-helper.coffee

@@ -261,7 +261,9 @@ window.waitsForPromise = (args...) ->
 window.resetTimeouts = ->
   window.now = 0
   window.timeoutCount = 0
+  window.intervalCount = 0
   window.timeouts = []
+  window.intervalTimeouts = {}
 
 window.fakeSetTimeout = (callback, ms) ->
   id = ++window.timeoutCount
@@ -272,13 +274,15 @@ window.fakeClearTimeout = (idToClear) ->
   window.timeouts = window.timeouts.filter ([id]) -> id != idToClear
 
 window.fakeSetInterval = (callback, ms) ->
+  id = ++window.intervalCount
   action = ->
     callback()
-    window.fakeSetTimeout(action, ms)
-  window.fakeSetTimeout(action, ms)
+    window.intervalTimeouts[id] = window.fakeSetTimeout(action, ms)
+  window.intervalTimeouts[id] = window.fakeSetTimeout(action, ms)
+  id
 
 window.fakeClearInterval = (idToClear) ->
-  window.fakeClearTimeout(idToClear)
+  window.fakeClearTimeout(@intervalTimeouts[idToClear])
 
 window.advanceClock = (delta=1) ->
   window.now += delta

spec/theme-manager-spec.coffee

@@ -20,7 +20,7 @@ describe "ThemeManager", ->
 
   describe "theme getters and setters", ->
     beforeEach ->
-      atom.packages.loadPackages(sync: true)
+      atom.packages.loadPackages()
 
     it 'getLoadedThemes get all the loaded themes', ->
       themes = themeManager.getLoadedThemes()
@@ -280,15 +280,17 @@ describe "ThemeManager", ->
 
   describe "when a non-existent theme is present in the config", ->
     it "logs a warning but does not throw an exception (regression)", ->
+      reloaded = false
+
       waitsForPromise ->
         themeManager.activateThemes()
 
       runs ->
+        themeManager.once 'reloaded', -> reloaded = true
         spyOn(console, 'warn')
         expect(-> atom.config.set('core.themes', ['atom-light-ui', 'theme-really-does-not-exist'])).not.toThrow()
 
-      waitsFor (done) ->
-        themeManager.once 'reloaded', done
+      waitsFor -> reloaded
 
       runs ->
         expect(console.warn.callCount).toBe 1

src/context-menu-manager.coffee

@@ -98,5 +98,6 @@ class ContextMenuManager
   showForEvent: (event) ->
     @activeElement = event.target
     menuTemplate = @combinedMenuTemplateForElement(event.target)
+    return unless menuTemplate?.length > 0
     @executeBuildHandlers(event, menuTemplate)
     remote.getCurrentWindow().emit('context-menu', menuTemplate)

src/cursor-component.coffee

@@ -1,13 +1,15 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 
 module.exports =
 CursorComponent = React.createClass
   displayName: 'CursorComponent'
 
   render: ->
-    {top, left, height, width} = @props.cursor.getPixelRect()
-    className = 'cursor'
-    className += ' blink-off' if @props.blinkOff
+    {cursor, scrollTop, scrollLeft} = @props
+    {top, left, height, width} = cursor.getPixelRect()
+    top -= scrollTop
+    left -= scrollLeft
+    WebkitTransform = "translate3d(#{left}px, #{top}px, 0px)"
 
-    div className: className, style: {top, left, height, width}
+    div className: 'cursor', style: {height, width, WebkitTransform}

src/cursors-component.coffee

@@ -1,10 +1,9 @@
-React = require 'react'
-{div} = require 'reactionary'
-{debounce} = require 'underscore-plus'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
+{debounce, toArray} = require 'underscore-plus'
 SubscriberMixin = require './subscriber-mixin'
 CursorComponent = require './cursor-component'
 
-
 module.exports =
 CursorsComponent = React.createClass
   displayName: 'CursorsComponent'
@@ -13,38 +12,44 @@ CursorsComponent = React.createClass
   cursorBlinkIntervalHandle: null
 
   render: ->
-    {editor} = @props
-    blinkOff = @state.blinkCursorsOff
+    {editor, scrollTop, scrollLeft} = @props
+    {blinkOff} = @state
 
-    div className: 'cursors',
+    className = 'cursors'
+    className += ' blink-off' if blinkOff
+
+    div {className},
       if @isMounted()
         for selection in editor.getSelections()
           if selection.isEmpty() and editor.selectionIntersectsVisibleRowRange(selection)
             {cursor} = selection
-            CursorComponent({key: cursor.id, cursor, blinkOff})
+            CursorComponent({key: cursor.id, cursor, scrollTop, scrollLeft})
 
   getInitialState: ->
-    blinkCursorsOff: false
+    blinkOff: false
 
   componentDidMount: ->
-    {editor} = @props
     @startBlinkingCursors()
 
   componentWillUnmount: ->
-    clearInterval(@cursorBlinkIntervalHandle)
+    @stopBlinkingCursors()
 
   componentWillUpdate: ({cursorsMoved}) ->
     @pauseCursorBlinking() if cursorsMoved
 
   startBlinkingCursors: ->
-    @cursorBlinkIntervalHandle = setInterval(@toggleCursorBlink, @props.cursorBlinkPeriod / 2)
+    @toggleCursorBlinkHandle = setInterval(@toggleCursorBlink, @props.cursorBlinkPeriod / 2) if @isMounted()
 
   startBlinkingCursorsAfterDelay: null # Created lazily
 
-  toggleCursorBlink: -> @setState(blinkCursorsOff: not @state.blinkCursorsOff)
+  stopBlinkingCursors: ->
+    clearInterval(@toggleCursorBlinkHandle)
+
+  toggleCursorBlink: ->
+    @setState(blinkOff: not @state.blinkOff)
 
   pauseCursorBlinking: ->
-    @state.blinkCursorsOff = false
-    clearInterval(@cursorBlinkIntervalHandle)
+    @state.blinkOff = false
+    @stopBlinkingCursors()
     @startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay)
     @startBlinkingCursorsAfterDelay()

src/display-buffer.coffee

@@ -23,7 +23,7 @@ class DisplayBuffer extends Model
     manageScrollPosition: false
     softWrap: null
     editorWidthInChars: null
-    lineHeight: null
+    lineHeightInPixels: null
     defaultCharWidth: null
     height: null
     width: null
@@ -198,8 +198,8 @@ class DisplayBuffer extends Model
     @setScrollLeft(scrollRight - @width)
     @getScrollRight()
 
-  getLineHeight: -> @lineHeight
-  setLineHeight: (@lineHeight) -> @lineHeight
+  getLineHeightInPixels: -> @lineHeightInPixels
+  setLineHeightInPixels: (@lineHeightInPixels) -> @lineHeightInPixels
 
   getDefaultCharWidth: -> @defaultCharWidth
   setDefaultCharWidth: (@defaultCharWidth) -> @defaultCharWidth
@@ -227,21 +227,22 @@ class DisplayBuffer extends Model
     @charWidthsByScope = {}
 
   getScrollHeight: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign lineHeight before calling ::getScrollHeight()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign lineHeightInPixels before calling ::getScrollHeight()")
 
-    @getLineCount() * @getLineHeight()
+    @getLineCount() * @getLineHeightInPixels()
 
   getScrollWidth: ->
     (@getMaxLineLength() * @getDefaultCharWidth()) + @getCursorWidth()
 
   getVisibleRowRange: ->
-    unless @getLineHeight() > 0
-      throw new Error("You must assign a non-zero lineHeight before calling ::getVisibleRowRange()")
+    unless @getLineHeightInPixels() > 0
+      throw new Error("You must assign a non-zero lineHeightInPixels before calling ::getVisibleRowRange()")
+
+    heightInLines = Math.ceil(@getHeight() / @getLineHeightInPixels()) + 1
+    startRow = Math.floor(@getScrollTop() / @getLineHeightInPixels())
+    endRow = Math.min(@getLineCount(), startRow + heightInLines)
 
-    heightInLines = Math.ceil(@getHeight() / @getLineHeight()) + 1
-    startRow = Math.floor(@getScrollTop() / @getLineHeight())
-    endRow = Math.min(@getLineCount(), Math.ceil(startRow + heightInLines))
     [startRow, endRow]
 
   intersectsVisibleRowRange: (startRow, endRow) ->
@@ -253,7 +254,7 @@ class DisplayBuffer extends Model
     @intersectsVisibleRowRange(start.row, end.row + 1)
 
   scrollToScreenRange: (screenRange) ->
-    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeight()
+    verticalScrollMarginInPixels = @getVerticalScrollMargin() * @getLineHeightInPixels()
     horizontalScrollMarginInPixels = @getHorizontalScrollMargin() * @getDefaultCharWidth()
 
     {top, left, height, width} = @pixelRectForScreenRange(screenRange)
@@ -284,11 +285,11 @@ class DisplayBuffer extends Model
     if screenRange.end.row > screenRange.start.row
       top = @pixelPositionForScreenPosition(screenRange.start).top
       left = 0
-      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeight()
+      height = (screenRange.end.row - screenRange.start.row + 1) * @getLineHeightInPixels()
       width = @getScrollWidth()
     else
       {top, left} = @pixelPositionForScreenPosition(screenRange.start)
-      height = @getLineHeight()
+      height = @getLineHeightInPixels()
       width = @pixelPositionForScreenPosition(screenRange.end).left - left
 
     {top, left, width, height}
@@ -511,7 +512,7 @@ class DisplayBuffer extends Model
     targetColumn = screenPosition.column
     defaultCharWidth = @defaultCharWidth
 
-    top = targetRow * @lineHeight
+    top = targetRow * @lineHeightInPixels
     left = 0
     column = 0
     for token in @lineForRow(targetRow).tokens
@@ -526,7 +527,7 @@ class DisplayBuffer extends Model
     targetTop = pixelPosition.top
     targetLeft = pixelPosition.left
     defaultCharWidth = @defaultCharWidth
-    row = Math.floor(targetTop / @getLineHeight())
+    row = Math.floor(targetTop / @getLineHeightInPixels())
     row = Math.min(row, @getLastRow())
     row = Math.max(0, row)
 

src/editor-component.coffee

@@ -1,6 +1,6 @@
-React = require 'react'
-{div, span} = require 'reactionary'
-{debounce} = require 'underscore-plus'
+React = require 'react-atom-fork'
+{div, span} = require 'reactionary-atom-fork'
+{debounce, defaults} = require 'underscore-plus'
 scrollbarStyle = require 'scrollbar-style'
 
 GutterComponent = require './gutter-component'
@@ -20,16 +20,21 @@ EditorComponent = React.createClass
   batchingUpdates: false
   updateRequested: false
   cursorsMoved: false
-  preservedRowRange: null
+  selectionChanged: false
+  selectionAdded: false
   scrollingVertically: false
   gutterWidth: 0
   refreshingScrollbars: false
   measuringScrollbars: true
+  pendingVerticalScrollDelta: 0
+  pendingHorizontalScrollDelta: 0
+  mouseWheelScreenRow: null
 
   render: ->
-    {focused, fontSize, lineHeight, fontFamily, showIndentGuide} = @state
+    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles, visible} = @state
     {editor, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
     maxLineNumberDigits = editor.getScreenLineCount().toString().length
+    invisibles = if showInvisibles then @state.invisibles else {}
 
     if @isMounted()
       renderedRowRange = @getRenderedRowRange()
@@ -37,7 +42,8 @@ EditorComponent = React.createClass
       scrollWidth = editor.getScrollWidth()
       scrollTop = editor.getScrollTop()
       scrollLeft = editor.getScrollLeft()
-      lineHeightInPixels = editor.getLineHeight()
+      lineHeightInPixels = editor.getLineHeightInPixels()
+      scrollViewHeight = editor.getHeight()
       horizontalScrollbarHeight = editor.getHorizontalScrollbarHeight()
       verticalScrollbarWidth = editor.getVerticalScrollbarWidth()
       verticallyScrollable = editor.verticallyScrollable()
@@ -48,16 +54,18 @@ EditorComponent = React.createClass
 
     div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
       GutterComponent {
-        editor, renderedRowRange, maxLineNumberDigits, scrollTop, scrollHeight,
-        lineHeight: lineHeightInPixels, fontSize, fontFamily, @pendingChanges,
-        onWidthChanged: @onGutterWidthChanged
+        ref: 'gutter', editor, renderedRowRange, maxLineNumberDigits,
+        scrollTop, scrollHeight, lineHeight, lineHeightInPixels, fontSize, fontFamily,
+        @pendingChanges, onWidthChanged: @onGutterWidthChanged, @mouseWheelScreenRow
       }
 
       EditorScrollViewComponent {
-        ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide
-        scrollHeight, scrollWidth, lineHeight: lineHeightInPixels,
-        renderedRowRange, @pendingChanges, @scrollingVertically, @cursorsMoved,
-        cursorBlinkPeriod, cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred
+        ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
+        lineHeight, lineHeightInPixels, renderedRowRange, @pendingChanges,
+        scrollTop, scrollLeft, scrollHeight, scrollWidth, @scrollingVertically,
+        @cursorsMoved, @selectionChanged, @selectionAdded, cursorBlinkPeriod,
+        cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred, @mouseWheelScreenRow,
+        invisibles, visible, scrollViewHeight
       }
 
       ScrollbarComponent
@@ -93,17 +101,19 @@ EditorComponent = React.createClass
         width: verticalScrollbarWidth
 
   getRenderedRowRange: ->
-    renderedRowRange = @props.editor.getVisibleRowRange()
-    if @preservedRowRange?
-      renderedRowRange[0] = Math.min(@preservedRowRange[0], renderedRowRange[0])
-      renderedRowRange[1] = Math.max(@preservedRowRange[1], renderedRowRange[1])
-    renderedRowRange
+    {editor, lineOverdrawMargin} = @props
+    [visibleStartRow, visibleEndRow] = editor.getVisibleRowRange()
+    renderedStartRow = Math.max(0, visibleStartRow - lineOverdrawMargin)
+    renderedEndRow = Math.min(editor.getScreenLineCount(), visibleEndRow + lineOverdrawMargin)
+    [renderedStartRow, renderedEndRow]
 
-  getInitialState: -> {}
+  getInitialState: ->
+    visible: true
 
   getDefaultProps: ->
     cursorBlinkPeriod: 800
-    cursorBlinkResumeDelay: 200
+    cursorBlinkResumeDelay: 100
+    lineOverdrawMargin: 8
 
   componentWillMount: ->
     @pendingChanges = []
@@ -130,6 +140,8 @@ EditorComponent = React.createClass
   componentDidUpdate: ->
     @pendingChanges.length = 0
     @cursorsMoved = false
+    @selectionChanged = false
+    @selectionAdded = false
     @refreshingScrollbars = false
     @measureScrollbars() if @measuringScrollbars
     @props.parentView.trigger 'editor:display-updated'
@@ -140,15 +152,14 @@ EditorComponent = React.createClass
     @subscribe editor, 'batched-updates-ended', @onBatchedUpdatesEnded
     @subscribe editor, 'screen-lines-changed', @onScreenLinesChanged
     @subscribe editor, 'cursors-moved', @onCursorsMoved
-    @subscribe editor, 'selection-screen-range-changed', @requestUpdate
+    @subscribe editor, 'selection-removed selection-screen-range-changed', @onSelectionChanged
     @subscribe editor, 'selection-added', @onSelectionAdded
-    @subscribe editor, 'selection-removed', @onSelectionAdded
     @subscribe editor.$scrollTop.changes, @onScrollTopChanged
     @subscribe editor.$scrollLeft.changes, @requestUpdate
     @subscribe editor.$height.changes, @requestUpdate
     @subscribe editor.$width.changes, @requestUpdate
     @subscribe editor.$defaultCharWidth.changes, @requestUpdate
-    @subscribe editor.$lineHeight.changes, @requestUpdate
+    @subscribe editor.$lineHeightInPixels.changes, @requestUpdate
 
   listenForDOMEvents: ->
     node = @getDOMNode()
@@ -251,6 +262,7 @@ EditorComponent = React.createClass
         'editor:scroll-to-cursor': => editor.scrollToCursorPosition()
         'core:page-up': => editor.pageUp()
         'core:page-down': => editor.pageDown()
+        'benchmark:scroll': @runScrollBenchmark
 
   addCommandListeners: (listenersByCommandName) ->
     {parentView} = @props
@@ -261,7 +273,10 @@ EditorComponent = React.createClass
   observeConfig: ->
     @subscribe atom.config.observe 'editor.fontFamily', @setFontFamily
     @subscribe atom.config.observe 'editor.fontSize', @setFontSize
+    @subscribe atom.config.observe 'editor.lineHeight', @setLineHeight
     @subscribe atom.config.observe 'editor.showIndentGuide', @setShowIndentGuide
+    @subscribe atom.config.observe 'editor.invisibles', @setInvisibles
+    @subscribe atom.config.observe 'editor.showInvisibles', @setShowInvisibles
 
   measureScrollbars: ->
     @measuringScrollbars = false
@@ -285,6 +300,25 @@ EditorComponent = React.createClass
   setShowIndentGuide: (showIndentGuide) ->
     @setState({showIndentGuide})
 
+  # Public: Defines which characters are invisible.
+  #
+  # invisibles - An {Object} defining the invisible characters:
+  #   :eol   - The end of line invisible {String} (default: `\u00ac`).
+  #   :space - The space invisible {String} (default: `\u00b7`).
+  #   :tab   - The tab invisible {String} (default: `\u00bb`).
+  #   :cr    - The carriage return invisible {String} (default: `\u00a4`).
+  setInvisibles: (invisibles={}) ->
+    defaults invisibles,
+      eol: '\u00ac'
+      space: '\u00b7'
+      tab: '\u00bb'
+      cr: '\u00a4'
+
+    @setState({invisibles})
+
+  setShowInvisibles: (showInvisibles) ->
+    @setState({showInvisibles})
+
   onFocus: ->
     @refs.scrollView.focus()
 
@@ -319,14 +353,32 @@ EditorComponent = React.createClass
         @pendingScrollLeft = null
 
   onMouseWheel: (event) ->
+    event.preventDefault()
+    screenRow = @screenRowForNode(event.target)
+    @mouseWheelScreenRow = screenRow if screenRow?
+    animationFramePending = @pendingHorizontalScrollDelta isnt 0 or @pendingVerticalScrollDelta isnt 0
+
     # Only scroll in one direction at a time
     {wheelDeltaX, wheelDeltaY} = event
     if Math.abs(wheelDeltaX) > Math.abs(wheelDeltaY)
-      @refs.horizontalScrollbar.getDOMNode().scrollLeft -= wheelDeltaX
+      @pendingHorizontalScrollDelta -= wheelDeltaX
     else
-      @refs.verticalScrollbar.getDOMNode().scrollTop -= wheelDeltaY
+      @pendingVerticalScrollDelta -= wheelDeltaY
 
-    event.preventDefault()
+    unless animationFramePending
+      requestAnimationFrame =>
+        {editor} = @props
+        editor.setScrollTop(editor.getScrollTop() + @pendingVerticalScrollDelta)
+        editor.setScrollLeft(editor.getScrollLeft() + @pendingHorizontalScrollDelta)
+        @pendingVerticalScrollDelta = 0
+        @pendingHorizontalScrollDelta = 0
+
+  screenRowForNode: (node) ->
+    while node isnt document
+      if screenRow = node.dataset.screenRow
+        return parseInt(screenRow)
+      node = node.parentNode
+    null
 
   onStylesheetsChanged: (stylesheet) ->
     @refreshScrollbars() if @containsScrollbarSelector(stylesheet)
@@ -357,13 +409,6 @@ EditorComponent = React.createClass
     # if the editor's content and dimensions require them to be visible.
     @requestUpdate()
 
-  clearPreservedRowRange: ->
-    @preservedRowRange = null
-    @scrollingVertically = false
-    @requestUpdate()
-
-  clearPreservedRowRangeAfterDelay: null # Created lazily
-
   onBatchedUpdatesStarted: ->
     @batchingUpdates = true
 
@@ -379,20 +424,31 @@ EditorComponent = React.createClass
     @pendingChanges.push(change)
     @requestUpdate() if editor.intersectsVisibleRowRange(change.start, change.end + 1) # TODO: Use closed-open intervals for change events
 
+  onSelectionChanged: (selection) ->
+    {editor} = @props
+    if editor.selectionIntersectsVisibleRowRange(selection)
+      @selectionChanged = true
+      @requestUpdate()
+
   onSelectionAdded: (selection) ->
     {editor} = @props
-    @requestUpdate() if editor.selectionIntersectsVisibleRowRange(selection)
+    if editor.selectionIntersectsVisibleRowRange(selection)
+      @selectionChanged = true
+      @selectionAdded = true
+      @requestUpdate()
 
   onScrollTopChanged: ->
-    @preservedRowRange = @getRenderedRowRange()
     @scrollingVertically = true
-    @clearPreservedRowRangeAfterDelay ?= debounce(@clearPreservedRowRange, 200)
-    @clearPreservedRowRangeAfterDelay()
+    @requestUpdate()
+    @stopScrollingAfterDelay ?= debounce(@onStoppedScrolling, 100)
+    @stopScrollingAfterDelay()
+
+  onStoppedScrolling: ->
+    @scrollingVertically = false
+    @mouseWheelScreenRow = null
     @requestUpdate()
 
-  onSelectionRemoved: (selection) ->
-    {editor} = @props
-    @requestUpdate() if editor.selectionIntersectsVisibleRowRange(selection)
+  stopScrollingAfterDelay: null # created lazily
 
   onCursorsMoved: ->
     @cursorsMoved = true
@@ -411,3 +467,36 @@ EditorComponent = React.createClass
 
   consolidateSelections: (e) ->
     e.abortKeyBinding() unless @props.editor.consolidateSelections()
+
+  lineNodeForScreenRow: (screenRow) -> @refs.scrollView.lineNodeForScreenRow(screenRow)
+
+  lineNumberNodeForScreenRow: (screenRow) -> @refs.gutter.lineNumberNodeForScreenRow(screenRow)
+
+  hide: ->
+    @setState(visible: false)
+
+  show: ->
+    @setState(visible: true)
+
+  runScrollBenchmark: ->
+    node = @getDOMNode()
+
+    scroll = (delta, done) ->
+      dispatchMouseWheelEvent = ->
+        node.dispatchEvent(new WheelEvent('mousewheel', wheelDeltaX: -0, wheelDeltaY: -delta))
+
+      stopScrolling = ->
+        clearInterval(interval)
+        done?()
+
+      interval = setInterval(dispatchMouseWheelEvent, 10)
+      setTimeout(stopScrolling, 500)
+
+    console.timeline('scroll')
+    scroll 50, ->
+      scroll 100, ->
+        scroll 200, ->
+          scroll 400, ->
+            scroll 800, ->
+              scroll 1600, ->
+                console.timelineEnd('scroll')

src/editor-scroll-view-component.coffee

@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {debounce} = require 'underscore-plus'
 
 InputComponent = require './input-component'
@@ -16,20 +16,15 @@ EditorScrollViewComponent = React.createClass
   overflowChangedWhilePaused: false
 
   render: ->
-    {editor, fontSize, fontFamily, lineHeight, showIndentGuide} = @props
-    {scrollHeight, scrollWidth, renderedRowRange, pendingChanges, scrollingVertically} = @props
-    {cursorBlinkPeriod, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props
+    {editor, fontSize, fontFamily, lineHeight, lineHeightInPixels, showIndentGuide, invisibles, visible} = @props
+    {renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollHeight, scrollWidth, scrollViewHeight, scrollingVertically, mouseWheelScreenRow} = @props
+    {selectionChanged, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props
 
     if @isMounted()
       inputStyle = @getHiddenInputPosition()
       inputStyle.WebkitTransform = 'translateZ(0)'
 
-      contentStyle =
-        height: scrollHeight
-        minWidth: scrollWidth
-        WebkitTransform: "translate3d(#{-editor.getScrollLeft()}px, #{-editor.getScrollTop()}px, 0)"
-
-    div className: 'scroll-view',
+    div className: 'scroll-view', onMouseDown: @onMouseDown,
       InputComponent
         ref: 'input'
         className: 'hidden-input'
@@ -38,14 +33,13 @@ EditorScrollViewComponent = React.createClass
         onFocus: onInputFocused
         onBlur: onInputBlurred
 
-      div className: 'scroll-view-content', style: contentStyle, onMouseDown: @onMouseDown,
-        CursorsComponent({editor, cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay})
-        LinesComponent {
-          ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
-          renderedRowRange, pendingChanges, scrollingVertically
-        }
-        div className: 'underlayer',
-          SelectionsComponent({editor})
+      CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkPeriod, cursorBlinkResumeDelay})
+      LinesComponent {
+        ref: 'lines', editor, fontSize, fontFamily, lineHeight, lineHeightInPixels,
+        showIndentGuide, renderedRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,
+        selectionChanged, scrollHeight, scrollWidth, mouseWheelScreenRow, invisibles,
+        visible, scrollViewHeight
+      }
 
   componentDidMount: ->
     @getDOMNode().addEventListener 'overflowchanged', @onOverflowChanged
@@ -198,3 +192,5 @@ EditorScrollViewComponent = React.createClass
 
   focus: ->
     @refs.input.focus()
+
+  lineNodeForScreenRow: (screenRow) -> @refs.lines.lineNodeForScreenRow(screenRow)

src/editor.coffee

@@ -149,7 +149,7 @@ class Editor extends Model
     'autoDecreaseIndentForBufferRow', 'toggleLineCommentForBufferRow', 'toggleLineCommentsForBufferRows',
     toProperty: 'languageMode'
 
-  @delegatesProperties '$lineHeight', '$defaultCharWidth', '$height', '$width',
+  @delegatesProperties '$lineHeightInPixels', '$defaultCharWidth', '$height', '$width',
     '$scrollTop', '$scrollLeft', 'manageScrollPosition', toProperty: 'displayBuffer'
 
   constructor: ({@softTabs, initialLine, initialColumn, tabLength, softWrap, @displayBuffer, buffer, registerEditor, suppressCursorCreation}) ->
@@ -1269,6 +1269,9 @@ class Editor extends Model
   # Returns: An {Array} of {Selection}s.
   getSelections: -> new Array(@selections...)
 
+  selectionsForScreenRows: (startRow, endRow) ->
+    @getSelections().filter (selection) -> selection.intersectsScreenRowRange(startRow, endRow)
+
   # Public: Get the most recent {Selection} or the selection at the given
   # index.
   #
@@ -1856,8 +1859,8 @@ class Editor extends Model
   getHorizontalScrollMargin: -> @displayBuffer.getHorizontalScrollMargin()
   setHorizontalScrollMargin: (horizontalScrollMargin) -> @displayBuffer.setHorizontalScrollMargin(horizontalScrollMargin)
 
-  getLineHeight: -> @displayBuffer.getLineHeight()
-  setLineHeight: (lineHeight) -> @displayBuffer.setLineHeight(lineHeight)
+  getLineHeightInPixels: -> @displayBuffer.getLineHeightInPixels()
+  setLineHeightInPixels: (lineHeightInPixels) -> @displayBuffer.setLineHeightInPixels(lineHeightInPixels)
 
   getScopedCharWidth: (scopeNames, char) -> @displayBuffer.getScopedCharWidth(scopeNames, char)
   setScopedCharWidth: (scopeNames, char, width) -> @displayBuffer.setScopedCharWidth(scopeNames, char, width)

src/gutter-component.coffee

@@ -1,87 +1,166 @@
-React = require 'react'
-{div} = require 'reactionary'
-{isEqual, isEqualForProperties, multiplyString} = require 'underscore-plus'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
+{isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 SubscriberMixin = require './subscriber-mixin'
 
+WrapperDiv = document.createElement('div')
+
 module.exports =
 GutterComponent = React.createClass
   displayName: 'GutterComponent'
   mixins: [SubscriberMixin]
 
   lastMeasuredWidth: null
+  dummyLineNumberNode: null
 
   render: ->
+    {scrollHeight, scrollTop} = @props
+
     div className: 'gutter',
-      @renderLineNumbers() if @isMounted()
+      div className: 'line-numbers', ref: 'lineNumbers', style:
+        height: scrollHeight
+        WebkitTransform: "translate3d(0px, #{-scrollTop}px, 0px)"
 
-  renderLineNumbers: ->
-    {editor, renderedRowRange, maxLineNumberDigits, scrollTop, scrollHeight} = @props
-    [startRow, endRow] = renderedRowRange
-    charWidth = editor.getDefaultCharWidth()
-    lineHeight = editor.getLineHeight()
-    style =
-      width: charWidth * (maxLineNumberDigits + 1.5)
-      height: scrollHeight
-      WebkitTransform: "translate3d(0, #{-scrollTop}px, 0)"
+  componentWillMount: ->
+    @lineNumberNodesById = {}
+    @lineNumberIdsByScreenRow = {}
+    @screenRowsByLineNumberId = {}
 
-    lineNumbers = []
-    tokenizedLines = editor.linesForScreenRows(startRow, endRow - 1)
-    tokenizedLines.push({id: 0}) if tokenizedLines.length is 0
-    for bufferRow, i in editor.bufferRowsForScreenRows(startRow, endRow - 1)
-      if bufferRow is lastBufferRow
-        lineNumber = '•'
-      else
-        lastBufferRow = bufferRow
-        lineNumber = (bufferRow + 1).toString()
-
-      key = tokenizedLines[i].id
-      screenRow = startRow + i
-      lineNumbers.push(LineNumberComponent({key, lineNumber, maxLineNumberDigits, bufferRow, screenRow, lineHeight}))
-      lastBufferRow = bufferRow
-
-    div className: 'line-numbers', style: style,
-      lineNumbers
+  componentDidMount: ->
+    @appendDummyLineNumber()
 
   # Only update the gutter if the visible row range has changed or if a
   # non-zero-delta change to the screen lines has occurred within the current
   # visible row range.
   shouldComponentUpdate: (newProps) ->
-    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeight', 'fontSize')
+    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeightInPixels', 'fontSize')
 
     {renderedRowRange, pendingChanges} = newProps
-    for change in pendingChanges when change.screenDelta > 0 or change.bufferDelta > 0
+    for change in pendingChanges when Math.abs(change.screenDelta) > 0 or Math.abs(change.bufferDelta) > 0
       return true unless change.end <= renderedRowRange.start or renderedRowRange.end <= change.start
 
     false
 
   componentDidUpdate: (oldProps) ->
-    unless @lastMeasuredWidth? and isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'fontSize', 'fontFamily')
-      width = @getDOMNode().offsetWidth
-      if width isnt @lastMeasuredWidth
-        @lastMeasuredWidth = width
-        @props.onWidthChanged(width)
+    unless oldProps.maxLineNumberDigits is @props.maxLineNumberDigits
+      @updateDummyLineNumber()
+      @removeLineNumberNodes()
 
-LineNumberComponent = React.createClass
-  displayName: 'LineNumberComponent'
+    @measureWidth() unless @lastMeasuredWidth? and isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'fontSize', 'fontFamily')
+    @clearScreenRowCaches() unless oldProps.lineHeightInPixels is @props.lineHeightInPixels
+    @updateLineNumbers()
 
-  render: ->
-    {bufferRow, screenRow, lineHeight} = @props
-    div
-      className: "line-number line-number-#{bufferRow}"
-      style: {top: screenRow * lineHeight}
-      'data-buffer-row': bufferRow
-      'data-screen-row': screenRow
-      dangerouslySetInnerHTML: {__html: @buildInnerHTML()}
+  clearScreenRowCaches: ->
+    @lineNumberIdsByScreenRow = {}
+    @screenRowsByLineNumberId = {}
 
-  buildInnerHTML: ->
-    {lineNumber, maxLineNumberDigits} = @props
-    if lineNumber.length < maxLineNumberDigits
-      padding = multiplyString('&nbsp;', maxLineNumberDigits - lineNumber.length)
-      padding + lineNumber + @iconDivHTML
+  # This dummy line number element holds the gutter to the appropriate width,
+  # since the real line numbers are absolutely positioned for performance reasons.
+  appendDummyLineNumber: ->
+    {maxLineNumberDigits} = @props
+    WrapperDiv.innerHTML = @buildLineNumberHTML(0, false, maxLineNumberDigits)
+    @dummyLineNumberNode = WrapperDiv.children[0]
+    @refs.lineNumbers.getDOMNode().appendChild(@dummyLineNumberNode)
+
+  updateDummyLineNumber: ->
+    @dummyLineNumberNode.innerHTML = @buildLineNumberInnerHTML(0, false, @props.maxLineNumberDigits)
+
+  updateLineNumbers: ->
+    lineNumberIdsToPreserve = @appendOrUpdateVisibleLineNumberNodes()
+    @removeLineNumberNodes(lineNumberIdsToPreserve)
+
+  appendOrUpdateVisibleLineNumberNodes: ->
+    {editor, renderedRowRange, scrollTop, maxLineNumberDigits} = @props
+    [startRow, endRow] = renderedRowRange
+
+    newLineNumberIds = null
+    newLineNumbersHTML = null
+    visibleLineNumberIds = new Set
+
+    wrapCount = 0
+    for bufferRow, index in editor.bufferRowsForScreenRows(startRow, endRow - 1)
+      screenRow = startRow + index
+
+      if bufferRow is lastBufferRow
+        id = "#{bufferRow}-#{wrapCount++}"
+      else
+        id = bufferRow.toString()
+        lastBufferRow = bufferRow
+        wrapCount = 0
+
+      visibleLineNumberIds.add(id)
+
+      if @hasLineNumberNode(id)
+        @updateLineNumberNode(id, screenRow)
+      else
+        newLineNumberIds ?= []
+        newLineNumbersHTML ?= ""
+        newLineNumberIds.push(id)
+        newLineNumbersHTML += @buildLineNumberHTML(bufferRow, wrapCount > 0, maxLineNumberDigits, screenRow)
+        @screenRowsByLineNumberId[id] = screenRow
+        @lineNumberIdsByScreenRow[screenRow] = id
+
+    if newLineNumberIds?
+      WrapperDiv.innerHTML = newLineNumbersHTML
+      newLineNumberNodes = toArray(WrapperDiv.children)
+
+      node = @refs.lineNumbers.getDOMNode()
+      for lineNumberId, i in newLineNumberIds
+        lineNumberNode = newLineNumberNodes[i]
+        @lineNumberNodesById[lineNumberId] = lineNumberNode
+        node.appendChild(lineNumberNode)
+
+    visibleLineNumberIds
+
+  removeLineNumberNodes: (lineNumberIdsToPreserve) ->
+    {mouseWheelScreenRow} = @props
+    node = @refs.lineNumbers.getDOMNode()
+    for lineNumberId, lineNumberNode of @lineNumberNodesById when not lineNumberIdsToPreserve?.has(lineNumberId)
+      screenRow = @screenRowsByLineNumberId[lineNumberId]
+      unless screenRow is mouseWheelScreenRow
+        delete @lineNumberNodesById[lineNumberId]
+        delete @lineNumberIdsByScreenRow[screenRow] if @lineNumberIdsByScreenRow[screenRow] is lineNumberId
+        delete @screenRowsByLineNumberId[lineNumberId]
+        node.removeChild(lineNumberNode)
+
+  buildLineNumberHTML: (bufferRow, softWrapped, maxLineNumberDigits, screenRow) ->
+    if screenRow?
+      {lineHeightInPixels} = @props
+      style = "position: absolute; top: #{screenRow * lineHeightInPixels}px;"
     else
-      lineNumber + @iconDivHTML
+      style = "visibility: hidden;"
+    innerHTML = @buildLineNumberInnerHTML(bufferRow, softWrapped, maxLineNumberDigits)
 
-  iconDivHTML: '<div class="icon-right"></div>'
+    "<div class=\"line-number\" style=\"#{style}\" data-screen-row=\"#{screenRow}\">#{innerHTML}</div>"
 
-  shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'lineHeight', 'screenRow', 'maxLineNumberDigits')
+  buildLineNumberInnerHTML: (bufferRow, softWrapped, maxLineNumberDigits) ->
+    if softWrapped
+      lineNumber = "•"
+    else
+      lineNumber = (bufferRow + 1).toString()
+
+    padding = multiplyString('&nbsp;', maxLineNumberDigits - lineNumber.length)
+    iconHTML = '<div class="icon-right"></div>'
+    padding + lineNumber + iconHTML
+
+  updateLineNumberNode: (lineNumberId, screenRow) ->
+    unless @screenRowsByLineNumberId[lineNumberId] is screenRow
+      {lineHeightInPixels} = @props
+      @lineNumberNodesById[lineNumberId].style.top = screenRow * lineHeightInPixels + 'px'
+      @lineNumberNodesById[lineNumberId].dataset.screenRow = screenRow
+      @screenRowsByLineNumberId[lineNumberId] = screenRow
+      @lineNumberIdsByScreenRow[screenRow] = lineNumberId
+
+  hasLineNumberNode: (lineNumberId) ->
+    @lineNumberNodesById.hasOwnProperty(lineNumberId)
+
+  lineNumberNodeForScreenRow: (screenRow) ->
+    @lineNumberNodesById[@lineNumberIdsByScreenRow[screenRow]]
+
+  measureWidth: ->
+    lineNumberNode = @refs.lineNumbers.getDOMNode().firstChild
+    # return unless lineNumberNode?
+
+    width = lineNumberNode.offsetWidth
+    if width isnt @lastMeasuredWidth
+      @props.onWidthChanged(@lastMeasuredWidth = width)

src/input-component.coffee

@@ -1,7 +1,7 @@
 punycode = require 'punycode'
 {last, isEqual} = require 'underscore-plus'
-React = require 'react'
-{input} = require 'reactionary'
+React = require 'react-atom-fork'
+{input} = require 'reactionary-atom-fork'
 
 module.exports =
 InputComponent = React.createClass
@@ -10,12 +10,13 @@ InputComponent = React.createClass
   render: ->
     {className, style, onFocus, onBlur} = @props
 
-    input {className, style, onFocus, onBlur}
+    input {className, style, onFocus, onBlur, 'data-react-skip-selection-restoration': true}
 
   getInitialState: ->
     {lastChar: ''}
 
   componentDidMount: ->
+    @getDOMNode().addEventListener 'paste', @onPaste
     @getDOMNode().addEventListener 'input', @onInput
     @getDOMNode().addEventListener 'compositionupdate', @onCompositionUpdate
 
@@ -32,6 +33,9 @@ InputComponent = React.createClass
   shouldComponentUpdate: (newProps) ->
     not isEqual(newProps.style, @props.style)
 
+  onPaste: (e) ->
+    e.preventDefault()
+
   onInput: (e) ->
     e.stopPropagation()
     valueCharCodes = punycode.ucs2.decode(@getDOMNode().value)

src/lines-component.coffee

@@ -1,34 +1,47 @@
-React = require 'react'
-{div, span} = require 'reactionary'
-{debounce, isEqual, isEqualForProperties, multiplyString} = require 'underscore-plus'
+React = require 'react-atom-fork'
+{div, span} = require 'reactionary-atom-fork'
+{debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 {$$} = require 'space-pen'
 
+SelectionsComponent = require './selections-component'
+
 DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
 AcceptFilter = {acceptNode: -> NodeFilter.FILTER_ACCEPT}
+WrapperDiv = document.createElement('div')
 
 module.exports =
 LinesComponent = React.createClass
   displayName: 'LinesComponent'
 
+  measureWhenShown: false
+
   render: ->
     if @isMounted()
-      {editor, renderedRowRange, lineHeight, showIndentGuide} = @props
-      [startRow, endRow] = renderedRowRange
+      {editor, scrollTop, scrollLeft, scrollHeight, scrollWidth, lineHeightInPixels, scrollViewHeight} = @props
+      style =
+        height: Math.max(scrollHeight, scrollViewHeight)
+        width: scrollWidth
+        WebkitTransform: "translate3d(#{-scrollLeft}px, #{-scrollTop}px, 0px)"
 
-      lines =
-        for tokenizedLine, i in editor.linesForScreenRows(startRow, endRow - 1)
-          LineComponent({key: tokenizedLine.id, tokenizedLine, showIndentGuide, lineHeight, screenRow: startRow + i})
-
-    div {className: 'lines'}, lines
+    div {className: 'lines', style},
+      SelectionsComponent({editor, lineHeightInPixels}) if @isMounted()
 
   componentWillMount: ->
     @measuredLines = new WeakSet
+    @lineNodesByLineId = {}
+    @screenRowsByLineId = {}
+    @lineIdsByScreenRow = {}
 
   componentDidMount: ->
-    @measureLineHeightAndCharWidth()
+    @measureLineHeightInPixelsAndCharWidth()
 
   shouldComponentUpdate: (newProps) ->
-    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'showIndentGuide')
+    return true if newProps.selectionChanged
+    return true unless isEqualForProperties(newProps, @props,
+      'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'lineHeightInPixels',
+      'scrollTop', 'scrollLeft', 'showIndentGuide', 'scrollingVertically', 'invisibles',
+      'visible', 'scrollViewHeight'
+    )
 
     {renderedRowRange, pendingChanges} = newProps
     for change in pendingChanges
@@ -37,28 +50,187 @@ LinesComponent = React.createClass
     false
 
   componentDidUpdate: (prevProps) ->
-    @measureLineHeightAndCharWidth() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
+    @measureLineHeightInPixelsAndCharWidthIfNeeded(prevProps)
+    @clearScreenRowCaches() unless prevProps.lineHeightInPixels is @props.lineHeightInPixels
+    @removeLineNodes() unless isEqualForProperties(prevProps, @props, 'showIndentGuide', 'invisibles')
+    @updateLines()
     @clearScopedCharWidths() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily')
     @measureCharactersInNewLines() unless @props.scrollingVertically
 
-  measureLineHeightAndCharWidth: ->
+  clearScreenRowCaches: ->
+    @screenRowsByLineId = {}
+    @lineIdsByScreenRow = {}
+
+  updateLines: ->
+    {editor, renderedRowRange, showIndentGuide, selectionChanged} = @props
+    [startRow, endRow] = renderedRowRange
+
+    visibleLines = editor.linesForScreenRows(startRow, endRow - 1)
+    @removeLineNodes(visibleLines)
+    @appendOrUpdateVisibleLineNodes(visibleLines, startRow)
+
+  removeLineNodes: (visibleLines=[]) ->
+    {mouseWheelScreenRow} = @props
+    visibleLineIds = new Set
+    visibleLineIds.add(line.id.toString()) for line in visibleLines
+    node = @getDOMNode()
+    for lineId, lineNode of @lineNodesByLineId when not visibleLineIds.has(lineId)
+      screenRow = @screenRowsByLineId[lineId]
+      unless screenRow is mouseWheelScreenRow
+        delete @lineNodesByLineId[lineId]
+        delete @lineIdsByScreenRow[screenRow] if @lineIdsByScreenRow[screenRow] is lineId
+        delete @screenRowsByLineId[lineId]
+        node.removeChild(lineNode)
+
+  appendOrUpdateVisibleLineNodes: (visibleLines, startRow) ->
+    newLines = null
+    newLinesHTML = null
+
+    for line, index in visibleLines
+      screenRow = startRow + index
+
+      if @hasLineNode(line.id)
+        @updateLineNode(line, screenRow)
+      else
+        newLines ?= []
+        newLinesHTML ?= ""
+        newLines.push(line)
+        newLinesHTML += @buildLineHTML(line, screenRow)
+        @screenRowsByLineId[line.id] = screenRow
+        @lineIdsByScreenRow[screenRow] = line.id
+
+    return unless newLines?
+
+    WrapperDiv.innerHTML = newLinesHTML
+    newLineNodes = toArray(WrapperDiv.children)
+    node = @getDOMNode()
+    for line, i in newLines
+      lineNode = newLineNodes[i]
+      @lineNodesByLineId[line.id] = lineNode
+      node.appendChild(lineNode)
+
+  hasLineNode: (lineId) ->
+    @lineNodesByLineId.hasOwnProperty(lineId)
+
+  buildLineHTML: (line, screenRow) ->
+    {editor, mini, showIndentGuide, lineHeightInPixels} = @props
+    {tokens, text, lineEnding, fold, isSoftWrapped, indentLevel} = line
+
+    top = screenRow * lineHeightInPixels
+    lineHTML = "<div class=\"line\" style=\"position: absolute; top: #{top}px;\" data-screen-row=\"#{screenRow}\">"
+
+    if text is ""
+      lineHTML += @buildEmptyLineInnerHTML(line)
+    else
+      lineHTML += @buildLineInnerHTML(line)
+
+    lineHTML += "</div>"
+    lineHTML
+
+  buildEmptyLineInnerHTML: (line) ->
+    {showIndentGuide} = @props
+    {indentLevel, tabLength} = line
+
+    if showIndentGuide and indentLevel > 0
+      indentSpan = "<span class='indent-guide'>#{multiplyString(' ', tabLength)}</span>"
+      multiplyString(indentSpan, indentLevel + 1)
+    else
+      "&nbsp;"
+
+  buildLineInnerHTML: (line) ->
+    {invisibles, mini, showIndentGuide, invisibles} = @props
+    {tokens, text} = line
+    innerHTML = ""
+
+    scopeStack = []
+    firstTrailingWhitespacePosition = text.search(/\s*$/)
+    lineIsWhitespaceOnly = firstTrailingWhitespacePosition is 0
+    for token in tokens
+      innerHTML += @updateScopeStack(scopeStack, token.scopes)
+      hasIndentGuide = not mini and showIndentGuide and token.hasLeadingWhitespace or (token.hasTrailingWhitespace and lineIsWhitespaceOnly)
+      innerHTML += token.getValueAsHtml({invisibles, hasIndentGuide})
+
+    innerHTML += @popScope(scopeStack) while scopeStack.length > 0
+    innerHTML += @buildEndOfLineHTML(line, invisibles)
+    innerHTML
+
+  buildEndOfLineHTML: (line, invisibles) ->
+    return '' if @props.mini or line.isSoftWrapped()
+
+    html = ''
+    if invisibles.cr? and line.lineEnding is '\r\n'
+      html += "<span class='invisible-character'>#{invisibles.cr}</span>"
+    if invisibles.eol?
+      html += "<span class='invisible-character'>#{invisibles.eol}</span>"
+
+    html
+
+  updateScopeStack: (scopeStack, desiredScopes) ->
+    html = ""
+
+    # Find a common prefix
+    for scope, i in desiredScopes
+      break unless scopeStack[i]?.scope is desiredScopes[i]
+
+    # Pop scopes until we're at the common prefx
+    until scopeStack.length is i
+      html += @popScope(scopeStack)
+
+    # Push onto common prefix until scopeStack equals desiredScopes
+    for j in [i...desiredScopes.length]
+      html += @pushScope(scopeStack, desiredScopes[j])
+
+    html
+
+  popScope: (scopeStack) ->
+    scopeStack.pop()
+    "</span>"
+
+  pushScope: (scopeStack, scope) ->
+    scopeStack.push(scope)
+    "<span class=\"#{scope.replace(/\.+/g, ' ')}\">"
+
+  updateLineNode: (line, screenRow) ->
+    unless @screenRowsByLineId[line.id] is screenRow
+      {lineHeightInPixels} = @props
+      lineNode = @lineNodesByLineId[line.id]
+      lineNode.style.top = screenRow * lineHeightInPixels + 'px'
+      lineNode.dataset.screenRow = screenRow
+      @screenRowsByLineId[line.id] = screenRow
+      @lineIdsByScreenRow[screenRow] = line.id
+
+  lineNodeForScreenRow: (screenRow) ->
+    @lineNodesByLineId[@lineIdsByScreenRow[screenRow]]
+
+  measureLineHeightInPixelsAndCharWidthIfNeeded: (prevProps) ->
+    {visible} = @props
+
+    unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
+      if visible
+        @measureLineHeightInPixelsAndCharWidth()
+      else
+        @measureWhenShown = true
+    @measureLineHeightInPixelsAndCharWidth() if visible and not prevProps.visible and @measureWhenShown
+
+  measureLineHeightInPixelsAndCharWidth: ->
+    @measureWhenShown = false
     node = @getDOMNode()
     node.appendChild(DummyLineNode)
-    lineHeight = DummyLineNode.getBoundingClientRect().height
+    lineHeightInPixels = DummyLineNode.getBoundingClientRect().height
     charWidth = DummyLineNode.firstChild.getBoundingClientRect().width
     node.removeChild(DummyLineNode)
 
     {editor} = @props
-    editor.setLineHeight(lineHeight)
+    editor.setLineHeightInPixels(lineHeightInPixels)
     editor.setDefaultCharWidth(charWidth)
 
   measureCharactersInNewLines: ->
     [visibleStartRow, visibleEndRow] = @props.renderedRowRange
     node = @getDOMNode()
 
-    for tokenizedLine, i in @props.editor.linesForScreenRows(visibleStartRow, visibleEndRow - 1)
+    for tokenizedLine in @props.editor.linesForScreenRows(visibleStartRow, visibleEndRow - 1)
       unless @measuredLines.has(tokenizedLine)
-        lineNode = node.children[i]
+        lineNode = @lineNodesByLineId[tokenizedLine.id]
         @measureCharactersInLine(tokenizedLine, lineNode)
 
   measureCharactersInLine: (tokenizedLine, lineNode) ->
@@ -97,44 +269,3 @@ LinesComponent = React.createClass
   clearScopedCharWidths: ->
     @measuredLines.clear()
     @props.editor.clearScopedCharWidths()
-
-
-LineComponent = React.createClass
-  displayName: 'LineComponent'
-
-  render: ->
-    {screenRow, lineHeight} = @props
-
-    style =
-      top: screenRow * lineHeight
-      position: 'absolute'
-
-    div className: 'line', style: style, 'data-screen-row': screenRow, dangerouslySetInnerHTML: {__html: @buildInnerHTML()}
-
-  buildInnerHTML: ->
-    if @props.tokenizedLine.text.length is 0
-      @buildEmptyLineHTML()
-    else
-      @buildScopeTreeHTML(@props.tokenizedLine.getScopeTree())
-
-  buildEmptyLineHTML: ->
-    {showIndentGuide, tokenizedLine} = @props
-    {indentLevel, tabLength} = tokenizedLine
-
-    if showIndentGuide and indentLevel > 0
-      indentSpan = "<span class='indent-guide'>#{multiplyString(' ', tabLength)}</span>"
-      multiplyString(indentSpan, indentLevel + 1)
-    else
-      "&nbsp;"
-
-  buildScopeTreeHTML: (scopeTree) ->
-    if scopeTree.children?
-      html = "<span class='#{scopeTree.scope.replace(/\./g, ' ')}'>"
-      html += @buildScopeTreeHTML(child) for child in scopeTree.children
-      html += "</span>"
-      html
-    else
-      "<span>#{scopeTree.getValueAsHtml({hasIndentGuide: @props.showIndentGuide})}</span>"
-
-  shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight', 'screenRow')

src/pane-view.coffee

@@ -149,7 +149,7 @@ class PaneView extends View
     hasFocus = @hasFocus()
     item.on? 'title-changed', @activeItemTitleChanged
     view = @viewForItem(item)
-    @itemViews.children().not(view).hide()
+    otherView.hide() for otherView in @itemViews.children().not(view).views()
     @itemViews.append(view) unless view.parent().is(@itemViews)
     view.show() if @attached
     view.focus() if hasFocus

src/react-editor-view.coffee

@@ -1,6 +1,7 @@
 {View, $} = require 'space-pen'
-React = require 'react'
+React = require 'react-atom-fork'
 EditorComponent = require './editor-component'
+{defaults} = require 'underscore-plus'
 
 module.exports =
 class ReactEditorView extends View
@@ -8,12 +9,12 @@ class ReactEditorView extends View
 
   focusOnAttach: false
 
-  constructor: (@editor) ->
+  constructor: (@editor, @props) ->
     super
 
   getEditor: -> @editor
 
-  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeight()
+  Object.defineProperty @::, 'lineHeight', get: -> @editor.getLineHeightInPixels()
   Object.defineProperty @::, 'charWidth', get: -> @editor.getDefaultCharWidth()
 
   scrollTop: (scrollTop) ->
@@ -37,11 +38,12 @@ class ReactEditorView extends View
   afterAttach: (onDom) ->
     return unless onDom
     @attached = true
-    @component = React.renderComponent(EditorComponent({@editor, parentView: this}), @element)
+    props = defaults({@editor, parentView: this}, @props)
+    @component = React.renderComponent(EditorComponent(props), @element)
 
     node = @component.getDOMNode()
 
-    @underlayer = $(node).find('.underlayer')
+    @underlayer = $(node).find('.selections')
 
     @gutter = $(node).find('.gutter')
     @gutter.removeClassFromAllLines = (klass) =>
@@ -64,7 +66,8 @@ class ReactEditorView extends View
 
   appendToLinesView: (view) ->
     view.css('position', 'absolute')
-    @find('.scroll-view-content').prepend(view)
+    view.css('z-index', 1)
+    @find('.lines').prepend(view)
 
   beforeRemove: ->
     React.unmountComponentAtNode(@element)
@@ -79,3 +82,11 @@ class ReactEditorView extends View
       @component.onFocus()
     else
       @focusOnAttach = true
+
+  hide: ->
+    super
+    @component.hide()
+
+  show: ->
+    super
+    @component.show()

src/scrollbar-component.coffee

@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 {extend, isEqualForProperties} = require 'underscore-plus'
 
 module.exports =

src/scrollbar-corner-component.coffee

@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 
 module.exports =
 ScrollbarComponent = React.createClass

src/selection-component.coffee

@@ -1,11 +1,65 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 
 module.exports =
 SelectionComponent = React.createClass
   displayName: 'SelectionComponent'
 
   render: ->
+    {editor, screenRange, lineHeightInPixels} = @props
+    {start, end} = screenRange
+    rowCount = end.row - start.row + 1
+    startPixelPosition = editor.pixelPositionForScreenPosition(start)
+    endPixelPosition = editor.pixelPositionForScreenPosition(end)
+
     div className: 'selection',
-      for regionRect, i in @props.selection.getRegionRects()
-        div className: 'region', key: i, style: regionRect
+      if rowCount is 1
+        @renderSingleLineRegions(startPixelPosition, endPixelPosition)
+      else
+        @renderMultiLineRegions(startPixelPosition, endPixelPosition, rowCount)
+
+  renderSingleLineRegions: (startPixelPosition, endPixelPosition) ->
+    {lineHeightInPixels} = @props
+
+    [
+      div className: 'region', key: 0, style:
+        top: startPixelPosition.top
+        height: lineHeightInPixels
+        left: startPixelPosition.left
+        width: endPixelPosition.left - startPixelPosition.left
+    ]
+
+  renderMultiLineRegions: (startPixelPosition, endPixelPosition, rowCount) ->
+    {lineHeightInPixels} = @props
+    regions = []
+    index = 0
+
+    # First row, extending from selection start to the right side of screen
+    regions.push(
+      div className: 'region', key: index++, style:
+        top: startPixelPosition.top
+        left: startPixelPosition.left
+        height: lineHeightInPixels
+        right: 0
+    )
+
+    # Middle rows, extending from left side to right side of screen
+    if rowCount > 2
+      regions.push(
+        div className: 'region', key: index++, style:
+          top: startPixelPosition.top + lineHeightInPixels
+          height: (rowCount - 2) * lineHeightInPixels
+          left: 0
+          right: 0
+      )
+
+    # Last row, extending from left side of screen to selection end
+    regions.push(
+      div className: 'region', key: index, style:
+        top: endPixelPosition.top
+        height: lineHeightInPixels
+        left: 0
+        width: endPixelPosition.left
+    )
+
+    regions

src/selection.coffee

@@ -563,6 +563,12 @@ class Selection extends Model
   intersectsBufferRange: (bufferRange) ->
     @getBufferRange().intersectsWith(bufferRange)
 
+  intersectsScreenRowRange: (startRow, endRow) ->
+    @getScreenRange().intersectsRowRange(startRow, endRow)
+
+  intersectsScreenRow: (screenRow) ->
+    @getScreenRange().intersectsRow(screenRow)
+
   # Public: Identifies if a selection intersects with another selection.
   #
   # otherSelection - A {Selection} to check against.
@@ -595,47 +601,6 @@ class Selection extends Model
   compare: (otherSelection) ->
     @getBufferRange().compare(otherSelection.getBufferRange())
 
-  # Get the pixel dimensions of rectangular regions that cover selection's area
-  # on the screen. Used by SelectionComponent for rendering.
-  getRegionRects: ->
-    lineHeight = @editor.getLineHeight()
-    {start, end} = @getScreenRange()
-    rowCount = end.row - start.row + 1
-    startPixelPosition = @editor.pixelPositionForScreenPosition(start)
-    endPixelPosition = @editor.pixelPositionForScreenPosition(end)
-
-    if rowCount is 1
-      # Single line selection
-      rects = [{
-        top: startPixelPosition.top
-        height: lineHeight
-        left: startPixelPosition.left
-        width: endPixelPosition.left - startPixelPosition.left
-      }]
-    else
-      # Multi-line selection
-      rects = []
-
-      # First row, extending from selection start to the right side of screen
-      rects.push {
-        top: startPixelPosition.top
-        left: startPixelPosition.left
-        height: lineHeight
-        right: 0
-      }
-      if rowCount > 2
-        # Middle rows, extending from left side to right side of screen
-        rects.push {
-          top: startPixelPosition.top + lineHeight
-          height: (rowCount - 2) * lineHeight
-          left: 0
-          right: 0
-        }
-      # Last row, extending from left side of screen to selection end
-      rects.push {top: endPixelPosition.top, height: lineHeight, left: 0, width: endPixelPosition.left }
-
-    rects
-
   screenRangeChanged: ->
     screenRange = @getScreenRange()
     @emit 'screen-range-changed', screenRange

src/selections-component.coffee

@@ -1,5 +1,5 @@
-React = require 'react'
-{div} = require 'reactionary'
+React = require 'react-atom-fork'
+{div} = require 'reactionary-atom-fork'
 SelectionComponent = require './selection-component'
 
 module.exports =
@@ -7,10 +7,37 @@ SelectionsComponent = React.createClass
   displayName: 'SelectionsComponent'
 
   render: ->
-    {editor} = @props
+    div className: 'selections', @renderSelections()
 
-    div className: 'selections',
-      if @isMounted()
-        for selection in editor.getSelections()
-          if not selection.isEmpty() and editor.selectionIntersectsVisibleRowRange(selection)
-            SelectionComponent({key: selection.id, selection})
+  renderSelections: ->
+    {editor, lineHeightInPixels} = @props
+
+    selectionComponents = []
+    for selectionId, screenRange of @selectionRanges
+      selectionComponents.push(SelectionComponent({key: selectionId, screenRange, editor, lineHeightInPixels}))
+    selectionComponents
+
+  componentWillMount: ->
+    @selectionRanges = {}
+
+  shouldComponentUpdate: ->
+    {editor} = @props
+    oldSelectionRanges = @selectionRanges
+    newSelectionRanges = {}
+    @selectionRanges = newSelectionRanges
+
+    for selection, index in editor.getSelections()
+      # Rendering artifacts occur on the lines GPU layer if we remove the last selection
+      if index is 0 or (not selection.isEmpty() and editor.selectionIntersectsVisibleRowRange(selection))
+        newSelectionRanges[selection.id] = selection.getScreenRange()
+
+    for id, range of newSelectionRanges
+      if oldSelectionRanges.hasOwnProperty(id)
+        return true unless range.isEqual(oldSelectionRanges[id])
+      else
+        return true
+
+    for id of oldSelectionRanges
+      return true unless newSelectionRanges.hasOwnProperty(id)
+
+    false

src/tokenized-line.coffee

@@ -7,11 +7,22 @@ class TokenizedLine
   constructor: ({tokens, @lineEnding, @ruleStack, @startBufferColumn, @fold, @tabLength, @indentLevel}) ->
     @tokens = @breakOutAtomicTokens(tokens)
     @startBufferColumn ?= 0
-    @text = _.pluck(@tokens, 'value').join('')
-    @bufferDelta = _.sum(_.pluck(@tokens, 'bufferDelta'))
+    @text = @buildText()
+    @bufferDelta = @buildBufferDelta()
+
     @id = idCounter++
     @markLeadingAndTrailingWhitespaceTokens()
 
+  buildText: ->
+    text = ""
+    text += token.value for token in @tokens
+    text
+
+  buildBufferDelta: ->
+    delta = 0
+    delta += token.bufferDelta for token in @tokens
+    delta
+
   copy: ->
     new TokenizedLine({@tokens, @lineEnding, @ruleStack, @startBufferColumn, @fold})
 

static/editor.less

@@ -13,7 +13,15 @@
   }
 
   .lines {
-    z-index: -1;
+    min-width: 100%;
+  }
+
+  .cursor {
+    z-index: 1;
+  }
+
+  &.is-focused .cursors.blink-off .cursor {
+    visibility: hidden;
   }
 
   .horizontal-scrollbar {
@@ -45,6 +53,7 @@
 
   .scroll-view {
     overflow: hidden;
+    z-index: 0;
   }
 
   .scroll-view-content {
@@ -53,15 +62,9 @@
   }
 
   .gutter {
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-
     .line-number {
-      position: absolute;
-      left: 0;
-      right: 0;
-      padding: 0;
       white-space: nowrap;
+      padding: 0 .5em;
 
       .icon-right {
         padding: 0;