From 17130eb19fd21389b52bedab63a402f8809a49f3 Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@elao.com>
Date: Fri, 30 Dec 2016 15:44:26 +0100
Subject: [PATCH 01/10] [Profiler][VarDumper] Add a search feature to the
 HtmlDumper

---
 .../views/Profiler/profiler.css.twig          |   9 +
 .../Component/VarDumper/Dumper/HtmlDumper.php | 278 +----------
 .../VarDumper/Resources/assets/SfDump.css     | 100 ++++
 .../VarDumper/Resources/assets/SfDump.js      | 434 ++++++++++++++++++
 4 files changed, 550 insertions(+), 271 deletions(-)
 create mode 100644 src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
 create mode 100644 src/Symfony/Component/VarDumper/Resources/assets/SfDump.js

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
index e3a0168553224..5065a582121bf 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -934,6 +934,15 @@ table.logs .metadata {
     background: rgba(255, 255, 153, 0.5);
 }
 
+#collector-content .sf-dump-search-wrapper {
+    padding: 10px;
+    background: rgba(210, 210, 210, 0.5);
+    border: 1px solid #dcdcdc;
+    border-top: none;
+    border-right: none;
+}
+#collector-content .sf-dump-search-wrapper > .sf-dump-search-count { color: #000; }
+
 {# Search Results page
    ========================================================================= #}
 #search-results td {
diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 198ec106be998..d1ea6548d0bf2 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -23,8 +23,11 @@ class HtmlDumper extends CliDumper
 {
     public static $defaultOutput = 'php://output';
 
+    private static $css;
+    private static $javascript;
+
     protected $dumpHeader;
-    protected $dumpPrefix = '<pre class=sf-dump id=%s data-indent-pad="%s">';
+    protected $dumpPrefix = '<pre class=sf-dump id=%s data-indent-pad="%s" tabindex="0">';
     protected $dumpSuffix = '</pre><script>Sfdump(%s)</script>';
     protected $dumpId = 'sf-dump';
     protected $colors = true;
@@ -128,277 +131,10 @@ protected function getDumpHeader()
             return $this->dumpHeader;
         }
 
-        $line = str_replace('{$options}', json_encode($this->displayOptions, JSON_FORCE_OBJECT), <<<'EOHTML'
-<script>
-Sfdump = window.Sfdump || (function (doc) {
-
-var refStyle = doc.createElement('style'),
-    rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
-    idRx = /\bsf-dump-\d+-ref[012]\w+\b/,
-    keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
-    addEventListener = function (e, n, cb) {
-        e.addEventListener(n, cb, false);
-    };
-
-(doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle);
-
-if (!doc.addEventListener) {
-    addEventListener = function (element, eventName, callback) {
-        element.attachEvent('on' + eventName, function (e) {
-            e.preventDefault = function () {e.returnValue = false;};
-            e.target = e.srcElement;
-            callback(e);
-        });
-    };
-}
-
-function toggle(a, recursive) {
-    var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass;
-
-    if ('sf-dump-compact' == oldClass) {
-        arrow = '▼';
-        newClass = 'sf-dump-expanded';
-    } else if ('sf-dump-expanded' == oldClass) {
-        arrow = '▶';
-        newClass = 'sf-dump-compact';
-    } else {
-        return false;
-    }
-
-    a.lastChild.innerHTML = arrow;
-    s.className = newClass;
-
-    if (recursive) {
-        try {
-            a = s.querySelectorAll('.'+oldClass);
-            for (s = 0; s < a.length; ++s) {
-                if (a[s].className !== newClass) {
-                    a[s].className = newClass;
-                    a[s].previousSibling.lastChild.innerHTML = arrow;
-                }
-            }
-        } catch (e) {
-        }
-    }
-
-    return true;
-};
-
-return function (root, x) {
-    root = doc.getElementById(root);
+        $sfDumpJs = self::$javascript ?: file_get_contents(__DIR__.'/../Resources/assets/SfDump.js');
+        $sfDumpCss = self::$css ?: file_get_contents(__DIR__.'/../Resources/assets/SfDump.css');
 
-    var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || '  ').replace(rxEsc, '\\$1')+')+', 'm'),
-        options = {$options},
-        elt = root.getElementsByTagName('A'),
-        len = elt.length,
-        i = 0, s, h,
-        t = [];
-
-    while (i < len) t.push(elt[i++]);
-
-    for (i in x) {
-        options[i] = x[i];
-    }
-
-    function a(e, f) {
-        addEventListener(root, e, function (e) {
-            if ('A' == e.target.tagName) {
-                f(e.target, e);
-            } else if ('A' == e.target.parentNode.tagName) {
-                f(e.target.parentNode, e);
-            } else if (e.target.nextElementSibling && 'A' == e.target.nextElementSibling.tagName) {
-                f(e.target.nextElementSibling, e, true);
-            }
-        });
-    };
-    function isCtrlKey(e) {
-        return e.ctrlKey || e.metaKey;
-    }
-    addEventListener(root, 'mouseover', function (e) {
-        if ('' != refStyle.innerHTML) {
-            refStyle.innerHTML = '';
-        }
-    });
-    a('mouseover', function (a, e, c) {
-        if (c) {
-            e.target.style.cursor = "pointer";
-        } else if (a = idRx.exec(a.className)) {
-            try {
-                refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}';
-            } catch (e) {
-            }
-        }
-    });
-    a('click', function (a, e, c) {
-        if (/\bsf-dump-toggle\b/.test(a.className)) {
-            e.preventDefault();
-            if (!toggle(a, isCtrlKey(e))) {
-                var r = doc.getElementById(a.getAttribute('href').substr(1)),
-                    s = r.previousSibling,
-                    f = r.parentNode,
-                    t = a.parentNode;
-                t.replaceChild(r, a);
-                f.replaceChild(a, s);
-                t.insertBefore(s, r);
-                f = f.firstChild.nodeValue.match(indentRx);
-                t = t.firstChild.nodeValue.match(indentRx);
-                if (f && t && f[0] !== t[0]) {
-                    r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]);
-                }
-                if ('sf-dump-compact' == r.className) {
-                    toggle(s, isCtrlKey(e));
-                }
-            }
-
-            if (c) {
-            } else if (doc.getSelection) {
-                try {
-                    doc.getSelection().removeAllRanges();
-                } catch (e) {
-                    doc.getSelection().empty();
-                }
-            } else {
-                doc.selection.empty();
-            }
-        } else if (/\bsf-dump-str-toggle\b/.test(a.className)) {
-            e.preventDefault();
-            e = a.parentNode.parentNode;
-            e.className = e.className.replace(/sf-dump-str-(expand|collapse)/, a.parentNode.className);
-        }
-    });
-
-    elt = root.getElementsByTagName('SAMP');
-    len = elt.length;
-    i = 0;
-
-    while (i < len) t.push(elt[i++]);
-    len = t.length;
-
-    for (i = 0; i < len; ++i) {
-        elt = t[i];
-        if ('SAMP' == elt.tagName) {
-            elt.className = 'sf-dump-expanded';
-            a = elt.previousSibling || {};
-            if ('A' != a.tagName) {
-                a = doc.createElement('A');
-                a.className = 'sf-dump-ref';
-                elt.parentNode.insertBefore(a, elt);
-            } else {
-                a.innerHTML += ' ';
-            }
-            a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all children';
-            a.innerHTML += '<span>▼</span>';
-            a.className += ' sf-dump-toggle';
-            x = 1;
-            if ('sf-dump' != elt.parentNode.className) {
-                x += elt.parentNode.getAttribute('data-depth')/1;
-            }
-            elt.setAttribute('data-depth', x);
-            if (x > options.maxDepth) {
-                toggle(a);
-            }
-        } else if ('sf-dump-ref' == elt.className && (a = elt.getAttribute('href'))) {
-            a = a.substr(1);
-            elt.className += ' '+a;
-
-            if (/[\[{]$/.test(elt.previousSibling.nodeValue)) {
-                a = a != elt.nextSibling.id && doc.getElementById(a);
-                try {
-                    s = a.nextSibling;
-                    elt.appendChild(a);
-                    s.parentNode.insertBefore(a, s);
-                    if (/^[@#]/.test(elt.innerHTML)) {
-                        elt.innerHTML += ' <span>▶</span>';
-                    } else {
-                        elt.innerHTML = '<span>▶</span>';
-                        elt.className = 'sf-dump-ref';
-                    }
-                    elt.className += ' sf-dump-toggle';
-                } catch (e) {
-                    if ('&' == elt.innerHTML.charAt(0)) {
-                        elt.innerHTML = '…';
-                        elt.className = 'sf-dump-ref';
-                    }
-                }
-            }
-        }
-    }
-
-    if (0 >= options.maxStringLength) {
-        return;
-    }
-    try {
-        elt = root.querySelectorAll('.sf-dump-str');
-        len = elt.length;
-        i = 0;
-        t = [];
-
-        while (i < len) t.push(elt[i++]);
-        len = t.length;
-
-        for (i = 0; i < len; ++i) {
-            elt = t[i];
-            s = elt.innerText || elt.textContent;
-            x = s.length - options.maxStringLength;
-            if (0 < x) {
-                h = elt.innerHTML;
-                elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength);
-                elt.className += ' sf-dump-str-collapse';
-                elt.innerHTML = '<span class=sf-dump-str-collapse>'+h+'<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> ◀</a></span>'+
-                    '<span class=sf-dump-str-expand>'+elt.innerHTML+'<a class="sf-dump-ref sf-dump-str-toggle" title="'+x+' remaining characters"> ▶</a></span>';
-            }
-        }
-    } catch (e) {
-    }
-};
-
-})(document);
-</script><style>
-pre.sf-dump {
-    display: block;
-    white-space: pre;
-    padding: 5px;
-}
-pre.sf-dump span {
-    display: inline;
-}
-pre.sf-dump .sf-dump-compact {
-    display: none;
-}
-pre.sf-dump abbr {
-    text-decoration: none;
-    border: none;
-    cursor: help;
-}
-pre.sf-dump a {
-    text-decoration: none;
-    cursor: pointer;
-    border: 0;
-    outline: none;
-    color: inherit;
-}
-pre.sf-dump .sf-dump-ellipsis {
-    display: inline-block;
-    overflow: visible;
-    text-overflow: ellipsis;
-    max-width: 5em;
-    white-space: nowrap;
-    overflow: hidden;
-    vertical-align: top;
-}
-pre.sf-dump code {
-    display:inline;
-    padding:0;
-    background:none;
-}
-.sf-dump-str-collapse .sf-dump-str-collapse {
-    display: none;
-}
-.sf-dump-str-expand .sf-dump-str-expand {
-    display: none;
-}
-EOHTML
-        );
+        $line = str_replace('"{$options}"', json_encode($this->displayOptions, JSON_FORCE_OBJECT), "<script>$sfDumpJs</script><style>$sfDumpCss");
 
         foreach ($this->styles as $class => $style) {
             $line .= 'pre.sf-dump'.('default' === $class ? ', pre.sf-dump' : '').' .sf-dump-'.$class.'{'.$style.'}';
diff --git a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
new file mode 100644
index 0000000000000..f8306eb7b92c6
--- /dev/null
+++ b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
@@ -0,0 +1,100 @@
+pre.sf-dump {
+    display: block;
+    white-space: pre;
+    padding: 5px;
+}
+pre.sf-dump span {
+    display: inline;
+}
+pre.sf-dump .sf-dump-compact {
+    display: none;
+}
+pre.sf-dump abbr {
+    text-decoration: none;
+    border: none;
+    cursor: help;
+}
+pre.sf-dump a {
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    outline: none;
+    color: inherit;
+}
+pre.sf-dump .sf-dump-ellipsis {
+    display: inline-block;
+    text-overflow: ellipsis;
+    max-width: 5em;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: top;
+}
+pre.sf-dump code {
+    display:inline;
+    padding:0;
+    background:none;
+}
+.sf-dump-str-collapse .sf-dump-str-collapse {
+    display: none;
+}
+.sf-dump-str-expand .sf-dump-str-expand {
+    display: none;
+}
+.sf-dump-public.sf-dump-highlight,
+.sf-dump-protected.sf-dump-highlight,
+.sf-dump-private.sf-dump-highlight,
+.sf-dump-str.sf-dump-highlight,
+.sf-dump-key.sf-dump-highlight {
+    background: rgba(111, 172, 204, 0.3);
+    border: 1px solid #7da0b1;
+    border-radius: 3px;
+}
+.sf-dump-public.sf-dump-highlight-active,
+.sf-dump-protected.sf-dump-highlight-active,
+.sf-dump-private.sf-dump-highlight-active,
+.sf-dump-str.sf-dump-highlight-active,
+.sf-dump-key.sf-dump-highlight-active {
+    background: rgba(253, 175, 0, 0.4);
+    border: 1px solid #FFA500;
+    border-radius: 3px;
+}
+.sf-dump-search-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 180px;
+    font-size: 0;
+    padding: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 0 0 0 3px;
+}
+.sf-dump-search-wrapper > input.sf-dump-search-input {
+    min-width: 150px;
+    color: #333;
+    padding: 3px;
+    height: 21px;
+    border: 1px solid #bbb;
+    box-sizing: border-box;
+    font-size: 12px;
+}
+.sf-dump-search-wrapper > .sf-dump-search-input-next,
+.sf-dump-search-wrapper > .sf-dump-search-input-previous {
+    border-radius: 0;
+    background: white;
+    outline: none;
+    border: 1px solid #bbb;
+    border-left: none;
+    height: 21px;
+    font-size: 12px;
+    color: #333;
+    vertical-align: top;
+    box-sizing: border-box;
+}
+.sf-dump-search-wrapper > .sf-dump-search-count {
+    font-size: 12px;
+    color: #FFF;
+    font-weight: normal;
+    margin-top: 5px;
+    display: block;
+    text-align: right;
+}
diff --git a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js
new file mode 100644
index 0000000000000..cf21ea7c5b345
--- /dev/null
+++ b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js
@@ -0,0 +1,434 @@
+Sfdump = window.Sfdump || (function (doc) {
+    var refStyle = doc.createElement('style'),
+        rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
+        idRx = /\bsf-dump-\d+-ref[012]\w+\b/,
+        keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
+        addEventListener = function (e, n, cb) {
+            e.addEventListener(n, cb, false);
+        };
+
+    (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle);
+
+    if (!doc.addEventListener) {
+        addEventListener = function (element, eventName, callback) {
+            element.attachEvent('on' + eventName, function (e) {
+                e.preventDefault = function () {
+                    e.returnValue = false;
+                };
+                e.target = e.srcElement;
+                callback(e);
+            });
+        };
+    }
+
+    SearchState = function () {
+        this.nodes = [];
+        this.idx = 0;
+    };
+    SearchState.prototype = {
+        next: function () {
+            if (this.isEmpty()) {
+                return this.current();
+            }
+            this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx;
+
+            return this.current();
+        },
+        previous: function () {
+            if (this.isEmpty()) {
+                return this.current();
+            }
+            this.idx = this.idx > 0 ? this.idx - 1 : this.idx;
+
+            return this.current();
+        },
+        isEmpty: function () {
+            return 0 === this.count();
+        },
+        current: function () {
+            if (this.isEmpty()) {
+                return null;
+            }
+            return this.nodes[this.idx];
+        },
+        reset: function () {
+            this.nodes = [];
+            this.idx = 0;
+        },
+        count: function () {
+            return this.nodes.length;
+        },
+    };
+
+    function toggle(a, recursive) {
+        var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass;
+
+        if ('sf-dump-compact' == oldClass) {
+            arrow = '▼';
+            newClass = 'sf-dump-expanded';
+        } else if ('sf-dump-expanded' == oldClass) {
+            arrow = '▶';
+            newClass = 'sf-dump-compact';
+        } else {
+            return false;
+        }
+
+        a.lastChild.innerHTML = arrow;
+        s.className = newClass;
+
+        if (recursive) {
+            try {
+                a = s.querySelectorAll('.' + oldClass);
+                for (s = 0; s < a.length; ++s) {
+                    if (a[s].className !== newClass) {
+                        a[s].className = newClass;
+                        a[s].previousSibling.lastChild.innerHTML = arrow;
+                    }
+                }
+            } catch (e) {
+            }
+        }
+
+        return true;
+    };
+
+    function collapse(a, recursive) {
+        var s = a.nextSibling || {}, oldClass = s.className;
+
+        if ('sf-dump-expanded' == oldClass) {
+            toggle(a, recursive);
+
+            return true;
+        }
+
+        return false;
+    };
+
+    function expand(a, recursive) {
+        var s = a.nextSibling || {}, oldClass = s.className;
+
+        if ('sf-dump-compact' == oldClass) {
+            toggle(a, recursive);
+
+            return true;
+        }
+
+        return false;
+    };
+
+    function collapseAll(root)
+    {
+        var a = root.querySelector('a.sf-dump-toggle');
+        if (a) {
+            collapse(a, true);
+            expand(a);
+
+            return true;
+        }
+
+        return false;
+    }
+
+    function reveal(node) {
+        var current = node;
+        var parents = [];
+        var previous = null;
+        var parent = null;
+
+        while ((parent = current.parentNode || {}) && (previous = parent.previousSibling)) {
+            current = current.parentNode;
+            parents.push(previous);
+        }
+
+        if (0 !== parents.length) {
+            parents.forEach(function (parent) {
+                expand(parent);
+            });
+
+            return true;
+        }
+
+        return false;
+    }
+
+    function highlight(root, activeNode, nodes)
+    {
+        resetHighlightedNodes(root);
+
+        (nodes||[]).forEach(function (node) {
+            if (!/\bsf-dump-highlight\b/.test(node.className)) {
+                node.className = node.className + ' sf-dump-highlight';
+            }
+        });
+
+        if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) {
+            activeNode.className = activeNode.className + ' sf-dump-highlight-active';
+        }
+    }
+
+    function resetHighlightedNodes(root)
+    {
+        root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private').forEach(function (strNode) {
+            strNode.className = strNode.className.replace(/\b sf-dump-highlight\b/, '');
+            strNode.className = strNode.className.replace(/\b sf-dump-highlight-active\b/, '');
+        });
+    }
+
+    return function (root, x) {
+        root = doc.getElementById(root);
+
+        var indentRx = new RegExp('^(' + (root.getAttribute('data-indent-pad') || '  ').replace(rxEsc, '\\$1') + ')+', 'm'),
+            options = "{$options}",
+            elt = root.getElementsByTagName('A'),
+            len = elt.length,
+            i = 0, s, h,
+            t = [];
+
+        while (i < len) t.push(elt[i++]);
+
+        for (i in x) {
+            options[i] = x[i];
+        }
+
+        var delay = (function () {
+            var timer = 0;
+            return function (callback, ms) {
+                clearTimeout(timer);
+                timer = setTimeout(callback, ms);
+            };
+        })();
+
+        function a(e, f) {
+            addEventListener(root, e, function (e) {
+                if ('A' == e.target.tagName) {
+                    f(e.target, e);
+                } else if ('A' == e.target.parentNode.tagName) {
+                    f(e.target.parentNode, e);
+                } else if (e.target.nextElementSibling && 'A' == e.target.nextElementSibling.tagName) {
+                    f(e.target.nextElementSibling, e, true);
+                }
+            });
+        };
+        function isCtrlKey(e) {
+            return e.ctrlKey || e.metaKey;
+        }
+
+        addEventListener(root, 'mouseover', function (e) {
+            if ('' != refStyle.innerHTML) {
+                refStyle.innerHTML = '';
+            }
+        });
+        a('mouseover', function (a, e, c) {
+            if (c) {
+                e.target.style.cursor = "pointer";
+            } else if (a = idRx.exec(a.className)) {
+                try {
+                    refStyle.innerHTML = 'pre.sf-dump .' + a[0] + '{background-color: #B729D9; color: #FFF !important; border-radius: 2px}';
+                } catch (e) {
+                }
+            }
+        });
+        a('click', function (a, e, c) {
+            if (/\bsf-dump-toggle\b/.test(a.className)) {
+                e.preventDefault();
+                if (!toggle(a, isCtrlKey(e))) {
+                    var r = doc.getElementById(a.getAttribute('href').substr(1)),
+                        s = r.previousSibling,
+                        f = r.parentNode,
+                        t = a.parentNode;
+                    t.replaceChild(r, a);
+                    f.replaceChild(a, s);
+                    t.insertBefore(s, r);
+                    f = f.firstChild.nodeValue.match(indentRx);
+                    t = t.firstChild.nodeValue.match(indentRx);
+                    if (f && t && f[0] !== t[0]) {
+                        r.innerHTML = r.innerHTML.replace(new RegExp('^' + f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]);
+                    }
+                    if ('sf-dump-compact' == r.className) {
+                        toggle(s, isCtrlKey(e));
+                    }
+                }
+
+                if (c) {
+                } else if (doc.getSelection) {
+                    try {
+                        doc.getSelection().removeAllRanges();
+                    } catch (e) {
+                        doc.getSelection().empty();
+                    }
+                } else {
+                    doc.selection.empty();
+                }
+            } else if (/\bsf-dump-str-toggle\b/.test(a.className)) {
+                e.preventDefault();
+                e = a.parentNode.parentNode;
+                e.className = e.className.replace(/sf-dump-str-(expand|collapse)/, a.parentNode.className);
+            }
+        });
+
+        root.addEventListener('keydown', function (e) {
+            if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
+                /* CTRL + F or CMD + F */
+                e.preventDefault();
+                if (!root.querySelector('.sf-dump-search-wrapper')) {
+                    var search = document.createElement('div');
+                    search.className = 'sf-dump-search-wrapper';
+                    search.innerHTML = `
+                        <input type="text" class="sf-dump-search-input">
+                        <button type="button" class="sf-dump-search-input-previous" tabindex="-1">▲</button>
+                        <button type="button" class="sf-dump-search-input-next" tabindex="-1">▼</button>
+                        <span class="sf-dump-search-count">0 on 0</span>
+                    `;
+                    root.appendChild(search);
+
+                    var state = new SearchState();
+                    var searchInput = search.querySelector('.sf-dump-search-input');
+                    var counter = search.querySelector('.sf-dump-search-count');
+
+                    searchInput.addEventListener('keydown', function (e) {
+                        /* Don't intercept escape key in order to not start a search */
+                        if (27 === e.keyCode) {
+                            return;
+                        }
+
+                        delay(function () {
+                            state.reset();
+                            collapseAll(root);
+                            resetHighlightedNodes(root);
+                            var searchQuery = e.target.value;
+                            if ('' === searchQuery) {
+                                counter.textContent = '0 on 0';
+
+                                return;
+                            }
+
+                            var xpathResult = document.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), \"' + searchQuery + '\")]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
+
+                            while (node = xpathResult.iterateNext()) {
+                                state.nodes.push(node);
+                            }
+
+                            var currentNode = state.current();
+                            if (currentNode) {
+                                reveal(currentNode);
+                                highlight(root, currentNode, state.nodes);
+                            }
+
+                            counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                        }, 400);
+                    });
+                    search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous').forEach(function (btn) {
+                        btn.addEventListener('click', function (e) {
+                            e.preventDefault();
+                            var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous';
+                            'next' === direction ? state.next() : state.previous();
+                            searchInput.focus();
+                            collapseAll(root);
+                            var currentNode = state.current();
+                            if (currentNode) {
+                                reveal(currentNode);
+                                highlight(root, currentNode, state.nodes);
+                            }
+
+                            counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                        })
+                    });
+                }
+
+                root.querySelector('.sf-dump-search-input').focus();
+            } else if (27 === e.keyCode) {
+                /* ESC key */
+                e.preventDefault();
+                var search = root.querySelector('.sf-dump-search-wrapper');
+                if (search) {
+                    root.removeChild(search);
+                }
+                resetHighlightedNodes(root);
+            }
+        });
+
+        elt = root.getElementsByTagName('SAMP');
+        len = elt.length;
+        i = 0;
+
+        while (i < len) t.push(elt[i++]);
+        len = t.length;
+
+        for (i = 0; i < len; ++i) {
+            elt = t[i];
+            if ('SAMP' == elt.tagName) {
+                elt.className = 'sf-dump-expanded';
+                a = elt.previousSibling || {};
+                if ('A' != a.tagName) {
+                    a = doc.createElement('A');
+                    a.className = 'sf-dump-ref';
+                    elt.parentNode.insertBefore(a, elt);
+                } else {
+                    a.innerHTML += ' ';
+                }
+                a.title = (a.title ? a.title + '\n[' : '[') + keyHint + '+click] Expand all children';
+                a.innerHTML += '<span>▼</span>';
+                a.className += ' sf-dump-toggle';
+                x = 1;
+                if ('sf-dump' != elt.parentNode.className) {
+                    x += elt.parentNode.getAttribute('data-depth') / 1;
+                }
+                elt.setAttribute('data-depth', x);
+                if (x > options.maxDepth) {
+                    toggle(a);
+                }
+            } else if ('sf-dump-ref' == elt.className && (a = elt.getAttribute('href'))) {
+                a = a.substr(1);
+                elt.className += ' ' + a;
+
+                if (/[\[{]$/.test(elt.previousSibling.nodeValue)) {
+                    a = a != elt.nextSibling.id && doc.getElementById(a);
+                    try {
+                        s = a.nextSibling;
+                        elt.appendChild(a);
+                        s.parentNode.insertBefore(a, s);
+                        if (/^[@#]/.test(elt.innerHTML)) {
+                            elt.innerHTML += ' <span>▶</span>';
+                        } else {
+                            elt.innerHTML = '<span>▶</span>';
+                            elt.className = 'sf-dump-ref';
+                        }
+                        elt.className += ' sf-dump-toggle';
+                    } catch (e) {
+                        if ('&' == elt.innerHTML.charAt(0)) {
+                            elt.innerHTML = '…';
+                            elt.className = 'sf-dump-ref';
+                        }
+                    }
+                }
+            }
+        }
+
+        if (0 >= options.maxStringLength) {
+            return;
+        }
+        try {
+            elt = root.querySelectorAll('.sf-dump-str');
+            len = elt.length;
+            i = 0;
+            t = [];
+
+            while (i < len) t.push(elt[i++]);
+            len = t.length;
+
+            for (i = 0; i < len; ++i) {
+                elt = t[i];
+                s = elt.innerText || elt.textContent;
+                x = s.length - options.maxStringLength;
+                if (0 < x) {
+                    h = elt.innerHTML;
+                    elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength);
+                    elt.className += ' sf-dump-str-collapse';
+                    elt.innerHTML = '<span class=sf-dump-str-collapse>' + h + '<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> ◀</a></span>' +
+                        '<span class=sf-dump-str-expand>' + elt.innerHTML + '<a class="sf-dump-ref sf-dump-str-toggle" title="' + x + ' remaining characters"> ▶</a></span>';
+                }
+            }
+        } catch (e) {
+        }
+    };
+})(document);

