Working with a bit of style

lib/fiveruns_tuneup_core.rb

@@ -3,6 +3,11 @@ module Fiveruns
   module Tuneup
 
     class CalculationError < ::RuntimeError; end
+
+    class << self
+      attr_accessor :javascripts_path
+      attr_accessor :stylesheets_path
+    end
 
     def self.record(&block)
       Step.reset!
@@ -23,9 +28,8 @@ def self.insert_panel(body, run)
 
     def self.head
       %(
-        <script src='/javascripts/jquery.js' type='text/javascript'></script>
-        <script src='/javascripts/tuneup.js' type='text/javascript'></script>
-        <link rel='stylesheet' type='text/css' href='/stylesheets/tuneup.css'/>
+        <script src='#{javascripts_path}/init.js' type='text/javascript'></script>
+        <link rel='stylesheet' type='text/css' href='#{stylesheets_path}/tuneup.css'/>
       )
     end
 
@@ -135,7 +139,7 @@ def to_s
         end
         parts = [:model, :view, :controller].map do |l|
           if (portion = layer_portions[l]) > 0
-            "<li class='mvc' title='%f'>%s</li>" % [portion, l.to_s[0, 1].upcase]
+            "<li class='mvc %s' title='%f'>%s</li>" % [l, portion, l.to_s[0, 1].upcase]
           end
         end
         bar = "<ul class='bar' title='#{time * 1000}'><li class='time'>#{'%.1f' % (time * 1000)}ms</li>#{parts.compact.join}</ul>"

lib/fiveruns_tuneup_merb.rb

@@ -1,9 +1,13 @@
 if defined?(Merb::Plugins)
 
   $:.unshift File.dirname(__FILE__)
-
+
+
   load_dependency 'merb-slices'
   Merb::Plugins.add_rakefiles "fiveruns_tuneup_merb/merbtasks", "fiveruns_tuneup_merb/slicetasks", "fiveruns_tuneup_merb/spectasks"
+
+  require File.dirname(__FILE__) / 'fiveruns_tuneup_core'
+  require File.dirname(__FILE__) / 'fiveruns_tuneup_merb' / 'instrumentation'
 
   # Register the Slice for the current host application
   Merb::Slices::register(__FILE__)
@@ -15,7 +19,7 @@
   # Configuration options:
   # :layout - the layout to use; defaults to :fiveruns_tuneup_merb
   # :mirror - which path component types to use on copy operations; defaults to all
-  Merb::Slices::config[:fiveruns_tuneup_merb][:layout] ||= :fiveruns_tuneup_merb
+  Merb::Slices::config[:fiveruns_tuneup_merb][:layout] ||= :application
 
   # All Slice code is expected to be namespaced inside a module
   module FiverunsTuneupMerb
@@ -28,6 +32,13 @@ module FiverunsTuneupMerb
     # Stub classes loaded hook - runs before LoadClasses BootLoader
     # right after a slice's classes have been loaded internally.
     def self.loaded
+      Fiveruns::Tuneup.javascripts_path = FiverunsTuneupMerb.public_dir_for('javascripts')
+      Fiveruns::Tuneup.stylesheets_path = FiverunsTuneupMerb.public_dir_for('stylesheets')
+      ::Merb::Request.extend(FiverunsTuneupMerb::Instrumentation::Merb::Request)
+      ::Merb::Controller.extend(FiverunsTuneupMerb::Instrumentation::Merb::Controller)
+      if defined?(::DataMapper)
+        ::DataMapper::Repository.extend(FiverunsTuneupMerb::Instrumentation::DataMapper::Repository)
+      end
     end
 
     # Initialization hook - runs before AfterAppLoads BootLoader
@@ -68,6 +79,7 @@ def self.setup_router(scope)
   # ...
   #
   # Any component path that hasn't been set will default to FiverunsTuneupMerb.root
+
   #
   # Or just call setup_default_structure! to setup a basic Merb MVC structure.
   FiverunsTuneupMerb.setup_default_structure!

lib/fiveruns_tuneup_merb/instrumentation.rb

