roda-debug_bar 0.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 579c3658131b0cbcf37b4eb150bac95328b6fd03f6fcce27a2470dbb8549f232
+  data.tar.gz: ef1819c9640e2df2575bb1f5c11a5dc934e951ea57adc03a24c6bedbab7ca27a
+SHA512:
+  metadata.gz: 839359c83b959a366d8eaf8d6b181ec30288b9ee6c13c8020e34287be24cf9b8d3074d7296e343e4e2eea3119de43359b27f3db09d57b30f9902e2db70ca9698
+  data.tar.gz: 8707fa854cf92383fa8e76adf3045212be52807496e0b749776c777ad29d3c3c4003d6084dca2120a4e2c5f57a594bfcb0e6e3462721e5077cc08e8c1c80af76

data/lib/roda/debug_bar/current.rb

@@ -0,0 +1,110 @@
+class Roda
+  module DebugBar
+    module Current
+      extend self
+
+      # Increment the accrued database time
+      # @param value [Numeric]
+      #   the value to increment
+      # @return [Numeric]
+      #   the updated value
+      def increment_accrued_database_time(value)
+        Thread.current[:accrued_database_time] ||= 0
+        Thread.current[:accrued_database_time] += value
+      end
+
+      # The accrued database time
+      # @return [Numeric]
+      def accrued_database_time
+        Thread.current[:accrued_database_time]
+      end
+
+      # Set accrued database time
+      # @param value [Numeric]
+      #   the value to set
+      # @return [Numeric]
+      #   the new value
+      def accrued_database_time=(value)
+        Thread.current[:accrued_database_time] = value
+      end
+
+      def increment_database_query_count(value = 1)
+        Thread.current[:database_query_count] ||= 0
+        Thread.current[:database_query_count] += value
+      end
+
+      def database_query_count
+        Thread.current[:database_query_count]
+      end
+
+      def database_query_count=(value)
+        Thread.current[:database_query_count] = value
+      end
+
+      def add_database_query(message, duration)
+        Thread.current[:database_queries] ||= []
+        Thread.current[:database_queries] << {query: message, duration: duration}
+      end
+
+      def database_queries
+        Thread.current[:database_queries]
+      end
+
+      def database_queries=(value)
+        Thread.current[:database_queries] = value
+      end
+
+      def add_model(model, values)
+        Thread.current[:models] ||= {}
+        Thread.current[:models][model.to_s] ||= []
+        Thread.current[:models][model.to_s] << values
+        # Thread.current[:models] << {name: model, values: values}
+      end
+
+      def models
+        Thread.current[:models]
+      end
+
+      def models=(value)
+        Thread.current[:models] = value
+      end
+
+      def add_view(view)
+        Thread.current[:view] ||= []
+        Thread.current[:view] << view
+      end
+
+      def views
+        Thread.current[:view]
+      end
+
+      def views=(value)
+        Thread.current[:view] = value
+      end
+
+      def add_route(handler, path)
+        Thread.current[:routes] ||= []
+        Thread.current[:routes] << {handler: handler, path: path}
+      end
+
+      def routes
+        Thread.current[:routes]
+      end
+
+      def routes=(value)
+        Thread.current[:routes] = value
+      end
+
+      # Reset the counters
+      def reset
+        self.accrued_database_time = nil
+        self.database_query_count = nil
+        self.database_queries = nil
+        self.models = nil
+        self.views = nil
+        self.routes = nil
+        true
+      end
+    end
+  end
+end

data/lib/roda/debug_bar/instance.rb

