diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
This PR was squashed before being merged into the 2.8 branch (closes #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
This commit is contained in:
Fabien Potencier 2015-12-22 16:06:00 +01:00
commit 05273449cb
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

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

@ -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;
}