[WebProfilerBundle] implemented new web profiler layout

This commit is contained in:
hhamon 2011-02-28 16:54:42 +01:00 committed by Fabien Potencier
parent fcc66ad540
commit d37f52c743
26 changed files with 934 additions and 20 deletions

View File

@ -0,0 +1,144 @@
html,
body
{
width:100%;
min-height:100%;
_height:100%;
margin:0;
padding:0;
}
body
{
font: 1em "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;;
text-align:left;
background-color:#efefef;
}
body
{
/* Pour faire des hovers autre que sur des a */
/*behavior: url(/htc/csshover.htc);*/
/* Ca fonctionne avec ie6 et ce n'est pas accessible */
}
p
{
font-size:14px;
line-height:20px;
color:#868686;
padding-bottom:20px
}
strong
{
color:#313131;
}
a
{
color:#6c6159;
}
a img
{
border:none;
}
a:hover
{
text-decoration:underline;
}
/**
* Fixe le problème de padding
* et de border sur les boutons
* dans firefox
*/
button::-moz-focus-inner
{
padding: 0;
border: none;
}
/**
* Fixe le problème de padding
* proportionel au contenu des boutons
* dans Internet explorer
*/
button
{
overflow: visible;
width: auto;
}
/*
Corrige le bug d'affichage de bordure et de
décalage du contenu sous IE en mode XP
*/
button
{
background-color: transparent;
}
table,
th,
td,
tr
{
border-collapse:collapse;
border:1px solid #d0dbb3;
}
table
{
width:100%;
margin:10px 0 60px;
}
table th
{
font-weight:bold;
background-color:#f1f7e2;
}
table th,
table td
{
font-size:12px;
padding:8px 10px;
}
fieldset
{
border:none;
}
.clear
{
clear:both;
height:0px;
font-size:0;
line-height:0;
}
strong
{
font-weight:bold;
}
em
{
font-style:italic;
}
/* ------- DEBUT - Clear ------- */
.clear_fix:after
{
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear_fix
{
display:inline-block;
}
/* \*/ * html .clear_fix
{
height:1%;
}
.clear_fix
{
display:block;
}
/* ------- FIN - Clear ------- */

View File

@ -0,0 +1,128 @@
/*
Corrige le bug d'affichage de bordure et de
décalage du contenu sous IE en mode XP
*/
button
{
background-color: transparent;
}
/**
* début des styles commun à tous les boutons
*/
.shadow_extensible_button,
.extensible_button,
.non_extensible_button
{
-webkit-appearance: button-bevel;
float: left;
text-align: left;
display: block;
padding: 0;
margin: 0;
border: 0px solid #000000;
text-decoration: none;
cursor: pointer;
background-color: transparent;
white-space: nowrap;
}
.shadow_extensible_button:hover,
.extensible_button:hover,
.non_extensible_button:hover
{
text-decoration: none;
}
button span
{
position: relative;
}
button span span,
button span span span
{
position: static;
}
/**
* fin des styles commun à tous les boutons
*/
/**
* début des styles pour le bouton non extensible 01
*/
.non_extensible_button_01,
.non_extensible_button_02
{
display: inline-block;
text-align: center;
vertical-align: middle;
border: 0;
background: none;
}
.non_extensible_button_01 span
{
text-decoration: none;
display: block;
height: 28px;
float: left;
padding: 0 0 0 8px;
background: transparent url("/bundles/webprofiler/images/profiler/border_l.png") no-repeat top left;
}
.non_extensible_button_01 span span
{
padding: 0 8px 0 0;
background: transparent url("/bundles/webprofiler/images/profiler/border_r.png") right top no-repeat;
}
.non_extensible_button_01 span span span
{
padding: 0px 7px;
font: bold 11px Arial, Helvetica, sans-serif;
color: #6b6b6b;
line-height: 28px; /* Alignement vertical du texte */
background: transparent url("/bundles/webprofiler/images/profiler/btn_bg.png") repeat-x top left;
}
/*
* fin des styles pour le bouton non extensible 01
**/
/**
* début des styles pour le bouton non extensible 02
*/
.non_extensible_button_02
{
float:none;
}
.non_extensible_button_02 span
{
display: block;
height: 38px;
float: left;
padding: 0 0 0 8px;
background: transparent url("/bundles/webprofiler/images/profiler/border_l.png") left top no-repeat;
}
.non_extensible_button_02 span span
{
padding: 0 8px 0 0;
background: transparent url("/bundles/webprofiler/images/profiler/border_r.png") right top no-repeat;
}
.non_extensible_button_02 span span span
{
padding: 0px 16px;
font: bold 12px/38px Arial, Helvetica, sans-serif;
text-shadow:1px 1px 1px #415a08;
text-decoration:none;
color: #FFFFFF;
background: transparent url("/bundles/webprofiler/images/profiler/btn_bg.png") repeat-x top left;
}
/*
* fin des styles pour le bouton non extensible 02
**/

View File

@ -0,0 +1,143 @@
h2,
h3
{
font-weight:bold;
}
h1
{
font-family:Georgia, "Times New Roman", Times, serif;
color:#404040;
}
li
{
padding-bottom:10px;
}
.list_02
{
padding-bottom:14px;
}
.list_02 li
{
font-size:14px;
color:#868686;
padding-bottom:20px;
list-style-type:decimal;
margin-left:24px;
}
.box_screen,
.resume
{
-moz-border-radius:16px;
-webkit-border-radius:16px;
border-radius:16px;
margin-bottom:20px;
}
.box_screen
{
background-color:#FFFFFF;
border:1px solid #dfdfdf;
padding:50px;
}
.count
{
display:inline-block;
background-color:#aacd4e;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
padding:4px;
color:white;
margin-right:2px;
}
.list_01 li
{
padding-bottom:10px;
font-size:13px;
}
.list_01 li a,
.list_01 li a:hover
{
background:transparent url(/images/common/picto/blue_arrow.png) no-repeat right 6px;
padding-right:10px;
display:inline-block;
color:#0088CC;
text-decoration:none;
}
.list_01 li a:hover
{
text-decoration:underline;
}
.must_highlight
{
font-weight:normal;
color:#868686;
text-decoration:underline;
}
.box_code
{
border:1px solid #D3D3D3;
padding:10px;
min-height:240px;
_height:240px;
overflow:auto;
margin:10px 0 20px;
}
/* -- Debut Profiler -- */
.symfony_profiler
{
font-family:Arial, Helvetica, sans-serif;
}
.resume
{
background-color:#f6f6f6;
border:1px solid #dfdfdf;
padding:16px 28px;
}
.resume p
{
color:#313131;
font-size:12px;
}
.resume .date
{
display:block;
}
.symfony_profiler .box_screen
{
padding:0;
}
table th.value
{
width:450px;
background-color:#dfeeb8;
}
.symfony_profiler h2
{
font-size:16px;
color:#313131;
font-weight:bold;
padding-bottom:2px;
}
.box_columns_profiler p
{
color:#868686;
font-size:14px;
padding-bottom:20px;
}
.symfony_profiler .box_screen
{
padding: 0;
}
/* -- FIN Profiler -- */

View File

@ -0,0 +1,37 @@
.box_search
{
padding-top:20px;
}
.error_succes strong,
.error_succes,
p.error_succes
{
color:#759E1A;
}
.box_search .non_extensible_button
{
float:none;
}
.box_search label
{
line-height:28px;
vertical-align:middle;
}
.box_search .medium_txt
{
width:188px;
margin-right:10px;
font-size:12px;
}
.medium_txt
{
border:1px solid #dadada;
background:#FFFFFF url("/bundles/webprofiler/images/profiler/input_bg.gif") repeat-x left top;
padding:5px 6px;
color:#565656;
}
/* FIN style formulaire textarea page exception*/

View File

@ -0,0 +1,17 @@
.header
{
padding:30px 30px 20px 30px;
}
/* -- Debut Profiler -- */
.symfony_profiler .header h1,
.header_logo
{
float:left;
}
.box_search
{
float:right;
}
/* -- FIN Profiler -- */

View File

@ -0,0 +1,24 @@
#content
{
width:970px;
margin:0 auto;
}
.column_01,
.column_02
{
float:left
}
/* -- Debut Profiler -- */
.box_columns_profiler .column_01
{
width:250px;
}
.box_columns_profiler .column_02
{
width:620px;
padding:40px 0 40px 50px;
}
/* -- FIN Profiler -- */

View File

@ -0,0 +1,77 @@
.menu_profiler
{
border-right:1px solid #dfdfdf;
}
.menu_profiler li
{
border-bottom:1px solid #dfdfdf;
position:relative;
padding-bottom:0;
display:block;
}
.menu_profiler li a,
.menu_profiler li a .picto
{
display:block;
font-size:13px;
background-color:#f6f6f6;
text-transform:uppercase;
cursor:pointer;
}
.menu_profiler li a,
.menu_profiler li a:hover
{
color:#404040;
text-decoration:none;
display:block;
background-image:none;
}
.menu_profiler li.selected a,
.menu_profiler li a:hover
{
background:#d1d1d1 url(/images/common/backgrounds/bg_submenu.gif) repeat-x 0 0;
}
.menu_profiler a .picto
{
display:block;
padding:20px 20px 16px 65px;
min-height:24px;
_height:24px;
}
.menu_profiler .request a,
.menu_profiler .request .picto
{
-moz-border-radius:16px 0 0 0;
-webkit-border-radius:16px 0 0 0;
border-radius:16px 0 0 0;
}
.menu_profiler .request .picto
{
background:transparent url("/bundles/webprofiler/images/profiler/request.png") no-repeat 14px 14px;
}
.menu_profiler .exception .picto
{
background:transparent url("/bundles/webprofiler/images/profiler/exception.png") no-repeat 14px 14px;
}
.menu_profiler .events .picto
{
background:transparent url("/bundles/webprofiler/images/profiler/events.png") no-repeat 22px 14px;
}
.menu_profiler .logger .picto
{
background:transparent url("/bundles/webprofiler/images/profiler/logger.png") no-repeat 22px 14px;
}
.menu_profiler .db .picto
{
background:transparent url("/bundles/webprofiler/images/profiler/db.png") no-repeat 22px 14px;
}
.more_information
{
float:right;
position:relative;
top:-4px;
display:block;
width:70px;
text-align:right;
}

View File

@ -5,6 +5,7 @@ http://developer.yahoo.com/yui/license.html
version: 3.1.2
build: 56
*/
/*
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
.clearfix:after {
@ -19,15 +20,115 @@ html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr
* html .clearfix {height: 1%;}
.clearfix {display: block;}
html, body {
margin: 0;
min-height: 100%;
padding: 0;
width: 100%;
}
*/
html {
background: #fff;
}
body {
font: 11px Verdana, Arial, sans-serif;
color: #222;
background-color: #efefef;
font: 1em "Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
text-align: left;
color: #000;
}
h1 {
float: left;
color: #404040;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 100%;
font-weight: normal;
}
#content {
font-family: Arial,Helvetica,sans-serif;
margin: 0 auto;
width: 970px;
}
#content .clear_fix {
display: block;
}
.header {
padding: 30px 30px 20px;
}
.search {
padding-top: 20px;
float: right;
}
.search label {
line-height: 28px;
vertical-align: middle;
}
.search input {
font-size: 12px;
margin-right: 10px;
width: 188px;
background: url("/bundles/webprofiler/images/profiler/input_bg.gif") repeat-x scroll left top #fff;
border: 1px solid #dadada;
color: #565656;
padding: 5px 6px;
}
.search button {
overflow: visible;
width: auto;
float: none;
background: none repeat scroll 0 0 transparent;
border: 0 none;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
margin: 0;
padding: 0;
text-decoration: none;
white-space: nowrap;
}
.search button span {
position: relative;
background: url("/bundles/webprofiler/images/profiler/border_l.png") no-repeat scroll left top transparent;
display: block;
float: left;
height: 28px;
padding: 0 0 0 8px;
text-decoration: none;
}
.search button span span {
background: url("/bundles/webprofiler/images/profiler/border_r.png") no-repeat scroll right top transparent;
padding: 0 8px 0 0;
}
.search button span span span {
background: url("/bundles/webprofiler/images/profiler/btn_bg.png") repeat-x scroll left top transparent;
color: #6B6B6B;
font: bold 11px/28px Arial,Helvetica,sans-serif;
padding: 0 7px;
}
.resume {
margin: 0;
background-color: #f6f6f6;
border: 1px solid #dfdfdf;
padding: 16px 28px;
-moz-border-radius: 16px 16px 16px 16px;
border-radius:16px;
margin-bottom: 20px;
}
/*
strong {
font-weight: bold;
}
@ -71,6 +172,12 @@ img {
vertical-align: middle;
}
#content
{
width:970px;
margin:0 auto;
}
.header {
padding: 10px;
background: #333;
@ -203,3 +310,4 @@ td.main, td.menu {
border: 0;
vertical-align: top;
}
*/

