Re-render everything if scrolling more than a page

React seems to be taking a long time to diff gutter lines and lines
when scrolling. This is an experiment to remove that overhead.

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'
@@ -188,6 +194,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()
@@ -529,6 +549,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/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,13 +233,13 @@ class DisplayBuffer extends Model
     @getLineCount() * @getLineHeight()
 
   getScrollWidth: ->
-    @getMaxLineLength() * @getDefaultCharWidth()
+    (@getMaxLineLength() * @getDefaultCharWidth()) + @getCursorWidth()
 
   getVisibleRowRange: ->
     unless @getLineHeight() > 0
       throw new Error("You must assign a non-zero lineHeight before calling ::getVisibleRowRange()")
 
-    heightInLines = Math.ceil(@getHeight() / @getLineHeight()) + 1
+    heightInLines = Math.ceil(@getClientHeight() / @getLineHeight()) + 1
     startRow = Math.floor(@getScrollTop() / @getLineHeight())
     endRow = Math.min(@getLineCount(), Math.ceil(startRow + heightInLines))
     [startRow, endRow]

src/editor-component.coffee

@@ -5,6 +5,7 @@ React = require 'react'
 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 +21,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,15 +37,20 @@ 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
-      }
+      # GutterComponent {
+      #   editor, renderedRowRange, maxLineNumberDigits, scrollTop, scrollHeight,
+      #   lineHeight: lineHeightInPixels, fontSize, fontFamily, @pendingChanges,
+      #   onWidthChanged: @onGutterWidthChanged
+      # }
 
       EditorScrollViewComponent {
         ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide
@@ -55,6 +66,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 +77,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 +113,8 @@ EditorComponent = React.createClass
     @observeEditor()
     @listenForDOMEvents()
     @listenForCommands()
+    @measureScrollbars()
+    @subscribe atom.themes, 'stylesheet-added stylsheet-removed', @onStylesheetsChanged
     @props.editor.setVisible(true)
     @requestUpdate()
 
@@ -99,6 +128,8 @@ EditorComponent = React.createClass
   componentDidUpdate: ->
     @pendingChanges.length = 0
     @cursorsMoved = false
+    @refreshingScrollbars = false
+    @measureScrollbars() if @measuringScrollbars
     @props.parentView.trigger 'editor:display-updated'
 
   observeEditor: ->
@@ -230,6 +261,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 +326,35 @@ EditorComponent = React.createClass
 
     event.preventDefault()
 
+  onStylesheetsChanged: (stylesheet) ->
+    # Only update when the scrollbar is changed
+    return unless @containsScrollbarSelector(stylesheet)
+
+    # 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()
+
+  containsScrollbarSelector: (stylesheet) ->
+    for rule in stylesheet.cssRules
+      if rule.selectorText?.indexOf('scrollbar') > -1
+        return true
+    false
+
   clearPreservedRowRange: ->
     @preservedRowRange = null
     @scrollingVertically = false
@@ -312,10 +382,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 +395,9 @@ EditorComponent = React.createClass
   onCursorsMoved: ->
     @cursorsMoved = true
 
+  onGutterWidthChanged: (@gutterWidth) ->
+    @requestUpdate()
+
   requestUpdate: ->
     if @batchingUpdates
       @updateRequested = true

src/editor-scroll-view-component.coffee

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

@@ -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/gutter-component.coffee

@@ -8,18 +8,19 @@ 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)"
 
@@ -35,7 +36,7 @@ GutterComponent = React.createClass
 
       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 +46,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 +54,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 +74,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 +84,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

@@ -1,7 +1,8 @@
 React = require 'react'
 {div, span} = require 'reactionary'
-{debounce, isEqual, isEqualForProperties, multiplyString} = require 'underscore-plus'
+{debounce, isEqual, isEqualForProperties, multiplyString, toArray} = require 'underscore-plus'
 {$$} = require 'space-pen'
+EditorView = require './editor-view'
 
 DummyLineNode = $$(-> @div className: 'line', style: 'position: absolute; visibility: hidden;', => @span 'x')[0]
 AcceptFilter = {acceptNode: -> NodeFilter.FILTER_ACCEPT}
@@ -11,15 +12,7 @@ LinesComponent = React.createClass
   displayName: 'LinesComponent'
 
   render: ->
-    if @isMounted()
-      {editor, renderedRowRange, lineHeight, showIndentGuide} = @props
-      [startRow, endRow] = renderedRowRange
-
-      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'
 
   componentWillMount: ->
     @measuredLines = new WeakSet
