bug symfony#17109 Improved the design of the web debug toolbar (javiereguiluz)

This PR was squashed before being merged into the 2.8 branch (closes symfony#17109).

Discussion
----------

Improved the design of the web debug toolbar

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

This PR contains three little improvements:

## 1) Icon size

Somehow, the size of the icons wasn't limited properly. This makes them appear too big and unaligns text vertically:

### Before

![before_icon_size](https://cloud.githubusercontent.com/assets/73419/11956693/5dce6432-a8bc-11e5-9726-958bbf95e945.png)

### After

![after_icon_size](https://cloud.githubusercontent.com/assets/73419/11956696/5faba396-a8bc-11e5-8453-6d9601803335.png)

## 2) Status blocks

It's very common to have single-digit and double-digit status blocks in some panels. Now they show a different width:

![before_status_1](https://cloud.githubusercontent.com/assets/73419/11956743/affd180c-a8bc-11e5-8c53-044b60dad53e.png) ![before_status_2](https://cloud.githubusercontent.com/assets/73419/11956744/b0ed99c6-a8bc-11e5-83d6-7a926e780d14.png)

Now we set a minimum-width that looks good for single and double digit values:

![after_status_1](https://cloud.githubusercontent.com/assets/73419/11956766/dff29758-a8bc-11e5-9eea-f6204acb2794.png) ![after_status_2](https://cloud.githubusercontent.com/assets/73419/11956768/e1af5f68-a8bc-11e5-8d07-e6219a667529.png)

Although this solution doesn't solve the case when some block displays three digits, I think we can safely ignore that edge case.

## 3) Colors

The green/yellow/red colors of the toolbar were different from the green/yellow/red colors of the profiler. The reason is that we designed the toolbar first and separately from the profiler. The second (minor) issue is that green and yellow didn't have enough contrast (they didn't pass the WCAG accessibility check).

So I propose to slightly change the green and yellow colors and to use the same colors in the toolbar and the profiler.

### Toolbar Before

![before_colors](https://cloud.githubusercontent.com/assets/73419/11956842/83e1c618-a8bd-11e5-9ac0-b97de8e70ec3.png)

### Toolbar After

![after_colors](https://cloud.githubusercontent.com/assets/73419/11956844/86759af8-a8bd-11e5-83c5-7ce2f74d4b88.png)

### Profiler Before

![before_profiler_success](https://cloud.githubusercontent.com/assets/73419/11956864/c21889a8-a8bd-11e5-95ee-8d6103b6a26c.png)

![before_profiler_warning](https://cloud.githubusercontent.com/assets/73419/11956866/c3240e62-a8bd-11e5-8797-de3481dd40a0.png)

![before_profiler_error](https://cloud.githubusercontent.com/assets/73419/11956867/c4d7b25e-a8bd-11e5-9e7a-6519b34009de.png)

### Profiler After

![after_profiler_success](https://cloud.githubusercontent.com/assets/73419/11956887/ea5ceabc-a8bd-11e5-8373-492e838148ea.png)

![after_profiler_warning](https://cloud.githubusercontent.com/assets/73419/11956888/eb3bf284-a8bd-11e5-8be6-93a91ed2ae0e.png)

![after_profiler_error](https://cloud.githubusercontent.com/assets/73419/11956889/ed057b4e-a8bd-11e5-9533-a807d8547843.png)

The new colors pass the accessibility requirements:

![color_accessibility_success](https://cloud.githubusercontent.com/assets/73419/11956894/03ccbd60-a8be-11e5-96d2-727bb9b62dc7.png)

![color_accessibility_warning](https://cloud.githubusercontent.com/assets/73419/11956896/04d893f0-a8be-11e5-8c18-9515f624974a.png)

![color_accessibility_error](https://cloud.githubusercontent.com/assets/73419/11956899/06cbc524-a8be-11e5-8622-e2b60da1c8b2.png)

Commits
-------

9859125 Improved the design of the web debug toolbar

Author: fabpot

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

@@ -7,6 +7,9 @@
     'subtle_border_and_shadow': 'background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2);'
 } %}
 
+{# when updating any of these colors, do the same in toolbar.css.twig #}
+{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
+
 {# Normalization
    (normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
    ========================================================================= #}
@@ -232,9 +235,9 @@ table tbody ul {
     padding: 3px 7px;
     white-space: nowrap;
 }
-.label.status-success { background: #5E976E; color: #FFF; }
-.label.status-warning { background: #BC8034; color: #FFF; }
-.label.status-error   { background: #B0413E; color: #FFF; }
+.label.status-success { background: {{ colors.success|raw }}; color: #FFF; }
+.label.status-warning { background: {{ colors.warning|raw }}; color: #FFF; }
+.label.status-error   { background: {{ colors.error|raw }}; color: #FFF; }
 
 {# Metrics
    ------------------------------------------------------------------------- #}
@@ -341,11 +344,11 @@ tr.status-warning td {
     border-top: 1px solid #FAFAFA;
 }
 
-.status-warning .colored  {
-    color: #BC8034;
+.status-warning .colored {
+    color: {{ colors.warning|raw }};
 }
 .status-error .colored  {
-    color: #B0413E;
+    color: {{ colors.error|raw }};
 }
 
 {# Syntax highlighting
@@ -469,9 +472,9 @@ tr.status-warning td {
     text-decoration: underline;
 }
 
-#summary .status-success { background: #5E976E; }
-#summary .status-warning { background: #BC8034; }
-#summary .status-error   { background: #B0413E; }
+#summary .status-success { background: {{ colors.success|raw }}; }
+#summary .status-warning { background: {{ colors.warning|raw }}; }
+#summary .status-error   { background: {{ colors.error|raw }};   }
 
 #summary .status-success h2,
 #summary .status-success h2 a,
@@ -670,10 +673,10 @@ tr.status-warning td {
 }
 
 #menu-profiler .label-status-warning .count {
-    background: #BC8034;
+    background: {{ colors.warning|raw }};
 }
 #menu-profiler .label-status-error .count {
-    background: #B0413E;
+    background: {{ colors.error|raw }};
 }
 
 {# Timeline panel

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

@@ -1,3 +1,6 @@
+{# when updating any of these colors, do the same in profiler.css.twig #}
+{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
+
 .sf-minitoolbar {
     background-color: #222;
     border-top-left-radius: 4px;
@@ -46,8 +49,8 @@
 }
 .sf-toolbarreset svg,
 .sf-toolbarreset img {
-    max-height: 24px;
-    max-width: 24px;
+    max-height: 20px;
+    max-width: 20px;
 }
 
 .sf-toolbarreset .hide-button {
@@ -180,30 +183,31 @@
     padding: 3px 6px;
     margin-bottom: 2px;
     vertical-align: middle;
-    min-width: 6px;
+    min-width: 15px;
     min-height: 13px;
+    text-align: center;
 }
 
 .sf-toolbar-block .sf-toolbar-status-green {
-    background-color: rgba(117, 158, 43, 0.8);
+    background-color: {{ colors.success|raw }};
 }
 .sf-toolbar-block .sf-toolbar-status-red {
-    background-color: rgba(200, 43, 43, 0.8);
+    background-color: {{ colors.error|raw }};
 }
 .sf-toolbar-block .sf-toolbar-status-yellow {
-    background-color: rgb(189, 132, 0);
+    background-color: {{ colors.warning|raw }};
 }
 
 .sf-toolbar-block.sf-toolbar-status-green {
-    background-color: rgba(117, 158, 43, 0.8);
+    background-color: {{ colors.success|raw }};
     color: #FFF;
 }
 .sf-toolbar-block.sf-toolbar-status-red {
-    background-color: rgba(200, 43, 43, 0.8);
+    background-color: {{ colors.error|raw }};
     color: #FFF;
 }
 .sf-toolbar-block.sf-toolbar-status-yellow {
-    background-color: rgb(189, 132, 0);
+    background-color: {{ colors.warning|raw }};
     color: #FFF;
 }