[WebProfilerBundle] Minor tweaks in profiler redesign

javiereguiluz · fabpot · commit 2b13d14316db · 2022-11-11T08:10:14.000+01:00
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
@@ -23,6 +23,14 @@
 {% endblock %}
 
 {% block panel %}
+    {# these styles are needed to override some styles from Exception page, which wasn't
+       updated yet to the new style of the Symfony Profiler #}
+    <style>
+        .tab-navigation li { background: none; border: 0; font-size: 14px; }
+        .tab-navigation li.active { border-radius: 6px; }
+        .tab-navigation li.active .badge { background-color: var(--selected-badge-background); color: var(--selected-badge-color); }
+    </style>
+
     <h2>Exceptions</h2>
 
     {% if not collector.hasexception %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
@@ -89,7 +89,7 @@
                 {% if request_collector and request_collector.forwardtoken -%}
                     {% set forward_profile = profile.childByToken(request_collector.forwardtoken) %}
                     {% set controller = forward_profile ? forward_profile.collector('request').controller : 'n/a' %}
-                    <div class="status status-compact">
+                    <div class="status status-compact status-compact-forward">
                         <span class="icon icon-forward">{{ source('@WebProfiler/Icon/forward.svg') }}</span>
 
                         Forwarded to
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -1053,8 +1053,8 @@ tr.status-warning td {
     padding: 13px 15px 10px;
     position: relative;
 }
-#summary .status-compact:before {
-    top: 0;
+#summary .status-compact.status-compact-forward {
+    padding: 10px 15px;
 }
 #summary .status + .status {
     margin-top: 10px;
@@ -1538,7 +1538,7 @@ tr.status-warning td {
     display: inline-flex;
     flex-wrap: wrap;
     margin: 0 0 15px;
-    padding: 2px;
+    padding: 0;
     user-select: none;
     -webkit-user-select: none;
 }
@@ -1547,11 +1547,13 @@ tr.status-warning td {
     margin: 0 0 10px;
 }
 .tab-navigation li {
+    box-shadow: none;
+    transition: box-shadow .05s ease-in, background-color .05s ease-in;
     cursor: pointer;
     font-weight: 500;
     list-style: none;
     margin: 0;
-    padding: 3.5px 14px;
+    padding: 4px 14px;
     position: relative;
     text-align: center;
     z-index: 1;
@@ -1591,12 +1593,15 @@ tr.status-warning td {
 }
 .tab-navigation li.active {
     background-color: var(--tab-active-background);
-    border-radius: 4px;
-    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
+    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 li.active {
+    box-shadow: inset 0 0 0 1px var(--tab-border-color);
+}
 .tab-content > *:first-child {
     margin-top: 0;
 }
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
@@ -110,41 +110,57 @@
     margin-top: 30px;
 }
 .modal-content .settings-group {
+    border: 1px solid var(--settings-option-border-color);
+    border-radius: 4px;
     display: flex;
     margin-bottom: 15px;
 }
-.modal-content label {
+.modal-content .settings-group label {
     cursor: pointer;
     display: flex;
     flex: 1;
     font-size: 16px;
     margin: 0;
 }
-.modal-content label input {
-    display: none;
+.modal-content .settings-group label input {
+    position: absolute;
+    clip: rect(0, 0, 0, 0);
+    pointer-events: none;
+    opacity: 0;
+}
+.modal-content .settings-group:has(input:focus-visible) {
+    outline: 2px dotted var(--settings-option-active-border-color);
+    outline-offset: 2px;
 }
-.modal-content label input:checked + p {
+.modal-content .settings-group label input:checked + p {
     box-shadow: inset 0 0 0 2px var(--settings-option-active-border-color);
     background-color: var(--settings-option-active-background);
     color: var(--settings-option-active-color);
 }
-.modal-content label input:checked + p svg {
+.modal-content .settings-group label input:checked + p svg {
     color: var(--settings-option-active-icon-color);
 }
-.modal-content label p {
+.modal-content .settings-group label p {
     align-items: center;
     background: var(--settings-option-background);
-    border-radius: 4px;
-    box-shadow: inset 0 0 0 1px var(--settings-option-border-color);
+
     color: var(--settings-option-color);
     flex: 1;
     font-size: 14px;
     margin: 0;
     padding: 10px 15px;
     text-align: center;
 }
-.modal-content label + label {
-    margin-left: 15px;
+.modal-content .settings-group label:first-child p {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+.modal-content .settings-group label:last-child p {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+.modal-content .settings-group label + label p {
+    border-left: 1px solid var(--settings-option-border-color);
 }
 .modal-content label p span {
     display: block;
