Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2b13d14

Browse filesBrowse files
javiereguiluzfabpot
javiereguiluz
authored and
fabpot
committed
[WebProfilerBundle] Minor tweaks in profiler redesign
1 parent 860d86a commit 2b13d14
Copy full SHA for 2b13d14

File tree

4 files changed

+46
-17
lines changed
Filter options

4 files changed

+46
-17
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/exception.html.twig
+8Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,14 @@
2323
{% endblock %}
2424

2525
{% block panel %}
26+
{# these styles are needed to override some styles from Exception page, which wasn't
27+
updated yet to the new style of the Symfony Profiler #}
28+
<style>
29+
.tab-navigation li { background: none; border: 0; font-size: 14px; }
30+
.tab-navigation li.active { border-radius: 6px; }
31+
.tab-navigation li.active .badge { background-color: var(--selected-badge-background); color: var(--selected-badge-color); }
32+
</style>
33+
2634
<h2>Exceptions</h2>
2735

2836
{% if not collector.hasexception %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@
8989
{% if request_collector and request_collector.forwardtoken -%}
9090
{% set forward_profile = profile.childByToken(request_collector.forwardtoken) %}
9191
{% set controller = forward_profile ? forward_profile.collector('request').controller : 'n/a' %}
92-
<div class="status status-compact">
92+
<div class="status status-compact status-compact-forward">
9393
<span class="icon icon-forward">{{ source('@WebProfiler/Icon/forward.svg') }}</span>
9494

9595
Forwarded to

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+11-6Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1053,8 +1053,8 @@ tr.status-warning td {
10531053
padding: 13px 15px 10px;
10541054
position: relative;
10551055
}
1056-
#summary .status-compact:before {
1057-
top: 0;
1056+
#summary .status-compact.status-compact-forward {
1057+
padding: 10px 15px;
10581058
}
10591059
#summary .status + .status {
10601060
margin-top: 10px;
@@ -1538,7 +1538,7 @@ tr.status-warning td {
15381538
display: inline-flex;
15391539
flex-wrap: wrap;
15401540
margin: 0 0 15px;
1541-
padding: 2px;
1541+
padding: 0;
15421542
user-select: none;
15431543
-webkit-user-select: none;
15441544
}
@@ -1547,11 +1547,13 @@ tr.status-warning td {
15471547
margin: 0 0 10px;
15481548
}
15491549
.tab-navigation li {
1550+
box-shadow: none;
1551+
transition: box-shadow .05s ease-in, background-color .05s ease-in;
15501552
cursor: pointer;
15511553
font-weight: 500;
15521554
list-style: none;
15531555
margin: 0;
1554-
padding: 3.5px 14px;
1556+
padding: 4px 14px;
15551557
position: relative;
15561558
text-align: center;
15571559
z-index: 1;
@@ -1591,12 +1593,15 @@ tr.status-warning td {
15911593
}
15921594
.tab-navigation li.active {
15931595
background-color: var(--tab-active-background);
1594-
border-radius: 4px;
1595-
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15), 0 3px 1px 0 rgba(0, 0, 0, 0.05);
1596+
border-radius: 6px;
1597+
box-shadow: inset 0 0 0 1.5px var(--tab-active-border-color);
15961598
color: var(--tab-active-color);
15971599
position: relative;
15981600
z-index: 1;
15991601
}
1602+
.theme-dark .tab-navigation li.active {
1603+
box-shadow: inset 0 0 0 1px var(--tab-border-color);
1604+
}
16001605
.tab-content > *:first-child {
16011606
margin-top: 0;
16021607
}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/settings.html.twig
+26-10Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,41 +110,57 @@
110110
margin-top: 30px;
111111
}
112112
.modal-content .settings-group {
113+
border: 1px solid var(--settings-option-border-color);
114+
border-radius: 4px;
113115
display: flex;
114116
margin-bottom: 15px;
115117
}
116-
.modal-content label {
118+
.modal-content .settings-group label {
117119
cursor: pointer;
118120
display: flex;
119121
flex: 1;
120122
font-size: 16px;
121123
margin: 0;
122124
}
123-
.modal-content label input {
124-
display: none;
125+
.modal-content .settings-group label input {
126+
position: absolute;
127+
clip: rect(0, 0, 0, 0);
128+
pointer-events: none;
129+
opacity: 0;
130+
}
131+
.modal-content .settings-group:has(input:focus-visible) {
132+
outline: 2px dotted var(--settings-option-active-border-color);
133+
outline-offset: 2px;
125134
}
126-
.modal-content label input:checked + p {
135+
.modal-content .settings-group label input:checked + p {
127136
box-shadow: inset 0 0 0 2px var(--settings-option-active-border-color);
128137
background-color: var(--settings-option-active-background);
129138
color: var(--settings-option-active-color);
130139
}
131-
.modal-content label input:checked + p svg {
140+
.modal-content .settings-group label input:checked + p svg {
132141
color: var(--settings-option-active-icon-color);
133142
}
134-
.modal-content label p {
143+
.modal-content .settings-group label p {
135144
align-items: center;
136145
background: var(--settings-option-background);
137-
border-radius: 4px;
138-
box-shadow: inset 0 0 0 1px var(--settings-option-border-color);
146+
139147
color: var(--settings-option-color);
140148
flex: 1;
141149
font-size: 14px;
142150
margin: 0;
143151
padding: 10px 15px;
144152
text-align: center;
145153
}
146-
.modal-content label + label {
147-
margin-left: 15px;
154+
.modal-content .settings-group label:first-child p {
155+
border-top-left-radius: 4px;
156+
border-bottom-left-radius: 4px;
157+
}
158+
.modal-content .settings-group label:last-child p {
159+
border-top-right-radius: 4px;
160+
border-bottom-right-radius: 4px;
161+
}
162+
.modal-content .settings-group label + label p {
163+
border-left: 1px solid var(--settings-option-border-color);
148164
}
149165
.modal-content label p span {
150166
display: block;

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.