sproutcore 1.4.5 → 1.5.0.pre.3

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/canvas_image.js

@@ -0,0 +1,100 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2010-2011 Strobe Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('render_delegates/render_delegate');
+
+/**
+  @class
+  Renders and updates DOM representations of an image.
+
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+
+  - image: An Image object which has completed loading
+
+  If any of these are not present in the data source, the render delegate
+  will throw an error.
+
+  Optional Parameters:
+  ---------------------------
+  If present, these properties will be used.
+
+  - width: Used on the canvas element. If not provided, 0 is used and the canvas
+            will not be visible.
+  - height: Used on the canvas element. If not provided, 0 is used and the canvas
+            will not be visible.
+  - scale: If provided, the image will maintain aspect ratio as specified by this
+          property. One of
+            - SC.SCALE_NONE
+            - SC.FILL
+            - SC.FILL_PROPORTIONALLY
+            - SC.BEST_FIT
+            - SC.BEST_FIT_DOWN_ONLY
+            - percentage {Number}
+          If not provided, SC.FILL will be the default (ie. expected image behaviour)
+  - align: If provided, the image will align itself within its frame.  One of
+            - SC.ALIGN_CENTER
+            - SC.ALIGN_TOP_LEFT
+            - SC.ALIGN_TOP
+            - SC.ALIGN_TOP_RIGHT
+            - SC.ALIGN_RIGHT
+            - SC.ALIGN_BOTTOM_RIGHT
+            - SC.ALIGN_BOTTOM
+            - SC.ALIGN_BOTTOM_LEFT
+            - SC.ALIGN_LEFT
+  - backgroundColor: If provided, the canvas will render a backgroundColor
+*/
+
+SC.BaseTheme.canvasImageRenderDelegate = SC.RenderDelegate.create({
+  name: 'canvasImage',
+
+  /** @private
+    We don't have an element yet, so we do the minimal necessary setup
+    here.
+  */
+  render: function(dataSource, context) {
+    var width = dataSource.get('width') || 0,
+        height = dataSource.get('height') || 0;
+
+    context.attr('width', width);
+    context.attr('height', height);
+  },
+
+  update: function(dataSource, jquery) {
+    var elem = jquery[0],
+        image = dataSource.get('image'),
+        frame = dataSource.get('frame'),
+        backgroundColor = dataSource.get('backgroundColor'),
+        midX = 0, midY = 0,
+        context;
+
+    if (elem && elem.getContext) {
+      elem.height = frame.height;
+      elem.width = frame.width;
+
+      context = elem.getContext('2d');
+
+      context.clearRect(0, 0, frame.width, frame.height);
+
+      if (backgroundColor) {
+        context.fillStyle = backgroundColor;
+        context.fillRect(0, 0, frame.width, frame.height);
+      }
+
+      if (image && image.complete) {
+        this.updateImage(context, image, dataSource);
+      }
+    }
+  },
+
+  updateImage: function(context, image, dataSource) {
+    var frame = dataSource.get('innerFrame');
+    context.drawImage(image, Math.floor(frame.x), Math.floor(frame.y), Math.floor(frame.width), Math.floor(frame.height));
+  }
+
+});

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/container.js

@@ -0,0 +1,18 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('render_delegates/render_delegate');
+
+SC.BaseTheme.containerRenderDelegate = SC.RenderDelegate.create({
+  render: function(dataSource, context) {
+
+  },
+  
+  update: function() {
+
+  }
+});

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/image.js

