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

@@ -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()

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