WIP

3 files changed, 41 insertions, 34 deletions

diff --git a/ext/fg/js/client.js b/ext/fg/js/client.js
index abeea1cc..3df713a3 100644
--- a/ext/fg/js/client.js
+++ b/ext/fg/js/client.js
@@ -87,14 +87,13 @@ class Client {
             return;
         }
 
-        const text = range.text();
-        if (this.lastRange !== null && this.lastRange.text() == text) {
+        if (this.lastRange !== null && this.lastRange.equalTo(range)) {
             return;
         }
 
-        findTerm(popupQuery, ({results, length}) => {
+        findTerm(range.text(), ({results, length}) => {
             if (length === 0) {
-                this.popup.hide();
+                this.hidePopup();
             } else {
                 const params = {
                     defs: results,
@@ -104,13 +103,13 @@ class Client {
                 renderText(
                     params,
                     'term-list.html',
-                    (html) => this.showPopup(range, html, popupQuery, length)
+                    (content) => this.showPopup(range, length, content)
                 );
             }
         });
     }
 
-    showPopup(range, html, popupQuery, length) {
+    showPopup(range, length, content) {
         if (this.options.highlightText) {
             range.setEnd(range.endContainer, range.startOffset + length);
 
@@ -119,30 +118,17 @@ class Client {
             selection.addRange(range);
         }
 
-        const pos = getPopupPositionForRange(this.popup, range, this.popupOffset);
-
-        if (this.popup.getAttribute('srcdoc') !== html) {
-            this.popup.setAttribute('srcdoc', html);
-        }
-
-        this.popup.style.left       = pos.x + 'px';
-        this.popup.style.top        = pos.y + 'px';
-        this.popup.style.visibility = 'visible';
-        this.popupQuery             = popupQuery;
+        this.popup.showNextTo(range, content);
     }
 
     hidePopup() {
-        if (this.popup.style.visibility === 'hidden') {
-            return;
-        }
+        this.popup.hide();
 
-        if (this.options.highlightText) {
-            const selection = window.getSelection();
-            selection.removeAllRanges();
+        if (this.options.highlightText && this.lastRange !== null) {
+            this.lastRange.deselect();
         }
 
-        this.popup.style.visibility = 'hidden';
-        this.popupQuery             = '';
+        this.lastRange = null;
     }
 
     setEnabled(enabled) {
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index f03a0549..694aa6b7 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -33,7 +33,7 @@ class Popup {
         this.setContent(content);
     }
 
-    showBy(element, content) {
+    showNextTo(element, content) {
         this.inject();
 
         const elementRect = element.getBoundingClientRect();
diff --git a/ext/fg/js/range.js b/ext/fg/js/range.js
index 18c0d6bb..473cc449 100644
--- a/ext/fg/js/range.js
+++ b/ext/fg/js/range.js
@@ -45,17 +45,38 @@ class Range {
     }
 
     paddedRect() {
-        const node        = this.range.startContainer;
-        const startOffset = this.range.startOffset;
-        const endOffset   = this.range.endOffset;
+        const range       = this.range.cloneRange();
+        const startOffset = range.startOffset;
+        const endOffset   = range.endOffset;
+        const node        = range.startContainer;
 
-        this.range.setStart(node, Math.max(0, startOffset - 1));
-        this.range.setEnd(node, Math.min(node.length, endOffset + 1));
-        const rect = range.getBoundingClientRect();
-        this.range.setStart(node, startOffset);
-        this.range.setEnd(node, endOffset);
+        range.setStart(node, Math.max(0, startOffset - 1));
+        range.setEnd(node, Math.min(node.length, endOffset + 1));
+
+        return range.getBoundingClientRect();
+    }
+
+    select(length) {
+        const range = this.range.cloneRange();
+        range.setEnd(range.startContainer, range.startOffset + length);
+
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+
+    deselect() {
+        const selection = window.getSelection();
+        selection.removeRange(this.range);
+    }
+
+    equalTo(range) {
+        const equal =
+            range.compareBoundaryPoints(Range.END_TO_END, this.range) === 0 &&
+            range.compareBoundaryPoints(Range.START_TO_START, this.range) === 0;
+
+        return equal;
 
-        return rect;
     }
 
     static fromPos(point) {