@@ -32,7 +32,7 @@ def _call_filters(filters)
              if filters.empty?
                super
              else
-               Fiveruns::Tuneup.step("Called filters (#{filters.size})", :controller) { super }
+               Fiveruns::Tuneup.step("Called filters (#{CGI.escapeHTML filters.inspect})", :controller) { super }
              end
            end
 
@@ -80,11 +80,11 @@ def new(*args, &block)
          module Ext
 
            def read_many(query)
-             Fiveruns::Tuneup.step("DM Read Many", :model, :repository => @name, :query => query.inspect) { super }
+             Fiveruns::Tuneup.step("DM Read Many #{CGI.escapeHTML query.inspect}<br/>#{caller[0,4].inspect}", :model, :repository => @name, :query => query.inspect) { super }
            end
 
            def read_one(query)
-             Fiveruns::Tuneup.step("DM Read One", :model, :repository => @name, :query => query.inspect) { super }
+             Fiveruns::Tuneup.step("DM Read One ", :model, :repository => @name, :query => query.inspect) { super }
            end
 
            def update(attributes, query)

public/javascripts/init.js

@@ -0,0 +1,12 @@
+// Vanilla wait-for-DOM
+setTimeout(function() {
+	var iframe = document.createElement('iframe');
+	iframe.src = '/slices/fiveruns_tuneup_merb/javascripts/sandbox.html';
+
+	var style        = iframe.style;
+	style.visibility = 'hidden';
+	style.width      = '0';
+	style.height     = '0';
+
+	document.body.appendChild(iframe);
+}, 50);

public/javascripts/sandbox.html

@@ -0,0 +1,7 @@
+<html>
+  <head>
+    <script type="text/javascript" src="/slices/fiveruns_tuneup_merb/javascripts/jquery.js"></script>
+    <script type="text/javascript" src="/slices/fiveruns_tuneup_merb/javascripts/tuneup.js"></script>
+  </head>
+  <body></body>
+</html>

public/javascripts/tuneup.js

