[2.2][WebProfilerBundle] Added minimize option to Web Profiler panels

symfony · Sep 28, 2012 · 310c2f9 · 310c2f9
1 parent c79584a
commit 310c2f9
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 25 deletions.
diff --git 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
@@ -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/...ymfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png b/...ymfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png
diff --git a/...mfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png b/...mfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {