roda-debug_bar 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 579c3658131b0cbcf37b4eb150bac95328b6fd03f6fcce27a2470dbb8549f232
-  data.tar.gz: ef1819c9640e2df2575bb1f5c11a5dc934e951ea57adc03a24c6bedbab7ca27a
+  metadata.gz: 1a81b9b197aece30bf9fb928d9395a6f8a1926053c3cd3d2e6c6e03bf7560bf5
+  data.tar.gz: 1f33f1cc90ccb8d77dda10f75af4d52b7ef58401151baaabe5b148079ece2f9a
 SHA512:
-  metadata.gz: 839359c83b959a366d8eaf8d6b181ec30288b9ee6c13c8020e34287be24cf9b8d3074d7296e343e4e2eea3119de43359b27f3db09d57b30f9902e2db70ca9698
-  data.tar.gz: 8707fa854cf92383fa8e76adf3045212be52807496e0b749776c777ad29d3c3c4003d6084dca2120a4e2c5f57a594bfcb0e6e3462721e5077cc08e8c1c80af76
+  metadata.gz: 9742307c5e57fe1ec22ad37061d64bf2239d30f12ecfaec07f806ae16ebb2d2aabf4acbf81c6f8e27059ed460fbad6cf6ea1be469a6683cca35c356a1f74844f
+  data.tar.gz: 78cf79cf7353d43112235a731d41b9ce4d7a4391b0f8c74244e0d661d0233ef1c36673e726243f2c295617d1a50fb260164067436ffe94917b1524cd07674b6f

data/lib/roda/debug_bar/instance.rb

@@ -39,6 +39,7 @@ class Roda
         @root = root
         @log_entries = []
         # @views = []
+        @messages = []
         @matches = []
         @timer = Process.clock_gettime(Process::CLOCK_MONOTONIC)
         @filter = filter || proc { false }
@@ -115,6 +116,10 @@ class Roda
           data[:views] = views
         end
 
+        if @messages
+          data[:messages] = @messages
+        end
+
         data[:request] = request
 
         # data[:request_inspect] = request.env
@@ -178,9 +183,17 @@ class Roda
       #   puts @views
       # end
 
+      # built-in from roda-enhanced_logger
       def add_log_entry(record)
         @log_entries << record
       end
+
+      public
+
+      # logged to message tab
+      def add_message(log_level, message)
+        @messages << {type: log_level, message: message}
+      end
     end
   end
 end

data/lib/roda/debug_bar/views/debug_bar/messages.erb

@@ -0,0 +1,38 @@
+<% if @data[:messages].nil? %>
+  <!-- <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">No queries</div> -->
+  <li>No messages to log</li>
+<% else %>
+  <div class="px-4 py-2 space-y-2">
+    <% @data[:messages].each do |message| %>
+      <div class="flex items-center">
+        <!-- <div class="flex justify-center items-center"><span class="pl-1 pb-2 bg-blue-400 w-4 h-4 rounded-full">!</span></div> -->
+
+<!-- This case statement doesn't work if the block is indented right -->
+<!-- Seems to be a bug with ERB rendering -->
+<% color = '' %>
+<% case message[:type] %>
+<% when :info %>
+  <% color = 'blue' %>
+  <svg class="size-4 fill-<%= color %>-600"
+       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /> </svg>
+<% when :warn %>
+  <% color = 'yellow' %>
+  <svg class="size-4 fill-<%= color %>-600"
+       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"> <path fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /> </svg>
+<% when :error %>
+  <% color = 'red' %>
+  <svg class="size-4 fill-<%= color %>-600"
+       xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor"> <path fill-rule="evenodd" d="M6.701 2.25c.577-1 2.02-1 2.598 0l5.196 9a1.5 1.5 0 0 1-1.299 2.25H2.804a1.5 1.5 0 0 1-1.3-2.25l5.197-9ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 1 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" /> </svg>
+<% end %>
+
+        <!-- This is so tailwind generates the dynamically used styles -->
+        <div hidden class="text-blue-900 text-red-900 text-yellow-900"></div>
+
+        <span class="ml-1 text-<%= color %>-900">
+          <%= message[:message] %>
+        </span>
+
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/lib/roda/debug_bar/views/debug_bar/models.erb

