Bug 1512400 - Make console autocomplete optional. r=nchevobbe.

Add a preference to make the console input autocomplete automatic.
If set to false, the autocomplete popup will only appear on Ctrl+Space.
A test is added to ensure this works as expected.

Differential Revision: https://phabricator.services.mozilla.com/D24705

--HG--
extra : moz-landing-system : lando

devtools/client/preferences/devtools-client.js

@@ -240,6 +240,9 @@ pref("devtools.webconsole.filter.css", false);
 pref("devtools.webconsole.filter.net", false);
 pref("devtools.webconsole.filter.netxhr", false);
 
+// Webconsole autocomplete preference
+pref("devtools.webconsole.input.autocomplete",true);
+
 // Browser console filters
 pref("devtools.browserconsole.filter.error", true);
 pref("devtools.browserconsole.filter.warn", true);

devtools/client/webconsole/components/App.js

@@ -47,6 +47,7 @@ class App extends Component {
       serviceContainer: PropTypes.object.isRequired,
       closeSplitConsole: PropTypes.func.isRequired,
       jstermCodeMirror: PropTypes.bool,
+      autocomplete: PropTypes.bool,
       currentReverseSearchEntry: PropTypes.string,
       reverseSearchInputVisible: PropTypes.bool,
       reverseSearchInitialValue: PropTypes.string,
@@ -200,6 +201,7 @@ class App extends Component {
       serviceContainer,
       closeSplitConsole,
       jstermCodeMirror,
+      autocomplete,
       reverseSearchInitialValue,
       editorMode,
     } = this.props;
@@ -248,6 +250,7 @@ class App extends Component {
             serviceContainer,
             onPaste: this.onPaste,
             codeMirrorEnabled: jstermCodeMirror,
+            autocomplete,
             editorMode,
           }),
           ReverseSearchInput({

devtools/client/webconsole/components/JSTerm.js

@@ -81,6 +81,7 @@ class JSTerm extends Component {
       autocompleteData: PropTypes.object.isRequired,
       // Is the input in editor mode.
       editorMode: PropTypes.bool,
+      autocomplete: PropTypes.bool,
     };
   }
 
@@ -804,7 +805,9 @@ class JSTerm extends Component {
     const value = this._getValue();
     if (this.lastInputValue !== value) {
       this.resizeInput();
-      this.props.autocompleteUpdate();
+      if (this.props.autocomplete) {
+        this.props.autocompleteUpdate();
+      }
       this.lastInputValue = value;
     }
   }

devtools/client/webconsole/constants.js

@@ -72,6 +72,7 @@ const prefs = {
       // We use the same pref to enable the sidebar on webconsole and browser console.
       SIDEBAR_TOGGLE: "devtools.webconsole.sidebarToggle",
       JSTERM_CODE_MIRROR: "devtools.webconsole.jsterm.codeMirror",
+      AUTOCOMPLETE: "devtools.webconsole.input.autocomplete",
     },
   },
 };

devtools/client/webconsole/store.js

@@ -49,6 +49,7 @@ function configureStore(webConsoleUI, options = {}) {
     || Math.max(getIntPref("devtools.hud.loglimit"), 1);
   const sidebarToggle = getBoolPref(PREFS.FEATURES.SIDEBAR_TOGGLE);
   const jstermCodeMirror = getBoolPref(PREFS.FEATURES.JSTERM_CODE_MIRROR);
+  const autocomplete = getBoolPref(PREFS.FEATURES.AUTOCOMPLETE);
   const historyCount = getIntPref(PREFS.UI.INPUT_HISTORY_COUNT);
 
   const initialState = {
@@ -56,6 +57,7 @@ function configureStore(webConsoleUI, options = {}) {
       logLimit,
       sidebarToggle,
       jstermCodeMirror,
+      autocomplete,
       historyCount,
     }),
     filters: FilterState({
@@ -137,4 +139,3 @@ function createRootReducer() {
 // Provide the store factory for test code so that each test is working with
 // its own instance.
 module.exports.configureStore = configureStore;
-

devtools/client/webconsole/test/mochitest/browser.ini

@@ -159,6 +159,7 @@ skip-if = verify
 [browser_jsterm_autocomplete_commands.js]
 [browser_jsterm_autocomplete_control_space.js]
 [browser_jsterm_autocomplete_crossdomain_iframe.js]
+[browser_jsterm_autocomplete_disabled.js]
 [browser_jsterm_autocomplete_escape_key.js]
 [browser_jsterm_autocomplete_extraneous_closing_brackets.js]
 [browser_jsterm_autocomplete_getters_cache.js]

devtools/client/webconsole/test/mochitest/browser_jsterm_autocomplete_disabled.js

@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that disabling autocomplete for console
+
+const TEST_URI = `data:text/html;charset=utf-8,Test command autocomplete`;
+
+add_task(async function() {
+  // Run with autocomplete preference as false
+  await pushPref("devtools.webconsole.input.autocomplete", false);
+  await performTests_false();
+});
+
+async function performTests_false() {
+  const hud = await openNewTabAndConsole(TEST_URI);
+  const { jsterm } = hud;
+  info("web console opened");
+
+  const { autocompletePopup: popup } = hud.jsterm;
+
+  info(`Enter ":"`);
+  jsterm.focus();
+  EventUtils.sendString(":");
+  // delay of 2 seconds.
+  await wait(2000);
+  ok(!popup.isOpen, "popup is not open");
+
+  let onPopUpOpen = popup.once("popup-opened");
+
+  info("Check that Ctrl+Space opens the popup when preference is false");
+  onPopUpOpen = popup.once("popup-opened");
+  EventUtils.synthesizeKey(" ", {ctrlKey: true});
+  await onPopUpOpen;
+
+  ok(popup.isOpen, "popup opens on Ctrl+Space");
+}

devtools/client/webconsole/webconsole-wrapper.js

@@ -344,6 +344,7 @@ class WebConsoleWrapper {
       const {prefs} = store.getState();
       const jstermCodeMirror = prefs.jstermCodeMirror
         && !Services.appinfo.accessibilityEnabled;
+      const autocomplete = prefs.autocomplete;
 
       const app = App({
         attachRefToWebConsoleUI,
@@ -352,6 +353,7 @@ class WebConsoleWrapper {
         onFirstMeaningfulPaint: resolve,
         closeSplitConsole: this.closeSplitConsole.bind(this),
         jstermCodeMirror,
+        autocomplete,
       });
 
       // Render the root Application component.