minor #52138 [WebProfilerBundle] UI tweaks for the command profiler (…

…javiereguiluz) This PR was squashed before being merged into the 6.4 branch. Discussion ---------- [WebProfilerBundle] UI tweaks for the command profiler | Q | A | ------------- | --- | Branch? | 6.4 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | - | License | MIT This PR proposes some minor UI tweaks for the amazing feature contributed by `@HeahDude` in #47416. ## First change I propose to not display the `HTTP / Commands` toggle in the header of all pages. I don't think this should be an option with quick permanent access from all profiler pages. My proposal is to move the toggle to the search sidebar: ![search-before-after](https://github.com/symfony/symfony/assets/73419/417cc200-5f56-41a8-b177-8124e6bed2f3) And here in action: ![http-commands-toggle](https://github.com/symfony/symfony/assets/73419/ced6dae1-2de9-4e42-ad5b-48e752513ec3) ## Second change In my opinion, the current header of command profiles looks too similar to HTTP profiles: ### Before / Light ![command-profile-before-light](https://github.com/symfony/symfony/assets/73419/b623e582-7a67-414c-9d5f-51d1ceee83d7) ### Before / Dark ![command-profile-before-dark](https://github.com/symfony/symfony/assets/73419/884fa8db-d915-439b-8fe0-12e5d7a49a41) ----- I propose to differentiate them a bit more and use the well-known "fake terminals" used on Symfony website and docs: ### After / Light ![command-profile-after-light](https://github.com/symfony/symfony/assets/73419/670cdb13-35fc-42ad-9b42-7d83bb75c1d0) ### After / Dark ![command-profile-after-dark](https://github.com/symfony/symfony/assets/73419/6899926d-0831-4241-8132-75e2a180fa23) ----- The "fake terminals" look different depending on your OS. See this image (from top to bottom: macOS, Windows, Linux) ![terminal-os](https://github.com/symfony/symfony/assets/73419/04bea418-63df-45f2-9fa8-06afbfa8048f) Commits ------- 041480f [WebProfilerBundle] UI tweaks for the command profiler
symfony · Oct 19, 2023 · 7402279 · 7402279
2 parents 737613c + 041480f
commit 7402279
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 26 deletions.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/_command_summary.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/_command_summary.html.twig
@@ -2,26 +2,32 @@
 {% set interrupted = command_collector is same as false ? null : command_collector.interruptedBySignal %}
 {% set css_class = status_code == 113 or interrupted is not null ? 'status-warning' : status_code > 0 ? 'status-error' : 'status-success' %}
 
-<div class="status {{ css_class }}">
+<div class="terminal status {{ css_class }}">
     <div class="container">
-        {% if status_code > 0 %}
-            <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>
-            </p>
-        {% endif %}
-
         <h2>
             <span class="status-request-method">
                 {{ profile.method|upper }}
             </span>
 
-            {{ profile.url|length < 160 ? profile.url : profile.url[:160] ~ '…' }}
+            <span class="status-command">
+                {{ profile.url }}
+            </span>
         </h2>
 
         <dl class="metadata">
-            {% if status_code == 0 or interrupted %}
-                <span class="status-response-status-code">{{ interrupted is null ? 'Success' : 'Interrupted by signal: ' ~ interrupted }}</span>
+            {% if interrupted %}
+                <span class="status-response-status-code">Interrupted</span>
+                <dt>Signal</dt>
+                <dd class="status-response-status-text">{{ interrupted }}</dd>
+
+                <dt>Exit code</dt>
+                <dd class="status-response-status-text">{{ status_code }}</dd>
+            {% elseif status_code == 0 %}
+                <span class="status-response-status-code">Success</span>
+            {% elseif status_code > 0 %}
+                <span class="status-response-status-code">Error</span>
+                <dt>Exit code</dt>
+                <dd class="status-response-status-text"><span class="status-response-status-code">{{ status_code }}</span></dd>
             {% endif %}
 
             {% if request_collector.requestserver.has('SYMFONY_CLI_BINARY_NAME') %}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.html.twig
