Extend highlights to the full editor width

spec/text-editor-component-spec.coffee

@@ -246,8 +246,10 @@ describe "TextEditorComponent", ->
       # lines caused full-screen repaints after switching away from an editor
       # and back again Please ensure you don't cause a performance regression if
       # you change this behavior.
+      editorFullWidth = editor.getScrollWidth() + editor.getVerticalScrollbarWidth()
+
       for lineNode in lineNodes
-        expect(lineNode.style.width).toBe editor.getScrollWidth() + 'px'
+        expect(lineNode.style.width).toBe editorFullWidth + 'px'
 
       componentNode.style.width = gutterWidth + editor.getScrollWidth() + 100 + 'px'
       component.measureDimensions()

src/lines-component.coffee

@@ -54,14 +54,14 @@ class LinesComponent
     @removeTileNodes() unless @oldState.indentGuidesVisible is @newState.indentGuidesVisible
     @updateTileNodes()
 
-    if @newState.scrollWidth isnt @oldState.scrollWidth
-      @domNode.style.width = @newState.scrollWidth + 'px'
-      @oldState.scrollWidth = @newState.scrollWidth
+    if @newState.width isnt @oldState.width
+      @domNode.style.width = @newState.width + 'px'
 
     @cursorsComponent.updateSync(state)
 
     @oldState.indentGuidesVisible = @newState.indentGuidesVisible
     @oldState.scrollWidth = @newState.scrollWidth
+    @oldState.width = @newState.width
 
   removeTileNodes: ->
     @removeTileNode(id) for id of @oldState.tiles

src/text-editor-presenter.coffee

@@ -307,6 +307,7 @@ class TextEditorPresenter
     @state.hiddenInput.width = Math.max(width, 2)
 
   updateContentState: ->
+    @state.content.width = Math.max(@contentWidth + @verticalScrollbarWidth, @contentFrameWidth)
     @state.content.scrollWidth = @scrollWidth
     @state.content.scrollLeft = @scrollLeft
     @state.content.indentGuidesVisible = not @model.isMini() and @showIndentGuide

src/tile-component.coffee

@@ -52,6 +52,9 @@ class TileComponent
       @domNode.style.height = @newTileState.height + 'px'
       @oldTileState.height = @newTileState.height
 
+    if @newState.width isnt @oldState.width
+      @domNode.style.width = @newState.width + 'px'
+
     if @newTileState.top isnt @oldTileState.top or @newTileState.left isnt @oldTileState.left
       @domNode.style['-webkit-transform'] = "translate3d(#{@newTileState.left}px, #{@newTileState.top}px, 0px)"
       @oldTileState.top = @newTileState.top
@@ -60,14 +63,9 @@ class TileComponent
     @removeLineNodes() unless @oldState.indentGuidesVisible is @newState.indentGuidesVisible
     @updateLineNodes()
 
-    if @newState.scrollWidth isnt @oldState.scrollWidth
-      @domNode.style.width = @newState.scrollWidth + 'px'
-      @oldState.scrollWidth = @newState.scrollWidth
-
     @highlightsComponent.updateSync(@newTileState)
 
     @oldState.indentGuidesVisible = @newState.indentGuidesVisible
-    @oldState.scrollWidth = @newState.scrollWidth
 
   removeLineNodes: ->
     @removeLineNode(id) for id of @oldTileState.lines
@@ -112,7 +110,7 @@ class TileComponent
     return
 
   buildLineHTML: (id) ->
-    {scrollWidth} = @newState
+    {width} = @newState
     {screenRow, tokens, text, top, lineEnding, fold, isSoftWrapped, indentLevel, decorationClasses} = @newTileState.lines[id]
 
     classes = ''
@@ -121,7 +119,7 @@ class TileComponent
         classes += decorationClass + ' '
     classes += 'line'
 
-    lineHTML = "<div class=\"#{classes}\" style=\"position: absolute; top: #{top}px; width: #{scrollWidth}px;\" data-screen-row=\"#{screenRow}\">"
+    lineHTML = "<div class=\"#{classes}\" style=\"position: absolute; top: #{top}px; width: #{width}px;\" data-screen-row=\"#{screenRow}\">"
 
     if text is ""
       lineHTML += @buildEmptyLineInnerHTML(id)
@@ -281,8 +279,8 @@ class TileComponent
 
     lineNode = @lineNodesByLineId[id]
 
-    if @newState.scrollWidth isnt @oldState.scrollWidth
-      lineNode.style.width = @newState.scrollWidth + 'px'
+    if @newState.width isnt @oldState.width
+      lineNode.style.width = @newState.width + 'px'
 
     newDecorationClasses = newLineState.decorationClasses
     oldDecorationClasses = oldLineState.decorationClasses