1593607 - Add an "autocomplete" item in the console settings menu

Status: RESOLVED FIXED

(DevTools :: Console, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

The item would control the value of the devtools.webconsole.input.autocomplete pref.

Comment 1

[Ricards Veveris]

Hello, I would like to work on this bug. Could you give me some pointers on how to make items for settings or where to find the code for the functionality of ones already working? And also, under which category should the item be added?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Hello Ricards, thanks for offering help!

if this is the first bug you're working on, you need to setup the work environment. https://docs.firefox-dev.tools/getting-started/ should explain everything you need to do.

---

For this bug, we want to add a new item in the existing settings menu of the console.
The items are defined in devtools/client/webconsole/components/FilterBar/ConsoleSettings.js#59-126 .

You can see how an item is defined:

      MenuItem({
        key: "webconsole-console-settings-menu-item-timestamps",
        checked: timestampsVisible,
        className: "menu-item webconsole-console-settings-menu-item-timestamps",
        label: l10n.getStr(
          "webconsole.console.settings.menu.item.timestamps.label"
        ),
        tooltip: l10n.getStr(
          "webconsole.console.settings.menu.item.timestamps.tooltip"
        ),
        onClick: () => dispatch(actions.timestampsToggle()),
      })

There are a few things a MenuItem component expect:

• a unique key
• a label. You can see here that we are using l10n.getStr, that's because the UI is localized. So you should add a localized string for this item. Those strings are declared in devtools/client/locales/en-US/webconsole.properties#321-325
• a tooltip, which is also localized
• a className, that you can copy and adapt from the other items
• an onClick handler. That's the meat of the bug. Here we need to indicate what we will do when the item is clicked. The console is using React and Redux, and you can see that in other items we dispatch a given type of action (for example devtools/client/webconsole/actions/ui.js#58-69). So you'll need to add an action, and set the preference from there, like we do in the other actions.
• a checked boolean. This will indicate to the user if the pref is on or off. For the other items, you can see that we got those checked from the props (ConsoleSettings.js#41). Those props are passed from the parent component, the FilterBar (FilterBar.js#338-347 ), which gets them from its mapStateToProps function (devtools/client/webconsole/components/FilterBar/FilterBar.js#420-432). You can see that we get those from the uiState, which is handled in devtools/client/webconsole/reducers/ui.js#26-47. So in the reducer, we'll need to have an item that react to the new action we will create, to change a boolean value in the state. And finally, when we start the application, we need to retrieve the preference value, so we can display the check. This is done in devtools/client/webconsole/store.js#72-82, so we will need to add an item here.

I hope this is clear enough, let me know if you have any issue while setting up the work environment or working on the issue.
You can join our Slack if you want to chat :)

Comment 3

[Pranav pandey]

hi 👋
I want to work on this can you assign it to me if it's still open

thanx
pranav

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Hello Pranav, thanks for offering help!
The bug is now assigned to you.

If it's your first bug, you might want to read this https://docs.firefox-dev.tools/getting-started/ to setup the work environment.
Make sure to select "Artifact builds" when asked as it speeds up the workflow quite a bit :)
Also, you can come and chat on our Slack https://devtools-html-slack.herokuapp.com/

Comment 5

[Pranav pandey]

Attachment: Bug 1593607 - added autocomplete item in the console settings menu.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/47bbec3c10c6
added autocomplete item in the console settings menu. r=nchevobbe

Comment 7

[Daniel Varga [:dvarga]]

https://hg.mozilla.org/mozilla-central/rev/47bbec3c10c6