addresses #438 and #437, adds prettyprint optimization

src/Whoops/Resources/css/whoops.base.css

@@ -205,6 +205,8 @@ header {
     }
 
     .code-block {
+      max-height: 345px;
+      overflow: hidden;
       padding: 10px;
       margin: 0;
       border-radius: 6px;
@@ -219,8 +221,6 @@ header {
     .linenums {
       margin: 0;
       margin-left: 10px;
-      max-height: 345px;
-      overflow: hidden;
     }
 
     .frame-comments {
@@ -338,16 +338,16 @@ pre .xsl, code .xsl { color: #d0a0d0; }  /* xslt tag */
 pre .atn, code .atn { color: #ef7c61; font-weight: normal;} /* html/xml attribute name */
 pre .atv, code .atv { color: #bcd42a; }  /* html/xml attribute value  */
 pre .dec, code .dec { color: #606; }  /* decimal  */
-pre.prettyprint, code.prettyprint, .frame-args.prettyprint, .frame-args.prettyprint samp {
+pre.code-block, code.code-block, .frame-args.code-block, .frame-args.code-block samp {
   font-family: "Inconsolata", "Fira Mono", "Source Code Pro", Monaco, Consolas, "Lucida Console", monospace;
   background: #333;
   color: #e9e4e5;
 }
-  pre.prettyprint {
+  pre.code-block {
     white-space: pre-wrap;
   }
 
-  pre.prettyprint a, code.prettyprint a {
+  pre.code-block a, code.code-block a {
     text-decoration:none;
   }
 

src/Whoops/Resources/js/whoops.base.js

@@ -1,6 +1,5 @@
 Zepto(function($) {
 
-
   // a jQuery.getScript() equivalent to asyncronously load javascript files
   // credits to http://stackoverflow.com/a/8812950/1597388
   var getScript = function(src, func) {
@@ -13,11 +12,6 @@ Zepto(function($) {
     document.getElementsByTagName('head')[0].appendChild( script );
   };
 
-  // load prettify asyncronously to speedup page rendering
-  getScript('//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js', function() {
-    prettyPrint();
-  });
-
   var $frameContainer = $('.frames-container');
   var $container      = $('.details-container');
   var $activeLine     = $frameContainer.find('.frame.active');
@@ -25,29 +19,69 @@ Zepto(function($) {
   var $ajaxEditors    = $('.editor-link[data-ajax]');
   var headerHeight    = $('header').height();
 
+  // load prettify asyncronously to speed up page rendering
+  getScript('//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js', function () {
+    renderCurrentCodeblock();
+  });
+
+  /*
+   * add prettyprint classes to our current active codeblock
+   * run prettyPrint() to highlight the active code
+   * scroll to the line when prettyprint is done
+   * highlight the current line
+   */
+  var renderCurrentCodeblock = function(id) {
+
+    // remove previous codeblocks so we only render the active one
+    $('.code-block').removeClass('prettyprint');
+
+    // pass the id in when we can for speed
+    if (typeof(id) == 'undefined' || typeof(id) == 'object') {
+      var id = /frame\-line\-([\d]*)/.exec($activeLine.attr('id'))[1];
+    }
+
+    $('#frame-code-linenums-' + id).addClass('prettyprint');
+    $('#frame-code-args-' + id).addClass('prettyprint');
+
+    prettyPrint(highlightCurrentLine);
+
+  }
+
+  /*
+   * Highlight the active and neighboring lines for the current frame
+   * Adjust the offset to make sure that line is veritcally centered
+   */
+
   var highlightCurrentLine = function() {
-    // Highlight the active and neighboring lines for this frame:
     var activeLineNumber = +($activeLine.find('.frame-line').text());
     var $lines           = $activeFrame.find('.linenums li');
     var firstLine        = +($lines.first().val());
 
+    var $offset = $($lines[activeLineNumber - firstLine - 10]);
+    if ($offset.length > 0) {
+      $offset[0].scrollIntoView();
+    }
+
     $($lines[activeLineNumber - firstLine - 1]).addClass('current');
     $($lines[activeLineNumber - firstLine]).addClass('current active');
     $($lines[activeLineNumber - firstLine + 1]).addClass('current');
+
+    $container.scrollTop(0);
+
   }
 
-  // Highlight the active for the first frame:
-  highlightCurrentLine();
-  setTimeout(function() {
-    scrollToLine();
-  }, 500);
+  /*
+   * click handler for loading codeblocks 
+   */
 
   $frameContainer.on('click', '.frame', function() {
+
     var $this  = $(this);
     var id     = /frame\-line\-([\d]*)/.exec($this.attr('id'))[1];
     var $codeFrame = $('#frame-code-' + id);
 
     if ($codeFrame) {
+
       $activeLine.removeClass('active');
       $activeFrame.removeClass('active');
 
@@ -57,26 +91,12 @@ Zepto(function($) {
       $activeLine  = $this;
       $activeFrame = $codeFrame;
 
-      highlightCurrentLine();
-
-      scrollToLine();
+      renderCurrentCodeblock(id);
 
     }
 
   });
 
-  // Scroll to the active
-  function scrollToLine() {
-
-    var activeLineNumber = +($activeLine.find('.frame-line').text());
-    var id     = /frame\-line\-([\d]*)/.exec($activeLine.attr('id'))[1];
-
-    $line = $('#frame-code-' + id + ' .linenums li:nth-child(' + (activeLineNumber-10) + ')');
-    $line[0].scrollIntoView({block: 'end', behavior: 'smooth'});
-    $container.scrollTop(0);
-
-  }
-
   var clipboard = new Clipboard('.clipboard');
   var showTooltip = function(elem, msg) {
     elem.setAttribute('class', 'clipboard tooltipped tooltipped-s');

src/Whoops/Resources/views/frame_code.html.php

@@ -21,8 +21,7 @@
           if ($line !== null):
 
           // the $line is 1-indexed, we nab -1 where needed to account for this
-          //$range = $frame->getFileLines($line - 10, 20);
-          $range = $frame->getFileLines(0);
+          $range = $frame->getFileLines($line - 20, 40);
 
           // getFileLines can return null if there is no source code
           if ($range):
@@ -30,21 +29,7 @@
             $start = key($range) + 1;
             $code  = join("\n", $range);
         ?>
-            <style>
-             #frame-code-<?=$i?> .linenums li:nth-child(<?= $line-1 ?>) {
-                 background-color: rgba(255, 100, 100, .07); 
-                 padding: 2px;
-              }
-             #frame-code-<?=$i?> .linenums li:nth-child(<?= $line ?>) {
-                 background-color: rgba(255, 100, 100, .17); 
-                 padding: 2px;
-              }
-             #frame-code-<?=$i?> .linenums li:nth-child(<?= $line+1 ?>) {
-                 background-color: rgba(255, 100, 100, .07); 
-                 padding: 2px;
-              }
-            </style>
-            <pre id="frame-code-linenums-<?=$i?>" class="code-block prettyprint linenums:<?php echo $start ?>"><?php echo $tpl->escape($code) ?></pre>
+            <pre id="frame-code-linenums-<?=$i?>" class="code-block linenums:<?php echo $start ?>"><?php echo $tpl->escape($code) ?></pre>
 
           <?php endif ?>
         <?php endif ?>
@@ -54,7 +39,7 @@
           <div class="frame-file">
               Arguments
           </div>
-          <div class="code-block frame-args prettyprint">
+          <div id="frame-code-args-<?=$i?>" class="code-block frame-args">
               <?php echo $frameArgs; ?>
           </div>
         <?php endif ?>