bug symfony#12649 [Hackday] [Toolbar] Fix info position and icons on …

…small screens (stefanosala)

This PR was merged into the 2.6 branch.

Discussion
----------

[Hackday] [Toolbar] Fix info position and icons on small screens

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| BC breaks?    | no
| Deprecations? | no
| Tests pass?   | yes
| Fixed tickets | symfony#12582
| License       | MIT
| Doc PR        | -

I changed a bit the order of profiles, IMO the dump goes closer to request data. Then I tweaked a bit the toolbar to show more icons even on smaller screen. I tested everything with Chrome and IE9 and it seems to work smoothly.

Here are some explanatory screenshots:

![](http://cl.ly/image/3E2e360Y0a15/Screen%20Shot%202014-11-29%20at%2011.56.17.png)
![](http://cl.ly/image/1d073v2v2U2J/Screen%20Shot%202014-11-29%20at%2011.56.42.png)

Commits
-------

838857c [Toolbar] Reset right and left .sf-toolbar-info values needed for window resize
23c0ddc [Toolbar] Handle info position via javascript Place info div to not float out of the window
7a8582e [Toolbar] Display all icons, even on two lines for small screens

Resources/views/Profiler/toolbar.css.twig

@@ -30,7 +30,6 @@
     background-color: #f7f7f7;
     left: 0;
     right: 0;
-    height: 38px;
     margin: 0;
     padding: 0 40px 0 0;
     z-index: 6000000;
@@ -88,6 +87,7 @@
     color: #2f2f2f;
     display: block;
     min-height: 28px;
+    border-bottom: 1px solid #e4e4e4;
     border-right: 1px solid #e4e4e4;
     padding: 0;
     float: left;
@@ -150,10 +150,6 @@
     border-radius: 4px 4px 0 0;
 }
 
-.sf-toolbarreset > div:last-of-type .sf-toolbar-info {
-    right: -1px;
-}
-
 .sf-toolbar-block .sf-toolbar-info:empty {
     visibility: hidden;
 }

Resources/views/Profiler/toolbar_js.html.twig

@@ -31,6 +31,30 @@
                 }
 
                 Sfjs.renderAjaxRequests();
+
+                /* Handle toolbar-info position */
+                var toolbarBlocks = document.getElementsByClassName('sf-toolbar-block');
+                for (var i = 0; i < toolbarBlocks.length; i += 1) {
+                    toolbarBlocks[i].onmouseover = function () {
+                        var toolbarInfo = this.getElementsByClassName('sf-toolbar-info')[0];
+                        var pageWidth = document.body.clientWidth;
+                        var elementWidth = toolbarInfo.offsetWidth;
+                        var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
+                        var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
+
+                        /* Reset right and left value, useful on window resize */
+                        toolbarInfo.style.right = '';
+                        toolbarInfo.style.left = '';
+
+                        if (leftValue > 0 && rightValue > 0) {
+                            toolbarInfo.style.right = (rightValue * -1) + 'px';
+                        } else if (leftValue < 0) {
+                            toolbarInfo.style.left = 0;
+                        } else {
+                            toolbarInfo.style.right = '-1px';
+                        }
+                    };
+                }
             },
             function(xhr) {
                 if (xhr.status !== 0) {