Merge pull request #331 from cakephp/ajax-panel

Implemented Ajax planel, closes #261

Author: lorenzo

src/Panel/HistoryPanel.php

@@ -37,4 +37,14 @@ public function data()
             'requests' => $recent->toArray(),
         ];
     }
+
+    /**
+     * Gets the initial text for the history summary
+     *
+     * @return string
+     */
+    public function summary()
+    {
+        return '0 xhr';
+    }
 }

src/Routing/Filter/DebugBarFilter.php

@@ -209,6 +209,7 @@ public function afterDispatch(Event $event)
         $row = $requests->save($row);
 
         $this->_injectScripts($row->id, $response);
+        $response->header(['X-DEBUGKIT-ID' => $row->id]);
     }
 
     /**

src/Template/Element/history_panel.ctp

@@ -13,6 +13,7 @@
  */
 use Cake\Routing\Router;
 ?>
+<div id="request-history">
 <?php if (empty($requests)): ?>
     <p class="warning"><?= __d('debug_kit', 'No previous requests logged.') ?></p>
 <?php else: ?>
@@ -39,12 +40,62 @@ use Cake\Routing\Router;
         <?php endforeach; ?>
     </ul>
 <?php endif; ?>
+</div>
+<script type="text/html" id="list-template">
+    <ul class="history-list">
+        <li>
+            <?= $this->Html->link(
+                __d('debug_kit', 'Back to current request'),
+                ['plugin' => 'DebugKit', 'controller' => 'Panels', 'action' => 'index', $panel->request_id],
+                ['class' => 'history-link', 'data-request' => $panel->request_id]
+            ) ?>
+        </li>
+    </ul>
+</script>
+
+<script type="text/html" id="list-item-template">
+<li>
+    <?php $url = ['plugin' => 'DebugKit', 'controller' => 'Panels', 'action' => 'index'] ?>
+    <a class="history-link" data-request="{id}" href="<?= $this->Url->build($url) ?>/{id}">
+        <span class="history-time">{time}</span>
+        <span class="history-bubble xhr">XHR</span>
+        <span class="history-bubble">{method}</span>
+        <span class="history-bubble">{status}</span>
+        <span class="history-bubble">{type}</span>
+        <span class="history-url">{url}</span>
+    </a>
+</li>
+</script>
+
 <script>
 $(document).ready(function() {
     var panelButtons = $('.panel');
     var thisPanel = '<?= h($panel->id) ?>';
-    var buttons = $('.history-link');
+    var toolbar = window.toolbar;
+
+    if (!$('#request-history > ul').length) {
+        $('#request-history').html($('#list-template').html());
+    }
 
+    var listItem = $('#list-item-template').html();
+
+    for (var i = 0; i < toolbar.ajaxRequests.length; i++) {
+        var params = {
+            id: toolbar.ajaxRequests[i].requestId,
+            time: (new Date(toolbar.ajaxRequests[i].date)).toLocaleString(),
+            method: toolbar.ajaxRequests[i].method,
+            status: toolbar.ajaxRequests[i].status,
+            url: toolbar.ajaxRequests[i].url,
+            type: toolbar.ajaxRequests[i].type
+        };
+        var content = listItem.replace(/{([^{}]*)}/g, function(a, b) {
+            var r = params[b];
+            return typeof r === 'string' || typeof r === 'number' ? r : a;
+        });
+        $('ul.history-list li:first').after(content);
+    }
+
+    var buttons = $('.history-link');
     // Highlight the active request.
     buttons.filter('[data-request=' + window.toolbar.currentRequest + ']').addClass('active');
 

webroot/css/toolbar.css

@@ -352,6 +352,10 @@ table tbody tr:nth-child(odd) {
 	padding: 2px;
 	border-radius: 4px;
 }
+
+.xhr {
+	background:#7CFF46
+}
 .history-time {
 	font-size: 12px;
 	display: block;

webroot/js/toolbar-app.js

@@ -14,6 +14,7 @@ Toolbar.prototype = {
 	_state: 0,
 	currentRequest: null,
 	originalRequest: null,
+	ajaxRequests: [],
 
 	states: [
 		'collapse',
@@ -158,7 +159,7 @@ Toolbar.prototype = {
 				// Close active panel
 				if (_this.isExpanded()) {
 					return _this.hideContent();
-				} 
+				}
 				// Collapse the toolbar
 				if (_this.state() === "toolbar") {
 					return _this.toggle();
@@ -180,7 +181,7 @@ Toolbar.prototype = {
 				if (nextPanel.hasClass('panel')) {
 					nextPanel.addClass('panel-active');
 					return _this.loadPanel(nextPanel.data('id'));
-				}	
+				}
 			}
 		});
 	},
@@ -221,10 +222,26 @@ Toolbar.prototype = {
 		}
 	},
 
+	onMessage: function(event) {
+		if (event.data.indexOf('ajax-completed$$') === 0) {
+			this.onRequest(JSON.parse(event.data.split('$$')[1]))
+		}
+	},
+
+	onRequest: function(request) {
+		this.ajaxRequests.push(request);
+		$(".panel-summary:contains(xhr)").text("" + this.ajaxRequests.length + ' xhr');
+	},
+
 	initialize: function() {
 		this.windowOrigin();
 		this.mouseListener();
 		this.keyboardListener();
 		this.loadState();
+
+		var self = this;
+		window.addEventListener('message', function (event) {
+			self.onMessage(event);
+		}, false);
 	}
 };

webroot/js/toolbar.js

@@ -41,9 +41,46 @@
 		window.addEventListener('message', onMessage, false);
 	};
 
+	var logAjaxRequest = function(original) {
+		return function() {
+			if (this.readyState === 4 && this.getResponseHeader('X-DEBUGKIT-ID')) {
+				var params = {
+					requestId: this.getResponseHeader('X-DEBUGKIT-ID'),
+					status: this.status,
+					date: new Date,
+					method: this._arguments[0],
+					url: this._arguments[1],
+					type: this.getResponseHeader('Content-Type')
+				}
+				iframe.contentWindow.postMessage('ajax-completed$$' + JSON.stringify(params), window.location.origin);
+			}
+			if (original) {
+				return original.apply(this, [].slice.call(arguments));
+			}
+		};
+	};
+
+	var proxyAjaxOpen = function() {
+		var proxied = window.XMLHttpRequest.prototype.open;
+		window.XMLHttpRequest.prototype.open = function() {
+			this._arguments = arguments;
+			return proxied.apply(this, [].slice.call(arguments));
+		};
+	};
+
+	var proxyAjaxSend = function() {
+		var proxied = window.XMLHttpRequest.prototype.send;
+		window.XMLHttpRequest.prototype.send = function() {
+			this.onreadystatechange = logAjaxRequest(this.onreadystatechange);
+			return proxied.apply(this, [].slice.call(arguments));
+		};
+	};
+
 	// Bind on ready callback.
 	if (doc.addEventListener) {
 		doc.addEventListener('DOMContentLoaded', onReady, false);
+		doc.addEventListener('DOMContentLoaded', proxyAjaxOpen, false);
+		doc.addEventListener('DOMContentLoaded', proxyAjaxSend, false);
 	} else {
 		throw new Error('Unable to add event listener for DebugKit. Please use a browser' +
 			'that supports addEventListener().')