Compact JS Widget approach

README.md

@@ -36,15 +36,13 @@ end
 ```
 
 Include the JavaScript:
-```rb
-# config/importmap.rb
-pin "dev_toolbar", to: "dev_toolbar/index.js"
-pin "dev_toolbar/toolbar", to: "dev_toolbar/toolbar.js"
-
-# app/javascripts/application.js
+```js
+// app/javascript/application.js
 import "dev_toolbar"
 ```
 
+The importmap pin is added automatically by the engine.
+
 These routes will now appear on every page in your app while in development.
 
 ## Updating the gem

app/assets/javascripts/dev_toolbar/index.js

@@ -1,4 +1,75 @@
-import Toolbar from "dev_toolbar/toolbar"
+const STYLES = `
+  #dev-toolbar {
+    position: fixed;
+    right: 0;
+    top: 50vh;
+    transform: translateY(-50%);
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+    color: #808080;
+  }
+
+  #dev-toolbar-toggle {
+    all: unset;
+    font-size: 2em;
+    border: none;
+    cursor: pointer;
+    line-height: 1.5;
+    padding: 0 10px;
+    text-decoration: none;
+  }
+
+  #dev-toolbar-links {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .dev-toolbar-link {
+    padding: 5px 10px;
+    border-bottom: 1px #f0f0f0 solid;
+    color: #808080;
+    text-decoration: none;
+    background-color: white;
+  }
+
+  #dev-toolbar-links.hidden {
+    display: none;
+  }
+`
+
+function injectStyles() {
+  if (document.getElementById("dev-toolbar-styles")) return
+  const style = document.createElement("style")
+  style.id = "dev-toolbar-styles"
+  style.textContent = STYLES
+  document.head.appendChild(style)
+}
+
+function renderToolbar() {
+  const configuration = document.querySelector("meta[name=dev_toolbar_config]")
+  const defined_links = JSON.parse(configuration.content)
+  let toolbar_links = ``
+  for (let index = 0; index < defined_links.length; index++) {
+    const link = defined_links[index];
+    toolbar_links += `<a href="${link.path}" target="_blank" class="dev-toolbar-link">${link.name}</a>`
+  }
+  const toolbar_html = `
+    <div id="dev-toolbar">
+      <div id="dev-toolbar-button">
+        <button id="dev-toolbar-toggle">🛠️</button>
+      </div>
+      <div id="dev-toolbar-links" class="hidden">
+        ${toolbar_links}
+      </div>
+    </div>
+  `
+  document.body.insertAdjacentHTML('beforeend', toolbar_html)
+}
 
 function waitForElementToExist(selector) {
   return new Promise(resolve => {
@@ -21,8 +92,9 @@ function waitForElementToExist(selector) {
 }
 
 document.addEventListener("turbo:load", function() {
+  injectStyles();
   if (!document.getElementById("dev-toolbar")) {
-    Toolbar.render();
+    renderToolbar();
   }
   waitForElementToExist("#dev-toolbar-toggle").then( () => {
     document.getElementById("dev-toolbar-toggle").addEventListener("click", function() {

config/importmap.rb

@@ -0,0 +1 @@
+pin "dev_toolbar", to: "dev_toolbar/index.js"

lib/dev_toolbar/engine.rb

@@ -2,15 +2,10 @@ module DevToolbar
   class Engine < ::Rails::Engine
     isolate_namespace DevToolbar
 
-    config.assets.paths << root.join("app/assets/stylesheets")
-
     initializer "dev_toolbar.assets_precompile", group: :all do |app|
       # Only configure asset precompilation if Sprockets is available
       if defined?(Sprockets) && app.config.respond_to?(:assets)
-        app.config.assets.precompile += [
-          "dev_toolbar/toolbar.js", 
-          "dev_toolbar/index.js", 
-        ]
+        app.config.assets.precompile += ["dev_toolbar/index.js"]
       end
     end
 
@@ -21,6 +16,12 @@ class Engine < ::Rails::Engine
         root: "#{root}/app/"
     end
 
+    initializer "dev_toolbar.importmap", before: "importmap" do |app|
+      if defined?(Importmap)
+        app.config.importmap.paths << root.join("config/importmap.rb")
+      end
+    end
+
     initializer "dev_toolbar.add_routes", after: :add_routing_paths do |app|
       app.routes.append do
         get "/erd", to: "dev_toolbar/erd#show"