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:
className: "menu-item webconsole-console-settings-menu-item-timestamps",
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
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.
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 :)