From 83c834337f9ec2776804f750a93153d09a340b76 Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@elao.com>
Date: Fri, 30 Dec 2016 16:33:48 +0100
Subject: [PATCH 02/10] Inline back css & js

---
 .../Component/VarDumper/Dumper/HtmlDumper.php | 543 +++++++++++++++++-
 .../VarDumper/Resources/assets/SfDump.css     | 100 ----
 .../VarDumper/Resources/assets/SfDump.js      | 434 --------------
 3 files changed, 537 insertions(+), 540 deletions(-)
 delete mode 100644 src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
 delete mode 100644 src/Symfony/Component/VarDumper/Resources/assets/SfDump.js

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index d1ea6548d0bf2..ed67b5956a496 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -23,9 +23,6 @@ class HtmlDumper extends CliDumper
 {
     public static $defaultOutput = 'php://output';
 
-    private static $css;
-    private static $javascript;
-
     protected $dumpHeader;
     protected $dumpPrefix = '<pre class=sf-dump id=%s data-indent-pad="%s" tabindex="0">';
     protected $dumpSuffix = '</pre><script>Sfdump(%s)</script>';
@@ -131,10 +128,544 @@ protected function getDumpHeader()
             return $this->dumpHeader;
         }
 
-        $sfDumpJs = self::$javascript ?: file_get_contents(__DIR__.'/../Resources/assets/SfDump.js');
-        $sfDumpCss = self::$css ?: file_get_contents(__DIR__.'/../Resources/assets/SfDump.css');
+        $line = str_replace('{$options}', json_encode($this->displayOptions, JSON_FORCE_OBJECT), <<<'EOHTML'
+<script>
+Sfdump = window.Sfdump || (function (doc) {
+
+var refStyle = doc.createElement('style'),
+    rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
+    idRx = /\bsf-dump-\d+-ref[012]\w+\b/,
+    keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
+    addEventListener = function (e, n, cb) {
+        e.addEventListener(n, cb, false);
+    };
+
+(doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle);
+
+if (!doc.addEventListener) {
+    addEventListener = function (element, eventName, callback) {
+        element.attachEvent('on' + eventName, function (e) {
+            e.preventDefault = function () {e.returnValue = false;};
+            e.target = e.srcElement;
+            callback(e);
+        });
+    };
+}
+
+SearchState = function () {
+    this.nodes = [];
+    this.idx = 0;
+};
+SearchState.prototype = {
+    next: function () {
+        if (this.isEmpty()) {
+            return this.current();
+        }
+        this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx;
+
+        return this.current();
+    },
+    previous: function () {
+        if (this.isEmpty()) {
+            return this.current();
+        }
+        this.idx = this.idx > 0 ? this.idx - 1 : this.idx;
+
+        return this.current();
+    },
+    isEmpty: function () {
+        return 0 === this.count();
+    },
+    current: function () {
+        if (this.isEmpty()) {
+            return null;
+        }
+        return this.nodes[this.idx];
+    },
+    reset: function () {
+        this.nodes = [];
+        this.idx = 0;
+    },
+    count: function () {
+        return this.nodes.length;
+    },
+};
+
+function toggle(a, recursive) {
+    var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass;
+
+    if ('sf-dump-compact' == oldClass) {
+        arrow = '▼';
+        newClass = 'sf-dump-expanded';
+    } else if ('sf-dump-expanded' == oldClass) {
+        arrow = '▶';
+        newClass = 'sf-dump-compact';
+    } else {
+        return false;
+    }
+
+    a.lastChild.innerHTML = arrow;
+    s.className = newClass;
+
+    if (recursive) {
+        try {
+            a = s.querySelectorAll('.' + oldClass);
+            for (s = 0; s < a.length; ++s) {
+                if (a[s].className !== newClass) {
+                    a[s].className = newClass;
+                    a[s].previousSibling.lastChild.innerHTML = arrow;
+                }
+            }
+        } catch (e) {
+        }
+    }
+
+    return true;
+};
+
+function collapse(a, recursive) {
+    var s = a.nextSibling || {}, oldClass = s.className;
+
+    if ('sf-dump-expanded' == oldClass) {
+        toggle(a, recursive);
+
+        return true;
+    }
+
+    return false;
+};
+
+function expand(a, recursive) {
+    var s = a.nextSibling || {}, oldClass = s.className;
+
+    if ('sf-dump-compact' == oldClass) {
+        toggle(a, recursive);
+
+        return true;
+    }
+
+    return false;
+};
+
+function collapseAll(root)
+{
+    var a = root.querySelector('a.sf-dump-toggle');
+    if (a) {
+        collapse(a, true);
+        expand(a);
+
+        return true;
+    }
+
+    return false;
+}
+
+function reveal(node) {
+    var current = node;
+    var parents = [];
+    var previous = null;
+    var parent = null;
+
+    while ((parent = current.parentNode || {}) && (previous = parent.previousSibling)) {
+        current = current.parentNode;
+        parents.push(previous);
+    }
+
+    if (0 !== parents.length) {
+        parents.forEach(function (parent) {
+            expand(parent);
+        });
+
+        return true;
+    }
+
+    return false;
+}
+
+function highlight(root, activeNode, nodes)
+{
+    resetHighlightedNodes(root);
+
+    (nodes||[]).forEach(function (node) {
+        if (!/\bsf-dump-highlight\b/.test(node.className)) {
+            node.className = node.className + ' sf-dump-highlight';
+        }
+    });
+
+    if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) {
+        activeNode.className = activeNode.className + ' sf-dump-highlight-active';
+    }
+}
+
+function resetHighlightedNodes(root)
+{
+    root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private').forEach(function (strNode) {
+        strNode.className = strNode.className.replace(/\b sf-dump-highlight\b/, '');
+        strNode.className = strNode.className.replace(/\b sf-dump-highlight-active\b/, '');
+    });
+}
+
+return function (root, x) {
+    root = doc.getElementById(root);
+
+    var indentRx = new RegExp('^('+(root.getAttribute('data-indent-pad') || '  ').replace(rxEsc, '\\$1')+')+', 'm'),
+        options = {$options},
+        elt = root.getElementsByTagName('A'),
+        len = elt.length,
+        i = 0, s, h,
+        t = [];
+
+    while (i < len) t.push(elt[i++]);
+
+    for (i in x) {
+        options[i] = x[i];
+    }
+
+    var delay = (function () {
+        var timer = 0;
+        return function (callback, ms) {
+            clearTimeout(timer);
+            timer = setTimeout(callback, ms);
+        };
+    })();
+
+    function a(e, f) {
+        addEventListener(root, e, function (e) {
+            if ('A' == e.target.tagName) {
+                f(e.target, e);
+            } else if ('A' == e.target.parentNode.tagName) {
+                f(e.target.parentNode, e);
+            } else if (e.target.nextElementSibling && 'A' == e.target.nextElementSibling.tagName) {
+                f(e.target.nextElementSibling, e, true);
+            }
+        });
+    };
+    function isCtrlKey(e) {
+        return e.ctrlKey || e.metaKey;
+    }
+    addEventListener(root, 'mouseover', function (e) {
+        if ('' != refStyle.innerHTML) {
+            refStyle.innerHTML = '';
+        }
+    });
+    a('mouseover', function (a, e, c) {
+        if (c) {
+            e.target.style.cursor = "pointer";
+        } else if (a = idRx.exec(a.className)) {
+            try {
+                refStyle.innerHTML = 'pre.sf-dump .'+a[0]+'{background-color: #B729D9; color: #FFF !important; border-radius: 2px}';
+            } catch (e) {
+            }
+        }
+    });
+    a('click', function (a, e, c) {
+        if (/\bsf-dump-toggle\b/.test(a.className)) {
+            e.preventDefault();
+            if (!toggle(a, isCtrlKey(e))) {
+                var r = doc.getElementById(a.getAttribute('href').substr(1)),
+                    s = r.previousSibling,
+                    f = r.parentNode,
+                    t = a.parentNode;
+                t.replaceChild(r, a);
+                f.replaceChild(a, s);
+                t.insertBefore(s, r);
+                f = f.firstChild.nodeValue.match(indentRx);
+                t = t.firstChild.nodeValue.match(indentRx);
+                if (f && t && f[0] !== t[0]) {
+                    r.innerHTML = r.innerHTML.replace(new RegExp('^'+f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]);
+                }
+                if ('sf-dump-compact' == r.className) {
+                    toggle(s, isCtrlKey(e));
+                }
+            }
+
+            if (c) {
+            } else if (doc.getSelection) {
+                try {
+                    doc.getSelection().removeAllRanges();
+                } catch (e) {
+                    doc.getSelection().empty();
+                }
+            } else {
+                doc.selection.empty();
+            }
+        } else if (/\bsf-dump-str-toggle\b/.test(a.className)) {
+            e.preventDefault();
+            e = a.parentNode.parentNode;
+            e.className = e.className.replace(/sf-dump-str-(expand|collapse)/, a.parentNode.className);
+        }
+    });
+
+    root.addEventListener('keydown', function (e) {
+        if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
+            /* CTRL + F or CMD + F */
+            e.preventDefault();
+            if (!root.querySelector('.sf-dump-search-wrapper')) {
+                var search = document.createElement('div');
+                search.className = 'sf-dump-search-wrapper';
+                search.innerHTML = `
+                    <input type="text" class="sf-dump-search-input">
+                    <button type="button" class="sf-dump-search-input-previous" tabindex="-1">▲</button>
+                    <button type="button" class="sf-dump-search-input-next" tabindex="-1">▼</button>
+                    <span class="sf-dump-search-count">0 on 0</span>
+                `;
+                root.appendChild(search);
+
+                var state = new SearchState();
+                var searchInput = search.querySelector('.sf-dump-search-input');
+                var counter = search.querySelector('.sf-dump-search-count');
+
+                searchInput.addEventListener('keydown', function (e) {
+                    /* Don't intercept escape key in order to not start a search */
+                    if (27 === e.keyCode) {
+                        return;
+                    }
+
+                    delay(function () {
+                        state.reset();
+                        collapseAll(root);
+                        resetHighlightedNodes(root);
+                        var searchQuery = e.target.value;
+                        if ('' === searchQuery) {
+                            counter.textContent = '0 on 0';
+
+                            return;
+                        }
+
+                        var xpathResult = document.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), \"' + searchQuery + '\")]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
+
+                        while (node = xpathResult.iterateNext()) {
+                            state.nodes.push(node);
+                        }
+
+                        var currentNode = state.current();
+                        if (currentNode) {
+                            reveal(currentNode);
+                            highlight(root, currentNode, state.nodes);
+                        }
+
+                        counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                    }, 400);
+                });
+                search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous').forEach(function (btn) {
+                    btn.addEventListener('click', function (e) {
+                        e.preventDefault();
+                        var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous';
+                        'next' === direction ? state.next() : state.previous();
+                        searchInput.focus();
+                        collapseAll(root);
+                        var currentNode = state.current();
+                        if (currentNode) {
+                            reveal(currentNode);
+                            highlight(root, currentNode, state.nodes);
+                        }
+
+                        counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                    })
+                });
+            }
 
