8000 minor #47821 [WebProfilerBundle] Minor design tweaks and fixes in red… · symfony/symfony@fe23303 · GitHub
[go: up one dir, main page]
Skip to content

Commit fe23303

Browse files
fabpotfabpot
committed
minor #47821 [WebProfilerBundle] Minor design tweaks and fixes in redesigned panels (javiereguiluz)
This PR was merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Minor design tweaks and fixes in redesigned panels | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - This PR does 3 things: (1) It fixes some issues in some panels (e.g. `mailer`) when collector doesn't contain certain information (2) It simplifies the `messenger` panel to not display certain information when not needed: <img width="1030" alt="messenger-changes" src="https://user-images.githubusercontent.com/73419/194882843-9b607bfc-b175-4b9f-8a0b-a5d22e58f3cd.png"> The `1` callout refers to the list of available buses, which is no longer displayed when there's only 1 bus. The `2` callout refers to the bus name, which is no longer displayed in the table header because it's always displayed inside the table. (3) It does misc. minor design tweaks. The main change is that badges in dark mode now look different than in light mode. This is similar to what GitHub and others do: ### Before <img width="692" alt="labels-dark-before" src="https://user-images.githubusercontent.com/73419/194883308-3623e0d1-5159-4de2-a562-091b91183912.png"> ### After <img width="684" alt="labels-dark-after" src="https://user-images.githubusercontent.com/73419/194883333-bc4916d2-18b7-49ee-8f0a-061b2d8a5bd2.png"> Commits ------- 34d3cf4 [WebProfilerBundle] Minor design tweaks and fixes in redesigned panels
2 parents fe5e1ea + 34d3cf4 commit fe23303

File tree

4 files changed

+90
-53
lines changed

4 files changed

+90
-53
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -498,7 +498,7 @@
498498
</div>
499499

500500
<div class="tab {{ data.view_vars ?? [] is empty ? 'disabled' }}">
501-
<h3 class="tab-title">View Variables</h3>
501+
<h3 class="tab-title">View Vars</h3>
502502

