Merge pull request #273 from staabm/help

added inline-help for PrettyPage Handler

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

@@ -335,3 +335,89 @@ pre.prettyprint, code.prettyprint {
 	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAcCAYAAACdz7SqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gUUByMD0ZSoGQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAACAklEQVRIx72Wv0sbYRjHP29y1VoXxR9UskjpXTaHoBUcpGgKkS5OZ1Ec/QeKOIhalEghoOCqQsGhFAWbISKYyaFDS1BKKW0TCYrQSdElXSReh9bkksu9iZdLbnrvvee9z/N83+d9nldo2gvjzd5Hxp4246W6J5tJszsxwvxPIbXzwBQDLgABvM1P6JsAwzCkdopl5vqIuWev2K4QpH/4QjjQci/nPCVny3iaNzMcrVUsC1sChFMpwtTu8dTqx7J9dR3a2BngUb0j7Xr+jtjasBR8f+jpNqqqoqoqmqblxjOJq/8GTfhCK8TWhmmykdhRpEIIhBCWMcD51wQXN3KwY3nvYGYgQPbXOMHJKOlMA77QCvsbugXsOFLZ+5+jGULBtyQuFB4PzlrAVSWSGWaptpdbjAcniaZv6RhcIL6VByvVZqsQouBMdutJkrrVrr1/gdjqN4Ze/3DvyBwcnnF9I7N4gC8YYdqNSHP7uD5G/7pdJRrl/ecIva1t9IRcgpolLk6qQic8eB+6GOkdrDjSf/OiTD91CS4r+jXrMqWkrgvUtuDbeVNTKGzw6SRDto5QBc5Yehlg0WbTc8mwHCeld1u+yZSySySlspTHFmZUeIkrgBYvtvPcyBdXkqWKq5OLmbk/luqVYjPOd3lxLXf/J/P7mJ0oCL/fX1Yfs4RO5CxW8C97dLBw2Q3fUwAAAABJRU5ErkJggg==');
 	background-repeat: no-repeat;
 }
+
+.help button {
+	cursor: help;
+	height:   28px;
+	float: right;
+	margin-left: 10px;
+}
+
+.help button:hover + #help-overlay {
+	display: block;
+}
+
+#help-overlay {
+	display: none;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(54, 54, 54, 0.5);
+}
+
+#help-overlay div {
+	width: 200px;
+	padding: 5px;
+	color: #463c54;
+	background-color: white;
+	border-radius: 10px;
+}
+
+#help-clipboard {
+	position: absolute;
+	right: 30px;
+	top: 90px;
+}
+
+#help-framestack {
+	position: absolute;
+	left: 200px;
+	top: 50px;
+}
+
+#help-exc-message {
+	position: absolute;
+	left: 65%;
+	top: 10px;
+}
+
+#help-code {
+	position: absolute;
+	right: 30px;
+	top: 250px;
+}
+
+#help-request {
+	position: absolute;
+	right: 30px;
+	top: 480px;
+}
+
+#help-appinfo {
+	position: absolute;
+	right: 30px;
+	top: 550px;
+}
+
+/* inspired by githubs kbd styles */
+kbd {
+    -moz-border-bottom-colors: none;
+    -moz-border-left-colors: none;
+    -moz-border-right-colors: none;
+    -moz-border-top-colors: none;
+    background-color: #fcfcfc;
+    border-color: #ccc #ccc #bbb;
+    border-image: none;
+    border-radius: 3px;
+    border-style: solid;
+    border-width: 1px;
+    box-shadow: 0 -1px 0 #bbb inset;
+    color: #555;
+    display: inline-block;
+    font-size: 11px;
+    line-height: 10px;
+    padding: 3px 5px;
+    vertical-align: middle;
+}

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

@@ -56,4 +56,24 @@ Zepto(function($) {
 		  $clipEl.show();
 	  });
   }
+  
+  $(document).on('keydown', function(e) {
+	  if(e.ctrlKey) {
+		  // CTRL+Arrow-UP/Arrow-Down support:
+		  // 1) select the next/prev element 
+		  // 2) make sure the newly selected element is within the view-scope
+		  // 3) focus the (right) container, so arrow-up/down (without ctrl) scroll the details
+		  if (e.which === 38 /* arrow up */) {
+			  $activeLine.prev('.frame').click();
+			  $activeLine[0].scrollIntoView();
+			  $container.focus();
+			  e.preventDefault();
+		  } else if (e.which === 40 /* arrow down */) {
+			  $activeLine.next('.frame').click();
+			  $activeLine[0].scrollIntoView();
+			  $container.focus();
+			  e.preventDefault();
+		  }
+	  } 
+  });
 });

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

@@ -10,9 +10,24 @@
     <?php if ($code): ?>
       <span title="Exception Code">(<?php echo $tpl->escape($code) ?>)</span>
     <?php endif ?>
-    <button id="copy-button" class="clipboard" data-clipboard-target="plain-exception" title="copy exception into clipboard"></button>
-    <span id="plain-exception"><?php echo $tpl->escape($plain_exception) ?></span>
   </h3>
+
+  <div class="help">
+    <button title="show help">HELP</button>
+
+    <div id="help-overlay">
+      <div id="help-framestack">Callstack information; navigate with mouse or keyboard using <kbd>Ctrl+&uparrow;</kbd> or <kbd>Ctrl+&downarrow;</kbd></div>
+      <div id="help-clipboard">Copy-to-clipboard button</div>
+      <div id="help-exc-message">Exception message and its type</div>
+      <div id="help-code">Code snippet where the error was thrown</div>
+      <div id="help-request">Server state information</div>
+      <div id="help-appinfo">Application provided context information</div>
+    </div>
+  </div>
+
+  <button id="copy-button" class="clipboard" data-clipboard-target="plain-exception" title="copy exception into clipboard"></button>
+  <span id="plain-exception"><?php echo $tpl->escape($plain_exception) ?></span>
+
   <p class="exc-message">
     <?php echo $tpl->escape($message) ?>
   </p>