-        $line = str_replace('"{$options}"', json_encode($this->displayOptions, JSON_FORCE_OBJECT), "<script>$sfDumpJs</script><style>$sfDumpCss");
+            root.querySelector('.sf-dump-search-input').focus();
+        } else if (27 === e.keyCode) {
+            /* ESC key */
+            e.preventDefault();
+            var search = root.querySelector('.sf-dump-search-wrapper');
+            if (search) {
+                root.removeChild(search);
+            }
+            resetHighlightedNodes(root);
+        }
+    });
+
+    elt = root.getElementsByTagName('SAMP');
+    len = elt.length;
+    i = 0;
+
+    while (i < len) t.push(elt[i++]);
+    len = t.length;
+
+    for (i = 0; i < len; ++i) {
+        elt = t[i];
+        if ('SAMP' == elt.tagName) {
+            elt.className = 'sf-dump-expanded';
+            a = elt.previousSibling || {};
+            if ('A' != a.tagName) {
+                a = doc.createElement('A');
+                a.className = 'sf-dump-ref';
+                elt.parentNode.insertBefore(a, elt);
+            } else {
+                a.innerHTML += ' ';
+            }
+            a.title = (a.title ? a.title+'\n[' : '[')+keyHint+'+click] Expand all children';
+            a.innerHTML += '<span>▼</span>';
+            a.className += ' sf-dump-toggle';
+            x = 1;
+            if ('sf-dump' != elt.parentNode.className) {
+                x += elt.parentNode.getAttribute('data-depth')/1;
+            }
+            elt.setAttribute('data-depth', x);
+            if (x > options.maxDepth) {
+                toggle(a);
+            }
+        } else if ('sf-dump-ref' == elt.className && (a = elt.getAttribute('href'))) {
+            a = a.substr(1);
+            elt.className += ' '+a;
+
+            if (/[\[{]$/.test(elt.previousSibling.nodeValue)) {
+                a = a != elt.nextSibling.id && doc.getElementById(a);
+                try {
+                    s = a.nextSibling;
+                    elt.appendChild(a);
+                    s.parentNode.insertBefore(a, s);
+                    if (/^[@#]/.test(elt.innerHTML)) {
+                        elt.innerHTML += ' <span>▶</span>';
+                    } else {
+                        elt.innerHTML = '<span>▶</span>';
+                        elt.className = 'sf-dump-ref';
+                    }
+                    elt.className += ' sf-dump-toggle';
+                } catch (e) {
+                    if ('&' == elt.innerHTML.charAt(0)) {
+                        elt.innerHTML = '…';
+                        elt.className = 'sf-dump-ref';
+                    }
+                }
+            }
+        }
+    }
+
+    if (0 >= options.maxStringLength) {
+        return;
+    }
+    try {
+        elt = root.querySelectorAll('.sf-dump-str');
+        len = elt.length;
+        i = 0;
+        t = [];
+
+        while (i < len) t.push(elt[i++]);
+        len = t.length;
+
+        for (i = 0; i < len; ++i) {
+            elt = t[i];
+            s = elt.innerText || elt.textContent;
+            x = s.length - options.maxStringLength;
+            if (0 < x) {
+                h = elt.innerHTML;
+                elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength);
+                elt.className += ' sf-dump-str-collapse';
+                elt.innerHTML = '<span class=sf-dump-str-collapse>'+h+'<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> ◀</a></span>'+
+                    '<span class=sf-dump-str-expand>'+elt.innerHTML+'<a class="sf-dump-ref sf-dump-str-toggle" title="'+x+' remaining characters"> ▶</a></span>';
+            }
+        }
+    } catch (e) {
+    }
+};
+
+})(document);
+</script><style>
+pre.sf-dump {
+    display: block;
+    white-space: pre;
+    padding: 5px;
+}
+pre.sf-dump span {
+    display: inline;
+}
+pre.sf-dump .sf-dump-compact {
+    display: none;
+}
+pre.sf-dump abbr {
+    text-decoration: none;
+    border: none;
+    cursor: help;
+}
+pre.sf-dump a {
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
+    outline: none;
+    color: inherit;
+}
+pre.sf-dump .sf-dump-ellipsis {
+    display: inline-block;
+    text-overflow: ellipsis;
+    max-width: 5em;
+    white-space: nowrap;
+    overflow: hidden;
+    vertical-align: top;
+}
+pre.sf-dump code {
+    display:inline;
+    padding:0;
+    background:none;
+}
+.sf-dump-str-collapse .sf-dump-str-collapse {
+    display: none;
+}
+.sf-dump-str-expand .sf-dump-str-expand {
+    display: none;
+}
+.sf-dump-public.sf-dump-highlight,
+.sf-dump-protected.sf-dump-highlight,
+.sf-dump-private.sf-dump-highlight,
+.sf-dump-str.sf-dump-highlight,
+.sf-dump-key.sf-dump-highlight {
+    background: rgba(111, 172, 204, 0.3);
+    border: 1px solid #7da0b1;
+    border-radius: 3px;
+}
+.sf-dump-public.sf-dump-highlight-active,
+.sf-dump-protected.sf-dump-highlight-active,
+.sf-dump-private.sf-dump-highlight-active,
+.sf-dump-str.sf-dump-highlight-active,
+.sf-dump-key.sf-dump-highlight-active {
+    background: rgba(253, 175, 0, 0.4);
+    border: 1px solid #FFA500;
+    border-radius: 3px;
+}
+.sf-dump-search-wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    min-width: 180px;
+    font-size: 0;
+    padding: 5px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 0 0 0 3px;
+}
+.sf-dump-search-wrapper > input.sf-dump-search-input {
+    min-width: 150px;
+    color: #333;
+    padding: 3px;
+    height: 21px;
+    border: 1px solid #bbb;
+    box-sizing: border-box;
+    font-size: 12px;
+}
+.sf-dump-search-wrapper > .sf-dump-search-input-next,
+.sf-dump-search-wrapper > .sf-dump-search-input-previous {
+    border-radius: 0;
+    background: white;
+    outline: none;
+    border: 1px solid #bbb;
+    border-left: none;
+    height: 21px;
+    font-size: 12px;
+    color: #333;
+    vertical-align: top;
+    box-sizing: border-box;
+}
+.sf-dump-search-wrapper > .sf-dump-search-count {
+    font-size: 12px;
+    color: #FFF;
+    font-weight: normal;
+    margin-top: 5px;
+    display: block;
+    text-align: right;
+}
+EOHTML
+        );
 
         foreach ($this->styles as $class => $style) {
             $line .= 'pre.sf-dump'.('default' === $class ? ', pre.sf-dump' : '').' .sf-dump-'.$class.'{'.$style.'}';
diff --git a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
deleted file mode 100644
index f8306eb7b92c6..0000000000000
--- a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.css
+++ /dev/null
@@ -1,100 +0,0 @@
-pre.sf-dump {
-    display: block;
-    white-space: pre;
-    padding: 5px;
-}
-pre.sf-dump span {
-    display: inline;
-}
-pre.sf-dump .sf-dump-compact {
-    display: none;
-}
-pre.sf-dump abbr {
-    text-decoration: none;
-    border: none;
-    cursor: help;
-}
-pre.sf-dump a {
-    text-decoration: none;
-    cursor: pointer;
-    border: 0;
-    outline: none;
-    color: inherit;
-}
-pre.sf-dump .sf-dump-ellipsis {
-    display: inline-block;
-    text-overflow: ellipsis;
-    max-width: 5em;
-    white-space: nowrap;
-    overflow: hidden;
-    vertical-align: top;
-}
-pre.sf-dump code {
-    display:inline;
-    padding:0;
-    background:none;
-}
-.sf-dump-str-collapse .sf-dump-str-collapse {
-    display: none;
-}
-.sf-dump-str-expand .sf-dump-str-expand {
-    display: none;
-}
-.sf-dump-public.sf-dump-highlight,
-.sf-dump-protected.sf-dump-highlight,
-.sf-dump-private.sf-dump-highlight,
-.sf-dump-str.sf-dump-highlight,
-.sf-dump-key.sf-dump-highlight {
-    background: rgba(111, 172, 204, 0.3);
-    border: 1px solid #7da0b1;
-    border-radius: 3px;
-}
-.sf-dump-public.sf-dump-highlight-active,
-.sf-dump-protected.sf-dump-highlight-active,
-.sf-dump-private.sf-dump-highlight-active,
-.sf-dump-str.sf-dump-highlight-active,
-.sf-dump-key.sf-dump-highlight-active {
-    background: rgba(253, 175, 0, 0.4);
-    border: 1px solid #FFA500;
-    border-radius: 3px;
-}
-.sf-dump-search-wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 180px;
-    font-size: 0;
-    padding: 5px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 0 0 0 3px;
-}
-.sf-dump-search-wrapper > input.sf-dump-search-input {
-    min-width: 150px;
-    color: #333;
-    padding: 3px;
-    height: 21px;
-    border: 1px solid #bbb;
-    box-sizing: border-box;
-    font-size: 12px;
-}
-.sf-dump-search-wrapper > .sf-dump-search-input-next,
-.sf-dump-search-wrapper > .sf-dump-search-input-previous {
-    border-radius: 0;
-    background: white;
-    outline: none;
-    border: 1px solid #bbb;
-    border-left: none;
-    height: 21px;
-    font-size: 12px;
-    color: #333;
-    vertical-align: top;
-    box-sizing: border-box;
-}
-.sf-dump-search-wrapper > .sf-dump-search-count {
-    font-size: 12px;
-    color: #FFF;
-    font-weight: normal;
-    margin-top: 5px;
-    display: block;
-    text-align: right;
-}
diff --git a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js b/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js
deleted file mode 100644
index cf21ea7c5b345..0000000000000
--- a/src/Symfony/Component/VarDumper/Resources/assets/SfDump.js
+++ /dev/null
@@ -1,434 +0,0 @@
-Sfdump = window.Sfdump || (function (doc) {
-    var refStyle = doc.createElement('style'),
-        rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
-        idRx = /\bsf-dump-\d+-ref[012]\w+\b/,
-        keyHint = 0 <= navigator.platform.toUpperCase().indexOf('MAC') ? 'Cmd' : 'Ctrl',
-        addEventListener = function (e, n, cb) {
-            e.addEventListener(n, cb, false);
-        };
-
-    (doc.documentElement.firstElementChild || doc.documentElement.children[0]).appendChild(refStyle);
-
-    if (!doc.addEventListener) {
-        addEventListener = function (element, eventName, callback) {
-            element.attachEvent('on' + eventName, function (e) {
-                e.preventDefault = function () {
-                    e.returnValue = false;
-                };
-                e.target = e.srcElement;
-                callback(e);
-            });
-        };
-    }
-
-    SearchState = function () {
-        this.nodes = [];
-        this.idx = 0;
-    };
-    SearchState.prototype = {
-        next: function () {
-            if (this.isEmpty()) {
-                return this.current();
-            }
-            this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx;
-
-            return this.current();
-        },
-        previous: function () {
-            if (this.isEmpty()) {
-                return this.current();
-            }
-            this.idx = this.idx > 0 ? this.idx - 1 : this.idx;
-
-            return this.current();
-        },
-        isEmpty: function () {
-            return 0 === this.count();
-        },
-        current: function () {
-            if (this.isEmpty()) {
-                return null;
-            }
-            return this.nodes[this.idx];
-        },
-        reset: function () {
-            this.nodes = [];
-            this.idx = 0;
-        },
-        count: function () {
-            return this.nodes.length;
-        },
-    };
-
-    function toggle(a, recursive) {
-        var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass;
-
-        if ('sf-dump-compact' == oldClass) {
-            arrow = '▼';
-            newClass = 'sf-dump-expanded';
-        } else if ('sf-dump-expanded' == oldClass) {
-            arrow = '▶';
-            newClass = 'sf-dump-compact';
-        } else {
-            return false;
-        }
-
-        a.lastChild.innerHTML = arrow;
-        s.className = newClass;
-
-        if (recursive) {
-            try {
-                a = s.querySelectorAll('.' + oldClass);
-                for (s = 0; s < a.length; ++s) {
-                    if (a[s].className !== newClass) {
-                        a[s].className = newClass;
-                        a[s].previousSibling.lastChild.innerHTML = arrow;
-                    }
-                }
-            } catch (e) {
-            }
-        }
-
-        return true;
-    };
-
-    function collapse(a, recursive) {
-        var s = a.nextSibling || {}, oldClass = s.className;
-
-        if ('sf-dump-expanded' == oldClass) {
-            toggle(a, recursive);
-
-            return true;
-        }
-
-        return false;
-    };
-
-    function expand(a, recursive) {
-        var s = a.nextSibling || {}, oldClass = s.className;
-
-        if ('sf-dump-compact' == oldClass) {
-            toggle(a, recursive);
-
-            return true;
-        }
-
-        return false;
-    };
-
-    function collapseAll(root)
-    {
-        var a = root.querySelector('a.sf-dump-toggle');
-        if (a) {
-            collapse(a, true);
-            expand(a);
-
-            return true;
-        }
-
-        return false;
-    }
-
-    function reveal(node) {
-        var current = node;
-        var parents = [];
-        var previous = null;
-        var parent = null;
-
-        while ((parent = current.parentNode || {}) && (previous = parent.previousSibling)) {
-            current = current.parentNode;
-            parents.push(previous);
-        }
-
-        if (0 !== parents.length) {
-            parents.forEach(function (parent) {
-                expand(parent);
-            });
-
-            return true;
-        }
-
-        return false;
-    }
-
-    function highlight(root, activeNode, nodes)
-    {
-        resetHighlightedNodes(root);
-
-        (nodes||[]).forEach(function (node) {
-            if (!/\bsf-dump-highlight\b/.test(node.className)) {
-                node.className = node.className + ' sf-dump-highlight';
-            }
-        });
-
-        if (!/\bsf-dump-highlight-active\b/.test(activeNode.className)) {
-            activeNode.className = activeNode.className + ' sf-dump-highlight-active';
-        }
-    }
-
-    function resetHighlightedNodes(root)
-    {
-        root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private').forEach(function (strNode) {
-            strNode.className = strNode.className.replace(/\b sf-dump-highlight\b/, '');
-            strNode.className = strNode.className.replace(/\b sf-dump-highlight-active\b/, '');
-        });
-    }
-
-    return function (root, x) {
-        root = doc.getElementById(root);
-
-        var indentRx = new RegExp('^(' + (root.getAttribute('data-indent-pad') || '  ').replace(rxEsc, '\\$1') + ')+', 'm'),
-            options = "{$options}",
-            elt = root.getElementsByTagName('A'),
-            len = elt.length,
-            i = 0, s, h,
-            t = [];
-
-        while (i < len) t.push(elt[i++]);
-
-        for (i in x) {
-            options[i] = x[i];
-        }
-
-        var delay = (function () {
-            var timer = 0;
-            return function (callback, ms) {
-                clearTimeout(timer);
-                timer = setTimeout(callback, ms);
-            };
-        })();
-
-        function a(e, f) {
-            addEventListener(root, e, function (e) {
-                if ('A' == e.target.tagName) {
-                    f(e.target, e);
-                } else if ('A' == e.target.parentNode.tagName) {
-                    f(e.target.parentNode, e);
-                } else if (e.target.nextElementSibling && 'A' == e.target.nextElementSibling.tagName) {
-                    f(e.target.nextElementSibling, e, true);
-                }
-            });
-        };
-        function isCtrlKey(e) {
-            return e.ctrlKey || e.metaKey;
-        }
-
-        addEventListener(root, 'mouseover', function (e) {
-            if ('' != refStyle.innerHTML) {
-                refStyle.innerHTML = '';
-            }
-        });
-        a('mouseover', function (a, e, c) {
-            if (c) {
-                e.target.style.cursor = "pointer";
-            } else if (a = idRx.exec(a.className)) {
-                try {
-                    refStyle.innerHTML = 'pre.sf-dump .' + a[0] + '{background-color: #B729D9; color: #FFF !important; border-radius: 2px}';
-                } catch (e) {
-                }
-            }
-        });
-        a('click', function (a, e, c) {
-            if (/\bsf-dump-toggle\b/.test(a.className)) {
-                e.preventDefault();
-                if (!toggle(a, isCtrlKey(e))) {
-                    var r = doc.getElementById(a.getAttribute('href').substr(1)),
-                        s = r.previousSibling,
-                        f = r.parentNode,
-                        t = a.parentNode;
-                    t.replaceChild(r, a);
-                    f.replaceChild(a, s);
-                    t.insertBefore(s, r);
-                    f = f.firstChild.nodeValue.match(indentRx);
-                    t = t.firstChild.nodeValue.match(indentRx);
-                    if (f && t && f[0] !== t[0]) {
-                        r.innerHTML = r.innerHTML.replace(new RegExp('^' + f[0].replace(rxEsc, '\\$1'), 'mg'), t[0]);
-                    }
-                    if ('sf-dump-compact' == r.className) {
-                        toggle(s, isCtrlKey(e));
-                    }
-                }
-
-                if (c) {
-                } else if (doc.getSelection) {
-                    try {
-                        doc.getSelection().removeAllRanges();
-                    } catch (e) {
-                        doc.getSelection().empty();
-                    }
-                } else {
-                    doc.selection.empty();
-                }
-            } else if (/\bsf-dump-str-toggle\b/.test(a.className)) {
-                e.preventDefault();
-                e = a.parentNode.parentNode;
-                e.className = e.className.replace(/sf-dump-str-(expand|collapse)/, a.parentNode.className);
-            }
-        });
-
-        root.addEventListener('keydown', function (e) {
-            if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
-                /* CTRL + F or CMD + F */
-                e.preventDefault();
-                if (!root.querySelector('.sf-dump-search-wrapper')) {
-                    var search = document.createElement('div');
-                    search.className = 'sf-dump-search-wrapper';
-                    search.innerHTML = `
-                        <input type="text" class="sf-dump-search-input">
-                        <button type="button" class="sf-dump-search-input-previous" tabindex="-1">▲</button>
-                        <button type="button" class="sf-dump-search-input-next" tabindex="-1">▼</button>
-                        <span class="sf-dump-search-count">0 on 0</span>
-                    `;
-                    root.appendChild(search);
-
-                    var state = new SearchState();
-                    var searchInput = search.querySelector('.sf-dump-search-input');
-                    var counter = search.querySelector('.sf-dump-search-count');
-
-                    searchInput.addEventListener('keydown', function (e) {
-                        /* Don't intercept escape key in order to not start a search */
-                        if (27 === e.keyCode) {
-                            return;
-                        }
-
-                        delay(function () {
-                            state.reset();
-                            collapseAll(root);
-                            resetHighlightedNodes(root);
-                            var searchQuery = e.target.value;
-                            if ('' === searchQuery) {
-                                counter.textContent = '0 on 0';
-
-                                return;
-                            }
-
-                            var xpathResult = document.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), \"' + searchQuery + '\")]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
-
-                            while (node = xpathResult.iterateNext()) {
-                                state.nodes.push(node);
-                            }
-
-                            var currentNode = state.current();
-                            if (currentNode) {
-                                reveal(currentNode);
-                                highlight(root, currentNode, state.nodes);
-                            }
-
-                            counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
-                        }, 400);
-                    });
-                    search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous').forEach(function (btn) {
-                        btn.addEventListener('click', function (e) {
-                            e.preventDefault();
-                            var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous';
-                            'next' === direction ? state.next() : state.previous();
-                            searchInput.focus();
-                            collapseAll(root);
-                            var currentNode = state.current();
-                            if (currentNode) {
-                                reveal(currentNode);
-                                highlight(root, currentNode, state.nodes);
-                            }
-
-                            counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
-                        })
-                    });
-                }
-
-                root.querySelector('.sf-dump-search-input').focus();
-            } else if (27 === e.keyCode) {
-                /* ESC key */
-                e.preventDefault();
-                var search = root.querySelector('.sf-dump-search-wrapper');
-                if (search) {
-                    root.removeChild(search);
-                }
-                resetHighlightedNodes(root);
-            }
-        });
-
-        elt = root.getElementsByTagName('SAMP');
-        len = elt.length;
-        i = 0;
-
-        while (i < len) t.push(elt[i++]);
-        len = t.length;
-
-        for (i = 0; i < len; ++i) {
-            elt = t[i];
-            if ('SAMP' == elt.tagName) {
-                elt.className = 'sf-dump-expanded';
-                a = elt.previousSibling || {};
-                if ('A' != a.tagName) {
-                    a = doc.createElement('A');
-                    a.className = 'sf-dump-ref';
-                    elt.parentNode.insertBefore(a, elt);
-                } else {
-                    a.innerHTML += ' ';
-                }
-                a.title = (a.title ? a.title + '\n[' : '[') + keyHint + '+click] Expand all children';
-                a.innerHTML += '<span>▼</span>';
-                a.className += ' sf-dump-toggle';
-                x = 1;
-                if ('sf-dump' != elt.parentNode.className) {
-                    x += elt.parentNode.getAttribute('data-depth') / 1;
-                }
-                elt.setAttribute('data-depth', x);
-                if (x > options.maxDepth) {
-                    toggle(a);
-                }
-            } else if ('sf-dump-ref' == elt.className && (a = elt.getAttribute('href'))) {
-                a = a.substr(1);
-                elt.className += ' ' + a;
-
-                if (/[\[{]$/.test(elt.previousSibling.nodeValue)) {
-                    a = a != elt.nextSibling.id && doc.getElementById(a);
-                    try {
-                        s = a.nextSibling;
-                        elt.appendChild(a);
-                        s.parentNode.insertBefore(a, s);
-                        if (/^[@#]/.test(elt.innerHTML)) {
-                            elt.innerHTML += ' <span>▶</span>';
-                        } else {
-                            elt.innerHTML = '<span>▶</span>';
-                            elt.className = 'sf-dump-ref';
-                        }
-                        elt.className += ' sf-dump-toggle';
-                    } catch (e) {
-                        if ('&' == elt.innerHTML.charAt(0)) {
-                            elt.innerHTML = '…';
-                            elt.className = 'sf-dump-ref';
-                        }
-                    }
-                }
-            }
-        }
-
-        if (0 >= options.maxStringLength) {
-            return;
-        }
-        try {
-            elt = root.querySelectorAll('.sf-dump-str');
-            len = elt.length;
-            i = 0;
-            t = [];
-
-            while (i < len) t.push(elt[i++]);
-            len = t.length;
-
-            for (i = 0; i < len; ++i) {
-                elt = t[i];
-                s = elt.innerText || elt.textContent;
-                x = s.length - options.maxStringLength;
-                if (0 < x) {
-                    h = elt.innerHTML;
-                    elt[elt.innerText ? 'innerText' : 'textContent'] = s.substring(0, options.maxStringLength);
-                    elt.className += ' sf-dump-str-collapse';
-                    elt.innerHTML = '<span class=sf-dump-str-collapse>' + h + '<a class="sf-dump-ref sf-dump-str-toggle" title="Collapse"> ◀</a></span>' +
-                        '<span class=sf-dump-str-expand>' + elt.innerHTML + '<a class="sf-dump-ref sf-dump-str-toggle" title="' + x + ' remaining characters"> ▶</a></span>';
-                }
-            }
-        } catch (e) {
-        }
-    };
-})(document);