@@ -0,0 +1,97 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2009 Sprout Systems, Inc. and contributors.
+//            Portions ©2010-2011 Strobe Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('render_delegates/render_delegate');
+
+/**
+  @class
+  Renders and updates DOM representations of an image.
+
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+
+  - image: An Image object which has completed loading
+
+  If any of these are not present in the data source, the render delegate
+  will throw an error.
+
+  Optional Parameters:
+  ---------------------------
+  If present, these properties will be used.
+
+  - imageValue: A String which represents the src or CSS class of the image
+  - displayToolTip: A String which is rendered as a toolTip on the element
+  - type: The type of image being rendered. One of:
+              - SC.IMAGE_TYPE_NONE
+              - SC.IMAGE_TYPE_URL
+              - SC.IMAGE_TYPE_CSS_CLASS
+          If not provided, SC.IMAGE_TYPE_URL is the default
+*/
+
+SC.BaseTheme.imageRenderDelegate = SC.RenderDelegate.create({
+  name: 'image',
+
+  render: function(dataSource, context) {
+    var image = dataSource.get('image'),
+        imageValue = dataSource.get('imageValue'),
+        type = dataSource.get('type') || SC.IMAGE_TYPE_URL,
+        toolTip = dataSource.get('toolTip');
+
+    // Place the img within a div, so that we may scale & offset the img
+    context = context.begin('img');
+    context.attr('src', image.src);
+
+    if (imageValue && type === SC.IMAGE_TYPE_CSS_CLASS) {
+      context.addClass(imageValue);
+      this._last_class = imageValue;
+    }
+
+    if (toolTip) {
+      context.attr('title', toolTip);
+      context.attr('alt', toolTip);
+    }
+
+    // Adjust the layout of the img
+    context.addStyle(this.imageStyles(dataSource));
+
+    context = context.end();
+  },
+
+  update: function(dataSource, jquery) {
+    var image = dataSource.get('image'),
+        imageValue = dataSource.get('imageValue'),
+        toolTip = dataSource.get('toolTip');
+
+    jquery = jquery.find('img');
+    jquery.attr('src', image.src);
+
+    if (imageValue !== this._last_class) jquery.setClass(this._last_class, NO);
+    jquery.addClass(imageValue);
+    this._last_class = imageValue;
+
+    if (toolTip) {
+      jquery.attr('title', toolTip);
+      jquery.attr('alt', toolTip);
+    }
+
+    // Adjust the layout of the img
+    jquery.css(this.imageStyles(dataSource));
+  },
+
+  imageStyles: function(dataSource) {
+    var innerFrame = dataSource.get('innerFrame');
+    return {
+      'position': 'absolute',
+      'left': Math.round(innerFrame.x),
+      'top': Math.round(innerFrame.y),
+      'width': Math.round(innerFrame.width),
+      'height': Math.round(innerFrame.height)
+    };
+  }
+
+});

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/label.js

@@ -0,0 +1,111 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+sc_require('render_delegates/render_delegate');
+
+/**
+  @class
+  Renders and updates DOM representations of a label.
+  
+  Parameters
+  --------------------------
+  Expects these properties on the data source:
+  
+  - title
+  
+  If any of these are not present in the data source, the render delegate
+  will throw an error.
+  
+  Optional Parameters:
+  ---------------------------
+  If present, these properties will be used.
+  
+  - icon: should be either a class name or a URL
+  - hint: allows the label to display a hint value if its title is empty.
+  - escapeHTML: whether the HTML should be escaped to prevent XSS attacks
+    and the like.
+  - textAlign
+  - fontWeight
+  - needsEllipsis: Whether an ellipsis (...) should be added after the title
+    if the title is too long.
+*/
+
+SC.BaseTheme.labelRenderDelegate = SC.RenderDelegate.create({
+  name: 'label',
+  
+  render: function(dataSource, context) {
+    // CONSIDER DEPRECATING THESE PROPERTIES BECAUSE THEY ARE
+    // ANNOYING PAINS IN THE BUTT THAT EVERYONE HATES
+    context.addStyle({
+      'textAlign': dataSource.get('textAlign'),
+      'fontWeight': dataSource.get('fontWeight')
+    });
+    
+    context.setClass('ellipsis', dataSource.get('needsEllipsis') || NO);
+    context.setClass('icon', dataSource.get('icon') || NO);
+    
+    var html = this._htmlForTitleAndIcon(dataSource);
+    context.push(html);
+    
+    // we could use didChangeFor, but in this case, checking the generated
+    // HTML will probably be faster (and definitely be simpler)
+    // because several properties are used.
+    dataSource.get('renderState')._lastHTMLForTitleAndIcon = html;
+  },
+  
+  update: function(dataSource, jquery) {
+    // CONSIDER DEPRECATING THESE PROPERTIES BECAUSE THEY ARE
+    // ANNOYING PAINS IN THE BUTT THAT EVERYONE HATES
+    jquery.css({
+      'textAlign': dataSource.get('textAlign') || null,
+      'fontWeight': dataSource.get('fontWeight') || null
+    });
+    
+    jquery.setClass('ellipsis', dataSource.get('needsEllipsis') || NO);
+    
+    var html = this._htmlForTitleAndIcon(dataSource);
+    if (dataSource.get('renderState')._lastHTMLForTitleAndIcon !== html) {
+      jquery.html(html);
+      dataSource.get('renderState')._lastHTMLForTitleAndIcon = html;
+    }
+  },
+  
+  _htmlForTitleAndIcon: function(dataSource) {
+    var title = dataSource.get('title'),
+        hint = dataSource.get('hint'),
+        escapeHTML = dataSource.get('escapeHTML'),
+        icon = dataSource.get('icon') || '';
+
+    // Escape the title of the button if needed. This prevents potential
+    // XSS attacks.
+    if (title && escapeHTML) {
+      title = SC.RenderContext.escapeHTML(title) ;
+    }
+
+    if (hint && !title) {
+      if (escapeHTML) hint = SC.RenderContext.escapeHTML(hint);
+      title = "<span class='sc-hint'>" + hint + "</span>";
+    }
+
+    if (icon) {
+      // If the icon property is the path to an image, create an image tag
+      // that points to that URL.
+      if (icon.indexOf('/') >= 0) {
+        icon = '<img src="'+icon+'" alt="" class="icon" />';
+
+      // Otherwise, the icon property is a class name that should be added
+      // to the image tag. Display a blank image so that the user can add
+      // background image using CSS.
+      } else {
+        icon = '<img src="'+SC.BLANK_IMAGE_URL+'" alt="" class="icon '+icon+'" />';
+      }
+    }
+    
+    return icon + title;
+  }
+  
+});

