diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index fb5b8b7dadaff..d2616f2bf0630 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -37,7 +37,7 @@
     </span>
 {% endblock %}
 
-{% block head %}
+{% block stylesheets %}
     {{ parent() }}
 
     <style>
@@ -192,246 +192,209 @@
     </style>
 {% endblock %}
 
-{% block panel %}
-    <h2>Forms</h2>
-
-    {% if collector.data.forms|length %}
-        <div id="tree-menu" class="tree">
-            <ul>
-            {% for formName, formData in collector.data.forms %}
-                {{ _self.form_tree_entry(formName, formData, true) }}
-            {% endfor %}
-            </ul>
-        </div>
-
-        <div id="tree-details-container">
-            {% for formName, formData in collector.data.forms %}
-                {{ _self.form_tree_details(formName, formData, collector.data.forms_by_hash, loop.first) }}
-            {% endfor %}
-        </div>
-    {% else %}
-        <div class="empty empty-panel">
-            <p>No forms were submitted for this request.</p>
-        </div>
-    {% endif %}
+{% block javascripts %}
+    {{  parent() }}
 
     <script>
-    function Toggler(storage) {
-        "use strict";
+        window.addEventListener('DOMContentLoaded', () => {
+            new SymfonyProfilerFormPanel();
+        });
+
+        class SymfonyProfilerFormPanel {
+            #activeTreeItem;
+            #activeTreePanel;
+            #storage;
+            #storageKey = 'sf_toggle_data';
+            #togglerStates = {};
+
+            constructor() {
+                this.#storage = sessionStorage;
+                this.#initTrees();
+                this.#initTogglerButtons();
+            }
+
+            #initTrees() {
+                const treeItems = document.querySelectorAll('.tree .tree-inner');
+                treeItems.forEach((treeItem) => {
+                    var targetId = treeItem.getAttribute('data-tab-target-id');
+                    const target = document.getElementById(targetId);
 
-        var STORAGE_KEY = 'sf_toggle_data',
-
-            states = {},
+                    if (!target) {
+                        throw `Tab target ${targetId} does not exist`;
+                    }
 
-            isCollapsed = function (button) {
-                return Sfjs.hasClass(button, 'closed');
-            },
+                    treeItem.addEventListener('click', (e) => {
+                        this.#selectTreeItem(treeItem);
 
-            isExpanded = function (button) {
-                return !isCollapsed(button);
-            },
+                        e.stopPropagation();
+                        return false;
+                    });
 
-            expand = function (button) {
-                var targetId = button.dataset.toggleTargetId,
-                    target = document.getElementById(targetId);
+                    target.classList.add('hidden');
+                });
 
-                if (!target) {
-                    throw "Toggle target " + targetId + " does not exist";
+                if (treeItems.length > 0) {
+                    this.#selectTreeItem(treeItems[0]);
                 }
+            };
 
-                if (isCollapsed(button)) {
-                    Sfjs.removeClass(button, 'closed');
-                    Sfjs.removeClass(target, 'hidden');
+            #selectTreeItem(treeItem) {
+                const treePanelId = treeItem.getAttribute('data-tab-target-id');
+                const treePanel = document.getElementById(treePanelId);
 
-                    states[targetId] = 1;
-                    storage.setItem(STORAGE_KEY, states);
+                if (!treePanel) {
+                    throw `The tree panel ${treePanelId} does not exist`;
                 }
-            },
 
-            collapse = function (button) {
-                var targetId = button.dataset.toggleTargetId,
-                    target = document.getElementById(targetId);
-
-                if (!target) {
-                    throw "Toggle target " + targetId + " does not exist";
+                if (this.#activeTreeItem) {
+                    this.#activeTreeItem.classList.remove('active');
                 }
 
-                if (isExpanded(button)) {
-                    Sfjs.addClass(button, 'closed');
-                    Sfjs.addClass(target, 'hidden');
-
-                    states[targetId] = 0;
-                    storage.setItem(STORAGE_KEY, states);
+                if (this.#activeTreePanel) {
+                    this.#activeTreePanel.classList.add('hidden');
                 }
-            },
 
-            toggle = function (button) {
-                if (Sfjs.hasClass(button, 'closed')) {
-                    expand(button);
-                } else {
-                    collapse(button);
-                }
-            },
+                treeItem.classList.add('active');
+                treePanel.classList.remove('hidden');
 
-            initButtons = function (buttons) {
-                states = storage.getItem(STORAGE_KEY, {});
+                this.#activeTreeItem = treeItem;
+                this.#activeTreePanel = treePanel;
+            }
 
-                // must be an object, not an array or anything else
-                // `typeof` returns "object" also for arrays, so the following
-                // check must be done
-                // see http://stackoverflow.com/questions/4775722/check-if-object-is-array
-                if ('[object Object]' !== Object.prototype.toString.call(states)) {
-                    states = {};
+            #initTogglerButtons() {
+                this.#togglerStates = this.#getTogglerStates();
+                if (!this.#isObject(this.#togglerStates)) {
+                    this.#togglerStates = {};
                 }
 
-                for (var i = 0, l = buttons.length; i < l; ++i) {
-                    var targetId = buttons[i].dataset.toggleTargetId,
-                        target = document.getElementById(targetId);
+                const buttons = document.querySelectorAll('.toggle-button');
+                buttons.forEach((button) => {
+                    const targetId = button.getAttribute('data-toggle-target-id');
+                    const target = document.getElementById(targetId);
 
                     if (!target) {
-                        throw "Toggle target " + targetId + " does not exist";
+                        throw `Toggle target ${targetId} does not exist`;
                     }
 
                     // correct the initial state of the button
-                    if (Sfjs.hasClass(target, 'hidden')) {
-                        Sfjs.addClass(buttons[i], 'closed');
+                    if (target.classList.contains('hidden')) {
+                        button.classList.add('closed');
                     }
 
-                    // attach listener for expanding/collapsing the target
-                    clickHandler(buttons[i], toggle);
+                    button.addEventListener('click', (e) => {
+                        this.#toggleToggler(button);
 
-                    if (states.hasOwnProperty(targetId)) {
+                        e.stopPropagation();
+                        return false;
+                    });
+
+                    if (this.#togglerStates.hasOwnProperty(targetId)) {
                         // open or collapse based on stored data
-                        if (0 === states[targetId]) {
-                            collapse(buttons[i]);
+                        if (0 === this.#togglerStates[targetId]) {
+                            this.#collapseToggler(button);
                         } else {
-                            expand(buttons[i]);
+                            this.#expandToggler(button);
                         }
                     }
-                }
+                });
             };
 
-        return {
-            initButtons: initButtons,
-
-            toggle: toggle,
+            #isTogglerCollapsed(button) {
+                return button.classList.contains('closed');
+            }
 
-            isExpanded: isExpanded,
+            #isTogglerExpanded(button) {
+                return !this.#isTogglerCollapsed(button);
+            }
 
-            isCollapsed: isCollapsed,
-
-            expand: expand,
-
-            collapse: collapse
-        };
-    }
-
-    function JsonStorage(storage) {
-        var setItem = function (key, data) {
-                storage.setItem(key, JSON.stringify(data));
-            },
-
-            getItem = function (key, defaultValue) {
-                var data = storage.getItem(key);
-
-                if (null !== data) {
-                    try {
-                        return JSON.parse(data);
-                    } catch(e) {
-                    }
-                }
-
-                return defaultValue;
-            };
-
-        return {
-            setItem: setItem,
-
-            getItem: getItem
-        };
-    }
-
-    function TabView() {
-        "use strict";
-
-        var activeTab = null,
-
-            activeTarget = null,
-
-            select = function (tab) {
-                var targetId = tab.dataset.tabTargetId,
-                    target = document.getElementById(targetId);
+            #expandToggler(button) {
+                const targetId = button.getAttribute('data-toggle-target-id');
+                const target = document.getElementById(targetId);
 
                 if (!target) {
-                    throw "Tab target " + targetId + " does not exist";
+                    throw "Toggle target " + targetId + " does not exist";
                 }
 
-                if (activeTab) {
-                    Sfjs.removeClass(activeTab, 'active');
-                }
+                if (this.#isTogglerCollapsed(button)) {
+                    button.classList.remove('closed');
+                    target.classList.remove('hidden');
 
-                if (activeTarget) {
-                    Sfjs.addClass(activeTarget, 'hidden');
+                    this.#togglerStates[targetId] = 1;
+                    this.#saveTogglerStates();
                 }
+            }
 
-                Sfjs.addClass(tab, 'active');
-                Sfjs.removeClass(target, 'hidden');
+            #collapseToggler(button) {
+                const targetId = button.getAttribute('data-toggle-target-id');
+                const target = document.getElementById(targetId);
 
-                activeTab = tab;
-                activeTarget = target;
-            },
-
-            initTabs = function (tabs) {
-                for (var i = 0, l = tabs.length; i < l; ++i) {
-                    var targetId = tabs[i].dataset.tabTargetId,
-                        target = document.getElementById(targetId);
-
-                    if (!target) {
-                        throw "Tab target " + targetId + " does not exist";
-                    }
+                if (!target) {
+                    throw `Toggle target ${targetId} does not exist`;
+                }
 
-                    clickHandler(tabs[i], select);
+                if (this.#isTogglerExpanded(button)) {
+                    button.classList.add('closed');
+                    target.classList.add('hidden');
 
-                    Sfjs.addClass(target, 'hidden');
+                    this.#togglerStates[targetId] = 0;
+                    this.#saveTogglerStates();
                 }
+            }
 
-                if (tabs.length > 0) {
-                    select(tabs[0]);
+            #toggleToggler(button) {
+                if (button.classList.contains('closed')) {
+                    this.#expandToggler(button);
+                } else {
+                    this.#collapseToggler(button);
                 }
-            };
+            }
 
-        return {
-            initTabs: initTabs,
+            #saveTogglerStates() {
+                this.#storage.setItem(this.#storageKey, JSON.stringify(this.#togglerStates));
+            }
 
-            select: select
-        };
-    }
+            #getTogglerStates() {
+                const data = this.#storage.getItem(this.#storageKey);
 
-    var tabTarget = new TabView(),
-        toggler = new Toggler(new JsonStorage(sessionStorage)),
-        clickHandler = function (element, callback) {
-            Sfjs.addEventListener(element, 'click', function (e) {
-                if (!e) {
-                    e = window.event;
+                if (null !== data) {
+                    try {
+                        return JSON.parse(data);
+                    } catch(e) {
+                    }
                 }
 
-                callback(this);
+                return {};
+            }
 
-                if (e.preventDefault) {
-                    e.preventDefault();
-                } else {
-                    e.returnValue = false;
-                }
+            #isObject(variable) {
+                return null !== variable && 'object' === typeof variable && !Array.isArray(variable);
+            }
+        }
+    </script>
+{% endblock %}
 
-                e.stopPropagation();
+{% block panel %}
+    <h2>Forms</h2>
 
-                return false;
-            });
-        };
+    {% if collector.data.forms|length %}
+        <div id="tree-menu" class="tree">
+            <ul>
+            {% for formName, formData in collector.data.forms %}
+                {{ _self.form_tree_entry(formName, formData, true) }}
+            {% endfor %}
+            </ul>
+        </div>
 
-    tabTarget.initTabs(document.querySelectorAll('.tree .tree-inner'));
-    toggler.initButtons(document.querySelectorAll('.toggle-button'));
-    </script>
+        <div id="tree-details-container">
+            {% for formName, formData in collector.data.forms %}
+                {{ _self.form_tree_details(formName, formData, collector.data.forms_by_hash, loop.first) }}
+            {% endfor %}
+        </div>
+    {% else %}
+        <div class="empty empty-panel">
+            <p>No forms were submitted for this request.</p>
+        </div>
+    {% endif %}
 {% endblock %}
 
 {% macro form_tree_entry(name, data, is_root) %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
index c2fc5dd323ee2..8055016e04259 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
@@ -1,6 +1,6 @@
 {% extends '@WebProfiler/Profiler/layout.html.twig' %}
 
-{% block head %}
+{% block stylesheets %}
     {{ parent() }}
 
     <style>
@@ -235,6 +235,91 @@
     </style>
 {% endblock %}
 
+{% block javascripts %}
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            new SymfonyProfilerLoggerPanel();
+        });
+
+        class SymfonyProfilerLoggerPanel {
+            constructor() {
+                this.#initializeLogsTable();
+            }
+
+            #initializeLogsTable() {
+                this.#updateLogsTable();
+
+                document.querySelectorAll('.log-filter input').forEach((input) => {
+                    input.addEventListener('change', () => { this.#updateLogsTable(); });
+                });
+
+                document.querySelectorAll('.filter-select-all-or-none button').forEach((link) => {
+                    link.addEventListener('click', () => {
+                        const selectAll = link.classList.contains('select-all');
+                        link.closest('.log-filter-content').querySelectorAll('input').forEach((input) => {
+                            input.checked = selectAll;
+                        });
+
+                        this.#updateLogsTable();
+                    });
+                });
+
+                document.body.addEventListener('click', (event) => {
+                    document.querySelectorAll('details.log-filter').forEach((filterElement) => {
+                        if (!filterElement.contains(event.target) && filterElement.open) {
+                            filterElement.open = false;
+                        }
+                    });
+                });
+            }
+
+            #updateLogsTable() {
+                const logs = document.querySelector('table.logs');
+                if (null === logs) {
+                    return;
+                }
+
+                const selectedType = document.querySelector('#log-filter-type input:checked').value;
+                const priorities = document.querySelectorAll('#log-filter-priority input');
+                const allPriorities = Array.from(priorities).map((input) => input.value);
+                const selectedPriorities = Array.from(priorities).filter((input) => input.checked).map((input) => input.value);
+                const channels = document.querySelectorAll('#log-filter-channel input');
+                const selectedChannels = Array.from(channels).filter((input) => input.checked).map((input) => input.value);
+
+                /* hide rows that don't match the current filters */
+                let numVisibleRows = 0;
+                logs.querySelectorAll('tbody tr').forEach((row) => {
+                    if ('all' !== selectedType && selectedType !== row.getAttribute('data-type')) {
+                        row.style.display = 'none';
+                        return;
+                    }
+
+                    const priority = row.getAttribute('data-priority');
+                    if (false === selectedPriorities.includes(priority) && true === allPriorities.includes(priority)) {
+                        row.style.display = 'none';
+                        return;
+                    }
+
+                    if ('' !== row.getAttribute('data-channel') && false === selectedChannels.includes(row.getAttribute('data-channel'))) {
+                        row.style.display = 'none';
+                        return;
+                    }
+
+                    row.style.display = 'table-row';
+                    numVisibleRows++;
+                });
+
+                document.querySelector('table.logs').style.display = 0 === numVisibleRows ? 'none' : 'table';
+                document.querySelector('.no-logs-message').style.display = 0 === numVisibleRows ? 'block' : 'none';
+
+                /* update the selected totals of all filters */
+                document.querySelector('#log-filter-priority .filter-active-num').innerText = (priorities.length === selectedPriorities.length) ? 'All' : selectedPriorities.length;
+                document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
+            }
+        }
+    </script>
+{% endblock %}
+
 {% block toolbar %}
     {% if collector.counterrors or collector.countdeprecations or collector.countwarnings %}
         {% set icon %}
@@ -405,8 +490,6 @@
         <div class="no-logs-message empty">
             <p>There are no log messages.</p>
         </div>
-
-        <script>Sfjs.initializeLogsTable();</script>
     {% endif %}
 
     {% set compilerLogTotal = collector.compilerLogs|reduce((total, logs) => total + logs|length, 0) %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
index 11b5ae07f53b1..386438b8256ff 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
@@ -1,6 +1,6 @@
 {% extends '@WebProfiler/Profiler/layout.html.twig' %}
 
-{% block head %}
+{% block stylesheets %}
     {{  parent() }}
 
     <style>
@@ -158,6 +158,36 @@
     </style>
 {% endblock %}
 
+{% block javascripts %}
+    {{ parent() }}
+
+    <script>
+        window.addEventListener('DOMContentLoaded', () => {
+            new SymfonyProfilerMailerPanel();
+        });
+
+        class SymfonyProfilerMailerPanel {
+            constructor() {
+                this.#initializeEmailsTable();
+            }
+
+            #initializeEmailsTable() {
+                const emailRows = document.querySelectorAll('.mailer-email-summary-table-row');
+
+                emailRows.forEach((emailRow) => {
+                    emailRow.addEventListener('click', () => {
+                        emailRows.forEach((row) => row.classList.remove('active'));
+                        emailRow.classList.add('active');
+
+                        document.querySelectorAll('.mailer-email-details').forEach((emailDetails) => emailDetails.style.display = 'none');
+                        document.querySelector(emailRow.getAttribute('data-target')).style.display = 'block';
+                    });
+                });
+            }
+        }
+    </script>
+{% endblock %}
+
 {% block toolbar %}
     {% set events = collector.events %}
 
@@ -262,8 +292,6 @@
                         {{ _self.render_email_details(collector, transport, event.message, event.isQueued, show_transport_name) }}
                     </div>
                 {% endfor %}
-
-                <script>Sfjs.initializeMailerTable();</script>
             {% else %}
                 {% set event = (collector.events.events(transport)|first) %}
                 {{ _self.render_email_details(collector, transport, event.message, event.isQueued, show_transport_name) }}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
index c037c07ec94bc..00b3dba37a0da 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
@@ -12,9 +12,14 @@
         <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2'%3E%3Cstyle%3E%23circle %7B fill: %23{{ favicon_color }}; %7D %23sf %7B fill: %23ffffff; %7D%3C/style%3E%3Cpath fill='none' d='M0 0h600v600H0z'/%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h600v600H0z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath id='circle' d='M599.985 299.974c0 165.696-134.307 300.024-300.003 300.024C134.302 599.998 0 465.67 0 299.974 0 134.304 134.302-.002 299.982-.002c165.696 0 300.003 134.307 300.003 299.976z' fill-rule='nonzero'/%3E%3Cpath id='sf' d='M431.154 110.993c-30.474 1.043-57.08 17.866-76.884 41.076-21.926 25.49-36.508 55.696-47.03 86.55-18.791-15.416-33.282-35.364-63.457-44.04-23.311-6.702-47.794-3.948-70.314 12.833-10.667 7.965-18.016 19.995-21.51 31.34-9.05 29.416 9.506 55.61 17.942 65.004l18.444 19.743c3.792 3.879 12.95 13.983 8.467 28.458-4.82 15.764-23.809 25.938-43.285 19.958-8.703-2.67-21.199-9.147-18.396-18.257 1.145-3.739 3.82-6.553 5.264-9.74 1.305-2.788 1.941-4.858 2.337-6.099 3.557-11.602-1.31-26.714-13.747-30.56-11.613-3.562-23.488-.738-28.094 14.202-5.22 16.979 2.905 47.795 46.436 61.206 51 15.694 94.13-12.084 100.249-48.287 3.857-22.675-6.392-39.536-25.147-61.2l-15.293-16.92c-9.254-9.248-12.437-25.018-2.856-37.134 8.093-10.233 19.6-14.581 38.476-9.457 27.543 7.468 39.809 26.58 60.285 41.996-8.44 27.741-13.977 55.584-18.973 80.548l-3.07 18.626c-14.636 76.766-25.816 118.939-54.856 143.144-5.858 4.167-14.218 10.399-26.821 10.843-6.622.203-8.757-4.355-8.847-6.344-.15-4.628 3.755-6.756 6.349-8.837 3.889-2.124 9.757-5.633 9.356-16.882-.423-13.293-11.431-24.815-27.35-24.286-11.919.402-30.09 11.608-29.4 32.149.701 21.22 20.472 37.118 50.288 36.107 15.935-.535 51.528-7.018 86.592-48.699 40.82-47.8 52.235-102.576 60.82-142.673l9.591-52.946a177.574 177.574 0 0017.209 1.22c50.844 1.075 76.257-25.249 76.653-44.41.257-11.591-7.6-23.011-18.61-22.739-7.863.22-17.759 5.473-20.123 16.353-2.332 10.671 16.17 20.316 1.712 29.704-10.27 6.643-28.683 11.319-54.615 7.526l4.712-26.061c9.623-49.416 21.493-110.193 66.528-111.68 3.284-.155 15.282.139 15.56 8.088.08 2.637-.582 3.332-3.68 9.393-3.166 4.729-4.36 8.773-4.204 13.394.433 12.608 10.024 20.91 23.916 20.429 18.572-.626 23.906-18.7 23.6-27.998-.759-21.846-23.776-35.647-54.224-34.641z' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E"/>
 
         {% block head %}
-            <style{% if csp_style_nonce is defined and csp_style_nonce %} nonce="{{ csp_style_nonce }}"{% endif %}>
-                {{ include('@WebProfiler/Profiler/profiler.css.twig') }}
-            </style>
+            {% block stylesheets %}
+                <style{% if csp_style_nonce is defined and csp_style_nonce %} nonce="{{ csp_style_nonce }}"{% endif %}>
+                    {{ include('@WebProfiler/Profiler/profiler.css.twig') }}
+                </style>
+            {% endblock %}
+
+            {% block javascripts %}
+            {% endblock %}
         {% endblock %}
     </head>
     <body>
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
index 4b4a114045483..e501ebe58bc5d 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
@@ -1,958 +1,212 @@
 {# This file is partially duplicated in src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js.
    If you make any change in this file, verify the same change is needed in the other file. #}
-<script{% if csp_script_nonce is defined and csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>/*<![CDATA[*/
-    {# Caution: the contents of this file are processed by Twig before loading
-                them as JavaScript source code. Always use '/*' comments instead
-                of '//' comments to avoid impossible-to-debug side-effects #}
-
-if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
-    Sfjs = (function() {
-        "use strict";
-
-        if ('classList' in document.documentElement) {
-            var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
-            var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
-            var addClass = function(el, cssClass) { el.classList.add(cssClass); };
-            var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); };
-        } else {
-            var hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); };
-            var removeClass = function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); };
-            var addClass = function(el, cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } };
-            var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
-        }
-
-        var noop = function() {};
-
-        var profilerStorageKey = 'symfony/profiler/';
 
