Developer Toolbox

Theme component
, ,
1
:discourse2: Summary Developer Toolbox gives quick access to common links, actions, and settings often used when developing with Discourse.
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-dev-utils
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

:information_source: For local development use only. Not useful for production sites

Features

developer toolbox example
developer toolbox example1437×580 102 KB

How it works

The component is designed by default to be unobtrusive, so you trigger a modal by tapping the grave slash ` character on your keyboard. Alternatively, you can enable a trigger button in the UI by toggling a theme setting.

Once the modal appears you have access to some common actions, links and settings that you might typically need while developing with Discourse.

Settings

Name Description
show header button Show the trigger for the dev toolbox in the header panel
remove button from flow Fixes the header button to bottom right. (Requires show_header_button to be enabled)
actions close modal Triggering an action in the toolbox will also close the toolbox modal.
custom links
Translation Default
dev_utils.toggle_btn Dev Toolbox
dev_utils.modal.title Developer Toolbox
dev_utils.modal.cancel Cancel
dev_utils.actions.title Quick Actions
dev_utils.actions.toggle_alerts Toggle Alerts
dev_utils.actions.toggle_plugin_outlets Toggle Outlets
dev_utils.links.title Quick Links
dev_utils.links.themes Themes
dev_utils.links.components Theme Components
dev_utils.links.colors Colors
dev_utils.links.settings Settings
dev_utils.links.plugins Plugins
dev_utils.links.user_prefs User Preferences
dev_utils.links.text Text
dev_utils.links.plugin_api Plugin API
dev_utils.links.docs Discourse Docs
dev_utils.common_settings.title Common Settings
dev_utils.common_settings.none Select a setting

Last edited by @JammyDodger 2024-06-15T18:10:29Z

Check documentPerform check on document:
42 Likes
2

Thank you for this great component, Keegan!

Right now the header icon always shows. A small improvement could be to only show it to admins. So when browsing the site as a regular user the look is not tweaked.

5 Likes
3

i quite like this component. thank you! :slight_smile: :+1:

i just noticed that the Discourse Docs button goes to the Plugin API link instead of docs.

2 Likes
4

Thanks for identifying that @Lilly, I’ve pushed an update resolving this:

Thanks for the request @nolo, I’ve added this now:

3 Likes
5

This looks very good – I need to identify all of the outlets, but both Toggle Outlets and Toggle Alerts seem to do nothing except close the modal.

Are they supposed to display/show or highlight something on screen when toggled on?

1 Like
6

Adding/installing this theme component in addition to the Developer Toolbox makes the Toggle Outlets button work…

2 Likes
7

The Plugin API link is not opening the file. Seems like it needs to be updated to app/assets/javascripts/discourse/app/lib/plugin-api.gjs?

2 Likes
8

Thanks, I made the PR :+1:

3 Likes
9

Thanks @Arkshine for the fix, I’ve merged that in :tada:

I’ve also added a few updates (fixes/modernizations) as well as a new feature where you can now add custom links by defining them in the theme setting:

The image displays a dark-themed graphical user interface for editing custom links, with fields to input a name, icon, and link for a particular settings item titled "AI Settings." (Captioned by AI)
The image displays a dark-themed graphical user interface for editing custom links, with fields to input a name, icon, and link for a particular settings item titled "AI Settings." (Captioned by AI)2272×684 39.4 KB

The image displays a dark-themed "Developer Toolbox" menu with various options such as Quick Actions and Quick Links related to software development tasks and settings. (Captioned by AI)
The image displays a dark-themed "Developer Toolbox" menu with various options such as Quick Actions and Quick Links related to software development tasks and settings. (Captioned by AI)1178×886 28.4 KB

3 Likes
10

Can we submit translation for this component on crowdin? I didn’t find the entrance to it.

1 Like
13

Hi @th21 thanks for letting us know. I have added it as a translation project in Crowdin.

3 Likes
17

What is the expected result of “Toggle Alerts”? clicked and nothing happened

1 Like
18

It is intended to hide any alerts you have on your Discourse instance. If you have any alerts on your forum like this:

Screenshot 2025-02-06 at 08.01.06
Screenshot 2025-02-06 at 08.01.061940×786 53.8 KB

It will hide it from the page. It’s quite useful for example, when theming and you want to temporarily see the page without any alerts.

2 Likes