From 310c2f98a9e520d82a8ea1a2b4c04c521743c304 Mon Sep 17 00:00:00 2001
From: Florin Patan <florinpatan@gmail.com>
Date: Sat, 15 Sep 2012 16:31:44 +0300
Subject: [PATCH] [2.2][WebProfilerBundle] Added minimize option to Web
 Profiler panels

---
 .../Controller/ProfilerController.php         |   1 +
 .../Resources/public/css/profiler.css         |  40 +++++++--
 .../public/images/profiler/left-arrow.png     | Bin 0 -> 1001 bytes
 .../public/images/profiler/right-arrow.png    | Bin 0 -> 1001 bytes
 .../Resources/views/Collector/time.html.twig  |  11 ++-
 .../Resources/views/Profiler/admin.html.twig  |   2 +-
 .../views/Profiler/base_js.html.twig          |  32 ++++++-
 .../Resources/views/Profiler/header.html.twig |   2 +-
 .../Resources/views/Profiler/layout.html.twig |  78 ++++++++++++++++++
 .../Resources/views/Profiler/search.html.twig |   2 +-
 .../views/Profiler/toolbar.html.twig          |  24 +++++-
 .../views/Profiler/toolbar_js.html.twig       |  14 ++++
 .../views/Profiler/toolbar_style.html.twig    |  62 ++++++++++++--
 13 files changed, 243 insertions(+), 25 deletions(-)
 create mode 100644 src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png
 create mode 100644 src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php b/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php
index 3eebc7791475..b67e1fbe63cb 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php
+++ b/src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php
@@ -186,6 +186,7 @@ public function toolbarAction(Request $request, $token, $position = null)
             'profile'      => $profile,
             'templates'    => $this->getTemplateManager()->getTemplates($profile),
             'profiler_url' => $url,
+            'token'        => $token,
         ));
     }
 
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/profiler.css b/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/profiler.css
index 8381a9a7b1ca..734826baa65f 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/profiler.css
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/profiler.css
@@ -104,13 +104,14 @@ abbr {
 
 #content {
     padding: 0 50px;
-    margin: 0 auto;
+    margin: 0 auto 20px;
     font-family: Arial, Helvetica, sans-serif;
     min-width: 970px;
+
 }
 
 #header {
-    padding: 30px 30px 20px;
+    padding: 20px 30px 20px;
 }
 
 #header h1 {
@@ -131,6 +132,7 @@ abbr {
     padding-bottom: 0;
     display: block;
     background-color: #f6f6f6;
+    z-index: 10000;
 }
 
 #menu_profiler li a {
@@ -144,9 +146,9 @@ abbr {
 
 #menu_profiler li a span.label {
     display: block;
-    padding: 20px 20px 16px 65px;
-    min-height: 24px;
-    _height: 24px;
+    padding: 20px 0px 16px 65px;
+    min-height: 16px;
+    overflow: hidden;
 }
 
 #menu_profiler li a span.icon {
@@ -186,7 +188,7 @@ abbr {
 
 #collector_content {
     margin-left: 250px;
-    padding: 40px 50px;
+    padding: 30px 40px 40px;
 }
 
 #navigation {
