From cbdeba00d0c99139a8242ea02f3b3a14f7c4c860 Mon Sep 17 00:00:00 2001 From: James Johnston Date: Sat, 4 Mar 2017 23:17:18 -0800 Subject: [PATCH] Add option to not immediately show AJAX requests (#315) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit By default, the debug bar will immediately show new AJAX requests. If your page makes a lot of requests in the background (e.g. tracking), this constant switching of the active data set can be disruptive to the debug bar user. This commit adds an option for disabling this behavior by calling setAjaxHandlerAutoShow(false) on the JavascriptRenderer, like this: $renderer = $debugbar->getJavascriptRenderer(); $renderer->setAjaxHandlerAutoShow(false); When this behavior is disabled, AJAX requests are still available in the drop-down list, but won’t become active until the user explicitly selects them. --- docs/ajax_and_stack.md | 8 +++++ src/DebugBar/JavascriptRenderer.php | 35 ++++++++++++++++++- src/DebugBar/Resources/debugbar.js | 21 +++++++---- .../DebugBar/Tests/JavascriptRendererTest.php | 2 ++ tests/DebugBar/Tests/full_init.html | 2 +- 5 files changed, 59 insertions(+), 9 deletions(-) diff --git a/docs/ajax_and_stack.md b/docs/ajax_and_stack.md index 9d7270b..b92c6de 100644 --- a/docs/ajax_and_stack.md +++ b/docs/ajax_and_stack.md @@ -43,6 +43,14 @@ request. Use true as the first argument of `sendDataInHeaders()`. $debugbar->sendDataInHeaders(true); +By default, the debug bar will immediately show new AJAX requests. If your page +makes a lot of requests in the background (e.g. tracking), this can be +disruptive. You can disable this behavior by calling +`setAjaxHandlerAutoShow(false)` on the `JavascriptRenderer`, like this: + + $renderer = $debugbar->getJavascriptRenderer(); + $renderer->setAjaxHandlerAutoShow(false); + ## Stacked data Some times you need to collect data about a request but the page won't actually diff --git a/src/DebugBar/JavascriptRenderer.php b/src/DebugBar/JavascriptRenderer.php index 73d8404..cb8f2de 100644 --- a/src/DebugBar/JavascriptRenderer.php +++ b/src/DebugBar/JavascriptRenderer.php @@ -74,6 +74,8 @@ class JavascriptRenderer protected $ajaxHandlerBindToXHR = false; + protected $ajaxHandlerAutoShow = true; + protected $openHandlerClass = 'PhpDebugBar.OpenHandler'; protected $openHandlerUrl; @@ -117,6 +119,7 @@ class JavascriptRenderer * - ignore_collectors * - ajax_handler_classname * - ajax_handler_bind_to_jquery + * - ajax_handler_auto_show * - open_handler_classname * - open_handler_url * @@ -169,6 +172,9 @@ class JavascriptRenderer if (array_key_exists('ajax_handler_bind_to_jquery', $options)) { $this->setBindAjaxHandlerToJquery($options['ajax_handler_bind_to_jquery']); } + if (array_key_exists('ajax_handler_auto_show', $options)) { + $this->setAjaxHandlerAutoShow($options['ajax_handler_auto_show']); + } if (array_key_exists('open_handler_classname', $options)) { $this->setOpenHandlerClass($options['open_handler_classname']); } @@ -513,6 +519,28 @@ class JavascriptRenderer return $this->ajaxHandlerBindToXHR; } + /** + * Sets whether new ajax debug data will be immediately shown. Setting to false could be useful + * if there are a lot of tracking events cluttering things. + * + * @param boolean $autoShow + */ + public function setAjaxHandlerAutoShow($autoShow = true) + { + $this->ajaxHandlerAutoShow = $autoShow; + return $this; + } + + /** + * Checks whether the ajax handler will immediately show new ajax requests. + * + * @return boolean + */ + public function isAjaxHandlerAutoShow() + { + return $this->ajaxHandlerAutoShow; + } + /** * Sets the class name of the js open handler * @@ -897,7 +925,12 @@ class JavascriptRenderer } if ($this->ajaxHandlerClass) { - $js .= sprintf("%s.ajaxHandler = new %s(%s);\n", $this->variableName, $this->ajaxHandlerClass, $this->variableName); + $js .= sprintf("%s.ajaxHandler = new %s(%s, undefined, %s);\n", + $this->variableName, + $this->ajaxHandlerClass, + $this->variableName, + $this->ajaxHandlerAutoShow ? 'true' : 'false' + ); if ($this->ajaxHandlerBindToXHR) { $js .= sprintf("%s.ajaxHandler.bindToXHR();\n", $this->variableName); } elseif ($this->ajaxHandlerBindToJquery) { diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index a056cdf..c2a4a0c 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -895,9 +895,10 @@ if (typeof(PhpDebugBar) == 'undefined') { * @param {Object} data * @param {String} id The name of this set, optional * @param {String} suffix + * @param {Bool} show Whether to show the new dataset, optional (default: true) * @return {String} Dataset's id */ - addDataSet: function(data, id, suffix) { + addDataSet: function(data, id, suffix, show) { var label = this.datesetTitleFormater.format(id, data, suffix); id = id || (getObjectSize(this.datasets) + 1); this.datasets[id] = data; @@ -907,7 +908,9 @@ if (typeof(PhpDebugBar) == 'undefined') { this.$datasets.show(); } - this.showDataSet(id); + if (typeof(show) == 'undefined' || show) { + this.showDataSet(id); + } return id; }, @@ -915,14 +918,15 @@ if (typeof(PhpDebugBar) == 'undefined') { * Loads a dataset using the open handler * * @param {String} id + * @param {Bool} show Whether to show the new dataset, optional (default: true) */ - loadDataSet: function(id, suffix, callback) { + loadDataSet: function(id, suffix, callback, show) { if (!this.openHandler) { throw new Error('loadDataSet() needs an open handler'); } var self = this; this.openHandler.load(id, function(data) { - self.addDataSet(data, id, suffix); + self.addDataSet(data, id, suffix, show); callback && callback(data); }); }, @@ -1004,10 +1008,13 @@ if (typeof(PhpDebugBar) == 'undefined') { * AjaxHandler * * Extract data from headers of an XMLHttpRequest and adds a new dataset + * + * @param {Bool} autoShow Whether to immediately show new datasets, optional (default: true) */ - var AjaxHandler = PhpDebugBar.AjaxHandler = function(debugbar, headerName) { + var AjaxHandler = PhpDebugBar.AjaxHandler = function(debugbar, headerName, autoShow) { this.debugbar = debugbar; this.headerName = headerName || 'phpdebugbar'; + this.autoShow = typeof(autoShow) == 'undefined' ? true : autoShow; }; $.extend(AjaxHandler.prototype, { @@ -1039,7 +1046,7 @@ if (typeof(PhpDebugBar) == 'undefined') { loadFromId: function(xhr) { var id = this.extractIdFromHeaders(xhr); if (id && this.debugbar.openHandler) { - this.debugbar.loadDataSet(id, "(ajax)"); + this.debugbar.loadDataSet(id, "(ajax)", undefined, this.autoShow); return true; } return false; @@ -1071,7 +1078,7 @@ if (typeof(PhpDebugBar) == 'undefined') { if (data.error) { throw new Error('Error loading debugbar data: ' + data.error); } else if(data.data) { - this.debugbar.addDataSet(data.data, data.id, "(ajax)"); + this.debugbar.addDataSet(data.data, data.id, "(ajax)", this.autoShow); } return true; }, diff --git a/tests/DebugBar/Tests/JavascriptRendererTest.php b/tests/DebugBar/Tests/JavascriptRendererTest.php index e56a89b..f224871 100644 --- a/tests/DebugBar/Tests/JavascriptRendererTest.php +++ b/tests/DebugBar/Tests/JavascriptRendererTest.php @@ -37,6 +37,7 @@ class JavascriptRendererTest extends DebugBarTestCase 'ignore_collectors' => 'config', 'ajax_handler_classname' => 'AjaxFoo', 'ajax_handler_bind_to_jquery' => false, + 'ajax_handler_auto_show' => false, 'open_handler_classname' => 'OpenFoo', 'open_handler_url' => 'open.php' )); @@ -56,6 +57,7 @@ class JavascriptRendererTest extends DebugBarTestCase $this->assertContains('config', $this->r->getIgnoredCollectors()); $this->assertEquals('AjaxFoo', $this->r->getAjaxHandlerClass()); $this->assertFalse($this->r->isAjaxHandlerBoundToJquery()); + $this->assertFalse($this->r->isAjaxHandlerAutoShow()); $this->assertEquals('OpenFoo', $this->r->getOpenHandlerClass()); $this->assertEquals('open.php', $this->r->getOpenHandlerUrl()); } diff --git a/tests/DebugBar/Tests/full_init.html b/tests/DebugBar/Tests/full_init.html index e0baea1..ab749e6 100644 --- a/tests/DebugBar/Tests/full_init.html +++ b/tests/DebugBar/Tests/full_init.html @@ -8,6 +8,6 @@ phpdebugbar.setDataMap({ "time": ["time", "0s"] }); phpdebugbar.restoreState(); -phpdebugbar.ajaxHandler = new PhpDebugBar.AjaxHandler(phpdebugbar); +phpdebugbar.ajaxHandler = new PhpDebugBar.AjaxHandler(phpdebugbar, undefined, true); if (jQuery) phpdebugbar.ajaxHandler.bindToJquery(jQuery); phpdebugbar.addDataSet(