feature #31876 [WebProfilerBundle] Add clear button to ajax tab (Matts)

This PR was squashed before being merged into the 4.4 branch (closes #31876).

Discussion
----------

[WebProfilerBundle] Add clear button to ajax tab

| Q             | A
| ------------- | ---
| Branch?       | 4.4
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | #31839
| License       | MIT
| Doc PR        | symfony/symfony-docs#... <!-- required for new features -->

For pages that have been open for a long time, the profiler ajax tab can start filling up fast. In #31839 the request to allow the history to be cleared with one click.

The reason why I did not align the button to the right, is because after looking at the other tabs. None of them had items that were aligned to the right. Moved the addEventListener above the ajax tab logic to keep the code consistent.

Ps. Please be nice, this is my first contribution 🍰

<!--
Replace this notice by a short README for your feature/bugfix. This will help people
understand your PR and can be used as a start for the documentation.

Additionally (see https://symfony.com/roadmap):
 - Bug fixes must be submitted against the lowest maintained branch where they apply
   (lowest branches are regularly merged to upper ones so they get the fixes too).
 - Features and deprecations must be submitted against branch 4.4.
 - Legacy code removals go to the master branch.
-->

Commits
-------

6bff4db [WebProfilerBundle] Add clear button to ajax tab

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
 -----
 

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>
+            <span class="sf-toolbar-header">
+                <b class="sf-toolbar-ajax-info"></b>
+                <b class="sf-toolbar-action">(<a class="sf-toolbar-ajax-clear" href="javascript:void(0);">Clear</a>)</b>
+            </span>
         </div>
         <div class="sf-toolbar-info-piece">
             <table class="sf-toolbar-ajax-requests">

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,13 @@
                 removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
                 removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
             }
+
+            addEventListener(document.querySelector('.sf-toolbar-ajax-clear'), 'click', function() {
+                requestStack = [];
+                renderAjaxRequests();
+                successStreak = 4;
+                document.querySelector('.sf-toolbar-ajax-request-list').innerHTML = '';
+            });
         };
 
         var startAjaxRequest = function(index) {
@@ -255,19 +275,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;