[WebProfilerBundle] Add clear button to ajax tab

Matthew Smeets · Matthew Smeets · commit 0c75396b814a · 2019-06-05T17:28:30.000+02:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md b/src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
@@ -1,6 +1,10 @@
 CHANGELOG
 =========
 
+4.4.0
+-----
+* Added button to clear the ajax request tab
+
 4.3.0
 -----
 
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/ajax.html.twig
@@ -8,7 +8,10 @@
 
     {% set text %}
         <div class="sf-toolbar-info-piece">
-            <b class="sf-toolbar-ajax-info"></b>
+            <b class="sf-toolbar-header">
+                <b class="sf-toolbar-ajax-info"></b>
+                <b class="sf-toolbar-action"><a class="sf-toolbar-action-clear" href="javascript:void(0);">Clear</a></b>
+            </b>
         </div>
         <div class="sf-toolbar-info-piece">
             <table class="sf-toolbar-ajax-requests">
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
@@ -24,6 +24,19 @@
 
         var profilerStorageKey = 'symfony/profiler/';
 
+        var addEventListener;
+
+        var el = document.createElement('div');
+        if (!('addEventListener' in el)) {
+            addEventListener = function (element, eventName, callback) {
+                element.attachEvent('on' + eventName, callback);
+            };
+        } else {
+            addEventListener = function (element, eventName, callback) {
+                element.addEventListener(eventName, callback, false);
+            };
+        }
+
         var request = function(url, onSuccess, onError, payload, options) {
             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
             options = options || {};
@@ -118,6 +131,11 @@
                 removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
                 removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
             }
+
+            addEventListener(document.querySelector('.sf-toolbar-action-clear'), 'click', function() {
+                requestStack = [];
+                renderAjaxRequests();
+            });
         };
 
         var startAjaxRequest = function(index) {
@@ -255,19 +273,6 @@
             renderAjaxRequests();
         };
 
-        var addEventListener;
-
-        var el = document.createElement('div');
-        if (!('addEventListener' in el)) {
-            addEventListener = function (element, eventName, callback) {
-                element.attachEvent('on' + eventName, callback);
-            };
-        } else {
-            addEventListener = function (element, eventName, callback) {
-                element.addEventListener(eventName, callback, false);
-            };
-        }
-
         {% if excluded_ajax_paths is defined %}
             if (window.fetch && window.fetch.polyfill === undefined) {
                 var oldFetch = window.fetch;
