From a5d0f35d9deeb858c1b5326c1fdb14f7e043a915 Mon Sep 17 00:00:00 2001
From: Javier Eguiluz <javier.eguiluz@gmail.com>
Date: Thu, 12 Jan 2023 14:46:07 +0100
Subject: [PATCH] [WebProfilerBundle] [WebProfilerPanel] Update the logger
 panel filters

---
 Resources/views/Collector/logger.html.twig | 39 ++++++++++------------
 Resources/views/Profiler/base_js.html.twig | 14 +++-----
 Resources/views/Profiler/profiler.css.twig | 29 +++++++++++++---
 3 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/Resources/views/Collector/logger.html.twig b/Resources/views/Collector/logger.html.twig
index 75bb3fe1..2ecaf52a 100644
--- a/Resources/views/Collector/logger.html.twig
+++ b/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>
 
diff --git a/Resources/views/Profiler/base_js.html.twig b/Resources/views/Profiler/base_js.html.twig
index 829e43c7..3086f3f6 100644
--- a/Resources/views/Profiler/base_js.html.twig
+++ b/Resources/views/Profiler/base_js.html.twig
@@ -868,6 +868,11 @@ 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);
@@ -875,11 +880,6 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
                 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');
             },
         };
     })();
diff --git a/Resources/views/Profiler/profiler.css.twig b/Resources/views/Profiler/profiler.css.twig
index 383e975d..0ff9c9d7 100644
--- a/Resources/views/Profiler/profiler.css.twig
+++ b/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);