@@ -235,8 +237,9 @@ li {
 #resume {
     background-color: #f6f6f6;
     border-bottom: 1px solid #dfdfdf;
-    padding: 10px 50px;
-    margin-left: 210px;
+    padding: 18px 10px 0px;
+    margin-left: 250px;
+    height: 34px;
     color: #313131;
     font-size: 12px;
     -moz-border-radius-topright: 16px;
@@ -284,7 +287,9 @@ table th.value {
 }
 
 .sf-exceptionreset .block_exception_detected .text_exception {
-    width: 520px;
+    left: 10px;
+    right: 10px;
+    width: 95%;
 }
 
 .sf-exceptionreset .block_exception_detected .illustration_exception {
@@ -488,3 +493,20 @@ td.main, td.menu {
     border: 1px solid #999;
     border-width: 1px 0;
 }
+
+.collapsed-menu-parents #resume,
+.collapsed-menu-parents #collector_content {
+    margin-left: 60px !important;
+}
+
+.collapsed-menu {
+    width: 60px !important;
+}
+
+.collapsed-menu span :not(.icon) {
+    display: none !important;
+}
+
+.collapsed-menu span.icon img {
+    display: inline !important;
+}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png b/src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c63f0919bd228b3a5f91330cd46a2f8774ceabd
GIT binary patch
literal 1001
zcmV<F0~Y*=P)<h;3K|Lk000e1NJLTq0015U001Ef1^@s6&Kw)s0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#i%CR5RCwCtmtROzQ5?s&*(BYXt{S!_
zMTwL~OVq$7)E<1;U_`9KYPF{GMGz_!1{(C|#TOrnKtZ=MMiFL71SLf<a@A5OB334d
z%hi~&beqex)z<gG7S}oN?%e_(I`HLpx1Do8JNNv~_xvt58jW&RqwzSa)c!y4nl#36
z+uGWM6B841@}Z)l;%#$t^E~UDFi9?(&6d;C({p@oZmu>I3MnFyh>-ewR#sL}C=@;y
ziA4QYtMxX%3TF!D8w`e%Ua$A!!otE9CNs&&$r+c)Waljw%RRb3up)SHa4_F&Huv~^
zz9Z?Zp;Rh0n@py2Wo2a{#^9l$p$#1!9ghQnz}`#}NGulH1_lN+xctr}t8=@$x~^vm
zC2e+gR*9v$hRe07!2Fh$mPU`qbCAXT2kCxvxm<Ovt*yGm9kc{IHZ~?59UV2XfL=hx
zs}axAb#gkLmk`#k1kUd5?KNV%NLWBG$F|#5gzl9(V%avgx3||)XH5l*CnqPhY@wtn
zl}Z)DDY^kLoTCV$WzGe2D43d>+Q9&-2h^GXy-&6<-Jt2|>D>q$p&9Cod3L+KBpeR&
zQ$P=;10~Jx_vgFa?gFxfso?BjFepng)&l4Q3Um{~T_(_Y!&1uP%s4m;R+pV(oDr}C
z6#w=j)Iq<Qg2CV?f;okSg#iX*ZGdYi@P342OyE2oFIrSo6im$OaCv#TTObhpVgP>#
z_!+iviA3@vFE4K{-Y*U&K!0gzsh8nXyOIRnO*f#pxY&b04vYvDOg?;5C=_p4xYl1d
zq5+|it~2_)BKDokKztgF<`IswMV9beh&SjuVQoV-H8oGk<dT5{d_MoZUax=2@(?<a
zBB?m__4Uti`GNRUGBBwY#?@-|9hFMu<@}?j)oMRiS6360am8{e>9I)c>;;N93)VZB
zDHM-)rm3mPj7tYe-c%I`aiTrY;m*#^(|vt?61G6{c#THmSDj9GGiIqyXn{%1C4fpH
z^~lJG78T|$oYjm<VYyuXv!S8k9U>|Ao<N_Vc{WuhDOa{aRnUHi!?6!493CDPph8))
zL~y-GRaI38a#vPX+VRzM=r!~OT1=<BC9}+jwm~J(PG~zh-cV2FqMqiUmL`Rqk0d7a
zF(#5o0XjG1GJIPke_&m#d=W#WppPFai!n!<jU{J@n!TBVmyJtsJ=QnjuGahU9{~mc
XWX@!VZ0I#>00000NkvXXu0mjfq3p}1

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png b/src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc6166272eb952cfeabe589d5a6e7ba69c10b1bd
GIT binary patch
literal 1001
zcmV<F0~Y*=P)<h;3K|Lk000e1NJLTq0015U001Ef1^@s6&Kw)s0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#i%CR5RCwC#mt9CxVHn5Va<;kYnrygD
zgJh^^L?mdUX}gfvKq6;Z8C%nB7m8q@5O~uEiFhH^jTf?kS*{`z`hdC#B-93J*kUEZ
z+S<naDBY*7n%jC_*kT^m&N<Goiw^vG-m{(e{hjwbALlugNF<WB8wce-_@4$33=Cw>
z&dwe|<AQ<$V{dP-ABK^?0jA02@@B8sd)n{!*M>r&?D#*aRH~oFVohgdWj)krH21|~
zaUfMNO{G#bI-SlNfj~e+<PPa{x{c50UmYGEz6Ym4(%`wdIaYsv|INk4MfG-k$mMd!
z)M~XxB9XYsfSC;q4bNRJmpGLGVzb$AySuxkH8nM>M8I^VQaNa~T3dD^dWAyaQ@vh)
z9)=rR;sSGBdQVT!1p?5QM8OarCt=rZC|;6*b4(`FHJr6BO-xKk!CoN>pP!$<ys)q!
z_!Bt2udnZ{$K%OMvc?cVZ=(U&>qOy@f;@<F6$~>HfwL_Z%Nd+C<dCD1*a;c9&1RE<
z;UofcS5{UI;ml`%#uLC5c;Myb<zk=Dmx~2c>~?#u+wI;*;N}y-?}9m%Y*H{7q)kpv
zmc*DbFclt!kVKXs_#=Sx<KR!g=#ou>k}Hh)`8SxsV9-c_L!cIbEyaF-n>Y?emGo{I
z3<TY?#m6F%$P2|jLJ)cmpkr~+dbDZ0iTU~Y9;}Z;P~Lnz9xt#BXeXFwcu*#jxmi|L
zW{<r%V&E`Jx5C0gC(it#1khVVd{bIlirj);7@OF1a=}7xaOStcHA=EjbW~MUy#uov
z-Q<>+1WN9Dc>fNX&1M$PI(kquQK&#5_%Sjv(n+Jy9>eK3?2dh)kFBk(uOP_q)@mk^
z0ci?_Vj7?yVCYFyxzMw>R##V#%Ve@IJJr-dBd{cuN*}<`9N&>(w}zZ==;-Ls*45Rm
zr3wYVdb_&1P*Irzt>HETpo1XU=;-K0olch*4u?rYo0^)wwzs$6fg$qidr*K#>yrs8
z2Awb(jg4BZ_AuBCBEX`eqD|;DP37g~<8b-{#SLhkOqaPA6&uh|Q0>gj%rS$(uph*7
zI2=?=dlRmxs93M8taN}-O1?%e1EE;?zMb|K)m1j=0H`D?)aG)b;4`7WPUCPm8_^W`
zjG7J5Cy*t+SftX>r-M*#=S1_J6@4P;_=&0>DnQWy@+AYN`t3x)lv~n^?Ak}$F98Ms
X>*aOuJKrDw00000NkvXXu0mjfh)3Nk

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
index d283182720f1..f4179792ffba 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig
@@ -134,7 +134,7 @@
             "use strict";
 
             var _drawingColors  = {{ colors|json_encode|raw }},
-                _storagePrefix  = 'sf2/profiler/timeline',
+                _storagePrefix  = 'timeline/',
                 _threshold      = 1,
                 _requests       = requests,
                 _maxRequestTime = maxRequestTime;
@@ -353,7 +353,7 @@
             };
 
             this.getThreshold = function() {
-                var threshold = localStorage.getItem(_storagePrefix + '/threshold');
+                var threshold = Sfjs.getPreference(_storagePrefix + 'threshold');
 
                 if (threshold === null) {
                     return _threshold;
@@ -368,7 +368,7 @@
             {
                 _threshold = threshold;
 
-                localStorage.setItem(_storagePrefix + '/threshold', threshold);
+                Sfjs.setPreference(_storagePrefix + 'threshold', threshold);
 
                 return this;
             };
@@ -423,6 +423,11 @@
         elementThresholdControl.onclick  = canvasAutoUpdateOnThresholdChange;
         elementThresholdControl.onchange = canvasAutoUpdateOnThresholdChange;
         elementThresholdControl.onkeyup  = canvasAutoUpdateOnThresholdChange;
+
+        window.setTimeout(function() {
+            canvasAutoUpdateOnThresholdChange(null);
+        }, 50);
+
     //]]></script>
 {% endblock %}
 
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/admin.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/admin.html.twig
index 2488af415722..8989115b2b49 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/admin.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/admin.html.twig
@@ -1,4 +1,4 @@
-<div class="search import clearfix">
+<div class="search import clearfix" id="adminBar">
     <h3>
         <img style="margin: 0 5px 0 0; vertical-align: middle; height: 16px" width="16" height="16" alt="Import" src="{{ asset('bundles/webprofiler/images/import.png') }}" />
         Admin
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
index d6cd784c1660..61244bc353c2 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
@@ -3,6 +3,9 @@
         "use strict";
 
         var noop = function() {},
+
+            profilerStorageKey = 'sf2/profiler/',
+
             request = function(url, onSuccess, onError, payload, options) {
                 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
                 options = options || {};
@@ -17,21 +20,48 @@
                 };
                 xhr.send(payload || '');
             },
+
             hasClass = function(el, klass) {
                 return el.className.match(new RegExp('\\b' + klass + '\\b'));
             },
+
             removeClass = function(el, klass) {
                 el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');
             },
+
             addClass = function(el, klass) {
                 if (!hasClass(el, klass)) { el.className += " " + klass; }
+            },
+
+            getPreference = function(name) {
+                if (!window.localStorage) {
+                    return null;
+                }
+
+                return localStorage.getItem(profilerStorageKey + name);
+            },
+
+            setPreference = function(name, value) {
+                if (!window.localStorage) {
+                    return null;
+                }
+
+                localStorage.setItem(profilerStorageKey + name, value);
             };
 
         return {
             hasClass: hasClass,
+
             removeClass: removeClass,
+
             addClass: addClass,
+
+            getPreference: getPreference,
+
+            setPreference: setPreference,
+
             request: request,
+
             load: function(selector, url, onSuccess, onError, options) {
                 var el = document.getElementById(selector);
 
@@ -51,6 +81,7 @@
 
                 return this;
             },
+
             toggle: function(selector, elOn, elOff) {
                 var i,
                     style,
@@ -66,7 +97,6 @@
 
                 return this;
             }
-
         }
     })();
 /*]]>*/</script>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig
index ce548de5cd18..710d1ca7ace1 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig
@@ -4,7 +4,7 @@
     </h1>
 
     <div class="search">
-        <form method="get" action="http://symfony.com/search">
+        <form method="get" action="http://symfony.com/search" target="_blank">
             <div class="form_row">
                 <label for="search_id">
                     <img src="{{ asset('bundles/webprofiler/images/profiler/grey_magnifier.png') }}" alt="Search on Symfony website"/>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
index 2c4a0a7bf842..a421c963cfea 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig
@@ -43,6 +43,14 @@
                                     </li>
                                 {% endif %}
                             {% endfor %}
+                            <li class="minimize">
+                                <a href="javascript:void(0);" title="Minimize toolbar" onclick="return toggleMenuPanels();">
+                                    <span class="label">
+                                        <span class="icon"><img id="minimizePanelIcon" src="{{ asset('bundles/webprofiler/images/profiler/left-arrow.png') }}" alt="" /></span>
+                                        <strong>Minimize</strong>
+                                    </span>
+                                </a>
+                            </li>
                         </ul>
                     {% endif %}
                     {% render 'WebProfilerBundle:Profiler:searchBar' %}
@@ -51,4 +59,74 @@
             </div>
         </div>
     </div>
+
+    <script type="text/javascript">//<![CDATA[
+
+        function toggleMenuPanels(state, doSave) {
+            var leftIconPath = "{{ asset('bundles/webprofiler/images/profiler/left-arrow.png')|e('js') }}",
+                rightIconPath = "{{ asset('bundles/webprofiler/images/profiler/right-arrow.png')|e('js') }}",
+                menu = document.getElementById('navigation'), savedState = Sfjs.getPreference('menu/displayState'),
+                displayState, elem, className;
+
+            if (savedState == null) {
+                savedState = 'block';
+            }
+
+            displayState = state || (savedState == 'block' ? 'none' : 'block');
+
+            if (typeof doSave === 'undefined') {
+                doSave = true;
+            }
+
+            document.getElementById('searchBar').style.display = displayState;
+            document.getElementById('adminBar').style.display = displayState;
+
+            if (displayState == 'block') {
+                Sfjs.removeClass(menu, 'collapsed-menu');
+                Sfjs.removeClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
+
+                document.getElementById('minimizePanelIcon').src = leftIconPath;
+            } else {
+                Sfjs.addClass(menu, 'collapsed-menu');
+                Sfjs.addClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
+
+                document.getElementById('minimizePanelIcon').src = rightIconPath;
+            }
+
+            if (doSave) {
+                Sfjs.setPreference('menu/displayState', displayState);
+            }
+
+            try {
+                canvasAutoUpdateOnThresholdChange(null);
+            } catch (err) {
+
+            }
+
+            return false;
+        }
+
+        window.setTimeout(function() {
+            var menuItems = document.getElementById('menu_profiler').getElementsByTagName('LI'),
+                elem, value, child, displayState = Sfjs.getPreference('menu/displayState');
+
+            if (displayState == 'none') {
+                toggleMenuPanels('none', false);
+            }
+
+            for (elem in menuItems) {
+                if (typeof(menuItems[elem].children) != 'undefined' &&
+                    menuItems[elem].children.length > 0) {
+                    child = menuItems[elem].children[0]
+
+                    if (child.getAttribute('title') == '' ||
+                        child.getAttribute('title') == null) {
+                        value = child.text.replace(/^\s+/g, '').split('\n')[0].replace(/\s+$/g, '');
+                        child.setAttribute('title', value);
+                    }
+                }
+            }
+        }, 25);
+
+    //]]></script>
 {% endblock %}
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/search.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/search.html.twig
index d3082406493b..8bf95ec94a95 100644
--- 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 class="search clearfix">
+<div class="search clearfix" id="searchBar">
     <h3>
         <img style="margin: 0 5px 0 0; vertical-align: middle;" width="16" height="16" alt="Search" src="{{ asset('bundles/webprofiler/images/search.png') }}" />
         Search
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
index 65e9b1d69ca3..b92b2d2c09a6 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.html.twig
@@ -1,10 +1,28 @@
 <!-- START of Symfony2 Web Debug Toolbar -->
 {% if 'normal' != position %}
     {% include 'WebProfilerBundle:Profiler:toolbar_style.html.twig' with { 'position': position, 'floatable': true } %}