@@ -1,26 +1,26 @@
-$(document).ready(function() {
-  var colors = {
-    M: '#FF9800',
-    V: 'green',
-    C: 'blue'
-  };
-  $('#tuneup ul ul.children').hide();
-  $('#tuneup li').toggle(
-     function() { if($(this).find('ul').length > 1) $(this).addClass('disclosed').find('> ul.children').show(); },
-     function() { if($(this).find('ul').length > 1) $(this).removeClass('disclosed').find('> ul.children').hide(); }                
+var _window   = window.parent,    // window obj of the main page
+    page = $(_window.document); // document obj of the main page
+
+$(window).ready(function() {
+  page.find('#tuneup ul ul.children').hide();
+  page.find('#tuneup ul > li > ul.children ul.children').slice(0, 2).show().each(function() {
+    $(this).parent('li').addClass('disclosed');
+  });
+  page.find('#tuneup li').toggle(
+    function() { if($(this).find('ul').length > 1) $(this).addClass('disclosed').find('> ul.children').show(); },
+    function() { if($(this).find('ul').length > 1) $(this).removeClass('disclosed').find('> ul.children').hide(); }                
   );
-  var bars = $('#tuneup .bar');
-  var total = $(bars[0]).attr('title');
+  var bars = page.find('#tuneup .bar');
+  var total = page.find(bars[0]).attr('title');
 
-  $('#tuneup ul.bar li.mvc').each(function() {
+  page.find('#tuneup ul.bar li.mvc').each(function() {
     var barTime = $(this).parent('.bar').attr('title');
     var maxWidth = barTime / total * 200;
     var portion = $(this).attr('title');
     var width = maxWidth * portion;
     $(this).attr('title', (barTime * portion).toFixed(1) + 'ms / ' + (barTime / total * portion * 100).toFixed(2) + '%');
     $(this).css({
-      width:      width + 'px',
-      background: colors[$(this).html()],
+      width:      width + 'px'
     });
     if (width < 12)
       $(this).html('&nbsp;');
@@ -30,4 +30,45 @@ $(document).ready(function() {
     var width = barTime / total * 200;
     $(this).css({marginRight: (200 - width) + 'px'});
   });
-});
+  TuneUp.adjustFixedElements(page);
+});
+
+var TuneUp = {
+  adjustFixedElements: function(e) {
+    page.find('*').each(function() {
+      if($(this).css({position: 'fixed'})) {
+        TuneUp.adjustElement(e);
+      }
+  	});
+  },
+  adjustElement: function(e) {
+    var element = $(e)
+  	var top = parseFloat(element.css('top') || 0);
+  	var adjust = 0;
+  	if(!element.hasClass('tuneup-flash-adjusted')) {
+      adjust = page.find('#tuneup-flash.tuneup-show').length ? 27 : -27;
+    	element.addClass('tuneup-flash-adjusted');
+    }
+  	if (element.hasClass('tuneup-adjusted')) {
+  	  element.css({top: (top + adjust) + 'px'});
+  	} else {
+  	  element.css({top: (top + 50 + adjust) + 'px'});
+  		element.addClass('tuneup-adjusted');
+  	}
+  },
+  adjustAbsoluteElements: function(base) {
+    $(base).find('> *[id!=tuneup]').each(function() {
+      switch($(this).css('position')) {
+      case 'absolute':
+        TuneUp.adjustElement(this);
+    		TuneUp.adjustAbsoluteElements(this);
+        break;
+      case 'relative':
+        // Nothing
+        break;
+      default:
+        TuneUp.adjustAbsoluteElements(this);
+      }
+    });
+  }
+}

public/stylesheets/tuneup.css

@@ -1,21 +1,29 @@
-#tuneup { background: #ddd; }
+#tuneup { background: #000; color: #ddd; }
 
 #tuneup ul { list-style: none; margin: 0 0 0 18px; }
+#tuneup ul > li > ul.children { display: none; }
+#tuneup ul:hover > li > ul.children { display: block; }
+
 #tuneup table { display: none; }
 
 #tuneup li { cursor: pointer; clear: right; padding: 2px; }
-#tuneup li.disclosed { font-weight: bold; }
-#tuneup li.disclosed ul { font-weight: normal; }
+#tuneup li.disclosed { font-weight: bold; color: #fff; }
+#tuneup li.disclosed ul { font-weight: normal; color: #ddd; }
 
 #tuneup ul.children { clear: right; padding-left: 4px; }
-#tuneup ul ul.children { background: #ccc; }
-#tuneup ul ul ul.children { background: #bbb; }
-#tuneup ul ul ul ul.children { background: #aaa; }
-#tuneup ul ul ul ul ul ul.children { background: #666; }
+#tuneup ul ul.children { background: #111; }
+#tuneup ul ul ul.children { background: #222; }
+#tuneup ul ul ul ul.children { background: #333; }
+#tuneup ul ul ul ul ul ul.children { background: #444; }
 #tuneup ul ul ul ul ul ul ul.children { background: #555; }
-#tuneup ul ul ul ul ul ul ul ul.children { background: #444; }
-#tuneup ul ul ul ul ul ul ul ul ul.children { background: #333; }
+#tuneup ul ul ul ul ul ul ul ul.children { background: #666; }
+#tuneup ul ul ul ul ul ul ul ul ul.children { background: #777; }
+
+#tuneup li.mvc { background-image: url(/slices/fiveruns_tuneup_merb/images/fade.png); background-attachment: top left; background-repeat: repeat-x; }
+#tuneup li.model { background-color: #FF9800; }
+#tuneup li.view { background-color: green; }
+#tuneup li.controller { background-color: blue; }
 
 #tuneup .bar { float: right; height: 14px; }
-#tuneup .bar li { padding: 0; float: left; height: 14px; color: #fff; text-align: center; font-weight: bold; padding: 2px; }
-#tuneup .bar li.time { color: #000; font-weight: normal; padding-right: 18px; }
+#tuneup .bar li { padding: 0; float: left; color: #ddd; text-align: center; font-weight: bold; padding: 2px; height: 14px; line-height: 14px; vertical-align: middle; }
+#tuneup .bar li.time { color: #fff; font-weight: normal; padding-right: 18px; }