The very beginnings of a powerful, beautiful, debug bar.

application/config/AppConfig.php

@@ -178,4 +178,22 @@ class AppConfig extends BaseConfig
 	|   - http://www.w3.org/TR/CSP/
 	*/
 	public $CSPEnabled = false;
+
+	/*
+	|--------------------------------------------------------------------------
+	| Debug Toolbar
+	|--------------------------------------------------------------------------
+	|
+	*/
+	public $toolbarEnabled = ENVIRONMENT != 'production';
+
+	public $toolbarCollectors = [
+		'CodeIgniter\Debug\Toolbar\Collectors\Timers',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Database',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Logs',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Request',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Response',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Cache',
+//		'CodeIgniter\Debug\Toolbar\Collectors\Files',
+	];
 }

application/config/Services.php

@@ -338,6 +338,23 @@ class Services
 
 	//--------------------------------------------------------------------
 
+	public static function toolbar(AppConfig $config = null, $getShared = false)
+	{
+		if (! is_object($config))
+		{
+			$config = new AppConfig();
+		}
+
+		if (! $getShared)
+		{
+			return new \CodeIgniter\Debug\Toolbar($config);
+		}
+
+		return self::getSharedInstance('security');
+	}
+
+	//--------------------------------------------------------------------
+
 	/**
 	 * The URI class provides a way to model and manipulate URIs.
 	 */

system/CodeIgniter.php

@@ -233,7 +233,18 @@ else
 $output = ob_get_contents();
 ob_end_clean();
 
-$output = str_replace('{elapsed_time}', $benchmark->getElapsedTime('total_execution'), $output);
+$totalTime = $benchmark->getElapsedTime('total_execution');
+$output = str_replace('{elapsed_time}', $totalTime, $output);
+
+//--------------------------------------------------------------------
+// Display the Debug Toolbar?
+//--------------------------------------------------------------------
+
+if (ENVIRONMENT != 'production')
+{
+	$toolbar = \App\Config\Services::toolbar($config);
+	$output .= $toolbar->run();
+}
 
 $response->setBody($output);
 

system/Debug/Toolbar.php

@@ -0,0 +1,42 @@
+<?php namespace CodeIgniter\Debug;
+
+use CodeIgniter\Config\BaseConfig;
+
+class Toolbar
+{
+	/**
+	 * Collectors to be used and displayed.
+	 * @var array
+	 */
+	protected $collectors = [];
+
+	//--------------------------------------------------------------------
+
+	public function __construct(BaseConfig $config)
+	{
+		$this->collectors = $config->toolbarCollectors;
+	}
+
+	//--------------------------------------------------------------------
+
+
+	public function run(): string
+	{
+		// Data items used within the view.
+		$collectors = $this->collectors;
+
+		global $totalTime;
+		$totalTime = $totalTime * 1000;
+
+		ob_start();
+		include(dirname(__FILE__).'/Toolbar/View/toolbar.tpl.php');
+		$output = ob_get_contents();
+		ob_end_clean();
+
+		return $output;
+	}
+
+	//--------------------------------------------------------------------
+
+
+}

system/Debug/Toolbar/Collectors/BaseCollector.php

@@ -0,0 +1,42 @@
+<?php namespace CodeIgniter\Debug\Toolbar\Collectors;
+
+abstract class BaseCollector
+{
+	/**
+	 * Whether this collector has data that can
+	 * be displayed in the Timeline.
+	 *
+	 * @var bool
+	 */
+	protected $hasTimeline = false;
+
+	//--------------------------------------------------------------------
+
+	/**
+	 * Grabs the data for the timeline, properly formatted,
+	 * or returns an empty array.
+	 *
+	 * @return bool
+	 */
+	public function timelineData(): array
+	{
+	    if (! $this->hasTimeline)
+	    {
+		    return [];
+	    }
+	}
+
+	//--------------------------------------------------------------------
+
+	/**
+	 * Child classes should implement this to return the timeline data
+	 * formatted for correct usage.
+	 *
+	 * @return mixed
+	 */
+	abstract protected function formatTimelineData();
+
+	//--------------------------------------------------------------------
+
+
+}

system/Debug/Toolbar/Collectors/Timers.php

@@ -0,0 +1,6 @@
+<?php namespace CodeIgniter\Debug\Toolbar\Collectors;
+
+class Timers extends BaseCollector
+{
+
+}

system/Debug/Toolbar/View/toolbar.css

@@ -0,0 +1,51 @@
+#debug-bar {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+    font-size: 12pt;
+    line-height: 1.5;
+    background: #fff;
+    border-bottom: 1px solid #ddd;
+    margin: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 10000;
+    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+#debug-bar .toolbar {
+    display: block;
+    position: relative;
+    overflow: hidden;
+    white-space: nowrap;
+    border-bottom: 1px solid #eee;
+    padding: 3px 20px;
+}
+#debug-bar h1 {
+    font-size: 13pt;
+    font-weight: 300;
+    color: #666;
+    margin: 0 2em 0 0;
+    padding: 0;
+    text-align: left;
+    display: inline-block;
+}
+#debug-bar .label {
+    display: inline-block;
+    font-size: 10pt;
+    padding: .3em 1em .3em;
+    line-height: 1.0;
+    vertical-align: baseline;
+    border-radius: 0.25em;
+    text-shadow: none;
+    background-color: #eee;
+}
+#debug-bar .label a {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    text-decoration: none;
+}
+#debug-bar .label a:hover {
+    text-decoration: underline;
+}

system/Debug/Toolbar/View/toolbar.js

@@ -0,0 +1,28 @@
+/*
+ * Functionality for the CodeIgniter Debug Toolbar.
+ */
+
+var ciDebugBar = {
+
+    toolbar : null,
+
+    //--------------------------------------------------------------------
+
+    init : function()
+    {
+        this.toolbar = document.getElementById('debug-bar');
+
+        // Pad the body to make room for the toolbar.
+        document.getElementsByTagName("body")[0].style.marginTop = this.toolbar.offsetHeight+"px !important";
+    },
+
+    //--------------------------------------------------------------------
+
+    createListeners : function()
+    {
+
+    },
+
+    //--------------------------------------------------------------------
+
+};

system/Debug/Toolbar/View/toolbar.tpl.php

@@ -0,0 +1,20 @@
+<style type="text/css">
+	<?= preg_replace('#[\r\n\t ]+#', ' ', file_get_contents(__DIR__.'/toolbar.css')) ?>
+</style>
+
+<script type="text/javascript">
+	<?= file_get_contents(__DIR__.'/toolbar.js') ?>
+</script>
+
+<div id="debug-bar">
+	<div class="toolbar">
+		<h1>Debug Bar</h1>
+
+		<span class="label"><?= $totalTime ?>ms</span>
+		<span class="label"><a href="javascript: void(0)">Timeline</a></span>
+	</div>
+</div>
+
+<script>
+	ciDebugBar.init();
+</script>