Skip to content

Commit cc4003b

Browse files
fabpotfabpot
committed
feature #47643 [WebProfilerBundle] Update the mailer panel (javiereguiluz)
This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Update the mailer panel | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | no | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - Related to #47148, this updates one of the panels which weren't updated in that other PR. ### Before - 1 email sent ![before-1-email](https://user-images.githubusercontent.com/73419/191480458-a49d6f21-4119-47a7-9bb6-79f583e5cdc3.jpg) ### Before - Multiple emails sent ![before-multiple-emails](https://user-images.githubusercontent.com/73419/191480487-9c177e2c-e340-4b67-b0e3-9cc0fd6e4256.jpg) ### Before - Email attachments ![before-attachment](https://user-images.githubusercontent.com/73419/191480510-597b4e3c-8846-4ad3-b2c4-d8600abc15d6.jpg) ----- ### After - 1 email sent ![after-1-email](https://user-images.githubusercontent.com/73419/191480683-8849eeae-e034-414b-aa44-c6a9f25684c9.jpg) Comments: * All email contents are displayed on the same place, to make debugging quicker * All headers are displayed too; this can be long in some cases, but I think it's better to display them all to spot errors easier and quicker * Attachments now display file name, file size and a link to download them as files. We no longer display the base64-encoded contents of the file ### After - Multiple emails sent ![after-multiple-emails](https://user-images.githubusercontent.com/73419/191481013-c245f0d4-4702-49c6-b723-16208dbce20e.jpg) Comments: * When there's more than 1 email sent/queued, we display the "Email 1", "Email 2", etc. navigation (which is hidden when there's only 1 email to make design more efficient) ### After - MIME parts ![after-mime-parts](https://user-images.githubusercontent.com/73419/191481239-7e056578-17d1-42ba-91e9-e734fcf92f14.jpg) Comments: * This is the same as before ### After - Raw message ![after-raw-message](https://user-images.githubusercontent.com/73419/191481300-3275b0de-0108-4195-a1b5-19a8986c762f.jpg) Comments: * We now include a link to download the raw email as a `*.eml` file Commits ------- eac5aa4 [WebProfilerBundle] Update the mailer panel
2 parents d13a183 + eac5aa4 commit cc4003b

File tree

8 files changed

+397
-167
lines changed

8 files changed

+397
-167
lines changed

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

Lines changed: 191 additions & 162 deletions
Large diffs are not rendered by default.

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/attachment.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/download.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/file.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/mailer.svg‎

Lines changed: 1 addition & 0 deletions
Loading

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -834,6 +834,22 @@ if (typeof Sfjs === 'undefined' || typeof Sfjs.loadToolbar === 'undefined') {
834834
});
835835
},
836836
837+
initializeMailerTable: function() {
838+
const emailRows = document.querySelectorAll('.mailer-email-summary-table-row');
839+
840+
emailRows.forEach((emailRow) => {
841+
emailRow.addEventListener('click', () => {
842+
emailRow.addEventListener('click', () => {
843+
emailRows.forEach((row) => row.classList.remove('active'));
844+
emailRow.classList.add('active');
845+
846+
document.querySelectorAll('.mailer-email-details').forEach((emailDetails) => emailDetails.style.display = 'none');
847+
document.querySelector(emailRow.getAttribute('data-target')).style.display = 'block';
848+
});
849+
});
850+
});
851+
},
852+
837853
updateLogsTable: function() {
838854
const selectedType = document.querySelector('#log-filter-type input:checked').value;
839855
const priorities = document.querySelectorAll('#log-filter-priority input');

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

Lines changed: 170 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
9696
--color-warning: var(--yellow-700);
9797
--color-error: var(--red-600);
9898
--h2-border-color: var(--gray-200);
99+
--heading-code-background: var(--gray-100);
99100
--form-input-border-color: var(--gray-300);
100101
--button-background: var(--gray-100);
101102
--button-border-color: var(--gray-300);
@@ -151,6 +152,9 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
151152
--shadow: 0px 0px 1px rgba(128, 128, 128, .2);
152153
--border: 1px solid #e0e0e0;
153154
--background-error: var(--color-error);
155+
--mailer-email-table-wrapper-background: var(--gray-100);
156+
--mailer-email-table-active-row-background: #dbeafe;
157+
--mailer-email-table-active-row-color: var(--color-text);
154158

155159
--highlight-variable: #e36209;
156160
--highlight-string: #22863a;
@@ -220,6 +224,7 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
220224
--header-error-status-text-color: var(--red-200);
221225

222226
--h2-border-color: var(--gray-500);
227+
--heading-code-background: var(--gray-600);
223228
--form-input-border-color: var(--gray-400);
224229
--button-background: var(--gray-300);
225230
--button-border-color: var(--gray-500);
@@ -273,6 +278,9 @@ button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=
273278
--shadow: 0px 0px 1px rgba(32, 32, 32, .2);
274279
--border: 1px solid #666;
275280
--background-error: #b0413e;
281+
--mailer-email-table-wrapper-background: var(--gray-900);
282+
--mailer-email-table-active-row-background: var(--gray-300);
283+
--mailer-email-table-active-row-color: var(--gray-800);
276284
--highlight-variable: #ffa657;
277285
--highlight-string: #7ee787;
278286
--highlight-comment: #8b949e;
@@ -402,6 +410,16 @@ code, pre {
402410
font-family: var(--font-family-monospace);
403411
font-size: 14px;
404412
}
413+
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
414+
color: inherit;
415+
font-weight: inherit;
416+
font-family: inherit;
417+
font-size: inherit;
418+
background: var(--heading-code-background);
419+
border-radius: 4px;
420+
padding: 0 3px;
421+
word-break: break-word;
422+
}
405423

406424
input, select {
407425
background-color: var(--page-background);
@@ -415,6 +433,19 @@ input[type="radio"], input[type="checkbox"] {
415433
box-shadow: none;
416434
}
417435

436+
/* Used to hide elements added for accessibility reasons (the !important modifier is needed here) */
437+
.visually-hidden {
438+
border: 0 !important;
439+
clip: rect(0, 0, 0, 0) !important;
440+
height: 1px !important;
441+
margin: -1px !important;
442+
overflow: hidden !important;
443+
padding: 0 !important;
444+
position: absolute !important;
445+
width: 1px !important;
446+
white-space: nowrap !important;
447+
}
448+
418449
{# Buttons (the colors of this element don't change based on the selected theme)
419450
------------------------------------------------------------------------- #}
420451
.btn {
@@ -646,7 +677,7 @@ table tbody td.num-col {
646677
.metrics {
647678
align-items: flex-start;
648679
display: flex;
649-
margin: 1em 0 0;
680+
margin: 1em 0;
650681
flex-wrap: wrap;
651682
}
652683
.metrics .metric {
@@ -658,7 +689,7 @@ table tbody td.num-col {
658689
box-shadow: inset 0 0 0 1px var(--metric-border-color), 0 0 0 5px var(--page-background);
659690
border-radius: 6px;
660691
color: var(--metric-value-color);
661-
display: flex;
692+
display: inline-flex;
662693
flex-direction: column-reverse;
663694
min-width: 60px;
664695
padding: 10px 15px;
@@ -760,7 +791,7 @@ table tbody td.num-col {
760791
}
761792

762793
.metric-divider {
763-
float: left;
794+
display: inline-flex;
764795
margin: 0 10px;
765796
min-height: 1px; {# required to apply 'margin' to an empty 'div' #}
766797
}
@@ -773,6 +804,7 @@ table tbody td.num-col {
773804
box-shadow: inset 0 0 0 1px var(--form-input-border-color), 0 0 0 5px var(--page-background);
774805
margin: 1em 0;
775806
padding: 10px;
807+
overflow-y: auto;
776808
}
777809
.card-block + .card-block {
778810
border-top: 1px solid var(--form-input-border-color);
@@ -1471,12 +1503,15 @@ tr.status-warning td {
14711503
box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 5px var(--page-background);
14721504
display: inline-flex;
14731505
flex-wrap: wrap;
1474-
font-size: 13px;
14751506
margin: 0 0 15px;
14761507
padding: 2px;
14771508
user-select: none;
14781509
-webkit-user-select: none;
14791510
}
1511+
.sf-tabs-sm .tab-navigation {
1512+
box-shadow: inset 0 0 0 1px var(--tab-border-color), 0 0 0 4px var(--page-background);
1513+
margin: 0 0 10px;
1514+
}
14801515
.tab-navigation li {
14811516
cursor: pointer;
14821517
font-weight: 500;
@@ -1487,6 +1522,10 @@ tr.status-warning td {
14871522
text-align: center;
14881523
z-index: 1;
14891524
}
1525+
.sf-tabs-sm .tab-navigation li {
1526+
font-size: 13px;
1527+
padding: 2.5px 10px;
1528+
}
14901529
.tab-navigation li:before {
14911530
background: var(--tab-border-color);
14921531
bottom: 15%;
@@ -1644,6 +1683,10 @@ tr.status-warning td {
16441683
font-weight: bold;
16451684
padding: 1px 4px;
16461685
}
1686+
.badge-success {
1687+
background: var(--badge-success-background);
1688+
color: var(--badge-success-color);
1689+
}
16471690
.badge-warning {
16481691
background: var(--badge-warning-background);
16491692
color: var(--badge-warning-color);
@@ -1847,6 +1890,129 @@ tr.log-status-silenced > td:first-child:before {
18471890
margin: 0;
18481891
}
18491892

1893+
{# Mailer panel
1894+
========================================================================= #}
1895+
.mailer-email-summary-table-wrapper {
1896+
background: var(--mailer-email-table-wrapper-background);
1897+
border-bottom: 4px double var(--table-border-color);
1898+
border-radius: inherit;
1899+
border-bottom-left-radius: 0;
1900+
border-bottom-right-radius: 0;
1901+
margin: 0 -9px 10px -9px;
1902+
padding-bottom: 10px;
1903+
transform: translateY(-9px);
1904+
max-height: 265px;
1905+
overflow-y: auto;
1906+
}
1907+
.mailer-email-summary-table,
1908+
.mailer-email-summary-table tr,
1909+
.mailer-email-summary-table td {
1910+
border: 0;
1911+
border-radius: inherit;
1912+
border-bottom-left-radius: 0;
1913+
border-bottom-right-radius: 0;
1914+
box-shadow: none;
1915+
}
1916+
.mailer-email-summary-table th {
1917+
color: var(--color-muted);
1918+
font-size: 13px;
1919+
padding: 4px 10px;
1920+
}
1921+
.mailer-email-summary-table tr td,
1922+
.mailer-email-summary-table tr:last-of-type td {
1923+
border: solid var(--table-border-color);
1924+
border-width: 1px 0;
1925+
}
1926+
.mailer-email-summary-table-row {
1927+
margin: 5px 0;
1928+
}
1929+
.mailer-email-summary-table-row:hover {
1930+
cursor: pointer;
1931+
}
1932+
.mailer-email-summary-table-row.active {
1933+
background: var(--mailer-email-table-active-row-background);
1934+
color: var(--mailer-email-table-active-row-color);
1935+
}
1936+
.mailer-email-summary-table-row td {
1937+
font-family: var(--font-family-system);
1938+
font-size: inherit;
1939+
}
1940+
.mailer-email-details {
1941+
display: none;
1942+
}
1943+
.mailer-email-details.active {
1944+
display: block;
1945+
}
1946+
.mailer-transport-information {
1947+
border-bottom: 1px solid var(--form-input-border-color);
1948+
padding-bottom: 5px;
1949+
font-size: 14px;
1950+
margin: 5px 0 10px 5px;
1951+
}
1952+
.mailer-transport-information .badge {
1953+
font-size: inherit;
1954+
font-weight: inherit;
1955+
}
1956+
.mailer-message-subject {
1957+
font-size: 21px;
1958+
font-weight: bold;
1959+
margin: 5px;
1960+
}
1961+
.mailer-message-headers {
1962+
margin-bottom: 10px;
1963+
}
1964+
.mailer-message-headers p {
1965+
font-size: 14px;
1966+
margin: 2px 5px;
1967+
}
1968+
.mailer-message-header-secondary {
1969+
color: var(--color-muted);
1970+
}
1971+
.mailer-message-attachments-title {
1972+
align-items: center;
1973+
display: flex;
1974+
font-size: 14px;
1975+
font-weight: 600;
1976+
margin-bottom: 10px;
1977+
}
1978+
.mailer-message-attachments-title svg {
1979+
color: var(--color-muted);
1980+
margin-right: 5px;
1981+
height: 18px;
1982+
width: 18px;
1983+
}
1984+
.mailer-message-attachments-title span {
1985+
font-weight: normal;
1986+
margin-left: 4px;
1987+
}
1988+
.mailer-message-attachments-list {
1989+
list-style: none;
1990+
margin: 0 0 5px 20px;
1991+
padding: 0;
1992+
}
1993+
.mailer-message-attachments-list li {
1994+
align-items: center;
1995+
display: flex;
1996+
}
1997+
.mailer-message-attachments-list li svg {
1998+
margin-right: 5px;
1999+
height: 18px;
2000+
width: 18px;
2001+
}
2002+
.mailer-message-attachments-list li a {
2003+
margin-left: 5px;
2004+
}
2005+
.mailer-message-download-raw {
2006+
align-items: center;
2007+
display: flex;
2008+
padding: 5px 0 0 5px;
2009+
}
2010+
.mailer-message-download-raw svg {
2011+
height: 18px;
2012+
width: 18px;
2013+
margin-right: 3px;
2014+
}
2015+
18502016
{# Doctrine panel
18512017
========================================================================= #}
18522018
.sql-runnable {

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,9 @@
8787
letter-spacing: normal;
8888
width: auto;
8989
}
90+
.sf-toolbarreset svg rect {
91+
width: inherit;
92+
}
9093

9194
.sf-toolbarreset {
9295
background-color: var(--sf-toolbar-gray-800);
@@ -313,7 +316,7 @@ div.sf-toolbar .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
313316

314317
.sf-toolbar-block-request .sf-toolbar-status {
315318
border-radius: 6px;
316-
color: var(--white);
319+
color: #fff;
317320
display: inline-block;
318321
flex-shrink: 0;
319322
font-size: 13px;

0 commit comments

Comments
 (0)