View File

@ -0,0 +1,135 @@
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html
{
color:#000;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td
{
margin:0;
padding:0;
}
table
{
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img
{
border:0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var
{
font-style:normal;
font-weight:normal;
}
li
{
list-style:none;
}
caption,
th
{
text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6
{
font-size:100%;
font-weight:normal;
}
q:before,
q:after {
content:'';
}
abbr,
acronym
{
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup
{
vertical-align:text-top;
}
sub
{
vertical-align:text-bottom;
}
input,
textarea,
select
{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select
{
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend
{
color:#000;
}
del,
ins
{
text-decoration:none;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 366 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 389 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 537 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 737 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 571 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -1,8 +1,9 @@
{% extends 'WebProfilerBundle:Profiler:layout.html.twig' %}
{% block menu %}
<img style="margin: 0 5px 0 0; vertical-align: middle; width: 32px" width="32" height="32" alt="Events" src="{{ asset('bundles/webprofiler/images/events.png') }}" />
Events
<span class="picto png_fix">
<strong>Events</strong>
</span>
{% endblock %}
{% block panel %}

View File

@ -5,11 +5,14 @@
{% endblock %}
{% block menu %}
{% if collector.hasexception %}
<span class="count">1</span>
{% endif %}
<img style="margin: 0 5px 0 0; vertical-align: middle; width: 32px" width="32" height="32" alt="Exception" src="{{ asset('bundles/webprofiler/images/exception.png') }}" />
Exception
<span class="picto png_fix">
<strong>Exception</strong>
<span class="more_information">
{% if collector.hasexception %}
<span class="count">1</span>
{% endif %}
</span>
</span>
{% endblock %}
{% block panel %}

View File

@ -8,9 +8,12 @@
{% endblock %}
{% block menu %}
<span class="count">{{ collector.counterrors }}</span>
<img style="margin: 0 5px 0 0; vertical-align: middle; width: 32px" width="32" height="32" alt="Logs" src="{{ asset('bundles/webprofiler/images/logger.png') }}" />
Logs
<span class="picto png_fix">
<strong>Logs</strong>
<span class="more_information">
<span class="count">{{ collector.counterrors }}</span>
</span>
</span>
{% endblock %}
{% block panel %}

View File

@ -14,8 +14,9 @@
{% endblock %}
{% block menu %}
<img style="margin: 0 5px 0 0; vertical-align: middle; width: 32px" width="32" height="32" alt="Request" src="{{ asset('bundles/webprofiler/images/request.png') }}" />
Request
<span class="picto png_fix">
<strong>Request</strong>
</span>
{% endblock %}
{% block panel %}
@ -24,7 +25,9 @@ Request
{% if collector.requestquery.all|length %}
{% include 'WebProfilerBundle:Profiler:bag.html.twig' with { 'bag': collector.requestquery } only %}
{% else %}
<em>No GET parameters</em>
<p>
<em>No GET parameters</em>
</p>
{% endif %}
<h2>Request POST Parameters</h2>
@ -32,7 +35,9 @@ Request
{% if collector.requestrequest.all|length %}
{% include 'WebProfilerBundle:Profiler:bag.html.twig' with { 'bag': collector.requestrequest } only %}
{% else %}
<em>No POST parameters</em>
<p>
<em>No POST parameters</em>
</p>
{% endif %}
<h2>Request Attributes</h2>
@ -40,7 +45,9 @@ Request
{% if collector.requestattributes.all|length %}
{% include 'WebProfilerBundle:Profiler:bag.html.twig' with { 'bag': collector.requestattributes } only %}
{% else %}
<em>No attributes</em>
<p>
<em>No attributes</em>
</p>
{% endif %}
<h2>Request Cookies</h2>
@ -48,7 +55,9 @@ Request
{% if collector.requestcookies.all|length %}
{% include 'WebProfilerBundle:Profiler:bag.html.twig' with { 'bag': collector.requestcookies } only %}
{% else %}
<em>No cookies</em>
<p>
<em>No cookies</em>
</p>
{% endif %}
<h2>Requests Headers</h2>

View File

@ -3,7 +3,17 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{% block title 'Profiler' %}</title>
<link href="{{ asset('bundles/webprofiler/css/profiler.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/reset.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/base.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/header.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/menu.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/layout.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/common.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/forms.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{ asset('bundles/webprofiler/css/button.css') }}" rel="stylesheet" type="text/css" media="screen" />
{#<link href="{{ asset('bundles/webprofiler/css/profiler.css') }}" rel="stylesheet" type="text/css" media="screen" /> #}
<link href="{{ asset('bundles/webprofiler/css/toolbar.css') }}" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="{{ asset('bundles/webprofiler/favicon.ico') }}" />
{% block head '' %}

View File

@ -1,7 +1,81 @@
{% extends 'WebProfilerBundle:Profiler:base.html.twig' %}
{% block body %}
<div class="header">
{% render 'WebProfilerBundle:Profiler:toolbar' with { 'token': token, 'position': 'normal' } %}
<div id="content" class="symfony_profiler">
<div class="header clear_fix">
<h1>
<a href="#">
<img src="{{ asset('bundles/webprofiler/images/profiler/logo_symfony_profiler.gif') }}" alt="Symfony profiler"/>
</a>
</h1>
<div class="box_search">
<form method="post" action="http://symfony.com/search">
<div class="form_row">
<label for="search_id">
<img src="{{ asset('bundles/webprofiler/images/profiler/grey_magnifier.png') }}" alt="Search on Symfony website"/>
</label>
<input name="search_name" id="search_id" type="text" placeholder="Search on Symfony website" class="medium_txt"/>
<button type="submit" class="non_extensible_button non_extensible_button_01">
<span class="border_l png_fix">
<span class="border_r png_fix">
<span class="btn_bg">OK</span>
</span>
</span>
</button>
</div>
</form>
</div>
</div>
<div class="resume">
<p>
<strong><a href="{{ profiler.url }}">{{ profiler.url }}</a></strong>
<span class="date">
<strong>by {{ profiler.ip }}</strong> at <strong>{{ profiler.time|date('r') }}</strong>
</span>
</p>
</div>
<div class="box_screen">
<div class="box_columns_profiler clear_fix">
<div class="column_01">
{% if templates is defined %}
<ul class="menu_profiler">
{% for name, template in templates %}
{% set menu %}{{ template.renderBlock('menu', { 'collector': profiler.get(name)}) }}{% endset %}
{% if menu != '' %}
<li class="{{ name }}{% if name == panel %} selected{% endif %}">
<a href="{{ path('_profiler_panel', { 'token': token, 'panel': name }) }}">{{ menu|raw }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{# render 'WebProfilerBundle:Profiler:searchBar' with { 'token': token } #}
{# include 'WebProfilerBundle:Profiler:admin.html.twig' with { 'token': token } only #}
</div>
<div class="column_02">
{% block panel '' %}
</div>
</div>
</div>
</div>
{#<div class="header">
<h1>
<img alt="" src="{{ asset('bundles/webprofiler/images/profiler.png') }}" />
Symfony Profiler
@ -39,4 +113,5 @@
</div>
</td></tr>
</table>
#}
{% endblock %}