From 8103bd687cfd22e82ea56d8b79f20b5c1c9fdf9b Mon Sep 17 00:00:00 2001
From: Antonio Scandurra <as-cii@github.com>
Date: Tue, 11 Apr 2017 14:24:38 +0200
Subject: [PATCH] Update line number gutter when invalidating a visible block
 decoration

When two or more decorations in the same tile were invalidated but the
sum of their height didn't change, we were previously failing to
recognize that the line numbers gutter needed to be re-rendered. With
this commit, whenever a block decoration is visible and gets
invalidated, we will force the line number gutter to always update.
---
 spec/text-editor-component-spec.js | 8 ++++++--
 src/text-editor-component.js       | 5 +++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/spec/text-editor-component-spec.js b/spec/text-editor-component-spec.js
index 398ad7155..80269f9c9 100644
--- a/spec/text-editor-component-spec.js
+++ b/spec/text-editor-component-spec.js
@@ -1371,9 +1371,13 @@ describe('TextEditorComponent', () => {
       expect(element.contains(item5)).toBe(false)
       expect(element.contains(item6)).toBe(false)
 
-      // invalidate decorations
-      item2.style.height = '20px'
+      // invalidate decorations. this also tests a case where two decorations in
+      // the same tile change their height without affecting the tile height nor
+      // the content height.
       item3.style.height = '22px'
+      item3.style.margin = '10px'
+      item2.style.height = '33px'
+      item2.style.margin = '0px'
       component.invalidateBlockDecorationDimensions(decoration2)
       component.invalidateBlockDecorationDimensions(decoration3)
       await component.getNextUpdatePromise()
diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index c87958f98..1915f93be 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -204,6 +204,8 @@ class TextEditorComponent {
             parentElement.appendChild(sentinelElement)
             sentinelElements.add(sentinelElement)
           }
+
+          this.didMeasureVisibleBlockDecoration = true
         } else {
           blockDecorationMeasurementArea.appendChild(decorationElement)
           blockDecorationMeasurementArea.appendChild(document.createElement('div'))
@@ -237,6 +239,7 @@ class TextEditorComponent {
     this.shouldRenderDummyScrollbars = !this.refreshedScrollbarStyle
     etch.updateSync(this)
     this.shouldRenderDummyScrollbars = true
+    this.didMeasureVisibleBlockDecoration = false
   }
 
   measureContentDuringUpdateSync () {
@@ -403,6 +406,7 @@ class TextEditorComponent {
         foldableFlags: foldableFlags,
         decorations: this.decorationsToRender.lineNumbers,
         blockDecorations: this.decorationsToRender.blocks,
+        didMeasureVisibleBlockDecoration: this.didMeasureVisibleBlockDecoration,
         height: this.getScrollHeight(),
         width: this.getLineNumberGutterWidth(),
         lineHeight: this.getLineHeight(),
@@ -2426,6 +2430,7 @@ class LineNumberGutterComponent {
     if (oldProps.endRow !== newProps.endRow) return true
     if (oldProps.rowsPerTile !== newProps.rowsPerTile) return true
     if (oldProps.maxDigits !== newProps.maxDigits) return true
+    if (newProps.didMeasureVisibleBlockDecoration) return true
     if (!arraysEqual(oldProps.keys, newProps.keys)) return true
     if (!arraysEqual(oldProps.numbers, newProps.numbers)) return true
     if (!arraysEqual(oldProps.foldableFlags, newProps.foldableFlags)) return true