Add stack frame toggling for vendor frames.

src/Template/Element/exception_stack_trace.ctp

@@ -43,7 +43,7 @@ foreach ($error->getTrace() as $i => $stack):
 ?>
 	<div id="stack-frame-<?= $i ?>" style="display:none;" class="stack-details">
 		<span class="stack-frame-file"><?= h($file) ?></span>
-		<a href="#" class="stack-frame-args" data-target="stack-args-<?= $i ?>">toggle arguments</a>
+		<a href="#" class="toggle-link stack-frame-args" data-target="stack-args-<?= $i ?>">toggle arguments</a>
 
 		<table class="code-excerpt" cellspacing="0" cellpadding="0">
 		<?php $lineno = isset($stack['line']) ? $stack['line'] - 4 : 0 ?>

src/Template/Element/exception_stack_trace_nav.ctp

@@ -14,9 +14,12 @@
  */
 use Cake\Error\Debugger;
 ?>
+<a href="#" class="toggle-link toggle-vendor-frames">toggle vendor stack frames</a>
+
 <ul class="stack-trace">
 <?php foreach ($error->getTrace() as $i => $stack): ?>
-	<li class="stack-frame">
+	<?php $class = (isset($stack['file']) && strpos(APP, $stack['file']) === false) ? 'vendor-frame' : 'app-frame'; ?>
+	<li class="stack-frame <?= $class ?>">
 	<?php if (isset($stack['file']) && isset($stack['line'])): ?>
 		<a href="#" data-target="stack-frame-<?= $i ?>">
 			<?php if (!isset($stack['class'])): ?>

src/Template/Layout/dev_error.ctp

@@ -83,16 +83,16 @@ function each(els, cb) {
 }
 
 window.addEventListener('load', function() {
-	bindEvent('.stack-frame-args', 'click', function() {
+	bindEvent('.stack-frame-args', 'click', function(event) {
 		var target = this.dataset['target'];
 		var el = document.getElementById(target);
 		toggleElement(el);
-		return false;
+		event.preventDefault();
 	});
 
 	var details = document.querySelectorAll('.stack-details');
 	var frames = document.querySelectorAll('.stack-frame');
-	bindEvent('.stack-frame a', 'click', function() {
+	bindEvent('.stack-frame a', 'click', function(event) {
 		each(frames, function(el) {
 			el.classList.remove('active');
 		});
@@ -104,7 +104,16 @@ window.addEventListener('load', function() {
 
 		var target = document.getElementById(this.dataset['target']);
 		toggleElement(target);
-		return false;
+		event.preventDefault();
+	});
+
+	bindEvent('.toggle-vendor-frames', 'click', function(event) {
+		each(frames, function(el) {
+			if (el.classList.contains('vendor-frame')) {
+				toggleElement(el);
+			}
+		});
+		event.preventDefault();
 	});
 });
 </script>
@@ -113,12 +122,13 @@ window.addEventListener('load', function() {
 body {
 	font: 14px helvetica, arial, sans-serif;
 	color: #222;
-	background-color: #fff;
+	background-color: #f8f8f8;
 	padding:0;
 	margin: 0;
 	max-height: 100%;
 }
 
+.code-dump,
 pre {
 	background: #fefefe;
 	border: 1px solid #ddd;
@@ -231,6 +241,19 @@ header {
 	float: right;
 }
 
+.toggle-link {
+	color: #1798A5;
+	text-decoration: none;
+}
+.toggle-link:hover {
+	text-decoration: underline;
+}
+.toggle-vendor-frames {
+	padding: 5px;
+	display: block;
+	text-align: center;
+}
+
 .code-excerpt {
 	width: 100%;
 	margin: 5px 0;