Option to configure autocomplete popup delay (#1323)

- Fixes #1032
Kong · Jan 9, 2019 · 921a5d2 · 921a5d2
1 parent 6d9a9e0
commit 921a5d2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 21 deletions.
diff --git a/packages/insomnia-app/app/models/settings.js b/packages/insomnia-app/app/models/settings.js
@@ -29,6 +29,7 @@ type BaseSettings = {
   updateAutomatically: boolean,
   disableUpdateNotification: boolean,
   environmentHighlightColorStyle: string,
+  autocompleteDelay: number,
   fontMonospace: string | null,
   fontInterface: string | null,
   fontSize: number,
@@ -69,6 +70,7 @@ export function init(): BaseSettings {
     updateAutomatically: true,
     disableUpdateNotification: false,
     environmentHighlightColorStyle: 'sidebar-indicator',
+    autocompleteDelay: 700,
     fontMonospace: null,
     fontInterface: null,
     fontSize: 13,

diff --git a/packages/insomnia-app/app/ui/components/codemirror/extensions/autocomplete.js b/packages/insomnia-app/app/ui/components/codemirror/extensions/autocomplete.js
@@ -1,5 +1,6 @@
 import CodeMirror from 'codemirror';
 import 'codemirror/addon/mode/overlay';
+import * as models from '../../../../models';
 import { getDefaultFill } from '../../../../templating/utils';
 import { escapeHTML, escapeRegex } from '../../../../common/misc';
 
@@ -11,7 +12,6 @@ const COMPLETE_AFTER_WORD = /[\w.\][-]+/;
 const COMPLETE_AFTER_CURLIES = /[^{]*{[{%]\s*/;
 const COMPLETION_CLOSE_KEYS = /[}|-]/;
 const MAX_HINT_LOOK_BACK = 100;
-const HINT_DELAY_MILLIS = 700;
 const TYPE_VARIABLE = 'variable';
 const TYPE_TAG = 'tag';
 const TYPE_CONSTANT = 'constant';
@@ -126,7 +126,7 @@ CodeMirror.defineOption('environmentAutocomplete', null, (cm, options) => {
 
   let keydownDebounce = null;
 
-  cm.on('keydown', (cm, e) => {
+  cm.on('keydown', async (cm, e) => {
     // Close autocomplete on Escape if it's open
     if (cm.isHintDropdownActive() && e.key === 'Escape') {
       if (!cm.state.completionActive) {
@@ -146,9 +146,14 @@ CodeMirror.defineOption('environmentAutocomplete', null, (cm, options) => {
     }
 
     clearTimeout(keydownDebounce);
-    keydownDebounce = setTimeout(() => {
-      completeIfInVariableName(cm);
-    }, HINT_DELAY_MILLIS);
+
+    const { autocompleteDelay } = await models.settings.getOrCreate();
+
+    if (autocompleteDelay > 0) {
+      keydownDebounce = setTimeout(() => {
+        completeIfInVariableName(cm);
+      }, autocompleteDelay);
+    }
   });
 
   // Clear timeout if we already closed the completion

diff --git a/packages/insomnia-app/app/ui/components/settings/general.js b/packages/insomnia-app/app/ui/components/settings/general.js
@@ -209,22 +209,40 @@ class General extends React.PureComponent<Props, State> {
           </label>
         </div>
 
-        <div className="form-control form-control--outlined pad-top-sm">
-          <label>
-            Environment Highlight Color Style{' '}
-            <HelpTooltip>Configures the appearance of environment's color indicator</HelpTooltip>
-            <select
-              defaultValue={settings.environmentHighlightColorStyle}
-              name="environmentHighlightColorStyle"
-              onChange={this._handleUpdateSetting}>
-              <option value="sidebar-indicator">Sidebar indicator</option>
-              <option value="sidebar-edge">Sidebar edge</option>
-              <option value="window-top">Window top</option>
-              <option value="window-bottom">Window bottom</option>
-              <option value="window-left">Window left</option>
-              <option value="window-right">Window right</option>
-            </select>
-          </label>
+        <div className="form-row">
+          <div className="form-control form-control--outlined pad-top-sm">
+            <label>
+              Environment Highlight Color Style{' '}
+              <HelpTooltip>Configures the appearance of environment's color indicator</HelpTooltip>
+              <select
+                defaultValue={settings.environmentHighlightColorStyle}
+                name="environmentHighlightColorStyle"
+                onChange={this._handleUpdateSetting}>
+                <option value="sidebar-indicator">Sidebar indicator</option>
+                <option value="sidebar-edge">Sidebar edge</option>
+                <option value="window-top">Window top</option>
+                <option value="window-bottom">Window bottom</option>
+                <option value="window-left">Window left</option>
+                <option value="window-right">Window right</option>
+              </select>
+            </label>
+          </div>
+          <div className="form-control form-control--outlined pad-top-sm">
+            <label>
+              Autocomplete popup delay
+              <HelpTooltip className="space-left">
+                Configure the autocomplete popup delay in milliseconds (0 to disable)
+              </HelpTooltip>
+              <input
+                type="number"
+                name="autocompleteDelay"
+                min={0}
+                max={3000}
+                defaultValue={settings.autocompleteDelay}
+                onChange={this._handleUpdateSetting}
+              />
+            </label>
+          </div>
         </div>
 
         <div className="form-row">