dev_panel 0.2.2 → 0.2.3

data/lib/devpanel/extension.rb

@@ -14,22 +14,30 @@ module DevPanel
     end
 
     def ajax_call
-      '<div id="DevPanel"></div><script type="text/javascript">
-        $.ajax({
-          url: "/__DevPanel/main",
-          success: function(response) {
-            $("#DevPanel").html(response);' + hide_container +
-            '
-            $("#devPanelHider").on("click", function(s) {
-              $("#devPanelContainer").toggle();
-              $.get("/__DevPanel/set_options?visible=" + $("#devPanelContainer").is(":visible"));
-            });
-            $("#devPanelWindow").draggable({stop: function() {
-              $.get("/__DevPanel/set_options?top=" + $("#devPanelWindow").position().top + "&left=" + $("#devPanelWindow").position().left);
-            }});
-          }
-        });
-      </script>'
+      <<-html_code
+        <div id="DevPanel"></div><script type="text/javascript">
+          $.ajax({
+            url: "/__DevPanel/main",
+            success: function(response) {
+              $("#DevPanel").html(response);
+              #{hide_container};
+              $("#viewTime").click(function(e) {
+                $("#partialList").css('top', e.pageY + 10 + 'px');
+                $("#partialList").css('left', e.pageX + 10 + 'px');
+                $("#partialList").toggle();
+              });
+              $("#devPanelHider").on("click", function(s) {
+                $("#devPanelContainer").toggle();
+                $("#partialList").hide();
+                $.get("/__DevPanel/set_options?visible=" + $("#devPanelContainer").is(":visible"));
+              });
+              $("#devPanelWindow").draggable({stop: function() {
+                $.get("/__DevPanel/set_options?top=" + $("#devPanelWindow").position().top + "&left=" + $("#devPanelWindow").position().left);
+              }});
+            }
+          });
+        </script>
+      html_code
     end
 
     def hide_container

data/lib/devpanel/middleware.rb

@@ -21,78 +21,144 @@ module DevPanel
    end
 
     def css
-      "<style>
-        #devPanelWindow {
-          border-radius: 3px;
-          margin-bottom: 2px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
-          font-family: menlo, lucida console, monospace;
-          border: 2px solid #000;
-        }
-
-        #devPanelHider {
-          background: #F1F1F1;
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
-          font-family: arial;
-          font-size: 12.8px;
-          overflow: hidden;
-          padding: 6px 10px;
-          border: solid 1px #CCC;
-          border-bottom: 0;
-          border-top-left-radius: 2px;
-          border-top-right-radius: 2px;
-        }
-
-        #devPanelContainer {
-          font-family: menlo, lucida console, monospace;
-          background-color: #fff;
-          box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-        }
-
-        #devPanelContainer td {
-          font-family: arial;
-          color: #000;
-          font-size: 10px;
-          font-weight: normal;
-          padding: 8px;
-          overflow: auto;
-        }
-
-        #devPanelContainer tr {
-          background-color: #FACC9B;;
-        }
-
-        #devPanelContainer td.firstColumn {
-          width: 60px;
-          font-weight: bold;
-        }
-
-        #devPanelContainer .alt {
-          background-color: #FFF;;
-        }
-      </style>"
+      <<-css_code
+        <style>
+          #devPanelWindow {
+            border-radius: 3px;
+            margin-bottom: 2px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.03), 1px 1px 0 rgba(0, 0, 0, 0.05), -1px 1px 0 rgba(0, 0, 0, 0.05), 0 0 0 4px rgba(0, 0, 0, 0.04);
+            font-family: menlo, lucida console, monospace;
+            border: 2px solid #000;
+          }
+
+          #devPanelHider {
+            background: #F1F1F1;
+            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
+            font-family: arial;
+            font-size: 12.8px;
+            overflow: hidden;
+            padding: 6px 10px;
+            border: solid 1px #CCC;
+            border-bottom: 0;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+          }
+
+          #devPanelContainer {
+            font-family: menlo, lucida console, monospace;
+            background-color: #fff;
+            box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+          }
+
+          #devPanelContainer td {
+            font-family: arial;
+            color: #000;
+            font-size: 10px;
+            font-weight: normal;
+            padding: 8px;
+            overflow: auto;
+          }
+
+          #devPanelContainer tr {
+            background-color: #FACC9B;;
+          }
+
+          #devPanelContainer td.firstColumn {
+            width: 60px;
+            font-weight: bold;
+          }
+
+          #devPanelContainer .alt {
+            background-color: #FFF;
+          }
+
+          #viewTime {
+            font-size: 10px;
+            text-decoration: underline;
+          }
+
+          #partialList {
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            background: #F1F1F1;
+            border: 2px solid #000;
+            background-color: #fff;
+            box-shadow: inset 3px 3px 3px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+            font-family: arial;
+            font-size: 10px;
+            overflow: hidden;
+            padding: 6px 10px;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            display: none;
+            z-index: 1;
+          }
+        </style>
+      css_code
     end
 
     def html_containers
-      str = '<div id="devPanelWindow" style="padding: 3px; color: #000; background-color: #F0F0F5; position: absolute; float: left; top: ' + Stats.top.to_s + 'px; left: ' + Stats.left.to_s + 'px;" >'
-      str += '<div id="devPanelHider" style="width: 150px; text-align:center; border: solid 1px #fff"><a href="#">Show/Hide Stats</a> / <span style="font-size: 10px">' +  Stats.data[:action_controller].duration.round(0).to_s + 'ms</span></div>'
-      str += '<div id="devPanelContainer" style="width: 300px; padding-top: 20px">'
+      <<-html_code
+        <div id='partialList'>#{partial_list}</div>
+        <div id="devPanelWindow" style="padding: 3px; color: #000; background-color: #F0F0F5; position: absolute; float: left; top: #{Stats.top.to_s}px; left: #{Stats.left.to_s}px;" >
+        <div id="devPanelHider" style="width: 150px; text-align:center; border: solid 1px #fff"><a href="#">Show/Hide Stats</a> / <span style="font-size: 10px">#{Stats.data[:action_controller].duration.round(0).to_s}ms</span></div>
+        <div id="devPanelContainer" style="width: 300px; padding-top: 20px">
+      html_code
+    end
+
+    def stats(symbol)
+      Stats.data[:action_controller].payload[symbol]
     end
 
     def html_table
