bug #22523 [WebProfilerBundle] Fixed the flickering when loading complex profiler panels (javiereguiluz)

fabpot · fabpot · commit 76dd7b0ed63d · 2017-04-25T13:47:11.000-04:00
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
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/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 %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/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 {
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/search.html.twig b/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>

Original file line number	Diff line number	Diff line change
`@@ -433,7 +433,7 @@ tr.status-warning td {`
`433`	`433`	`}`
`434`	`434`	`#main {`
`435`	`435`	`display: flex;`
`436`		`- flex-direction: row-reverse;`
	`436`	`+ flex-direction: row;`
`437`	`437`	`min-height: 100%;`
`438`	`438`	`}`
`439`	`439`	`#sidebar {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div id="sidebar-search">`
	`1`	`+<div id="sidebar-search" class="hidden">`
`2`	`2`	`<form action="{{ path('_profiler_search') }}" method="get">`
`3`	`3`	`<div class="form-group">`
`4`	`4`	`<label for="ip">IP</label>`