bug #22523 [WebProfilerBundle] Fixed the flickering when loading comp…

…lex profiler panels (javiereguiluz)

This PR was merged into the 2.8 branch.

Discussion
----------

[WebProfilerBundle] Fixed the flickering when loading complex profiler panels

| Q             | A
| ------------- | ---
| Branch?       | 2.8
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | -
| License       | MIT
| Doc PR        | -

When profiler panels are complex (usually, when they contain a lot of VarDumper calls) they take some time to load and this results in a ugly flickering of the sidebar. This PR fixes this problem adding some minor CSS changes and reordering some HTML elements in the layout.

These changes shouldn't affect the design in any way but please, test it in your own browsers. Thanks!

| Before | After
| --- | ---
| ![profiler-before](https://cloud.githubusercontent.com/assets/73419/25390425/c7ebb16e-29d3-11e7-9d3f-722d5b24b95a.gif) | ![profiler-after](https://cloud.githubusercontent.com/assets/73419/25390426/c80994ea-29d3-11e7-910c-7a2564b17ffa.gif)

Commits
-------

e9132b3 Fixed the flickering when loading complex profiler panels

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

@@ -43,13 +43,6 @@
 
     <div id="content" class="container">
         <div id="main">
-            <div id="collector-wrapper">
-                <div id="collector-content">
-                    {{ include('@WebProfiler/Profiler/base_js.html.twig') }}
-                    {% block panel '' %}
-                </div>
-            </div>
-
             <div id="sidebar">
                 <div id="sidebar-shortcuts">
                     <div class="shortcuts">
@@ -87,6 +80,13 @@
                     </ul>
                 {% endif %}
             </div>
+
+            <div id="collector-wrapper">
+                <div id="collector-content">
+                    {{ include('@WebProfiler/Profiler/base_js.html.twig') }}
+                    {% block panel '' %}
+                </div>
+            </div>
         </div>
     </div>
 {% endblock %}

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

@@ -433,7 +433,7 @@ tr.status-warning td {
 }
 #main {
     display: flex;
-    flex-direction: row-reverse;
+    flex-direction: row;
     min-height: 100%;
 }
 #sidebar {

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

@@ -1,4 +1,4 @@
-<div id="sidebar-search">
+<div id="sidebar-search" class="hidden">
     <form action="{{ path('_profiler_search') }}" method="get">
         <div class="form-group">
             <label for="ip">IP</label>