503503
<div class="tab-content">
504504
{{ _self.render_form_view_variables(data) }}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<h2><code>{{ transport }}</code> transport</h2>
6969
{{ _self.render_transport_details(collector, transport) }}
7070
{% endfor %}
71-
{% else %}
71+
{% elseif events.transports is not empty %}
7272
{{ _self.render_transport_details(collector, events.transports|first, true) }}
7373
{% endif %}
7474

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/messenger.html.twig

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,6 @@
5757
.message-bus .badge.status-some-errors { line-height: 16px; border-bottom: 2px solid #B0413E; }
5858
5959
.message-item tbody.sf-toggle-content.sf-toggle-visible { display: table-row-group; }
60-
td.message-bus-dispatch-caller { background: #f1f2f3; }
61-
.theme-dark td.message-bus-dispatch-caller { background: var(--base-1); }
6260
</style>
6361
{% endblock %}
6462

@@ -71,6 +69,9 @@
7169
<div class="empty empty-panel">
7270
<p>No messages have been collected.</p>
7371
</div>
72+
{% elseif 1 == collector.buses|length %}
73+
<p class="text-muted">Ordered list of dispatched messages across all your buses</p>
74+
{{ helper.render_bus_messages(collector.messages, true) }}
7475
{% else %}
7576
<div class="sf-tabs message-bus">
7677
<div class="tab">
@@ -112,9 +113,6 @@
112113
data-toggle-initial="{{ loop.first ? 'display' }}"
113114
>
114115
<span class="dump-inline">{{ profiler_dump(dispatchCall.message.type) }}</span>
115-
{% if showBus %}
116-
<span class="label">{{ dispatchCall.bus }}</span>
117-
{% endif %}
118116
{% if dispatchCall.exception is defined %}
119117
<span class="label status-error">exception</span>
120118
{% endif %}
@@ -127,21 +125,21 @@
127125
</thead>
128126
<tbody id="message-item-{{ discr }}-{{ loop.index0 }}-details" class="sf-toggle-content">
129127
<tr>
130-
<td colspan="2" class="message-bus-dispatch-caller">
131-
<span class="metadata">In
132-
{% set caller = dispatchCall.caller %}
133-
{% if caller.line %}
134-
{% set link = caller.file|file_link(caller.line) %}
135-
{% if link %}
136-
<a href="{{ link }}" title="{{ caller.file }}">{{ caller.name }}</a>
137-
{% else %}
138-
<abbr title="{{ caller.file }}">{{ caller.name }}</abbr>
139-
{% endif %}
128+
<th scope="row" class="font-normal">Caller</th>
129+
<td class="message-bus-dispatch-caller">
130+
In
131+
{% set caller = dispatchCall.caller %}
132+
{% if caller.line %}
133+
{% set link = caller.file|file_link(caller.line) %}
134+
{% if link %}
135+
<a href="{{ link }}" title="{{ caller.file }}">{{ caller.name }}</a>
140136
{% else %}
141-
{{ caller.name }}
137+
<abbr title="{{ caller.file }}">{{ caller.name }}</abbr>
142138
{% endif %}
143-
line <a class="text-small sf-toggle" data-toggle-selector="#sf-trace-{{ discr }}-{{ loop.index0 }}">{{ caller.line }}</a>
144-
</span>
139+
{% else %}
140+
{{ caller.name }}
141+
{% endif %}
142+
line <a class="text-small sf-toggle" data-toggle-selector="#sf-trace-{{ discr }}-{{ loop.index0 }}">{{ caller.line }}</a>
145143

146144
<div class="hidden" id="sf-trace-{{ discr }}-{{ loop.index0 }}">
147145
<div class="trace">
@@ -157,27 +155,27 @@
157155
</tr>
158156
{% if showBus %}
159157
<tr>
160-
<td class="text-bold">Bus</td>
158+
<th scope="row" class="font-normal">Bus</th>
161159
<td>{{ dispatchCall.bus }}</td>
162160
</tr>
163161
{% endif %}
164162
<tr>
165-
<td class="text-bold">Message</td>
163+
<th scope="row" class="font-normal">Message</th>
166164
<td>{{ profiler_dump(dispatchCall.message.value, maxDepth=2) }}</td>
167165
</tr>
168166
<tr>
169-
<td class="text-bold">Envelope stamps <span class="text-muted">when dispatching</span></td>
167+
<th scope="row" class="font-normal">Envelope stamps <span class="block text-muted">when dispatching</span></th>
170168
<td>
171169
{% for item in dispatchCall.stamps %}
172170
{{ profiler_dump(item) }}
173171
{% else %}
174-
<span class="text-muted">No items</span>
172+
<span class="text-muted font-normal">No items</span>
175173
{% endfor %}
176174
</td>
177175
</tr>
178176
{% if dispatchCall.stamps_after_dispatch is defined %}
179177
<tr>
180-
<td class="text-bold">Envelope stamps <span class="text-muted">after dispatch</span></td>
178+
<th scope="row" class="font-normal">Envelope stamps <span class="block text-muted">after dispatch</span></th>
181179
<td>
182180
{% for item in dispatchCall.stamps_after_dispatch %}
183181
{{ profiler_dump(item) }}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig

Lines changed: 67 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -107,14 +107,27 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
107107
--button-active-background: var(--gray-200);
108108
--badge-background: var(--gray-200);
109109
--badge-color: var(--gray-600);
110+
--badge-shadow: none;
111+
--selected-badge-background: var(--gray-200);
112+
--selected-badge-color: var(--gray-600);
113+
--selected-badge-shadow: inset 0 0 0 1px var(--gray-300);
110114
--badge-light-background: var(--gray-100);
111115
--badge-light-color: var(--gray-500);
112116
--badge-success-background: var(--green-100);
113117
--badge-success-color: var(--green-700);
118+
--badge-success-shadow: none;
114119
--badge-warning-background: var(--yellow-200);
115120
--badge-warning-color: var(--yellow-700);
121+
--badge-warning-shadow: none;
122+
--selected-badge-warning-background: var(--yellow-200);
123+
--selected-badge-warning-color: var(--yellow-700);
124+
--selected-badge-warning-shadow: inset 0 0 0 1px var(--yellow-500);
116125
--badge-danger-background: var(--red-100);
117126
--badge-danger-color: var(--red-700);
127+
--badge-danger-shadow: none;
128+
--selected-badge-danger-background: var(--red-100);
129+
--selected-badge-danger-color: var(--red-700);
130+
--selected-badge-danger-shadow: inset 0 0 0 1px var(--red-200);
118131
--sidebar-shadow: inset 0 0 0 1px var(--menu-border-color), 0 0 0 3px var(--gray-50), 0 0 0 5px var(--page-background);
119132
--menu-border-color: var(--gray-300);
120133
--menu-color: var(--gray-700);
@@ -233,14 +246,29 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
233246
--button-box-shadow: 0 1px 0 0 var(--gray-500);
234247
--button-color: var(--gray-800);
235248
--button-active-background: var(--gray-400);
236-
--badge-background: #555;
237-
--badge-color: #ddd;
238-
--badge-light-background: var(--gray-600);
239-
--badge-light-color: var(--gray-200);
240-
--badge-warning-background: var(--yellow-300);
241-
--badge-warning-color: var(--yellow-700);
242-
--badge-danger-background: var(--red-600);
243-
--badge-danger-color: var(--red-100);
249+
--badge-background: rgba(221, 221, 221, 0.2);
250+
--badge-color: var(--gray-300);
251+
--badge-shadow: none;
252+
--selected-badge-background: #555;
253+
--selected-badge-color: #ddd;
254+
--selected-badge-shadow: none;
255+
--badge-light-background: var(--gray-700);
256+
--badge-light-color: var(--gray-300);
257+
--badge-success-background: #1dc9a420;
258+
--badge-success-color: #36e2bd;
259+
--badge-success-shadow: inset 0 0 0 1px #36e2bd4d;
260+
--badge-warning-background: #f97a1f33;
261+
--badge-warning-color: #FCDE83;
262+
--badge-warning-shadow: inset 0 0 0 1px #e6af0580;
263+
--selected-badge-warning-background: var(--yellow-300);
264+
--selected-badge-warning-color: var(--yellow-700);
265+
--selected-badge-warning-shadow: inset 0 0 0 1px var(--yellow-600);
266+
--badge-danger-background: #E1244B20;
267+
--badge-danger-color: var(--red-300);
268+
--badge-danger-shadow: inset 0 0 0 1px #e1244Bd0;
269+
--selected-badge-danger-background: var(--red-600);
270+
--selected-badge-danger-color: var(--red-100);
271+
--selected-badge-danger-shadow: none;
244272
--sidebar-shadow: inset 0 0 0 1px var(--menu-border-color), 0 0 0 5px var(--page-background);
245273
--menu-border-color: var(--gray-500);
246274
--menu-color: var(--gray-300);
@@ -657,8 +685,9 @@ table tbody td.num-col {
657685
}
658686

659687
.label {
660-
background-color: var(--base-4);
688+
background-color: var(--badge-background);
661689
border-radius: 4px;
690+
box-shadow: var(--badge-shadow);
662691
color: #FAFAFA;
663692
display: inline-block;
664693
font-size: 12px;
@@ -670,9 +699,9 @@ table tbody td.num-col {
670699
min-width: 70px;
671700
text-align: center;
672701
}
673-
.label.status-success { background: var(--badge-success-background); color: var(--badge-success-color); }
674-
.label.status-warning { background: var(--badge-warning-background); color: var(--badge-warning-color); }
675-
.label.status-error { background: var(--badge-danger-background); color: var(--badge-danger-color); }
702+
.label.status-success { background: var(--badge-success-background); box-shadow: var(--badge-success-shadow); color: var(--badge-success-color); }
703+
.label.status-warning { background: var(--badge-warning-background); box-shadow: var(--badge-warning-shadow); color: var(--badge-warning-color); }
704+
.label.status-error { background: var(--badge-danger-background); box-shadow: var(--badge-danger-shadow); color: var(--badge-danger-color); }
676705

677706
{# Metrics
678707
------------------------------------------------------------------------- #}
@@ -1381,10 +1410,10 @@ tr.status-warning td {
13811410
border-radius: 6px;
13821411
content: '';
13831412
position: absolute;
1384-
top: calc(50% - 12px);
1413+
top: calc(50% - 14px);
13851414
left: -8px;
13861415
width: 4px;
1387-
height: 26px;
1416+
height: 28px;
13881417
}
13891418
#menu-profiler li.selected a .label,
13901419
#menu-profiler:hover li.selected a:hover .label,
@@ -1403,9 +1432,10 @@ tr.status-warning td {
14031432
}
14041433

14051434
#menu-profiler li a .count {
1406-
background: var(--badge-background);
1435+
background: var(--selected-badge-background);
14071436
border-radius: 4px;
1408-
color: var(--badge-color);
1437+
box-shadow: var(--selected-badge-shadow);
1438+
color: var(--selected-badge-color);
14091439
display: inline-block;
14101440
font-weight: bold;
14111441
line-height: 1;
@@ -1423,15 +1453,14 @@ tr.status-warning td {
14231453
}
14241454

14251455
#menu-profiler .label-status-warning .count {
1426-
background: var(--badge-warning-background);
1427-
color: var(--badge-warning-color);
1428-
}
1429-
.theme-dark #menu-profiler .label-status-warning .count {
1430-
box-shadow: inset 0 0 0 1px var(--yellow-600);
1456+
background: var(--selected-badge-warning-background);
1457+
color: var(--selected-badge-warning-color);
1458+
box-shadow: var(--selected-badge-warning-shadow);
14311459
}
14321460
#menu-profiler .label-status-error .count {
1433-
background: var(--badge-danger-background);
1434-
color: var(--badge-danger-color);
1461+
background: var(--selected-badge-danger-background);
1462+
color: var(--selected-badge-danger-color);
1463+
box-shadow: var(--selected-badge-danger-shadow);
14351464
}
14361465

14371466
{# Timeline panel
@@ -1544,6 +1573,9 @@ tr.status-warning td {
15441573
width: 0;
15451574
}
15461575
.tab-navigation li .badge {
1576+
background: var(--selected-badge-background);
1577+
box-shadow: var(--selected-badge-shadow);
1578+
color: var(--selected-badge-color);
15471579
display: inline-block;
15481580
font-size: 12px;
15491581
font-weight: bold;
@@ -1568,11 +1600,16 @@ tr.status-warning td {
15681600
.tab-content > *:first-child {
15691601
margin-top: 0;
15701602
}
1571-
.tab-navigation li .badge.status-warning { background: var(--badge-warning-background); color: var(--badge-warning-color); }
1572-
.theme-dark .tab-navigation li.active .badge.status-warning {
1573-
box-shadow: inset 0 0 0 1px var(--yellow-600);
1603+
.tab-navigation li .badge.status-warning {
1604+
background: var(--selected-badge-warning-background);
1605+
box-shadow: var(--selected-badge-warning-shadow);
1606+
color: var(--selected-badge-warning-color);
1607+
}
1608+
.tab-navigation li .badge.status-error {
1609+
background: var(--selected-badge-danger-background);
1610+
box-shadow: var(--selected-badge-danger-shadow);
1611+
color: var(--selected-badge-danger-color);
15741612
}
1575-
.tab-navigation li .badge.status-error { background: var(--badge-danger-background); color: var(--badge-danger-color); }
15761613

15771614
.sf-tabs .tab:not(:first-child) { display: none; }
15781615

@@ -1829,12 +1866,14 @@ table.logs .log-metadata .context + .context {
18291866
}
18301867
.log-type-badge {
18311868
background: var(--badge-light-background);
1869+
box-shadow: none;
18321870
color: var(--badge-light-color);
18331871
display: inline-block;
18341872
font-family: var(--font-family-system);
18351873
margin-top: 5px;
18361874
}
1837-
.log-type-badge.badge-deprecation {
1875+
.log-type-badge.badge-deprecation,
1876+
.log-type-badge.badge-warning {
18381877
background: var(--badge-warning-background);
18391878
color: var(--badge-warning-color);
18401879
}

0 commit comments

Comments
 (0)
0