Rotate panel names

The new name reflects the purpose of the panel better:

- panelParent → correctionPanel: This is our (0, 0) positioned <div>
  inside which most of the magic happens. We do need it to be able to
  position it's child properly.

- correctionPanel → scrollPanel: This is a <div> which size and
  placement should exactly match the hostElement. We need it to provide
  a scrollable (hence the name) viewport for our canvas.

service.js

@@ -840,21 +840,21 @@ class BesService {
    * Creates auxiliary DOM elements for text adornments.
    */
   createCorrectionPanel() {
-    this.panelParent = document.createElement('div')
-    this.panelParent.classList.add('bes-correction-panel-parent')
-
     this.correctionPanel = document.createElement('div')
     this.correctionPanel.classList.add('bes-correction-panel')
 
+    this.scrollPanel = document.createElement('div')
+    this.scrollPanel.classList.add('bes-scroll-panel')
+
     this.canvasPanel = document.createElement('canvas')
     this.canvasPanel.classList.add('bes-canvas')
     this.ctx = this.canvasPanel.getContext('2d')
     this.ctx.scale(1, 1)
 
-    this.panelParent.appendChild(this.correctionPanel)
+    this.correctionPanel.appendChild(this.scrollPanel)
-    this.correctionPanel.appendChild(this.canvasPanel)
+    this.scrollPanel.appendChild(this.canvasPanel)
     this.textElement.parentElement.insertBefore(
-      this.panelParent,
+      this.correctionPanel,
       this.textElement
     )
     this.setCorrectionPanelSize()
@@ -864,7 +864,7 @@ class BesService {
    * Clears auxiliary DOM elements for text adornments.
    */
   clearCorrectionPanel() {
-    this.panelParent.remove()
+    this.correctionPanel.remove()
   }
 
   /**
@@ -875,12 +875,12 @@ class BesService {
     const styles = window.getComputedStyle(this.hostElement)
     const hostRect = this.hostElement.getBoundingClientRect()
     // Sync margins one by one. Firefox is not happy when syncing all at once.
-    this.correctionPanel.style.marginLeft = styles.marginLeft
+    this.scrollPanel.style.marginLeft = styles.marginLeft
-    this.correctionPanel.style.marginTop = styles.marginTop
+    this.scrollPanel.style.marginTop = styles.marginTop
-    this.correctionPanel.style.marginRight = styles.marginRight
+    this.scrollPanel.style.marginRight = styles.marginRight
-    this.correctionPanel.style.marginBottom = styles.marginBottom
+    this.scrollPanel.style.marginBottom = styles.marginBottom
-    this.correctionPanel.style.boxSizing = styles.boxSizing
+    this.scrollPanel.style.boxSizing = styles.boxSizing
-    this.correctionPanel.style.scrollBehavior = styles.scrollBehavior
+    this.scrollPanel.style.scrollBehavior = styles.scrollBehavior
     this.canvasPanel.style.width = `${this.hostElement.scrollWidth}px`
     this.canvasPanel.style.height = `${this.hostElement.scrollHeight}px`
     const dpr = window.devicePixelRatio
@@ -902,11 +902,11 @@ class BesService {
         parseFloat(styles.width) +
         parseFloat(styles.marginRight) +
         parseFloat(styles.paddingRight)
-      this.correctionPanel.style.width = `${totalWidth}px`
+      this.scrollPanel.style.width = `${totalWidth}px`
-      this.correctionPanel.style.height = styles.height
+      this.scrollPanel.style.height = styles.height
     } else {
-      this.correctionPanel.style.width = `${hostRect.width}px`
+      this.scrollPanel.style.width = `${hostRect.width}px`
-      this.correctionPanel.style.height = `${hostRect.height}px`
+      this.scrollPanel.style.height = `${hostRect.height}px`
     }
     this.enableMutationObserver()
   }
@@ -1357,6 +1357,7 @@ class BesTreeService extends BesService {
     const source = event?.detail !== 1 ? event?.detail : event
     const el = this.getBlockParent(source.targetElement || source.target)
     if (!el) return
+    // TODO: Adjust source.clientX and source.clientY for scrolling offset.
     const pointsInRect = []
     for (let result of this.results) {
       for (let m of result.matches) {
@@ -2021,6 +2022,7 @@ class BesPlainTextService extends BesService {
     const source = event?.detail !== 1 ? event?.detail : event
     const el = source.targetElement || source.target || this.hostElement
     if (!el) return
+    // TODO: Adjust source.clientX and source.clientY for scrolling offset.
     const pointsInRect = []
     for (let result of this.results) {
       for (let m of result.matches) {

styles.css

@@ -23,7 +23,7 @@
 }
 
 /* Styles required to ensure full functionality and optimal user experience. */
-.bes-correction-panel-parent {
+.bes-correction-panel {
   position: relative;
   overflow: visible;
   float: left;
@@ -34,7 +34,7 @@
   z-index: 1;
 }
 
-.bes-correction-panel {
+.bes-scroll-panel {
   position: relative;
   overflow: hidden;
   border-color: transparent;