Merge pull request #16083 from atom/resize-overlay-bug

Judge resize of overlay by contentRect changing

src/text-editor-component.js

@@ -126,7 +126,6 @@ class TextEditorComponent {
     this.blockDecorationResizeObserver = new ResizeObserver(this.didResizeBlockDecorations.bind(this))
     this.lineComponentsByScreenLineId = new Map()
     this.overlayComponents = new Set()
-    this.overlayDimensionsByElement = new WeakMap()
     this.shouldRenderDummyScrollbars = true
     this.remeasureScrollbars = false
     this.pendingAutoscroll = null
@@ -803,15 +802,9 @@ class TextEditorComponent {
         {
           key: overlayProps.element,
           overlayComponents: this.overlayComponents,
-          measuredDimensions: this.overlayDimensionsByElement.get(overlayProps.element),
           didResize: (overlayComponent) => {
             this.updateOverlayToRender(overlayProps)
-            overlayComponent.update(Object.assign(
-              {
-                measuredDimensions: this.overlayDimensionsByElement.get(overlayProps.element)
-              },
-              overlayProps
-            ))
+            overlayComponent.update(overlayProps)
           }
         },
         overlayProps
@@ -1357,7 +1350,6 @@ class TextEditorComponent {
     let wrapperTop = contentClientRect.top + this.pixelPositionAfterBlocksForRow(row) + this.getLineHeight()
     let wrapperLeft = contentClientRect.left + this.pixelLeftForRowAndColumn(row, column)
     const clientRect = element.getBoundingClientRect()
-    this.overlayDimensionsByElement.set(element, clientRect)
 
     if (avoidOverflow !== false) {
       const computedStyle = window.getComputedStyle(element)
@@ -4226,17 +4218,26 @@ class OverlayComponent {
     this.element.style.zIndex = 4
     this.element.style.top = (this.props.pixelTop || 0) + 'px'
     this.element.style.left = (this.props.pixelLeft || 0) + 'px'
+    this.currentContentRect = null
 
     // Synchronous DOM updates in response to resize events might trigger a
     // "loop limit exceeded" error. We disconnect the observer before
     // potentially mutating the DOM, and then reconnect it on the next tick.
+    // Note: ResizeObserver calls its callback when .observe is called
     this.resizeObserver = new ResizeObserver((entries) => {
       const {contentRect} = entries[0]
-      if (contentRect.width !== this.props.measuredDimensions.width || contentRect.height !== this.props.measuredDimensions.height) {
+
+      if (
+        this.currentContentRect &&
+        (this.currentContentRect.width !== contentRect.width ||
+          this.currentContentRect.height !== contentRect.height)
+      ) {
         this.resizeObserver.disconnect()
         this.props.didResize(this)
         process.nextTick(() => { this.resizeObserver.observe(this.props.element) })
       }
+
+      this.currentContentRect = contentRect
     })
     this.didAttach()
     this.props.overlayComponents.add(this)