@@ -36,6 +36,10 @@
             }
 
             document.body.classList.add(localStorage.getItem('symfony/profiler/width') || 'width-normal');
+
+            document.body.classList.add(
+                (navigator.appVersion.indexOf('Win') !== -1) ? 'windows' : (navigator.appVersion.indexOf('Mac') !== -1) ? 'macos' : 'linux'
+            );
         </script>
 
         {% block body '' %}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig
@@ -1,21 +1,6 @@
 <div id="header">
     <h1><a href="{{ path('_profiler_home') }}">{{ source('@WebProfiler/Icon/symfony.svg') }} Symfony Profiler</a></h1>
 
-    <div class="sf-tabs" data-processed="true">
-        <div class="tab-navigation">
-            <span class="tab-control{{ 'request' == profile_type ? ' active' }}">
-                <a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10}) }}">
-                    HTTP Requests
-                </a>
-            </span>
-            <span class="tab-control{{ 'command' == profile_type ? ' active' }}">
-                <a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10, type: 'command'}) }}">
-                    Console Commands
-                </a>
-            </span>
-        </div>
-    </div>
-
     <div class="search">
         <form method="get" action="https://symfony.com/search" target="_blank">
             <div class="form-row">

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -167,6 +167,12 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
     --shadow: 0px 0px 1px rgba(128, 128, 128, .2);
     --border: 1px solid #e0e0e0;
     --background-error: var(--color-error);
+    --terminal-bg: var(--gray-800);
+    --terminal-border-color: var(--gray-600);
+    --terminal-warning-color: var(--yellow-300);
+    --terminal-warning-bg: var(--yellow-300);
+    --terminal-error-color: #fb6a89;
+    --terminal-error-bg: #fb6a89;
 
     --highlight-variable: #e36209;
     --highlight-string: #22863a;
@@ -303,6 +309,13 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
     --shadow: 0px 0px 1px rgba(32, 32, 32, .2);
     --border: 1px solid #666;
     --background-error: #b0413e;
+    --terminal-bg: var(--gray-800);
+    --terminal-border-color: var(--gray-600);
+    --terminal-warning-color: var(--yellow-400);
+    --terminal-warning-bg: var(--yellow-500);
+    --terminal-error-color: var(--red-400);
+    --terminal-error-bg: var(--red-400);
+
     --highlight-variable: #ffa657;
     --highlight-string: #7ee787;
     --highlight-comment: #8b949e;
@@ -1258,6 +1271,107 @@ tr.status-warning td {
     margin: 0 1.5em 0 0;
 }
 
