bug #47811 [WebProfilerBundle] Profiler design fixes (javiereguiluz)

This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Profiler design fixes | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - This contains some minor tweaks and fixes for the new Profiler design introduced in #47148. I found some of them while upgrading the Doctrine Migrations Bundle panel (doctrine/DoctrineMigrationsBundle#480). Commits ------- 117789b [WebProfilerBundle] Profiler design fixes
symfony · Oct 9, 2022 · 2a5148b · 2a5148b
2 parents c2af1fd + 117789b
commit 2a5148b
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 60 deletions.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
@@ -34,58 +34,56 @@
                 {% endif %}
 
                 <div class="status {{ css_class }}">
-                    <div class="container">
-                        {% if status_code > 399 %}
-                            <p class="status-error-details">
-                                <span class="icon">{{ source('@WebProfiler/Icon/alert-circle.svg') }}</span>
-                                <span class="status-response-status-code">Error {{ status_code }}</span>
-                                <span class="status-response-status-text">{{ request_collector.statusText }}</span>
-                            </p>
+                    {% if status_code > 399 %}
+                        <p class="status-error-details">
+                            <span class="icon">{{ source('@WebProfiler/Icon/alert-circle.svg') }}</span>
+                            <span class="status-response-status-code">Error {{ status_code }}</span>
+                            <span class="status-response-status-text">{{ request_collector.statusText }}</span>
+                        </p>
+                    {% endif %}
+
+                    <h2>
+                        <span class="status-request-method">
+                            {{ profile.method|upper }}
+                        </span>
+
+                        {% set profile_title = profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' %}
+                        {% if profile.method|upper in ['GET', 'HEAD'] %}
+                            <a href="{{ profile.url }}">{{ profile_title }}</a>
+                        {% else %}
+                            {{ profile_title }}
                         {% endif %}
+                    </h2>
 
-                        <h2>
-                            <span class="status-request-method">
-                                {{ profile.method|upper }}
-                            </span>
-
-                            {% set profile_title = profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' %}
-                            {% if profile.method|upper in ['GET', 'HEAD'] %}
-                                <a href="{{ profile.url }}">{{ profile_title }}</a>
-                            {% else %}
-                                {{ profile_title }}
-                            {% endif %}
-                        </h2>
-
-                        <dl class="metadata">
-                            {% if status_code < 400 %}
-                                <dt>Response</dt>
-                                <dd>
-                                    <span class="status-response-status-code">{{ status_code }}</span>
-                                    <span class="status-response-status-text">{{ request_collector.statusText }}</span>
-                                </dd>
-                            {% endif %}
-
-                            {% set referer = request_collector ? request_collector.requestheaders.get('referer') : null %}
-                            {% if referer %}
-                                <dt></dt>
-                                <dd>
-                                    <span class="icon icon-referer">{{ source('@WebProfiler/Icon/referrer.svg') }}</span>
-                                    <a href="{{ referer }}" class="referer">Browse referrer URL</a>
-                                </dd>
-                            {% endif %}
+                    <dl class="metadata">
+                        {% if status_code < 400 %}
+                            <dt>Response</dt>
+                            <dd>
+                                <span class="status-response-status-code">{{ status_code }}</span>
+                                <span class="status-response-status-text">{{ request_collector.statusText }}</span>
+                            </dd>
+                        {% endif %}
 
-                            <dt>IP</dt>
+                        {% set referer = request_collector ? request_collector.requestheaders.get('referer') : null %}
+                        {% if referer %}
+                            <dt></dt>
                             <dd>
-                                <a href="{{ path('_profiler_search_results', { token: token, limit: 10, ip: profile.ip }) }}">{{ profile.ip }}</a>
+                                <span class="icon icon-referer">{{ source('@WebProfiler/Icon/referrer.svg') }}</span>
+                                <a href="{{ referer }}" class="referer">Browse referrer URL</a>
                             </dd>
+                        {% endif %}
 
-                            <dt>Profiled on</dt>
-                            <dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
+                        <dt>IP</dt>
+                        <dd>
+                            <a href="{{ path('_profiler_search_results', { token: token, limit: 10, ip: profile.ip }) }}">{{ profile.ip }}</a>
+                        </dd>
 
-                            <dt>Token</dt>
-                            <dd>{{ profile.token }}</dd>
-                        </dl>
-                    </div>
+                        <dt>Profiled on</dt>
+                        <dd><time datetime="{{ profile.time|date('c') }}">{{ profile.time|date('r') }}</time></dd>
+
+                        <dt>Token</dt>
+                        <dd>{{ profile.token }}</dd>
+                    </dl>
                 </div>
 
                 {% if request_collector and request_collector.forwardtoken -%}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig
@@ -9,7 +9,7 @@
     border-radius: 6px;
     margin: 0 30px 45px 0;
     max-width: 960px;
-    padding: 15px 10px;
+    padding: 15px 20px;
 }
 .width-full #source {
     max-width: unset;
@@ -24,7 +24,7 @@
     border-bottom: 1px solid var(--table-border-color);
     font-size: 18px;
     font-weight: 500;
-    margin: 0 15px;
+    margin: 0 0 15px 0;
     padding: 0 0 15px;
 }
 #source .source-file-name small {