-      str = '<table style="width: 300px; table-layout: fixed">'
-      str += "<tr class='alt'><td class='firstColumn'>Total Time:</td> <td>#{Stats.data[:action_controller].duration.round(2).to_s}ms</td></tr>"
-      controller_time = (Stats.data[:action_controller].duration - Stats.data[:action_controller].payload[:view_runtime])
-      str += "<tr><td class='firstColumn'>Controller Time:</td> <td> #{controller_time.round(2).to_s}ms</td></tr>"
-      str += "<tr class='alt'><td class='firstColumn'>View Time:</td> <td>#{Stats.data[:action_controller].payload[:view_runtime].round(2).to_s}ms</td></tr>"
-      str += "<tr><td class='firstColumn'>Partials Rendered:</td> <td> #{Stats.data[:partial_count] || 0}</td></tr>"
-      str += "<tr class='alt'><td class='firstColumn'>Response Code:</td> <td> #{Stats.data[:action_controller].payload[:status].to_s}</td></tr>"
-      str += "<tr><td class='firstColumn'>Controller:</td> <td> #{Stats.data[:action_controller].payload[:controller].to_s}</td></tr>"
-      str += "<tr class='alt'><td class='firstColumn'>Action:</td> <td> #{Stats.data[:action_controller].payload[:action].to_s}</td></tr>"
-      str += "<tr><td class='firstColumn'>Method:</td> <td> #{Stats.data[:action_controller].payload[:method].to_s}</td></tr>"
-      str += "<tr class='alt'><td class='firstColumn'>Params:</td> <td> #{Stats.data[:action_controller].payload[:params]}</td></tr>"
-      str += "<tr><td class='firstColumn'>Log:</td> <td> #{Stats.data[:log]}</td></tr>"
-      str += "</table></div></div>"
+      controller_time = (Stats.data[:action_controller].duration - stats(:view_runtime))
+      table_rows = rowify([
+        first_td("Total Time:")        + td("#{Stats.data[:action_controller].duration.round(2).to_s}ms"),
+        first_td("Controller Time:")   + td("#{controller_time.round(2).to_s}ms"),
+        first_td("View Time:")         + td("#{stats(:view_runtime).round(2).to_s}ms"),
+        first_td("Partials Rendered:") + td(partial_count),
+        first_td("Response Code:")     + td(stats(:status)),
+        first_td("Controller:")        + td(stats(:controller)),
+        first_td("Action:")            + td(stats(:action)),
+        first_td("Method:")            + td(stats(:method)),
+        first_td("Params:")            + td(stats(:params)),
+        first_td("Log:")               + td(Stats.data[:log])
+      ])
+
+      "<table style='width: 300px; table-layout: fixed'>#{table_rows}</table></div></div>"
+    end
+
+    def partial_count
+      "<div id='viewTime'>#{Stats.data[:partial_count] || 0}</div>"
     end
+
+    def partial_list
+      str = ""
+      Stats.data[:partials].each_pair {|k,v| str << "#{k}: #{Stats.data[:partials][k]}<br>" }
+      str
+    end
+
+    def tr(content = "", klass="")
+      "<tr class=#{klass}>#{content}</tr>"
+    end
+
+    def td(content = "")
+      "<td>#{content}</td>"
+    end
+
+    def first_td(content = "")
+      "<td class='firstColumn'>#{content}</td>"
+    end
+
+    def rowify(arr)
+      result = ""
+      arr.each_with_index do |data, index|
+        result += tr(data, index.even? ? "alt" : "")
+        puts tr(data, index.even? ? "alt" : "")
+      end
+      result
+    end
+
   end
 end

data/lib/devpanel/rails.rb

@@ -17,6 +17,11 @@ module DevPanel
         ActiveSupport::Notifications.subscribe('render_partial.action_view') do |*args|
           Stats.data[:partial_count] ||= 0
           Stats.data[:partial_count] += 1
+          event = ActiveSupport::Notifications::Event.new(*args)
+          partial_name = event.payload[:identifier].split("app").last
+          Stats.data[:partials] ||= {}
+          Stats.data[:partials][partial_name] ||= 0
+          Stats.data[:partials][partial_name] += 1
         end
 
       end

data/lib/devpanel/stats.rb

@@ -41,8 +41,17 @@ module DevPanel
 
     def self.log(log)
       @@data[:log] ||= ""
+      @@data[:log] += "<div style='border-bottom: 1px black solid'>"
       @@data[:log] += CGI::escapeHTML("#{log}")
-      @@data[:log] += "<br>--------------<br>"
+      @@data[:log] += "</div>"
     end
+
+    def self.time
+      start = Time.now
+      yield
+      time_spent = ((Time.now - start)*1000).round(2)
+      self.log("Time Elapsed: #{time_spent}ms")
+    end
+
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: dev_panel
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.3
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-01-09 00:00:00.000000000 Z
+date: 2013-01-14 00:00:00.000000000 Z
 dependencies: []
 description: A panel that appears in the browser to provide stats on page load times
   and other debugging information for Rails 3