-        var addEventListener;
+{# CAUTION: the contents of this file are processed by Twig before loading
+            them as JavaScript source code. Always use '/*' comments instead
+            of '//' comments to avoid impossible-to-debug side-effects #}
+<script{% if csp_script_nonce is defined and csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>
+    window.addEventListener('DOMContentLoaded', () => {
+        new SymfonyProfiler();
+    });
 
-        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);
-            };
+    class SymfonyProfiler {
+        constructor() {
+            this.#createTabs();
+            this.#createToggles();
+            this.#convertDateTimesToUserTimezone();
         }
 
-        if (navigator.clipboard) {
-            document.addEventListener('readystatechange', () => {
-                if (document.readyState !== 'complete') {
-                    return;
-                }
-
-                document.querySelectorAll('[data-clipboard-text]').forEach(function (element) {
-                    removeClass(element, 'hidden');
-                    element.addEventListener('click', function () {
-                        navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
-
-                        if (element.classList.contains("label")) {
-                            let oldContent = element.textContent;
-
-                            element.textContent = "✅ Copied!";
-                            element.classList.add("status-success");
-
-                            setTimeout(() => {
-                                element.textContent = oldContent;
-                                element.classList.remove("status-success");
-                            }, 7000);
-                        }
-                    });
+        #createTabs() {
+            /* the accessibility options of this component have been defined according to: */
+            /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */
+            const tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
+
+            /* create the tab navigation for each group of tabs */
+            tabGroups.forEach((tabGroup, i) => {
+                const tabs = tabGroup.querySelectorAll(':scope > .tab');
+                const tabNavigation = document.createElement('div');
+                tabNavigation.classList.add('tab-navigation');
+                tabNavigation.setAttribute('role', 'tablist');
+
+                let selectedTabId = `tab-${i}-0`; /* select the first tab by default */
+                tabs.forEach((tab, j) => {
+                    const tabId = `tab-${i}-${j}`;
+                    const tabTitle = tab.querySelector('.tab-title').innerHTML;
+
+                    const tabNavigationItem = document.createElement('button');
+                    tabNavigationItem.classList.add('tab-control');
+                    tabNavigationItem.setAttribute('data-tab-id', tabId);
+                    tabNavigationItem.setAttribute('role', 'tab');
+                    tabNavigationItem.setAttribute('aria-controls', tabId);
+                    if (tab.classList.contains('active')) { selectedTabId = tabId; }
+                    if (tab.classList.contains('disabled')) {
+                        tabNavigationItem.classList.add('disabled');
+                    }
+                    tabNavigationItem.innerHTML = tabTitle;
+                    tabNavigation.appendChild(tabNavigationItem);
+
+                    const tabContent = tab.querySelector('.tab-content');
+                    tabContent.parentElement.setAttribute('id', tabId);
                 });
-            });
-        }
-
-        var request = function(url, onSuccess, onError, payload, options, tries) {
-            var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
-            options = options || {};
-            options.retry = options.retry || false;
-            tries = tries || 1;
-            /* this delays for 125, 375, 625, 875, and 1000, ... */
-            var delay = tries < 5 ? (tries - 0.5) * 250 : 1000;
-
-            xhr.open(options.method || 'GET', url, true);
-            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
-            xhr.onreadystatechange = function(state) {
-                if (4 !== xhr.readyState) {
-                    return null;
-                }
 
-                if (xhr.status == 404 && options.retry && !options.stop) {
-                    setTimeout(function() {
-                        if (options.stop) {
-                            return;
-                        }
-                        request(url, onSuccess, onError, payload, options, tries + 1);
-                    }, delay);
-
-                    return null;
-                }
-
-                if (200 === xhr.status) {
-                    (onSuccess || noop)(xhr);
-                } else {
-                    (onError || noop)(xhr);
-                }
-            };
-
-            if (options.onSend) {
-                options.onSend(tries);
-            }
-
-            xhr.send(payload || '');
-        };
-
-        var getPreference = function(name) {
-            if (!window.localStorage) {
-                return null;
-            }
-
-            return localStorage.getItem(profilerStorageKey + name);
-        };
-
-        var setPreference = function(name, value) {
-            if (!window.localStorage) {
-                return null;
-            }
-
-            localStorage.setItem(profilerStorageKey + name, value);
-        };
-
-        var requestStack = [];
-
-        var extractHeaders = function(xhr, stackElement) {
-            /* Here we avoid to call xhr.getResponseHeader in order to */
-            /* prevent polluting the console with CORS security errors */
-            var allHeaders = xhr.getAllResponseHeaders();
-            var ret;
-
-            if (ret = allHeaders.match(/^x-debug-token:\s+(.*)$/im)) {
-                stackElement.profile = ret[1];
-            }
-            if (ret = allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) {
-                stackElement.profilerUrl = ret[1];
-            }
-            if (ret = allHeaders.match(/^Symfony-Debug-Toolbar-Replace:\s+(.*)$/im)) {
-                stackElement.toolbarReplaceFinished = false;
-                stackElement.toolbarReplace = '1' === ret[1];
-            }
-        };
-
-        var successStreak = 4;
-        var pendingRequests = 0;
-        var renderAjaxRequests = function() {
-            var requestCounter = document.querySelector('.sf-toolbar-ajax-request-counter');
-            if (!requestCounter) {
-                return;
-            }
-            requestCounter.textContent = requestStack.length;
-
-            var infoSpan = document.querySelector(".sf-toolbar-ajax-info");
-            if (infoSpan) {
-                infoSpan.textContent = requestStack.length + ' AJAX request' + (requestStack.length !== 1 ? 's' : '');
-            }
-
-            var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax');
-            if (requestStack.length) {
-                ajaxToolbarPanel.style.display = 'block';
-            } else {
-                ajaxToolbarPanel.style.display = 'none';
-            }
-            if (pendingRequests > 0) {
-                addClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
-            } else if (successStreak < 4) {
-                addClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
-                removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
-            } else {
-                removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
-                removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
-            }
-        };
-
-        var startAjaxRequest = function(index) {
-            var tbody = document.querySelector('.sf-toolbar-ajax-request-list');
-            if (!tbody) {
-                return;
-            }
-
-            var nbOfAjaxRequest = tbody.rows.length;
-            if (nbOfAjaxRequest >= 100) {
-                tbody.deleteRow(0);
-            }
-
-            var request = requestStack[index];
-            pendingRequests++;
-            var row = document.createElement('tr');
-            request.DOMNode = row;
-
-            var requestNumberCell = document.createElement('td');
-            requestNumberCell.textContent = index + 1;
-            row.appendChild(requestNumberCell);
-
-            var profilerCell = document.createElement('td');
-            profilerCell.textContent = 'n/a';
-            row.appendChild(profilerCell);
-
-            var methodCell = document.createElement('td');
-            methodCell.textContent = request.method;
-            row.appendChild(methodCell);
-
-            var typeCell = document.createElement('td');
-            typeCell.textContent = request.type;
-            row.appendChild(typeCell);
-
-            var statusCodeCell = document.createElement('td');
-            var statusCode = document.createElement('span');
-            statusCode.textContent = 'n/a';
-            statusCodeCell.appendChild(statusCode);
-            row.appendChild(statusCodeCell);
-
-            var pathCell = document.createElement('td');
-            pathCell.className = 'sf-ajax-request-url';
-            if ('GET' === request.method) {
-                var pathLink = document.createElement('a');
-                pathLink.setAttribute('href', request.url);
-                pathLink.textContent = request.url;
-                pathCell.appendChild(pathLink);
-            } else {
-                pathCell.textContent = request.url;
-            }
-            pathCell.setAttribute('title', request.url);
-            row.appendChild(pathCell);
-
-            var durationCell = document.createElement('td');
-            durationCell.className = 'sf-ajax-request-duration';
-            durationCell.textContent = 'n/a';
-            row.appendChild(durationCell);
-
-            request.liveDurationHandle = setInterval(function() {
-                durationCell.textContent = (new Date() - request.start) + ' ms';
-            }, 100);
-
-            row.className = 'sf-ajax-request sf-ajax-request-loading';
-            tbody.insertBefore(row, null);
-
-            var toolbarInfo = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
-            toolbarInfo.scrollTop = toolbarInfo.scrollHeight;
-
-            renderAjaxRequests();
-        };
-
-        var finishAjaxRequest = function(index) {
-            var request = requestStack[index];
-            clearInterval(request.liveDurationHandle);
-
-            if (!request.DOMNode) {
-                return;
-            }
-
-            if (request.toolbarReplace && !request.toolbarReplaceFinished && request.profile) {
-                /* Flag as complete because finishAjaxRequest can be called multiple times. */
-                request.toolbarReplaceFinished = true;
-                /* Search up through the DOM to find the toolbar's container ID. */
-                for (var elem = request.DOMNode; elem && elem !== document; elem = elem.parentNode) {
-                    if (elem.id.match(/^sfwdt/)) {
-                        Sfjs.loadToolbar(elem.id.replace(/^sfwdt/, ''), request.profile);
-                        break;
-                    }
-                }
-            }
-
-            pendingRequests--;
-            var row = request.DOMNode;
-            /* Unpack the children from the row */
-            var profilerCell = row.children[1];
-            var methodCell = row.children[2];
-            var statusCodeCell = row.children[4];
-            var statusCodeElem = statusCodeCell.children[0];
-            var durationCell = row.children[6];
-
-            if (request.error) {
-                row.className = 'sf-ajax-request sf-ajax-request-error';
-                methodCell.className = 'sf-ajax-request-error';
-                successStreak = 0;
-            } else {
-                row.className = 'sf-ajax-request sf-ajax-request-ok';
-                successStreak++;
-            }
-
-            if (request.statusCode) {
-                if (request.statusCode < 300) {
-                    statusCodeElem.setAttribute('class', 'sf-toolbar-status');
-                } else if (request.statusCode < 400) {
-                    statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-yellow');
-                } else {
-                    statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
-                }
-                statusCodeElem.textContent = request.statusCode;
-            } else {
-                statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
-            }
-
-            if (request.duration) {
-                durationCell.textContent = request.duration + ' ms';
-            }
-
-            if (request.profilerUrl) {
-                profilerCell.textContent = '';
-                var profilerLink = document.createElement('a');
-                profilerLink.setAttribute('href', request.profilerUrl);
-                profilerLink.textContent = request.profile;
-                profilerCell.appendChild(profilerLink);
-            }
-
-            renderAjaxRequests();
-        };
-
-        {% if excluded_ajax_paths is defined %}
-            if (window.fetch && window.fetch.polyfill === undefined) {
-                var oldFetch = window.fetch;
-                window.fetch = function () {
-                    var promise = oldFetch.apply(this, arguments);
-                    var url = arguments[0];
-                    var params = arguments[1];
-                    var paramType = Object.prototype.toString.call(arguments[0]);
-                    if (paramType === '[object Request]') {
-                        url = arguments[0].url;
-                        params = {
-                            method: arguments[0].method,
-                            credentials: arguments[0].credentials,
-                            headers: arguments[0].headers,
-                            mode: arguments[0].mode,
-                            redirect: arguments[0].redirect
-                        };
-                    } else {
-                        url = String(url);
-                    }
-                    if (!url.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
-                        var method = 'GET';
-                        if (params && params.method !== undefined) {
-                            method = params.method;
-                        }
-
-                        var stackElement = {
-                            error: false,
-                            url: url,
-                            method: method,
-                            type: 'fetch',
-                            start: new Date()
-                        };
-
-                        var idx = requestStack.push(stackElement) - 1;
-                        promise.then(function (r) {
-                            stackElement.duration = new Date() - stackElement.start;
-                            stackElement.error = r.status < 200 || r.status >= 400;
-                            stackElement.statusCode = r.status;
-                            stackElement.profile = r.headers.get('x-debug-token');
-                            stackElement.profilerUrl = r.headers.get('x-debug-token-link');
-                            stackElement.toolbarReplaceFinished = false;
-                            stackElement.toolbarReplace = '1' === r.headers.get('Symfony-Debug-Toolbar-Replace');
-                            finishAjaxRequest(idx);
-                        }, function (e){
-                            stackElement.error = true;
-                            finishAjaxRequest(idx);
-                        });
-                        startAjaxRequest(idx);
-                    }
-
-                    return promise;
-                };
-            }
-            if (window.XMLHttpRequest && XMLHttpRequest.prototype.addEventListener) {
-                var proxied = XMLHttpRequest.prototype.open;
-
-                XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
-                    var self = this;
-
-                    /* prevent logging AJAX calls to static and inline files, like templates */
-                    var path = url;
-                    if (url.slice(0, 1) === '/') {
-                        if (0 === url.indexOf('{{ request.basePath|e('js') }}')) {
-                            path = url.slice({{ request.basePath|length }});
-                        }
-                    }
-                    else if (0 === url.indexOf('{{ (request.schemeAndHttpHost ~ request.basePath)|e('js') }}')) {
-                        path = url.slice({{ (request.schemeAndHttpHost ~ request.basePath)|length }});
-                    }
-
-                    if (!path.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
-                        var stackElement = {
-                            error: false,
-                            url: url,
-                            method: method,
-                            type: 'xhr',
-                            start: new Date()
-                        };
-
-                        var idx = requestStack.push(stackElement) - 1;
-
-                        this.addEventListener('readystatechange', function() {
-                            if (self.readyState == 4) {
-                                stackElement.duration = new Date() - stackElement.start;
-                                stackElement.error = self.status < 200 || self.status >= 400;
-                                stackElement.statusCode = self.status;
-                                extractHeaders(self, stackElement);
-
-                                finishAjaxRequest(idx);
-                            }
-                        }, false);
-
-                        startAjaxRequest(idx);
-                    }
-
-                    proxied.apply(this, Array.prototype.slice.call(arguments));
-                };
-            }
-        {% endif %}
-
-        return {
-            hasClass: hasClass,
-
-            removeClass: removeClass,
-
-            addClass: addClass,
-
-            toggleClass: toggleClass,
-
-            getPreference: getPreference,
-
-            setPreference: setPreference,
-
-            addEventListener: addEventListener,
-
-            request: request,
-
-            renderAjaxRequests: renderAjaxRequests,
-
-            getSfwdt: function(token) {
-                if (!this.sfwdt) {
-                    this.sfwdt = document.getElementById('sfwdt' + token);
-                }
-
-                return this.sfwdt;
-            },
-
-            load: function(selector, url, onSuccess, onError, options) {
-                var el = document.getElementById(selector);
-
-                if (el && el.getAttribute('data-sfurl') !== url) {
-                    request(
-                        url,
-                        function(xhr) {
-                            el.innerHTML = xhr.responseText;
-                            el.setAttribute('data-sfurl', url);
-                            removeClass(el, 'loading');
-                            var pending = pendingRequests;
-                            for (var i = 0; i < requestStack.length; i++) {
-                                startAjaxRequest(i);
-                                if (requestStack[i].duration) {
-                                    finishAjaxRequest(i);
-                                }
-                            }
-                            /* Revert the pending state in case there was a start called without a finish above. */
-                            pendingRequests = pending;
-                            (onSuccess || noop)(xhr, el);
-                        },
-                        function(xhr) { (onError || noop)(xhr, el); },
-                        '',
-                        options
-                    );
-                }
-
-                return this;
-            },
-
-            showToolbar: function(token) {
-                var sfwdt = this.getSfwdt(token);
-                removeClass(sfwdt, 'sf-display-none');
-
-                if (getPreference('toolbar/displayState') == 'none') {
-                    document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
-                    document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
-                    document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
-                } else {
-                    document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
-                    document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
-                    document.getElementById('sfMiniToolbar-' + token).style.display = 'none';
-                }
-            },
-
-            hideToolbar: function(token) {
-                var sfwdt = this.getSfwdt(token);
-                addClass(sfwdt, 'sf-display-none');
-            },
-
-            initToolbar: function(token) {
-                this.showToolbar(token);
-
-                var hideButton = document.getElementById('sfToolbarHideButton-' + token);
-                var hideButtonSvg = hideButton.querySelector('svg');
-                hideButtonSvg.setAttribute('aria-hidden', 'true');
-                hideButtonSvg.setAttribute('focusable', 'false');
-                addEventListener(hideButton, 'click', function (event) {
-                    event.preventDefault();
-
-                    var p = this.parentNode;
-                    p.style.display = 'none';
-                    (p.previousElementSibling || p.previousSibling).style.display = 'none';
-                    document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
-                    setPreference('toolbar/displayState', 'none');
-                });
+                tabGroup.insertBefore(tabNavigation, tabGroup.firstChild);
+                document.querySelector('[data-tab-id="' + selectedTabId + '"]').classList.add('active');
+            });
 
-                var showButton = document.getElementById('sfToolbarMiniToggler-' + token);
-                var showButtonSvg = showButton.querySelector('svg');
-                showButtonSvg.setAttribute('aria-hidden', 'true');
-                showButtonSvg.setAttribute('focusable', 'false');
-                addEventListener(showButton, 'click', function (event) {
-                    event.preventDefault();
-
-                    var elem = this.parentNode;
-                    if (elem.style.display == 'none') {
-                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
-                        document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
-                        elem.style.display = 'block';
+            /* display the active tab and add the 'click' event listeners */
+            tabGroups.forEach((tabGroup) => {
+                const tabs = tabGroup.querySelectorAll(':scope > .tab-navigation .tab-control');
+                tabs.forEach((tab) => {
+                    const tabId = tab.getAttribute('data-tab-id');
+                    const tabPanel = document.getElementById(tabId);
+                    tabPanel.setAttribute('role', 'tabpanel');
+                    tabPanel.setAttribute('aria-labelledby', tabId);
+                    tabPanel.querySelector('.tab-title').className = 'hidden';
+
+                    if (tab.classList.contains('active')) {
+                        tabPanel.className = 'block';
+                        tab.setAttribute('aria-selected', 'true');
+                        tab.removeAttribute('tabindex');
                     } else {
-                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
-                        document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
-                        elem.style.display = 'none'
+                        tabPanel.className = 'hidden';
+                        tab.removeAttribute('aria-selected');
+                        tab.setAttribute('tabindex', '-1');
                     }
 
-                    setPreference('toolbar/displayState', 'block');
-                });
-            },
-
-            loadToolbar: function(token, newToken) {
-                var that = this;
-                var triesCounter = document.getElementById('sfLoadCounter-' + token);
-
-                var options = {
-                    retry: true,
-                    onSend: function (count) {
-                        if (count === 3) {
-                            that.initToolbar(token);
-                        }
+                    tab.addEventListener('click', function(e) {
+                        const activeTab = e.target || e.srcElement;
 
-                        if (triesCounter) {
-                            triesCounter.textContent = count;
+                        /* needed because when the tab contains HTML contents, user can click */
+                        /* on any of those elements instead of their parent '<button>' element */
+                        while ('button' !== activeTab.tagName.toLowerCase()) {
+                            activeTab = activeTab.parentNode;
                         }
-                    },
-                };
-
-                var cancelButton = document.getElementById('sfLoadCancel-' + token);
-                if (cancelButton) {
-                    addEventListener(cancelButton, 'click', function (event) {
-                        event.preventDefault();
-
-                        options.stop = true;
-                        that.hideToolbar(token);
-                    });
-                }
 
-                newToken = (newToken || token);
-
-                this.load(
-                    'sfwdt' + token,
-                    '{{ url("_wdt", { "token": "xxxxxx" })|escape('js') }}'.replace(/xxxxxx/, newToken),
-                    function(xhr, el) {
-                        /* Do nothing in the edge case where the toolbar has already been replaced with a new one */
-                        if (!document.getElementById('sfToolbarMainContent-' + newToken)) {
-                            return;
-                        }
-
-                        /* Evaluate in global scope scripts embedded inside the toolbar */
-                        var i, scripts = [].slice.call(el.querySelectorAll('script'));
-                        for (i = 0; i < scripts.length; ++i) {
-                            eval.call({}, scripts[i].firstChild.nodeValue);
-                        }
-
-                        el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
-
-                        if (el.style.display == 'none') {
-                            return;
-                        }
-
-                        that.initToolbar(newToken);
-
-                        /* Handle toolbar-info position */
-                        var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block'));
-                        for (i = 0; i < toolbarBlocks.length; ++i) {
-                            toolbarBlocks[i].onmouseover = function () {
-                                var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0];
-                                var pageWidth = document.body.clientWidth;
-                                var elementWidth = toolbarInfo.offsetWidth;
-                                var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
-                                var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
-
-                                /* Reset right and left value, useful on window resize */
-                                toolbarInfo.style.right = '';
-                                toolbarInfo.style.left = '';
-
-                                if (elementWidth > pageWidth) {
-                                    toolbarInfo.style.left = 0;
-                                }
-                                else if (leftValue > 0 && rightValue > 0) {
-                                    toolbarInfo.style.right = (rightValue * -1) + 'px';
-                                } else if (leftValue < 0) {
-                                    toolbarInfo.style.left = 0;
-                                } else {
-                                    toolbarInfo.style.right = '0px';
-                                }
-                            };
-                        }
-
-                        renderAjaxRequests();
-                        addEventListener(document.querySelector('.sf-toolbar-ajax-clear'), 'click', function() {
-                            requestStack = [];
-                            renderAjaxRequests();
-                            successStreak = 4;
-                            document.querySelector('.sf-toolbar-ajax-request-list').innerHTML = '';
-                        });
-                        addEventListener(document.querySelector('.sf-toolbar-block-ajax'), 'mouseenter', function (event) {
-                            var elem = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
-                            elem.scrollTop = elem.scrollHeight;
+                        /* get the full list of tabs through the parent of the active tab element */
+                        const tabs = Array.from(activeTab.parentNode.children);
+                        tabs.forEach((tab) => {
+                            const tabId = tab.getAttribute('data-tab-id');
+                            document.getElementById(tabId).className = 'hidden';
+                            tab.classList.remove('active');
+                            tab.removeAttribute('aria-selected');
+                            tab.setAttribute('tabindex', '-1');
                         });
-                        addEventListener(document.querySelector('.sf-toolbar-block-ajax > .sf-toolbar-icon'), 'click', function (event) {
-                            event.preventDefault();
-
-                            toggleClass(this.parentNode, 'hover');
-                        });
-
-                        var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info');
-                        if (null !== dumpInfo) {
-                            addEventListener(dumpInfo, 'sfbeforedumpcollapse', function () {
-                                dumpInfo.style.minHeight = dumpInfo.getBoundingClientRect().height+'px';
-                            });
-                            addEventListener(dumpInfo, 'mouseleave', function () {
-                                dumpInfo.style.minHeight = '';
-                            });
-                        }
-                    },
-                    function(xhr) {
-                        if (xhr.status !== 0 && !options.stop) {
-                            var sfwdt = that.getSfwdt(token);
-                            sfwdt.innerHTML = '\
-                                <div class="sf-toolbarreset notranslate">\
-                                    <div class="sf-toolbar-icon"><svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\
-                                    An error occurred while loading the web debug toolbar. <a href="{{ url("_profiler_home")|escape('js') }}' + newToken + '>Open the web profiler.</a>\
-                                </div>\
-                            ';
-                            sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar');
-                        }
-                    },
-                    options
-                );
-
-                return this;
-            },
-
-            toggle: function(selector, elOn, elOff) {
-                var tmp = elOn.style.display,
-                    el = document.getElementById(selector);
-
-                elOn.style.display = elOff.style.display;
-                elOff.style.display = tmp;
 
-                if (el) {
-                    el.style.display = 'none' === tmp ? 'none' : 'block';
-                }
-
-                return this;
-            },
-
-            createTabs: function() {
-                /* the accessibility options of this component have been defined according to: */
-                /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */
-                var tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
-
-                /* create the tab navigation for each group of tabs */
-                for (var i = 0; i < tabGroups.length; i++) {
-                    var tabs = tabGroups[i].querySelectorAll(':scope > .tab');
-                    var tabNavigation = document.createElement('div');
-                    tabNavigation.className = 'tab-navigation';
-                    tabNavigation.setAttribute('role', 'tablist');
-
-                    var selectedTabId = 'tab-' + i + '-0'; /* select the first tab by default */
-                    for (var j = 0; j < tabs.length; j++) {
-                        var tabId = 'tab-' + i + '-' + j;
-                        var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;
-
-                        var tabNavigationItem = document.createElement('button');
-                        tabNavigationItem.classList.add('tab-control');
-                        tabNavigationItem.setAttribute('data-tab-id', tabId);
-                        tabNavigationItem.setAttribute('role', 'tab');
-                        tabNavigationItem.setAttribute('aria-controls', tabId);
-                        if (hasClass(tabs[j], 'active')) { selectedTabId = tabId; }
-                        if (hasClass(tabs[j], 'disabled')) {
-                            addClass(tabNavigationItem, 'disabled');
-                        }
-                        tabNavigationItem.innerHTML = tabTitle;
-                        tabNavigation.appendChild(tabNavigationItem);
-
-                        var tabContent = tabs[j].querySelector('.tab-content');
-                        tabContent.parentElement.setAttribute('id', tabId);
-                    }
+                        activeTab.classList.add('active');
+                        activeTab.setAttribute('aria-selected', 'true');
+                        activeTab.removeAttribute('tabindex');
+                        const activeTabId = activeTab.getAttribute('data-tab-id');
+                        document.getElementById(activeTabId).className = 'block';
+                    });
+                });
 
-                    tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
-                    addClass(document.querySelector('[data-tab-id="' + selectedTabId + '"]'), 'active');
-                }
+                tabGroup.setAttribute('data-processed', 'true');
+            });
+        }
 
-                /* display the active tab and add the 'click' event listeners */
-                for (i = 0; i < tabGroups.length; i++) {
-                    tabNavigation = tabGroups[i].querySelectorAll(':scope > .tab-navigation .tab-control');
-
-                    for (j = 0; j < tabNavigation.length; j++) {
-                        tabId = tabNavigation[j].getAttribute('data-tab-id');
-                        const tabPanel = document.getElementById(tabId);
-                        tabPanel.setAttribute('role', 'tabpanel');
-                        tabPanel.setAttribute('aria-labelledby', tabId);
-                        tabPanel.querySelector('.tab-title').className = 'hidden';
-
-                        if (hasClass(tabNavigation[j], 'active')) {
-                            tabPanel.className = 'block';
-                            tabNavigation[j].setAttribute('aria-selected', 'true');
-                            tabNavigation[j].removeAttribute('tabindex');
-                        } else {
-                            tabPanel.className = 'hidden';
-                            tabNavigation[j].removeAttribute('aria-selected');
-                            tabNavigation[j].setAttribute('tabindex', '-1');
-                        }
+        #createToggles() {
+            const toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
+            toggles.forEach((toggle) => {
+                const elementSelector = toggle.getAttribute('data-toggle-selector');
+                const element = document.querySelector(elementSelector);
 
-                        tabNavigation[j].addEventListener('click', function(e) {
-                            var activeTab = e.target || e.srcElement;
-
-                            /* needed because when the tab contains HTML contents, user can click */
-                            /* on any of those elements instead of their parent '<button>' element */
-                            while (activeTab.tagName.toLowerCase() !== 'button') {
-                                activeTab = activeTab.parentNode;
-                            }
-
-                            /* get the full list of tabs through the parent of the active tab element */
-                            var tabNavigation = activeTab.parentNode.children;
-                            for (var k = 0; k < tabNavigation.length; k++) {
-                                var tabId = tabNavigation[k].getAttribute('data-tab-id');
-                                document.getElementById(tabId).className = 'hidden';
-                                removeClass(tabNavigation[k], 'active');
-                                tabNavigation[k].removeAttribute('aria-selected');
-                                tabNavigation[k].setAttribute('tabindex', '-1');
-                            }
-
-                            addClass(activeTab, 'active');
-                            activeTab.setAttribute('aria-selected', 'true');
-                            activeTab.removeAttribute('tabindex');
-                            var activeTabId = activeTab.getAttribute('data-tab-id');
-                            document.getElementById(activeTabId).className = 'block';
-                        });
-                    }
+                element.classList.add('sf-toggle-content');
 
-                    tabGroups[i].setAttribute('data-processed', 'true');
+                if (toggle.hasAttribute('data-toggle-initial') && 'display' === toggle.getAttribute('data-toggle-initial')) {
+                    toggle.classList.add('sf-toggle-on');
+                    element.classList.add('sf-toggle-visible');
+                } else {
+                    toggle.classList.add('sf-toggle-off');
+                    element.classList.add('sf-toggle-hidden');
                 }
-            },
 
-            createToggles: function() {
-                var toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
+                toggle.addEventListener('click', (e) => {
+                    e.preventDefault();
 
-                for (var i = 0; i < toggles.length; i++) {
-                    var elementSelector = toggles[i].getAttribute('data-toggle-selector');
-                    var element = document.querySelector(elementSelector);
-
-                    addClass(element, 'sf-toggle-content');
-
-                    if (toggles[i].hasAttribute('data-toggle-initial') && toggles[i].getAttribute('data-toggle-initial') == 'display') {
-                        addClass(toggles[i], 'sf-toggle-on');
-                        addClass(element, 'sf-toggle-visible');
-                    } else {
-                        addClass(toggles[i], 'sf-toggle-off');
-                        addClass(element, 'sf-toggle-hidden');
+                    if ('' !== window.getSelection().toString()) {
+                        /* Don't do anything on text selection */
+                        return;
                     }
 
-                    addEventListener(toggles[i], 'click', function(e) {
-                        e.preventDefault();
-
-                        if ('' !== window.getSelection().toString()) {
-                            /* Don't do anything on text selection */
-                            return;
-                        }
-
-                        var toggle = e.target || e.srcElement;
-
-                        /* needed because when the toggle contains HTML contents, user can click */
-                        /* on any of those elements instead of their parent '.sf-toggle' element */
-                        while (!hasClass(toggle, 'sf-toggle')) {
-                            toggle = toggle.parentNode;
-                        }
-
-                        var element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
-
-                        toggleClass(toggle, 'sf-toggle-on');
-                        toggleClass(toggle, 'sf-toggle-off');
-                        toggleClass(element, 'sf-toggle-hidden');
-                        toggleClass(element, 'sf-toggle-visible');
-
-                        /* the toggle doesn't change its contents when clicking on it */
-                        if (!toggle.hasAttribute('data-toggle-alt-content')) {
-                            return;
-                        }
-
-                        if (!toggle.hasAttribute('data-toggle-original-content')) {
-                            toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
-                        }
+                    /* needed because when the toggle contains HTML contents, user can click */
+                    /* on any of those elements instead of their parent '.sf-toggle' element */
+                    const toggle = e.target.closest('.sf-toggle');
+                    const element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
 
-                        var currentContent = toggle.innerHTML;
-                        var originalContent = toggle.getAttribute('data-toggle-original-content');
-                        var altContent = toggle.getAttribute('data-toggle-alt-content');
-                        toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
-                    });
+                    toggle.classList.toggle('sf-toggle-on');
+                    toggle.classList.toggle('sf-toggle-off');
+                    element.classList.toggle('sf-toggle-hidden');
+                    element.classList.toggle('sf-toggle-visible');
 
-                    /* Prevents from disallowing clicks on links inside toggles */
-                    var toggleLinks = toggles[i].querySelectorAll('a');
-                    for (var j = 0; j < toggleLinks.length; j++) {
-                        addEventListener(toggleLinks[j], 'click', function(e) {
-                            e.stopPropagation();
-                        });
+                    /* the toggle doesn't change its contents when clicking on it */
+                    if (!toggle.hasAttribute('data-toggle-alt-content')) {
+                        return;
                     }
 
-                    /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
-                    var copyToClipboardElements = toggles[i].querySelectorAll('span[data-clipboard-text]');
-                    for (var k = 0; k < copyToClipboardElements.length; k++) {
-                        addEventListener(copyToClipboardElements[k], 'click', function(e) {
-                            e.stopPropagation();
-                        });
+                    if (!toggle.hasAttribute('data-toggle-original-content')) {
+                        toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
                     }
 
-                    toggles[i].setAttribute('data-processed', 'true');
-                }
-            },
-
-            initializeLogsTable: function() {
-                Sfjs.updateLogsTable();
-
-                document.querySelectorAll('.log-filter input').forEach((input) => {
-                    input.addEventListener('change', () => { Sfjs.updateLogsTable(); });
+                    const currentContent = toggle.innerHTML;
+                    const originalContent = toggle.getAttribute('data-toggle-original-content');
+                    const altContent = toggle.getAttribute('data-toggle-alt-content');
+                    toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
                 });
 
-                document.querySelectorAll('.filter-select-all-or-none button').forEach((link) => {
-                    link.addEventListener('click', () => {
-                        const selectAll = link.classList.contains('select-all');
-                        link.closest('.log-filter-content').querySelectorAll('input').forEach((input) => {
-                            input.checked = selectAll;
-                        });
-
-                        Sfjs.updateLogsTable();
+                /* Prevents from disallowing clicks on links inside toggles */
+                const toggleLinks = toggle.querySelectorAll('a');
+                toggleLinks.forEach((toggleLink) => {
+                    toggleLink.addEventListener('click', (e) => {
+                        e.stopPropagation();
                     });
                 });
 
-                document.body.addEventListener('click', (event) => {
-                    document.querySelectorAll('details.log-filter').forEach((filterElement) => {
-                        if (!filterElement.contains(event.target) && filterElement.open) {
-                            filterElement.open = false;
-                        }
+                /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
+                const copyToClipboardElements = toggle.querySelectorAll('span[data-clipboard-text]');
+                copyToClipboardElements.forEach((copyToClipboardElement) => {
+                    copyToClipboardElement.addEventListener('click', (e) => {
+                        e.stopPropagation();
                     });
                 });
-            },
-
-            initializeMailerTable: function() {
-                const emailRows = document.querySelectorAll('.mailer-email-summary-table-row');
-
-                emailRows.forEach((emailRow) => {
-                    emailRow.addEventListener('click', () => {
-                        emailRows.forEach((row) => row.classList.remove('active'));
-                        emailRow.classList.add('active');
 
-                        document.querySelectorAll('.mailer-email-details').forEach((emailDetails) => emailDetails.style.display = 'none');
-                        document.querySelector(emailRow.getAttribute('data-target')).style.display = 'block';
-                    });
-                });
-            },
+                toggle.setAttribute('data-processed', 'true');
+            });
+        }
 
-            updateLogsTable: function() {
-                const logs = document.querySelector('table.logs');
-                if (null === logs) {
-                    return;
+        #convertDateTimesToUserTimezone() {
+            const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+            document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => {
+                const iso8601Datetime = timeElement.getAttribute('datetime');
+                const dateInUserTimezone = new Date(iso8601Datetime);
+
+                let options = {};
+                if (timeElement.hasAttribute('data-render-as-datetime')) {
+                    options = {
+                        year: 'numeric', month: 'long', day: 'numeric',
+                        hour: 'numeric', minute: 'numeric', second: 'numeric'
+                    };
+                } else if (timeElement.hasAttribute('data-render-as-date')) {
+                    options = { year: 'numeric', month: 'long', day: 'numeric' };
+                } else if (timeElement.hasAttribute('data-render-as-time')) {
+                    options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
                 }
 
-                const selectedType = document.querySelector('#log-filter-type input:checked').value;
-                const priorities = document.querySelectorAll('#log-filter-priority input');
-                const allPriorities = Array.from(priorities).map((input) => input.value);
-                const selectedPriorities = Array.from(priorities).filter((input) => input.checked).map((input) => input.value);
-                const channels = document.querySelectorAll('#log-filter-channel input');
-                const selectedChannels = Array.from(channels).filter((input) => input.checked).map((input) => input.value);
-
-                /* hide rows that don't match the current filters */
-                let numVisibleRows = 0;
-                logs.querySelectorAll('tbody tr').forEach((row) => {
-                    if ('all' !== selectedType && selectedType !== row.getAttribute('data-type')) {
-                        row.style.display = 'none';
-                        return;
-                    }
-
-                    const priority = row.getAttribute('data-priority');
-                    if (false === selectedPriorities.includes(priority) && true === allPriorities.includes(priority)) {
-                        row.style.display = 'none';
-                        return;
-                    }
-
-                    if ('' !== row.getAttribute('data-channel') && false === selectedChannels.includes(row.getAttribute('data-channel'))) {
-                        row.style.display = 'none';
-                        return;
-                    }
-
-                    row.style.display = 'table-row';
-                    numVisibleRows++;
-                });
-
-                document.querySelector('table.logs').style.display = 0 === numVisibleRows ? 'none' : 'table';
-                document.querySelector('.no-logs-message').style.display = 0 === numVisibleRows ? 'block' : 'none';
-
-                /* update the selected totals of all filters */
-                document.querySelector('#log-filter-priority .filter-active-num').innerText = (priorities.length === selectedPriorities.length) ? 'All' : selectedPriorities.length;
-                document.querySelector('#log-filter-channel .filter-active-num').innerText = (channels.length === selectedChannels.length) ? 'All' : selectedChannels.length;
-            },
-
-            convertDateTimesToUserTimezone: function() {
-                const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-                document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => {
-                    const iso8601Datetime = timeElement.getAttribute('datetime');
-                    const dateInUserTimezone = new Date(iso8601Datetime);
-
-                    let options = {};
-                    if (timeElement.hasAttribute('data-render-as-datetime')) {
-                        options = {
-                            year: 'numeric', month: 'long', day: 'numeric',
-                            hour: 'numeric', minute: 'numeric', second: 'numeric'
-                        };
-                    } else if (timeElement.hasAttribute('data-render-as-date')) {
-                        options = { year: 'numeric', month: 'long', day: 'numeric' };
-                    } else if (timeElement.hasAttribute('data-render-as-time')) {
-                        options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
-                    }
-
-                    if (timeElement.hasAttribute('data-render-with-millisecond-precision')) {
-                        options.fractionalSecondDigits = 3;
-                    }
+                if (timeElement.hasAttribute('data-render-with-millisecond-precision')) {
+                    options.fractionalSecondDigits = 3;
+                }
 
-                    /* dates/times are always rendered in English to match the rest of the Profiler interface */
-                    timeElement.textContent = dateInUserTimezone.toLocaleString('en', options);
+                /* dates/times are always rendered in English to match the rest of the Profiler interface */
+                timeElement.textContent = dateInUserTimezone.toLocaleString('en', options);
 
-                    if (undefined !== userTimezoneName) {
-                        const existingTitle = timeElement.getAttribute('title');
-                        const newTitle = null === existingTitle
-                            ? `Date/times shown in your timezone: ${userTimezoneName}`
-                            : existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`;
-                        timeElement.setAttribute('title', newTitle);
-                    }
-                });
-            },
-        };
-    })();
-
-    Sfjs.addEventListener(document, 'DOMContentLoaded', function() {
-        Sfjs.createTabs();
-        Sfjs.createToggles();
-        Sfjs.convertDateTimesToUserTimezone();
-    });
-}
-/*]]>*/</script>
+                if (undefined !== userTimezoneName) {
+                    const existingTitle = timeElement.getAttribute('title');
+                    const newTitle = null === existingTitle
+                        ? `Date/times shown in your timezone: ${userTimezoneName}`
+                        : existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`;
+                    timeElement.setAttribute('title', newTitle);
+                }
+            });
+        }
+    }
+</script>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
index e0f31ba307abc..9d06ed835ad91 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
@@ -9,13 +9,673 @@
     }) }}
 </div>
 
-{{ include('@WebProfiler/Profiler/base_js.html.twig') }}
-
 <style{% if csp_style_nonce %} nonce="{{ csp_style_nonce }}"{% endif %}>
     {{ include('@WebProfiler/Profiler/toolbar.css.twig') }}
 </style>
-<script{% if csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>/*<![CDATA[*/
-    (function () {
-        Sfjs.loadToolbar('{{ token }}');
-    })();
+
+{# CAUTION: the contents of this file are processed by Twig before loading
+            them as JavaScript source code. Always use '/*' comments instead
+            of '//' comments to avoid impossible-to-debug side-effects #}
+<script{% if csp_script_nonce is defined and csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>/*<![CDATA[*/
+    if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
+        Sfjs = (function() {
+            "use strict";
+
+            if ('classList' in document.documentElement) {
+                var hasClass = function (el, cssClass) { return el.classList.contains(cssClass); };
+                var removeClass = function(el, cssClass) { el.classList.remove(cssClass); };
+                var addClass = function(el, cssClass) { el.classList.add(cssClass); };
+                var toggleClass = function(el, cssClass) { el.classList.toggle(cssClass); };
+            } else {
+                var hasClass = function (el, cssClass) { return el.className.match(new RegExp('\\b' + cssClass + '\\b')); };
+                var removeClass = function(el, cssClass) { el.className = el.className.replace(new RegExp('\\b' + cssClass + '\\b'), ' '); };
+                var addClass = function(el, cssClass) { if (!hasClass(el, cssClass)) { el.className += " " + cssClass; } };
+                var toggleClass = function(el, cssClass) { hasClass(el, cssClass) ? removeClass(el, cssClass) : addClass(el, cssClass); };
+            }
+
+            var noop = function() {};
+
+            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);
+                };
+            }
+
+            if (navigator.clipboard) {
+                document.addEventListener('readystatechange', () => {
+                    if (document.readyState !== 'complete') {
+                        return;
+                    }
+
+                    document.querySelectorAll('[data-clipboard-text]').forEach(function (element) {
+                        removeClass(element, 'hidden');
+                        element.addEventListener('click', function () {
+                            navigator.clipboard.writeText(element.getAttribute('data-clipboard-text'));
+
+                            if (element.classList.contains("label")) {
+                                let oldContent = element.textContent;
+
+                                element.textContent = "✅ Copied!";
+                                element.classList.add("status-success");
+
+                                setTimeout(() => {
+                                    element.textContent = oldContent;
+                                    element.classList.remove("status-success");
+                                }, 7000);
+                            }
+                        });
+                    });
+                });
+            }
+
+            var request = function(url, onSuccess, onError, payload, options, tries) {
+                var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
+                options = options || {};
+                options.retry = options.retry || false;
+                tries = tries || 1;
+                /* this delays for 125, 375, 625, 875, and 1000, ... */
+                var delay = tries < 5 ? (tries - 0.5) * 250 : 1000;
+
+                xhr.open(options.method || 'GET', url, true);
+                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+                xhr.onreadystatechange = function(state) {
+                    if (4 !== xhr.readyState) {
+                        return null;
+                    }
+
+                    if (xhr.status == 404 && options.retry && !options.stop) {
+                        setTimeout(function() {
+                            if (options.stop) {
+                                return;
+                            }
+                            request(url, onSuccess, onError, payload, options, tries + 1);
+                        }, delay);
+
+                        return null;
+                    }
+
+                    if (200 === xhr.status) {
+                        (onSuccess || noop)(xhr);
+                    } else {
+                        (onError || noop)(xhr);
+                    }
+                };
+
+                if (options.onSend) {
+                    options.onSend(tries);
+                }
+
+                xhr.send(payload || '');
+            };
+
+            var getPreference = function(name) {
+                if (!window.localStorage) {
+                    return null;
+                }
+
+                return localStorage.getItem(profilerStorageKey + name);
+            };
+
+            var setPreference = function(name, value) {
+                if (!window.localStorage) {
+                    return null;
+                }
+
+                localStorage.setItem(profilerStorageKey + name, value);
+            };
+
+            var requestStack = [];
+
+            var extractHeaders = function(xhr, stackElement) {
+                /* Here we avoid to call xhr.getResponseHeader in order to */
+                /* prevent polluting the console with CORS security errors */
+                var allHeaders = xhr.getAllResponseHeaders();
+                var ret;
+
+                if (ret = allHeaders.match(/^x-debug-token:\s+(.*)$/im)) {
+                    stackElement.profile = ret[1];
+                }
+                if (ret = allHeaders.match(/^x-debug-token-link:\s+(.*)$/im)) {
+                    stackElement.profilerUrl = ret[1];
+                }
+                if (ret = allHeaders.match(/^Symfony-Debug-Toolbar-Replace:\s+(.*)$/im)) {
+                    stackElement.toolbarReplaceFinished = false;
+                    stackElement.toolbarReplace = '1' === ret[1];
+                }
+            };
+
+            var successStreak = 4;
+            var pendingRequests = 0;
+            var renderAjaxRequests = function() {
+                var requestCounter = document.querySelector('.sf-toolbar-ajax-request-counter');
+                if (!requestCounter) {
+                    return;
+                }
+                requestCounter.textContent = requestStack.length;
+
+                var infoSpan = document.querySelector(".sf-toolbar-ajax-info");
+                if (infoSpan) {
+                    infoSpan.textContent = requestStack.length + ' AJAX request' + (requestStack.length !== 1 ? 's' : '');
+                }
+
+                var ajaxToolbarPanel = document.querySelector('.sf-toolbar-block-ajax');
+                if (requestStack.length) {
+                    ajaxToolbarPanel.style.display = 'block';
+                } else {
+                    ajaxToolbarPanel.style.display = 'none';
+                }
+                if (pendingRequests > 0) {
+                    addClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
+                } else if (successStreak < 4) {
+                    addClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
+                    removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
+                } else {
+                    removeClass(ajaxToolbarPanel, 'sf-ajax-request-loading');
+                    removeClass(ajaxToolbarPanel, 'sf-toolbar-status-red');
+                }
+            };
+
+            var startAjaxRequest = function(index) {
+                var tbody = document.querySelector('.sf-toolbar-ajax-request-list');
+                if (!tbody) {
+                    return;
+                }
+
+                var nbOfAjaxRequest = tbody.rows.length;
+                if (nbOfAjaxRequest >= 100) {
+                    tbody.deleteRow(0);
+                }
+
+                var request = requestStack[index];
+                pendingRequests++;
+                var row = document.createElement('tr');
+                request.DOMNode = row;
+
+                var requestNumberCell = document.createElement('td');
+                requestNumberCell.textContent = index + 1;
+                row.appendChild(requestNumberCell);
+
+                var profilerCell = document.createElement('td');
+                profilerCell.textContent = 'n/a';
+                row.appendChild(profilerCell);
+
+                var methodCell = document.createElement('td');
+                methodCell.textContent = request.method;
+                row.appendChild(methodCell);
+
+                var typeCell = document.createElement('td');
+                typeCell.textContent = request.type;
+                row.appendChild(typeCell);
+
+                var statusCodeCell = document.createElement('td');
+                var statusCode = document.createElement('span');
+                statusCode.textContent = 'n/a';
+                statusCodeCell.appendChild(statusCode);
+                row.appendChild(statusCodeCell);
+
+                var pathCell = document.createElement('td');
+                pathCell.className = 'sf-ajax-request-url';
+                if ('GET' === request.method) {
+                    var pathLink = document.createElement('a');
+                    pathLink.setAttribute('href', request.url);
+                    pathLink.textContent = request.url;
+                    pathCell.appendChild(pathLink);
+                } else {
+                    pathCell.textContent = request.url;
+                }
+                pathCell.setAttribute('title', request.url);
+                row.appendChild(pathCell);
+
+                var durationCell = document.createElement('td');
+                durationCell.className = 'sf-ajax-request-duration';
+                durationCell.textContent = 'n/a';
+                row.appendChild(durationCell);
+
+                request.liveDurationHandle = setInterval(function() {
+                    durationCell.textContent = (new Date() - request.start) + ' ms';
+                }, 100);
+
+                row.className = 'sf-ajax-request sf-ajax-request-loading';
+                tbody.insertBefore(row, null);
+
+                var toolbarInfo = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
+                toolbarInfo.scrollTop = toolbarInfo.scrollHeight;
+
+                renderAjaxRequests();
+            };
+
+            var finishAjaxRequest = function(index) {
+                var request = requestStack[index];
+                clearInterval(request.liveDurationHandle);
+
+                if (!request.DOMNode) {
+                    return;
+                }
+
+                if (request.toolbarReplace && !request.toolbarReplaceFinished && request.profile) {
+                    /* Flag as complete because finishAjaxRequest can be called multiple times. */
+                    request.toolbarReplaceFinished = true;
+                    /* Search up through the DOM to find the toolbar's container ID. */
+                    for (var elem = request.DOMNode; elem && elem !== document; elem = elem.parentNode) {
+                        if (elem.id.match(/^sfwdt/)) {
+                            Sfjs.loadToolbar(elem.id.replace(/^sfwdt/, ''), request.profile);
+                            break;
+                        }
+                    }
+                }
+
+                pendingRequests--;
+                var row = request.DOMNode;
+                /* Unpack the children from the row */
+                var profilerCell = row.children[1];
+                var methodCell = row.children[2];
+                var statusCodeCell = row.children[4];
+                var statusCodeElem = statusCodeCell.children[0];
+                var durationCell = row.children[6];
+
+                if (request.error) {
+                    row.className = 'sf-ajax-request sf-ajax-request-error';
+                    methodCell.className = 'sf-ajax-request-error';
+                    successStreak = 0;
+                } else {
+                    row.className = 'sf-ajax-request sf-ajax-request-ok';
+                    successStreak++;
+                }
+
+                if (request.statusCode) {
+                    if (request.statusCode < 300) {
+                        statusCodeElem.setAttribute('class', 'sf-toolbar-status');
+                    } else if (request.statusCode < 400) {
+                        statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-yellow');
+                    } else {
+                        statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
+                    }
+                    statusCodeElem.textContent = request.statusCode;
+                } else {
+                    statusCodeElem.setAttribute('class', 'sf-toolbar-status sf-toolbar-status-red');
+                }
+
+                if (request.duration) {
+                    durationCell.textContent = request.duration + ' ms';
+                }
+
+                if (request.profilerUrl) {
+                    profilerCell.textContent = '';
+                    var profilerLink = document.createElement('a');
+                    profilerLink.setAttribute('href', request.profilerUrl);
+                    profilerLink.textContent = request.profile;
+                    profilerCell.appendChild(profilerLink);
+                }
+
+                renderAjaxRequests();
+            };
+
+            {% if excluded_ajax_paths is defined %}
+            if (window.fetch && window.fetch.polyfill === undefined) {
+                var oldFetch = window.fetch;
+                window.fetch = function () {
+                    var promise = oldFetch.apply(this, arguments);
+                    var url = arguments[0];
+                    var params = arguments[1];
+                    var paramType = Object.prototype.toString.call(arguments[0]);
+                    if (paramType === '[object Request]') {
+                        url = arguments[0].url;
+                        params = {
+                            method: arguments[0].method,
+                            credentials: arguments[0].credentials,
+                            headers: arguments[0].headers,
+                            mode: arguments[0].mode,
+                            redirect: arguments[0].redirect
+                        };
+                    } else {
+                        url = String(url);
+                    }
+                    if (!url.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
+                        var method = 'GET';
+                        if (params && params.method !== undefined) {
+                            method = params.method;
+                        }
+
+                        var stackElement = {
+                            error: false,
+                            url: url,
+                            method: method,
+                            type: 'fetch',
+                            start: new Date()
+                        };
+
+                        var idx = requestStack.push(stackElement) - 1;
+                        promise.then(function (r) {
+                            stackElement.duration = new Date() - stackElement.start;
+                            stackElement.error = r.status < 200 || r.status >= 400;
+                            stackElement.statusCode = r.status;
+                            stackElement.profile = r.headers.get('x-debug-token');
+                            stackElement.profilerUrl = r.headers.get('x-debug-token-link');
+                            stackElement.toolbarReplaceFinished = false;
+                            stackElement.toolbarReplace = '1' === r.headers.get('Symfony-Debug-Toolbar-Replace');
+                            finishAjaxRequest(idx);
+                        }, function (e){
+                            stackElement.error = true;
+                            finishAjaxRequest(idx);
+                        });
+                        startAjaxRequest(idx);
+                    }
+
+                    return promise;
+                };
+            }
+            if (window.XMLHttpRequest && XMLHttpRequest.prototype.addEventListener) {
+                var proxied = XMLHttpRequest.prototype.open;
+
+                XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
+                    var self = this;
+
+                    /* prevent logging AJAX calls to static and inline files, like templates */
+                    var path = url;
+                    if (url.slice(0, 1) === '/') {
+                        if (0 === url.indexOf('{{ request.basePath|e('js') }}')) {
+                            path = url.slice({{ request.basePath|length }});
+                        }
+                    }
+                    else if (0 === url.indexOf('{{ (request.schemeAndHttpHost ~ request.basePath)|e('js') }}')) {
+                        path = url.slice({{ (request.schemeAndHttpHost ~ request.basePath)|length }});
+                    }
+
+                    if (!path.match(new RegExp({{ excluded_ajax_paths|json_encode|raw }}))) {
+                        var stackElement = {
+                            error: false,
+                            url: url,
+                            method: method,
+                            type: 'xhr',
+                            start: new Date()
+                        };
+
+                        var idx = requestStack.push(stackElement) - 1;
+
+                        this.addEventListener('readystatechange', function() {
+                            if (self.readyState == 4) {
+                                stackElement.duration = new Date() - stackElement.start;
+                                stackElement.error = self.status < 200 || self.status >= 400;
+                                stackElement.statusCode = self.status;
+                                extractHeaders(self, stackElement);
+
+                                finishAjaxRequest(idx);
+                            }
+                        }, false);
+
+                        startAjaxRequest(idx);
+                    }
+
+                    proxied.apply(this, Array.prototype.slice.call(arguments));
+                };
+            }
+            {% endif %}
+
+            return {
+                hasClass: hasClass,
+
+                removeClass: removeClass,
+
+                addClass: addClass,
+
+                toggleClass: toggleClass,
+
+                getPreference: getPreference,
+
+                setPreference: setPreference,
+
+                addEventListener: addEventListener,
+
+                request: request,
+
+                renderAjaxRequests: renderAjaxRequests,
+
+                getSfwdt: function(token) {
+                    if (!this.sfwdt) {
+                        this.sfwdt = document.getElementById('sfwdt' + token);
+                    }
+
+                    return this.sfwdt;
+                },
+
+                load: function(selector, url, onSuccess, onError, options) {
+                    var el = document.getElementById(selector);
+
+                    if (el && el.getAttribute('data-sfurl') !== url) {
+                        request(
+                            url,
+                            function(xhr) {
+                                el.innerHTML = xhr.responseText;
+                                el.setAttribute('data-sfurl', url);
+                                removeClass(el, 'loading');
+                                var pending = pendingRequests;
+                                for (var i = 0; i < requestStack.length; i++) {
+                                    startAjaxRequest(i);
+                                    if (requestStack[i].duration) {
+                                        finishAjaxRequest(i);
+                                    }
+                                }
+                                /* Revert the pending state in case there was a start called without a finish above. */
+                                pendingRequests = pending;
+                                (onSuccess || noop)(xhr, el);
+                            },
+                            function(xhr) { (onError || noop)(xhr, el); },
+                            '',
+                            options
+                        );
+                    }
+
+                    return this;
+                },
+
+                showToolbar: function(token) {
+                    var sfwdt = this.getSfwdt(token);
+                    removeClass(sfwdt, 'sf-display-none');
+
+                    if (getPreference('toolbar/displayState') == 'none') {
+                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
+                        document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
+                        document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
+                    } else {
+                        document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
+                        document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
+                        document.getElementById('sfMiniToolbar-' + token).style.display = 'none';
+                    }
+                },
+
+                hideToolbar: function(token) {
+                    var sfwdt = this.getSfwdt(token);
+                    addClass(sfwdt, 'sf-display-none');
+                },
+
+                initToolbar: function(token) {
+                    this.showToolbar(token);
+
+                    var hideButton = document.getElementById('sfToolbarHideButton-' + token);
+                    var hideButtonSvg = hideButton.querySelector('svg');
+                    hideButtonSvg.setAttribute('aria-hidden', 'true');
+                    hideButtonSvg.setAttribute('focusable', 'false');
+                    addEventListener(hideButton, 'click', function (event) {
+                        event.preventDefault();
+
+                        var p = this.parentNode;
+                        p.style.display = 'none';
+                        (p.previousElementSibling || p.previousSibling).style.display = 'none';
+                        document.getElementById('sfMiniToolbar-' + token).style.display = 'block';
+                        setPreference('toolbar/displayState', 'none');
+                    });
+
+                    var showButton = document.getElementById('sfToolbarMiniToggler-' + token);
+                    var showButtonSvg = showButton.querySelector('svg');
+                    showButtonSvg.setAttribute('aria-hidden', 'true');
+                    showButtonSvg.setAttribute('focusable', 'false');
+                    addEventListener(showButton, 'click', function (event) {
+                        event.preventDefault();
+
+                        var elem = this.parentNode;
+                        if (elem.style.display == 'none') {
+                            document.getElementById('sfToolbarMainContent-' + token).style.display = 'none';
+                            document.getElementById('sfToolbarClearer-' + token).style.display = 'none';
+                            elem.style.display = 'block';
+                        } else {
+                            document.getElementById('sfToolbarMainContent-' + token).style.display = 'block';
+                            document.getElementById('sfToolbarClearer-' + token).style.display = 'block';
+                            elem.style.display = 'none'
+                        }
+
+                        setPreference('toolbar/displayState', 'block');
+                    });
+                },
+
+                loadToolbar: function(token, newToken) {
+                    var that = this;
+                    var triesCounter = document.getElementById('sfLoadCounter-' + token);
+
+                    var options = {
+                        retry: true,
+                        onSend: function (count) {
+                            if (count === 3) {
+                                that.initToolbar(token);
+                            }
+
+                            if (triesCounter) {
+                                triesCounter.textContent = count;
+                            }
+                        },
+                    };
+
+                    var cancelButton = document.getElementById('sfLoadCancel-' + token);
+                    if (cancelButton) {
+                        addEventListener(cancelButton, 'click', function (event) {
+                            event.preventDefault();
+
+                            options.stop = true;
+                            that.hideToolbar(token);
+                        });
+                    }
+
+                    newToken = (newToken || token);
+
+                    this.load(
+                        'sfwdt' + token,
+                        '{{ url("_wdt", { "token": "xxxxxx" })|escape('js') }}'.replace(/xxxxxx/, newToken),
+                        function(xhr, el) {
+                            /* Do nothing in the edge case where the toolbar has already been replaced with a new one */
+                            if (!document.getElementById('sfToolbarMainContent-' + newToken)) {
+                                return;
+                            }
+
+                            /* Evaluate in global scope scripts embedded inside the toolbar */
+                            var i, scripts = [].slice.call(el.querySelectorAll('script'));
+                            for (i = 0; i < scripts.length; ++i) {
+                                eval.call({}, scripts[i].firstChild.nodeValue);
+                            }
+
+                            el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
+
+                            if (el.style.display == 'none') {
+                                return;
+                            }
+
+                            that.initToolbar(newToken);
+
+                            /* Handle toolbar-info position */
+                            var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block'));
+                            for (i = 0; i < toolbarBlocks.length; ++i) {
+                                toolbarBlocks[i].onmouseover = function () {
+                                    var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0];
+                                    var pageWidth = document.body.clientWidth;
+                                    var elementWidth = toolbarInfo.offsetWidth;
+                                    var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
+                                    var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
+
+                                    /* Reset right and left value, useful on window resize */
+                                    toolbarInfo.style.right = '';
+                                    toolbarInfo.style.left = '';
+
+                                    if (elementWidth > pageWidth) {
+                                        toolbarInfo.style.left = 0;
+                                    }
+                                    else if (leftValue > 0 && rightValue > 0) {
+                                        toolbarInfo.style.right = (rightValue * -1) + 'px';
+                                    } else if (leftValue < 0) {
+                                        toolbarInfo.style.left = 0;
+                                    } else {
+                                        toolbarInfo.style.right = '0px';
+                                    }
+                                };
+                            }
+
+                            renderAjaxRequests();
+                            addEventListener(document.querySelector('.sf-toolbar-ajax-clear'), 'click', function() {
+                                requestStack = [];
+                                renderAjaxRequests();
+                                successStreak = 4;
+                                document.querySelector('.sf-toolbar-ajax-request-list').innerHTML = '';
+                            });
+                            addEventListener(document.querySelector('.sf-toolbar-block-ajax'), 'mouseenter', function (event) {
+                                var elem = document.querySelector('.sf-toolbar-block-ajax .sf-toolbar-info');
+                                elem.scrollTop = elem.scrollHeight;
+                            });
+                            addEventListener(document.querySelector('.sf-toolbar-block-ajax > .sf-toolbar-icon'), 'click', function (event) {
+                                event.preventDefault();
+
+                                toggleClass(this.parentNode, 'hover');
+                            });
+
+                            var dumpInfo = document.querySelector('.sf-toolbar-block-dump .sf-toolbar-info');
+                            if (null !== dumpInfo) {
+                                addEventListener(dumpInfo, 'sfbeforedumpcollapse', function () {
+                                    dumpInfo.style.minHeight = dumpInfo.getBoundingClientRect().height+'px';
+                                });
+                                addEventListener(dumpInfo, 'mouseleave', function () {
+                                    dumpInfo.style.minHeight = '';
+                                });
+                            }
+                        },
+                        function(xhr) {
+                            if (xhr.status !== 0 && !options.stop) {
+                                var sfwdt = that.getSfwdt(token);
+                                sfwdt.innerHTML = '\
+                                <div class="sf-toolbarreset notranslate">\
+                                    <div class="sf-toolbar-icon"><svg width="26" height="28" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 26 28" enable-background="new 0 0 26 28" xml:space="preserve"><path fill="#FFFFFF" d="M13 0C5.8 0 0 5.8 0 13c0 7.2 5.8 13 13 13c7.2 0 13-5.8 13-13C26 5.8 20.2 0 13 0z M20 7.5 c-0.6 0-1-0.3-1-0.9c0-0.2 0-0.4 0.2-0.6c0.1-0.3 0.2-0.3 0.2-0.4c0-0.3-0.5-0.4-0.7-0.4c-2 0.1-2.5 2.7-2.9 4.8l-0.2 1.1 c1.1 0.2 1.9 0 2.4-0.3c0.6-0.4-0.2-0.8-0.1-1.3C18 9.2 18.4 9 18.7 8.9c0.5 0 0.8 0.5 0.8 1c0 0.8-1.1 2-3.3 1.9 c-0.3 0-0.5 0-0.7-0.1L15 14.1c-0.4 1.7-0.9 4.1-2.6 6.2c-1.5 1.8-3.1 2.1-3.8 2.1c-1.3 0-2.1-0.6-2.2-1.6c0-0.9 0.8-1.4 1.3-1.4 c0.7 0 1.2 0.5 1.2 1.1c0 0.5-0.2 0.6-0.4 0.7c-0.1 0.1-0.3 0.2-0.3 0.4c0 0.1 0.1 0.3 0.4 0.3c0.5 0 0.9-0.3 1.2-0.5 c1.3-1 1.7-2.9 2.4-6.2l0.1-0.8c0.2-1.1 0.5-2.3 0.8-3.5c-0.9-0.7-1.4-1.5-2.6-1.8c-0.8-0.2-1.3 0-1.7 0.4C8.4 10 8.6 10.7 9 11.1 l0.7 0.7c0.8 0.9 1.3 1.7 1.1 2.7c-0.3 1.6-2.1 2.8-4.3 2.1c-1.9-0.6-2.2-1.9-2-2.7c0.2-0.6 0.7-0.8 1.2-0.6 c0.5 0.2 0.7 0.8 0.6 1.3c0 0.1 0 0.1-0.1 0.3C6 15 5.9 15.2 5.9 15.3c-0.1 0.4 0.4 0.7 0.8 0.8c0.8 0.3 1.7-0.2 1.9-0.9 c0.2-0.6-0.2-1.1-0.4-1.2l-0.8-0.9c-0.4-0.4-1.2-1.5-0.8-2.8c0.2-0.5 0.5-1 0.9-1.4c1-0.7 2-0.8 3-0.6c1.3 0.4 1.9 1.2 2.8 1.9 c0.5-1.3 1.1-2.6 2-3.8c0.9-1 2-1.7 3.3-1.8C20 4.8 21 5.4 21 6.3C21 6.7 20.8 7.5 20 7.5z"/></svg></div>\
+                                    An error occurred while loading the web debug toolbar. <a href="{{ url("_profiler_home")|escape('js') }}' + newToken + '>Open the web profiler.</a>\
+                                </div>\
+                            ';
+                                sfwdt.setAttribute('class', 'sf-toolbar sf-error-toolbar');
+                            }
+                        },
+                        options
+                    );
+
+                    return this;
+                },
+
+                toggle: function(selector, elOn, elOff) {
+                    var tmp = elOn.style.display,
+                        el = document.getElementById(selector);
+
+                    elOn.style.display = elOff.style.display;
+                    elOff.style.display = tmp;
+
+                    if (el) {
+                        el.style.display = 'none' === tmp ? 'none' : 'block';
+                    }
+
+                    return this;
+                },
+            };
+        })();
+    }
+
+    Sfjs.loadToolbar('{{ token }}');
 /*]]>*/</script>