Enable Dev Tools Button

Customization Theme component

AI-generated summary

The discussion revolves around the Enable Dev Tools Button theme component, which adds a header button to toggle Discourse Developer Tools. NateDhaliwal introduced the component, with a button that changes from a bug to a bug-slash icon when enabled, using localStorage to persist state. Heliosurge raised concerns about the button appearing to non-admin users and its placement near the profile section, possibly due to the f-nav theme component. NateDhaliwal added an admin_only setting and clarified the button’s position relative to the search icon. Andrew_Rowe reported the button not appearing, which NateDhaliwal attributed to visibility issues due to color matching, later fixed with a component update. RGJ identified a bug in the admin_only logic causing errors when users are not logged in, prompting a fix. The component has been updated to improve functionality and code quality, with plans to transition to a .gjs file.

1
:information_source: Summary Adds a button to the site header to enable Dev Tools
:eyeglasses: Preview https://discourse.theme-creator.io/theme/NateDhaliwal/enable-dev-tools-button
:hammer_and_wrench: Repository GitHub - NateDhaliwal/Enable-Dev-Tools-Button · GitHub
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This Theme Component adds a button to the site header to enable the Developer Tools. When Dev Tools are not enabled, the button is the normal bug icon. When it is enabled, it is at the bug-slash icon.

Before enabling:
image

After enabling:
image

The button should remain at its respective state even when the page is closed, as it uses localStorage.

8 Likes
Introducing Discourse developer toolbar
2

On my instance it seems to show for non admin users. Could this be adjusted for admin only?

It is also showing on the right of profile. Guessing maybe due to f-nav theme component

The image shows a screenshot of the interface of the game "Xropicstonis," featuring a dark background with the game title displayed prominently at the top. (Captioned by AI)
The image shows a screenshot of the interface of the game "Xropicstonis," featuring a dark background with the game title displayed prominently at the top. (Captioned by AI)864×208 42.4 KB

1 Like
3

Yep, new setting admin_only has been added. I got some of it from here.

I’ve specified it to be before the search button already. Probably a component affecting this.

2 Likes
4

Thank you very kindly

The TC that will be affecting is very likely

It moves the search and chat a a few other goodies to a bottom bar. Not a big deal. As the Dev bar when active is a bit busy compared to the old TC plugin outlets in mobile.

1 Like
5

Pushed a quick fix to add a setting (logged_in_only) to show the button to logged in users. It’s true by default.

2 Likes
6

For some reason, I don’t see the button after installing this component, everytime this happens it seems I’ve missed something little :roll_eyes:

I have the Custom Header Links component installed but I disabled it and the Dev Tools Button still didn’t appear

I reloaded the page several times and even logged out and back in (since I have it set to admin only)

latest Discourse just updated

7

I noticed this the last time as well. I think the icon is the same colour as the header, for some reason. IIRC it’s there, upon inspection.

It’s odd. IIRC if you enable then disable it, the button appears again. I’ll see what I can do.

2 Likes
8

@Andrew_Rowe I’ve pushed a fix. Try it and tell me if it works now, thanks!

2 Likes
9

Yup… it works now!!! Had to update the component. Thanks Nate

2 Likes
10

No problem!

11

I will be updating this soon to make it into a gjs file instead of a js/hbs one.

3 Likes
12

I’ve just merged in a PR that fixes the logic related to the admin_only setting. The setting should now function properly. Somehow I missed this bug for quite a while.
https://github.com/NateDhaliwal/Enable-Dev-Tools-Button/pull/1

13

I see this tc throws errors when one is not logged in because of a wrong order of expressions

if (settings.admin_only && currentUser.admin && currentUser !== null) {

evaluates currentUser.admin even if currentUser is null. It should be

if (settings.admin_only && currentUser && currentUser.admin) {

3 Likes
14

I’ve updated it, thanks!

1 Like