@@ -0,0 +1,186 @@
+# frozen-string-literal: true
+require "roda"
+
+class Roda
+  module DebugBar
+    ##
+    # Logger instance for this application
+    class Instance
+
+      # Application root
+      attr_reader :root
+
+      # Log entries generated during request
+      attr_reader :log_entries
+
+      # Logger instance
+      attr_reader :logger
+
+      # Route matches during request
+      attr_reader :matches
+
+      attr_reader :timer
+      private :timer
+
+      # Callable object to filter log entries
+      attr_reader :filter
+
+
+
+      ### added
+      attr_accessor :debug_data
+
+      # attr_reader :views
+      ###
+
+
+      def initialize(logger, env, instance_id, root, filter)
+        @logger = logger
+        @root = root
+        @log_entries = []
+        # @views = []
+        @matches = []
+        @timer = Process.clock_gettime(Process::CLOCK_MONOTONIC)
+        @filter = filter || proc { false }
+        if env["debug_bar_id"].nil?
+          @primary = true
+          env["debug_bar"] = instance_id
+        else
+          @primary = false
+        end
+      end
+
+      # Add a matched route handler
+      def add_match(caller)
+        @matches << caller
+      end
+
+      # Add log entry for request
+      # @param status [Integer]
+      #   status code for the response
+      # @param request [Roda::RodaRequest]
+      #   request object
+      # @param trace [Boolean]
+      #   tracing was enabled
+      def add(status, request, trace = false)
+        if (last_matched_caller = matches.last)
+          handler = format("%s:%d",
+            Pathname(last_matched_caller.path).relative_path_from(root),
+            last_matched_caller.lineno)
+        end
+
+        if handler.nil?
+          handler = 'nilString'
+        end
+
+        meth =
+          case status
+          when 400..499
+            :warn
+          when 500..599
+            :error
+          else
+            :info
+          end
+
+        data = {
+          duration: (Process.clock_gettime(Process::CLOCK_MONOTONIC) - timer).round(4),
+          status: status,
+          verb: request.request_method,
+          path: request.path,
+          remaining_path: request.remaining_path,
+          handler: handler,
+          params: request.params
+        }
+
+        if (db = Roda::DebugBar::Current.accrued_database_time)
+          data[:db] = db.round(6)
+        else
+          data[:db] = false
+        end
+
+        if (query_count = Roda::DebugBar::Current.database_query_count)
+          data[:db_queries] = query_count
+        end
+
+        if (queries = Roda::DebugBar::Current.database_queries)
+          data[:db_messages] = queries
+        end
+
+        if (models = Roda::DebugBar::Current.models)
+          data[:models] = models
+        end
+
+        if (views = Roda::DebugBar::Current.views)
+          data[:views] = views
+        end
+
+        data[:request] = request
+
+        # data[:request_inspect] = request.env
+
+        # data[:views] = @views
+
+        if trace
+          p "matches: #{matches}"
+          matches.each do |match|
+            add_log_entry([meth, format("  %s (%s:%s)",
+              File.readlines(match.path)[match.lineno - 1].strip.sub(" do", ""),
+              Pathname(match.path).relative_path_from(root),
+              match.lineno)])
+
+
+            handler = File.readlines(match.path)[match.lineno - 1].strip.sub(" do", "")
+            path = "#{Pathname(match.path).relative_path_from(root)}:#{match.lineno}"
+            Roda::DebugBar::Current.add_route(handler, path)
+          end
+        end
+
+        if (routes = Roda::DebugBar::Current.routes)
+          data[:routes] = routes
+        end
+
+        return if filter.call(request.path)
+
+        @debug_data = data
+        add_log_entry([meth, "#{request.request_method} #{request.path}", data])
+      end
+
+      # This instance is the primary logger
+      # @return [Boolean]
+      def primary?
+        @primary
+      end
+
+      # Drain the log entry queue, writing each to the logger at their respective level
+      # @return [Boolean]
+      def drain
+        return unless primary?
+
+        log_entries.each do |args|
+          logger.public_send(*args)
+        end
+
+        true
+      end
+
+      # Reset the counters for this thread
+      # @return [Boolean]
+      def reset
+        Roda::DebugBar::Current.reset
+      end
+
+      private
+
+      # def add_view(view)
+      #   raise "Error: @views is nil" if @views.nil?
+      #   @views << view
+      #   puts @views
+      # end
+
+      def add_log_entry(record)
+        @log_entries << record
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+<% if @data[:models] %>
+<div class="max-w mx-auto space-y-1">
+  <% @data[:models].each do |model_name, models_list| %>
+  <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">
+
+    <!-- <pretty-json> <%= {model_name => models_list}.to_json %></pretty-json> -->
+
+<!--
+    <json-viewer> <%= {model_name => models_list}.to_json %><json-viewer>
+
+    <json-viewer>
+    { "quiz": { "sport": { "q1": { "question": "Which one is correct team name in NBA?", "options": [ "New York Bulls",
+    "Los Angeles Kings", "Golden State Warriros", "Huston Rocket" ], "answer": "Huston Rocket" } }, "maths": { "q1": {
+    "question": "5 + 7 = ?", "options": [ "10", "11", "12", "13" ], "answer": "12" }, "q2": { "question": "12 - 8 = ?",
+    "options": [ "1", "2", "3", "4" ], "answer": "4" } } } }
+  </json-viewer>
+  -->
+
+    <div x-data="{open: false}">
+      <!-- <span><%= model_name %> x<%= models_list.size %> </span> -->
+      <span class="font-mono"><%= model_name %></span>
+      <span @click="open = !open" x-text="open? '[-]': '[+]'" class="text-blue-500 hover:cursor-pointer hover:text-blue-700 active:text-blue-400"></span>
+      <span class="ml-1 px-2 py-[0.125rem] bg-ruby-600 text-white rounded-full text-xs"><%= models_list.size %></span>
+      <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>
+      <% end %>
+      </ul>
+    </div>
+  </div>
+
+  <% end %>
+</div>
+<% else %>
+<div class="px-4 py-2 odd:bg-white even:bg-ruby-50">No models</div>
+<% end %>

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

