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

nicolas-grekas · nicolas-grekas · commit 7db3e25efea1 · 2019-01-27T14:54:50.000+01:00
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  | Deprecations? | no | Tests pass? | yes  | Fixed tickets | #...  | License | MIT | Doc PR | symfony/symfony-docs#...  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 ------- 99d2893 [VarDumper] Fixed search bar
diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -500,12 +500,17 @@ function xpathHasClass(className) {
 
         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 @@ function showCurrent(state)
     display: block;
     white-space: pre;
     padding: 5px;
+    overflow: initial !important;
 }
 pre.sf-dump:after {
    content: "";
@@ -709,14 +715,16 @@ function showCurrent(state)
     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 @@ function showCurrent(state)
     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 {
