Always reserve two digits on the line number gutter

We are working on a feature that changes the content of the editor when you mouse over some things and it makes the UI jump when going from 1 line to > 10. This makes the UI feel really bad.

I've looked at Sublime and the 1-9 state is the same as 1-99, only when you reach 100 lines then it jumps. I think that it is a better behavior as you want to minimize jumps as much as possible and it is extremely likely that you are going to hit the 9-10 lines threshold.

![](http://g.recordit.co/ABIlZf5eTx.gif)

While this is being reviewed and until the new version shipped, we are going to monkeypatch Atom in order to get this feature.

```js
var presenter = atom.textEditors.editors.entries().next().value[0].presenter.__proto__;
var old_updateLineNumberGutterState = presenter.updateLineNumberGutterState;
presenter.updateLineNumberGutterState = function() {
  var res = old_updateLineNumberGutterState.apply(this, arguments);
  this.lineNumberGutter.maxLineNumberDigits = Math.max(2, this.lineNumberGutter.maxLineNumberDigits);
  return res;
};
```

Released under CC0

spec/text-editor-component-spec.js

@@ -566,7 +566,7 @@ describe('TextEditorComponent', function () {
           editor.setSoftWrapped(true)
           runAnimationFrames()
 
-          componentNode.style.width = 16 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
+          componentNode.style.width = 17 * charWidth + wrapperNode.getVerticalScrollbarWidth() + 'px'
           component.measureDimensions()
           runAnimationFrames()
         })
@@ -935,13 +935,17 @@ describe('TextEditorComponent', function () {
     })
 
     it('pads line numbers to be right-justified based on the maximum number of line number digits', function () {
-      editor.getBuffer().setText([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].join('\n'))
+      const input = [];
+      for (let i = 1; i <= 100; ++i) {
+        input.push(i);
+      }
+      editor.getBuffer().setText(input.join('\n'))
       runAnimationFrames()
 
       for (let screenRow = 0; screenRow <= 8; ++screenRow) {
-        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + (screenRow + 1))
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + NBSP + (screenRow + 1))
       }
-      expect(component.lineNumberNodeForScreenRow(9).textContent).toBe('10')
+      expect(component.lineNumberNodeForScreenRow(99).textContent).toBe('100')
       let gutterNode = componentNode.querySelector('.gutter')
       let initialGutterWidth = gutterNode.offsetWidth
       editor.getBuffer().delete([[1, 0], [2, 0]])
@@ -949,7 +953,7 @@ describe('TextEditorComponent', function () {
       runAnimationFrames()
 
       for (let screenRow = 0; screenRow <= 8; ++screenRow) {
-        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + (screenRow + 1))
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + (screenRow + 1))
       }
       expect(gutterNode.offsetWidth).toBeLessThan(initialGutterWidth)
       editor.getBuffer().insert([0, 0], '\n\n')
@@ -957,9 +961,9 @@ describe('TextEditorComponent', function () {
       runAnimationFrames()
 
       for (let screenRow = 0; screenRow <= 8; ++screenRow) {
-        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + (screenRow + 1))
+        expect(component.lineNumberNodeForScreenRow(screenRow).textContent).toBe('' + NBSP + NBSP + (screenRow + 1))
       }
-      expect(component.lineNumberNodeForScreenRow(9).textContent).toBe('10')
+      expect(component.lineNumberNodeForScreenRow(99).textContent).toBe('100')
       expect(gutterNode.offsetWidth).toBe(initialGutterWidth)
     })
 

spec/text-editor-presenter-spec.coffee

@@ -2819,7 +2819,7 @@ describe "TextEditorPresenter", ->
             expect(getLineNumberGutterState(presenter).content.maxLineNumberDigits).toBe 2
 
             editor.setText("1\n2\n3")
-            expect(getLineNumberGutterState(presenter).content.maxLineNumberDigits).toBe 1
+            expect(getLineNumberGutterState(presenter).content.maxLineNumberDigits).toBe 2
 
         describe ".content.tiles", ->
           lineNumberStateForScreenRow = (presenter, screenRow) ->

src/text-editor-presenter.coffee

@@ -494,7 +494,10 @@ class TextEditorPresenter
     return
 
   updateLineNumberGutterState: ->
-    @lineNumberGutter.maxLineNumberDigits = @model.getLineCount().toString().length
+    @lineNumberGutter.maxLineNumberDigits = Math.max(
+      2,
+      @model.getLineCount().toString().length
+    )
 
   updateCommonGutterState: ->
     @sharedGutterStyles.backgroundColor = if @gutterBackgroundColor isnt "rgba(0, 0, 0, 0)"