feature #54420 [WebProfilerBundle] Update main menu to display active…

… panels first (javiereguiluz)

This PR was squashed before being merged into the 7.1 branch.

Discussion
----------

[WebProfilerBundle] Update main menu to display active panels first

| Q             | A
| ------------- | ---
| Branch?       | 7.1
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Issues        | -
| License       | MIT

I propose to reorder the main menu items to always display first the active panels, which are the ones that users will click.

| Before | After
| ------ | -----
| <img width="274" alt="" src="https://github.com/symfony/symfony/assets/73419/fa2edf53-4f83-4a87-8f41-a87d41138f54"> | <img width="270" alt="" src="https://github.com/symfony/symfony/assets/73419/81e8d450-186d-446e-8947-6c2205dc27e1">

Commits
-------

05e9192 [WebProfilerBundle] Update main menu to display active panels first

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

@@ -11,13 +11,32 @@
 
     class SymfonyProfiler {
         constructor() {
+            this.#reorderMainMenuItems();
             this.#createTabs();
             this.#createTableSearchFields();
             this.#createToggles();
             this.#createCopyToClipboard();
             this.#convertDateTimesToUserTimezone();
         }
 
+        #reorderMainMenuItems() {
+            /* reorder the main menu items to always display first the non-disabled items */
+            const mainMenuElement = document.querySelector('#menu-profiler');
+            const firstDisabledMenuItem = mainMenuElement.querySelector('li a > span.disabled')?.parentNode?.parentNode;
+
+            if (!firstDisabledMenuItem) {
+                return;
+            }
+
+            const mainMenuItems = mainMenuElement.querySelectorAll('li');
+            mainMenuItems.forEach(menuItem => {
+                const isDisabled = null !== menuItem.querySelector('a > span.disabled');
+                if (!isDisabled) {
+                    mainMenuElement.insertBefore(menuItem, firstDisabledMenuItem);
+                }
+            });
+        }
+
         #createTabs() {
             /* the accessibility options of this component have been defined according to: */
             /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */