Convert to JS Widget by jelaniwoods · Pull Request #18 · firstdraft/dev_toolbar

jelaniwoods · 2026-05-21T17:25:11Z

Resolves https://github.com/firstdraft/appdev/issues/751

Problem

DevToolbar clutters up the source code a lot, which makes teaching them to use View Source harder.

Maybe we can make it into a JS widget that loads itself dynamically so that the bulk of the code isn't in the Source?

Solution

This PR updates the dev_toolbar to now be injected into the DOM via JavaScript. Viewing the page source in the Rails will no longer show the style tag and HTML for this gem.

Review notes

Take any AD1 Rails app and:

Update the gem version

gem "dev_toolbar", github: "firstdraft/dev_toolbar", branch: "751-jw"

Install the JS and CSS

# config/importmap.rb
pin "dev_toolbar", to: "dev_toolbar/index.js"
pin "dev_toolbar/toolbar", to: "dev_toolbar/toolbar.js"

# app/javascripts/application.js
import "dev_toolbar"

# app/assets/stylesheets/application.css
@import url("dev_toolbar.css");

visit any page to interact with the widget

jelaniwoods · 2026-05-21T17:27:51Z

+}
+
+#dev-toolbar-toggle {
+  all: unset;


I changed the toolbar icon from a link to a button, since clicking on it doesn't navigate to another (part of the) page. all: unset resets the default styling of the button.

jelaniwoods · 2026-05-21T17:28:37Z

    def show
      @erd_path = Rails.root.join("erd.png")
-      render :show
+      render "dev_toolbar/erd/show", formats: [:html]


The Rails app was not finding this view template until I specified it with this default. I don't this this should be necessary, but I wasn't able to figure it out. I'd love to learn why the previous way wasn't working.

I also looked into this for a bit, but wasn't able to figure it out. Claude 4.7 sent me down some paths, which were all wrong in the end. This is a weird one, but I'm going to leave it alone now.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 7cd1f924bf

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jelaniwoods · 2026-05-21T17:31:36Z

-              links.classList.toggle('hidden');
-            });
-          </script>
+          <meta name="dev_toolbar_config" content='#{toolbar_links_content}'>


The configured toolbar links needed to be passed from the initializer to the JavaScript file somehow so I decided to store them in a meta tag as JSON. Since it's in the <head> it won't clutter up the <body>, which is where students will mostly be looking.

Yeah, this is very small and discrete in the source.

jelaniwoods · 2026-05-21T17:37:39Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 29ae63b3c7

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jelaniwoods · 2026-05-25T14:41:05Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9eb1aae206

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-05-25T14:46:12Z

+        </div>
+      </div>
+    `
+    document.body.insertAdjacentHTML('beforeend', toolbar_html)


Make toolbar render idempotent on repeated Turbo loads

Toolbar.render() always appends a new #dev-toolbar node with insertAdjacentHTML, so after Turbo restores a cached page (for example, browser Back/Forward) and fires turbo:load again, the page accumulates duplicate toolbars and duplicated toggle controls. This regression was introduced by moving rendering client-side without a guard/removal step; add an existence check (or remove before cache) so repeated loads do not duplicate UI.

Useful? React with 👍 / 👎.

bpurinton · 2026-05-28T23:45:43Z

+  });
+}
+
+document.addEventListener("turbo:load", function() {


Do we always expect the turbo:load event? Should we also listen for DOMContentLoaded, in case turbo:load does not occur?

bpurinton

I was curious about ways to further reduce the configuration needed for a project. What do you think of this approach that only requires one config step, import "dev_toolbar" in application.js?

#19

jelaniwoods · 2026-06-01T18:14:23Z

I was curious about ways to further reduce the configuration needed for a project. What do you think of this approach that only requires one config step, import "dev_toolbar" in application.js?

@bpurinton

I still think the main thing to optimize is minimizing the impact (lines of code added) to the source HTML page. The number of files to configure for the gem to work is less important in my mind because none of our students are going to manually install this gem. All projects and the template will have it pre-installed and configured for them. On our end, we can write a script or installer to make that process easier to make new projects and/or trigger project syncing if there are too many steps right now.

That said, we can probably condense the importmap assets into one file, but I think the CSS should be loaded through the asset pipeline of the Rails app instead of being added through the middleware. I intentionally made that change since injecting a style tag with middleware will cause it to appear in the source HTML, which we're trying to avoid. Before I make any changes, what are your thoughts on this?

bpurinton · 2026-06-01T20:33:15Z

Before I make any changes, what are your thoughts on this?

I agree with your reasoning here. I was thinking it would be more lightweight to maintain and hook into projects with my update, but I don't think we need to worry much about that. I'll close my experimental PR and delete that branch.

I left one question above about turbo:load listener, but otherwise this seems to be working well in my testing.

jelaniwoods added 2 commits May 21, 2026 11:58

WIP

1abadfc

cleanup

7cd1f92

jelaniwoods commented May 21, 2026

View reviewed changes

chatgpt-codex-connector Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/assets/javascripts/dev_toolbar/index.js Outdated

Comment thread lib/dev_toolbar/middleware.rb

jelaniwoods commented May 21, 2026

View reviewed changes

render after turbo:load

29ae63b

chatgpt-codex-connector Bot reviewed May 21, 2026

View reviewed changes

Comment thread app/assets/javascripts/dev_toolbar/index.js Outdated

Comment thread lib/dev_toolbar/middleware.rb

Comment thread lib/dev_toolbar/middleware.rb

whoops

9eb1aae

chatgpt-codex-connector Bot reviewed May 25, 2026

View reviewed changes

prevent duplicate renders from turbo restore

5cf81c1

bpurinton reviewed May 28, 2026

View reviewed changes

bpurinton reviewed May 29, 2026

View reviewed changes

bpurinton mentioned this pull request Jun 1, 2026

Compact JS Widget approach #19

Closed

Conversation

jelaniwoods commented May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Review notes

Uh oh!

jelaniwoods May 21, 2026

Choose a reason for hiding this comment

Uh oh!

jelaniwoods May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bpurinton May 29, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

jelaniwoods May 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bpurinton May 29, 2026

Choose a reason for hiding this comment

Uh oh!

jelaniwoods commented May 21, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jelaniwoods commented May 25, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot May 25, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

bpurinton May 28, 2026

Choose a reason for hiding this comment

Uh oh!

bpurinton left a comment

Choose a reason for hiding this comment

Uh oh!

jelaniwoods commented Jun 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bpurinton commented Jun 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jelaniwoods commented May 21, 2026 •

edited

Loading

jelaniwoods May 21, 2026 •

edited

Loading

jelaniwoods May 21, 2026 •

edited

Loading

jelaniwoods commented Jun 1, 2026 •

edited

Loading