+#summary .terminal {
+    --header-status-request-method-color: var(--gray-400);
+    --header-metadata-key: var(--gray-400);
+    --header-metadata-value: var(--gray-300);
+
+    background: var(--terminal-bg);
+    border: solid var(--terminal-border-color);
+    border-width: 30px 4px 4px 4px;
+    border-radius: 3px 3px 0 0;
+    box-shadow: none;
+    color: var(--gray-100);
+    padding: 10px 15px;
+    position: relative;
+}
+#summary .terminal .status-request-method {
+    font-size: 13px;
+    transform: translateY(7px) !important;
+    margin-right: 10px;
+}
+#summary .terminal.status-success .status-command {
+    color: var(--gray-100);
+}
+#summary .terminal.status-success .status-response-status-code {
+    margin-right: 1.5em;
+    text-transform: uppercase;
+}
+#summary .terminal.status-warning,
+#summary .terminal.status-warning .status-response-status-text {
+    color: var(--terminal-warning-color);
+}
+#summary .terminal.status-warning .status-response-status-code {
+    background: var(--terminal-warning-bg);
+    color: var(--black);
+    margin-right: 1.5em;
+    padding: 1px 5px;
+    text-transform: uppercase;
+}
+#summary .terminal.status-warning .status-command,
+#summary .terminal.status-warning .status-response-status-text {
+    color: var(--terminal-warning-color);
+}
+#summary .terminal.status-error .status-command,
+#summary .terminal.status-error .status-response-status-text {
+    color: var(--terminal-error-color);
+}
+#summary .terminal.status-error .status-response-status-code {
+    background: var(--terminal-error-bg);
+    color: var(--black);
+    margin-right: 1.5em;
+    padding: 1px 5px;
+    text-transform: uppercase;
+}
+#summary .terminal.status-error,
+#summary .terminal.status-error .status-response-status-text {
+    color: var(--terminal-error-color);
+}
+.macos #summary .terminal::before {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 20px 0 0 2px rgba(255, 255, 255, 0.3), 40px 0 0 2px rgba(255, 255, 255, 0.3);
+    content: '';
+    display: block;
+    height: 7px;
+    left: 8px;
+    position: absolute;
+    top: -18px;
+    width: 7px;
+}
+.windows #summary .terminal::before {
+    background-color: transparent;
+    background-image:
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 352H48c-26.5 0-48 21.5-48 48v32c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-32c0-26.5-21.5-48-48-48z"></path></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M464 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 394c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V192h416v234z"></path></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>');
+    background-repeat: no-repeat;
+    background-position: right 80px top 5px, right 44px top 8px, right 8px top 8px;
+    background-size: 14px, 14px, 14px;
+    content: '';
+    display: block;
+    height: 30px;
+    position: absolute;
+    top: -30px;
+    width: 100%;
+}
+.linux #summary .terminal::before {
+    background-color: transparent;
+    background-image:
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6 0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"></path></svg>'),
+        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.3)" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"></path></svg>');
+    background-repeat: no-repeat;
+    background-position: left 8px top 8px, left 28px top 8px, left 48px top 8px;
+    background-size: 14px, 14px, 14px;
+    content: '';
+    display: block;
+    height: 30px;
+    position: absolute;
+    top: -30px;
+    width: 100%;
+}
+
 {# Sidebar
    ========================================================================= #}
 #sidebar {
@@ -1281,6 +1395,9 @@ tr.status-warning td {
     color: var(--gray-500);
     padding: 10px 15px;
 }
+#sidebar #sidebar-shortcuts .sf-tabs .tab-navigation {
+    margin: 5px 0 15px;
+}
 #sidebar #sidebar-shortcuts .shortcuts {
     display: flex;
     align-items: center;
@@ -1490,6 +1607,13 @@ tr.status-warning td {
     text-align: center;
     z-index: 1;
 }
+.tab-navigation .tab-control a {
+    color: var(--page-color);
+    text-decoration: none;
+}
+.tab-navigation .tab-control.active a {
+    color: var(--tab-active-color);
+}
 .sf-tabs-sm .tab-navigation .tab-control {
     font-size: 13px;
     padding: 2.5px 10px;
@@ -1584,6 +1708,10 @@ tr.status-warning td {
     background: var(--badge-warning-background);
     color: var(--badge-warning-color);
 }
+.badge-danger {
+    background: var(--badge-danger-background);
+    color: var(--badge-danger-color);
+}
 
 {# Dumped contents (used in many different panels)
    ========================================================================= #}

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/results.html.twig
@@ -38,6 +38,21 @@
 {% block sidebar_shortcuts_links %}{% endblock %}
 
 {% block panel %}
+    <div class="sf-tabs" data-processed="true">
+        <div class="tab-navigation" role="tablist">
+            <button class="tab-control {{ 'request' == profile_type ? 'active' }}" role="tab" {{ 'request' == profile_type ? 'aria-selected="true"' : 'tabindex="-1"' }} >
+                <a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10}) }}">
+                    HTTP Requests
+                </a>
+            </button>
+            <button class="tab-control {{ 'command' == profile_type ? 'active' }}" role="tab" {{ 'command' == profile_type ? 'aria-selected="true"' : 'tabindex="-1"' }}>
+                <a href="{{ path('_profiler_search_results', {token: 'empty', limit: 10, type: 'command'}) }}">
+                    Console Commands
+                </a>
+            </button>
+        </div>
+    </div>
+
     <h2>{{ tokens ? tokens|length : 'No' }} results found</h2>
 
     {% if tokens %}