Optimize scroll event handling by limiting updates to rect positions only

service2.js

@@ -151,14 +151,15 @@ class BesService {
   onScroll() {
     // Scroll panel is "position: absolute", we need to keep it aligned with the host element.
     this.scrollPanel.style.top = `${-this.hostElement.scrollTop}px`
-    this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
+
+    // Why do we need to set left to -scrollLeft? It destroys the position of highlights
+    // this.scrollPanel.style.left = `${-this.hostElement.scrollLeft}px`
 
     // Markup is in a "position:absolute" <div> element requiring repositioning when scrolling host element or window.
     // It is defered to reduce stress in a flood of scroll events.
-    // TODO: We could technically just update scrollTop and scrollLeft of all markup rects for even better performance?
     if (this.scrollTimeout) clearTimeout(this.scrollTimeout)
     this.scrollTimeout = setTimeout(() => {
-      this.repositionAllMarkup()
+      this.updateRects()
       delete this.scrollTimeout
     }, 500)
   }
@@ -206,6 +207,15 @@ class BesService {
     return { clientRects, highlights }
   }
 
+  updateRects() {
+    this.results.forEach(result => {
+      result.matches.forEach(match => {
+        const clientRects = match.range.getClientRects()
+        match.rects = clientRects
+      })
+    })
+  }
+
   /**
    * Tests if given coordinate is inside of a rectangle.
    *