-    <div style="clear: both; height: 38px;"></div>
+    <div id="sfMiniToolbar_{{ token }}" class="sf-minitoolbar">
+        <a href="javascript:void(0);" title="Show Symfony toolbar" onclick="
+            var elem = this.parentNode;
+            if (elem.style.display == 'none') {
+                document.getElementById('sfToolbarMainContent_{{ token }}').style.display = 'none';
+                document.getElementById('sfToolbarClearer_{{ token }}').style.display = 'none';
+                elem.style.display = 'block';
+            } else {
+                document.getElementById('sfToolbarMainContent_{{ token }}').style.display = 'block';
+                document.getElementById('sfToolbarClearer_{{ token }}').style.display = 'block';
+                elem.style.display = 'none'
+            }
+
+            Sfjs.setPreference('toolbar/displayState', 'block');
+        ">
+            <img width="26" height="28" alt="Symfony" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAcCAMAAABIzV/hAAACZFBMVEUwLjL///////////////////////////////////////////////////////////////////+Eg4b///+Ni46Xlpj///////////+op6n///////////////////////////////////////////////////////////9ZWFv///////9qaWz///////+mpaf///////////////9ZWFv///////////////9PTVH///91dHb////////////////////g4OD///9NTE+Ih4r///////+Ni47///////92dHeRkJLk5OTLy8xlY2b///////+cm53///////+5ubr////o6Oj////////U1NT///9DQURsa22rq6ysq61hX2L///+LioxTUVVBP0NEQkZpZ2rGxsf///9ram3////s7O2SkZNfXmFxcHKmpae4uLnKysuXlpiop6l3dXiIh4pYVlmrq6ycm52trK7Nzc48Oj5dW158e36dnJ49Oz/Pz9BiYGPAv8BDQUTQz9BVU1aioaNHRUnBwcJXVVk6ODxJR0t3dnmko6U8Oj6lpKY9Oz+0tLXDwsRQTlF7en1QTlHi4eJhX2LFxcZTUVViYGNwb3J+fX83NTlFQ0dUUlW4t7icm524uLk8Oj5YVlmPjpBLSU2enZ9aWVw/PkFBP0NdW153dnk0MjZQTlE1MzdQT1JdXF9ram15eHqGhYdDQkV5eHo2NThEQkZRUFNFQ0dta244NjpGREhTUVU5NztUUlVhX2JubG9HRUlVU1ZiYGM7OTxIRkk7OT1IR0o8Oj4wLjI9Oz8YdG13AAAAynRSTlMAAAEDBAUGCgsMDQ4QEhMUGRobGx0gISIkJiYnKCktLi8wMjM0NTk6Ozw+P0NFSEpLTE5PUFBTWlteXmBiZGVmaWxtcHBxc3R0dnl5fX+BgoOGi46Pj5CRmZqanZ6eoKeoq6ytsLCwsrO0tbe5urq8vL+/wsTFx8jJycvLy8vM0NHR0tLU1NfX2NnZ2trc3N3d3eHh4uLl5ebm5ubn5+fo6urt7e3u7vDx8/Pz9PT19fX19fX29vf39/j4+fn5+vr6+vv7+/z8/f3+yR5EtwAAAbVJREFUeNpl0mVXVFEYhuF3zhkOFqMjYmCi2MUYYKGIYiJ2YCd2t4IBFqgoKjZ2jg3igI2KyO2f8sTMngGvj/te71r7wyMuk4jofZccAihcMzJKXDYnuYcVotyeYKiktV5LA0faaE7S4s7TyMsBupnMcoH/vO6gmanJaiLV1Py+Xwn5zc0fjCbSi2LI2QdkGdLyFBG+rHwMzz4BD7wyGEfFk8pfsD2TkGmyFNvFHfDj55v02VD6DcteOYylatY8oG7boA2QV4vlklzB8tU3/DIwo+dWv58guY5tRcLMtwSGdi1DkTvAn9Jqsgbu4kafRBqlV4sDFCWuIjdhMsp7yQU49rB28/QPLOu2DuWqLMfmfw6M716GskdGVRMSGDKRsEzpvZ+Qs0lFKDd94s2oArh2F7K3oNQt6ChGr5x6+Dx3J7d2E3Ygqam4PCkngRNnngYIO5cWq4lLb5t+vJ6GiifFR1nbMNqP3fSOCN8PZnQynEW5W/nmHy0PXv79eHpRSjsjtEOtWZcRc9YXlNx7VFKwceGYHjG6s0Ob3iK+X3LqlKnjkvt39rjD6w3W6BhvrCdaVw//ADrWicJIvtkmAAAAAElFTkSuQmCC"/>
+        </a>
+    </div>
+    <div id="sfToolbarClearer_{{ token }}" style="clear: both; height: 38px;"></div>
 {% endif %}
 
