Popup positioning improvements (#2135)

* Rename elementRect to sourceRect

* Add getRects function to TextSourceElement and TextSourceRange

* Add jsdocs

* Remove unnecessary valid parameter

* Remove default parameter

* Make optionsContext optional

* Remove unnecessary checks

* Update sourceRect to use left/right rather than x/y

* Update the return type of Popup*.getFrameRect

* Rename some unrelated rect vars for disambiguation

* Disambiguate between Popup.Rect and Popup.ValidRect

* Move sourceRect destructuring

* Pass multiple source rects

* Simplify

* Change Rect to use right/bottom rather than width/height

* Update how popup offset is applied

* Simplify frame offset

* Remove _applyFrameOffset

* Use right/bottom rather than width/height

* Simplify some positioning settings

* Update parameter names for clarity

* Fix typos

* Refactor data type for _getPosition* functions

* Support using multiple source rects

* Combine _getPosition functions

* Refactor

* Expose after dataset value

* Consistently use this's property

* Add jsdoc

3 files changed, 16 insertions, 8 deletions

diff --git a/ext/js/dom/popup-menu.js b/ext/js/dom/popup-menu.js
index 66967002..7f5e3130 100644
--- a/ext/js/dom/popup-menu.js
+++ b/ext/js/dom/popup-menu.js
@@ -154,8 +154,8 @@ class PopupMenu extends EventDispatcher {
 
         // Position
         const menu = this._node;
-        const fullRect = this._containerNode.getBoundingClientRect();
-        const sourceRect = this._sourceElement.getBoundingClientRect();
+        const containerNodeRect = this._containerNode.getBoundingClientRect();
+        const sourceElementRect = this._sourceElement.getBoundingClientRect();
         const menuRect = menu.getBoundingClientRect();
         let top = menuRect.top;
         let bottom = menuRect.bottom;
@@ -166,19 +166,19 @@ class PopupMenu extends EventDispatcher {
         }
 
         let x = (
-            sourceRect.left +
-            sourceRect.width * ((-horizontal * horizontalCover + 1) * 0.5) +
+            sourceElementRect.left +
+            sourceElementRect.width * ((-horizontal * horizontalCover + 1) * 0.5) +
             menuRect.width * ((-horizontal + 1) * -0.5)
         );
         let y = (
-            sourceRect.top +
+            sourceElementRect.top +
             (menuRect.top - top) +
-            sourceRect.height * ((-vertical * verticalCover + 1) * 0.5) +
+            sourceElementRect.height * ((-vertical * verticalCover + 1) * 0.5) +
             (bottom - top) * ((-vertical + 1) * -0.5)
         );
 
-        x = Math.max(0.0, Math.min(fullRect.width - menuRect.width, x));
-        y = Math.max(0.0, Math.min(fullRect.height - menuRect.height, y));
+        x = Math.max(0.0, Math.min(containerNodeRect.width - menuRect.width, x));
+        y = Math.max(0.0, Math.min(containerNodeRect.height - menuRect.height, y));
 
         menu.style.left = `${x}px`;
         menu.style.top = `${y}px`;
diff --git a/ext/js/dom/text-source-element.js b/ext/js/dom/text-source-element.js
index 38b29a4c..1a842310 100644
--- a/ext/js/dom/text-source-element.js
+++ b/ext/js/dom/text-source-element.js
@@ -94,6 +94,10 @@ class TextSourceElement {
         return this._element.getBoundingClientRect();
     }
 
+    getRects() {
+        return this.getClientRects();
+    }
+
     getWritingMode() {
         return 'horizontal-tb';
     }
diff --git a/ext/js/dom/text-source-range.js b/ext/js/dom/text-source-range.js
index 6dfa2158..e0e2c5b0 100644
--- a/ext/js/dom/text-source-range.js
+++ b/ext/js/dom/text-source-range.js
@@ -94,6 +94,10 @@ class TextSourceRange {
         return this._range.getBoundingClientRect();
     }
 
+    getRects() {
+        return this._range.getClientRects();
+    }
+
     getWritingMode() {
         return TextSourceRange.getElementWritingMode(TextSourceRange.getParentElement(this._range.startContainer));
     }