@@ -24,7 +24,7 @@
       <ul x-show="open" class="font-mono">
       <% models_list.each do |values| %>
         <!-- <li class="ml-6 highlight">{ <%= highlight_ruby_hash(values.map { |k, v| "#{k}: #{v}" }.join(',  ')) %> }</li> -->
-        <li class="ml-6 highlight ruby"><%= highlight_ruby_hash(values.to_s) %></li>
+        <li class="ml-6 highlight ruby hash"><%= highlight_ruby_hash(values.to_s) %></li>
       <% end %>
       </ul>
     </div>

data/lib/roda/debug_bar/views/debug_bar/queries.erb

@@ -6,13 +6,24 @@
   %>
   <div class="px-4 py-2 odd:bg-white even:bg-ruby-50 font-mono flex justify-between">
     <span class="italic"><%= @data[:db_queries] == 1? "1 statement was executed": "#{@data[:db_queries]} statements were executed" %></span>
-    <span class="text-gray-900"><%= format_time(@data[:db]) %></span>
+
+    <span class="text-gray-900 flex items-center">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 mr-1">
+        <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z" clip-rule="evenodd" />
+      </svg>
+    <%= format_time(@data[:db]) %></span>
 
   </div>
   <% @data[:db_messages].each do |query| %>
     <div class="highlight px-4 py-2 odd:bg-white even:bg-ruby-50 font-mono flex justify-between">
       <span><%= sql_highlight(query[:query]).downcase %></span>
-      <span class="text-gray-500"><%= format_time(query[:duration]) %></span>
+      <span class="text-gray-500 flex items-center">
+
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4 mr-1">
+        <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm7.75-4.25a.75.75 0 0 0-1.5 0V8c0 .414.336.75.75.75h3.25a.75.75 0 0 0 0-1.5h-2.5v-3.5Z" clip-rule="evenodd" />
+      </svg>
+
+      <%= format_time(query[:duration]) %></span>
     </div>
   <% end %>
 

data/lib/roda/debug_bar/views/debug_bar/route.erb

@@ -9,9 +9,40 @@
   </a>
 </div>
 <% @data[:routes].each do |route| %>
-  <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">
+  <div class="px-4 py-2 odd:bg-white even:bg-ruby-50 flex justify-between">
+
+  <a class="highlight ruby route hover:underline hover:cursor-pointer" href="vscode://file/<%= File.join(@app_root, route[:path]) %>">
+    <%= highlight_ruby_hash(route[:handler]) %>
+  </a>
+
   <a class="text-blue-500 hover:underline hover:cursor-pointer" href="vscode://file/<%= File.join(@app_root, route[:path]) %>">
-    <%= route[:handler] %>
+    <%= route[:path] %>
   </a>
+
+
+
+
+
   </div>
 <% end %>
+
+
+<!-- views.erb
+  <% @app_root ||= __dir__ %>
+
+  <% if @data[:views] %>
+  <div class="max-w mx-auto">
+  <% views = @data[:views].tally; views.each do |view, count| %>
+    <div class="px-4 py-2 odd:bg-white even:bg-ruby-50 flex justify-between">
+      <span>
+        <%= view %>
+        <span class="ml-1 px-2 py-[0.125rem] bg-ruby-600 text-white rounded-full text-xs"><%= count %></span>
+      </span>
+      <a href="<%= "vscode://file/#{File.join(@app_root, "views/#{view}.erb")}" %>" class="text-blue-500 hover:underline hover:cursor-pointer"><%= "views/#{view}.erb" %></a>
+    </div>
+  <% end %>
+  <% else %>
+    <div class="p-4 odd:bg-white even:bg-ruby-50">No views</div>
+  <% end %>
+  </div>
+-->

data/lib/roda/debug_bar/views/debug_bar/session.erb

@@ -0,0 +1,3 @@
+<div class="px-4 py-2">
+  This is a placeholder
+</div

data/lib/roda/debug_bar/views/debug_bar.erb

