diff --git a/devtools/client/locales/en-US/webconsole.properties b/devtools/client/locales/en-US/webconsole.properties index e43bc36cdc4e..deb1a7a6ddda 100644 --- a/devtools/client/locales/en-US/webconsole.properties +++ b/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) diff --git a/devtools/client/webconsole/actions/ui.js b/devtools/client/webconsole/actions/ui.js index a04424128e83..c149d1541dde 100644 --- a/devtools/client/webconsole/actions/ui.js +++ b/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, }; diff --git a/devtools/client/webconsole/components/App.js b/devtools/client/webconsole/components/App.js index 2cc549550446..d11444aa128f 100644 --- a/devtools/client/webconsole/components/App.js +++ b/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 => ({ diff --git a/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js b/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js index aac861d74a87..3dc57f0fb596 100644 --- a/devtools/client/webconsole/components/FilterBar/ConsoleSettings.js +++ b/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( diff --git a/devtools/client/webconsole/components/FilterBar/FilterBar.js b/devtools/client/webconsole/components/FilterBar/FilterBar.js index 3db5dd4ad022..47de506ff69d 100644 --- a/devtools/client/webconsole/components/FilterBar/FilterBar.js +++ b/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, }; } diff --git a/devtools/client/webconsole/constants.js b/devtools/client/webconsole/constants.js index fe7c2bb95888..fae622c6a0df 100644 --- a/devtools/client/webconsole/constants.js +++ b/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", diff --git a/devtools/client/webconsole/reducers/prefs.js b/devtools/client/webconsole/reducers/prefs.js index b5572044282a..3e24ed36bf74 100644 --- a/devtools/client/webconsole/reducers/prefs.js +++ b/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) { diff --git a/devtools/client/webconsole/test/browser/_jsterm.ini b/devtools/client/webconsole/test/browser/_jsterm.ini index 7928dfe6bf74..eca858fb6326 100644 --- a/devtools/client/webconsole/test/browser/_jsterm.ini +++ b/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] diff --git a/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_toggle.js b/devtools/client/webconsole/test/browser/browser_jsterm_autocomplete_toggle.js new file mode 100644 index 000000000000..9239a19e64a5 --- /dev/null +++ b/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"); +}); diff --git a/devtools/client/webconsole/webconsole-wrapper.js b/devtools/client/webconsole/webconsole-wrapper.js index 1a39a23a2178..ce85681dda81 100644 --- a/devtools/client/webconsole/webconsole-wrapper.js +++ b/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: