bug #29984 [VarDumper] Fixed search bar (ro0NL)

This PR was squashed before being merged into the 4.2 branch (closes #29984).

Discussion
----------

[VarDumper] Fixed search bar

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| BC breaks?    | no     <!-- see https://symfony.com/bc -->
| Deprecations? | no
| Tests pass?   | yes    <!-- please add some, will be required by reviewers -->
| Fixed tickets | #...   <!-- #-prefixed issue number(s), if any -->
| License       | MIT
| Doc PR        | symfony/symfony-docs#... <!-- required for new features -->

Continuation of #28854, replaces #29176

initial:

![image](https://user-images.githubusercontent.com/1047696/51747953-3c9e1400-20ab-11e9-913d-d60bd59ee2d9.png)

ctrl f:

![image](https://user-images.githubusercontent.com/1047696/51747973-4b84c680-20ab-11e9-8d07-e6128822fbb2.png)

scroll:

![image](https://user-images.githubusercontent.com/1047696/51747984-550e2e80-20ab-11e9-8b54-b24109d2280a.png)

tested in chrome+ff

cc @ogizanagi

ref https://caniuse.com/#feat=css-sticky

Commits
-------

99d2893b78 [VarDumper] Fixed search bar
This commit is contained in:
Nicolas Grekas 2019-01-27 14:54:50 +01:00
commit 7db3e25efe

View File

@ -500,12 +500,17 @@ return function (root, x) {
function showCurrent(state)
{
var currentNode = state.current();
var currentNode = state.current(), currentRect, searchRect;
if (currentNode) {
reveal(currentNode);
highlight(root, currentNode, state.nodes);
if ('scrollIntoView' in currentNode) {
currentNode.scrollIntoView();
currentNode.scrollIntoView(true);
currentRect = currentNode.getBoundingClientRect();
searchRect = search.getBoundingClientRect();
if (currentRect.top < (searchRect.top + searchRect.height)) {
window.scrollBy(0, -(searchRect.top + searchRect.height + 5));
}
}
}
counter.textContent = (state.isEmpty() ? 0 : state.idx + 1) + ' of ' + state.count();
@ -641,6 +646,7 @@ pre.sf-dump {
display: block;
white-space: pre;
padding: 5px;
overflow: initial !important;
}
pre.sf-dump:after {
content: "";
@ -709,14 +715,16 @@ pre.sf-dump code {
border-radius: 3px;
}
pre.sf-dump .sf-dump-search-hidden {
display: none;
display: none !important;
}
pre.sf-dump .sf-dump-search-wrapper {
float: right;
font-size: 0;
white-space: nowrap;
max-width: 100%;
text-align: right;
margin-bottom: 5px;
display: flex;
position: -webkit-sticky;
position: sticky;
top: 5px;
}
pre.sf-dump .sf-dump-search-wrapper > * {
vertical-align: top;
@ -733,10 +741,11 @@ pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input {
height: 21px;
font-size: 12px;
border-right: none;
width: 140px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
color: #000;
min-width: 15px;
width: 100%;
}
pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next,
pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous {