bug #48186 [WebProfilerBundle] Minor tweaks in profiler redesign (javiereguiluz)

fabpot · fabpot · commit 8eac401a5e05 · 2022-11-11T08:10:22.000+01:00
This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Minor tweaks in profiler redesign | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - The main purpose of this PR is to fix some design issues in the Exception panel of the Symfony Profiler. Sadly, after the #47148 redesign, I couldn't find the time to update the Exception page design. I'll do that in Symfony 6.3, but let's at least fix these minor issues in the current design. Apart from that, this PR contains some minor tweaks to the design (based on my own usage of the new design and comments shared by the community). ----- **BEFORE** Settings options were separated: <img width="663" alt="settings-before" src="https://user-images.githubusercontent.com/73419/201087940-e0bf6bc1-fcbd-4cf1-a575-e1331f0bf506.png"> **AFTER** now we group the related options: <img width="640" alt="settings-after" src="https://user-images.githubusercontent.com/73419/201087979-3df0b13d-fe47-4b8f-a2f8-25b3c6b2e920.png"> ----- The other change is about "tabs". I wasn't 100% happy with the current design which shows a shadow for the active system: <img width="985" alt="tabs-before" src="https://user-images.githubusercontent.com/73419/201088311-340befa9-d87b-4f46-9194-692a14d181cb.png"> So, yesterday I saw that GitHub introduced [a new way of exploring code](https://github.blog/changelog/2022-11-09-introducing-an-all-new-code-search-and-code-browsing-experience/#the-all-new-code-browsing-experience). It's not public yet, but here's a screenshot of it (with the arrow pointing at their new tab design): ![194612816-78a0cf4a-1a11-4d90-a1a5-075a1801bbd0](https://user-images.githubusercontent.com/73419/201088747-eed9cac7-fde1-4074-a712-c2732c750d4f.jpg) And a short video of new tabs in action: https://user-images.githubusercontent.com/73419/201089212-53bf2689-5433-4c9c-96b5-1db113a1015a.mp4 I think they look great, and their flatter design matches our design well. So I propose to get inspiration from them. This is how our tabs look now after this PR: <img width="973" alt="tabs-after" src="https://user-images.githubusercontent.com/73419/201089326-a3ea1b02-d68a-4e54-80ed-efb9ea71f4ed.png"> In action: ![updated-tabs](https://user-images.githubusercontent.com/73419/201089730-25957477-00f3-4eba-9496-4c2e54c23236.gif) And in dark mode: ![updated-tabs-dark](https://user-images.githubusercontent.com/73419/201089788-eaf79745-4b76-4194-86e9-0a7890e1aba3.gif) Commits ------- 2b13d14 [WebProfilerBundle] Minor tweaks in profiler redesign
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;
