bug #22859 [Profiler][VarDumper] Fix searchbar css when in toolbar (o…

…gizanagi)

This PR was merged into the 3.3 branch.

Discussion
----------

[Profiler][VarDumper] Fix searchbar css when in toolbar

| Q             | A
| ------------- | ---
| Branch?       | 3.3
| Bug fix?      | yes
| New feature?  | no <!-- don't forget updating src/**/CHANGELOG.md files -->
| BC breaks?    | no
| Deprecations? | no <!-- don't forget updating UPGRADE-*.md files -->
| Tests pass?   | yes
| Fixed tickets | N/A
| License       | MIT
| Doc PR        | N/A

Because css is hard (`.sf-toolbarreset *` has precedence since 4acec89 moved the `toolbar.css.twig` inclusion from up to bottom):

|Before|After|
|--|--|
|<img width="291" alt="screenshot 2017-05-22 a 19 36 06" src="https://cloud.githubusercontent.com/assets/2211145/26321182/208780c0-3f26-11e7-89bb-7aa64f17c7b5.PNG">|<img width="280" alt="screenshot 2017-05-22 a 19 36 27" src="https://cloud.githubusercontent.com/assets/2211145/26321188/248ed0ce-3f26-11e7-852a-40968fba2e9f.PNG">|

Commits
-------

98b3002 [Profiler][VarDumper] Fix searchbar css when in toolbar

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig

@@ -382,6 +382,9 @@
 .sf-toolbar-block-dump pre.sf-dump:last-child {
     margin-bottom: 0;
 }
+.sf-toolbar-block-dump pre.sf-dump .sf-dump-search-wrapper {
+    margin-bottom: 5px;
+}
 .sf-toolbar-block-dump pre.sf-dump span.sf-dump-search-count {
     color: #333;
     font-size: 12px;

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

@@ -655,17 +655,17 @@ function showCurrent(state)
     border: 1px solid #ffa500;
     border-radius: 3px;
 }
-.sf-dump-search-hidden {
+pre.sf-dump .sf-dump-search-hidden {
     display: none;
 }
-.sf-dump-search-wrapper {
+pre.sf-dump .sf-dump-search-wrapper {
     float: right;
     font-size: 0;
     white-space: nowrap;
     max-width: 100%;
     text-align: right;
 }
-.sf-dump-search-wrapper > * {
+pre.sf-dump .sf-dump-search-wrapper > * {
     vertical-align: top;
     box-sizing: border-box;
     height: 21px;
@@ -675,7 +675,7 @@ function showCurrent(state)
     color: #757575;
     border: 1px solid #BBB;
 }
-.sf-dump-search-wrapper > input.sf-dump-search-input {
+pre.sf-dump .sf-dump-search-wrapper > input.sf-dump-search-input {
     padding: 3px;
     height: 21px;
     font-size: 12px;
@@ -685,25 +685,25 @@ function showCurrent(state)
     border-bottom-left-radius: 3px;
     color: #000;
 }
-.sf-dump-search-wrapper > .sf-dump-search-input-next,
-.sf-dump-search-wrapper > .sf-dump-search-input-previous {
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next,
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous {
     background: #F2F2F2;
     outline: none;
     border-left: none;
     font-size: 0;
     line-height: 0;
 }
-.sf-dump-search-wrapper > .sf-dump-search-input-next {
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next {
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 }
-.sf-dump-search-wrapper > .sf-dump-search-input-next > svg,
-.sf-dump-search-wrapper > .sf-dump-search-input-previous > svg {
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-next > svg,
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-input-previous > svg {
     pointer-events: none;
     width: 12px;
     height: 12px;
 }
-.sf-dump-search-wrapper > .sf-dump-search-count {
+pre.sf-dump .sf-dump-search-wrapper > .sf-dump-search-count {
     display: inline-block;
     padding: 0 5px;
     margin: 0;