From 5259aa9488c5a624e215d494e6b342b4e5b2463b Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@elao.com>
Date: Fri, 30 Dec 2016 17:20:45 +0100
Subject: [PATCH 03/10] Improvements

---
 .../views/Profiler/profiler.css.twig          |   6 +-
 .../Component/VarDumper/Dumper/HtmlDumper.php | 320 ++++++++++--------
 2 files changed, 179 insertions(+), 147 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
index 5065a582121bf..e34ea7a88815d 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -935,12 +935,16 @@ table.logs .metadata {
 }
 
 #collector-content .sf-dump-search-wrapper {
-    padding: 10px;
+    margin: 0;
     background: rgba(210, 210, 210, 0.5);
     border: 1px solid #dcdcdc;
     border-top: none;
     border-right: none;
 }
+#collector-content div.sf-dump .sf-dump-search-wrapper {
+    margin-top: -10px;
+    margin-right: -10px;
+}
 #collector-content .sf-dump-search-wrapper > .sf-dump-search-count { color: #000; }
 
 {# Search Results page
diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index ed67b5956a496..078a076a5c3b0 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -24,7 +24,7 @@ class HtmlDumper extends CliDumper
     public static $defaultOutput = 'php://output';
 
     protected $dumpHeader;
-    protected $dumpPrefix = '<pre class=sf-dump id=%s data-indent-pad="%s" tabindex="0">';
+    protected $dumpPrefix = '<pre class=sf-dump id=%s data-indent-pad="%s">';
     protected $dumpSuffix = '</pre><script>Sfdump(%s)</script>';
     protected $dumpId = 'sf-dump';
     protected $colors = true;
@@ -152,45 +152,6 @@ protected function getDumpHeader()
     };
 }
 
