Improvements

ext/fg/js/client.js

@@ -87,16 +87,17 @@ class Client {
             return;
         }
 
-        range.setLength(this.options.scanLength);
-
-        if (this.lastRange !== null && this.lastRange.equals(range)) {
+        if (this.lastRange !== null && this.lastRange.compareOrigin(range) === 0) {
             return;
         }
 
+        range.setLength(this.options.scanLength);
         findTerm(range.text(), ({results, length}) => {
             if (length === 0) {
                 this.hidePopup();
             } else {
+                range.setLength(length);
+
                 const params = {
                     defs: results,
                     root: chrome.extension.getURL('fg')
@@ -105,17 +106,21 @@ class Client {
                 renderText(
                     params,
                     'term-list.html',
-                    (content) => this.showPopup(range, length, content)
+                    (content) => this.showPopup(range, content)
                 );
             }
         });
     }
 
-    showPopup(range, length, content) {
-        this.popup.showNextTo(range, content);
+    showPopup(range, content) {
+        this.popup.showNextTo(range.getRect(), content);
 
         if (this.options.highlightText) {
-            range.select(length);
+            if (this.lastRange !== null) {
+                this.lastRange.deselect();
+            }
+
+            range.select();
         }
 
         this.lastRange = range;

ext/fg/js/popup.js

@@ -33,11 +33,10 @@ class Popup {
         this.setContent(content);
     }
 
-    showNextTo(element, content) {
+    showNextTo(elementRect, content) {
         this.inject();
 
-        const elementRect = element.getBoundingClientRect();
-        const popupRect   = this.popup.getBoundingClientRect();
+        const popupRect = this.popup.getBoundingClientRect();
 
         let posX = elementRect.left;
         if (posX + popupRect.width >= window.innerWidth) {
@@ -49,11 +48,7 @@ class Popup {
             posY = elementRect.top - popupRect.height - this.offset;
         }
 
-        this.popup.style.left       = posX + 'px';
-        this.popup.style.top        = posY + 'px';
-        this.popup.style.visibility = 'visible';
-
-        this.setContent(content);
+        this.showAt({x: posX, y: posY}, content);
     }
 
     hide() {

ext/fg/js/range.js

@@ -40,11 +40,15 @@ class Range {
     }
 
     containsPoint(point) {
-        const rect = this.getBoundingClientRect();
+        const rect = this.getPaddedRect();
         return point.x >= rect.left && point.x <= rect.right;
     }
 
-    getBoundingClientRect() {
+    getRect() {
+        return this.rng.getBoundingClientRect();
+    }
+
+    getPaddedRect() {
         const range       = this.rng.cloneRange();
         const startOffset = range.startOffset;
         const endOffset   = range.endOffset;
@@ -56,13 +60,9 @@ class Range {
         return range.getBoundingClientRect();
     }
 
-    select(length) {
-        const range = this.rng.cloneRange();
-        range.setEnd(range.startContainer, range.startOffset + length);
-
+    select() {
         const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
+        selection.addRange(this.rng);
     }
 
     deselect() {
@@ -70,12 +70,8 @@ class Range {
         selection.removeAllRanges();
     }
 
-    equals(range) {
-        const equal =
-            range.rng.compareBoundaryPoints(Range.END_TO_END, this.rng) === 0 &&
-            range.rng.compareBoundaryPoints(Range.START_TO_START, this.rng) === 0;
-
-        return equal;
+    compareOrigin(range) {
+        return range.rng.compareBoundaryPoints(Range.END_TO_END, this.rng);
 
     }