@@ -0,0 +1,30 @@
+  <% if @data[:db_messages] %>
+  <div class="max-w mx-auto bg-gray-400">
+  <% def foo v
+       'bar'
+     end
+  %>
+  <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>
+
+  </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>
+    </div>
+  <% end %>
+
+  <div id="foo"></div>
+
+  <!-- Fill up 5 rows minimum -->
+ <!-- <% (6-@data[:db_messages].size).times do %> <div class="px-4 py-2 odd:bg-white even:bg-ruby-50 font-mono">&#8203;</div> <% end %> -->
+  <!-- -->
+
+  <% else %>
+    <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">No queries</div>
+  <% end %>
+  </div>
+
+<%# grid_component(@data[:db_messages], ) %>

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

@@ -0,0 +1,39 @@
+<%
+
+hash = [
+  { name: 'request_method', value: request.request_method },
+  { name: 'request_path', value: request.path },
+  { name: 'request_params', value: request.params }
+]
+
+request.env.each do |key, value|
+  hash << {name: key.downcase, value: value} if key.start_with?('HTTP_')
+end
+
+# hash << { name: 'request_headers', value: request.env.filter {|k, v| k.to_s.start_with? 'HTTP_' } }
+hash << { name: 'request_headers', value: request.env.to_json }
+
+hash << { name: 'response_headers', value: response.headers }
+
+%>
+
+<div class="max-w mx-auto space-y-1 font-mono">
+  <% hash.each do |elem| %>
+  <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">
+    <span class="inline-block w-64"><%= elem[:name] %></span><span class=""><%= elem[:value] %></span>
+  </div>
+  <% end %>
+</div>
+
+<!--
+<div class="grid grid-cols-2 gap-4 p-4 border border-gray-300 rounded-md">
+  <div class="font-bold">request_method</div>
+  <div>GET</div>
+  <div class="font-bold">request_path</div>
+  <div>/</div>
+  <div class="font-bold">request_params</div>
+  <div>{}</div>
+  <div class="font-bold">http_host</div>
+  <div>localhost:9292</div>
+</div>
+-->

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

@@ -0,0 +1,4 @@
+<!-- GET / <%#= request.path %> <%= RUBY_VERSION %> -->
+
+<span>GET <%= request.path %></span>
+<span class="ml-2"><%= format_time(@data[:duration]) %></span>

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

@@ -0,0 +1,17 @@
+<% @app_root ||= __dir__ %>
+<% @data[:handler] ||= 'nilString' %>
+<% @data[:routes] ||= {} %>
+
+
+<div class="px-4 py-2 odd:bg-white even:bg-ruby-50">
+  <a class="text-blue-500 hover:underline hover:cursor-pointer" href="vscode://file/<%= File.join(@app_root, @data[:handler]) %>">
+    <%= @data[:handler] %>
+  </a>
+</div>
+<% @data[:routes].each do |route| %>
+  <div class="px-4 py-2 odd:bg-white even:bg-ruby-50">
+  <a class="text-blue-500 hover:underline hover:cursor-pointer" href="vscode://file/<%= File.join(@app_root, route[:path]) %>">
+    <%= route[:handler] %>
+  </a>
+  </div>
+<% end %>

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

@@ -0,0 +1,19 @@
+  <% @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 %> x<%= count %></span> -->
+      <span>
+        <%= view %>
+        <span class="ml-1 px-2 py-[0.125rem] bg-ruby-600 text-white rounded-full text-xs"><%= count %></span>
+      </span>
+      <!-- Make dynamic to engine and views directory -->
+      <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.erb

