feature symfony#21238 [VarDumper] Add search keyboard shortcuts (ogizanagi)

This PR was merged into the 3.3-dev branch.

Discussion
----------

[VarDumper] Add search keyboard shortcuts

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | symfony#21174
| License       | MIT
| Doc PR        | Worth to mention?

So, this PR simply adds the following shortcuts to navigate between matches, based on main browsers conventions:

- <kbd>CTRL/CMD</kbd> + (<kbd>shift</kbd>* +) <kbd>G</kbd>
- (<kbd>shift</kbd>* +) <kbd>ENTER</kbd>
- (<kbd>shift</kbd>* +) <kbd>F3</kbd>

_* <kbd>shift</kbd> allows to go backwards_

At first, I wanted to add a help box somewhere, but:
- I don't know where to place it. As the var dumper is now used everywhere in the profiler, it should not be importune and should work in narrowed places.
- We use those shortcuts in order to replicate the main softwares/browsers behavior. So we may not need it at all.

This PR also fixes a minor issue where pressing a key not changing the input would have restarted the search query.

Commits
-------

58fe431 [VarDumper] Add search keyboard shortcuts

Author: fabpot

src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php

@@ -487,19 +487,20 @@ function showCurrent(state)
         var searchInput = search.querySelector('.sf-dump-search-input');
         var counter = search.querySelector('.sf-dump-search-count');
         var searchInputTimer = 0;
+        var previousSearchQuery = '';
 
-        addEventListener(searchInput, 'keydown', function (e) {
-            /* Don't intercept escape key in order to not start a search */
-            if (27 === e.keyCode) {
+        addEventListener(searchInput, 'keyup', function (e) {
+            var searchQuery = e.target.value;
+            /* Don't perform anything if the pressed key didn't change the query */
+            if (searchQuery === previousSearchQuery) {
                 return;
             }
-
+            previousSearchQuery = searchQuery;
             clearTimeout(searchInputTimer);
             searchInputTimer = setTimeout(function () {
                 state.reset();
                 collapseAll(root);
                 resetHighlightedNodes(root);
-                var searchQuery = e.target.value;
                 if ('' === searchQuery) {
                     counter.textContent = '0 of 0';
 
@@ -526,17 +527,29 @@ function showCurrent(state)
         });
 
         addEventListener(root, 'keydown', function (e) {
-            if (114 === e.keyCode || (isCtrlKey(e) && 70 === e.keyCode)) {
-                /* CTRL + F or CMD + F */
+            var isSearchActive = !/\bsf-dump-search-hidden\b/.test(search.className);
+            if ((114 === e.keyCode && !isSearchActive) || (isCtrlKey(e) && 70 === e.keyCode)) {
+                /* F3 or CMD/CTRL + 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 = '';
+            } else if (isSearchActive) {
+                if (27 === e.keyCode) {
+                    /* ESC key */
+                    search.className += ' sf-dump-search-hidden';
+                    e.preventDefault();
+                    resetHighlightedNodes(root);
+                    searchInput.value = '';
+                } else if (
+                    (isCtrlKey(e) && 71 === e.keyCode) /* CMD/CTRL + G */
+                    || 13 === e.keyCode /* Enter */
+                    || 114 === e.keyCode /* F3 */
+                ) {
+                    e.preventDefault();
+                    e.shiftKey ? state.previous() : state.next();
+                    collapseAll(root);
+                    showCurrent(state);
+                }
             }
         });
     }