Move the lines individually

Because overlay scrollbars are invisible unless scrolling and even
regular scrollbars can be transparent.

.gitignore

@@ -1,6 +1,7 @@
 *.swp
 *~
 .DS_Store
+Thumbs.db
 .project
 .svn
 .nvm-version

CONTRIBUTING.md

@@ -30,7 +30,7 @@ in the proper package's repository.
   * Follow the [CoffeeScript](#coffeescript-styleguide),
     [JavaScript](https://github.com/styleguide/javascript),
     and [CSS](https://github.com/styleguide/css) styleguides
-  * Include thoughtfully worded [Jasmine](http://pivotal.github.com/jasmine)
+  * 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.
@@ -52,11 +52,11 @@ in the proper package's repository.
   * Use the present tense
   * 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
-    * :penguin: when fixing something on Linux
+    * :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
 
 ## CoffeeScript Styleguide
 

README.md

@@ -8,8 +8,7 @@ Atom is designed to be customizable, but also usable without needing to edit a c
 
 Atom is modern, approachable, and hackable to the core.
 
-Visit [atom.io](http://atom.io)
-to learn more.
+Visit [atom.io](http://atom.io) to learn more.
 
 ## Installing
 
@@ -19,11 +18,51 @@ Atom will automatically update when a new release is available.
 
 ## Building
 
-```sh
-git clone git@github.com:atom/atom.git
-cd atom
-script/build # Creates application at /Applications/Atom.app
-```
+
+### OS X Requirements
+  * OS X 10.8 or later
+  * [node.js](http://nodejs.org/download/) v0.10.x
+  * Command Line Tools for [Xcode](https://developer.apple.com/xcode/downloads/) (run `xcode-select --install` to install)
+
+  ```sh
+  git clone https://github.com/atom/atom
+  cd atom
+  script/build # Creates application at /Applications/Atom.app
+  ```
+
+### Linux Requirements
+  * Ubuntu LTS 12.04 64-bit is the recommended platform
+  * OS with 64-bit architecture
+  * [node.js](http://nodejs.org/download/) v0.10.x
+  * [npm](http://www.npmjs.org/) v1.4.x
+  * `sudo apt-get install libgnome-keyring-dev`
+  * `npm config set python /usr/bin/python2 -g` to ensure that gyp uses Python 2
+
+  ```sh
+  git clone https://github.com/atom/atom
+  cd atom
+  script/build # Creates application at /tmp/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
+  ```
+
+### Windows Requirements
+  * Windows 7 or later
+  * [Visual C++ 2010 SP1 Express](http://www.microsoft.com/visualstudio/eng/products/visual-studio-2010-express)
+  * [node.js - 32bit](http://nodejs.org/download/) v0.10.x
+  * [Python 2.7.x](http://www.python.org/download/)
+  * [GitHub for Windows](http://windows.github.com/)
+  * [Git for Windows](http://git-scm.com/download/win)
+    * Select the option **Use Git from the Windows Command Prompt** when installing (Git needs to be in your `PATH`)
+  * Clone [atom/atom](https://github.com/atom/atom/) to `C:\Users\<user>\github\atom\`
+  * Add `C:\Python27;C:\Program Files\nodejs;C:\Users\<user>\github\atom\node_modules\`
+    to your PATH
+  * Open the Windows GitHub shell
+
+  ```bat
+  cd C:\Users\<user>\github\atom
+  script\build
+  ```
 
 ## Developing
-Check out the [guides](https://atom.io/docs/latest) and the [API reference](atom.io/docs/api).
+Check out the [guides](https://atom.io/docs/latest) and the [API reference](https://atom.io/docs/api).

apm/package.json

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

atom.sh

@@ -76,7 +76,13 @@ elif [ $OS == 'Linux' ]; then
     "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@"
     exit $?
   else
-    nohup "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@" > /dev/null 2>&1 &
+    (
+    nohup "$ATOM_PATH" --executed-from="$(pwd)" --pid=$$ "$@" > /tmp/atom-nohup.out 2>&1
+    if [ $? -ne 0 ]; then
+      cat /tmp/atom-nohup.out
+      exit $?
+    fi
+    ) &
   fi
 fi
 

build/tasks/set-version-task.coffee

@@ -5,7 +5,9 @@ module.exports = (grunt) ->
   {spawn} = require('./task-helpers')(grunt)
 
   getVersion = (callback) ->
-    if process.env.JANKY_SHA1 and process.env.JANKY_BRANCH is 'master'
+    onBuildMachine = process.env.JANKY_SHA1 and process.env.JANKY_BRANCH is 'master'
+    inRepository = fs.existsSync(path.resolve(__dirname, '..', '..', '.git'))
+    if onBuildMachine or not inRepository
       {version} = require(path.join(grunt.config.get('atom.appDir'), 'package.json'))
       callback(null, version)
     else

docs/converting-a-text-mate-bundle.md

@@ -20,7 +20,7 @@ apm help init
 
 You should see a message print out with details about the `apm init` command.
 
-If you do not, launch Atom and run the _Atom > Install Shell Commmands_ menu
+If you do not, launch Atom and run the _Atom > Install Shell Commands_ menu
 to install the `apm` and `atom` commands.
 
 ### Convert the Package

docs/converting-a-text-mate-theme.md

@@ -25,7 +25,7 @@ apm help init
 
 You should see a message print out with details about the `apm init` command.
 
-If you do not, launch Atom and run the _Atom > Install Shell Commmands_ menu
+If you do not, launch Atom and run the _Atom > Install Shell Commands_ menu
 to install the `apm` and `atom` commands.
 
 You can now run `apm help init` to see all the options for initializing new

docs/customizing-atom.md

@@ -34,7 +34,7 @@ apm help install
 
 You should see a message print out with details about the `apm install` command.
 
-If you do not, launch Atom and run the _Atom > Install Shell Commmands_ menu
+If you do not, launch Atom and run the _Atom > Install Shell Commands_ menu
 to install the `apm` and `atom` commands.
 
 You can also install packages by using the `apm install` command:

docs/publishing-a-package.md

@@ -7,7 +7,7 @@ Publishing a package allows other people to install it and use it in Atom. It
 is a great way to share what you've made and get feedback and contributions from
 others.
 
-This guide assumes your package's name is `my-package` and but you should pick a
+This guide assumes your package's name is `my-package` but you should pick a
 better name.
 
 ### Install apm
@@ -24,7 +24,7 @@ apm help publish
 
 You should see a message print out with details about the `apm publish` command.
 
-If you do not, launch Atom and run the _Atom > Install Shell Commmands_ menu
+If you do not, launch Atom and run the _Atom > Install Shell Commands_ menu
 to install the `apm` and `atom` commands.
 
 ### Prepare Your Package
@@ -42,7 +42,7 @@ If not, there are a few things you should check before publishing:
   * Your package is in a Git repository that has been pushed to
     [GitHub][github]. Follow [this guide][repo-guide] if your package isn't
     already on GitHub.
-  
+
 ### Publish Your Package
 
 Before you publish a package it is a good idea to check ahead of time if
@@ -59,7 +59,7 @@ Now let's review what the `apm publish` command does:
   3. Creates a new [Git tag][git-tag] for the version being published.
   4. Pushes the tag and current branch up to GitHub.
   5. Updates atom.io with the new version being published.
-  
+
 Now run the following commands to publish your package:
 
 ```sh
@@ -80,7 +80,7 @@ digit of the version before publishing so the published version will be `0.1.0`
 and the Git tag created will be `v0.1.0`.
 
 In the future you can run `apm publish major` to publish the `1.0.0` version but
-since this was the first version being published it is a good idead to start
+since this was the first version being published it is a good idea to start
 with a minor release.
 
 ### Further Reading

package.json

@@ -1,7 +1,7 @@
 {
   "name": "atom",
   "productName": "Atom",
-  "version": "0.93.0",
+  "version": "0.95.0",
   "description": "A hackable text editor for the 21st Century.",
   "main": "./src/browser/main.js",
   "repository": {
@@ -17,7 +17,7 @@
       "url": "http://github.com/atom/atom/raw/master/LICENSE.md"
     }
   ],
-  "atomShellVersion": "0.12.2",
+  "atomShellVersion": "0.12.3",
   "dependencies": {
     "async": "0.2.6",
     "atom-keymap": "^0.19.0",
@@ -41,16 +41,16 @@
     "nslog": "0.5.0",
     "oniguruma": "^1.0.6",
     "optimist": "0.4.0",
-    "pathwatcher": "^1.2.1",
+    "pathwatcher": "^1.2.3",
     "property-accessors": "^1",
     "q": "^1.0.1",
     "random-words": "0.0.1",
     "react": "^0.10.0",
-    "reactionary": "^0.8.0",
+    "reactionary": "^0.9.0",
     "runas": "^0.5",
     "scandal": "0.15.2",
     "scoped-property-store": "^0.9.0",
-    "scrollbar-style": "^0.1.0",
+    "scrollbar-style": "^0.3.0",
     "season": "^1.0.2",
     "semver": "1.1.4",
     "serializable": "^1",
@@ -80,7 +80,7 @@
     "deprecation-cop": "0.5.0",
     "dev-live-reload": "0.30.0",
     "exception-reporting": "0.17.0",
-    "feedback": "0.30.0",
+    "feedback": "0.32.0",
     "find-and-replace": "0.100.0",
     "fuzzy-finder": "0.50.0",
     "git-diff": "0.28.0",
@@ -93,18 +93,18 @@
     "metrics": "0.32.0",
     "open-on-github": "0.28.0",
     "package-generator": "0.30.0",
-    "release-notes": "0.28.0",
+    "release-notes": "0.29.0",
     "settings-view": "0.114.0",
     "snippets": "0.43.0",
-    "spell-check": "0.34.0",
+    "spell-check": "0.35.0",
     "status-bar": "0.40.0",
     "styleguide": "0.29.0",
-    "symbols-view": "0.50.0",
+    "symbols-view": "0.51.0",
     "tabs": "0.39.0",
     "timecop": "0.18.0",
     "tree-view": "0.92.0",
     "update-package-dependencies": "0.6.0",
-    "welcome": "0.12.0",
+    "welcome": "0.13.0",
     "whitespace": "0.22.0",
     "wrap-guide": "0.18.0",
     "language-c": "0.15.0",
@@ -116,9 +116,9 @@
     "language-html": "0.19.0",
     "language-hyperlink": "0.9.0",
     "language-java": "0.10.0",
-    "language-javascript": "0.24.0",
+    "language-javascript": "0.25.0",
     "language-json": "0.8.0",
-    "language-less": "0.8.0",
+    "language-less": "0.9.0",
     "language-make": "0.10.0",
     "language-objective-c": "0.11.0",
     "language-perl": "0.8.0",

script/bootstrap

@@ -31,7 +31,7 @@ if (!fs.existsSync(apmInstallPath))
 if (!fs.existsSync(path.join(apmInstallPath, 'node_modules')))
   fs.mkdirSync(path.join(apmInstallPath, 'node_modules'));
 
-var apmPath = 'apm/node_modules/atom-package-manager/bin/apm'
+var apmPath = path.resolve(__dirname, '..', 'apm', 'node_modules', 'atom-package-manager', 'bin', 'apm')
 var apmFlags = process.env.JANKY_SHA1 || process.argv.indexOf('--no-color') !== -1 ? '--no-color' : '';
 
 var npmPath = path.resolve(__dirname, '..', 'build', 'node_modules', '.bin', 'npm');

script/grunt.cmd

@@ -0,0 +1,5 @@
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\grunt" %*
+) ELSE (
+  node  "%~dp0\grunt" %*
+)

spec/display-buffer-spec.coffee

@@ -979,6 +979,7 @@ describe "DisplayBuffer", ->
   describe "::setScrollLeft", ->
     beforeEach ->
       displayBuffer.manageScrollPosition = true
+      displayBuffer.setLineHeight(10)
       displayBuffer.setDefaultCharWidth(10)
 
     it "disallows negative values", ->
@@ -1001,6 +1002,7 @@ describe "DisplayBuffer", ->
       displayBuffer.manageScrollPosition = true
       displayBuffer.setLineHeight(10)
       displayBuffer.setDefaultCharWidth(10)
+      displayBuffer.setHorizontalScrollbarHeight(0)
 
       displayBuffer.setHeight(50)
       displayBuffer.setWidth(50)

spec/editor-component-spec.coffee

@@ -1,9 +1,9 @@
-{extend, flatten, toArray} = require 'underscore-plus'
+{extend, flatten, toArray, last} = require 'underscore-plus'
 ReactEditorView = require '../src/react-editor-view'
 nbsp = String.fromCharCode(160)
 
 describe "EditorComponent", ->
-  [editor, wrapperView, component, node, verticalScrollbarNode, horizontalScrollbarNode] = []
+  [contentNode, editor, wrapperView, component, node, verticalScrollbarNode, horizontalScrollbarNode] = []
   [lineHeightInPixels, charWidth, delayAnimationFrames, nextAnimationFrame] = []
 
   beforeEach ->
@@ -26,6 +26,9 @@ describe "EditorComponent", ->
       atom.project.open('sample.js').then (o) -> editor = o
 
     runs ->
+      contentNode = document.querySelector('#jasmine-content')
+      contentNode.style.width = '1000px'
+
       wrapperView = new ReactEditorView(editor)
       wrapperView.attachToDom()
       {component} = wrapperView
@@ -38,6 +41,9 @@ describe "EditorComponent", ->
       verticalScrollbarNode = node.querySelector('.vertical-scrollbar')
       horizontalScrollbarNode = node.querySelector('.horizontal-scrollbar')
 
+  afterEach ->
+    contentNode.style.width = ''
+
   describe "line rendering", ->
     it "renders only the currently-visible lines", ->
       node.style.height = 4.5 * lineHeightInPixels + 'px'
@@ -51,28 +57,29 @@ describe "EditorComponent", ->
       verticalScrollbarNode.scrollTop = 2.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(node.querySelector('.scroll-view-content').style['-webkit-transform']).toBe "translate3d(0px, #{-2.5 * lineHeightInPixels}px, 0px)"
 
       lineNodes = node.querySelectorAll('.line')
       expect(lineNodes.length).toBe 6
-      expect(lineNodes[0].offsetTop).toBe 2 * lineHeightInPixels
+      expect(lineNodes[0].style['-webkit-transform']).toBe "translate3d(0px, #{2 * lineHeightInPixels}px, 0px)"
       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 transforms 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(lineNodes[0].style['-webkit-transform']).toBe "translate3d(0px, #{0 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[1].style['-webkit-transform']).toBe "translate3d(0px, #{1 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[2].style['-webkit-transform']).toBe "translate3d(0px, #{2 * lineHeightInPixels}px, 0px)"
 
       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(lineNodes[0].style['-webkit-transform']).toBe "translate3d(0px, #{0 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[1].style['-webkit-transform']).toBe "translate3d(0px, #{1 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[2].style['-webkit-transform']).toBe "translate3d(0px, #{2 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[3].style['-webkit-transform']).toBe "translate3d(0px, #{3 * lineHeightInPixels}px, 0px)"
+      expect(lineNodes[4].style['-webkit-transform']).toBe "translate3d(0px, #{4 * lineHeightInPixels}px, 0px)"
 
     describe "when indent guides are enabled", ->
       beforeEach ->
@@ -146,7 +153,7 @@ describe "EditorComponent", ->
       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.querySelector('.line-numbers').style['-webkit-transform']).toBe "translate3d(0px, #{-2.5 * lineHeightInPixels}px, 0px)"
 
       lineNumberNodes = node.querySelectorAll('.line-number')
       expect(lineNumberNodes.length).toBe 6
@@ -188,6 +195,20 @@ describe "EditorComponent", ->
       expect(lines[4].textContent).toBe "#{nbsp}3"
       expect(lines[5].textContent).toBe "#{nbsp}•"
 
+    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 node, i in lineNumberNodes[0..8]
+        expect(node.textContent).toBe "#{nbsp}#{i + 1}"
+      expect(lineNumberNodes[9].textContent).toBe '10'
+
+      # 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}"
+
   describe "cursor rendering", ->
     it "renders the currently visible cursors", ->
       cursor1 = editor.getCursor()
@@ -512,11 +533,11 @@ describe "EditorComponent", ->
       component.measureHeightAndWidth()
 
       scrollViewContentNode = node.querySelector('.scroll-view-content')
-      expect(scrollViewContentNode.style['-webkit-transform']).toBe "translate3d(0px, 0px, 0)"
+      expect(scrollViewContentNode.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(scrollViewContentNode.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", ->
@@ -529,6 +550,110 @@ describe "EditorComponent", ->
 
       expect(editor.getScrollLeft()).toBe 100
 
+    it "does not obscure the last line with the horizontal scrollbar", ->
+      node.style.height = 4.5 * lineHeightInPixels + 'px'
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+      editor.setScrollBottom(editor.getScrollHeight())
+      lastLineNode = last(node.querySelectorAll('.line'))
+      bottomOfLastLine = lastLineNode.getBoundingClientRect().bottom
+      topOfHorizontalScrollbar = horizontalScrollbarNode.getBoundingClientRect().top
+      expect(bottomOfLastLine).toBe topOfHorizontalScrollbar
+
+      # 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
+
+    it "does not obscure the last character of the longest line with the vertical scrollbar", ->
+      node.style.height = 7 * lineHeightInPixels + 'px'
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+
+      editor.setScrollLeft(Infinity)
+
+      lineNodes = node.querySelectorAll('.line')
+      rightOfLongestLine = lineNodes[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
+
+    it "only displays dummy scrollbars when scrollable in that direction", ->
+      expect(verticalScrollbarNode.style.display).toBe 'none'
+      expect(horizontalScrollbarNode.style.display).toBe 'none'
+
+      node.style.height = 4.5 * lineHeightInPixels + 'px'
+      node.style.width = '1000px'
+      component.measureHeightAndWidth()
+
+      expect(verticalScrollbarNode.style.display).toBe ''
+      expect(horizontalScrollbarNode.style.display).toBe 'none'
+
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+
+      expect(verticalScrollbarNode.style.display).toBe ''
+      expect(horizontalScrollbarNode.style.display).toBe ''
+
+      node.style.height = 20 * lineHeightInPixels + 'px'
+      component.measureHeightAndWidth()
+
+      expect(verticalScrollbarNode.style.display).toBe 'none'
+      expect(horizontalScrollbarNode.style.display).toBe ''
+
+    it "makes the dummy scrollbar divs only as tall/wide as the actual scrollbars", ->
+      node.style.height = 4 * lineHeightInPixels + 'px'
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+
+      atom.themes.applyStylesheet "test", """
+        ::-webkit-scrollbar {
+          width: 8px;
+          height: 8px;
+        }
+      """
+
+      scrollbarCornerNode = node.querySelector('.scrollbar-corner')
+      expect(verticalScrollbarNode.offsetWidth).toBe 8
+      expect(horizontalScrollbarNode.offsetHeight).toBe 8
+      expect(scrollbarCornerNode.offsetWidth).toBe 8
+      expect(scrollbarCornerNode.offsetHeight).toBe 8
+
+    it "assigns the bottom/right of the scrollbars to the width of the opposite scrollbar if it is visible", ->
+      scrollbarCornerNode = node.querySelector('.scrollbar-corner')
+
+      expect(verticalScrollbarNode.style.bottom).toBe ''
+      expect(horizontalScrollbarNode.style.right).toBe ''
+
+      node.style.height = 4.5 * lineHeightInPixels + 'px'
+      node.style.width = '1000px'
+      component.measureHeightAndWidth()
+      expect(verticalScrollbarNode.style.bottom).toBe ''
+      expect(horizontalScrollbarNode.style.right).toBe verticalScrollbarNode.offsetWidth + 'px'
+      expect(scrollbarCornerNode.style.display).toBe 'none'
+
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+      expect(verticalScrollbarNode.style.bottom).toBe horizontalScrollbarNode.offsetHeight + 'px'
+      expect(horizontalScrollbarNode.style.right).toBe verticalScrollbarNode.offsetWidth + 'px'
+      expect(scrollbarCornerNode.style.display).toBe ''
+
+      node.style.height = 20 * lineHeightInPixels + 'px'
+      component.measureHeightAndWidth()
+      expect(verticalScrollbarNode.style.bottom).toBe horizontalScrollbarNode.offsetHeight + 'px'
+      expect(horizontalScrollbarNode.style.right).toBe ''
+      expect(scrollbarCornerNode.style.display).toBe 'none'
+
+    it "accounts for the width of the gutter in the scrollWidth of the horizontal scrollbar", ->
+      gutterNode = node.querySelector('.gutter')
+      node.style.width = 10 * charWidth + 'px'
+      component.measureHeightAndWidth()
+
+      expect(horizontalScrollbarNode.scrollWidth).toBe gutterNode.offsetWidth + editor.getScrollWidth()
+
     describe "when a mousewheel event occurs on the editor", ->
       it "updates the horizontal or vertical scrollbar depending on which delta is greater (x or y)", ->
         node.style.height = 4.5 * lineHeightInPixels + 'px'

spec/editor-spec.coffee

@@ -698,6 +698,7 @@ describe "Editor", ->
         editor.setHorizontalScrollMargin(2)
         editor.setLineHeight(10)
         editor.setDefaultCharWidth(10)
+        editor.setHorizontalScrollbarHeight(0)
         editor.setHeight(5.5 * 10)
         editor.setWidth(5.5 * 10)
 
@@ -1138,6 +1139,7 @@ describe "Editor", ->
           editor.setDefaultCharWidth(10)
           editor.setHeight(50)
           editor.setWidth(50)
+          editor.setHorizontalScrollbarHeight(0)
           expect(editor.getScrollTop()).toBe 0
 
           editor.setSelectedBufferRange([[5, 6], [6, 8]], autoscroll: true)
@@ -3094,6 +3096,7 @@ describe "Editor", ->
       editor.setDefaultCharWidth(10)
       editor.setHeight(50)
       editor.setWidth(50)
+      editor.setHorizontalScrollbarHeight(0)
       expect(editor.getScrollTop()).toBe 0
       expect(editor.getScrollLeft()).toBe 0
 

spec/theme-manager-spec.coffee

@@ -131,15 +131,21 @@ describe "ThemeManager", ->
 
   describe "requireStylesheet(path)", ->
     it "synchronously loads css at the given path and installs a style tag for it in the head", ->
+      themeManager.on 'stylesheets-changed', stylesheetsChangedHandler = jasmine.createSpy("stylesheetsChangedHandler")
+      themeManager.on 'stylesheet-added', stylesheetAddedHandler = jasmine.createSpy("stylesheetAddedHandler")
       cssPath = atom.project.resolve('css.css')
       lengthBefore = $('head style').length
 
       themeManager.requireStylesheet(cssPath)
       expect($('head style').length).toBe lengthBefore + 1
 
+      expect(stylesheetAddedHandler).toHaveBeenCalled()
+      expect(stylesheetsChangedHandler).toHaveBeenCalled()
+
       element = $('head style[id*="css.css"]')
       expect(element.attr('id')).toBe themeManager.stringToId(cssPath)
       expect(element.text()).toBe fs.readFileSync(cssPath, 'utf8')
+      expect(element[0].sheet).toBe stylesheetAddedHandler.argsForCall[0][0]
 
       # doesn't append twice
       themeManager.requireStylesheet(cssPath)
@@ -187,9 +193,18 @@ describe "ThemeManager", ->
       themeManager.requireStylesheet(cssPath)
       expect($(document.body).css('font-weight')).toBe("bold")
 
+      themeManager.on 'stylesheet-removed', stylesheetRemovedHandler = jasmine.createSpy("stylesheetRemovedHandler")
       themeManager.on 'stylesheets-changed', stylesheetsChangedHandler = jasmine.createSpy("stylesheetsChangedHandler")
+
       themeManager.removeStylesheet(cssPath)
+
       expect($(document.body).css('font-weight')).not.toBe("bold")
+
+      expect(stylesheetRemovedHandler).toHaveBeenCalled()
+      stylesheet = stylesheetRemovedHandler.argsForCall[0][0]
+      expect(stylesheet instanceof CSSStyleSheet).toBe true
+      expect(stylesheet.cssRules[0].selectorText).toBe 'body'
+
       expect(stylesheetsChangedHandler).toHaveBeenCalled()
 
   describe "base stylesheet loading", ->
@@ -219,20 +234,21 @@ describe "ThemeManager", ->
 
   describe "when the user stylesheet changes", ->
     it "reloads it", ->
+      [stylesheetRemovedHandler, stylesheetAddedHandler, stylesheetsChangedHandler] = []
       userStylesheetPath = path.join(temp.mkdirSync("atom"), 'styles.less')
       fs.writeFileSync(userStylesheetPath, 'body {border-style: dotted !important;}')
-
       spyOn(themeManager, 'getUserStylesheetPath').andReturn userStylesheetPath
-      themeManager.on 'stylesheets-changed', stylesheetsChangedHandler = jasmine.createSpy("stylesheetsChangedHandler")
 
       waitsForPromise ->
         themeManager.activateThemes()
 
       runs ->
-        expect($(document.body).css('border-style')).toBe 'dotted'
-        expect(stylesheetsChangedHandler).toHaveBeenCalled()
-        stylesheetsChangedHandler.reset()
+        themeManager.on 'stylesheets-changed', stylesheetsChangedHandler = jasmine.createSpy("stylesheetsChangedHandler")
+        themeManager.on 'stylesheet-removed', stylesheetRemovedHandler = jasmine.createSpy("stylesheetRemovedHandler")
+        themeManager.on 'stylesheet-added', stylesheetAddedHandler = jasmine.createSpy("stylesheetAddedHandler")
         spyOn(themeManager, 'loadUserStylesheet').andCallThrough()
+
+        expect($(document.body).css('border-style')).toBe 'dotted'
         fs.writeFileSync(userStylesheetPath, 'body {border-style: dashed}')
 
       waitsFor ->
@@ -240,7 +256,16 @@ describe "ThemeManager", ->
 
       runs ->
         expect($(document.body).css('border-style')).toBe 'dashed'
+
+        expect(stylesheetRemovedHandler).toHaveBeenCalled()
+        expect(stylesheetRemovedHandler.argsForCall[0][0].cssRules[0].style.border).toBe 'dotted'
+
+        expect(stylesheetAddedHandler).toHaveBeenCalled()
+        expect(stylesheetAddedHandler.argsForCall[0][0].cssRules[0].style.border).toBe 'dashed'
+
         expect(stylesheetsChangedHandler).toHaveBeenCalled()
+
+        stylesheetRemovedHandler.reset()
         stylesheetsChangedHandler.reset()
         fs.removeSync(userStylesheetPath)
 
@@ -248,6 +273,8 @@ describe "ThemeManager", ->
         themeManager.loadUserStylesheet.callCount is 2
 
       runs ->
+        expect(stylesheetRemovedHandler).toHaveBeenCalled()
+        expect(stylesheetRemovedHandler.argsForCall[0][0].cssRules[0].style.border).toBe 'dashed'
         expect($(document.body).css('border-style')).toBe 'none'
         expect(stylesheetsChangedHandler).toHaveBeenCalled()
 

src/buffered-process.coffee

@@ -12,7 +12,7 @@ ChildProcess = require 'child_process'
 # args = ['-ef']
 # stdout = (output) -> console.log(output)
 # exit = (code) -> console.log("ps -ef exited with #{code}")
-# process = new BufferredProcess({command, args, stdout, exit})
+# process = new BufferedProcess({command, args, stdout, exit})
 # ```
 module.exports =
 class BufferedProcess

src/cursor.coffee

@@ -465,7 +465,7 @@ class Cursor extends Model
   getCurrentParagraphBufferRange: ->
     @editor.languageMode.rowRangeForParagraphAtBufferRow(@getBufferRow())
 
-  # Public: Returns the characters preceeding the cursor in the current word.
+  # Public: Returns the characters preceding the cursor in the current word.
   getCurrentWordPrefix: ->
     @editor.getTextInBufferRange([@getBeginningOfCurrentWordBufferPosition(), @getBufferPosition()])
 

src/display-buffer.coffee

@@ -32,6 +32,8 @@ class DisplayBuffer extends Model
 
   verticalScrollMargin: 2
   horizontalScrollMargin: 6
+  horizontalScrollbarHeight: 15
+  verticalScrollbarWidth: 15
 
   constructor: ({tabLength, @editorWidthInChars, @tokenizedBuffer, buffer}={}) ->
     super
@@ -111,32 +113,83 @@ class DisplayBuffer extends Model
   getHorizontalScrollMargin: -> @horizontalScrollMargin
   setHorizontalScrollMargin: (@horizontalScrollMargin) -> @horizontalScrollMargin
 
-  getHeight: -> @height ? @getScrollHeight()
+  getHorizontalScrollbarHeight: -> @horizontalScrollbarHeight
+  setHorizontalScrollbarHeight: (@horizontalScrollbarHeight) -> @horizontalScrollbarHeight
+
+  getVerticalScrollbarWidth: -> @verticalScrollbarWidth
+  setVerticalScrollbarWidth: (@verticalScrollbarWidth) -> @verticalScrollbarWidth
+
+  getHeight: ->
+    if @height?
+      @height
+    else
+      if @horizontallyScrollable()
+        @getScrollHeight() + @getHorizontalScrollbarHeight()
+      else
+        @getScrollHeight()
+
   setHeight: (@height) -> @height
 
-  getWidth: -> @width ? @getScrollWidth()
+  getClientHeight: (reentrant) ->
+    if @horizontallyScrollable(reentrant)
+      @getHeight() - @getHorizontalScrollbarHeight()
+    else
+      @getHeight()
+
+  getClientWidth: (reentrant) ->
+    if @verticallyScrollable(reentrant)
+      @getWidth() - @getVerticalScrollbarWidth()
+    else
+      @getWidth()
+
+  horizontallyScrollable: (reentrant) ->
+    return false unless @width?
+    return false if @getSoftWrap()
+    if reentrant
+      @getScrollWidth() > @getWidth()
+    else
+      @getScrollWidth() > @getClientWidth(true)
+
+  verticallyScrollable: (reentrant) ->
+    return false unless @height?
+    if reentrant
+      @getScrollHeight() > @getHeight()
+    else
+      @getScrollHeight() > @getClientHeight(true)
+
+  getWidth: ->
+    if @width?
+      @width
+    else
+      if @verticallyScrollable()
+        @getScrollWidth() + @getVerticalScrollbarWidth()
+      else
+        @getScrollWidth()
+
   setWidth: (newWidth) ->
     oldWidth = @width
     @width = newWidth
     @updateWrappedScreenLines() if newWidth isnt oldWidth and @softWrap
+    @setScrollTop(@getScrollTop()) # Ensure scrollTop is still valid in case horizontal scrollbar disappeared
     @width
 
   getScrollTop: -> @scrollTop
   setScrollTop: (scrollTop) ->
     if @manageScrollPosition
-      @scrollTop = Math.max(0, Math.min(@getScrollHeight() - @getHeight(), scrollTop))
+      @scrollTop = Math.max(0, Math.min(@getScrollHeight() - @getClientHeight(), scrollTop))
     else
       @scrollTop = scrollTop
 
   getScrollBottom: -> @scrollTop + @height
   setScrollBottom: (scrollBottom) ->
-    @setScrollTop(scrollBottom - @height)
+    @setScrollTop(scrollBottom - @getClientHeight())
     @getScrollBottom()
 
   getScrollLeft: -> @scrollLeft
   setScrollLeft: (scrollLeft) ->
     if @manageScrollPosition
-      @scrollLeft = Math.max(0, Math.min(@getScrollWidth() - @getWidth(), scrollLeft))
+      @scrollLeft = Math.max(0, Math.min(@getScrollWidth() - @getClientWidth(), scrollLeft))
+      @scrollLeft
     else
       @scrollLeft = scrollLeft
 
@@ -151,6 +204,8 @@ class DisplayBuffer extends Model
   getDefaultCharWidth: -> @defaultCharWidth
   setDefaultCharWidth: (@defaultCharWidth) -> @defaultCharWidth
 
+  getCursorWidth: -> 1
+
   getScopedCharWidth: (scopeNames, char) ->
     @getScopedCharWidths(scopeNames)[char]
 
@@ -178,7 +233,7 @@ class DisplayBuffer extends Model
     @getLineCount() * @getLineHeight()
 
   getScrollWidth: ->
-    @getMaxLineLength() * @getDefaultCharWidth()
+    (@getMaxLineLength() * @getDefaultCharWidth()) + @getCursorWidth()
 
   getVisibleRowRange: ->
     unless @getLineHeight() > 0

src/editor-component.coffee

@@ -1,10 +1,12 @@
 React = require 'react'
 {div, span} = require 'reactionary'
 {debounce} = require 'underscore-plus'
+scrollbarStyle = require 'scrollbar-style'
 
 GutterComponent = require './gutter-component'
 EditorScrollViewComponent = require './editor-scroll-view-component'
 ScrollbarComponent = require './scrollbar-component'
+ScrollbarCornerComponent = require './scrollbar-corner-component'
 SubscriberMixin = require './subscriber-mixin'
 
 module.exports =
@@ -20,10 +22,15 @@ EditorComponent = React.createClass
   cursorsMoved: false
   preservedRowRange: null
   scrollingVertically: false
+  gutterWidth: 0
+  refreshingScrollbars: false
+  measuringScrollbars: true
 
   render: ->
     {focused, fontSize, lineHeight, fontFamily, showIndentGuide} = @state
     {editor, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
+    maxLineNumberDigits = editor.getScreenLineCount().toString().length
+
     if @isMounted()
       renderedRowRange = @getRenderedRowRange()
       scrollHeight = editor.getScrollHeight()
@@ -31,14 +38,19 @@ EditorComponent = React.createClass
       scrollTop = editor.getScrollTop()
       scrollLeft = editor.getScrollLeft()
       lineHeightInPixels = editor.getLineHeight()
+      horizontalScrollbarHeight = editor.getHorizontalScrollbarHeight()
+      verticalScrollbarWidth = editor.getVerticalScrollbarWidth()
+      verticallyScrollable = editor.verticallyScrollable()
+      horizontallyScrollable = editor.horizontallyScrollable()
 
     className = 'editor editor-colors react'
     className += ' is-focused' if focused
 
     div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1,
       GutterComponent {
-        editor, renderedRowRange, scrollTop, scrollHeight,
-        lineHeight: lineHeightInPixels, @pendingChanges
+        editor, renderedRowRange, maxLineNumberDigits, scrollTop, scrollHeight,
+        lineHeight: lineHeightInPixels, fontSize, fontFamily, @pendingChanges,
+        onWidthChanged: @onGutterWidthChanged
       }
 
       EditorScrollViewComponent {
@@ -55,6 +67,10 @@ EditorComponent = React.createClass
         onScroll: @onVerticalScroll
         scrollTop: scrollTop
         scrollHeight: scrollHeight
+        visible: verticallyScrollable and not @refreshingScrollbars and not @measuringScrollbars
+        scrollableInOppositeDirection: horizontallyScrollable
+        verticalScrollbarWidth: verticalScrollbarWidth
+        horizontalScrollbarHeight: horizontalScrollbarHeight
 
       ScrollbarComponent
         ref: 'horizontalScrollbar'
@@ -62,7 +78,19 @@ EditorComponent = React.createClass
         orientation: 'horizontal'
         onScroll: @onHorizontalScroll
         scrollLeft: scrollLeft
-        scrollWidth: scrollWidth
+        scrollWidth: scrollWidth + @gutterWidth
+        visible: horizontallyScrollable and not @refreshingScrollbars and not @measuringScrollbars
+        scrollableInOppositeDirection: verticallyScrollable
+        verticalScrollbarWidth: verticalScrollbarWidth
+        horizontalScrollbarHeight: horizontalScrollbarHeight
+
+      # Also used to measure the height/width of scrollbars after the initial render
+      ScrollbarCornerComponent
+        ref: 'scrollbarCorner'
+        visible: not @refreshingScrollbars and (@measuringScrollbars or horizontallyScrollable and verticallyScrollable)
+        measuringScrollbars: @measuringScrollbars
+        height: horizontalScrollbarHeight
+        width: verticalScrollbarWidth
 
   getRenderedRowRange: ->
     renderedRowRange = @props.editor.getVisibleRowRange()
@@ -86,6 +114,9 @@ EditorComponent = React.createClass
     @observeEditor()
     @listenForDOMEvents()
     @listenForCommands()
+    @measureScrollbars()
+    @subscribe atom.themes, 'stylesheet-added stylsheet-removed', @onStylesheetsChanged
+    @subscribe scrollbarStyle.changes, @refreshScrollbars
     @props.editor.setVisible(true)
     @requestUpdate()
 
@@ -99,6 +130,8 @@ EditorComponent = React.createClass
   componentDidUpdate: ->
     @pendingChanges.length = 0
     @cursorsMoved = false
+    @refreshingScrollbars = false
+    @measureScrollbars() if @measuringScrollbars
     @props.parentView.trigger 'editor:display-updated'
 
   observeEditor: ->
@@ -230,6 +263,16 @@ EditorComponent = React.createClass
     @subscribe atom.config.observe 'editor.fontSize', @setFontSize
     @subscribe atom.config.observe 'editor.showIndentGuide', @setShowIndentGuide
 
+  measureScrollbars: ->
+    @measuringScrollbars = false
+
+    {editor} = @props
+    scrollbarCornerNode = @refs.scrollbarCorner.getDOMNode()
+    width = (scrollbarCornerNode.offsetWidth - scrollbarCornerNode.clientWidth) or 15
+    height = (scrollbarCornerNode.offsetHeight - scrollbarCornerNode.clientHeight) or 15
+    editor.setVerticalScrollbarWidth(width)
+    editor.setHorizontalScrollbarHeight(height)
+
   setFontSize: (fontSize) ->
     @setState({fontSize})
 
@@ -285,6 +328,35 @@ EditorComponent = React.createClass
 
     event.preventDefault()
 
+  onStylesheetsChanged: (stylesheet) ->
+    @refreshScrollbars() if @containsScrollbarSelector(stylesheet)
+
+  containsScrollbarSelector: (stylesheet) ->
+    for rule in stylesheet.cssRules
+      if rule.selectorText?.indexOf('scrollbar') > -1
+        return true
+    false
+
+  refreshScrollbars: ->
+    # Believe it or not, proper handling of changes to scrollbar styles requires
+    # three DOM updates.
+
+    # Scrollbar style changes won't apply to scrollbars that are already
+    # visible, so first we need to hide scrollbars so we can redisplay them and
+    # force Chromium to apply updates.
+    @refreshingScrollbars = true
+    @requestUpdate()
+
+    # Next, we display only the scrollbar corner so we can measure the new
+    # scrollbar dimensions. The ::measuringScrollbars property will be set back
+    # to false after the scrollbars are measured.
+    @measuringScrollbars = true
+    @requestUpdate()
+
+    # Finally, we restore the scrollbars based on the newly-measured dimensions
+    # if the editor's content and dimensions require them to be visible.
+    @requestUpdate()
+
   clearPreservedRowRange: ->
     @preservedRowRange = null
     @scrollingVertically = false
@@ -312,10 +384,10 @@ EditorComponent = React.createClass
     @requestUpdate() if editor.selectionIntersectsVisibleRowRange(selection)
 
   onScrollTopChanged: ->
-    @preservedRowRange = @getRenderedRowRange()
+    # @preservedRowRange = @getRenderedRowRange()
     @scrollingVertically = true
-    @clearPreservedRowRangeAfterDelay ?= debounce(@clearPreservedRowRange, 200)
-    @clearPreservedRowRangeAfterDelay()
+    # @clearPreservedRowRangeAfterDelay ?= debounce(@clearPreservedRowRange, 200)
+    # @clearPreservedRowRangeAfterDelay()
     @requestUpdate()
 
   onSelectionRemoved: (selection) ->
@@ -325,6 +397,9 @@ EditorComponent = React.createClass
   onCursorsMoved: ->
     @cursorsMoved = true
 
+  onGutterWidthChanged: (@gutterWidth) ->
+    @requestUpdate()
+
   requestUpdate: ->
     if @batchingUpdates
       @updateRequested = true

src/editor-scroll-view-component.coffee

@@ -25,9 +25,9 @@ EditorScrollViewComponent = React.createClass
       inputStyle.WebkitTransform = 'translateZ(0)'
 
       contentStyle =
-        height: scrollHeight
+        # height: scrollHeight
         minWidth: scrollWidth
-        WebkitTransform: "translate3d(#{-editor.getScrollLeft()}px, #{-editor.getScrollTop()}px, 0)"
+        # WebkitTransform: "translate3d(#{-editor.getScrollLeft()}px, #{-editor.getScrollTop()}px, 0px)"
 
     div className: 'scroll-view',
       InputComponent
@@ -42,7 +42,7 @@ EditorScrollViewComponent = React.createClass
         CursorsComponent({editor, cursorsMoved, cursorBlinkPeriod, cursorBlinkResumeDelay})
         LinesComponent {
           ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
-          renderedRowRange, pendingChanges, scrollingVertically
+          renderedRowRange, pendingChanges, scrollingVertically, scrollTop: editor.getScrollTop()
         }
         div className: 'underlayer',
           SelectionsComponent({editor})
@@ -182,17 +182,19 @@ EditorScrollViewComponent = React.createClass
   measureHeightAndWidth: ->
     return unless @isMounted()
 
-    node = @getDOMNode()
-    computedStyle = getComputedStyle(node)
     {editor} = @props
+    node = @getDOMNode()
+    editorNode = node.parentNode
+    {position} = getComputedStyle(editorNode)
+    {width, height} = editorNode.style
 
-    unless computedStyle.height is '0px'
-      clientHeight = node.clientHeight
+    if position is 'absolute' or height
+      clientHeight =  node.clientHeight
       editor.setHeight(clientHeight) if clientHeight > 0
 
-    unless computedStyle.width is '0px'
+    if position is 'absolute' or width
       clientWidth = node.clientWidth
-      editor.setWidth(clientWidth) if clientHeight > 0
+      editor.setWidth(clientWidth) if clientWidth > 0
 
   focus: ->
     @refs.input.focus()

src/editor-view.coffee

@@ -460,6 +460,9 @@ class EditorView extends View
         @hiddenInput.val(lastInput)
         false
 
+    # Ignore paste event, on Linux is wrongly emitted when user presses ctrl-v.
+    @on "paste", -> false
+
   bringHiddenInputIntoView: ->
     @hiddenInput.css(top: @scrollTop(), left: @scrollLeft())
 

src/editor.coffee

@@ -264,7 +264,7 @@ class Editor extends Model
     else
       'untitled'
 
-  # Controls visiblity based on the given {Boolean}.
+  # Controls visibility based on the given {Boolean}.
   setVisible: (visible) -> @displayBuffer.setVisible(visible)
 
   # Set the number of characters that can be displayed horizontally in the
@@ -275,7 +275,7 @@ class Editor extends Model
   setEditorWidthInChars: (editorWidthInChars) ->
     @displayBuffer.setEditorWidthInChars(editorWidthInChars)
 
-  # Public: Sets the column at which columsn will soft wrap
+  # Public: Sets the column at which column will soft wrap
   getSoftWrapColumn: -> @displayBuffer.getSoftWrapColumn()
 
   # Public: Returns a {Boolean} indicating whether softTabs are enabled for this
@@ -564,7 +564,7 @@ class Editor extends Model
   bufferRowForScreenRow: (row) -> @displayBuffer.bufferRowForScreenRow(row)
 
   # Public: Get the syntactic scopes for the most the given position in buffer
-  # coorditanates.
+  # coordinates.
   #
   # For example, if called with a position inside the parameter list of an
   # anonymous CoffeeScript function, the method returns the following array:
@@ -1269,7 +1269,7 @@ class Editor extends Model
   # Public: Determine if a given range in buffer coordinates intersects a
   # selection.
   #
-  # bufferRange - A {Range} or range-comptatible {Array}.
+  # bufferRange - A {Range} or range-compatible {Array}.
   #
   # Returns a {Boolean}.
   selectionIntersectsBufferRange: (bufferRange) ->
@@ -1543,28 +1543,28 @@ class Editor extends Model
   # cursor is already on the first character of the line, move it to the
   # beginning of the line.
   #
-  # This method may merge selections that end up intesecting.
+  # This method may merge selections that end up intersecting.
   selectToFirstCharacterOfLine: ->
     @expandSelectionsBackward (selection) => selection.selectToFirstCharacterOfLine()
 
   # Public: Move the cursor of each selection to the end of its line while
   # preserving the selection's tail position.
   #
-  # This method may merge selections that end up intesecting.
+  # This method may merge selections that end up intersecting.
   selectToEndOfLine: ->
     @expandSelectionsForward (selection) => selection.selectToEndOfLine()
 
   # Public: For each selection, move its cursor to the preceding word boundary
   # while maintaining the selection's tail position.
   #
-  # This method may merge selections that end up intesecting.
+  # This method may merge selections that end up intersecting.
   selectToPreviousWordBoundary: ->
     @expandSelectionsBackward (selection) => selection.selectToPreviousWordBoundary()
 
   # Public: For each selection, move its cursor to the next word boundary while
   # maintaining the selection's tail position.
   #
-  # This method may merge selections that end up intesecting.
+  # This method may merge selections that end up intersecting.
   selectToNextWordBoundary: ->
     @expandSelectionsForward (selection) => selection.selectToNextWordBoundary()
 
@@ -1574,7 +1574,7 @@ class Editor extends Model
   selectLine: ->
     @expandSelectionsForward (selection) => selection.selectLine()
 
-  # Public: Add a similarly-shaped selection to the next elibible line below
+  # Public: Add a similarly-shaped selection to the next eligible line below
   # each selection.
   #
   # Operates on all selections. If the selection is empty, adds an empty
@@ -1585,7 +1585,7 @@ class Editor extends Model
   addSelectionBelow: ->
     @expandSelectionsForward (selection) => selection.addSelectionBelow()
 
-  # Public: Add a similarly-shaped selection to the next elibible line above
+  # Public: Add a similarly-shaped selection to the next eligible line above
   # each selection.
   #
   # Operates on all selections. If the selection is empty, adds an empty
@@ -1838,6 +1838,8 @@ class Editor extends Model
   setHeight: (height) -> @displayBuffer.setHeight(height)
   getHeight: -> @displayBuffer.getHeight()
 
+  getClientHeight: -> @displayBuffer.getClientHeight()
+
   setWidth: (width) -> @displayBuffer.setWidth(width)
   getWidth: -> @displayBuffer.getWidth()
 
@@ -1876,6 +1878,16 @@ class Editor extends Model
 
   scrollToBufferPosition: (bufferPosition) -> @displayBuffer.scrollToBufferPosition(bufferPosition)
 
+  horizontallyScrollable: -> @displayBuffer.horizontallyScrollable()
+
+  verticallyScrollable: -> @displayBuffer.verticallyScrollable()
+
+  getHorizontalScrollbarHeight: -> @displayBuffer.getHorizontalScrollbarHeight()
+  setHorizontalScrollbarHeight: (height) -> @displayBuffer.setHorizontalScrollbarHeight(height)
+
+  getVerticalScrollbarWidth: -> @displayBuffer.getVerticalScrollbarWidth()
+  setVerticalScrollbarWidth: (width) -> @displayBuffer.setVerticalScrollbarWidth(width)
+
   # Deprecated: Call {::joinLines} instead.
   joinLine: ->
     deprecate("Use Editor::joinLines() instead")

src/git.coffee

@@ -13,7 +13,7 @@ Task = require './task'
 # `atom.project` global and calling `getRepo()`. Note that this will only be
 # available when the project is backed by a Git repository.
 #
-# This class handles submodules automically by taking a `path` argument to many
+# This class handles submodules automatically by taking a `path` argument to many
 # of the methods.  This `path` argument will determine which underlying
 # repository is used.
 #

src/gutter-component.coffee

@@ -8,34 +8,36 @@ GutterComponent = React.createClass
   displayName: 'GutterComponent'
   mixins: [SubscriberMixin]
 
+  lastMeasuredWidth: null
+
   render: ->
     div className: 'gutter',
       @renderLineNumbers() if @isMounted()
 
   renderLineNumbers: ->
-    {editor, renderedRowRange, scrollTop, scrollHeight} = @props
+    {editor, renderedRowRange, maxLineNumberDigits, scrollTop, scrollHeight} = @props
     [startRow, endRow] = renderedRowRange
     charWidth = editor.getDefaultCharWidth()
     lineHeight = editor.getLineHeight()
-    maxDigits = editor.getLastBufferRow().toString().length
     style =
-      width: charWidth * (maxDigits + 1.5)
+      width: charWidth * (maxLineNumberDigits + 1.5)
       height: scrollHeight
-      WebkitTransform: "translate3d(0, #{-scrollTop}px, 0)"
+      WebkitTransform: "translate3d(0px, #{-scrollTop}px, 0px)"
 
     lineNumbers = []
-    tokenizedLines = editor.linesForScreenRows(startRow, endRow - 1)
-    tokenizedLines.push({id: 0}) if tokenizedLines.length is 0
+    wrapCount = 0
     for bufferRow, i in editor.bufferRowsForScreenRows(startRow, endRow - 1)
       if bufferRow is lastBufferRow
         lineNumber = '•'
+        key = "#{bufferRow + 1}-#{++wrapCount}"
       else
         lastBufferRow = bufferRow
+        wrapCount = 0
         lineNumber = (bufferRow + 1).toString()
+        key = lineNumber
 
-      key = tokenizedLines[i].id
       screenRow = startRow + i
-      lineNumbers.push(LineNumberComponent({key, lineNumber, maxDigits, bufferRow, screenRow, lineHeight}))
+      lineNumbers.push(LineNumberComponent({key, lineNumber, maxLineNumberDigits, bufferRow, screenRow, lineHeight}))
       lastBufferRow = bufferRow
 
     div className: 'line-numbers', style: style,
@@ -45,7 +47,7 @@ GutterComponent = React.createClass
   # 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')
+    return true unless isEqualForProperties(newProps, @props, 'renderedRowRange', 'scrollTop', 'lineHeight', 'fontSize')
 
     {renderedRowRange, pendingChanges} = newProps
     for change in pendingChanges when change.screenDelta > 0 or change.bufferDelta > 0
@@ -53,6 +55,13 @@ GutterComponent = React.createClass
 
     false
 
+  componentDidUpdate: (oldProps) ->
+    unless @lastMeasuredWidth? and isEqualForProperties(oldProps, @props, 'maxLineNumberDigits', 'fontSize', 'fontFamily')
+      width = @getDOMNode().offsetWidth
+      if width isnt @lastMeasuredWidth
+        @lastMeasuredWidth = width
+        @props.onWidthChanged(width)
+
 LineNumberComponent = React.createClass
   displayName: 'LineNumberComponent'
 
@@ -66,9 +75,9 @@ LineNumberComponent = React.createClass
       dangerouslySetInnerHTML: {__html: @buildInnerHTML()}
 
   buildInnerHTML: ->
-    {lineNumber, maxDigits} = @props
-    if lineNumber.length < maxDigits
-      padding = multiplyString('&nbsp;', maxDigits - lineNumber.length)
+    {lineNumber, maxLineNumberDigits} = @props
+    if lineNumber.length < maxLineNumberDigits
+      padding = multiplyString('&nbsp;', maxLineNumberDigits - lineNumber.length)
       padding + lineNumber + @iconDivHTML
     else
       lineNumber + @iconDivHTML
@@ -76,4 +85,4 @@ LineNumberComponent = React.createClass
   iconDivHTML: '<div class="icon-right"></div>'
 
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'lineHeight', 'screenRow')
+    not isEqualForProperties(newProps, @props, 'lineHeight', 'screenRow', 'maxLineNumberDigits')

src/lines-component.coffee

@@ -12,12 +12,13 @@ LinesComponent = React.createClass
 
   render: ->
     if @isMounted()
-      {editor, renderedRowRange, lineHeight, showIndentGuide} = @props
+      {editor, renderedRowRange, scrollTop, lineHeight, showIndentGuide} = @props
       [startRow, endRow] = renderedRowRange
+      offset = scrollTop % lineHeight
 
       lines =
         for tokenizedLine, i in editor.linesForScreenRows(startRow, endRow - 1)
-          LineComponent({key: tokenizedLine.id, tokenizedLine, showIndentGuide, lineHeight, screenRow: startRow + i})
+          LineComponent({key: tokenizedLine.id, index: i, offset, tokenizedLine, showIndentGuide, lineHeight, screenRow: startRow + i})
 
     div {className: 'lines'}, lines
 
@@ -28,7 +29,7 @@ LinesComponent = React.createClass
     @measureLineHeightAndCharWidth()
 
   shouldComponentUpdate: (newProps) ->
-    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'fontSize', 'fontFamily', 'lineHeight', 'showIndentGuide')
+    return true unless isEqualForProperties(newProps, @props,  'renderedRowRange', 'scrollTop', 'fontSize', 'fontFamily', 'lineHeight', 'showIndentGuide')
 
     {renderedRowRange, pendingChanges} = newProps
     for change in pendingChanges
@@ -103,11 +104,9 @@ LineComponent = React.createClass
   displayName: 'LineComponent'
 
   render: ->
-    {screenRow, lineHeight} = @props
-
+    {index, screenRow, lineHeight, offset} = @props
     style =
-      top: screenRow * lineHeight
-      position: 'absolute'
+      WebkitTransform: "translate3d(0px, #{index * lineHeight - offset}px, 0px)"
 
     div className: 'line', style: style, 'data-screen-row': screenRow, dangerouslySetInnerHTML: {__html: @buildInnerHTML()}
 
@@ -137,4 +136,4 @@ LineComponent = React.createClass
       "<span>#{scopeTree.getValueAsHtml({hasIndentGuide: @props.showIndentGuide})}</span>"
 
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight', 'screenRow')
+    not isEqualForProperties(newProps, @props, 'showIndentGuide', 'lineHeight', 'screenRow', 'index', 'offset')

src/pane-view.coffee

@@ -10,7 +10,7 @@ Pane = require './pane'
 # Items can be almost anything however most commonly they're {EditorView}s.
 #
 # Most packages won't need to use this class, unless you're interested in
-# building a package that deals with switching between panes or tiems.
+# building a package that deals with switching between panes or items.
 module.exports =
 class PaneView extends View
   Delegator.includeInto(this)

src/scrollbar-component.coffee

@@ -1,13 +1,24 @@
 React = require 'react'
 {div} = require 'reactionary'
-{isEqualForProperties} = require 'underscore-plus'
+{extend, isEqualForProperties} = require 'underscore-plus'
 
 module.exports =
 ScrollbarComponent = React.createClass
   render: ->
-    {orientation, className, scrollHeight, scrollWidth} = @props
+    {orientation, className, scrollHeight, scrollWidth, visible} = @props
+    {scrollableInOppositeDirection, horizontalScrollbarHeight, verticalScrollbarWidth} = @props
 
-    div {className, @onScroll},
+    style = {}
+    style.display = 'none' unless visible
+    switch orientation
+      when 'vertical'
+        style.width = verticalScrollbarWidth
+        style.bottom = horizontalScrollbarHeight if scrollableInOppositeDirection
+      when 'horizontal'
+        style.height = horizontalScrollbarHeight
+        style.right = verticalScrollbarWidth if scrollableInOppositeDirection
+
+    div {className, style, @onScroll},
       switch orientation
         when 'vertical'
           div className: 'scrollbar-content', style: {height: scrollHeight}
@@ -21,11 +32,13 @@ ScrollbarComponent = React.createClass
       throw new Error("Must specify an orientation property of 'vertical' or 'horizontal'")
 
   shouldComponentUpdate: (newProps) ->
+    return true if newProps.visible isnt @props.visible
+
     switch @props.orientation
       when 'vertical'
-        not isEqualForProperties(newProps, @props, 'scrollHeight', 'scrollTop')
+        not isEqualForProperties(newProps, @props, 'scrollHeight', 'scrollTop', 'scrollableInOppositeDirection')
       when 'horizontal'
-        not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft')
+        not isEqualForProperties(newProps, @props, 'scrollWidth', 'scrollLeft', 'scrollableInOppositeDirection')
 
   componentDidUpdate: ->
     {orientation, scrollTop, scrollLeft} = @props

src/scrollbar-corner-component.coffee

@@ -0,0 +1,18 @@
+React = require 'react'
+{div} = require 'reactionary'
+
+module.exports =
+ScrollbarComponent = React.createClass
+  render: ->
+    {visible, measuringScrollbars, width, height} = @props
+
+    if measuringScrollbars
+      height = 25
+      width = 25
+
+    display = 'none' unless visible
+
+    div className: 'scrollbar-corner', style: {display, width, height},
+      div style:
+        height: height + 1
+        width: width + 1

src/theme-manager.coffee

@@ -158,10 +158,10 @@ class ThemeManager
   #                  load path.
   #
   # Returns the absolute path to the required stylesheet.
-  requireStylesheet: (stylesheetPath, ttype = 'bundled', htmlElement) ->
+  requireStylesheet: (stylesheetPath, type = 'bundled', htmlElement) ->
     if fullPath = @resolveStylesheet(stylesheetPath)
       content = @loadStylesheet(fullPath)
-      @applyStylesheet(fullPath, content, ttype = 'bundled', htmlElement)
+      @applyStylesheet(fullPath, content, type = 'bundled', htmlElement)
     else
       throw new Error("Could not find a file at path '#{stylesheetPath}'")
 
@@ -192,16 +192,24 @@ class ThemeManager
 
   removeStylesheet: (stylesheetPath) ->
     fullPath = @resolveStylesheet(stylesheetPath) ? stylesheetPath
-    @stylesheetElementForId(@stringToId(fullPath)).remove()
-    @emit 'stylesheets-changed'
+    element = @stylesheetElementForId(@stringToId(fullPath))
+    if element.length > 0
+      stylesheet = element[0].sheet
+      element.remove()
+      @emit 'stylesheet-removed', stylesheet
+      @emit 'stylesheets-changed'
 
-  applyStylesheet: (path, text, ttype = 'bundled', htmlElement=$('html')) ->
+  applyStylesheet: (path, text, type = 'bundled', htmlElement=$('html')) ->
     styleElement = @stylesheetElementForId(@stringToId(path), htmlElement)
     if styleElement.length
+      @emit 'stylesheet-removed', styleElement[0].sheet
       styleElement.text(text)
     else
-      if htmlElement.find("head style.#{ttype}").length
-        htmlElement.find("head style.#{ttype}:last").after "<style class='#{ttype}' id='#{@stringToId(path)}'>#{text}</style>"
+      styleElement = $("<style class='#{type}' id='#{@stringToId(path)}'>#{text}</style>")
+      if htmlElement.find("head style.#{type}").length
+        htmlElement.find("head style.#{type}:last").after(styleElement)
       else
-        htmlElement.find("head").append "<style class='#{ttype}' id='#{@stringToId(path)}'>#{text}</style>"
+        htmlElement.find("head").append(styleElement)
+
+    @emit 'stylesheet-added', styleElement[0].sheet
     @emit 'stylesheets-changed'

src/workspace-view.coffee

@@ -24,9 +24,9 @@ Editor = require './editor'
 # with the model object when possible, but it won't always be possible with the
 # current API.
 #
-# ## Adding Perimiter Panels
+# ## Adding Perimeter Panels
 #
-# Use the following methods if possible to attach panels to the perimiter of the
+# Use the following methods if possible to attach panels to the perimeter of the
 # workspace rather than manipulating the DOM directly to better insulate you to
 # changes in the workspace markup:
 #
@@ -64,7 +64,7 @@ class WorkspaceView extends View
   @version: 4
 
   @configDefaults:
-    ignoredNames: [".git", ".svn", ".DS_Store"]
+    ignoredNames: [".git", ".svn", ".DS_Store", "Thumbs.db"]
     excludeVcsIgnoredPaths: true
     disabledPackages: []
     themes: ['atom-dark-ui', 'atom-dark-syntax']

static/editor.less

@@ -14,6 +14,10 @@
 
   .lines {
     z-index: -1;
+
+    .line {
+      position: absolute;
+    }
   }
 
   .horizontal-scrollbar {
@@ -32,6 +36,17 @@
     }
   }
 
+  .vertical-scrollbar {
+    overflow-x: hidden;
+  }
+
+  .scrollbar-corner {
+    position: absolute;
+    overflow: auto;
+    bottom: 0;
+    right: 0;
+  }
+
   .scroll-view {
     overflow: hidden;
   }