8000 bug #54421 [WebProfilerBundle] Improve performance (javiereguiluz) · symfony/symfony@c29b7a9 · GitHub
[go: up one dir, main page]
Skip to content
10000

Commit c29b7a9

Browse files
fabpotfabpot
committed
bug #54421 [WebProfilerBundle] Improve performance (javiereguiluz)
This PR was squashed before being merged into the 7.1 branch. Discussion ---------- [WebProfilerBundle] Improve performance | Q | A | ------------- | --- | Branch? | 7.1 | Bug fix? | yes | New feature? | no | Deprecations? | no | Issues | - | License | MIT This PR tries to solve the following problem: When clicking on panels like `Logs` or `Doctrine`, the page contents take some time to be ready ... and the JavaScript code that runs to change/Add things to UI, produces visible jumps: https://github.com/symfony/symfony/assets/73419/5c980dc3-796b-4230-af9a-d63dfacb5240 ----- I debugged this behavior and the browser shows a "Long Task" warning message but not many other details: ![image](https://github.com/symfony/symfony/assets/73419/ba1cd26e-1984-4893-96a6-f90340b0ef0d) I followed Google's recommendations: https://web.dev/articles/optimize-long-tasks and split the `SymfonyProfiler` tasks in two group: critical (menu and tabs) and normal (the rest of features). That change in addition to `<meta name="view-transition" content="same-origin">` improves the situation, but it's still not perfect. So, this PR is mostly **a call for help to JavaScript experts**. Please help us make the UI as fast as possible. Thanks! Commits ------- 29a271b [WebProfilerBundle] Improve performance
2 parents e462dc8 + 29a271b commit c29b7a9

File tree

3 files changed

+6
-19
lines changed

3 files changed

+6
-19
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="{{ _charset }}" />
55
<meta name="robots" content="noindex,nofollow" />
66
<meta name="viewport" content="width=device-width,initial-scale=1" />
7+
<meta name="view-transition" content="same-origin">
78
<title>{% block title %}Symfony Profiler{% endblock %}</title>
89

910
{% set request_collector = profile is defined ? profile.collectors.request|default(null) : null %}

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

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,32 +11,13 @@
1111
1212
class SymfonyProfiler {
1313
constructor() {
14-
this.#reorderMainMenuItems();
1514
this.#createTabs();
1615
this.#createTableSearchFields();
1716
this.#createToggles();
1817
this.#createCopyToClipboard();
1918
this.#convertDateTimesToUserTimezone();
2019
}
2120
22-
#reorderMainMenuItems() {
23-
/* reorder the main menu items to always display first the non-disabled items */
24-
const mainMenuElement = document.querySelector('#menu-profiler');
25-
const firstDisabledMenuItem = mainMenuElement.querySelector('li a > span.disabled')?.parentNode?.parentNode;
26-
27-
if (!firstDisabledMenuItem) {
28-
return;
29-
}
30-
31-
const mainMenuItems = mainMenuElement.querySelectorAll('li');
32-
mainMenuItems.forEach(menuItem => {
33-
const isDisabled = null !== menuItem.querySelector('a > span.disabled');
34-
if (!isDisabled) {
35-
mainMenuElement.insertBefore(menuItem, firstDisabledMenuItem);
36-
}
37-
});
38-
}
39-
4021
#createTabs() {
4122
/* the accessibility options of this component have been defined according to: */
4223
/* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1499,11 +1499,16 @@ tr.status-warning td {
14991499
list-style-type: none;
15001500
margin: 0;
15011501
padding: 7px;
1502+
display: flex;
1503+
flex-direction: column;
15021504
}
15031505
#menu-profiler li {
15041506
margin-bottom: 0;
15051507
position: relative;
15061508
}
1509+
#menu-profiler li:has(span.disabled) {
1510+
order: 1;
1511+
}
15071512
#menu-profiler li + li {
15081513
margin-top: 4px;
15091514
}

0 commit comments

Comments
 (0)
0