@@ -34,10 +34,12 @@
 #source .source-content {
     overflow-x: auto;
 }
+#source .source-content ol {
+    margin: 0;
+}
 #source .source-content ol li {
     margin: 0 0 2px 0;
     padding-left: 5px;
-    width: max-content;
 }
 #source .source-content ol li::marker {
     color: var(--color-muted);

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig
@@ -38,7 +38,7 @@
                         {% set file_size_in_kb = file_info.size / 1024 %}
                         {% set file_num_lines = source|split("\n")|length - 1 %}
                         <dd>
-                            {{ file_size_in_kb < 1 ? file_info.size : file_size_in_kb|number_format(0) }} KB
+                            {{ file_size_in_kb < 1 ? file_info.size ~ ' bytes' : file_size_in_kb|number_format(0) ~ ' KB' }}
                             / {{ file_num_lines }} lines
                         </dd>
                     </dl>

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -9,6 +9,8 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
     --font-family-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-family-monospace: "Ubuntu Mono", "JetBrains Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono", "Courier New", monospace;
 
+    --summary-status-border-width: 6px;
+
     --white: #fff;
     --black: #000;
     --gray-50: #fafafa;
@@ -981,7 +983,7 @@ tr.status-warning td {
     margin-right: 2px;
 }
 #header .search input {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23d4d4d4' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23737373' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-size: 16px;
     background-position: 5px;
@@ -990,7 +992,7 @@ tr.status-warning td {
     width: 200px;
 }
 .theme-dark #header .search input {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23737373' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-icon-name='icon-tabler-search' width='21' height='21' viewBox='0 0 24 24' stroke='%23a3a3a3' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Ccircle cx='10' cy='10' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
 }
 
 {# Summary
@@ -1005,7 +1007,7 @@ tr.status-warning td {
     background: var(--header-background);
     border-radius: 6px;
     color: var(--header-metadata-value);
-    padding: 15px;
+    padding: calc(15px + var(--summary-status-border-width)) 15px 15px;
     position: relative;
 }
 #summary .status:before {
@@ -1016,7 +1018,7 @@ tr.status-warning td {
     top: 0;
     left: 0;
     width: 100%;
-    height: 6px;
+    height: var(--summary-status-border-width);
 }
 #summary .status-compact {
     padding: 13px 15px 10px;
@@ -1459,6 +1461,9 @@ tr.status-warning td {
     font-size: 12px;
     line-height: 1.5em;
 }
+.sf-profiler-timeline .legends button {
+    color: var(--color-text);
+}
 .sf-profiler-timeline + p.help {
     margin-top: 0;
 }
@@ -2290,6 +2295,10 @@ pre.sf-dump, pre.sf-dump .sf-dump-default {
 }
 
 @media (max-width: 768px) {
+    #summary .status {
+        padding: calc(10px + var(--summary-status-border-width)) 10px 10px;
+    }
+
     #sidebar {
         flex-basis: 50px;
         overflow-x: hidden;

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig
@@ -10,9 +10,7 @@
 
 {% block summary %}
     <div class="status">
-        <div class="container">
-            <h2>Profile Search</h2>
-        </div>
+        <h2>Profile Search</h2>
     </div>
 {% endblock %}
 

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -81,15 +81,12 @@
     display: none;
 }
 
-.sf-toolbarreset * {
+.sf-toolbarreset *:not(svg rect) {
     box-sizing: content-box;
     vertical-align: baseline;
     letter-spacing: normal;
     width: auto;
 }
-.sf-toolbarreset svg rect {
-    width: inherit;
-}
 
 .sf-toolbarreset {
     background-color: var(--sf-toolbar-gray-800);