diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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 | #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
-------

58fe4315ae [VarDumper] Add search keyboard shortcuts
This commit is contained in:
Fabien Potencier 2017-01-15 08:39:59 -08:00
commit 1e10227ac1
1 changed files with 26 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
View File

@ -487,19 +487,20 @@ return function (root, x) {
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 @@ return function (root, x) {
});
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);
}
}
});
}