mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-01-17 05:18:32 +01:00
Code Issues Releases Wiki Activity

added prefixes on all css classes (fixed #35)

Browse Source 
using images for close and open icons instead of font-awesome
using time instead of datetime in dataset selection box
This commit is contained in:
maximebf 2013-10-06 17:18:09 -04:00
parent 84986b1588
commit 719c5e0062
8 changed files with 207 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
CHANGELOG.md
View File

@ -1,5 +1,12 @@
# Changelog # Changelog
2013-10-06:
- prefixed all css classes
- new PhpDebugBar.utils.csscls() function
- changed datetime to time in datasets selector
- close and open buttons now uses images instead of font-awesome
2013-09-23: 2013-09-23:
- send the request id in headers and use the open handler to retreive the dataset - send the request id in headers and use the open handler to retreive the dataset

23
src/DebugBar/Resources/debugbar.css
View File

@ -49,7 +49,7 @@ a.phpdebugbar-minimize-btn {
border-right: 1px solid #ddd; border-right: 1px solid #ddd;
} }
a.phpdebugbar-tab.active { a.phpdebugbar-tab.phpdebugbar-active {
background: #ccc; background: #ccc;
color: #444; color: #444;
background-image: linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%); background-image: linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
@ -59,7 +59,7 @@ a.phpdebugbar-tab.active {
background-image: -ms-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%); background-image: -ms-linear-gradient(bottom, rgb(173,173,173) 41%, rgb(209,209,209) 71%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(173,173,173)), color-stop(0.71, rgb(209,209,209))); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.41, rgb(173,173,173)), color-stop(0.71, rgb(209,209,209)));
} }
a.phpdebugbar-tab span.badge { a.phpdebugbar-tab span.phpdebugbar-badge {
display: none; display: none;
margin-left: 5px; margin-left: 5px;
font-size: 11px; font-size: 11px;
@ -70,22 +70,31 @@ a.phpdebugbar-tab.active {
font-weight: normal; font-weight: normal;
text-shadow: none; text-shadow: none;
} }
a.phpdebugbar-tab span.badge.important { a.phpdebugbar-tab span.phpdebugbar-badge.phpdebugbar-important {
background: #ed6868; background: #ed6868;
color: white; color: white;
} }
a.phpdebugbar-minimize-btn { a.phpdebugbar-minimize-btn {
display: none; display: none;
background: url(icons.png) no-repeat 10px 7px;
width: 16px;
height: 16px;
}
a.phpdebugbar-open-btn {
background: url(icons.png) no-repeat -14px 8px;
width: 16px;
height: 16px;
} }
.phpdebugbar-indicator { .phpdebugbar-indicator {
position: relative; position: relative;
} }
.phpdebugbar-indicator span.text { .phpdebugbar-indicator span.phpdebugbar-text {
margin-left: 5px; margin-left: 5px;
} }
.phpdebugbar-indicator span.tooltip { .phpdebugbar-indicator span.phpdebugbar-tooltip {
display: none; display: none;
position: absolute; position: absolute;
top: -30px; top: -30px;
@ -97,7 +106,7 @@ a.phpdebugbar-minimize-btn {
padding: 2px 3px; padding: 2px 3px;
z-index: 1000; z-index: 1000;
} }
.phpdebugbar-indicator:hover span.tooltip:not(.disabled) { .phpdebugbar-indicator:hover span.phpdebugbar-tooltip:not(.phpdebugbar-disabled) {
display: block; display: block;
} }
@ -137,6 +146,6 @@ div.phpdebugbar-panel {
overflow: auto; overflow: auto;
width: 100%; width: 100%;
} }
div.phpdebugbar-panel.active { div.phpdebugbar-panel.phpdebugbar-active {
display: block; display: block;
} }

83
src/DebugBar/Resources/debugbar.js
View File

@ -14,6 +14,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
}; };
} }
if (typeof(PhpDebugBar.utils) == 'undefined') {
PhpDebugBar.utils = {};
}
/** /**
* Returns the value from an object property. * Returns the value from an object property.
* Using dots in the key, it is possible to retrieve nested property values * Using dots in the key, it is possible to retrieve nested property values
@ -23,7 +27,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @param {Object} default_value * @param {Object} default_value
* @return {Object} * @return {Object}
*/ */
function getDictValue(dict, key, default_value) { var getDictValue = PhpDebugBar.utils.getDictValue = function(dict, key, default_value) {
var d = dict, parts = key.split('.'); var d = dict, parts = key.split('.');
for (var i = 0; i < parts.length; i++) { for (var i = 0; i < parts.length; i++) {
if (!d[parts[i]]) { if (!d[parts[i]]) {
@ -40,7 +44,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @param {Object} obj * @param {Object} obj
* @return {Integer} * @return {Integer}
*/ */
function getObjectSize(obj) { var getObjectSize = PhpDebugBar.utils.getObjectSize = function(obj) {
if (Object.keys) { if (Object.keys) {
return Object.keys(obj).length; return Object.keys(obj).length;
} }
@ -53,6 +57,31 @@ if (typeof(PhpDebugBar) == 'undefined') {
return count; return count;
} }
/**
* Returns a prefixed css class name
*
* @param {String} cls
* @return {String}
*/
PhpDebugBar.utils.csscls = function(cls, prefix) {
if (cls.indexOf(' ') > -1) {
var clss = cls.split(' '), out = [];
for (var i = 0, c = clss.length; i < c; i++) {
out.push(PhpDebugBar.utils.csscls(clss[i], prefix));
}
return out.join(' ');
}
if (cls.indexOf('.') === 0) {
return '.' + prefix + cls.substr(1);
}
return prefix + cls;
};
var csscls = function(cls) {
return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-');
};
// ------------------------------------------------------------------ // ------------------------------------------------------------------
/** /**
@ -211,13 +240,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var Tab = Widget.extend({ var Tab = Widget.extend({
className: 'phpdebugbar-panel', className: csscls('panel'),
render: function() { render: function() {
this.$tab = $('<a href="javascript:" class="phpdebugbar-tab" />'); this.$tab = $('<a href="javascript:" />').addClass(csscls('tab'));
this.bindAttr('title', $('<span class="text" />').appendTo(this.$tab)); this.bindAttr('title', $('<span />').addClass(csscls('text')).appendTo(this.$tab));
this.$badge = $('<span class="badge" />').appendTo(this.$tab); this.$badge = $('<span />').addClass(csscls('badge')).appendTo(this.$tab);
this.bindAttr('badge', function(value) { this.bindAttr('badge', function(value) {
if (value !== null) { if (value !== null) {
this.$badge.text(value); this.$badge.text(value);
@ -259,7 +288,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'span', tagName: 'span',
className: 'phpdebugbar-indicator', className: csscls('indicator'),
defaults: { defaults: {
position: "right" position: "right"
@ -277,14 +306,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
} }
}); });
this.bindAttr(['title', 'data'], $('<span class="text" />').appendTo(this.$el)); this.bindAttr(['title', 'data'], $('<span />').addClass(csscls('text')).appendTo(this.$el));
this.$tooltip = $('<span class="tooltip disabled" />').appendTo(this.$el); this.$tooltip = $('<span />').addClass(csscls('tooltip disabled')).appendTo(this.$el);
this.bindAttr('tooltip', function(tooltip) { this.bindAttr('tooltip', function(tooltip) {
if (tooltip) { if (tooltip) {
this.$tooltip.text(tooltip).removeClass('disabled'); this.$tooltip.text(tooltip).removeClass(csscls('disabled'));
} else { } else {
this.$tooltip.addClass('disabled'); this.$tooltip.addClass(csscls('disabled'));
} }
}); });
} }
@ -327,7 +356,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
} }
var filename = data['__meta']['uri'].substr(data['__meta']['uri'].lastIndexOf('/') + 1); var filename = data['__meta']['uri'].substr(data['__meta']['uri'].lastIndexOf('/') + 1);
var label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'] + ')'; var label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'].split(' ')[1] + ')';
return label; return label;
} }
@ -348,7 +377,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var DebugBar = PhpDebugBar.DebugBar = Widget.extend({ var DebugBar = PhpDebugBar.DebugBar = Widget.extend({
className: "phpdebugbar minimized", className: "phpdebugbar " + csscls('minimized'),
options: { options: {
bodyPaddingBottom: true bodyPaddingBottom: true
@ -371,9 +400,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
render: function() { render: function() {
var self = this; var self = this;
this.$el.appendTo('body'); this.$el.appendTo('body');
this.$header = $('<div class="phpdebugbar-header" />').appendTo(this.$el); this.$header = $('<div />').addClass(csscls('header')).appendTo(this.$el);
var $body = this.$body = $('<div class="phpdebugbar-body" />').appendTo(this.$el); var $body = this.$body = $('<div />').addClass(csscls('body')).appendTo(this.$el);
this.$resizehdle = $('<div class="phpdebugbar-resize-handle" />').appendTo(this.$body); this.$resizehdle = $('<div />').addClass(csscls('resize-handle')).appendTo(this.$body);
this.recomputeBottomOffset(); this.recomputeBottomOffset();
// dragging of resize handle // dragging of resize handle
@ -397,13 +426,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
}); });
// minimize button // minimize button
this.$minimizebtn = $('<a class="phpdebugbar-minimize-btn" href="javascript:"><i class="icon-remove"></i></a>').appendTo(this.$header); this.$minimizebtn = $('<a href="javascript:" />').addClass(csscls('minimize-btn')).appendTo(this.$header);
this.$minimizebtn.click(function() { this.$minimizebtn.click(function() {
self.minimize(); self.minimize();
}); });
// open button // open button
this.$openbtn = $('<a class="phpdebugbar-open-btn" href="javascript:"><i class="icon-folder-open"></i></a>').appendTo(this.$header).hide(); this.$openbtn = $('<a href="javascript:" />').addClass(csscls('open-btn')).appendTo(this.$header).hide();
this.$openbtn.click(function() { this.$openbtn.click(function() {
self.openHandler.show(function(id, dataset) { self.openHandler.show(function(id, dataset) {
self.addDataSet(dataset, id, "(opened)"); self.addDataSet(dataset, id, "(opened)");
@ -412,7 +441,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
}); });
// select box for data sets // select box for data sets
this.$datasets = $('<select class="phpdebugbar-datasets-switcher" />').appendTo(this.$header); this.$datasets = $('<select />').addClass(csscls('datasets-switcher')).appendTo(this.$header);
this.$datasets.change(function() { this.$datasets.change(function() {
self.dataChangeHandler(self.datasets[this.value]); self.dataChangeHandler(self.datasets[this.value]);
self.showTab(); self.showTab();
@ -620,14 +649,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$minimizebtn.show(); this.$minimizebtn.show();
this.recomputeBottomOffset(); this.recomputeBottomOffset();
$(this.$header).find('> .active').removeClass('active'); $(this.$header).find('> .' + csscls('active')).removeClass(csscls('active'));
$(this.$body).find('> .active').removeClass('active'); $(this.$body).find('> .' + csscls('active')).removeClass(csscls('active'));
this.controls[name].$tab.addClass('active'); this.controls[name].$tab.addClass(csscls('active'));
this.controls[name].$el.addClass('active'); this.controls[name].$el.addClass(csscls('active'));
this.activePanelName = name; this.activePanelName = name;
this.$el.removeClass('minimized'); this.$el.removeClass(csscls('minimized'));
localStorage.setItem('phpdebugbar-visible', '1'); localStorage.setItem('phpdebugbar-visible', '1');
localStorage.setItem('phpdebugbar-tab', name); localStorage.setItem('phpdebugbar-tab', name);
}, },
@ -638,13 +667,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar} * @this {DebugBar}
*/ */
minimize: function() { minimize: function() {
this.$header.find('> .active').removeClass('active'); this.$header.find('> .' + csscls('active')).removeClass(csscls('active'));
this.$body.hide(); this.$body.hide();
this.$minimizebtn.hide(); this.$minimizebtn.hide();
this.$resizehdle.hide(); this.$resizehdle.hide();
this.recomputeBottomOffset(); this.recomputeBottomOffset();
localStorage.setItem('phpdebugbar-visible', '0'); localStorage.setItem('phpdebugbar-visible', '0');
this.$el.addClass('minimized'); this.$el.addClass(csscls('minimized'));
}, },
/** /**
@ -653,7 +682,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @return {Boolean} * @return {Boolean}
*/ */
isMinimized: function() { isMinimized: function() {
return this.$el.hasClass('minimized'); return this.$el.hasClass(csscls('minimized'));
}, },
/** /**

BIN
src/DebugBar/Resources/icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 500 B

12
src/DebugBar/Resources/openhandler.css
View File

@ -1,5 +1,5 @@
div.phpdebugbar-openhandler-overlay { div.phpdebugbar-openhandler-overlay {
position: absolute; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -10,7 +10,7 @@ div.phpdebugbar-openhandler-overlay {
} }
div.phpdebugbar-openhandler { div.phpdebugbar-openhandler {
position: absolute; position: fixed;
margin: auto; margin: auto;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -26,7 +26,7 @@ div.phpdebugbar-openhandler {
font-size: 14px; font-size: 14px;
padding-bottom: 10px; padding-bottom: 10px;
} }
div.phpdebugbar-openhandler .header { div.phpdebugbar-openhandler .phpdebugbar-openhandler-header {
background: #efefef url(php-icon.png) no-repeat 5px 4px; background: #efefef url(php-icon.png) no-repeat 5px 4px;
padding-left: 29px; padding-left: 29px;
min-height: 26px; min-height: 26px;
@ -34,7 +34,7 @@ div.phpdebugbar-openhandler {
color: #555; color: #555;
margin-bottom: 10px; margin-bottom: 10px;
} }
div.phpdebugbar-openhandler .header a { div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
font-size: 14px; font-size: 14px;
color: #555; color: #555;
text-decoration: none; text-decoration: none;
@ -50,11 +50,11 @@ div.phpdebugbar-openhandler {
text-align: center; text-align: center;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
div.phpdebugbar-openhandler .actions { div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions {
text-align: center; text-align: center;
padding: 7px 0; padding: 7px 0;
} }
div.phpdebugbar-openhandler .actions a { div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions a {
margin: 0 10px; margin: 0 10px;
color: #555; color: #555;
} }

10
src/DebugBar/Resources/openhandler.js
View File

@ -6,6 +6,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
(function($) { (function($) {
var csscls = function(cls) {
return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-openhandler-');
};
PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({ PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-openhandler', className: 'phpdebugbar-openhandler',
@ -20,9 +24,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$el.appendTo('body').hide(); this.$el.appendTo('body').hide();
this.$closebtn = $('<a href="javascript:"><i class="icon-remove"></i></a>'); this.$closebtn = $('<a href="javascript:"><i class="icon-remove"></i></a>');
this.$table = $('<tbody />'); this.$table = $('<tbody />');
$('<div class="header">PHP DebugBar | Open</div>').append(this.$closebtn).appendTo(this.$el); $('<div>PHP DebugBar | Open</div>').addClass(csscls('header')).append(this.$closebtn).appendTo(this.$el);
$('<table><thead><tr><th>ID</th><th>URL</th><th>Date</th><th>IP</th></tr></thead></table>').append(this.$table).appendTo(this.$el); $('<table><thead><tr><th>ID</th><th>URL</th><th>Date</th><th>IP</th></tr></thead></table>').append(this.$table).appendTo(this.$el);
this.$actions = $('<div class="actions" />').appendTo(this.$el); this.$actions = $('<div />').addClass(csscls('actions')).appendTo(this.$el);
this.$closebtn.on('click', function() { this.$closebtn.on('click', function() {
self.hide(); self.hide();
@ -55,7 +59,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
}); });
}); });
this.$overlay = $('<div class="phpdebugbar-openhandler-overlay" />').hide().appendTo('body'); this.$overlay = $('<div />').addClass(csscls('overlay')).hide().appendTo('body');
this.$overlay.on('click', function() { this.$overlay.on('click', function() {
self.hide(); self.hide();
}); });

96
src/DebugBar/Resources/widgets.css
View File

@ -5,12 +5,12 @@ ul.phpdebugbar-widgets-list {
list-style: none; list-style: none;
font-family: monospace; font-family: monospace;
} }
ul.phpdebugbar-widgets-list li.list-item { ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {
padding: 3px 6px; padding: 3px 6px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
position: relative; position: relative;
} }
ul.phpdebugbar-widgets-list li.list-item:hover { ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item:hover {
background: #fafafa; background: #fafafa;
} }
@ -23,25 +23,25 @@ div.phpdebugbar-widgets-messages {
div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-list { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-list {
padding-bottom: 20px; padding-bottom: 20px;
} }
div.phpdebugbar-widgets-messages li.list-item span.value.warning:before { div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-warning:before {
font-family: FontAwesome; font-family: FontAwesome;
content: "\f071"; content: "\f071";
margin-right: 8px; margin-right: 8px;
font-size: 11px; font-size: 11px;
color: #ecb03d; color: #ecb03d;
} }
div.phpdebugbar-widgets-messages li.list-item span.value.error { div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error {
color: red; color: red;
} }
div.phpdebugbar-widgets-messages li.list-item span.value.error:before { div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error:before {
font-family: FontAwesome; font-family: FontAwesome;
content: "\f057"; content: "\f057";
margin-right: 8px; margin-right: 8px;
font-size: 11px; font-size: 11px;
color: red; color: red;
} }
div.phpdebugbar-widgets-messages li.list-item span.collector, div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector,
div.phpdebugbar-widgets-messages li.list-item span.label { div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-label {
float: right; float: right;
font-size: 12px; font-size: 12px;
padding: 2px 4px; padding: 2px 4px;
@ -52,27 +52,27 @@ div.phpdebugbar-widgets-messages {
background: none; background: none;
font-weight: normal; font-weight: normal;
} }
div.phpdebugbar-widgets-messages li.list-item span.collector { div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-collector {
color: #555; color: #555;
font-style: italic; font-style: italic;
} }
div.phpdebugbar-widgets-messages div.toolbar { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background: #fff; background: #fff;
} }
div.phpdebugbar-widgets-messages div.toolbar input { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input {
border: 0; border: 0;
margin: 0; margin: 0;
margin-left: 7px; margin-left: 7px;
width: 50%; width: 50%;
box-shadow: none; box-shadow: none;
} }
div.phpdebugbar-widgets-messages div.toolbar input:focus { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar input:focus {
outline: none; outline: none;
} }
div.phpdebugbar-widgets-messages div.toolbar a.filter { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter {
float: right; float: right;
font-size: 12px; font-size: 12px;
padding: 2px 4px; padding: 2px 4px;
@ -82,7 +82,7 @@ div.phpdebugbar-widgets-messages {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
} }
div.phpdebugbar-widgets-messages div.toolbar a.filter.excluded { div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar a.phpdebugbar-widgets-filter.phpdebugbar-widgets-excluded {
background: #eee; background: #eee;
color: #888; color: #888;
} }
@ -128,7 +128,7 @@ ul.phpdebugbar-widgets-timeline {
ul.phpdebugbar-widgets-timeline li:hover { ul.phpdebugbar-widgets-timeline li:hover {
background: #fafafa; background: #fafafa;
} }
ul.phpdebugbar-widgets-timeline li span.label { ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-label {
position: absolute; position: absolute;
font-size: 12px; font-size: 12px;
font-family: monospace; font-family: monospace;
@ -139,7 +139,7 @@ ul.phpdebugbar-widgets-timeline {
text-shadow: none; text-shadow: none;
font-weight: normal; font-weight: normal;
} }
ul.phpdebugbar-widgets-timeline li span.value { ul.phpdebugbar-widgets-timeline li span.phpdebugbar-widgets-value {
display: block; display: block;
position: absolute; position: absolute;
height: 10px; height: 10px;
@ -150,21 +150,21 @@ ul.phpdebugbar-widgets-timeline {
/* -------------------------------------- */ /* -------------------------------------- */
div.phpdebugbar-widgets-exceptions li.list-item { div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item {
cursor: pointer; cursor: pointer;
} }
div.phpdebugbar-widgets-exceptions li.list-item span.message { div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-message {
display: block; display: block;
color: red; color: red;
} }
div.phpdebugbar-widgets-exceptions li.list-item span.filename { div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-filename {
display: block; display: block;
font-style: italic; font-style: italic;
color: #555; color: #555;
} }
div.phpdebugbar-widgets-exceptions li.list-item span.type { div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-type {
display: block; display: block;
position: absolute; position: absolute;
right: 4px; right: 4px;
@ -172,7 +172,7 @@ div.phpdebugbar-widgets-exceptions li.list-item {
font-weight: bold; font-weight: bold;
} }
div.phpdebugbar-widgets-exceptions li.list-item div.file { div.phpdebugbar-widgets-exceptions li.phpdebugbar-widgets-list-item div.phpdebugbar-widgets-file {
display: none; display: none;
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;
@ -182,7 +182,7 @@ div.phpdebugbar-widgets-exceptions li.list-item {
/* -------------------------------------- */ /* -------------------------------------- */
div.phpdebugbar-widgets-sqlqueries .status { div.phpdebugbar-widgets-sqlqueries .phpdebugbar-widgets-status {
font-family: monospace; font-family: monospace;
padding: 6px 6px; padding: 6px 6px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -191,45 +191,45 @@ div.phpdebugbar-widgets-sqlqueries .status {
background: #fafafa; background: #fafafa;
} }
div.phpdebugbar-widgets-sqlqueries li.list-item.error { div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item.phpdebugbar-widgets-error {
color: red; color: red;
} }
div.phpdebugbar-widgets-sqlqueries span.duration, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration,
div.phpdebugbar-widgets-sqlqueries span.memory, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory,
div.phpdebugbar-widgets-sqlqueries span.row-count, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count,
div.phpdebugbar-widgets-sqlqueries span.stmt-id { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id {
float: right; float: right;
margin-left: 8px; margin-left: 8px;
color: #888; color: #888;
} }
div.phpdebugbar-widgets-sqlqueries div.status span.duration, div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-duration,
div.phpdebugbar-widgets-sqlqueries div.status span.memory, div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-memory,
div.phpdebugbar-widgets-sqlqueries div.status span.row-count, div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-row-count,
div.phpdebugbar-widgets-sqlqueries div.status span.stmt-id { div.phpdebugbar-widgets-sqlqueries div.phpdebugbar-widgets-status span.phpdebugbar-widgets-stmt-id {
color: #555; color: #555;
} }
div.phpdebugbar-widgets-sqlqueries span.duration:before, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before,
div.phpdebugbar-widgets-sqlqueries span.memory:before, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before,
div.phpdebugbar-widgets-sqlqueries span.row-count:before, div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before,
div.phpdebugbar-widgets-sqlqueries span.stmt-id:before { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
font-family: FontAwesome; font-family: FontAwesome;
margin-right: 4px; margin-right: 4px;
font-size: 12px; font-size: 12px;
} }
div.phpdebugbar-widgets-sqlqueries span.duration:before { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before {
content: "\f017"; content: "\f017";
} }
div.phpdebugbar-widgets-sqlqueries span.memory:before { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before {
content: "\f085"; content: "\f085";
} }
div.phpdebugbar-widgets-sqlqueries span.row-count:before { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before {
content: "\f0ce"; content: "\f0ce";
} }
div.phpdebugbar-widgets-sqlqueries span.stmt-id:before { div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before {
content: "\f08d"; content: "\f08d";
} }
div.phpdebugbar-widgets-sqlqueries table.params { div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params {
display: none; display: none;
width: 70%; width: 70%;
margin: 10px; margin: 10px;
@ -237,23 +237,23 @@ div.phpdebugbar-widgets-sqlqueries table.params {
font-family: monospace; font-family: monospace;
border-collapse: collapse; border-collapse: collapse;
} }
div.phpdebugbar-widgets-sqlqueries table.params td { div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params td {
border: 1px solid #ddd; border: 1px solid #ddd;
text-align: center; text-align: center;
} }
div.phpdebugbar-widgets-sqlqueries table.params .name { div.phpdebugbar-widgets-sqlqueries table.phpdebugbar-widgets-params .phpdebugbar-widgets-name {
width: 20%; width: 20%;
font-weight: bold; font-weight: bold;
} }
div.phpdebugbar-widgets-sqlqueries li.list-item span.error { div.phpdebugbar-widgets-sqlqueries li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-error {
display: block; display: block;
font-weight: bold; font-weight: bold;
} }
/* -------------------------------------- */ /* -------------------------------------- */
div.phpdebugbar-widgets-templates div.status { div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status {
font-family: monospace; font-family: monospace;
padding: 6px 6px; padding: 6px 6px;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
@ -262,28 +262,28 @@ div.phpdebugbar-widgets-templates div.status {
background: #fafafa; background: #fafafa;
} }
div.phpdebugbar-widgets-templates span.render_time { div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render_time {
float: right; float: right;
} }
div.phpdebugbar-widgets-templates span.render_time:before { div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render_time:before {
content: "\f017"; content: "\f017";
font-family: FontAwesome; font-family: FontAwesome;
font-size: 12px; font-size: 12px;
margin-right: 4px; margin-right: 4px;
} }
div.phpdebugbar-widgets-templates div.status span.render_time { div.phpdebugbar-widgets-templates div.phpdebugbar-widgets-status span.phpdebugbar-widgets-render_time {
color: #555; color: #555;
} }
/* -------------------------------------- */ /* -------------------------------------- */
div.phpdebugbar-widgets-mails span.subject { div.phpdebugbar-widgets-mails span.phpdebugbar-widgets-subject {
display: block; display: block;
} }
div.phpdebugbar-widgets-mails li.list-item pre.headers { div.phpdebugbar-widgets-mails li.phpdebugbar-widgets-list-item pre.phpdebugbar-widgets-headers {
display: none; display: none;
margin: 10px; margin: 10px;
padding: 5px; padding: 5px;

124
src/DebugBar/Resources/widgets.js
View File

@ -39,6 +39,16 @@ if (typeof(PhpDebugBar) == 'undefined') {
return value; return value;
}; };
/**
* Returns a prefixed css class name
*
* @param {String} cls
* @return {String}
*/
var csscls = function(cls) {
return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-widgets-');
};
// ------------------------------------------------------------------ // ------------------------------------------------------------------
// Generic widgets // Generic widgets
@ -55,7 +65,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'ul', tagName: 'ul',
className: 'phpdebugbar-widgets-list', className: csscls('list'),
initialize: function(options) { initialize: function(options) {
if (!options['itemRenderer']) { if (!options['itemRenderer']) {
@ -73,7 +83,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
var data = this.get('data'); var data = this.get('data');
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
var li = $('<li class="list-item" />').appendTo(this.$el); var li = $('<li />').addClass(csscls('list-item')).appendTo(this.$el);
this.get('itemRenderer')(li, data[i]); this.get('itemRenderer')(li, data[i]);
} }
}); });
@ -104,7 +114,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'dl', tagName: 'dl',
className: 'phpdebugbar-widgets-kvlist', className: csscls('kvlist'),
render: function() { render: function() {
this.bindAttr(['itemRenderer', 'data'], function() { this.bindAttr(['itemRenderer', 'data'], function() {
@ -115,8 +125,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
var self = this; var self = this;
$.each(this.get('data'), function(key, value) { $.each(this.get('data'), function(key, value) {
var dt = $('<dt class="key" />').appendTo(self.$el); var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el);
var dd = $('<dd class="value" />').appendTo(self.$el); var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el);
self.get('itemRenderer')(dt, dd, key, value); self.get('itemRenderer')(dt, dd, key, value);
}); });
}); });
@ -148,7 +158,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({ var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({
className: 'phpdebugbar-widgets-kvlist phpdebugbar-widgets-varlist', className: csscls('kvlist varlist'),
itemRenderer: function(dt, dd, key, value) { itemRenderer: function(dt, dd, key, value) {
dt.text(key); dt.text(key);
@ -158,10 +168,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
v = v.substr(0, 100) + "..."; v = v.substr(0, 100) + "...";
} }
dd.text(v).click(function() { dd.text(v).click(function() {
if (dd.hasClass('pretty')) { if (dd.hasClass(csscls('pretty'))) {
dd.text(v).removeClass('pretty'); dd.text(v).removeClass(csscls('pretty'));
} else { } else {
dd.html(htmlize(value)).addClass('pretty'); dd.html(htmlize(value)).addClass(csscls('pretty'));
} }
}); });
} }
@ -180,7 +190,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'iframe', tagName: 'iframe',
className: 'phpdebugbar-widgets-iframe', className: csscls('iframe'),
render: function() { render: function() {
this.$el.attr({ this.$el.attr({
@ -209,7 +219,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({ var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-messages', className: csscls('messages'),
render: function() { render: function() {
var self = this; var self = this;
@ -220,28 +230,28 @@ if (typeof(PhpDebugBar) == 'undefined') {
m = m.substr(0, 100) + "..."; m = m.substr(0, 100) + "...";
} }
var val = $('<span class="value" />').text(m).appendTo(li); var val = $('<span />').addClass(csscls('value')).text(m).appendTo(li);
if (!value.is_string || value.message.length > 100) { if (!value.is_string || value.message.length > 100) {
li.css('cursor', 'pointer').click(function() { li.css('cursor', 'pointer').click(function() {
if (val.hasClass('pretty')) { if (val.hasClass(csscls('pretty'))) {
val.text(m).removeClass('pretty'); val.text(m).removeClass(csscls('pretty'));
} else { } else {
val.html(htmlize(value.message)).addClass('pretty'); val.html(htmlize(value.message)).addClass(csscls('pretty'));
} }
}); });
} }
if (value.label) { if (value.label) {
val.addClass(value.label); val.addClass(csscls(value.label));
$('<span class="label" />').text(value.label).appendTo(li); $('<span />').addClass(csscls('label')).text(value.label).appendTo(li);
} }
if (value.collector) { if (value.collector) {
$('<span class="collector" />').text(value.collector).appendTo(li); $('<span />').addClass(csscls('collector')).text(value.collector).appendTo(li);
} }
}}); }});
this.$list.$el.appendTo(this.$el); this.$list.$el.appendTo(this.$el);
this.$toolbar = $('<div class="toolbar"><i class="icon-search"></i></div>').appendTo(this.$el); this.$toolbar = $('<div><i class="icon-search"></i></div>').addClass(csscls('toolbar')).appendTo(this.$el);
$('<input type="text" />') $('<input type="text" />')
.on('change', function() { self.set('search', this.value); }) .on('change', function() { self.set('search', this.value); })
@ -249,7 +259,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.bindAttr('data', function(data) { this.bindAttr('data', function(data) {
this.set({ exclude: [], search: '' }); this.set({ exclude: [], search: '' });
this.$toolbar.find('.filter').remove(); this.$toolbar.find(csscls('.filter')).remove();
var filters = [], self = this; var filters = [], self = this;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
@ -257,7 +267,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
continue; continue;
} }
filters.push(data[i].label); filters.push(data[i].label);
$('<a class="filter" href="javascript:" />') $('<a href="javascript:" />')
.addClass(csscls('filter'))
.text(data[i].label) .text(data[i].label)
.attr('rel', data[i].label) .attr('rel', data[i].label)
.on('click', function() { self.onFilterClick(this); }) .on('click', function() { self.onFilterClick(this); })
@ -282,10 +293,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
}, },
onFilterClick: function(el) { onFilterClick: function(el) {
$(el).toggleClass('excluded'); $(el).toggleClass(csscls('excluded'));
var excludedLabels = []; var excludedLabels = [];
this.$toolbar.find('.filter.excluded').each(function() { this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() {
excludedLabels.push(this.rel); excludedLabels.push(this.rel);
}); });
@ -306,19 +317,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'ul', tagName: 'ul',
className: 'phpdebugbar-widgets-timeline', className: csscls('timeline'),
render: function() { render: function() {
this.bindAttr('data', function(data) { this.bindAttr('data', function(data) {
this.$el.empty(); this.$el.empty();
if (data.measures) { if (data.measures) {
for (var i = 0; i < data.measures.length; i++) { for (var i = 0; i < data.measures.length; i++) {
var li = $('<li class="measure" />'); var li = $('<li />').addClass(csscls('measure'));
li.append($('<span class="value" />').css({ li.append($('<span />').addClass(csscls('value')).css({
left: Math.round(data.measures[i].relative_start * 100 / data.duration) + "%", left: Math.round(data.measures[i].relative_start * 100 / data.duration) + "%",
width: Math.round(data.measures[i].duration * 100 / data.duration) + "%" width: Math.round(data.measures[i].duration * 100 / data.duration) + "%"
})); }));
li.append($('<span class="label" />').text(data.measures[i].label + " (" + data.measures[i].duration_str + ")")); li.append($('<span />').addClass(csscls('label')).text(data.measures[i].label + " (" + data.measures[i].duration_str + ")"));
this.$el.append(li); this.$el.append(li);
} }
} }
@ -337,19 +348,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({ var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-exceptions', className: csscls('exceptions'),
render: function() { render: function() {
this.$list = new ListWidget({ itemRenderer: function(li, e) { this.$list = new ListWidget({ itemRenderer: function(li, e) {
$('<span class="message" />').text(e.message).appendTo(li); $('<span />').addClass(csscls('message')).text(e.message).appendTo(li);
if (e.file) { if (e.file) {
$('<span class="filename" />').text(e.file + "#" + e.line).appendTo(li); $('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li);
} }
if (e.type) { if (e.type) {
$('<span class="type" />').text(e.type).appendTo(li); $('<span />').addClass(csscls('type')).text(e.type).appendTo(li);
} }
if (e.surrounding_lines) { if (e.surrounding_lines) {
var file = $('<div class="file" />').html(htmlize(e.surrounding_lines.join(""))).appendTo(li); var file = $('<div />').addClass(csscls('file')).html(htmlize(e.surrounding_lines.join(""))).appendTo(li);
li.click(function() { li.click(function() {
if (file.is(':visible')) { if (file.is(':visible')) {
file.hide(); file.hide();
@ -364,7 +375,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.bindAttr('data', function(data) { this.bindAttr('data', function(data) {
this.$list.set('data', data); this.$list.set('data', data);
if (data.length == 1) { if (data.length == 1) {
this.$list.$el.children().first().find('.file').show(); this.$list.$el.children().first().find(csscls('.file')).show();
} }
}); });
@ -382,35 +393,34 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var SQLQueriesWidget = PhpDebugBar.Widgets.SQLQueriesWidget = PhpDebugBar.Widget.extend({ var SQLQueriesWidget = PhpDebugBar.Widgets.SQLQueriesWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-sqlqueries', className: csscls('sqlqueries'),
render: function() { render: function() {
this.$status = $('<div class="status" />').appendTo(this.$el); this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
this.$list = new ListWidget({ itemRenderer: function(li, stmt) { this.$list = new ListWidget({ itemRenderer: function(li, stmt) {
$('<span class="sql" />').text(stmt.sql).appendTo(li); $('<span />').addClass(csscls('sql')).text(stmt.sql).appendTo(li);
if (stmt.duration_str) { if (stmt.duration_str) {
$('<span class="duration" title="Duration" />').text(stmt.duration_str).appendTo(li); $('<span title="Duration" />').addClass(csscls('duration')).text(stmt.duration_str).appendTo(li);
} }
if (stmt.memory_str) { if (stmt.memory_str) {
$('<span class="memory" title="Peak memory usage" />').text(stmt.memory_str).appendTo(li); $('<span title="Peak memory usage" />').addClass(csscls('memory')).text(stmt.memory_str).appendTo(li);
} }
if (typeof(stmt.is_success) != 'undefined' && !stmt.is_success) { if (typeof(stmt.is_success) != 'undefined' && !stmt.is_success) {
li.addClass('error'); li.addClass(csscls('error'));
li.append($('<span class="error" />').text("[" + stmt.error_code + "] " + stmt.error_message)); li.append($('<span />').addClass(csscls('error')).text("[" + stmt.error_code + "] " + stmt.error_message));
} else if (typeof(stmt.row_count) != 'undefined') { } else if (typeof(stmt.row_count) != 'undefined') {
$('<span class="row-count" title="Row count" />').text(stmt.row_count).appendTo(li); $('<span title="Row count" />').addClass(csscls('row-count')).text(stmt.row_count).appendTo(li);
} }
if (typeof(stmt.stmt_id) != 'undefined' && stmt.stmt_id) { if (typeof(stmt.stmt_id) != 'undefined' && stmt.stmt_id) {
$('<span class="stmt-id" title="Prepared statement ID" />').text(stmt.stmt_id).appendTo(li); $('<span title="Prepared statement ID" />').addClass(csscls('stmt-id')).text(stmt.stmt_id).appendTo(li);
} }
if (stmt.params && !$.isEmptyObject(stmt.params)) { if (stmt.params && !$.isEmptyObject(stmt.params)) {
var table = '<table class="params"><tr><th colspan="2">Params</th></tr>'; var table = $('<table><tr><th colspan="2">Params</th></tr></table>').addClass(csscls('params')).appendTo(li);
for (var key in stmt.params) { for (var key in stmt.params) {
table += '<tr><td class="name">' + key + '</td><td class="value">' + stmt.params[key] + '</td></tr>'; table.append('<tr><td class="' + csscls('name') + '">' + key + '</td><td class="' + csscls('value') +
'">' + stmt.params[key] + '</td></tr>');
} }
table += '</table>';
table = $(table).appendTo(li);
li.css('cursor', 'pointer').click(function() { li.css('cursor', 'pointer').click(function() {
if (table.is(':visible')) { if (table.is(':visible')) {
table.hide(); table.hide();
@ -431,10 +441,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
t.append(", " + data.nb_failed_statements + " of which failed"); t.append(", " + data.nb_failed_statements + " of which failed");
} }
if (data.accumulated_duration_str) { if (data.accumulated_duration_str) {
this.$status.append($('<span class="duration" title="Accumulated duration" />').text(data.accumulated_duration_str)); this.$status.append($('<span title="Accumulated duration" />').addClass(csscls('duration')).text(data.accumulated_duration_str));
} }
if (data.peak_memory_usage_str) { if (data.peak_memory_usage_str) {
this.$status.append($('<span class="memory" title="Peak memory usage" />').text(data.peak_memory_usage_str)); this.$status.append($('<span title="Peak memory usage" />').addClass(csscls('memory')).text(data.peak_memory_usage_str));
} }
}); });
} }
@ -451,15 +461,15 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var TemplatesWidget = PhpDebugBar.Widgets.TemplatesWidget = PhpDebugBar.Widget.extend({ var TemplatesWidget = PhpDebugBar.Widgets.TemplatesWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-templates', className: csscls('templates'),
render: function() { render: function() {
this.$status = $('<div class="status" />').appendTo(this.$el); this.$status = $('<div />').addClass(csscls('status')).appendTo(this.$el);
this.$list = new ListWidget({ itemRenderer: function(li, tpl) { this.$list = new ListWidget({ itemRenderer: function(li, tpl) {
$('<span class="name" />').text(tpl.name).appendTo(li); $('<span />').addClass(csscls('name')).text(tpl.name).appendTo(li);
if (tpl.render_time_str) { if (tpl.render_time_str) {
$('<span class="render_time" title="Render time" />').text(tpl.render_time_str).appendTo(li); $('<span title="Render time" />').addClass(csscls('render_time')).text(tpl.render_time_str).appendTo(li);
} }
}}); }});
this.$list.$el.appendTo(this.$el); this.$list.$el.appendTo(this.$el);
@ -468,7 +478,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$list.set('data', data.templates); this.$list.set('data', data.templates);
this.$status.empty().append($('<span />').text(data.templates.length + " templates were rendered")); this.$status.empty().append($('<span />').text(data.templates.length + " templates were rendered"));
if (data.accumulated_render_time_str) { if (data.accumulated_render_time_str) {
this.$status.append($('<span class="render_time" title="Accumulated render time" />').text(data.accumulated_render_time_str)); this.$status.append($('<span title="Accumulated render time" />').addClass(csscls('render_time')).text(data.accumulated_render_time_str));
} }
}); });
} }
@ -485,14 +495,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/ */
var MailsWidget = PhpDebugBar.Widgets.MailsWidget = PhpDebugBar.Widget.extend({ var MailsWidget = PhpDebugBar.Widgets.MailsWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-mails', className: csscls('mails'),
render: function() { render: function() {
this.$list = new ListWidget({ itemRenderer: function(li, mail) { this.$list = new ListWidget({ itemRenderer: function(li, mail) {
$('<span class="subject" />').text(mail.subject).appendTo(li); $('<span />').addClass(csscls('subject')).text(mail.subject).appendTo(li);
$('<span class="to" />').text(mail.to).appendTo(li); $('<span />').addClass(csscls('to')).text(mail.to).appendTo(li);
if (mail.headers) { if (mail.headers) {
var headers = $('<pre class="headers" />').appendTo(li); var headers = $('<pre />').addClass(csscls('headers')).appendTo(li);
$('<code />').text(mail.headers).appendTo(headers); $('<code />').text(mail.headers).appendTo(headers);
li.click(function() { li.click(function() {
if (headers.is(':visible')) { if (headers.is(':visible')) {