bug #48963 [WebProfilerBundle] [WebProfilerPanel] Update the logger panel filters (javiereguiluz)

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

Discussion
----------

[WebProfilerBundle] [WebProfilerPanel] Update the logger panel filters

| Q             | A
| ------------- | ---
| Branch?       | 6.3
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | no
| Tickets       | symfony/symfony#48762 (comment)
| License       | MIT
| Doc PR        | -

This only changes the HTML contents of the logger profiler panel to make them valid (and keeps them accessible). No feature or behavior was changed.

Commits
-------

a8523cb091 [WebProfilerBundle] [WebProfilerPanel] Update the logger panel filters

Author: fabpot

Resources/views/Collector/logger.html.twig

@@ -55,27 +55,24 @@
         {% set filters = collector.filters %}
         <div class="log-filters">
             <div id="log-filter-type" class="log-filter">
-                <div class="tab-navigation" role="tablist">
-                    <button role="tab" class="tab-control {{ not has_error_logs and not has_deprecation_logs ? 'active' }}">
-                        <input {{ not has_error_logs and not has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-all" name="filter-log-type" value="all">
-                        <label for="filter-log-type-all">All messages</label>
-                    </button>
-
-                    <button role="tab" class="tab-control {{ has_error_logs ? 'active' }}">
-                        <input {{ has_error_logs ? 'checked' }} type="radio" id="filter-log-type-error" name="filter-log-type" value="error">
-                        <label for="filter-log-type-error">
-                            Errors
-                            <span class="badge status-{{ collector.counterrors ? 'error' }}">{{ collector.counterrors|default(0) }}</span>
-                        </label>
-                    </button>
-
-                    <button role="tab" class="tab-control {{ not has_error_logs and has_deprecation_logs ? 'active' }}">
-                        <input {{ not has_error_logs and has_deprecation_logs ? 'checked' }} type="radio" id="filter-log-type-deprecation" name="filter-log-type" value="deprecation">
-                        <label for="filter-log-type-deprecation">
-                            Deprecations
-                            <span class="badge status-{{ collector.countdeprecations ? 'warning' }}">{{ collector.countdeprecations|default(0) }}</span>
-                        </label>
-                    </button>
+                <div class="tab-navigation">
+                    {% set initially_active_tab = has_error_logs ? 'error' : has_deprecation_logs ? 'deprecation' : 'all' %}
+                    <input type="radio" id="filter-log-type-all" name="filter-log-type" value="all" {{ 'all' == initially_active_tab ? 'checked' }}>
+                    <label for="filter-log-type-all" class="tab-control">
+                        All messages
+                    </label>
+
+                    <input type="radio" id="filter-log-type-error" name="filter-log-type" value="error" {{ 'error' == initially_active_tab ? 'checked' }}>
+                    <label for="filter-log-type-error" class="tab-control">
+                        Errors
+                        <span class="badge status-{{ collector.counterrors ? 'error' }}">{{ collector.counterrors|default(0) }}</span>
+                    </label>
+
+                    <input type="radio" id="filter-log-type-deprecation" name="filter-log-type" value="deprecation" {{ 'deprecation' == initially_active_tab ? 'checked' }}>
+                    <label for="filter-log-type-deprecation" class="tab-control">
+                        Deprecations
+                        <span class="badge status-{{ collector.countdeprecations ? 'warning' }}">{{ collector.countdeprecations|default(0) }}</span>
+                    </label>
                 </div>
             </div>
 

Resources/views/Profiler/base_js.html.twig

@@ -868,18 +868,18 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
             },
 
             updateLogsTable: function() {
+                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);
 
-                const logs = document.querySelector('table.logs');
-                if (null === logs) {
-                    return;
-                }
-
                 /* hide rows that don't match the current filters */
                 let numVisibleRows = 0;
                 logs.querySelectorAll('tbody tr').forEach((row) => {
@@ -909,10 +909,6 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 /* 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;
-
-                /* update the currently selected "log type" tab */
-                document.querySelectorAll('#log-filter-type .tab-control').forEach((tab) => tab.classList.remove('active'));
-                document.querySelector(`#log-filter-type input[value="${selectedType}"]`).parentElement.classList.add('active');
             },
         };
     })();

Resources/views/Profiler/profiler.css.twig

@@ -1554,6 +1554,7 @@ tr.status-warning td {
     background: transparent;
     border: 0;
     box-shadow: none;
+    color: var(--color-text);
     transition: box-shadow .05s ease-in, background-color .05s ease-in;
     cursor: pointer;
     font-size: 14px;
@@ -1793,12 +1794,32 @@ tr.status-warning td {
     font-weight: bold;
     padding: 0 1px;
 }
-.log-filter .tab-navigation .tab-control input {
-    display: none;
+.log-filter .tab-navigation {
+    position: relative;
 }
-.log-filter .tab-navigation .tab-control label {
-    cursor: pointer;
+.log-filter .tab-navigation input[type="radio"] {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+}
+.tab-navigation input[type="radio"]:checked + .tab-control {
+    background-color: var(--tab-active-background);
+    border-radius: 6px;
+    box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
+    color: var(--tab-active-color);
+    position: relative;
+    z-index: 1;
+}
+.theme-dark .tab-navigation input[type="radio"]:checked + .tab-control {
+    box-shadow: inset 0 0 0 1px var(--tab-border-color);
 }
+.tab-navigation input[type="radio"]:focus-visible + .tab-control {
+    outline: 1px solid var(--color-link);
+}
+.tab-navigation input[type="radio"]:checked + .tab-control + input[type="radio"] + .tab-control:before{
+    width: 0;
+}
+
 .log-filters .log-filter .log-filter-content {
     background: var(--base-0);
     border: 1px solid var(--table-border-color);