data/lib/frameworks/sproutcore/frameworks/foundation/render_delegates/render_delegate.js

@@ -0,0 +1,17 @@
+// ==========================================================================
+// Project:   SproutCore - JavaScript Application Framework
+// Copyright: ©2006-2011 Strobe Inc. and contributors.
+//            Portions ©2008-2009 Apple Inc. All rights reserved.
+// License:   Licensed under MIT license (see license.js)
+// ==========================================================================
+
+/**
+  @class
+  Base class for all render delegates.
+  
+  You can mix helpers into this base class; they will be available to all
+  render delegates.
+*/
+SC.RenderDelegate = SC.Object.extend({
+  
+});

data/lib/frameworks/sproutcore/frameworks/foundation/system/benchmark.js

@@ -4,37 +4,37 @@
 //            Portions ©2008-2010 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
-/*globals $A*/
+/*globals $A */
 
 sc_require('core') ;
- 
+
 /** @namespace
 
   This bit of meta-programming magic can install a benchmark handler on any
   object method.  When a benchmark is installed, the time required to execute
-  the method will be printed to the console log everytime the method is 
+  the method will be printed to the console log everytime the method is
   called.
 
   This class can be used to implement benchmarking.  To use this object, just
-  call start() with a key name and end() with a keyname.  The benchmark will 
-  be logged.  If you set verbose = true, then benchmark will log everytime it 
+  call start() with a key name and end() with a keyname.  The benchmark will
+  be logged.  If you set verbose = true, then benchmark will log everytime it
   saves a bench.  Otherwise, it just keeps stats.  You can get the stats by
   calling report().
 
   Benchmark does not require anything other than the date.js class.  It also
   does not rely on SC.Object so that you can benchmark code in that area as
   well.
-  
+
   The benchmark has three types of reports.
-  
-  report(): Returns an abbreviated list with just the durations of the bench. 
+
+  report(): Returns an abbreviated list with just the durations of the bench.
             Also, it averages multiple runs. Everything is reported on the top
             level only.
-            
+
   timelineReport(): Returns an list of benchmarks and sub-benchmarks. If the
                     the globalStartTime is set, then it will show relative
                     time from that time.
-  
+
   timelineChart(): Displays a chart of all the benchmarks (not sub-benchmarks)
                    relative to the first time capture or to the globalStartTime.
                    Hide this by calling hideChart()
@@ -42,65 +42,115 @@ sc_require('core') ;
 SC.Benchmark = {
 
   /**
-    If true, then benchmarks will be logged to the console as they are 
+    If true, then benchmarks will be logged to the console as they are
     recorded.
-  
+
     @property {Boolean}
   */
   verbose: NO,
-  
+
   /**
     If false, benchmarking will be disabled.  You might want to disable this
     during production to maximize performance.
-  
+
     @property {Boolean}
   */
   enabled: YES,
-  
-  /** 
+
+  /**
+    Events are a way of assigning specific, individual times to names, rather than
+    durations of time. A benchmark event can only occur once—if it occurs again, it
+    will overwrite the old event.
+
+    The purpose of events is different than the purpose for normal benchmarks. Normal
+    benchmarks may be used to benchmark a specific process, and may do so repeatedly;
+    events, conversely, are usually used to benchmark things like startup time, and
+    occur only once. For instance, an 'event' is registered when the document is ready.
+
+    Events are kept as a hash of names to timestamps. To add an event, just set it:
+
+        SC.Benchmark.events['myEventName'] = new Date().getTime();
+
+        // Or, more conveniently:
+        SC.Benchmark.addEvent('myEventName', [optional time]);
+
+    On a timeline chart, events are usually represented as lines rather than bars. However,
+    if you add eventNameStart and eventNameEnd, they will be automatically added as standard
+    benchmarks.
+
+    This is useful when adding preload events to SC.benchmarkPreloadEvents; as SC.Benchmark
+    does not yet exist, you cannot call .start() and .end(), but adding the items to
+    SC.benchmarkPreloadEvents will ensure they are included.
+  */
+  events: {},
+
+  /**
      This hash stores collected stats.  It contains key value pairs.  The value
      will be a hash with the following properties:
-   
+
     * * *runs*: the number of times this stat has run
     * * *amt*: the total time consumed by this (divide by runs to get avg)
     * * *name*: an optional longer name you assigned to the stat key.  Set this  using name().
     * * *_starts*: this array is used internally.
     * * *_times*: this array is used internally.
-    
+
     @property {Object}
   */
   stats: {},
 
   /**
     If set, one can tell when the benchmark is started relatively to the global start time.
-  
+
+    This property is set to a default automatically (from HTML5 NavigationTiming if possible,
+    otherwise the SC bootstrap).
+
     @property {Number}
   */
   globalStartTime: null,
 
-   /**
+  /**
+    Adds an 'event' to the events hash.
+
+    Unlike normal benchmarks, recorded with start/end and that represent a block of time,
+    events represent a single instance in time. Further, unlike normal benchmarks, which
+    may be run more than once for the same benchmark name, only one instance in time
+    will be recorded for any event name.
+
+    @param {String} name
+      A name that identifies the event. If addEvent is called again with the same name,
+      the previous call's timestamp will be overwritten.
+
+    @param {Timestamp} time
+      Optional. The timestamp to record for the event.
+  */
+  addEvent: function(name, time) {
+    if (!time) time = new Date().getTime();
+    this.events[name] = time;
+  },
+
+  /**
     Call this method at the start of whatever you want to collect.
-    If a parentKey is passed, then you will attach the stat to the parent, 
-    otherwise it will be on the top level. If topLevelOnly is passed, then 
-    recursive calls to the start will be ignored and only the top level call 
+    If a parentKey is passed, then you will attach the stat to the parent,
+    otherwise it will be on the top level. If topLevelOnly is passed, then
+    recursive calls to the start will be ignored and only the top level call
     will be benchmarked.
-    
-    @param {String} key 
-      A unique key that identifies this benchmark.  All calls to start/end 
+
+    @param {String} key
+      A unique key that identifies this benchmark.  All calls to start/end
       with the same key will be groups together.
-    
+
     @param {String} parentKey
-      A unique key that identifies the parent benchmark.  All calls to 
+      A unique key that identifies the parent benchmark.  All calls to
       start/end with the same key will be groups together.
-    
+
     @param {Boolean} topLevelOnly
-      If true then recursive calls to this method with the same key will be 
-      ignored.  
-    
+      If true then recursive calls to this method with the same key will be
+      ignored.
+
     @param {Number} time
-      Only pass if you want to explicitly set the start time.  Otherwise the 
+      Only pass if you want to explicitly set the start time.  Otherwise the
       start time is now.
-      
+
     @returns {String} the passed key
   */
   start: function(key, parentKey, time, topLevelOnly) {
@@ -110,7 +160,7 @@ SC.Benchmark = {
 
     if (parentKey) stat = this._subStatFor(key, parentKey) ;
     else stat = this._statFor(key) ;
-    
+
     if (topLevelOnly && stat._starts.length > 0) stat._starts.push('ignore');
     else stat._starts.push(start) ;
 
@@ -121,15 +171,15 @@ SC.Benchmark = {
   /**
     Call this method at the end of whatever you want to collect.  This will
     save the collected benchmark.
-    
+
     @param {String} key
       The benchmark key you used when you called start()
-    
+
     @param {String} parentKey
       The benchmark parent key you used when you called start()
-    
+
     @param {Number} time
-      Only pass if you want to explicitly set the end time.  Otherwise start 
+      Only pass if you want to explicitly set the end time.  Otherwise start
       time is now.
   */
   end: function(key, parentKey, time) {
@@ -150,8 +200,8 @@ SC.Benchmark = {
     }
 
     // top level only.
-    if (start == 'ignore') return ; 
-    
+    if (start == 'ignore') return ;
+
     var end = (time || Date.now()) ;
     var dur = end - start;
 
@@ -160,11 +210,11 @@ SC.Benchmark = {
 
     stat.amt += dur ;
     stat.runs++ ;
-    
+
     if (this.verbose) this.log(key) ;
   },
-  
-  /* 
+
+  /*
     Set the inital global start time.
   */
   setGlobalStartTime: function(time)
@@ -173,34 +223,34 @@ SC.Benchmark = {
   },
 
   /**
-    This is a simple way to benchmark a function.  The function will be 
+    This is a simple way to benchmark a function.  The function will be
     run with the name you provide the number of times you indicate.  Only the
     function is a required param.
-  */  
+  */
   bench: function(func, key, reps) {
     if (!key) key = "bench%@".fmt(this._benchCount++) ;
     if (!reps) reps = 1 ;
     var ret ;
-    
+
     while(--reps >= 0) {
       var timeKey = SC.Benchmark.start(key) ;
       ret = func();
-      SC.Benchmark.end(timeKey) ; 
+      SC.Benchmark.end(timeKey) ;
     }
-    
+
     return ret ;
   },
-  
-  /**  
+
+  /**
     This bit of metaprogramming magic install a wrapper around a method and
     benchmark it whenever it is run.
-  */  
+  */
   install: function(object,method, topLevelOnly) {
-    
+
     // vae the original method.
     object['b__' + method] = object[method] ;
     var __func = object['b__' + method];
-    
+
     // replace with this helper.
     object[method] = function() {
       var key = '%@(%@)'.fmt(method, $A(arguments).join(', ')) ;
@@ -210,18 +260,18 @@ SC.Benchmark = {
       return ret ;
     } ;
   },
-  
+
   /**
     Restore the original method, deactivating the benchmark.
-  
+
     @param {object} object the object to change
     @param {string} method the method name as a string.
-  
-  */  
+
+  */
   restore: function(object,method) {
     object[method] = object['b__' + method] ;
   },
-  
+
   /**
     This method will return a string containing a report of the stats
     collected so far.  If you pass a key, only the stats for that key will
@@ -242,7 +292,7 @@ SC.Benchmark = {
 
     @param {string} application name.
   */
-  timelineReport: function(appName) 
+  timelineReport: function(appName)
   {
     appName = (appName) ? 'SproutCore Application' : appName;
     var ret = [appName, 'User-Agent: %@'.fmt(navigator.userAgent), 'Report Generated: %@ (%@)'.fmt(new Date().toString(), Date.now()), ''] ;
@@ -263,112 +313,199 @@ SC.Benchmark = {
   },
 
   /**
-    Generate a human readable benchmark chart. Pass in appName if you desire.
+    Returns a hash containing the HTML representing the timeline chart, and
+    various metrics and information about the chart:
+
+        html, totalWidth, totalHeight, totalCapturedTime, pointsCaptured
 
   */
-  timelineChart: function(appName) {
-    var i=0;
-    // Hide the chart if there is an existing one.
-    this.hideChart();
-    
+  getTimelineChartContent: function() {
     // Compile the data.
     var chart = this._compileChartData(false);
     var chartLen = chart.length;
-    
+
     // Return if there is nothing to draw.
     if(chartLen === 0) return;
-    
+
     // Get the global start of the graph.
     var gStart = this.globalStartTime ? this.globalStartTime : chart[0][1];
     var maxDur = chart[chartLen-1][2]-gStart;
-    var maxHeight = 50+chartLen*30;
+    var maxHeight = 25+chartLen*30;
     var incr = Math.ceil(maxDur/200)+1;
     var maxWidth = incr*50;
-    
-    // Create the basic graph element.
-    var graph = document.createElement('div');
-    graph.className = 'sc-benchmark-graph';
-    document.body.appendChild(graph);
-
-    // Set the title.
-    var title = document.createElement('div');
-    title.innerHTML = ((appName) ? appName : 'SproutCore Application') + (' - Total Captured Time: ' + maxDur +' ms - Points Captured: ' + chartLen) + ' [<a href="javascript:SC.Benchmark.hideChart();">Hide Chart</a>]';
-    title.className = 'sc-benchmark-title'; 
-    graph.appendChild(title);
-
-
-    var topBox = document.createElement('div');
-    topBox.className = 'sc-benchmark-top'; 
-    topBox.style.width = maxWidth + 'px';
-    graph.appendChild(topBox);
-
-    // Draw the tick marks.
-    for(i=0;i<incr; i++)
-    {
-      var tick = document.createElement('div');
-      tick.className = 'sc-benchmark-tick';
-      tick.style.left = (i*50)+'px';
-      tick.style.height = maxHeight+'px';
-      var tickLabel = document.createElement('div');
-      tickLabel.className = 'sc-benchmark-tick-label';
-      tickLabel.style.left = (i*50)+'px';
-      tickLabel.innerHTML = i*200+" ms";
-      graph.appendChild(tick);
-      graph.appendChild(tickLabel);
+    var leftPadding = 10, rightPadding = 300;
+
+
+    var str = "<div class = 'sc-benchmark-timeline-chart' style = 'position:relative;'>";
+    str += "<div class = 'sc-benchmark-top'></div>";
+
+    // add tick marks
+    for (var i = 0; i < incr; i++) {
+      str += "<div class = 'sc-benchmark-tick' style = '";
+      str += "left: " + (leftPadding + i * 50) + "px; ";
+      str += "height: " + maxHeight + "px;";
+      str += "'></div>";
+
+      str += "<div class = 'sc-benchmark-tick-label' style = '";
+      str += "left: " + (leftPadding + i * 50) + "px; ";
+      str += "'>" + (i * 200) + "ms</div>";
     }
-    
-    // For each item in the chart, print it out on the screen.
-    for(i=0;i<chartLen; i++)
-    {
-    	var row = document.createElement('div');
-    	row.style.top = (75+(i*30))+'px';
-    	row.style.width = maxWidth+'px';
-    	row.className = (i%2===0) ? 'sc-benchmark-row even' : 'sc-benchmark-row';
-    	graph.appendChild(row);
+
+    // print each chart item
+    for (i = 0; i < chartLen; i++) {
+      str += "<div class = 'sc-benchmark-row ";
+      str += (i % 2 === 0) ? 'even' : 'odd';
+      str += "' style = '";
+      str += "top: " + (50 + (i * 30)) + "px; ";
+      str += "'></div>";
 
       var div = document.createElement('div');
       var start = chart[i][1];
       var end = chart[i][2];
       var duration = chart[i][3];
-      
-      div.innerHTML = '&nbsp;' + (chart[i][0] + " <span class='sc-benchmark-emphasis'>" + duration + 'ms</span>');
-      
-      div.className = 'sc-benchmark-bar';
-      div.style.cssText = 'left:'+ (((start-gStart)/4))+'px; width: '+((duration/4))+
-                          'px; top: '+(53+(i*30))+'px;';
-      div.title = "start: " + (start-gStart) + " ms, end: " + (end-gStart) + ' ms, duration: ' + duration + ' ms';
-      graph.appendChild(div);
+
+
+      str += "<div class = 'sc-benchmark-bar' style = '";
+      str += 'left:'+ (leftPadding + ((start-gStart)/4))+'px; width: '+((duration/4)) + 'px;';
+      str += 'top: '+(28+(i*30))+'px;';
+
+      str += "' title = 'start: " + (start-gStart) + " ms, end: " + (end-gStart) + ' ms, duration: ' + duration + " ms'";
+      str += ">";
+      str += '&nbsp;' + chart[i][0] + " <span class='sc-benchmark-emphasis'>";
+      str += duration + "ms (start: " + (start - gStart) + "ms)";
+      str += "</span>";
+
+      str += "</div>";
     }
 
-    // Save the graph.
-    this._graph = graph;
+    // add the events
+    var events = this.events, idx = 0;
+    for (i in events) {
+      var t = events[i] - gStart;
+      str += "<div class = 'sc-benchmark-event idx" + (idx % 10) + "' style = '";
+      str += "left: " + (leftPadding + t / 4) + "px; height: " + maxHeight + "px; top: 20px;";
+      str += "' title = '" + i + ": " + t + "'></div>";
+      idx++;
+    }
+
+    str += "</div>";
+
+    return {
+      html: str,
+      totalCapturedTime: maxDur,
+      pointsCaptured: chartLen,
+      width: maxWidth + leftPadding + rightPadding,
+      height: maxHeight
+    };
+  },
+
+  /**
+    Returns a view with the timeline chart. The view has a 'reload' method to
+    refresh its data.
+  */
+  getTimelineChartView: function() {
+    var view = SC.ScrollView.create({
+      contentView: SC.StaticContentView.extend({
+
+      }),
+
+      reload: function() {
+        var content = SC.Benchmark.getTimelineChartContent();
+        this.contentView.set('content', content.html);
+        this.contentView.adjust({
+          width: content.width,
+          height: content.height
+        });
+
+        this.chartContent = content;
+
+        SC.RunLoop.invokeLater(SC.Benchmark, function() {
+          this.contentView.notifyPropertyChange('frame');
+        });
+      }
+    });
+
+    view.reload();
+
+    return view;
   },
-  
+
+  /**
+    Generate a human readable benchmark chart. Pass in appName if you desire.
+  */
+  timelineChart: function(appName) {
+    SC.RunLoop.begin();
+
+    var i=0;
+    // Hide the chart if there is an existing one.
+    this.hideChart();
+
+    // Compile the data.
+    var chartView = this.getTimelineChartView();
+    var chartLen = chartView.chartContent.pointsCaptured,
+        chartCapturedTime = chartView.chartContent.totalCapturedTime;
+
+    // Get the global start of the graph.
+
+    this._benchmarkChart = SC.Pane.create({
+      classNames: "sc-benchmark-pane".w(),
+      layout: { left: 20, right: 20, bottom: 20, top: 20 },
+      childViews: "title exit".w(),
+      exit: SC.ButtonView.extend({
+        layout: { right: 20, top: 20, width: 100, height: 30 },
+        title: "Hide Chart",
+        target: this,
+        action: "hideChart"
+      }),
+
+      title: SC.LabelView.extend({
+        classNames: 'sc-benchmark-title'.w(),
+        layout: { left: 20, top: 23, right: 200, height: 30 },
+        value: ((appName) ? appName : 'SproutCore Application') + (' - Total Captured Time: ' + chartCapturedTime +' ms - Points Captured: ' + chartLen),
+        fontWeight: 'bold'
+      })
+
+    }).append();
+
+    chartView.set('layout', { left: 20, top: 60, bottom: 20, right: 20 });
+    this._benchmarkChart.appendChild(chartView);
+
+    SC.RunLoop.end();
+  },
+
   /*
     Hide chart.
-    
+
   */
   hideChart: function()
   {
-    if(this._graph) {
-      try{ 
-        document.body.removeChild(this._graph);
-      }catch(e){}
+    if(this._benchmarkChart) {
+      this._benchmarkChart.remove();
+      this._benchmarkChart = null;
     }
+
+    return YES;
+  },
+
+  /**
+    Because we show a pane to display the chart...
+  */
+  tryToPerform: function(action, sender) {
+    if (this[action]) return this[action](sender);
+    return NO;
   },
-  
 
   /**
     This method is just like report() except that it will log the results to
     the console.
-  */  
+  */
   log: function(key) {
     // log each line to make this easier to read on an iPad
     var lines = this.report(key).split('\n'),
         len   = lines.length, idx;
     for(idx=0;idx<len;idx++) console.log(lines[idx]);
   },
-  
+
   /**
     This will activate profiling if you have Firebug installed.  Otherwise
     does nothing.
@@ -377,21 +514,87 @@ SC.Benchmark = {
     if (!this.enabled) return ;
     if (console && console.profile) console.profile(key) ;
   },
-  
+
   endProfile: function(key) {
     if (!this.enabled) return ;
     if (console && console.profileEnd) console.profileEnd(key) ;
   },
-  
+
   // PRIVATE METHODS
 
   // @private
-  
+
+
+  /**
+    Loads data from both the browser's own event hash and SC's pre-load event hash.
+  */
+  loadPreloadEvents: function() {
+    var preloadEvents = SC.benchmarkPreloadEvents, events = [], idx, len, evt;
+
+    // the browsers may have their own event hash. Ours uses the same format, so
+    // all that we need to do is mixin the browser's to our own.
+    if (typeof webkitPerformnce !== 'undefined') SC.mixin(preloadEvents, webkitPerformane.timing);
+
+    // we will attempt to find when the loading started and use that as our
+    // global start time, but only do so if the global start time is not already set.
+    if (!this.globalStartTime) {
+      // the potential events representing start time can be either from the browser
+      // or our own recordings. We prefer the browser.
+      var globalStartEvents = 'navigation navigationStart headStart'.w();
+      len = globalStartEvents.length;
+
+      for (idx = 0; idx < len; idx++) {
+        if (preloadEvents[globalStartEvents[idx]]) {
+          this.globalStartTime = preloadEvents[globalStartEvents[idx]];
+          break;
+        }
+      }
+    }
+
+    // the JavaScript start time will be one recorded by us
+    // we record headStart in bootstrap.
+    this.javascriptStartTime = preloadEvents['headStart'];
+
+    // finally, mix in the events to our own events hash
+    SC.mixin(this.events, preloadEvents);
+
+    this._hasLoadedPreloadEvents = true;
+  },
+
+  /**
+    Some events represent a beginning and end. While this is not common for events
+    that take place after the app loads (as they can just use SC.Benchmark.start/end),
+    SC.Benchmark.start/end is not available before load—as such, code will add
+    *Start and *End events to the event hash.
+
+    This method iterates over the event hash and removes those items that represent
+    starts and ends, calling .start/.end for them.
+  */
+  _loadBenchmarksFromEvents: function() {
+    if (!this._hasLoadedPreloadEvents) this.loadPreloadEvents();
+
+    var events = this.events;
+    for (var i in events) {
+      if (i.substr(-3) !== 'End') continue;
+
+      var stem = i.substr(0, i.length - 3);
+      if (!events[stem + 'Start']) continue;
+
+      SC.Benchmark.start(stem, undefined, events[stem + 'Start']);
+      SC.Benchmark.end(stem, undefined, events[stem + 'End']);
+
+      delete events[stem + 'Start'];
+      delete events[stem + 'End'];
+    }
+  },
+
   // Generates, sorts, and returns the array of all the data that has been captured.
   _compileChartData: function(showSub)
   {
+    this._loadBenchmarksFromEvents();
+
     var chart = [], dispKey;
-    for(var key in this.stats) 
+    for(var key in this.stats)
     {
       var stat = this.stats[key];
       for(var i=0; i<stat._times.length; i++)
@@ -402,25 +605,25 @@ SC.Benchmark = {
         if(showSub)
         {
           var subStats = st._subStats;
-          for(var k in subStats) 
+          for(var k in subStats)
           {
-           
+
             var subStat = subStats[k];
             for(var j=0; j<subStat._times.length; j++)
             {
               var s = subStat._times[j];
               dispKey = (subStat._times.length > 1) ? (j+1)+' - '+k : k;
               chart.push([dispKey, s.start, s.end, s.dur, true]);
-         
+
             }
           }
         }
       }
     }
-    
+
     chart.sort(function(a,b)
     {
-      if(a[1] < b[1]) 
+      if(a[1] < b[1])
       {
         return -1;
       }
@@ -435,41 +638,42 @@ SC.Benchmark = {
 
     return chart;
   },
-  
+
   // Generate the traditional report show multiple runs averaged.
   _genReport: function(key) {
     var stat = this._statFor(key) ;
     var avg = (stat.runs > 0) ? (Math.floor(stat.amt * 1000 / stat.runs) / 1000) : 0 ;
-     
-    return 'BENCH %@ msec: %@ (%@x)'.fmt(avg, (stat.name || key), stat.runs) ;  
+    var last = stat._times[stat._times.length - 1];
+
+    return 'BENCH %@ msec: %@ (%@x); latest: %@'.fmt(avg, (stat.name || key), stat.runs, last.end - last.start);
   },
 
   // Generate the report in the form of at time line. This returns the parent.
-  _timelineGenReport: function(val) 
+  _timelineGenReport: function(val)
   {
     if(this.globalStartTime)
     {
-      return 'BENCH start: %@ msec, duration: %@ msec,  %@'.fmt((val[1]-this.globalStartTime), val[3], val[0]) ;  
-    } 
+      return 'BENCH start: %@ msec, duration: %@ msec,  %@'.fmt((val[1]-this.globalStartTime), val[3], val[0]) ;
+    }
     else
     {
-      return 'BENCH duration: %@ msec, %@'.fmt( val[3],  val[0]) ;  
+      return 'BENCH duration: %@ msec, %@'.fmt( val[3],  val[0]) ;
     }
   },
-  
+
   // Generate the report in the form of at time line. This returns the children.
-  _timelineGenSubReport: function(val) 
+  _timelineGenSubReport: function(val)
   {
     if(this.globalStartTime)
     {
-      return '   CHECKPOINT BENCH start: %@ msec, duration: %@ msec,  %@'.fmt((val[1]-this.globalStartTime), val[3], val[0]) ;  
-    } 
+      return '   CHECKPOINT BENCH start: %@ msec, duration: %@ msec,  %@'.fmt((val[1]-this.globalStartTime), val[3], val[0]) ;
+    }
     else
     {
-      return '   CHECKPOINT BENCH duration: %@ msec, %@'.fmt( val[3], val[0]) ;  
+      return '   CHECKPOINT BENCH duration: %@ msec, %@'.fmt( val[3], val[0]) ;
     }
   },
-  
+
   // returns a stats hash for the named key and parent key.  If the hash does not exist yet,
   // creates it.
   _subStatFor: function(key, parentKey) {
@@ -479,7 +683,7 @@ SC.Benchmark = {
     var ret = parentSubStats[key] ;
     if (!ret) {
       parentSubStats[key] = {
-        runs: 0, amt: 0, name: key, _starts: [], _times: []      
+        runs: 0, amt: 0, name: key, _starts: [], _times: []
       };
       ret = parentSubStats[key];
     }
@@ -492,23 +696,23 @@ SC.Benchmark = {
     var ret = this.stats[key] ;
     if (!ret) {
       ret = this.stats[key] = {
-        runs: 0, amt: 0, name: key, _starts: [], _times: []      
+        runs: 0, amt: 0, name: key, _starts: [], _times: []
       };
       ret = this.stats[key];
     }
     return ret ;
   },
-  
+
   reset: function() { this.stats = {} ; },
-  
+
   // This is private, but it is used in some places, so we are keeping this for
   // compatibility.
   _bench: function(func, name) {
     SC.Benchmark.bench(func, name, 1) ;
   },
-  
+
   _benchCount: 1
-  
+
 } ;
 
 SC.Benchmark = SC.Benchmark;