Hide popup on cursor exit (#2109)

* Update phrasing

* Add new options

* Add settings

* Implement

5 files changed, 51 insertions, 5 deletions

diff --git a/ext/data/schemas/options-schema.json b/ext/data/schemas/options-schema.json
index 74ae3300..ef86f8c3 100644
--- a/ext/data/schemas/options-schema.json
+++ b/ext/data/schemas/options-schema.json
@@ -436,7 +436,9 @@
                                     "enableOnSearchPage",
                                     "enableSearchTags",
                                     "layoutAwareScan",
-                                    "matchTypePrefix"
+                                    "matchTypePrefix",
+                                    "hidePopupOnCursorExit",
+                                    "hidePopupOnCursorExitDelay"
                                 ],
                                 "properties": {
                                     "inputs": {
@@ -663,6 +665,15 @@
                                     "matchTypePrefix": {
                                         "type": "boolean",
                                         "default": false
+                                    },
+                                    "hidePopupOnCursorExit": {
+                                        "type": "boolean",
+                                        "default": false
+                                    },
+                                    "hidePopupOnCursorExitDelay": {
+                                        "type": "number",
+                                        "minimum": 0,
+                                        "default": 0
                                     }
                                 }
                             },
diff --git a/ext/js/app/frontend.js b/ext/js/app/frontend.js
index 0dd58735..102cd299 100644
--- a/ext/js/app/frontend.js
+++ b/ext/js/app/frontend.js
@@ -343,6 +343,10 @@ class Frontend {
 
     _onPopupFramePointerOut() {
         this._isPointerOverPopup = false;
+        const scanningOptions = this._options.scanning;
+        if (scanningOptions.hidePopupOnCursorExit) {
+            this._clearSelectionDelayed(scanningOptions.hidePopupOnCursorExitDelay, false);
+        }
     }
 
     _clearSelection(passive) {
diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js
index 3422b773..593fed29 100644
--- a/ext/js/data/options-util.js
+++ b/ext/js/data/options-util.js
@@ -931,6 +931,8 @@ class OptionsUtil {
         //  general.popupTheme's 'default' value changed to 'light'
         //  general.popupOuterTheme's 'default' value changed to 'light'
         //  general.popupOuterTheme's 'auto' value changed to 'site'
+        //  Added scanning.hidePopupOnCursorExit.
+        //  Added scanning.hidePopupOnCursorExitDelay.
         for (const profile of options.profiles) {
             const {general} = profile.options;
             if (general.popupTheme === 'default') {
@@ -940,6 +942,8 @@ class OptionsUtil {
                 case 'default': general.popupOuterTheme = 'light'; break;
                 case 'auto': general.popupOuterTheme = 'site'; break;
             }
+            profile.options.scanning.hidePopupOnCursorExit = false;
+            profile.options.scanning.hidePopupOnCursorExitDelay = profile.options.scanning.hideDelay;
         }
         return options;
     }
diff --git a/ext/settings.html b/ext/settings.html
index fcd73f4d..6d91695d 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -418,7 +418,7 @@
             <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">Auto-hide search popup</div>
-                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will automatically hide.</div>
+                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will be hidden.</div>
                 </div>
                 <div class="settings-item-right">
                     <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
@@ -433,7 +433,7 @@
             <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
                 <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
                     <div class="settings-item-left">
-                        <div class="settings-item-label">Auto-hide delay <span class="light">(in milliseconds)</span></div>
+                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
                     </div>
                     <div class="settings-item-right">
                         <input type="number" data-setting="scanning.hideDelay" min="0">
@@ -441,6 +441,33 @@
                 </div></div>
             </div>
         </div>
+        <div class="settings-item">
+            <div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Hide popup on cursor exit</div>
+                    <div class="settings-item-description">When the cursor exits the popup, the popup will be hidden.</div>
+                </div>
+                <div class="settings-item-right">
+                    <label class="toggle"><input type="checkbox" data-setting="scanning.hidePopupOnCursorExit"
+                        data-transform='{
+                            "type": "setVisibility",
+                            "selector": "#hide-popup-on-cursor-exit-options",
+                            "condition": {"op": "===", "value": true}
+                        }'
+                    ><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                </div>
+            </div>
+            <div class="settings-item-children settings-item-children-group" id="hide-popup-on-cursor-exit-options" hidden>
+                <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+                    <div class="settings-item-left">
+                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
+                    </div>
+                    <div class="settings-item-right">
+                        <input type="number" data-setting="scanning.hidePopupOnCursorExitDelay" min="0">
+                    </div>
+                </div></div>
+            </div>
+        </div>
         <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
             <div class="settings-item-left">
                 <div class="settings-item-label">Scan delay <span class="light">(in milliseconds)</span></div>
diff --git a/ext/welcome.html b/ext/welcome.html
index 6fda4d44..f67e186c 100644
--- a/ext/welcome.html
+++ b/ext/welcome.html
@@ -122,7 +122,7 @@
             <div class="settings-item-inner">
                 <div class="settings-item-left">
                     <div class="settings-item-label">Auto-hide search popup</div>
-                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will automatically hide.</div>
+                    <div class="settings-item-description">When no definitions are found after scanning text, the popup will be hidden.</div>
                 </div>
                 <div class="settings-item-right">
                     <label class="toggle"><input type="checkbox" data-setting="scanning.autoHideResults"
@@ -137,7 +137,7 @@
             <div class="settings-item-children settings-item-children-group" id="auto-hide-search-popup-options" hidden>
                 <div class="settings-item"><div class="settings-item-inner">
                     <div class="settings-item-left">
-                        <div class="settings-item-label">Popup auto-hide delay <span class="light">(in milliseconds)</span></div>
+                        <div class="settings-item-label">Delay <span class="light">(in milliseconds)</span></div>
                     </div>
                     <div class="settings-item-right">
                         <input type="number" data-setting="scanning.hideDelay" min="0">