Skip to content

Commit

Permalink
feature #54423 [WebProfilerBundle] Update the search links in the pro…
Browse files Browse the repository at this point in the history
…filer layout (javiereguiluz)

This PR was squashed before being merged into the 7.1 branch.

Discussion
----------

[WebProfilerBundle] Update the search links in the profiler layout

| Q             | A
| ------------- | ---
| Branch?       | 7.1
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Issues        | -
| License       | MIT

While working on #54421, I noticed that the page jump is mostly caused by the "profile search form" that we embed in the page via Ajax. This is how it looks expanded:

![image](https://github.com/symfony/symfony/assets/73419/090febc8-65e6-4ede-8c21-8b3fb0d738d2)

However, thew workflow is as follows:

1. Click on `Search` link
2. The embedded search form expands
3. Input the search criteria
4. Click on `Search` button
5. You are redirected to the Search page to see the results

-----

In this PR, I propose to NOT embed the search form in any pages and change the workflow as follows:

1. Click on `Search` link
2. You are redirected to the Search page to see the results
3. Input the search criteria (in the already expanded search form)
4. Click on `Search` button to see the results

This fixes some of the perceived performance slowdown and looks like a better workflow to me.

-----

Also, the current sidebar shows these shortcut links:

![image](https://github.com/symfony/symfony/assets/73419/1ef165fe-1ac1-42ff-8d01-1514c2b2320f)

* "Last 10" shows the 10 most recent profiles
* "Latest" shows the most recent profile available
* "Search" expands the search form

This PR changes it to only show 2 shortcuts:

* "Search profiles" shows the last 10 profiles and also the search form expanded
* "Latest" shows the most recent profile aaailable

It looks like this:

![search-links](https://github.com/symfony/symfony/assets/73419/8f2ba944-c9a3-4f56-9a12-4818c79bfdcb)

Commits
-------

7baa29e [WebProfilerBundle] Update the search links in the profiler layout
  • Loading branch information
fabpot committed Apr 5, 2024
2 parents 8e06742 + 7baa29e commit 9ece00c
Show file tree
Hide file tree
Showing 5 changed files with 14 additions and 13 deletions.
Expand Up @@ -195,7 +195,6 @@ public function searchBarAction(Request $request): Response
'end' => $request->query->get('end', $session?->get('_profiler_search_end')),
'limit' => $request->query->get('limit', $session?->get('_profiler_search_limit')),
'request' => $request,
'render_hidden_by_default' => false,
'profile_type' => $request->query->get('type', $session?->get('_profiler_search_type', 'request')),
]),
200,
Expand Down
Expand Up @@ -28,16 +28,10 @@
<div id="sidebar-shortcuts">
{% block sidebar_shortcuts_links %}
<div class="shortcuts">
<a class="btn btn-link" href="{{ path('_profiler_search', { limit: 10, type: profile_type }) }}">Last 10</a>
<a class="btn btn-link" href="{{ path('_profiler_search', { limit: 10, type: profile_type }) }}">{{ source('@WebProfiler/Icon/search.svg') }} Search profiles</a>
<a class="btn btn-link" href="{{ path('_profiler', { token: 'latest', type: profile_type }|merge(request.query.all)) }}">Latest</a>

<a class="sf-toggle btn btn-link" data-toggle-selector="#sidebar-search" {% if tokens is defined or about is defined %}data-toggle-initial="display"{% endif %}>
{{ source('@WebProfiler/Icon/search.svg') }} <span class="hidden-small">Search</span>
</a>
</div>
{% endblock sidebar_shortcuts_links %}

{{ render(controller('web_profiler.controller.profiler::searchBarAction', query={type: profile_type }|merge(request.query.all))) }}
</div>

{% if templates is defined %}
Expand Down
Expand Up @@ -1417,7 +1417,7 @@ tr.status-warning td {
------------------------------------------------------------------------- #}
#sidebar #sidebar-shortcuts {
color: var(--gray-500);
padding: 10px 15px;
padding: 5px 8px;
}
#sidebar #sidebar-shortcuts .sf-tabs .tab-navigation {
margin: 5px 0 15px;
Expand All @@ -1432,15 +1432,21 @@ tr.status-warning td {
display: flex;
align-items: center;
font-size: 13px;
padding: 5px 7px;
}
#sidebar #sidebar-shortcuts:hover .btn-link {
color: var(--menu-color);
#sidebar #sidebar-shortcuts .btn-link:hover {
background: var(--menu-active-background);
color: var(--menu-active-color);
text-decoration: none;
}
#sidebar-shortcuts .shortcuts svg {
height: 16px;
width: 16px;
margin-right: 4px;
}
#sidebar #sidebar-shortcuts form {
padding: 5px 7px;
}

{# Sidebar Search (the colors of this element don't change based on the selected theme)
------------------------------------------------------------------------- #}
Expand Down
Expand Up @@ -35,7 +35,9 @@
{% endblock %}

{% block sidebar_search_css_class %}{% endblock %}
{% block sidebar_shortcuts_links %}{% endblock %}
{% block sidebar_shortcuts_links %}
{{ render(controller('web_profiler.controller.profiler::searchBarAction', query={type: profile_type }|merge(request.query.all))) }}
{% endblock %}

{% block panel %}
<div class="sf-tabs" data-processed="true">
Expand Down
@@ -1,4 +1,4 @@
<div id="sidebar-search" class="{{ (render_hidden_by_default ?? true) ? 'hidden' }}">
<div id="sidebar-search">
<form action="{{ path('_profiler_search') }}" method="get">
<div class="form-group">
<label for="ip">
Expand Down

0 comments on commit 9ece00c

Please sign in to comment.