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:
commit
7db3e25efe
@ -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 {
|
||||
|
Reference in New Issue
Block a user