-SearchState = function () {
-    this.nodes = [];
-    this.idx = 0;
-};
-SearchState.prototype = {
-    next: function () {
-        if (this.isEmpty()) {
-            return this.current();
-        }
-        this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx;
-
-        return this.current();
-    },
-    previous: function () {
-        if (this.isEmpty()) {
-            return this.current();
-        }
-        this.idx = this.idx > 0 ? this.idx - 1 : this.idx;
-
-        return this.current();
-    },
-    isEmpty: function () {
-        return 0 === this.count();
-    },
-    current: function () {
-        if (this.isEmpty()) {
-            return null;
-        }
-        return this.nodes[this.idx];
-    },
-    reset: function () {
-        this.nodes = [];
-        this.idx = 0;
-    },
-    count: function () {
-        return this.nodes.length;
-    },
-};
-
 function toggle(a, recursive) {
     var s = a.nextSibling || {}, oldClass = s.className, arrow, newClass;
 
@@ -209,7 +170,7 @@ function toggle(a, recursive) {
 
     if (recursive) {
         try {
-            a = s.querySelectorAll('.' + oldClass);
+            a = s.querySelectorAll('.'+oldClass);
             for (s = 0; s < a.length; ++s) {
                 if (a[s].className !== newClass) {
                     a[s].className = newClass;
@@ -247,8 +208,7 @@ function expand(a, recursive) {
     return false;
 };
 
-function collapseAll(root)
-{
+function collapseAll(root) {
     var a = root.querySelector('a.sf-dump-toggle');
     if (a) {
         collapse(a, true);
@@ -266,7 +226,7 @@ function reveal(node) {
     var previous = null;
     var parent = null;
 
-    while ((parent = current.parentNode || {}) && (previous = parent.previousSibling)) {
+    while ((parent = current.parentNode || {}) && (previous = parent.previousSibling) && 'A' === previous.tagName) {
         current = current.parentNode;
         parents.push(previous);
     }
@@ -282,11 +242,10 @@ function reveal(node) {
     return false;
 }
 
-function highlight(root, activeNode, nodes)
-{
+function highlight(root, activeNode, nodes) {
     resetHighlightedNodes(root);
 
-    (nodes||[]).forEach(function (node) {
+    Array.from(nodes||[]).forEach(function (node) {
         if (!/\bsf-dump-highlight\b/.test(node.className)) {
             node.className = node.className + ' sf-dump-highlight';
         }
@@ -297,9 +256,8 @@ function highlight(root, activeNode, nodes)
     }
 }
 
-function resetHighlightedNodes(root)
-{
-    root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private').forEach(function (strNode) {
+function resetHighlightedNodes(root) {
+    Array.from(root.querySelectorAll('.sf-dump-str, .sf-dump-key, .sf-dump-public, .sf-dump-protected, .sf-dump-private')).forEach(function (strNode) {
         strNode.className = strNode.className.replace(/\b sf-dump-highlight\b/, '');
         strNode.className = strNode.className.replace(/\b sf-dump-highlight-active\b/, '');
     });
@@ -321,14 +279,6 @@ function resetHighlightedNodes(root)
         options[i] = x[i];
     }
 
-    var delay = (function () {
-        var timer = 0;
-        return function (callback, ms) {
-            clearTimeout(timer);
-            timer = setTimeout(callback, ms);
-        };
-    })();
-
     function a(e, f) {
         addEventListener(root, e, function (e) {
             if ('A' == e.target.tagName) {
@@ -343,6 +293,20 @@ function a(e, f) {
     function isCtrlKey(e) {
         return e.ctrlKey || e.metaKey;
     }
+    function xpathString(str) {
+        var parts = str.match(/[^'"]+|['"]/g).map(function (part) {
+            if ("'" == part)  {
+                return '"\'"';
+            }
+            if ('"' == part) {
+                return "'\"'";
+            }
+
+            return "'" + part + "'";
+        });
+
+        return "concat(" + parts.join(",") + ", '')";
+    }
     addEventListener(root, 'mouseover', function (e) {
         if ('' != refStyle.innerHTML) {
             refStyle.innerHTML = '';
@@ -396,87 +360,6 @@ function isCtrlKey(e) {
         }
     });
 
-    root.addEventListener('keydown', function (e) {
-        if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
-            /* CTRL + F or CMD + F */
-            e.preventDefault();
-            if (!root.querySelector('.sf-dump-search-wrapper')) {
-                var search = document.createElement('div');
-                search.className = 'sf-dump-search-wrapper';
-                search.innerHTML = `
-                    <input type="text" class="sf-dump-search-input">
-                    <button type="button" class="sf-dump-search-input-previous" tabindex="-1">▲</button>
-                    <button type="button" class="sf-dump-search-input-next" tabindex="-1">▼</button>
-                    <span class="sf-dump-search-count">0 on 0</span>
-                `;
-                root.appendChild(search);
-
-                var state = new SearchState();
-                var searchInput = search.querySelector('.sf-dump-search-input');
-                var counter = search.querySelector('.sf-dump-search-count');
-
-                searchInput.addEventListener('keydown', function (e) {
-                    /* Don't intercept escape key in order to not start a search */
-                    if (27 === e.keyCode) {
-                        return;
-                    }
-
-                    delay(function () {
-                        state.reset();
-                        collapseAll(root);
-                        resetHighlightedNodes(root);
-                        var searchQuery = e.target.value;
-                        if ('' === searchQuery) {
-                            counter.textContent = '0 on 0';
-
-                            return;
-                        }
-
-                        var xpathResult = document.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), \"' + searchQuery + '\")]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE);
-
-                        while (node = xpathResult.iterateNext()) {
-                            state.nodes.push(node);
-                        }
-
-                        var currentNode = state.current();
-                        if (currentNode) {
-                            reveal(currentNode);
-                            highlight(root, currentNode, state.nodes);
-                        }
-
-                        counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
-                    }, 400);
-                });
-                search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous').forEach(function (btn) {
-                    btn.addEventListener('click', function (e) {
-                        e.preventDefault();
-                        var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous';
-                        'next' === direction ? state.next() : state.previous();
-                        searchInput.focus();
-                        collapseAll(root);
-                        var currentNode = state.current();
-                        if (currentNode) {
-                            reveal(currentNode);
-                            highlight(root, currentNode, state.nodes);
-                        }
-
-                        counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
-                    })
-                });
-            }
-
-            root.querySelector('.sf-dump-search-input').focus();
-        } else if (27 === e.keyCode) {
-            /* ESC key */
-            e.preventDefault();
-            var search = root.querySelector('.sf-dump-search-wrapper');
-            if (search) {
-                root.removeChild(search);
-            }
-            resetHighlightedNodes(root);
-        }
-    });
-
     elt = root.getElementsByTagName('SAMP');
     len = elt.length;
     i = 0;
@@ -534,6 +417,135 @@ function isCtrlKey(e) {
         }
     }
 
+    if (doc.evaluate && Array.from && root.children.length > 1) {
+        root.setAttribute('tabindex', 0);
+
+        SearchState = function () {
+            this.nodes = [];
+            this.idx = 0;
+        };
+        SearchState.prototype = {
+            next: function () {
+                if (this.isEmpty()) {
+                    return this.current();
+                }
+                this.idx = this.idx < (this.nodes.length - 1) ? this.idx + 1 : this.idx;
+        
+                return this.current();
+            },
+            previous: function () {
+                if (this.isEmpty()) {
+                    return this.current();
+                }
+                this.idx = this.idx > 0 ? this.idx - 1 : this.idx;
+        
+                return this.current();
+            },
+            isEmpty: function () {
+                return 0 === this.count();
+            },
+            current: function () {
+                if (this.isEmpty()) {
+                    return null;
+                }
+                return this.nodes[this.idx];
+            },
+            reset: function () {
+                this.nodes = [];
+                this.idx = 0;
+            },
+            count: function () {
+                return this.nodes.length;
+            },
+        };
+
+        var search = doc.createElement('div');
+        search.className = 'sf-dump-search-wrapper sf-dump-search-hidden';
+        search.innerHTML = '
+            <input type="text" class="sf-dump-search-input">
+            <button type="button" class="sf-dump-search-input-previous" tabindex="-1">
+                <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"\/>
+                <\/svg>
+            <\/button>
+            <button type="button" class="sf-dump-search-input-next" tabindex="-1">
+                <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"\/>
+                <\/svg>
+            <\/button>
+            <span class="sf-dump-search-count">0 on 0<\/span>
+        ';
+        root.insertBefore(search, root.firstChild);
+
+        var state = new SearchState();
+        var searchInput = search.querySelector('.sf-dump-search-input');
+        var counter = search.querySelector('.sf-dump-search-count');
+        var searchInputTimer = 0;
+
+        addEventListener(searchInput, 'keydown', function (e) {
+            /* Don't intercept escape key in order to not start a search */
+            if (27 === e.keyCode) {
+                return;
+            }
+
+            clearTimeout(searchInputTimer);
+            searchInputTimer = setTimeout(function () {
+                state.reset();
+                collapseAll(root);
+                resetHighlightedNodes(root);
+                var searchQuery = e.target.value;
+                if ('' === searchQuery) {
+                    counter.textContent = '0 on 0';
+
+                    return;
+                }
+
+                var xpathResult = doc.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), ' + xpathString(searchQuery) + ')]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
+
+                while (node = xpathResult.iterateNext()) state.nodes.push(node);
+                var currentNode = state.current();
+                if (currentNode) {
+                    reveal(currentNode);
+                    highlight(root, currentNode, state.nodes);
+                }
+
+                counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+            }, 400);
+        });
+
+        Array.from(search.querySelectorAll('.sf-dump-search-input-next, .sf-dump-search-input-previous')).forEach(function (btn) {
+            addEventListener(btn, 'click', function (e) {
+                e.preventDefault();
+                var direction = -1 !== e.target.className.indexOf('next') ? 'next' : 'previous';
+                'next' === direction ? state.next() : state.previous();
+                searchInput.focus();
+                collapseAll(root);
+                var currentNode = state.current();
+                if (currentNode) {
+                    reveal(currentNode);
+                    highlight(root, currentNode, state.nodes);
+                }
+
+                counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+            })
+        });
+
+        addEventListener(root, 'keydown', function (e) {
+            if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
+                /* CTRL + F or CMD + F */
+                e.preventDefault();
+                search.className = search.className.replace(/\bsf-dump-search-hidden\b/, '');
+                searchInput.focus();
+            } else if (27 === e.keyCode && !/\bsf-dump-search-hidden\b/.test(search.className)) {
+                /* ESC key */
+                search.className += ' sf-dump-search-hidden';
+                e.preventDefault();
+                resetHighlightedNodes(root);
+                searchInput.value = '';
+            }
+        });
+    }
+
     if (0 >= options.maxStringLength) {
         return;
     }
@@ -589,6 +601,7 @@ function isCtrlKey(e) {
 }
 pre.sf-dump .sf-dump-ellipsis {
     display: inline-block;
+    overflow: visible;
     text-overflow: ellipsis;
     max-width: 5em;
     white-space: nowrap;
@@ -624,24 +637,30 @@ function isCtrlKey(e) {
     border: 1px solid #FFA500;
     border-radius: 3px;
 }
+.sf-dump-search-hidden {
+    display: none;
+}
 .sf-dump-search-wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    min-width: 180px;
+    float: right;
+    margin-top: -5px;
+    margin-right: -5px;
+    text-align: right;
+    max-width: 100%;
     font-size: 0;
     padding: 5px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 0 0 0 3px;
 }
 .sf-dump-search-wrapper > input.sf-dump-search-input {
-    min-width: 150px;
     color: #333;
     padding: 3px;
     height: 21px;
     border: 1px solid #bbb;
     box-sizing: border-box;
     font-size: 12px;
+    max-width: 150px;
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
 }
 .sf-dump-search-wrapper > .sf-dump-search-input-next,
 .sf-dump-search-wrapper > .sf-dump-search-input-previous {
@@ -651,18 +670,27 @@ function isCtrlKey(e) {
     border: 1px solid #bbb;
     border-left: none;
     height: 21px;
-    font-size: 12px;
+    font-size: 0;
     color: #333;
     vertical-align: top;
     box-sizing: border-box;
 }
+.sf-dump-search-wrapper > .sf-dump-search-input-next {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+.sf-dump-search-wrapper > .sf-dump-search-input-next > svg,
+.sf-dump-search-wrapper > .sf-dump-search-input-previous > svg {
+    pointer-events: none;
+    width: 12px;
+    height: 12px;
+}
 .sf-dump-search-wrapper > .sf-dump-search-count {
     font-size: 12px;
     color: #FFF;
     font-weight: normal;
     margin-top: 5px;
     display: block;
-    text-align: right;
 }
 EOHTML
         );

From 5018b0e8bac38ff29e2178bc01e2261f0dbff1bc Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@elao.com>
Date: Tue, 3 Jan 2017 16:20:38 +0100
Subject: [PATCH 04/10] New output

---
 .../views/Profiler/profiler.css.twig          | 13 ------
 .../Resources/views/Profiler/toolbar.css.twig |  4 ++
 .../Component/VarDumper/Dumper/HtmlDumper.php | 46 +++++++++----------
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
index e34ea7a88815d..e3a0168553224 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
@@ -934,19 +934,6 @@ table.logs .metadata {
     background: rgba(255, 255, 153, 0.5);
 }
 
-#collector-content .sf-dump-search-wrapper {
-    margin: 0;
-    background: rgba(210, 210, 210, 0.5);
-    border: 1px solid #dcdcdc;
-    border-top: none;
-    border-right: none;
-}
-#collector-content div.sf-dump .sf-dump-search-wrapper {
-    margin-top: -10px;
-    margin-right: -10px;
-}
-#collector-content .sf-dump-search-wrapper > .sf-dump-search-count { color: #000; }
-
 {# Search Results page
    ========================================================================= #}
 #search-results td {
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
index 294765d979ae7..d0f98b9ed7483 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -383,6 +383,10 @@
 .sf-toolbar-block-dump pre.sf-dump:last-child {
     margin-bottom: 0;
 }
+.sf-toolbar-block-dump pre.sf-dump span.sf-dump-search-count {
+    color: #333;
+    font-size: 12px;
+}
 .sf-toolbar-block-dump .sf-toolbar-info-piece {
     display: block;
 }
diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 078a076a5c3b0..3ea9dc321e3c1 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -463,6 +463,7 @@ function xpathString(str) {
         search.className = 'sf-dump-search-wrapper sf-dump-search-hidden';
         search.innerHTML = '
             <input type="text" class="sf-dump-search-input">
+            <span class="sf-dump-search-count">0 on 0<\/span>
             <button type="button" class="sf-dump-search-input-previous" tabindex="-1">
                 <svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
                     <path d="M1683 1331l-166 165q-19 19-45 19t-45-19l-531-531-531 531q-19 19-45 19t-45-19l-166-165q-19-19-19-45.5t19-45.5l742-741q19-19 45-19t45 19l742 741q19 19 19 45.5t-19 45.5z"\/>
@@ -473,7 +474,6 @@ function xpathString(str) {
                     <path d="M1683 808l-742 741q-19 19-45 19t-45-19l-742-741q-19-19-19-45.5t19-45.5l166-165q19-19 45-19t45 19l531 531 531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5z"\/>
                 <\/svg>
             <\/button>
-            <span class="sf-dump-search-count">0 on 0<\/span>
         ';
         root.insertBefore(search, root.firstChild);
 
@@ -625,7 +625,7 @@ function xpathString(str) {
 .sf-dump-str.sf-dump-highlight,
 .sf-dump-key.sf-dump-highlight {
     background: rgba(111, 172, 204, 0.3);
-    border: 1px solid #7da0b1;
+    border: 1px solid #7DA0B1;
     border-radius: 3px;
 }
 .sf-dump-public.sf-dump-highlight-active,
@@ -634,7 +634,7 @@ function xpathString(str) {
 .sf-dump-str.sf-dump-highlight-active,
 .sf-dump-key.sf-dump-highlight-active {
     background: rgba(253, 175, 0, 0.4);
-    border: 1px solid #FFA500;
+    border: 1px solid #ffa500;
     border-radius: 3px;
 }
 .sf-dump-search-hidden {
@@ -642,38 +642,35 @@ function xpathString(str) {
 }
 .sf-dump-search-wrapper {
     float: right;
-    margin-top: -5px;
-    margin-right: -5px;
-    text-align: right;
-    max-width: 100%;
     font-size: 0;
-    padding: 5px;
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 0 0 0 3px;
+}
+.sf-dump-search-wrapper > * {
+    vertical-align: top;
+    box-sizing: border-box;
+    height: 21px;
+    font-weight: normal;
+    border-radius: 0;
+    background: #FFF;
+    color: #757575;
+    border: 1px solid #BBB;
 }
 .sf-dump-search-wrapper > input.sf-dump-search-input {
-    color: #333;
     padding: 3px;
     height: 21px;
-    border: 1px solid #bbb;
-    box-sizing: border-box;
     font-size: 12px;
+    border-right: none;
     max-width: 150px;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
+    color: #000;
 }
 .sf-dump-search-wrapper > .sf-dump-search-input-next,
 .sf-dump-search-wrapper > .sf-dump-search-input-previous {
-    border-radius: 0;
-    background: white;
+    background: #F2F2F2;
     outline: none;
-    border: 1px solid #bbb;
     border-left: none;
-    height: 21px;
     font-size: 0;
-    color: #333;
-    vertical-align: top;
-    box-sizing: border-box;
+    line-height: 0;
 }
 .sf-dump-search-wrapper > .sf-dump-search-input-next {
     border-top-right-radius: 3px;
@@ -686,11 +683,12 @@ function xpathString(str) {
     height: 12px;
 }
 .sf-dump-search-wrapper > .sf-dump-search-count {
+    display: inline-block;
+    padding: 0 5px;
+    margin: 0;
+    border-left: none;
+    line-height: 21px;
     font-size: 12px;
-    color: #FFF;
-    font-weight: normal;
-    margin-top: 5px;
-    display: block;
 }
 EOHTML
         );

From d8bc70c09720cd9ad2fa8b3ffa36fff7d98c449e Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Tue, 3 Jan 2017 18:29:13 +0100
Subject: [PATCH 05/10] Factorize showing current node

---
 .../Component/VarDumper/Dumper/HtmlDumper.php | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 3ea9dc321e3c1..b32a67c51a4bc 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -459,6 +459,16 @@ function xpathString(str) {
             },
         };
 
+        function showCurrent(state)
+        {
+            var currentNode = state.current();
+            if (currentNode) {
+                reveal(currentNode);
+                highlight(root, currentNode, state.nodes);
+            }
+            counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+        }
+
         var search = doc.createElement('div');
         search.className = 'sf-dump-search-wrapper sf-dump-search-hidden';
         search.innerHTML = '
@@ -503,13 +513,8 @@ function xpathString(str) {
                 var xpathResult = doc.evaluate('//pre[@id="' + root.id + '"]//span[@class="sf-dump-str" or @class="sf-dump-key" or @class="sf-dump-public" or @class="sf-dump-protected" or @class="sf-dump-private"][contains(child::text(), ' + xpathString(searchQuery) + ')]', document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
 
                 while (node = xpathResult.iterateNext()) state.nodes.push(node);
-                var currentNode = state.current();
-                if (currentNode) {
-                    reveal(currentNode);
-                    highlight(root, currentNode, state.nodes);
-                }
-
-                counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                
+                showCurrent(state);
             }, 400);
         });
 
@@ -520,13 +525,7 @@ function xpathString(str) {
                 'next' === direction ? state.next() : state.previous();
                 searchInput.focus();
                 collapseAll(root);
-                var currentNode = state.current();
-                if (currentNode) {
-                    reveal(currentNode);
-                    highlight(root, currentNode, state.nodes);
-                }
-
-                counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' on ' + state.count();
+                showCurrent(state);
             })
         });
 

From 97e1cba5cbed578aa257d63634fa0c2c617b7688 Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Tue, 3 Jan 2017 18:54:17 +0100
Subject: [PATCH 06/10] Ensure min width

---
 src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index b32a67c51a4bc..b8250de72d4c5 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -642,6 +642,10 @@ function showCurrent(state)
 .sf-dump-search-wrapper {
     float: right;
     font-size: 0;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: scroll;
+    text-align: right;
 }
 .sf-dump-search-wrapper > * {
     vertical-align: top;
@@ -658,7 +662,7 @@ function showCurrent(state)
     height: 21px;
     font-size: 12px;
     border-right: none;
-    max-width: 150px;
+    width: 140px;
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
     color: #000;

From 9b571890dfdbbe165f410353c1183f3f7ee0f7c0 Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Tue, 3 Jan 2017 19:19:36 +0100
Subject: [PATCH 07/10] Add clearfix behavior on pre.sf-dump

---
 src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index b8250de72d4c5..661defceff84e 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -580,6 +580,13 @@ function showCurrent(state)
     white-space: pre;
     padding: 5px;
 }
+pre.sf-dump:after {
+   content: " ";
+   visibility: hidden;
+   display: block;
+   height: 0;
+   clear: both;
+}
 pre.sf-dump span {
     display: inline;
 }

From a162b97d6330031aa21c5a5feb6377b3f03a8843 Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Tue, 3 Jan 2017 19:27:13 +0100
Subject: [PATCH 08/10] Fix non empty content causes issue

and non-empty is only required for old browsers anyway
---
 src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 661defceff84e..628997c6324d9 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -581,7 +581,7 @@ function showCurrent(state)
     padding: 5px;
 }
 pre.sf-dump:after {
-   content: " ";
+   content: "";
    visibility: hidden;
    display: block;
    height: 0;

From 0ab898e81e6a60d86b0c128d0589dba25996580f Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Tue, 3 Jan 2017 19:37:15 +0100
Subject: [PATCH 09/10] Remove overflow scroll

causes focus issues and not that much handy
---
 src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 628997c6324d9..b890a429cbe46 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -651,7 +651,6 @@ function showCurrent(state)
     font-size: 0;
     white-space: nowrap;
     max-width: 100%;
-    overflow: scroll;
     text-align: right;
 }
 .sf-dump-search-wrapper > * {

From 8337ab5bf3d7619fb0d5a74f4e5f7227d06f034a Mon Sep 17 00:00:00 2001
From: Maxime Steinhausser <maxime.steinhausser@gmail.com>
Date: Thu, 5 Jan 2017 23:37:19 +0100
Subject: [PATCH 10/10] Minor simplification

---
 src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index b890a429cbe46..7606461a75393 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -221,13 +221,9 @@ function collapseAll(root) {
 }
 
 function reveal(node) {
-    var current = node;
-    var parents = [];
-    var previous = null;
-    var parent = null;
+    var previous, parents = [];
 
-    while ((parent = current.parentNode || {}) && (previous = parent.previousSibling) && 'A' === previous.tagName) {
-        current = current.parentNode;
+    while ((node = node.parentNode || {}) && (previous = node.previousSibling) && 'A' === previous.tagName) {
         parents.push(previous);
     }