[WebProfilerBundle] Improve performance

javiereguiluz · javiereguiluz · commit cae2cb98bbff · 2024-03-27T12:38:36.000+01:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
@@ -4,6 +4,7 @@
         <meta charset="{{ _charset }}" />
         <meta name="robots" content="noindex,nofollow" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta name="view-transition" content="same-origin">
         <title>{% block title %}Symfony Profiler{% endblock %}</title>
 
         {% set request_collector = profile is defined ? profile.collectors.request|default(null) : null %}
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
@@ -5,17 +5,37 @@
             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', () => {
+    document.addEventListener('DOMContentLoaded', () => {
         new SymfonyProfiler();
     });
 
     class SymfonyProfiler {
         constructor() {
+            this.#reorderMainMenuItems();
             this.#createTabs();
-            this.#createTableSearchFields();
-            this.#createToggles();
-            this.#createCopyToClipboard();
-            this.#convertDateTimesToUserTimezone();
+
+            setTimeout(() => {
+                this.#createTableSearchFields();
+                this.#createToggles();
+                this.#createCopyToClipboard();
+                this.#convertDateTimesToUserTimezone();
+            }, 0);
+        }
+
+        #reorderMainMenuItems() {
+            /* reorder the main menu items to always display first the non-disabled items */
+            const mainMenuElement = document.querySelector('#menu-profiler');
+            const mainMenuItems = mainMenuElement.querySelectorAll('li');
+            const firstDisabledMenuItem = mainMenuElement.querySelector('li a > span.disabled')?.parentNode?.parentNode;
+            if (!firstDisabledMenuItem) {
+                return;
+            }
+            mainMenuItems.forEach(menuItem => {
+                const isDisabled = menuItem.querySelector('a > span.disabled');
+                if (!isDisabled) {
+                    mainMenuElement.insertBefore(menuItem, firstDisabledMenuItem);
+                }
+            });
         }
 
         #createTabs() {