-<div class="sf-toolbarreset">
+<div id="sfToolbarMainContent_{{ token }}" class="sf-toolbarreset">
     {% for name, template in templates %}
         {{ template.renderblock('toolbar', {
             'collector': profile.getcollector(name),
@@ -20,6 +38,8 @@
             var p = this.parentNode;
             p.style.display = 'none';
             (p.previousElementSibling || p.previousSibling).style.display = 'none';
+            document.getElementById('sfMiniToolbar_{{ token }}').style.display = 'block';
+            Sfjs.setPreference('toolbar/displayState', 'none');
         "></a>
     {% endif %}
 </div>
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
index f3ce85305696..d53156e1a7e3 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
@@ -7,6 +7,20 @@
             '{{ path("_wdt", { "token": token }) }}',
             function(xhr, el) {
                 el.style.display = -1 !== xhr.responseText.indexOf('sf-toolbarreset') ? 'block' : 'none';
+
+                if (el.style.display == 'none') {
+                    return;
+                }
+
+                if (Sfjs.getPreference('toolbar/displayState') == 'none') {
+                    document.getElementById('sfToolbarMainContent_{{ token }}').style.display = 'none';
+                    document.getElementById('sfToolbarClearer_{{ token }}').style.display = 'none';
+                    document.getElementById('sfMiniToolbar_{{ token }}').style.display = 'block';
+                } else {
+                    document.getElementById('sfToolbarMainContent_{{ token }}').style.display = 'block';
+                    document.getElementById('sfToolbarClearer_{{ token }}').style.display = 'block';
+                    document.getElementById('sfMiniToolbar_{{ token }}').style.display = 'none';
+                }
             },
             function(xhr) {
                 if (xhr.status !== 0) {
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_style.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_style.html.twig
index 0564d8c8ae33..bb4ca082a41e 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_style.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_style.html.twig
@@ -1,4 +1,26 @@
 <style type="text/css">
+    .sf-minitoolbar {
+        display: none;
+
+        position: fixed;
+        bottom: 0;
+        right: 0;
+
+        padding: 5px 5px 0;
+
+        background-color: #f7f7f7;
+        background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);
+        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));
+        background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);
+        background: linear-gradient(top, #e4e4e4, #ffffff);
+
+        -moz-border-radius: 16px 0 0 0;
+        -webkit-border-radius: 16px 0 0 0;
+        border-radius: 16px 0 0 0;
+
+        z-index: 6000000;
+    }
+
     .sf-toolbarreset {
         position: fixed;
         background-color: #f7f7f7;
@@ -12,12 +34,15 @@
         text-align: left;
         color: #2f2f2f;
 
-        background-image: -moz-linear-gradient(-90deg, #e4e4e4, #ffffff);
+        background-image: -moz-linear-gradient(top, #e4e4e4, #ffffff);
         background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e4e4e4), to(#ffffff));
+        background-image: -o-linear-gradient(top, #e4e4e4, #ffffff);
+        background: linear-gradient(top, #e4e4e4, #ffffff);
+
         bottom: 0;
         border-top: 1px solid #bbb;
     }
-    .sf-toolbarreset span, 
+    .sf-toolbarreset span,
     .sf-toolbarreset div {
         font-size: 11px;
     }
@@ -164,7 +189,7 @@
 
     .sf-toolbar-block .sf-toolbar-icon .sf-toolbar-status {
         border-radius: 12px;
-        border-bottom-left-radius: 0px;
+        border-bottom-left-radius: 0;
         margin-top: 0;
     }
 
@@ -216,9 +241,29 @@
 
     /***** Override the setting when the toolbar is on the top *****/
     {% if position == 'top' %}
+        .sf-minitoolbar {
+            top: 0;
+            bottom: auto;
+            right: 0;
+
+            background-color: #f7f7f7;
+
+            background-image: -moz-linear-gradient(225deg, #e4e4e4, #ffffff);
+            background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#e4e4e4), to(#ffffff));
+            background-image: -o-linear-gradient(135deg, #e4e4e4, #ffffff);
+            background: linear-gradient(225deg, #e4e4e4, #ffffff);
+
+            -moz-border-radius: 0 0 0 16px;
+            -webkit-border-radius: 0 0 0 16px;
+            border-radius: 0 0 0 16px;
+        }
+
         .sf-toolbarreset {
-            background-image: -moz-linear-gradient(-90deg, #ffffff, #e4e4e4);
-            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e4e4e4));
+            background-image: -moz-linear-gradient(225deg, #e4e4e4, #ffffff);
+            background-image: -webkit-gradient(linear, 100% 0%, 0% 0%, from(#e4e4e4), to(#ffffff));
+            background-image: -o-linear-gradient(135deg, #e4e4e4, #ffffff);
+            background: linear-gradient(225deg, #e4e4e4, #ffffff);
+
             top: 0;
             bottom: auto;
             border-bottom: 1px solid #bbb;
@@ -236,8 +281,11 @@
         .sf-toolbarreset {
             position: static;
             background: #cbcbcb;
-            background-image: -moz-linear-gradient(-90deg, #e8e8e8, #cbcbcb) !important;
-            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e8e8e8), to(#cbcbcb)) !important;
+
+            background-image: -moz-linear-gradient(90deg, #cbcbcb, #e8e8e8); !important;
+            background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#cbcbcb), to(#e8e8e8)); !important;
+            background-image: -o-linear-gradient(180deg, #cbcbcb, #e8e8e8); !important;
+            background: linear-gradient(90deg, #cbcbcb, #e8e8e8); !important;
         }
 
         .sf-toolbarreset abbr {