From 11bfda60abdb0462678c52a8f66b978967259c0e Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Sun, 29 Dec 2013 16:46:37 +0100
Subject: [PATCH 1/7] [WebProfilerBundle] Vertically centered the icons in the
 form tree

---
 .../Resources/views/Collector/form.html.twig    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index eb5eeb75c1522..3ea410a1bf670 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -47,10 +47,11 @@
     }
     .tree .tree-inner {
         width: 100%;
-        padding: 5px 7px;
+        padding: 5px 7px 5px 22px;
         border-radius: 6px;
         color: #313131;
         cursor: pointer;
+        position: relative;
 
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
@@ -62,20 +63,22 @@
     .tree .toggle-button {
         width: 10px;
         height: 10px;
-        background: none;
-        border: none;
+        position: absolute;
+        top: 50%;
+        margin-top: -5px;
+        margin-left: -15px;
     }
     .tree ul ul .tree-inner {
-        padding-left: 22px;
+        padding-left: 37px;
     }
     .tree ul ul ul .tree-inner {
-        padding-left: 37px;
+        padding-left: 52px;
     }
     .tree ul ul ul ul .tree-inner {
-        padding-left: 52px;
+        padding-left: 67px;
     }
     .tree ul ul ul ul ul .tree-inner {
-        padding-left: 67px;
+        padding-left: 82px;
     }
     .tree .tree-inner:hover {
         background: #dfdfdf;

From 07994d5e7480afd50666bd133fa8993e73edcda2 Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 14:55:17 +0100
Subject: [PATCH 2/7] [WebProfilerBundle] Improved JavaScript of the form
 debugger

---
 .../Resources/public/images/toggler.png       | Bin 0 -> 295 bytes
 .../Resources/public/images/toggler_empty.png | Bin 0 -> 238 bytes
 .../Resources/views/Collector/form.html.twig  | 269 ++++++++++--------
 .../views/Profiler/base_js.html.twig          |  10 +-
 4 files changed, 155 insertions(+), 124 deletions(-)
 create mode 100644 src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler.png
 create mode 100644 src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_empty.png

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler.png
new file mode 100644
index 0000000000000000000000000000000000000000..b436c7bd734ca1d5619d6d40cfed4d4958c7d5a1
GIT binary patch
literal 295
zcmeAS@N?(olHy`uVBq!ia0vp^0zj<5!3HFyJAa%3Qfx`y?k)^zAjrPUD;FrjS>O>_
z%)r1c48n{Iv*t(u1=&kHeO=k_^2qVAX!x*dZ~%q2c)B=-cpSew<sk221s+%Vu(T6f
zBTvXF1gD5BJHfCap!lrF-W@^GD;Kt|2>tAr@bWSL3Ht|2rsy4D>2Wxptt4<Zhmk`s
zOyQ$sTAF3WbL~=|N87Sz9(f;gTBDU+`yzL5$?c|9@3@N2`Tu?_n`1pCqfFtztp)L{
zGo<-u9Bp4bO~WoUOwr6Z`bfB>#2w$4zDfo=mi-k!H;;W)l+?QVlg-C(m4AM4uTo#R
lZa(|m=Lf&|HOw>N&ts1E=;;#Ou@mTi22WQ%mvv4FO#m*mY104z

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_empty.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..3059b9cdb31d9e8ec4962b8896490115f9eed70b
GIT binary patch
literal 238
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Y)RhkE(~cP$iB-f7bwD6;1OBO
zz`!jG!i)^F=12eq*-JcqUD@yQ$nmjgU*)OX1Qe?Fba4!^IQ@3=M!~}dJk0SjhjO<B
z7&I*ZpfT$Z^9k;wYnOWnZn2xY(ky->qsJpY*2~rPjM5vJxWAh$@U&v=I-0-WGmocL
zmwEk(z{Bb3HxJpTM<xs0=un;UB>#i)4z(}g48L0r%IUdJ6U&<_l;ml3_%dTiyz!|e
cj8~=hX)TcB^m`o00(1t0r>mdKI;Vst031wAj{pDw

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index 3ea410a1bf670..ebd051208c0a5 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -29,6 +29,13 @@
         /*background: #F6F6F6;*/
         margin: -30px -40px -40px;
     }
+    .toggle-button {
+        display: inline-block;
+        background: url("/bundles/framework/images/toggler.png") no-repeat top left;
+    }
+    .toggle-button.closed {
+        background-position: bottom left;
+    }
     .tree {
         width: 230px;
         padding: 10px;
@@ -63,11 +70,18 @@
     .tree .toggle-button {
         width: 10px;
         height: 10px;
+        /* vertically center the button */
         position: absolute;
         top: 50%;
         margin-top: -5px;
         margin-left: -15px;
     }
+    .tree a.toggle-button {
+        background-size: 10px 20px;
+    }
+    .tree img.toggle-button {
+        background: none;
+    }
     .tree ul ul .tree-inner {
         padding-left: 37px;
     }
@@ -94,15 +108,25 @@
         margin-left: 250px;
         padding: 30px 40px 40px;
     }
+    .tree-details h3 {
+        position: relative;
+        padding-left: 22px;
+    }
+    .tree-details .toggle-button {
+        width: 16px;
+        height: 16px;
+        /* vertically center the button */
+        position: absolute;
+        top: 50%;
+        margin-top: -9px;
+        margin-left: -22px;
+    }
     .form-type {
         color: #999999;
     }
     .hidden {
         display: none;
     }
-    .btn-toggle {
-        cursor: pointer;
-    }
     .badge-error {
         float: right;
         background: #a33;
@@ -125,7 +149,7 @@
 
                 <ul>
                 {% for formName, formData in collector.data.forms %}
-                    {{ form_tree_entry(formName, formData) }}
+                    {{ form_tree_entry(formName, formData, true) }}
                 {% endfor %}
                 </ul>
             </div>
@@ -139,134 +163,152 @@
     {% endif %}
 
     <script>
-    function TreeView(tree) {
-        this.collapseAll = function () {
-            var children = tree.querySelectorAll('ul');
+    function Toggler() {
+        var expand = function (button) {
+                var targetId = button.dataset.toggleTargetId,
+                    target = document.getElementById(targetId);
 
-            for (var i = 0, l = children.length; i < l; i++) {
-                if (children[i].style.display != 'none') {
-                    children[i].style.display = 'none';
+                if (!target) {
+                    throw "Toggle target " + targetId + " does not exist";
+                }
+
+                Sfjs.removeClass(button, 'closed');
+                Sfjs.removeClass(target, 'hidden');
+            },
+
+            collapse = function (button) {
+                var targetId = button.dataset.toggleTargetId,
+                    target = document.getElementById(targetId);
+
+                if (!target) {
+                    throw "Toggle target " + targetId + " does not exist";
+                }
+
+                Sfjs.addClass(button, 'closed');
+                Sfjs.addClass(target, 'hidden');
+            },
+
+            toggle = function (button) {
+                if (Sfjs.hasClass(button, 'closed')) {
+                    expand(button);
                 } else {
-                    children[i].style.display = 'block';
+                    collapse(button);
                 }
-            }
-        };
+            },
 
-        this.expand = function (element) {
-            element.style.display = 'block';
-        };
+            initButtons = function (buttons) {
+                for (var i = 0, l = buttons.length; i < l; ++i) {
+                    var toggleTargetId = buttons[i].dataset.toggleTargetId,
+                        toggleTarget = document.getElementById(toggleTargetId);
 
-        this.collapse = function (element) {
-            element.style.display = 'none';
-        };
+                    if (!toggleTarget) {
+                        throw "Toggle target " + toggleTargetId + " does not exist";
+                    }
 
-        this.toggle = function (element) {
-            var imgs = element.parentElement.getElementsByTagName('img');
-            Sfjs.toggle(element, imgs[0], imgs[1]);
-        }
-    }
+                    // correct the initial state of the button
+                    if (Sfjs.hasClass(toggleTarget, 'hidden')) {
+                        Sfjs.addClass(buttons[i], 'closed');
+                    }
 
-    var tree = document.querySelector('.tree ul');
+                    // attach listener for expanding/collapsing the target
+                    buttons[i].addEventListener('click', function (e) {
+                        toggle(this);
 
-    var treeView = new TreeView(tree);
-    treeView.collapseAll();
-    treeView.expand(document.querySelector('.tree ul ul'));
+                        e.preventDefault();
+                        e.stopPropagation();
 
-    var buttons = tree.querySelectorAll('.toggle-button');
-    for (var j = 0, l = buttons.length; j < l; j++) {
-        buttons[j].addEventListener('click', function (e) {
-            treeView.toggle(this.parentElement.parentElement.querySelector('ul'));
-        }, false);
+                        return false;
+                    });
+                }
+            };
+
+        return {
+            initButtons: initButtons,
+
+            toggle: toggle,
+
+            expand: expand,
+
+            collapse: collapse
+        };
     }
 
     function TabView() {
-        var _activeLink = null,
-            _activeView = null;
+        var activeTab = null,
+
+            activeTarget = null,
+
+            select = function (tab) {
+                var targetId = tab.dataset.tabTargetId,
+                    target = document.getElementById(targetId);
+
+                if (!target) {
+                    throw "Tab target " + targetId + " does not exist";
+                }
 
-        this.init = function () {
-            var links = document.querySelectorAll('.tree .tree-inner'),
-                views = document.querySelectorAll('.tree-details'),
-                i,
-                l;
+                if (activeTab) {
+                    Sfjs.removeClass(activeTab, 'active');
+                }
 
-            for (i = 0, l = links.length; i < l; ++i) {
-                (function () {
-                    var link = links[i];
+                if (activeTarget) {
+                    Sfjs.addClass(activeTarget, 'hidden');
+                }
 
-                    link.addEventListener('click', function (e) {
-                        var targetId = 'details_' + link.dataset.targetId,
-                            view = document.getElementById(targetId);
+                Sfjs.addClass(tab, 'active');
+                Sfjs.removeClass(target, 'hidden');
 
-                        if (view) {
-                            if (null !== _activeLink) {
-                                Sfjs.removeClass(_activeLink, 'active');
-                            }
+                activeTab = tab;
+                activeTarget = target;
+            },
 
-                            if (null !== _activeView) {
-                                Sfjs.addClass(_activeView, 'hidden');
-                            }
+            initTabs = function (tabs) {
+                for (var i = 0, l = tabs.length; i < l; ++i) {
+                    var targetId = tabs[i].dataset.tabTargetId,
+                        target = document.getElementById(targetId);
 
-                            Sfjs.addClass(link, 'active');
-                            Sfjs.removeClass(view, 'hidden');
+                    if (!target) {
+                        throw "Tab target " + targetId + " does not exist";
+                    }
 
-                            _activeLink = link;
-                            _activeView = view;
-                        }
+                    tabs[i].addEventListener('click', function (e) {
+                        select(this);
 
                         e.preventDefault();
+                        e.stopPropagation();
 
                         return false;
-                    })
-                }());
-            }
+                    });
 
-            for (i = 0, l = views.length; i < l; ++i) {
-                Sfjs.addClass(views[i], 'hidden');
-            }
-
-            if (links.length > 0) {
-                Sfjs.addClass(links[0], 'active');
-                _activeLink = links[0];
+                    Sfjs.addClass(target, 'hidden');
+                }
 
-                if (views.length > 0) {
-                    Sfjs.removeClass(views[0], 'hidden');
-                    _activeView = views[0];
+                if (tabs.length > 0) {
+                    select(tabs[0]);
                 }
-            }
-        }
-    }
+            };
 
-    var tabView = new TabView();
+        return {
+            initTabs: initTabs,
 
-    tabView.init();
+            select: select
+        };
+    }
 
-    var elements = {};
-    function toggle(data_id, section) {
-        if (!elements[data_id]) {
-            elements[data_id] = {};
-        }
-        if (!elements[data_id][section]) {
-            elements[data_id][section] = {
-                on: document.getElementById(data_id + '-' + section + '-open'),
-                off: document.getElementById(data_id + '-' + section + '-close'),
-                section_id: data_id + '-' + section
-            };
-        }
+    var tabTarget = new TabView(),
+        toggler = new Toggler();
 
-        var data = elements[data_id][section];
-        Sfjs.toggle(data.section_id, data.on, data.off);
-    }
+    tabTarget.initTabs(document.querySelectorAll('.tree .tree-inner'));
+    toggler.initButtons(document.querySelectorAll('a.toggle-button'));
     </script>
 {% endblock %}
 
-{% macro form_tree_entry(name, data) %}
+{% macro form_tree_entry(name, data, expanded) %}
     <li>
-        <div class="tree-inner" data-target-id="{{ data.id }}">
+        <div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
             {% if data.children is not empty %}
-                <img class="toggle-button" style="display: inline;" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img class="toggle-button" style="display: none;" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
+                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
             {% else %}
-                <img class="toggle-button" src="{{ asset('bundles/framework/images/blue_picto_full.gif') }}">
+                <img class="toggle-button" src="{{ asset('bundles/framework/images/toggler_empty.png') }}">
             {% endif %}
             {{ name }}
             {% if data.errors is defined and data.errors|length > 0 %}
@@ -275,9 +317,9 @@
         </div>
 
         {% if data.children is not empty %}
-            <ul>
+            <ul id="{{ data.id }}-children"{% if not expanded %} class="hidden"{% endif %}>
                 {% for childName, childData in data.children %}
-                    {{ _self.form_tree_entry(childName, childData) }}
+                    {{ _self.form_tree_entry(childName, childData, false) }}
                 {% endfor %}
             </ul>
         {% endif %}
@@ -285,7 +327,7 @@
 {% endmacro %}
 
 {% macro form_tree_details(name, data) %}
-    <div class="tree-details" id="details_{{ data.id }}">
+    <div class="tree-details" id="{{ data.id }}-details">
         <h2>
             {{ name }}
             {% if data.type_class is defined %}
@@ -312,11 +354,8 @@
 
         {% if data.default_data is defined %}
         <h3>
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#"></a>
             Default Data
-            <a class="btn-toggle" onclick="toggle('{{ data.id }}', 'default_data')">
-                <img style="display: none" id="{{ data.id }}-default_data-open" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img style="display: inline" id="{{ data.id }}-default_data-close" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
-            </a>
         </h3>
 
         <div id="{{ data.id }}-default_data">
@@ -351,11 +390,8 @@
 
         {% if data.submitted_data is defined %}
         <h3>
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#"></a>
             Submitted Data
-            <a class="btn-toggle" onclick="toggle('{{ data.id }}', 'submitted_data')">
-                <img style="display: none" id="{{ data.id }}-submitted_data-open" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img style="display: inline" id="{{ data.id }}-submitted_data-close" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
-            </a>
         </h3>
 
         <div id="{{ data.id }}-submitted_data">
@@ -394,11 +430,8 @@
 
         {% if data.passed_options is defined %}
         <h3>
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#"></a>
             Passed Options
-            <a class="btn-toggle" onclick="toggle('{{ data.id }}', 'passed_options')">
-                <img style="display: none" id="{{ data.id }}-passed_options-open" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img style="display: inline" id="{{ data.id }}-passed_options-close" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
-            </a>
         </h3>
 
         <div id="{{ data.id }}-passed_options">
@@ -431,14 +464,11 @@
 
         {% if data.resolved_options is defined %}
         <h3>
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#"></a>
             Resolved Options
-            <a class="btn-toggle" onclick="toggle('{{ data.id }}', 'resolved_options')">
-                <img style="display: inline" id="{{ data.id }}-resolved_options-open" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img style="display: none" id="{{ data.id }}-resolved_options-close" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
-            </a>
         </h3>
 
-        <div id="{{ data.id }}-resolved_options" style="display: none">
+        <div id="{{ data.id }}-resolved_options" class="hidden">
             <table>
                 <tr>
                     <th width="180">Option</th>
@@ -456,14 +486,11 @@
 
         {% if data.view_vars is defined %}
         <h3>
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#"></a>
             View Variables
-            <a class="btn-toggle" onclick="toggle('{{ data.id }}', 'view_vars')">
-                <img style="display: inline" id="{{ data.id }}-view_vars-open" src="{{ asset('bundles/framework/images/blue_picto_more.gif') }}">
-                <img style="display: none" id="{{ data.id }}-view_vars-close" src="{{ asset('bundles/framework/images/blue_picto_less.gif') }}">
-            </a>
         </h3>
 
-        <div id="{{ data.id }}-view_vars" style="display: none">
+        <div id="{{ data.id }}-view_vars" class="hidden">
             <table>
                 <tr>
                     <th width="180">Variable</th>
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 6781a87fb2370..76a77ffce6452 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
@@ -22,15 +22,19 @@
             },
 
             hasClass = function(el, klass) {
-                return el.className.match(new RegExp('\\b' + klass + '\\b'));
+                return el.className && el.className.match(new RegExp('\\b' + klass + '\\b'));
             },
 
             removeClass = function(el, klass) {
-                el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');
+                if (el.className) {
+                    el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');
+                }
             },
 
             addClass = function(el, klass) {
-                if (!hasClass(el, klass)) { el.className += " " + klass; }
+                if (!hasClass(el, klass)) {
+                    el.className += " " + klass;
+                }
             },
 
             getPreference = function(name) {

From ebf13ed1bb40152dcedfc2de5f296c7e398e2fd5 Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 15:31:09 +0100
Subject: [PATCH 3/7] [WebProfilerBundle] Inverted toggler images and improved
 button coloring

---
 .../Resources/public/images/toggler.png       | Bin 295 -> 244 bytes
 .../Resources/public/images/toggler_empty.png | Bin 238 -> 199 bytes
 .../Resources/public/images/toggler_hover.png | Bin 0 -> 271 bytes
 .../public/images/toggler_hover_empty.png     | Bin 0 -> 226 bytes
 .../Resources/views/Collector/form.html.twig  |  65 ++++++++++++------
 5 files changed, 44 insertions(+), 21 deletions(-)
 create mode 100644 src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover.png
 create mode 100644 src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover_empty.png

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler.png
index b436c7bd734ca1d5619d6d40cfed4d4958c7d5a1..afcbb115d19191b697be3083ca632f95c904d742 100644
GIT binary patch
delta 167
zcmV;Y09gO00`vipReuaI;I|6E0001iNkl<ZNXOlj%MHLF3`0$ZU^u4eD9pk{*~Gm-
zt4bB9g#LIJE;uA4F}R~77m^+o@*OQA<TK$SBvT2X=!B#SfQWt~S~WK^@OT|}k`}81
z=MEad|FO1F00hJP!92=CmdUivGNKDJ`@!aWy+havFk~A)?jQ$`{DIu+2QD+YAFS+v
V{Y)BRsN4Vm002ovPDHLkV1gluN2CA%

delta 218
zcmV<0044wQ0jC0xReuC1Oa&+i0002ANkl<ZNXOlj!41P83`HMSX2`W!$Q~e5WE7^z
z0I*PV%@n=3QX8qEg{W2YPGITd56C~@q?9he1dKq>Ya$TMYyk)^Rv_^iW@b5f=PPv#
z;<js<#P3|oD1`?r(F=`q+k&d@3Uba*`{NyKJCta4Ai&z7UsDB`8xEMohohD#K2=sB
zHZxnqR~Z=GP3cV{Fu11u7tWpss#+SZf60T#+IREd-gz%0exC=O=fU(&fSxoDZUb9L
UjEWVwxc~qF07*qoM6N<$f?alAGXMYp

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_empty.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_empty.png
index 3059b9cdb31d9e8ec4962b8896490115f9eed70b..b5b27c79fc355d58b82d9899c2fbd2f653cf470d 100644
GIT binary patch
delta 121
zcmV-<0EYkW0mlK5RdNy^=pZ=I0000~Nkl<ZILqymu?+wr3<Irie;)em#7<fBz5&sJ
z9#e8nn%Gg4SPT*f;MIiIlU<}%t9}C1ZjjmpNC9COgjPE*47RnGqqt{$Bo$+RIr7SO
bn5;N|)0BX-x=EBL00000NkvXXu0mjf-T*Q>

delta 161
zcmV;S0AByc0qy~iReuC4)eL#E0001cNkl<ZILqymu@S>C3<F;r!fmurFo37<D4N0p
z$P2}-r$`aBKAovHU$Fs5;tmDVdw&5NumTJBG@wa30gA<Mpz{n#I*K=c$Wg;*XW7C(
zXIWzq*oY;V<ZtjZxF+;h0Q-c&9xg|g7H*XiVo5r~(*aapGaAaI0o5A5Dxe+-PUBGo
P00000NkvXXu0mjf?L|P<

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..dad1b3fce39ac6ff6e1ab7db7a0641fca7ecbeb8
GIT binary patch
literal 271
zcmeAS@N?(olHy`uVBq!ia0vp^0zj<5!3HFyJAa%3Qfx`y?k)^zAjrPUD;FrjS>O>_
z%)r1c48n{Iv*t(u1=&kHeO=k_^2qTCO2lUV+W-`r<LTlU;&J@$l#RTH0(e~J-!(ca
zuVkB@(x@{b*T_La&H0YVO5cOa88}()Gdjj)zRWp&ZLTMm-kb)`2ro@-{s|>4Yzy{_
zIbAw2+e1o~byAwtM3d^+-BV9Cs$NuBe3xUlzKe^E=#0A=bN;(uQe0fR!28VmJyMIO
z9&Frq)yE+}()zbp{EcEcm!+2caTyc-AL@U8Fg)*p{8{GJZ*2I_DTlYe($Jme3Unuf
Mr>mdKI;Vst0K5HMiU0rr

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover_empty.png b/src/Symfony/Bundle/FrameworkBundle/Resources/public/images/toggler_hover_empty.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5c873c1b8413a4c5c7f7c5acefc9675b3174170
GIT binary patch
literal 226
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`Y)RhkE(~cP$iB-f7bwD6;1OBO
zz`!jG!i)^F=12eq*-JcqUD@yQ$ni<(6{>G~1Qg2mba4!^IQ{nWM!{wW9+!*#LE(k2
z6D}V!bzm-WW(?qQ{iD^<&md#<;pD>j6*H$!d9%PQ&w2xsyXMm;%%x0e3-+=5#{QVJ
zYXxuV;>o*?elA;Y+Mv8qVe;SKvR|j3WHV5E*Z)yu@pT!8x4Oas?KyMxqt95nZr<Mh
Q7icwur>mdKI;Vst08}bWl>h($

literal 0
HcmV?d00001

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index ebd051208c0a5..f385112dfbcb3 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -31,11 +31,14 @@
     }
     .toggle-button {
         display: inline-block;
-        background: url("/bundles/framework/images/toggler.png") no-repeat top left;
+        background: url("/bundles/framework/images/toggler.png") no-repeat top left #ccc;
     }
     .toggle-button.closed {
         background-position: bottom left;
     }
+    .toggle-button.empty {
+        background-image: url("/bundles/framework/images/toggler_empty.png");
+    }
     .tree {
         width: 230px;
         padding: 10px;
@@ -75,12 +78,10 @@
         top: 50%;
         margin-top: -5px;
         margin-left: -15px;
-    }
-    .tree a.toggle-button {
         background-size: 10px 20px;
     }
-    .tree img.toggle-button {
-        background: none;
+    .tree .toggle-button.empty {
+        background-size: 10px 10px;
     }
     .tree ul ul .tree-inner {
         padding-left: 37px;
@@ -102,6 +103,13 @@
         font-weight: bold;
         color: #313131;
     }
+    .tree .tree-inner.active .toggle-button, .tree .tree-inner:hover .toggle-button, .tree .tree-inner.active:hover .toggle-button {
+        background-image: url("/bundles/framework/images/toggler_hover.png");
+        background-color: #aaa;
+    }
+    .tree .tree-inner.active .toggle-button.empty, .tree .tree-inner:hover .toggle-button.empty, .tree .tree-inner.active:hover .toggle-button.empty {
+        background-image: url("/bundles/framework/images/toggler_hover_empty.png");
+    }
     .tree-details {
         border-left: 1px solid #dfdfdf;
         background: white;
@@ -133,13 +141,23 @@
         color: #fff;
         padding: 1px 4px;
         font-size: 10px;
+        font-weight: bold;
         vertical-align: middle;
         border-radius: 6px;
     }
-    .table-error th {
+    .errors h3 {
+        color: #800;
+    }
+    .errors th, .errors td {
+        border: 1px solid #800;
+    }
+    .errors th {
         background: #a33;
         color: #fff;
     }
+    .errors .toggle-button {
+        background-color: #a33;
+    }
     </style>
 
     {% if collector.data.forms|length %}
@@ -308,7 +326,7 @@
             {% if data.children is not empty %}
                 <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
             {% else %}
-                <img class="toggle-button" src="{{ asset('bundles/framework/images/toggler_empty.png') }}">
+                <div class="toggle-button empty"></div>
             {% endif %}
             {{ name }}
             {% if data.errors is defined and data.errors|length > 0 %}
@@ -336,20 +354,25 @@
         </h2>
 
         {% if data.errors is defined and data.errors|length > 0 %}
-        <h3>Errors</h3>
-
-        <table class="table-error">
-            <tr>
-                <th width="50%">Message</th>
-                <th>Cause</th>
-            </tr>
-            {% for error in data.errors %}
-            <tr>
-                <td>{{ error.message }}</td>
-                <td><em>Unknown.</em></td>
-            </tr>
-            {% endfor %}
-        </table>
+        <div class="errors">
+            <h3>
+                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"></a>
+                Errors
+            </h3>
+
+            <table id="{{ data.id }}-errors">
+                <tr>
+                    <th width="50%">Message</th>
+                    <th>Cause</th>
+                </tr>
+                {% for error in data.errors %}
+                <tr>
+                    <td>{{ error.message }}</td>
+                    <td><em>Unknown.</em></td>
+                </tr>
+                {% endfor %}
+            </table>
+        </div>
         {% endif %}
 
         {% if data.default_data is defined %}

From 505c5be309370f44abd802c5e581bfb85fb799b0 Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 16:42:36 +0100
Subject: [PATCH 4/7] [WebProfilerBundle] Added "use strict" statements

---
 .../Resources/views/Collector/form.html.twig                  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index f385112dfbcb3..29f4b794f0f25 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -182,6 +182,8 @@
 
     <script>
     function Toggler() {
+        "use strict";
+
         var expand = function (button) {
                 var targetId = button.dataset.toggleTargetId,
                     target = document.getElementById(targetId);
@@ -252,6 +254,8 @@
     }
 
     function TabView() {
+        "use strict";
+        
         var activeTab = null,
 
             activeTarget = null,

From a0030b82cd0ded96e233aefa915d3bd9227120e3 Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 17:29:24 +0100
Subject: [PATCH 5/7] [WebProfilerBundle] Changed toggle color back to blue and
 made headlines in the form debugger clickable

---
 .../Resources/views/Collector/form.html.twig  | 75 ++++++++++++-------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index 29f4b794f0f25..4b23db6ae2a97 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -29,15 +29,15 @@
         /*background: #F6F6F6;*/
         margin: -30px -40px -40px;
     }
-    .toggle-button {
+    .toggle-icon {
         display: inline-block;
-        background: url("/bundles/framework/images/toggler.png") no-repeat top left #ccc;
+        background: url("{{ asset('/bundles/framework/images/toggler.png') }}") no-repeat top left #5eb5e0;
     }
-    .toggle-button.closed {
+    .closed .toggle-icon, .closed.toggle-icon {
         background-position: bottom left;
     }
-    .toggle-button.empty {
-        background-image: url("/bundles/framework/images/toggler_empty.png");
+    .toggle-icon.empty {
+        background-image: url("{{ asset('/bundles/framework/images/toggler_empty.png') }}");
     }
     .tree {
         width: 230px;
@@ -70,7 +70,7 @@
     .tree a {
         text-decoration: none;
     }
-    .tree .toggle-button {
+    .tree .toggle-icon {
         width: 10px;
         height: 10px;
         /* vertically center the button */
@@ -79,8 +79,9 @@
         margin-top: -5px;
         margin-left: -15px;
         background-size: 10px 20px;
+        background-color: #ccc;
     }
-    .tree .toggle-button.empty {
+    .tree .toggle-icon.empty {
         background-size: 10px 10px;
     }
     .tree ul ul .tree-inner {
@@ -103,12 +104,12 @@
         font-weight: bold;
         color: #313131;
     }
-    .tree .tree-inner.active .toggle-button, .tree .tree-inner:hover .toggle-button, .tree .tree-inner.active:hover .toggle-button {
-        background-image: url("/bundles/framework/images/toggler_hover.png");
+    .tree .tree-inner.active .toggle-icon, .tree .tree-inner:hover .toggle-icon, .tree .tree-inner.active:hover .toggle-icon {
+        background-image: url("{{ asset('/bundles/framework/images/toggler_hover.png') }}");
         background-color: #aaa;
     }
-    .tree .tree-inner.active .toggle-button.empty, .tree .tree-inner:hover .toggle-button.empty, .tree .tree-inner.active:hover .toggle-button.empty {
-        background-image: url("/bundles/framework/images/toggler_hover_empty.png");
+    .tree .tree-inner.active .toggle-icon.empty, .tree .tree-inner:hover .toggle-icon.empty, .tree .tree-inner.active:hover .toggle-icon.empty {
+        background-image: url("{{ asset('/bundles/framework/images/toggler_hover_empty.png') }}");
     }
     .tree-details {
         border-left: 1px solid #dfdfdf;
@@ -120,7 +121,7 @@
         position: relative;
         padding-left: 22px;
     }
-    .tree-details .toggle-button {
+    .tree-details .toggle-icon {
         width: 16px;
         height: 16px;
         /* vertically center the button */
@@ -149,15 +150,19 @@
         color: #800;
     }
     .errors th, .errors td {
-        border: 1px solid #800;
+        border-color: #800;
     }
     .errors th {
         background: #a33;
         color: #fff;
     }
-    .errors .toggle-button {
+    .errors .toggle-icon {
         background-color: #a33;
     }
+    h3 a, h3 a:hover, h3 a:focus {
+        color: inherit;
+        text-decoration: inherit;
+    }
     </style>
 
     {% if collector.data.forms|length %}
@@ -255,7 +260,7 @@
 
     function TabView() {
         "use strict";
-        
+
         var activeTab = null,
 
             activeTarget = null,
@@ -328,9 +333,9 @@
     <li>
         <div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
             {% if data.children is not empty %}
-                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
+                <a class="toggle-button toggle-icon" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
             {% else %}
-                <div class="toggle-button empty"></div>
+                <div class="toggle-icon empty"></div>
             {% endif %}
             {{ name }}
             {% if data.errors is defined and data.errors|length > 0 %}
@@ -360,8 +365,10 @@
         {% if data.errors is defined and data.errors|length > 0 %}
         <div class="errors">
             <h3>
-                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#"></a>
-                Errors
+                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#">
+                    <span class="toggle-icon"></span>
+                    Errors
+                </a>
             </h3>
 
             <table id="{{ data.id }}-errors">
@@ -381,8 +388,10 @@
 
         {% if data.default_data is defined %}
         <h3>
-            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#"></a>
-            Default Data
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#">
+                <span class="toggle-icon"></span>
+                Default Data
+            </a>
         </h3>
 
         <div id="{{ data.id }}-default_data">
@@ -417,8 +426,10 @@
 
         {% if data.submitted_data is defined %}
         <h3>
-            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#"></a>
-            Submitted Data
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#">
+                <span class="toggle-icon"></span>
+                Submitted Data
+            </a>
         </h3>
 
         <div id="{{ data.id }}-submitted_data">
@@ -457,8 +468,10 @@
 
         {% if data.passed_options is defined %}
         <h3>
-            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#"></a>
-            Passed Options
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#">
+                <span class="toggle-icon"></span>
+                Passed Options
+            </a>
         </h3>
 
         <div id="{{ data.id }}-passed_options">
@@ -491,8 +504,10 @@
 
         {% if data.resolved_options is defined %}
         <h3>
-            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#"></a>
-            Resolved Options
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#">
+                <span class="toggle-icon"></span>
+                Resolved Options
+            </a>
         </h3>
 
         <div id="{{ data.id }}-resolved_options" class="hidden">
@@ -513,8 +528,10 @@
 
         {% if data.view_vars is defined %}
         <h3>
-            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#"></a>
-            View Variables
+            <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#">
+                <span class="toggle-icon"></span>
+                View Variables
+            </a>
         </h3>
 
         <div id="{{ data.id }}-view_vars" class="hidden">

From 58559d3e05155781f632c81cc1f07ebbd44cbca4 Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 17:39:10 +0100
Subject: [PATCH 6/7] [WebProfilerBundle] Moved toggle icon behind the
 headlines in the form debugger

---
 .../Resources/views/Collector/form.html.twig      | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index 4b23db6ae2a97..8317f47f32c9c 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -119,7 +119,6 @@
     }
     .tree-details h3 {
         position: relative;
-        padding-left: 22px;
     }
     .tree-details .toggle-icon {
         width: 16px;
@@ -128,7 +127,7 @@
         position: absolute;
         top: 50%;
         margin-top: -9px;
-        margin-left: -22px;
+        margin-left: 6px;
     }
     .form-type {
         color: #999999;
@@ -366,8 +365,8 @@
         <div class="errors">
             <h3>
                 <a class="toggle-button" data-toggle-target-id="{{ data.id }}-errors" href="#">
-                    <span class="toggle-icon"></span>
                     Errors
+                    <span class="toggle-icon"></span>
                 </a>
             </h3>
 
@@ -389,8 +388,8 @@
         {% if data.default_data is defined %}
         <h3>
             <a class="toggle-button" data-toggle-target-id="{{ data.id }}-default_data" href="#">
-                <span class="toggle-icon"></span>
                 Default Data
+                <span class="toggle-icon"></span>
             </a>
         </h3>
 
@@ -427,8 +426,8 @@
         {% if data.submitted_data is defined %}
         <h3>
             <a class="toggle-button" data-toggle-target-id="{{ data.id }}-submitted_data" href="#">
-                <span class="toggle-icon"></span>
                 Submitted Data
+                <span class="toggle-icon"></span>
             </a>
         </h3>
 
@@ -469,8 +468,8 @@
         {% if data.passed_options is defined %}
         <h3>
             <a class="toggle-button" data-toggle-target-id="{{ data.id }}-passed_options" href="#">
-                <span class="toggle-icon"></span>
                 Passed Options
+                <span class="toggle-icon"></span>
             </a>
         </h3>
 
@@ -505,8 +504,8 @@
         {% if data.resolved_options is defined %}
         <h3>
             <a class="toggle-button" data-toggle-target-id="{{ data.id }}-resolved_options" href="#">
-                <span class="toggle-icon"></span>
                 Resolved Options
+                <span class="toggle-icon"></span>
             </a>
         </h3>
 
@@ -529,8 +528,8 @@
         {% if data.view_vars is defined %}
         <h3>
             <a class="toggle-button" data-toggle-target-id="{{ data.id }}-view_vars" href="#">
-                <span class="toggle-icon"></span>
                 View Variables
+                <span class="toggle-icon"></span>
             </a>
         </h3>
 

From 5afbaeb0a45d17fe3e0969cd99beb11b03da478d Mon Sep 17 00:00:00 2001
From: Bernhard Schussek <bschussek@gmail.com>
Date: Mon, 30 Dec 2013 17:46:32 +0100
Subject: [PATCH 7/7] [WebProfilerBundle] Enlarged the clickable area of the
 toggle button in the form tree

---
 .../Resources/views/Collector/form.html.twig  | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
index 8317f47f32c9c..789086ad214a8 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/form.html.twig
@@ -70,18 +70,32 @@
     .tree a {
         text-decoration: none;
     }
-    .tree .toggle-icon {
-        width: 10px;
-        height: 10px;
+    .tree .toggle-button {
+        /* provide a bigger clickable area than just 10x10px */
+        width: 16px;
+        height: 16px;
         /* vertically center the button */
         position: absolute;
         top: 50%;
-        margin-top: -5px;
-        margin-left: -15px;
+        margin-top: -8px;
+        margin-left: -18px;
+    }
+    .tree .toggle-icon {
+        width: 10px;
+        height: 10px;
+        /* position the icon in the center of the clickable area */
+        margin-left: 3px;
+        margin-top: 3px;
         background-size: 10px 20px;
         background-color: #ccc;
     }
     .tree .toggle-icon.empty {
+        width: 10px;
+        height: 10px;
+        position: absolute;
+        top: 50%;
+        margin-top: -5px;
+        margin-left: -15px;
         background-size: 10px 10px;
     }
     .tree ul ul .tree-inner {
@@ -332,7 +346,7 @@
     <li>
         <div class="tree-inner" data-tab-target-id="{{ data.id }}-details">
             {% if data.children is not empty %}
-                <a class="toggle-button toggle-icon" data-toggle-target-id="{{ data.id }}-children" href="#"></a>
+                <a class="toggle-button" data-toggle-target-id="{{ data.id }}-children" href="#"><span class="toggle-icon"></span></a>
             {% else %}
                 <div class="toggle-icon empty"></div>
             {% endif %}