@@ -32,27 +32,55 @@
     /****** ruby hash ******/
 
     /* strings */
-    .highlight.ruby .ss {
+    .highlight.ruby.hash .ss {
       font-weight: bold;
       color: #912520;
     }
 
-    .highlight.ruby .s2 {
+    .highlight.ruby.hash .s2 {
       color: #009999;
     }
 
     /* integers */
-    .highlight.ruby .mi {
+    .highlight.ruby.hash .mi {
       font-weight: normal;
       color: #0086B3;
     }
 
     /* punctuation */
-    .highlight.ruby .p {
+    .highlight.ruby.hash .p {
       color: #9ca3af;
     }
 
 
+    /******* ruby routes tab *******/
+
+    .highlight.ruby.route .s1 {
+      color: #009999;
+    }
+
+    .highlight.ruby.route .nf {
+      font-style: italic;
+    }
+
+    .highlight.ruby.route .n {
+      font-weight: bold;
+      color: #912520;     /* ruby-700 */
+    }
+
+    .highlight.ruby.route .no {
+      color: #138;
+    }
+
+    .highlight.ruby.route .o {
+      color: #9ca3af;
+    }
+
+    .highlight.ruby .nb {
+      color: #701d19;
+    }
+
+
     /*
     .reset {
       all: initial;
@@ -163,14 +191,13 @@
           { label: 'Request', content: `<%= relative_render('debug_bar/request') %>` },
           { label: 'Models', content: `<%= relative_render('debug_bar/models') %>` },
           { label: 'Queries', content: `<%= relative_render('debug_bar/queries') %>` },
-          { label: 'Messages', content: 'Debug Info for Tab 1' },
-          // { label: 'Timeline', content: 'Debug Info for Tab 2' },
+          { label: 'Messages', content: `<%= relative_render('debug_bar/messages') %>` },
           // { label: 'Exceptions', content: 'Debug Info for Tab 3' },
           { label: 'Views', content: `<%= relative_render('debug_bar/views') %>` },
           { label: 'Route', content:  `<%= relative_render('debug_bar/route') %>` },
           // { label: 'Mails', content: 'Debug Info for Tab 4' },
           // { label: 'Gate', content: 'Debug Info for Tab 4' },
-          { label: 'Session', content: 'Debug Info for Tab 4' },
+          { label: 'Session', content: `<%= relative_render('debug_bar/session') %>` },
         ],
 
         init() {

data/lib/roda/plugins/debug_bar.rb

@@ -16,8 +16,7 @@ class Roda
         db: nil,
         log_time: false,
         trace_missed: true,
-        ##### PUT TRACE ALL TO TRUE AGAIN
-        trace_all: false,
+        trace_all: true,
         # trace_all: true,
         filtered_params: %w[password password_confirmation _csrf],
         handlers: [:console]
@@ -35,6 +34,7 @@ class Roda
 
       def self.configure(app, opts = {})
         # app.opts[:debug_bar] = opts
+        # app.include InstanceMethods::DebugLog
 
         @@data_store = []
 
@@ -133,6 +133,8 @@ class Roda
           # This @data is available to views
           @data = @_debug_bar_instance.debug_data
 
+          puts @data.to_json
+
           if @debug_catch
             response = @data.to_json
             res[1]['content-type'] = 'application/json'
@@ -208,6 +210,19 @@ HTML
 
       module InstanceMethods
 
+        # module DebugLog
+          def log_info message
+            @_debug_bar_instance.add_message(:info, message)
+          end
+          def log_warn message
+            @_debug_bar_instance.add_message(:warn, message)
+          end
+          def log_error message
+            @_debug_bar_instance.add_message(:error, message)
+          end
+        # end
+
+
         # def add_data(data)
         #   if @@data_store.size < 5
         #     @@data_store << data

data/lib/version.rb

@@ -1,3 +1,3 @@
 module DebugBar
-  VERSION = "0.1.1"
+  VERSION = "0.2.0"
 end

data/public/out.css

@@ -566,24 +566,28 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   margin-right: auto;
 }
 
-.ml-6 {
-  margin-left: 1.5rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
 
-.ml-2 {
-  margin-left: 0.5rem;
+.ml-6 {
+  margin-left: 1.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
 }
 
 .block {
@@ -632,10 +636,6 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   height: 1rem;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
 .w-16 {
   width: 4rem;
 }
@@ -644,6 +644,10 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   width: 16rem;
 }
 
+.w-8\/12 {
+  width: 66.666667%;
+}
+
 .w-auto {
   width: auto;
 }
@@ -656,22 +660,6 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   width: 1rem;
 }
 
-.w-7 {
-  width: 1.75rem;
-}
-
-.w-8 {
-  width: 2rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
-.w-8\/12 {
-  width: 66.666667%;
-}
-
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -711,18 +699,24 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
 }
 
-.overflow-y-auto {
-  overflow-y: auto;
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.rounded-md {
-  border-radius: 0.375rem;
+.overflow-y-auto {
+  overflow-y: auto;
 }
 
 .rounded-full {
   border-radius: 9999px;
 }
 
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -769,34 +763,19 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
 }
 
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
-}
-
-.bg-ruby-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(112 29 25 / var(--tw-bg-opacity, 1));
-}
-
 .bg-ruby-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(186 47 41 / var(--tw-bg-opacity, 1));
 }
 
-.bg-ruby-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 52 45 / var(--tw-bg-opacity, 1));
-}
-
-.bg-ruby-300 {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(221 119 114 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.bg-ruby-200 {
+.bg-blue-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(232 162 158 / var(--tw-bg-opacity, 1));
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
 }
 
 .p-4 {
@@ -807,10 +786,6 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   padding: 2rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -826,21 +801,11 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   padding-bottom: 0.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-\[0\.125rem\] {
   padding-top: 0.125rem;
   padding-bottom: 0.125rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -857,6 +822,10 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   padding-top: 0.5rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -875,11 +844,6 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   line-height: 1rem;
 }
 
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
 .font-bold {
   font-weight: 700;
 }
@@ -893,54 +857,39 @@ video:where(.debug-bar,.debug-bar *):where(:not(.no-tailwind,.no-tailwind *)) {
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
-}
-
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
-}
-
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
-}
-
 .text-gray-500 {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
-.text-gray-900 {
+.text-gray-800 {
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
 }
 
-.text-ruby-50 {
+.text-gray-900 {
   --tw-text-opacity: 1;
-  color: rgb(250 235 234 / var(--tw-text-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
 }
 
-.text-ruby-100 {
+.text-white {
   --tw-text-opacity: 1;
-  color: rgb(239 192 190 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-white {
+.text-blue-900 {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
 }
 
-.text-ruby-800 {
+.text-red-900 {
   --tw-text-opacity: 1;
-  color: rgb(112 29 25 / var(--tw-text-opacity, 1));
+  color: rgb(127 29 29 / var(--tw-text-opacity, 1));
 }
 
-.text-ruby-900 {
+.text-yellow-900 {
   --tw-text-opacity: 1;
-  color: rgb(86 22 19 / var(--tw-text-opacity, 1));
+  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
 }
 
 .filter {

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: roda-debug_bar
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Avi Feher Sternlieb
 bindir: bin
 cert_chain: []
-date: 2025-01-06 00:00:00.000000000 Z
+date: 2025-01-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: roda
@@ -116,11 +116,13 @@ files:
 - lib/roda/debug_bar/current.rb
 - lib/roda/debug_bar/instance.rb
 - lib/roda/debug_bar/views/debug_bar.erb
+- lib/roda/debug_bar/views/debug_bar/messages.erb
 - lib/roda/debug_bar/views/debug_bar/models.erb
 - lib/roda/debug_bar/views/debug_bar/queries.erb
 - lib/roda/debug_bar/views/debug_bar/request.erb
 - lib/roda/debug_bar/views/debug_bar/right_bar.erb
 - lib/roda/debug_bar/views/debug_bar/route.erb
+- lib/roda/debug_bar/views/debug_bar/session.erb
 - lib/roda/debug_bar/views/debug_bar/views.erb
 - lib/roda/plugins/debug_bar.rb
 - lib/sequel/extensions/debug_bar.rb