Bug 1593607 - added autocomplete item in the console settings menu. r=nchevobbe

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

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

devtools/client/locales/en-US/webconsole.properties

@@ -338,6 +338,12 @@ webconsole.console.settings.menu.item.warningGroups.label=Group Similar Messages
 # LOCALIZATION NOTE (webconsole.console.settings.menu.item.warningGroups.tooltip)
 webconsole.console.settings.menu.item.warningGroups.tooltip=When enabled, similar messages are placed into groups
 
+# LOCALIZATION NOTE (webconsole.console.settings.menu.item.autocomplete.label)
+# Label for enabling autocomplete for input in the Web Console
+webconsole.console.settings.menu.item.autocomplete.label=Enable autocomplete
+# LOCALIZATION NOTE (webconsole.console.settings.menu.item.autocomplete.tooltip)
+webconsole.console.settings.menu.item.autocomplete.tooltip=If you enable this option the input will display suggestions as you type in it
+
 # LOCALIZATION NOTE (webconsole.console.settings.menu.item.enablePersistentLogs.label)
 webconsole.console.settings.menu.item.enablePersistentLogs.label=Persist Logs
 # LOCALIZATION NOTE (webconsole.console.settings.menu.item.enablePersistentLogs.tooltip)

devtools/client/webconsole/actions/ui.js

@@ -25,6 +25,7 @@ const {
   EDITOR_SET_WIDTH,
   EDITOR_ONBOARDING_DISMISS,
   EAGER_EVALUATION_TOGGLE,
+  AUTOCOMPLETE_TOGGLE,
 } = require("devtools/client/webconsole/constants");
 
 function openLink(url, e) {
@@ -69,6 +70,19 @@ function timestampsToggle() {
   };
 }
 
