[WebProfilerBundle] Profiler redesign #47148

javiereguiluz · Aug 2, 2022

Q	A
Branch?	6.2
Bug fix?	no
New feature?	yes
Deprecations?	no
Tickets	-
License	MIT
Doc PR	-

This PR updates the design of the toolbar + profiler. The goal is to keep everything the same, but improve it to (1) make it look more modern; (2) improve accessibility (e.g. more contrast in some places); (3) make the design more efficient (rearranging some elements).

How to test it in your projects

# clone this repository branch locally
$ git clone -b update_profiler https://github.com/javiereguiluz/symfony symfony-profiler
$ cd symfony-profiler/

# make your project use the code of this PR
php link /path/to/your/symfony/6.x/project

The link command changes the Symfony dependencies in the vendor/ dir of your project to create symlinks pointing to the code of this PR. See https://symfony.com/doc/current/contributing/code/pull_requests.html#use-your-branch-in-an-existing-project

Some comments to reviewers:

Please, ignore the exception panel in the profiler and the exception page for now. I'll tackle those in a separate future PR.
Try to review more thoroughly the panels which I don't use much: forms, serializer, messenger.
I'll make a PR to Doctrine bundle repository to update the icons and other things in Doctrine panels.

In this Twitter thread we explained the reasons behind some of these changes: https://twitter.com/symfony_en/status/1553998433760993280

For reference purposes, I'm posting here some selected screenshots too:

Before / After in light mode

Before / After in dark mode

Header

Sidebar menu

The icons are from this project: https://github.com/tabler/tabler-icons. There are MIT licensed so I added their license as a file inside the icon directory.

Design efficiency

File source viewer

Toolbar

Guikingone · Aug 2, 2022

Hi @javiereguiluz 👋🏻

I might be wrong but regarding the dark mode, could it be a better idea to keep the white color for the URL / status code / reason phrase as it could be hard for people with vision deficiencies to distinguish the main informations from the background color?

Source: https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide (Colors tab)

javiereguiluz · Aug 2, 2022

@Guikingone I was careful about that during the redesign, but I could have missed something. I've just checked with the browser tool and the contrast should be OK:

Contrast in light mode	Contrast in dark mode

About other uses of color, I think everything has its own textual representation (e.g. the response HTTP status code) so nothing should depend exclusively on color to be fully understood. But again, let's review this together to find this kind of issues. Thanks!

UtechtDustin · Aug 2, 2022

Is there a way to keep the old design and make it selectable somehow ?
I like the old one more, the new one looks like bootstrap without theming.
But maybe I just have to get used to it.

nicolas-grekas · Aug 2, 2022

Kudos @javiereguiluz!

I only have one note from the screenshots: the line height in the "File source viewer" looks a bit too high to me.

Is there a way to keep the old design and make it selectable somehow ?

Not possible as that'd be too much maintenance work.

94noni · Aug 2, 2022

@javiereguiluz it could be great to document/show how to test this PR locally with a personal project running on sf6.1 for example :)

javiereguiluz · Aug 2, 2022

@nicolas-grekas you are right! The line-height was too large. Here's the updated design:

@UtechtDustin when there's a big redesign, it's perfectly fine to not like it at first. We are so used to the current design, that even the slightest change can bother us. It happened the same in 2015 with the last redesign (https://symfony.com/blog/new-in-symfony-2-8-redesigned-profiler). I hope that you like it when you start using it in your own projects.

@94noni the easiest way is to (1) clone this repository, (2) check out this PR and then (3) run php link /path/to/your/project This will create symlinks in the vendor/ dir of your project so you can use the Symfony PR. See https://symfony.com/doc/current/contributing/code/pull_requests.html#use-your-branch-in-an-existing-project

wouterj · Aug 2, 2022

@94noni it'll be something along these lines:

git clone -b update_profiler https://github.com/javiereguiluz/symfony symfony-profiler
cd symfony-profiler
./link /path/to/your/6.x/symfony/project

(if you already have a clone of this repo locally, you can also add Javier's fork as a remote and fetch the branch that way)

94noni · Aug 2, 2022

@wouterj @javiereguiluz yes I know I am already seeing it, but I commented for put this in the PR desc etc for devs to test on their side as well to gather more feedbacks :)

javiereguiluz · Aug 2, 2022

@94noni that's a good idea! I've updated the description to add the instructions shared by Wouter. Thanks.

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

ogizanagi · Aug 2, 2022

(if you already have a clone of this repo locally, you can also add Javier's fork as a remote and fetch the branch that way)

If you have the Github CLI installed, you can also:

gh pr checkout 47148

from your local symfony/symfony clone

alexislefebvre · Aug 2, 2022

This looks great!

I have 2 suggestions:

can the dotted background be removed? It looks like a grid for design.
I like the old style with the big green and red headers, can we keep them at a small border on the left?

Something like this:

Wirone · Aug 3, 2022

@javiereguiluz I am wondering how GET/POST params and uploaded files section will look like with actual data 🤔 Before these sections were stacked, now they are displayed as columns - will it be readable with significant amount of data?

And what about responsiveness?

quentint · Aug 3, 2022

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

-            <div id="sidebar">
-                <div id="sidebar-shortcuts">
-                    <div class="shortcuts">
-                        <a href="#" id="sidebarShortcutsMenu" class="visible-small">


Removing this breaks the Sfjs.addEventListener call there:

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

Line 171 in f531ed2

Sfjs.addEventListener(document.getElementById('sidebarShortcutsMenu'), 'click', function (event) {

quentint · Aug 3, 2022

Thanks for such a great PR!

I overall like it very much, but here are a few notes (of course this is highly personal):

the text looks a bit small, almost everything could use a 10% boost
probably a Windows/Chrome only issue, but the bold texts appears a bit blurry: https://imgur.com/58cYlaV (removing "Ubuntu Mono" from --font-family-monospace fixes that (it also happens that I don't like Ubuntu Mono very much 😉)
even though the dot grid looked awesome in your tweets screenshots, it might be a tad too much when seeing it "live"
the profile search form layout/spacing looks a bit odd
the top-left Symfony logo is a bit light, when using the light theme
the new toolbar is a big plus, but I'm not sure about the shadow on .sf-toolbar-block:hover .sf-toolbar-icon, removing it feels more modern

But: the global feeling is clearly more modern and efficient, well done!

alexander-schranz · Aug 3, 2022

Nice, looking forward to it 👍 what I must say what I was always missing on the /_profiler list was different colors for the HTTP Methods (POST, PUT, PATCH, DELETE, GET/HEAD/OPTONS, ...).

SpicySpaceman · Aug 4, 2022

I really like the new design and already looking forward using it.

One thing I am wondering about is why the header for errors has the response status above and for successful requests below the url.
Looks a bit inconsistent to me, but maybe it has a valid reason I just can't see right now.

ctrl-f5 · Aug 7, 2022

I must agree with @UtechtDustin that it looks very flat and bland. It looks more like a mockup than a finished design. is this really the finished style?

Also agree with others in that I dont like the dotted background.

(I'm talking pure visual design, not the changes in information display)

The toolbar itself does look fresher idd. but the outlined icons provide less of a separation between the different items than the filled icons did. does the new icon set also provide filled icons? or do we maybe need a border on the items?

when there's a big redesign, it's perfectly fine to not like it at first. We are so used to the current design, that even the slightest change can bother us. It happened the same in 2015 with the last redesign.

This is an easy catch all argument to simply waive off all criticism as invalid. And it also works the other way round: if you've been involved in a redesign for a long time it's hard to see its flaws.

Bilge · Aug 7, 2022

Everything looks great except the line height (leading) of the code blocks (including the revised version).

drupol · Aug 7, 2022

Awesome, nothing to say, it's super nice! On my side I really like the background, perfectly adapted in this situation.

VincentFoulon80 · Aug 7, 2022

The only thing that I don't like much about this is the sidebar's background color. The screen is either completely white or completely dark. I feel like there is a color missing, even a slight variation maybe.

javiereguiluz · Aug 11, 2022

In the latest commit, I've updated the "toolbar redirection intercept" page.

Before it looked undesigned:

Now it looks like this:

The main changes are that we now always display the absolute URL of the redirection and we also make the "click to action" (in this case, click to follow the redirection) more consistent (it always looks the same and it's on the same place ... whereas previously it changed depending on the redirected URL).

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

javiereguiluz · Aug 11, 2022

Thank you all for reviewing this. Here are some quick comments to your questions:

@alexislefebvre replaced include() by source() for icons
@VincentFoulon80 about the menu background, I tried a darker color but I don't like it because it's too distracting. This sidebar is just a secondary utility; the focus of the page must be the main content, so this sidebar menu can't bee too distracting. I'm going to try to give it a slightly darker border color
@Bilge the revised line-height of code is pretty tight already. Not sure it'd be comfortable to read it if we make it even more tight
@ctrl-f5 I'm sorry you don't like the redesign. According to user feedback most people like it, so I hope you end up liking it or at least tolerating it. About this --> "It looks more like a mockup than a finished design" I hope you check out the deisgn in detail and you'll see it's full of little details here and there. It's not easy to make something look simple.
@danidoedel you are right that consistency is one of the keys of a good design. In this case, we consciously break consistency for this reason: the status code is a nice-to-have in 2xx/3xx responses, but a critical thing in 4xx/5xx responses. That's why I think it's better to show the error status code as soon as possible, to quickly be aware of the error that happened.
@alexander-schranz I'm going to think about using colors for HTTP methods. I'm aware of the tools that generate API docs applying different colors to them. However, to me it looks too distracting. But I'm going to test it
@quentint I'm going to test a slightly darker Symfony logo; the grid colors should be super subtle (especially in "dark mode") maybe you can send me some screenshot via Slack in a DM so I can check; I don't see anything weird in the search form layout (a screenshot could be gret in this case too); I tweaked the (subtle) shadow of the profiler panels
@Wirone the 3-column layout for GET/POST/Files is only used when the three of them are empty. If one or more is non-empty, then we show the normal stacked design

stof

As you said that the new design improves accessible, have you tried it with keyboard navigation ? Maybe some places would deserve styling the :focus-visible state.

And for the Twig icon, is it expected to stop using the Twig logo for that panel ?

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig

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

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

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/search.html.twig

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig

javiereguiluz · Sep 12, 2022

I think this PR is ready for merge. In the past weeks I've done most, but not all, changes requested by reviewers (including the recent changes requested by @stof; thanks for your review!).

Thank you all!

After this merge, I'll quickly submit PRs to fix/update some pending panels: exceptions, mailer, Doctrine bundles, etc.

stof · Sep 12, 2022

@javiereguiluz is it expected that the Twig panel does not use the Twig logo anymore ? The new icon is neither the logo nor something that is clear that it is about templates.

javiereguiluz · Sep 12, 2022

@stof sorry, I forgot to reply that question.

I thought that using this icon --> https://tabler-icons.io/i/seeding would be OK because it resembles (a bit remotely) to Twig.

An added problem is that:

Twig in English means "small branch"
The Twig logo is in fact a "blade of grass" (https://www.google.com/search?q=blade+of+grass&source=lnms&tbm=isch&sa=X)

Would you recommend using instead an icon related to "templates" instead of Twig? I can think of two candidates:

template: https://tabler-icons.io/i/template
layout-dashboard: https://tabler-icons.io/i/layout-dashboard

fabpot

Le'ts do it!

fabpot · Sep 12, 2022

Thank you @javiereguiluz.

…iluz) 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

This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Profiler design fixes | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - This contains some minor tweaks and fixes for the new Profiler design introduced in #47148. I found some of them while upgrading the Doctrine Migrations Bundle panel (doctrine/DoctrineMigrationsBundle#480). Commits ------- 117789b [WebProfilerBundle] Profiler design fixes

…(HeahDude) This PR was merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Fix profiler search link query params | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | ~ | License | MIT | Doc PR | ~ Reintroduce bug fix from #47417 after it was lost in 6.2 when #47148 was rebased and merged. Commits ------- aaff1d9 [WebProfilerBundle] Fix profiler search link query params

…iereguiluz) This PR was squashed before being merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Minor tweaks in profiler redesign | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | - | License | MIT | Doc PR | - The main purpose of this PR is to fix some design issues in the Exception panel of the Symfony Profiler. Sadly, after the #47148 redesign, I couldn't find the time to update the Exception page design. I'll do that in Symfony 6.3, but let's at least fix these minor issues in the current design. Apart from that, this PR contains some minor tweaks to the design (based on my own usage of the new design and comments shared by the community). ----- **BEFORE** Settings options were separated: <img width="663" alt="settings-before" src="https://user-images.githubusercontent.com/73419/201087940-e0bf6bc1-fcbd-4cf1-a575-e1331f0bf506.png"> **AFTER** now we group the related options: <img width="640" alt="settings-after" src="https://user-images.githubusercontent.com/73419/201087979-3df0b13d-fe47-4b8f-a2f8-25b3c6b2e920.png"> ----- The other change is about "tabs". I wasn't 100% happy with the current design which shows a shadow for the active system: <img width="985" alt="tabs-before" src="https://user-images.githubusercontent.com/73419/201088311-340befa9-d87b-4f46-9194-692a14d181cb.png"> So, yesterday I saw that GitHub introduced [a new way of exploring code](https://github.blog/changelog/2022-11-09-introducing-an-all-new-code-search-and-code-browsing-experience/#the-all-new-code-browsing-experience). It's not public yet, but here's a screenshot of it (with the arrow pointing at their new tab design): ![194612816-78a0cf4a-1a11-4d90-a1a5-075a1801bbd0](https://user-images.githubusercontent.com/73419/201088747-eed9cac7-fde1-4074-a712-c2732c750d4f.jpg) And a short video of new tabs in action: https://user-images.githubusercontent.com/73419/201089212-53bf2689-5433-4c9c-96b5-1db113a1015a.mp4 I think they look great, and their flatter design matches our design well. So I propose to get inspiration from them. This is how our tabs look now after this PR: <img width="973" alt="tabs-after" src="https://user-images.githubusercontent.com/73419/201089326-a3ea1b02-d68a-4e54-80ed-efb9ea71f4ed.png"> In action: ![updated-tabs](https://user-images.githubusercontent.com/73419/201089730-25957477-00f3-4eba-9496-4c2e54c23236.gif) And in dark mode: ![updated-tabs-dark](https://user-images.githubusercontent.com/73419/201089788-eaf79745-4b76-4194-86e9-0a7890e1aba3.gif) Commits ------- 2b13d14 [WebProfilerBundle] Minor tweaks in profiler redesign

…NS_LICENCE.txt (smnandre) This PR was squashed before being merged into the 6.4 branch. Discussion ---------- [WebProfilerBundle] Replace last "old" icon + delete ICONS_LICENCE.txt | Q | A | ------------- | --- | Branch? | 6.4 | Bug fix? | no | New feature? | no | Deprecations? | no | License | MIT Two (related) things in this PR * replace two icons used in the Messenger profiler panel with a Tabler-Icon one (following the conventions used since the [profiler redesign](#47148) ) * delete the now outdated `ICONS_LICENCE.txt` file (as there is no concerned icons remaining, and there is now a [LICENCE.txt](https://github.com/symfony/symfony/blob/6.4/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/LICENSE.txt) file in the `Resources/views/Icon/` directory) I targeted the 6.4 branch as there is no BC in code.. but i don't know how to handle a licence change 🤷🏻‍♂️ --- | Previous icons | After this PR | | - | - | | ![previous-icons](https://github.com/symfony/symfony/assets/1359581/4bd2ab76-94ba-435d-9176-84547f406442) | ![tabler-icon](https://github.com/symfony/symfony/assets/1359581/f8042a82-d963-4bf7-94a2-958d9df53c9e) | Commits ------- 584c512 [WebProfilerBundle] Replace last "old" icon + delete ICONS_LICENCE.txt

…le] Enable profiling commands (HeahDude) This PR was merged into the 6.4 branch. Discussion ---------- [Console][FrameworkBundle][HttpKernel][WebProfilerBundle] Enable profiling commands | Q | A | ------------- | --- | Branch? | 6.4 | Bug fix? | no | New feature? | yes | Deprecations? | no | Tickets | Fix #45241 | License | MIT | Doc PR | ~ TLDR; I've shown a POC of this feature at the Symfony Live Paris last April to some of the core team members (ping `@nicolas`-grekas, `@stof`, `@lyrixx`, `@chalasr`, `@GromNaN`). I propose here a new work from scratch addressing the comments I already got and based on Javier's profiler redesign (#47148). Reviews should better be done by commits. Summary --------- This PR aims to leverage the profiler and its collectors by using a `VirtualRequestStack` to aggregate data on virtual requests. Such requests are obfuscated by default to avoid side effects. It can feel like a hack... or a pragmatic way to get, without much complexity, tons of useful feedback on what's going on during console execution, from basic info about the command, time/memory metrics, to every existing features already available in HTTP context: events, message dispatching, http requests, emails, serialization, validation, cache, database queries... and so on, all that just out of the box! Previous work -------------- There were some work to extract the Profiler logic in a dedicated component, that proved to require a lot of complexity and BC breaks in the API: * #10374 * #14809 (see #14809 (comment)) * #20502 Screenshots ------------ For now I've focused only on the functional parts. <details><summary>Search view</summary> <img width="1221" alt="Screenshot 2022-08-28 at 11 29 25 PM" src="https://user-images.githubusercontent.com/10107633/187095381-851f6be5-cf8c-4fec-aa7b-9f9f80bf8404.png"> </details> <details><summary>Command panel</summary> <img width="1210" alt="Screenshot 2022-08-28 at 11 30 54 PM" src="https://user-images.githubusercontent.com/10107633/187095971-de8f9b85-eeb4-48cf-aff7-fdac0c6f9264.png"> <img width="974" alt="Screenshot 2022-08-28 at 11 31 08 PM" src="https://user-images.githubusercontent.com/10107633/187095980-337f4373-ebe5-4de5-bfb4-3715be868274.png"> <img width="962" alt="Screenshot 2022-08-28 at 11 31 21 PM" src="https://user-images.githubusercontent.com/10107633/187096022-ab18f70a-704a-4c75-81a6-43ca5b66eb9a.png"> <img width="964" alt="Screenshot 2022-08-28 at 11 31 34 PM" src="https://user-images.githubusercontent.com/10107633/187096037-cc45805e-ba65-447f-bca6-2d2ea38239b8.png"> If the command is signal-able the following panel will be available: <img width="961" alt="Screenshot 2022-08-28 at 11 31 46 PM" src="https://user-images.githubusercontent.com/10107633/187096084-2f6a39be-a780-411b-9000-b9ae3407e82b.png"> If sub commands are run using `$this->getApplication()->run()` sub profiles will be shown as for requests: <img width="696" alt="Screenshot 2022-08-28 at 11 31 56 PM" src="https://user-images.githubusercontent.com/10107633/187096105-bb7e4a84-42bc-47ed-9f58-527a771c48cc.png"> </details> The server tab is the same as in the request panel. <details><summary>Performance panel</summary> <img width="977" alt="Screenshot 2022-08-28 at 11 32 23 PM" src="https://user-images.githubusercontent.com/10107633/187096138-3ff3f347-61c7-4ade-8c73-b48d5b504c04.png"> <img width="969" alt="Screenshot 2022-08-28 at 11 32 32 PM" src="https://user-images.githubusercontent.com/10107633/187096168-35be4773-4941-4e5e-8dd4-f6cc009e5d48.png"> </details> <details> <summary>Failing command</summary> The exception panel is shown by default as for requests: <img width="1217" alt="Screenshot 2022-08-28 at 11 33 42 PM" src="https://user-images.githubusercontent.com/10107633/187096210-7b206c72-c2e4-4eb3-9978-916cd3dd6cd6.png"> </details> <details> <summary>Sub command</summary> <img width="1217" alt="Screenshot 2022-08-28 at 11 33 19 PM" src="https://user-images.githubusercontent.com/10107633/187096188-a090fb91-b7b8-4f98-a1d7-99b3605bf48b.png"> </details> <details> <summary>Profile token when verbose</summary> (clickable links with compatible terminals) <img width="534" alt="Screenshot 2022-08-28 at 11 26 51 PM" src="https://user-images.githubusercontent.com/10107633/187096349-8f7619b2-feb4-427c-a315-f4a844536316.png"> </details> <details> <summary>Command interrupted by signal</summary> <img width="1246" alt="Screenshot 2022-10-22 at 4 16 37 PM" src="https://user-images.githubusercontent.com/10107633/197344164-50d72a25-a6e7-4e77-ad87-2d5f54b29b93.png"> </details> Opt-in profiling --------------- Use the new global option `--profile` (in debug only) to profile a command. Future scopes -------------- * When I've discussed the limitation of profiling long running processes such as `messenger:consume` with `@GromNaN` (one of the reasons why I've added an `excludes` option), he told that it would be nice it we could find a way to profile consumers as well. So I've added ~an abstract `VirtualRequest`~ a `_virtual_type` request attribute and a `virtualType` property to profiles, that will allow to create a `MessengerWorkerRequest` and a new type of profile with ease in a follow-up PR if the current implementation is accepted. * We could add some dedicated casters for input and output in the `VarDumper` component (/cc `@nicolas`-grekas) * It could be interesting to decorate and collect traces from some helpers (i.e. when running processes) * ~Add a global option in debug to enable/disable the profiler on the fly when running commands (e.g. a negatable `--profile` flag)~ **[update] implemented in current scope in replacement of semantic config.** * Extract profiling to a new component. Limitations ----------- * ~No sub profiles are created when using `$this->getApplication()->find(...)->run()` because events (needed by the profiler to hook into) are dispatched from `Application::run()`, not from `Command::run()`.~ **[update] The docs has been updated in symfony/symfony-docs#18741 * ~No profiles are created when killing the command process (i.e. using `ctrl-C`, should we add a handler to some signals to force saving profiles?~ **[update] I've added support for this.** * ~Signals as int may not be as useful as they could in the profiler pages, does it worth trying to add a label to some (knowing that some signals can have different constants (labels) with the same int value)?~ **[update] done thanks to #50663 * ~Long running processes should be excluded via configuration to avoid memory leaks~ **[update] profiling is now opt-in using the `--profile` option.** * Profiling `messenger:consume` does not work since the kernel is reset after handling a message. __________________ TODO ------ * [x] I've left some todos inside the code for reviewers to share they thought before I try going further * [x] Add a few tests * [ ] Get help for the UI (new top nav, ~svg for the command panel~) /cc `@javiereguiluz` * ~PR on `symfony/recipes` to add the new `framework.profiler.cli` node~ Commits ------- 82914ba [Console][FrameworkBundle][HttpKernel][WebProfilerBundle] Enable profiling commands

javiereguiluz added the WebProfilerBundle label Aug 2, 2022

javiereguiluz added this to the 6.2 milestone Aug 2, 2022

javiereguiluz requested review from wouterj and chalasr as code owners August 2, 2022 06:59

carsonbot added Status: Needs Review Feature labels Aug 2, 2022

94noni reviewed Aug 2, 2022

View reviewed changes

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/twig.html.twig Outdated Show resolved Hide resolved

quentint reviewed Aug 3, 2022

View reviewed changes

alexislefebvre reviewed Aug 11, 2022

View reviewed changes

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig Outdated Show resolved Hide resolved

stof requested changes Sep 9, 2022

View reviewed changes

carsonbot added Status: Needs Work and removed Status: Needs Review labels Sep 9, 2022

javiereguiluz force-pushed the update_profiler branch from 2a1da0f to 4609438 Compare September 12, 2022 15:08

stof reviewed Sep 12, 2022

View reviewed changes

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig Outdated Show resolved Hide resolved

fabpot approved these changes Sep 12, 2022

View reviewed changes

carsonbot added Status: Reviewed and removed Status: Needs Work labels Sep 12, 2022

[WebProfilerBundle] Profiler redesign

45c15f6

fabpot force-pushed the update_profiler branch from f6128ad to 45c15f6 Compare September 12, 2022 16:11

fabpot merged commit 01d089f into symfony:6.2 Sep 12, 2022

javiereguiluz deleted the update_profiler branch September 12, 2022 17:35

javiereguiluz mentioned this pull request Sep 21, 2022

[WebProfilerBundle] Update the mailer panel #47643

Merged

This was referenced Oct 7, 2022

Update the design of the Symfony Profiler panel doctrine/DoctrineMigrationsBundle#480

Merged

[WebProfilerBundle] Profiler design fixes #47811

Merged

HeahDude mentioned this pull request Oct 23, 2022

[WebProfilerBundle] Fix profiler search link query params #47958

Merged

fabpot mentioned this pull request Oct 24, 2022

Release v6.2.0-BETA1 #47972

Merged

javiereguiluz mentioned this pull request Nov 10, 2022

[WebProfilerBundle] Minor tweaks in profiler redesign #48186

Merged

javiereguiluz mentioned this pull request Dec 17, 2022

[WebProfilerBundle] Add a title and img role to svg of the web debug toolbar #48696

Merged

smnandre mentioned this pull request Sep 10, 2023

[WebProfilerBundle] Replace last "old" icon + delete ICONS_LICENCE.txt #51621

Merged

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

Uh oh!

[WebProfilerBundle] Profiler redesign #47148

[WebProfilerBundle] Profiler redesign #47148

Uh oh!

Conversation

javiereguiluz commented Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Before / After in light mode

Before / After in dark mode

Header

Sidebar menu

Design efficiency

File source viewer

Toolbar

Uh oh!

Guikingone commented Aug 2, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javiereguiluz commented Aug 2, 2022

Uh oh!

UtechtDustin commented Aug 2, 2022

Uh oh!

nicolas-grekas commented Aug 2, 2022

Uh oh!

94noni commented Aug 2, 2022

Uh oh!

javiereguiluz commented Aug 2, 2022

Uh oh!

wouterj commented Aug 2, 2022

Uh oh!

94noni commented Aug 2, 2022

Uh oh!

javiereguiluz commented Aug 2, 2022

Uh oh!

Uh oh!

ogizanagi commented Aug 2, 2022

Uh oh!

alexislefebvre commented Aug 2, 2022

Uh oh!

Wirone commented Aug 3, 2022

Uh oh!

quentint Aug 3, 2022

Choose a reason for hiding this comment

Uh oh!

quentint commented Aug 3, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alexander-schranz commented Aug 3, 2022

Uh oh!

SpicySpaceman commented Aug 4, 2022

Uh oh!

ctrl-f5 commented Aug 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Bilge commented Aug 7, 2022

Uh oh!

drupol commented Aug 7, 2022

Uh oh!

VincentFoulon80 commented Aug 7, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

javiereguiluz commented Aug 11, 2022

Uh oh!

Uh oh!

javiereguiluz commented Aug 11, 2022

Uh oh!

stof left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

javiereguiluz commented Sep 12, 2022

Uh oh!

stof commented Sep 12, 2022

Uh oh!

javiereguiluz commented Aug 2, 2022 •

edited

Loading

Guikingone commented Aug 2, 2022 •

edited

Loading

quentint commented Aug 3, 2022 •

edited

Loading

ctrl-f5 commented Aug 7, 2022 •

edited

Loading

VincentFoulon80 commented Aug 7, 2022 •

edited

Loading

javiereguiluz commented Sep 12, 2022 •

edited

Loading