Merge pull request #8520 from atom/as-lines-height

Change lines container height based on `TextEditorElement` dimensions

spec/text-editor-component-spec.coffee

@@ -88,6 +88,21 @@ describe "TextEditorComponent", ->
       else
         expect(lineNode.textContent).toBe(tokenizedLine.text)
 
+    it "gives the lines container the same height as the wrapper node", ->
+      linesNode = componentNode.querySelector(".lines")
+
+      wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      expect(linesNode.getBoundingClientRect().height).toBe(6.5 * lineHeightInPixels)
+
+      wrapperNode.style.height = 3.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      expect(linesNode.getBoundingClientRect().height).toBe(3.5 * lineHeightInPixels)
+
     it "renders tiles upper in the stack in front of the ones below", ->
       wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
       component.measureDimensions()
@@ -586,6 +601,21 @@ describe "TextEditorComponent", ->
       expect(lineNode.offsetTop).toBe(top)
       expect(lineNode.textContent).toBe(text)
 
+    it "gives the line numbers container the same height as the wrapper node", ->
+      linesNode = componentNode.querySelector(".lines")
+
+      wrapperNode.style.height = 6.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      expect(linesNode.getBoundingClientRect().height).toBe(6.5 * lineHeightInPixels)
+
+      wrapperNode.style.height = 3.5 * lineHeightInPixels + 'px'
+      component.measureDimensions()
+      nextAnimationFrame()
+
+      expect(linesNode.getBoundingClientRect().height).toBe(3.5 * lineHeightInPixels)
+
     it "renders the currently-visible line numbers in a tiled fashion", ->
       wrapperNode.style.height = 4.5 * lineHeightInPixels + 'px'
       component.measureDimensions()

spec/text-editor-presenter-spec.coffee

@@ -559,6 +559,18 @@ describe "TextEditorPresenter", ->
           expectStateUpdate presenter, -> advanceClock(100)
           expect(presenter.getState().content.scrollingVertically).toBe false
 
+      describe ".maxHeight", ->
+        it "changes based on boundingClientRect", ->
+          presenter = buildPresenter(scrollTop: 0, lineHeight: 10)
+
+          expectStateUpdate presenter, ->
+            presenter.setBoundingClientRect(left: 0, top: 0, height: 20, width: 0)
+          expect(presenter.getState().content.maxHeight).toBe(20)
+
+          expectStateUpdate presenter, ->
+            presenter.setBoundingClientRect(left: 0, top: 0, height: 50, width: 0)
+          expect(presenter.getState().content.maxHeight).toBe(50)
+
       describe ".scrollHeight", ->
         it "is initialized based on the lineHeight, the number of lines, and the height", ->
           presenter = buildPresenter(scrollTop: 0, lineHeight: 10)

src/line-number-gutter-component.coffee

@@ -47,9 +47,9 @@ class LineNumberGutterComponent extends TiledComponent
   beforeUpdateSync: (state) ->
     @appendDummyLineNumber() unless @dummyLineNumberNode?
 
-    if @newState.styles.scrollHeight isnt @oldState.styles.scrollHeight
-      @lineNumbersNode.style.height = @newState.styles.scrollHeight + 'px'
-      @oldState.scrollHeight = @newState.scrollHeight
+    if @newState.styles.maxHeight isnt @oldState.styles.maxHeight
+      @lineNumbersNode.style.height = @newState.styles.maxHeight + 'px'
+      @oldState.maxHeight = @newState.maxHeight
 
     if @newState.styles.backgroundColor isnt @oldState.styles.backgroundColor
       @lineNumbersNode.style.backgroundColor = @newState.styles.backgroundColor

src/lines-component.coffee

@@ -35,9 +35,9 @@ class LinesComponent extends TiledComponent
     @oldState.indentGuidesVisible isnt @newState.indentGuidesVisible
 
   beforeUpdateSync: (state) ->
-    if @newState.scrollHeight isnt @oldState.scrollHeight
-      @domNode.style.height = @newState.scrollHeight + 'px'
-      @oldState.scrollHeight = @newState.scrollHeight
+    if @newState.maxHeight isnt @oldState.maxHeight
+      @domNode.style.height = @newState.maxHeight + 'px'
+      @oldState.maxHeight = @newState.maxHeight
 
     if @newState.backgroundColor isnt @oldState.backgroundColor
       @domNode.style.backgroundColor = @newState.backgroundColor

src/text-editor-presenter.coffee

@@ -304,6 +304,10 @@ class TextEditorPresenter
     @state.hiddenInput.width = Math.max(width, 2)
 
   updateContentState: ->
+    if @boundingClientRect?
+      @sharedGutterStyles.maxHeight = @boundingClientRect.height
+      @state.content.maxHeight = @boundingClientRect.height
+
     @state.content.width = Math.max(@contentWidth + @verticalScrollbarWidth, @contentFrameWidth)
     @state.content.scrollWidth = @scrollWidth
     @state.content.scrollLeft = @scrollLeft
@@ -918,6 +922,7 @@ class TextEditorPresenter
     unless @clientRectsEqual(@boundingClientRect, boundingClientRect)
       @boundingClientRect = boundingClientRect
       @shouldUpdateOverlaysState = true
+      @shouldUpdateContentState = true
 
       @emitDidUpdateState()