@@ -37,9 +30,14 @@ LinesComponent = React.createClass
     false
 
   componentDidUpdate: (prevProps) ->
+    if not prevProps.renderedRowRange? or prevProps.lineHeight isnt @props.lineHeight
+      @renderLines()
+    else
+      @updateRenderedLines(prevProps.renderedRowRange)
+
     @measureLineHeightAndCharWidth() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily', 'lineHeight')
-    @clearScopedCharWidths() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily')
-    @measureCharactersInNewLines() unless @props.scrollingVertically
+    # @clearScopedCharWidths() unless isEqualForProperties(prevProps, @props, 'fontSize', 'fontFamily')
+    # @measureCharactersInNewLines() unless @props.scrollingVertically
 
   measureLineHeightAndCharWidth: ->
     node = @getDOMNode()
@@ -52,6 +50,75 @@ LinesComponent = React.createClass
     editor.setLineHeight(lineHeight)
     editor.setDefaultCharWidth(charWidth)
 
+  renderLines: ->
+    [startRow, endRow] = @props.renderedRowRange
+    @getDOMNode().innerHTML = @buildHTMLForScreenRowRange(startRow, endRow)
+
+  updateRenderedLines: (oldRenderedRowRange) ->
+    [oldStartRow, oldEndRow] = oldRenderedRowRange
+    [newStartRow, newEndRow] = @props.renderedRowRange
+    node = @getDOMNode()
+
+    if newEndRow <= oldStartRow or newStartRow >= oldEndRow
+      @renderLines()
+      return
+
+    if newEndRow > oldEndRow
+      for lineNode in @buildLineNodesForScreenRowRange(oldEndRow, newEndRow)
+        node.appendChild(lineNode)
+    else if newEndRow < oldEndRow
+      extraLineCount = oldEndRow - newEndRow
+      while extraLineCount > 0
+        node.removeChild(node.lastChild)
+        extraLineCount--
+
+    if newStartRow < oldStartRow
+      oldFirstLineNode = node.firstChild
+      for lineNode in @buildLineNodesForScreenRowRange(newStartRow, Math.min(newEndRow, oldStartRow))
+        node.insertBefore(lineNode, oldFirstLineNode)
+    else if newStartRow > oldStartRow
+      extraLineCount = newStartRow - oldStartRow
+      while extraLineCount > 0
+        node.removeChild(node.firstChild)
+        extraLineCount--
+
+  buildLineNodesForScreenRowRange: (startRow, endRow) ->
+    wrapper = document.createElement('div')
+    wrapper.innerHTML = @buildHTMLForScreenRowRange(startRow, endRow)
+    toArray(wrapper.children)
+
+  buildHTMLForScreenRowRange: (startRow, endRow) ->
+    {editor} = @props
+
+    linesHTML = ""
+    for tokenizedLine, i in editor.linesForScreenRows(startRow, endRow - 1)
+      linesHTML += @buildHTMLForTokenizedLine(tokenizedLine, startRow + i)
+    linesHTML
+
+  buildHTMLForTokenizedLine: (screenLine, screenRow) ->
+    {tokens, text, lineEnding, fold, isSoftWrapped} =  screenLine
+    {editor, lineHeight, showIndentGuide, mini} = @props
+
+    attributes =
+      class: "line"
+      style: "-webkit-transform: translate3d(0, #{screenRow * lineHeight}px, 0)"
+
+    if fold
+      attributes.class += " fold"
+      attributes['fold-id'] = fold.id
+
+    # invisibles = @invisibles if @showInvisibles
+    # eolInvisibles = @getEndOfLineInvisibles(screenLine)
+    # htmlEolInvisibles = @buildHtmlEndOfLineInvisibles(screenLine)
+
+    invisibles = {}
+    eolInvisibles = {}
+    htmlEolInvisibles = ""
+
+    indentation = EditorView.buildIndentation(screenRow, editor)
+
+    EditorView.buildLineHtml({tokens, text, lineEnding, fold, isSoftWrapped, invisibles, eolInvisibles, htmlEolInvisibles, attributes, showIndentGuide, indentation, editor, mini})
+
   measureCharactersInNewLines: ->
     [visibleStartRow, visibleEndRow] = @props.renderedRowRange
     node = @getDOMNode()
@@ -97,44 +164,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/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'

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;
   }