+function autocompleteToggle() {
+  return ({ dispatch, getState, prefsService }) => {
+    dispatch({
+      type: AUTOCOMPLETE_TOGGLE,
+    });
+    const prefsState = getAllPrefs(getState());
+    prefsService.setBoolPref(
+      PREFS.FEATURES.AUTOCOMPLETE,
+      prefsState.autocomplete
+    );
+  };
+}
+
 function warningGroupsToggle() {
   return ({ dispatch, getState, prefsService }) => {
     dispatch({
@@ -224,4 +238,5 @@ module.exports = {
   openLink,
   openSidebar,
   timeWarp,
+  autocompleteToggle,
 };

devtools/client/webconsole/components/App.js

@@ -468,6 +468,7 @@ const mapStateToProps = state => ({
   sidebarVisible: state.ui.sidebarVisible,
   filterBarDisplayMode: state.ui.filterBarDisplayMode,
   eagerEvaluationEnabled: state.prefs.eagerEvaluation,
+  autocomplete: state.prefs.autocomplete,
 });
 
 const mapDispatchToProps = dispatch => ({

devtools/client/webconsole/components/FilterBar/ConsoleSettings.js

@@ -48,6 +48,7 @@ class ConsoleSettings extends Component {
       showContentMessages: PropTypes.bool.isRequired,
       timestampsVisible: PropTypes.bool.isRequired,
       webConsoleUI: PropTypes.object.isRequired,
+      autocomplete: PropTypes.bool.isRequired,
     };
   }
 
@@ -61,6 +62,7 @@ class ConsoleSettings extends Component {
       persistLogs,
       showContentMessages,
       timestampsVisible,
+      autocomplete,
     } = this.props;
 
     const items = [];
@@ -134,6 +136,23 @@ class ConsoleSettings extends Component {
       })
     );
 
+    // autocomplete
+    items.push(
+      MenuItem({
+        key: "webconsole-console-settings-menu-item-autocomplete",
+        checked: autocomplete,
+        className:
+          "menu-item webconsole-console-settings-menu-item-autocomplete",
+        label: l10n.getStr(
+          "webconsole.console.settings.menu.item.autocomplete.label"
+        ),
+        tooltip: l10n.getStr(
+          "webconsole.console.settings.menu.item.autocomplete.tooltip"
+        ),
+        onClick: () => dispatch(actions.autocompleteToggle()),
+      })
+    );
+
     // Eager Evaluation
     if (AppConstants.NIGHTLY_BUILD) {
       items.push(

devtools/client/webconsole/components/FilterBar/FilterBar.js

@@ -71,6 +71,7 @@ class FilterBar extends Component {
       showContentMessages: PropTypes.bool.isRequired,
       timestampsVisible: PropTypes.bool.isRequired,
       webConsoleUI: PropTypes.object.isRequired,
+      autocomplete: PropTypes.bool.isRequired,
     };
   }
 
@@ -116,6 +117,7 @@ class FilterBar extends Component {
       showContentMessages,
       timestampsVisible,
       eagerEvaluation,
+      autocomplete,
     } = this.props;
 
     if (
@@ -126,7 +128,8 @@ class FilterBar extends Component {
       nextProps.persistLogs !== persistLogs ||
       nextProps.showContentMessages !== showContentMessages ||
       nextProps.timestampsVisible !== timestampsVisible ||
-      nextProps.eagerEvaluation !== eagerEvaluation
+      nextProps.eagerEvaluation !== eagerEvaluation ||
+      nextProps.autocomplete !== autocomplete
     ) {
       return true;
     }
@@ -337,6 +340,7 @@ class FilterBar extends Component {
       showContentMessages,
       timestampsVisible,
       webConsoleUI,
+      autocomplete,
     } = this.props;
 
     return ConsoleSettings({
@@ -349,6 +353,7 @@ class FilterBar extends Component {
       showContentMessages,
       timestampsVisible,
       webConsoleUI,
+      autocomplete,
     });
   }
 
@@ -434,6 +439,7 @@ function mapStateToProps(state) {
     eagerEvaluation: prefsState.eagerEvaluation,
     showContentMessages: uiState.showContentMessages,
     timestampsVisible: uiState.timestampsVisible,
+    autocomplete: prefsState.autocomplete,
   };
 }
 

devtools/client/webconsole/constants.js

@@ -10,6 +10,7 @@ const actionTypes = {
   AUTOCOMPLETE_DATA_RECEIVE: "AUTOCOMPLETE_DATA_RECEIVE",
   AUTOCOMPLETE_PENDING_REQUEST: "AUTOCOMPLETE_PENDING_REQUEST",
   AUTOCOMPLETE_RETRIEVE_FROM_CACHE: "AUTOCOMPLETE_RETRIEVE_FROM_CACHE",
+  AUTOCOMPLETE_TOGGLE: "AUTOCOMPLETE_TOGGLE",
   BATCH_ACTIONS: "BATCH_ACTIONS",
   CLEAR_HISTORY: "CLEAR_HISTORY",
   EDITOR_TOGGLE: "EDITOR_TOGGLE",

devtools/client/webconsole/reducers/prefs.js

@@ -6,6 +6,7 @@
 const {
   EAGER_EVALUATION_TOGGLE,
   WARNING_GROUPS_TOGGLE,
+  AUTOCOMPLETE_TOGGLE,
 } = require("devtools/client/webconsole/constants");
 
 const PrefState = overrides =>
@@ -15,6 +16,7 @@ const PrefState = overrides =>
         logLimit: 1000,
         sidebarToggle: false,
         groupWarnings: false,
+        autocomplete: false,
         eagerEvaluation: false,
         historyCount: 50,
       },
@@ -25,6 +27,7 @@ const PrefState = overrides =>
 const dict = {
   [EAGER_EVALUATION_TOGGLE]: "eagerEvaluation",
   [WARNING_GROUPS_TOGGLE]: "groupWarnings",
+  [AUTOCOMPLETE_TOGGLE]: "autocomplete",
 };
 
 function prefs(state = PrefState(), action) {

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

@@ -28,6 +28,7 @@ support-files =
 [browser_jsterm_autocomplete_array_no_index.js]
 [browser_jsterm_autocomplete_arrow_keys.js]
 [browser_jsterm_autocomplete_await.js]
+[browser_jsterm_autocomplete_toggle.js]
 [browser_jsterm_autocomplete_cached_results.js]
 [browser_jsterm_autocomplete_commands.js]
 [browser_jsterm_autocomplete_control_space.js]

devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_toggle.js

@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test for the input autocomplete option: check if the preference toggles the
+// autocomplete feature in the console output. See bug 1593607.
+
+"use strict";
+
+const TEST_URI = `data:text/html;charset=utf-8,`;
+const PREF_INPUT_AUTOCOMPLETE = "devtools.webconsole.input.autocomplete";
+
+add_task(async function() {
+  // making sure that input autocomplete is true at the start of test
+  await pushPref(PREF_INPUT_AUTOCOMPLETE, true);
+  const hud = await openNewTabAndConsole(TEST_URI);
+
+  info(
+    "Check that console settings contain autocomplete input and its checked"
+  );
+  await checkConsoleSettingState(
+    hud,
+    ".webconsole-console-settings-menu-item-autocomplete",
+    true
+  );
+
+  info("Check that popup opens");
+  const { jsterm } = hud;
+
+  const { autocompletePopup: popup } = jsterm;
+
+  info(`Enter "w"`);
+  await setInputValueForAutocompletion(hud, "w");
+
+  ok(popup.isOpen, "autocomplete popup opens up");
+
+  info("Clear input value");
+  let onPopupClosed = popup.once("popup-closed");
+  setInputValue(hud, "");
+  await onPopupClosed;
+  ok(!popup.open, "autocomplete popup closed");
+
+  info("toggle autocomplete preference");
+
+  await toggleConsoleSetting(
+    hud,
+    ".webconsole-console-settings-menu-item-autocomplete"
+  );
+
+  info("Checking that popup do not show");
+  info(`Enter "w"`);
+  setInputValue(hud, "w");
+  // delay of 2 seconds.
+  await wait(2000);
+  ok(!popup.isOpen, "popup is not open");
+
+  info("toggling autocomplete pref back to true");
+  await toggleConsoleSetting(
+    hud,
+    ".webconsole-console-settings-menu-item-autocomplete"
+  );
+
+  const prefValue = Services.prefs.getBoolPref(PREF_INPUT_AUTOCOMPLETE);
+  ok(prefValue, "autocomplete pref value set to true");
+
+  info("Check that popup opens");
+
+  info(`Enter "w"`);
+  await setInputValueForAutocompletion(hud, "w");
+
+  ok(popup.isOpen, "autocomplete popup opens up");
+
+  info("Clear input value");
+  onPopupClosed = popup.once("popup-closed");
+  setInputValue(hud, "");
+  await onPopupClosed;
+  ok(!popup.open, "autocomplete popup closed");
+});

devtools/client/webconsole/webconsole-wrapper.js

@@ -102,15 +102,11 @@ class WebConsoleWrapper {
         this.toolbox.threadFront.on("progress", this.dispatchProgress);
       }
 
-      const { prefs } = store.getState();
-      const autocomplete = prefs.autocomplete;
-
       const app = App({
         serviceContainer,
         webConsoleUI,
         onFirstMeaningfulPaint: resolve,
         closeSplitConsole: this.closeSplitConsole.bind(this),
-        autocomplete,
         hidePersistLogsCheckbox:
           webConsoleUI.isBrowserConsole || webConsoleUI.isBrowserToolboxConsole,
         hideShowContentMessagesCheckbox: