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 cc4003b

Browse filesBrowse 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
Copy full SHA for cc4003b

File tree

8 files changed

+397
-167
lines changed
Filter options

8 files changed

+397
-167
lines changed

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/mailer.html.twig
+191-162Lines changed: 191 additions & 162 deletions
Large diffs are not rendered by default.

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

Copy file name to clipboard
+4Lines changed: 4 additions & 0 deletions
Loading

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

Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions
Loading

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

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Loading

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/mailer.svg
+1Lines changed: 1 addition & 0 deletions
Loading

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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+16Lines 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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+170-4Lines 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

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+4-1Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.