@@ -0,0 +1,196 @@
+
+  <style>
+    <%#= Rouge::Themes::Colorful.render(scope: '.highlight') %>
+    <%#= Rouge::Themes::Github.mode(:light).render(scope: '.highlight') %>
+
+    /* SQL syntax highlight */
+
+    /* keywords */
+    .highlight .k {
+      font-weight: bold;
+      color: #912520;     /* ruby-700 */
+    }
+
+    /* strings */
+    .highlight .nv {
+      color: #009999;
+    }
+
+    /* integers */
+    .highlight .mi {
+      font-weight: bold;
+      color: #0086B3;
+    }
+
+    /* punctuation */
+    .highlight .p {
+      color: #9ca3af;
+    }
+
+
+
+    /****** ruby hash ******/
+
+    /* strings */
+    .highlight.ruby .ss {
+      font-weight: bold;
+      color: #912520;
+    }
+
+    .highlight.ruby .s2 {
+      color: #009999;
+    }
+
+    /* integers */
+    .highlight.ruby .mi {
+      font-weight: normal;
+      color: #0086B3;
+    }
+
+    /* punctuation */
+    .highlight.ruby .p {
+      color: #9ca3af;
+    }
+
+
+    /*
+    .reset {
+      all: initial;
+    }
+
+    .reset * {
+      all: unset;
+    }
+    */
+/*
+    .normalize * {
+      /* @apply @tailwind base;
+      all: unset;
+      display: block;
+    }
+*/
+
+
+  </style>
+
+  <!--  -->
+  <link rel="stylesheet" href="/debug_bar/out.css">
+  <!--  -->
+
+  <div class="reset">
+    <div x-data="debugBarComponent()" x-init="init()" class="debug-bar">
+      <!-- Ruby logo in lower lefthand side -->
+      <div>
+        <div x-show="openState == 'hidden'" class="fixed bottom-0 left-0 pb-2 pt-2 pl-2 pr-3 text-center hover:cursor-pointer border-t-4 border-ruby-600 bg-gray-200" @click="setOpenState('open')">
+          <img src="/debug_bar/ruby.png" alt="Ruby" class="h-7 w-auto">
+        </div>
+      </div>
+      <section x-show="openState != 'hidden'" class="fixed bottom-0 left-0 w-full bg-gray-200 border-t border-gray-300">
+        <!-- Debug Bar -->
+        <div class="w-full bg-gray-200 border-t border-gray-300">
+          <!-- Tabs -->
+          <div class="flex items-center bg-gray-200 justify-between">
+            <div class="w-8/12 flex items-center">
+              <!-- Clickable Ruby logo to hide debug bar -->
+              <div class="px-2 text-center hover:cursor-pointer" @click="setOpenState('hidden')">
+                <img src="/debug_bar/ruby.png" alt="Ruby" class="h-7 w-auto">
+              </div>
+              <!-- Tab group for request/models/queries... -->
+              <template x-for="(tab, index) in tabs" :key="index">
+                <div
+                  @click="selectTab(index)"
+                  class="flex-1 py-2 text-center cursor-pointer text-sm border-t-4 transition-all"
+                  :class="selectedTab === index
+                    ? 'bg-gray-300 border-ruby-600 font-bold'
+                    : 'bg-gray-200 border-transparent text-gray-800'"
+                  x-text="tab.label">
+                </div>
+              </template>
+            </div>
+            <!--
+            <div class="w-16">
+            </div>
+            -->
+
+            <div class="flex">
+              <!-- Make right bar left aligned instead -->
+              <div class="flex-1 py-2 text-center text-sm border-t-4 border-transparent text-gray-800 font-mono">
+                <%= relative_render('debug_bar/right_bar') %>
+              </div>
+
+              <div class="flex justify-center items-center mr-2 ml-4">
+                <!-- <img src="" alt="foo" srcset="" @click="setOpenState('minimized')" class="hover:cursor-pointer"> -->
+
+
+                <a href="/debug_bar/last/1" class="hover:cursor-pointer">
+                  <svg width="24px" height="24px" viewBox="0 0 76 76" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full" enable-background="new 0 0 76.00 76.00" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill="#000000" fill-opacity="1" stroke-linejoin="round" d="M 46.5,19C 47.8807,19 49,20.1193 49,21.5C 49,22.8807 47.8807,24 46.5,24L 45.8641,23.9184L 43.5566,26.8718C 45.1489,28.0176 46.5309,29.6405 47.6023,31.6025C 44.8701,32.4842 41.563,33 38,33C 34.4369,33 31.1299,32.4842 28.3977,31.6025C 29.4333,29.7061 30.7591,28.1265 32.2844,26.9882L 29.9221,23.9646C 29.7849,23.9879 29.6438,24 29.5,24C 28.1193,24 27,22.8808 27,21.5C 27,20.1193 28.1193,19 29.5,19C 30.8807,19 32,20.1193 32,21.5C 32,22.0018 31.8521,22.4691 31.5976,22.8607L 34.0019,25.938C 35.2525,25.3305 36.5982,25 38,25C 39.3339,25 40.617,25.2993 41.8156,25.8516L 44.2947,22.6786C 44.1066,22.3274 44,21.9262 44,21.5C 44,20.1193 45.1193,19 46.5,19 Z M 54.5,40C 55.3284,40 56,40.6716 56,41.5C 56,42.3284 55.3284,43 54.5,43L 49.9511,43C 49.88,44.0847 49.7325,45.1391 49.5162,46.1531L 54.8059,48.6197C 55.5567,48.9698 55.8815,49.8623 55.5314,50.6131C 55.1813,51.3639 54.2889,51.6887 53.5381,51.3386L 48.6665,49.067C 46.8161,53.9883 43.2172,57.4651 39,57.9435L 39,34.9864C 42.541,34.8897 45.7913,34.283 48.4239,33.3201L 48.6187,33.8074L 53.73,31.8454C 54.5034,31.5485 55.371,31.9348 55.6679,32.7082C 55.9648,33.4816 55.5785,34.3492 54.8051,34.6461L 49.482,36.6895C 49.717,37.7515 49.8763,38.859 49.9511,40L 54.5,40 Z M 21.5,40L 26.0489,40C 26.1237,38.859 26.2829,37.7516 26.518,36.6895L 21.1949,34.6461C 20.4215,34.3492 20.0352,33.4816 20.332,32.7082C 20.6289,31.9348 21.4966,31.5485 22.27,31.8454L 27.3812,33.8074L 27.5761,33.3201C 30.2087,34.283 33.4589,34.8897 37,34.9864L 37,57.9435C 32.7827,57.4651 29.1838,53.9883 27.3335,49.067L 22.4618,51.3387C 21.711,51.6888 20.8186,51.3639 20.4685,50.6131C 20.1184,49.8623 20.4432,48.9699 21.194,48.6198L 26.4838,46.1531C 26.2674,45.1392 26.12,44.0847 26.0489,43L 21.5,43C 20.6716,43 20,42.3285 20,41.5C 20,40.6716 20.6716,40 21.5,40 Z "></path> </g></svg>
+                </a>
+
+                <svg @click="toggleMinimized()" class="hover:cursor-pointer size-5" :class="openState == 'minimized' ? 'rotate-180': ''"
+                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+                </svg>
+                <svg @click="setOpenState('hidden')" class="hover:cursor-pointer size-5"
+                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <!-- Tab Content -->
+          <!-- <div class="p-8 bg-gray-100 text-sm text-gray-800"> -->
+          <!-- <div class="bg-gray-100 text-sm text-gray-800 h-48 overflow-y-auto"> -->
+          <%#= @data.inspect %>
+          <%#= @data[:request].request_method %>
+          <%#= @data[:request].path %>
+          <div class="bg-white text-sm text-gray-800 h-56 overflow-y-auto" x-show="openState == 'open'">
+            <template x-for="(tab, index) in tabs" :key="index">
+              <div x-show="selectedTab === index" x-html="tab.content"></div>
+            </template>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <script>
+    function debugBarComponent() {
+      return {
+        selectedTab: 0,
+        openState: 'open',
+        tabs: [
+          // Can't comment out lines with backticks or it doesn't render
+          { 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: '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' },
+        ],
+
+        init() {
+          this.selectedTab = parseInt(sessionStorage.getItem('debugBar.selectedTab')) || this.selectedTab;
+          this.openState = sessionStorage.getItem('debugBar.openState') || this.openState;
+        },
+
+        toggleMinimized() {
+          this.setOpenState(this.openState == 'minimized'? 'open': 'minimized');
+        },
+
+        setOpenState(openState) {
+          this.openState = openState;
+          sessionStorage.setItem('debugBar.openState', openState);
+        },
+
+        selectTab(index) {
+          this.selectedTab = index;
+          sessionStorage.setItem('debugBar.selectedTab', index);
+        }
+      };
+    }
+  </script>