mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-01-16 21:08:34 +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
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:
- 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;
}
a.phpdebugbar-tab.active {
a.phpdebugbar-tab.phpdebugbar-active {
background: #ccc;
color: #444;
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: -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;
margin-left: 5px;
font-size: 11px;
@ -70,22 +70,31 @@ a.phpdebugbar-tab.active {
font-weight: normal;
text-shadow: none;
}
a.phpdebugbar-tab span.badge.important {
a.phpdebugbar-tab span.phpdebugbar-badge.phpdebugbar-important {
background: #ed6868;
color: white;
}
a.phpdebugbar-minimize-btn {
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 {
position: relative;
}
.phpdebugbar-indicator span.text {
.phpdebugbar-indicator span.phpdebugbar-text {
margin-left: 5px;
}
.phpdebugbar-indicator span.tooltip {
.phpdebugbar-indicator span.phpdebugbar-tooltip {
display: none;
position: absolute;
top: -30px;
@ -97,7 +106,7 @@ a.phpdebugbar-minimize-btn {
padding: 2px 3px;
z-index: 1000;
}
.phpdebugbar-indicator:hover span.tooltip:not(.disabled) {
.phpdebugbar-indicator:hover span.phpdebugbar-tooltip:not(.phpdebugbar-disabled) {
display: block;
}
@ -137,6 +146,6 @@ div.phpdebugbar-panel {
overflow: auto;
width: 100%;
}
div.phpdebugbar-panel.active {
div.phpdebugbar-panel.phpdebugbar-active {
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.
* 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
* @return {Object}
*/
function getDictValue(dict, key, default_value) {
var getDictValue = PhpDebugBar.utils.getDictValue = function(dict, key, default_value) {
var d = dict, parts = key.split('.');
for (var i = 0; i < parts.length; i++) {
if (!d[parts[i]]) {
@ -40,7 +44,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @param {Object} obj
* @return {Integer}
*/
function getObjectSize(obj) {
var getObjectSize = PhpDebugBar.utils.getObjectSize = function(obj) {
if (Object.keys) {
return Object.keys(obj).length;
}
@ -53,6 +57,31 @@ if (typeof(PhpDebugBar) == 'undefined') {
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({
className: 'phpdebugbar-panel',
className: csscls('panel'),
render: function() {
this.$tab = $('<a href="javascript:" class="phpdebugbar-tab" />');
this.bindAttr('title', $('<span class="text" />').appendTo(this.$tab));
this.$tab = $('<a href="javascript:" />').addClass(csscls('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) {
if (value !== null) {
this.$badge.text(value);
@ -259,7 +288,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'span',
className: 'phpdebugbar-indicator',
className: csscls('indicator'),
defaults: {
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) {
if (tooltip) {
this.$tooltip.text(tooltip).removeClass('disabled');
this.$tooltip.text(tooltip).removeClass(csscls('disabled'));
} 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 label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'] + ')';
var label = "#" + nb + " " + filename + suffix + ' (' + data['__meta']['datetime'].split(' ')[1] + ')';
return label;
}
@ -348,7 +377,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
var DebugBar = PhpDebugBar.DebugBar = Widget.extend({
className: "phpdebugbar minimized",
className: "phpdebugbar " + csscls('minimized'),
options: {
bodyPaddingBottom: true
@ -371,9 +400,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
render: function() {
var self = this;
this.$el.appendTo('body');
this.$header = $('<div class="phpdebugbar-header" />').appendTo(this.$el);
var $body = this.$body = $('<div class="phpdebugbar-body" />').appendTo(this.$el);
this.$resizehdle = $('<div class="phpdebugbar-resize-handle" />').appendTo(this.$body);
this.$header = $('<div />').addClass(csscls('header')).appendTo(this.$el);
var $body = this.$body = $('<div />').addClass(csscls('body')).appendTo(this.$el);
this.$resizehdle = $('<div />').addClass(csscls('resize-handle')).appendTo(this.$body);
this.recomputeBottomOffset();
// dragging of resize handle
@ -397,13 +426,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// 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() {
self.minimize();
});
// 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() {
self.openHandler.show(function(id, dataset) {
self.addDataSet(dataset, id, "(opened)");
@ -412,7 +441,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
// 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() {
self.dataChangeHandler(self.datasets[this.value]);
self.showTab();
@ -620,14 +649,14 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$minimizebtn.show();
this.recomputeBottomOffset();
$(this.$header).find('> .active').removeClass('active');
$(this.$body).find('> .active').removeClass('active');
$(this.$header).find('> .' + csscls('active')).removeClass(csscls('active'));
$(this.$body).find('> .' + csscls('active')).removeClass(csscls('active'));
this.controls[name].$tab.addClass('active');
this.controls[name].$el.addClass('active');
this.controls[name].$tab.addClass(csscls('active'));
this.controls[name].$el.addClass(csscls('active'));
this.activePanelName = name;
this.$el.removeClass('minimized');
this.$el.removeClass(csscls('minimized'));
localStorage.setItem('phpdebugbar-visible', '1');
localStorage.setItem('phpdebugbar-tab', name);
},
@ -638,13 +667,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
*/
minimize: function() {
this.$header.find('> .active').removeClass('active');
this.$header.find('> .' + csscls('active')).removeClass(csscls('active'));
this.$body.hide();
this.$minimizebtn.hide();
this.$resizehdle.hide();
this.recomputeBottomOffset();
localStorage.setItem('phpdebugbar-visible', '0');
this.$el.addClass('minimized');
this.$el.addClass(csscls('minimized'));
},
/**
@ -653,7 +682,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @return {Boolean}
*/
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 {
position: absolute;
position: fixed;
left: 0;
top: 0;
width: 100%;
@ -10,7 +10,7 @@ div.phpdebugbar-openhandler-overlay {
}
div.phpdebugbar-openhandler {
position: absolute;
position: fixed;
margin: auto;
top: 0;
bottom: 0;
@ -26,7 +26,7 @@ div.phpdebugbar-openhandler {
font-size: 14px;
padding-bottom: 10px;
}
div.phpdebugbar-openhandler .header {
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header {
background: #efefef url(php-icon.png) no-repeat 5px 4px;
padding-left: 29px;
min-height: 26px;
@ -34,7 +34,7 @@ div.phpdebugbar-openhandler {
color: #555;
margin-bottom: 10px;
}
div.phpdebugbar-openhandler .header a {
div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
font-size: 14px;
color: #555;
text-decoration: none;
@ -50,11 +50,11 @@ div.phpdebugbar-openhandler {
text-align: center;
border-bottom: 1px solid #ddd;
}
div.phpdebugbar-openhandler .actions {
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions {
text-align: center;
padding: 7px 0;
}
div.phpdebugbar-openhandler .actions a {
div.phpdebugbar-openhandler .phpdebugbar-openhandler-actions a {
margin: 0 10px;
color: #555;
}

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

@ -6,6 +6,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
(function($) {
var csscls = function(cls) {
return PhpDebugBar.utils.csscls(cls, 'phpdebugbar-openhandler-');
};
PhpDebugBar.OpenHandler = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-openhandler',
@ -20,9 +24,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$el.appendTo('body').hide();
this.$closebtn = $('<a href="javascript:"><i class="icon-remove"></i></a>');
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);
this.$actions = $('<div class="actions" />').appendTo(this.$el);
this.$actions = $('<div />').addClass(csscls('actions')).appendTo(this.$el);
this.$closebtn.on('click', function() {
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() {
self.hide();
});

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

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

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

@ -39,6 +39,16 @@ if (typeof(PhpDebugBar) == 'undefined') {
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
@ -55,7 +65,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'ul',
className: 'phpdebugbar-widgets-list',
className: csscls('list'),
initialize: function(options) {
if (!options['itemRenderer']) {
@ -73,7 +83,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
var data = this.get('data');
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]);
}
});
@ -104,7 +114,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'dl',
className: 'phpdebugbar-widgets-kvlist',
className: csscls('kvlist'),
render: function() {
this.bindAttr(['itemRenderer', 'data'], function() {
@ -115,8 +125,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
var self = this;
$.each(this.get('data'), function(key, value) {
var dt = $('<dt class="key" />').appendTo(self.$el);
var dd = $('<dd class="value" />').appendTo(self.$el);
var dt = $('<dt />').addClass(csscls('key')).appendTo(self.$el);
var dd = $('<dd />').addClass(csscls('value')).appendTo(self.$el);
self.get('itemRenderer')(dt, dd, key, value);
});
});
@ -148,7 +158,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
var VariableListWidget = PhpDebugBar.Widgets.VariableListWidget = KVListWidget.extend({
className: 'phpdebugbar-widgets-kvlist phpdebugbar-widgets-varlist',
className: csscls('kvlist varlist'),
itemRenderer: function(dt, dd, key, value) {
dt.text(key);
@ -158,10 +168,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
v = v.substr(0, 100) + "...";
}
dd.text(v).click(function() {
if (dd.hasClass('pretty')) {
dd.text(v).removeClass('pretty');
if (dd.hasClass(csscls('pretty'))) {
dd.text(v).removeClass(csscls('pretty'));
} else {
dd.html(htmlize(value)).addClass('pretty');
dd.html(htmlize(value)).addClass(csscls('pretty'));
}
});
}
@ -180,7 +190,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'iframe',
className: 'phpdebugbar-widgets-iframe',
className: csscls('iframe'),
render: function() {
this.$el.attr({
@ -209,7 +219,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
var MessagesWidget = PhpDebugBar.Widgets.MessagesWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-messages',
className: csscls('messages'),
render: function() {
var self = this;
@ -220,28 +230,28 @@ if (typeof(PhpDebugBar) == 'undefined') {
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) {
li.css('cursor', 'pointer').click(function() {
if (val.hasClass('pretty')) {
val.text(m).removeClass('pretty');
if (val.hasClass(csscls('pretty'))) {
val.text(m).removeClass(csscls('pretty'));
} else {
val.html(htmlize(value.message)).addClass('pretty');
val.html(htmlize(value.message)).addClass(csscls('pretty'));
}
});
}
if (value.label) {
val.addClass(value.label);
$('<span class="label" />').text(value.label).appendTo(li);
val.addClass(csscls(value.label));
$('<span />').addClass(csscls('label')).text(value.label).appendTo(li);
}
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.$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" />')
.on('change', function() { self.set('search', this.value); })
@ -249,7 +259,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.bindAttr('data', function(data) {
this.set({ exclude: [], search: '' });
this.$toolbar.find('.filter').remove();
this.$toolbar.find(csscls('.filter')).remove();
var filters = [], self = this;
for (var i = 0; i < data.length; i++) {
@ -257,7 +267,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
continue;
}
filters.push(data[i].label);
$('<a class="filter" href="javascript:" />')
$('<a href="javascript:" />')
.addClass(csscls('filter'))
.text(data[i].label)
.attr('rel', data[i].label)
.on('click', function() { self.onFilterClick(this); })
@ -282,10 +293,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
},
onFilterClick: function(el) {
$(el).toggleClass('excluded');
$(el).toggleClass(csscls('excluded'));
var excludedLabels = [];
this.$toolbar.find('.filter.excluded').each(function() {
this.$toolbar.find(csscls('.filter') + csscls('.excluded')).each(function() {
excludedLabels.push(this.rel);
});
@ -306,19 +317,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
tagName: 'ul',
className: 'phpdebugbar-widgets-timeline',
className: csscls('timeline'),
render: function() {
this.bindAttr('data', function(data) {
this.$el.empty();
if (data.measures) {
for (var i = 0; i < data.measures.length; i++) {
var li = $('<li class="measure" />');
li.append($('<span class="value" />').css({
var li = $('<li />').addClass(csscls('measure'));
li.append($('<span />').addClass(csscls('value')).css({
left: Math.round(data.measures[i].relative_start * 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);
}
}
@ -337,19 +348,19 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
var ExceptionsWidget = PhpDebugBar.Widgets.ExceptionsWidget = PhpDebugBar.Widget.extend({
className: 'phpdebugbar-widgets-exceptions',
className: csscls('exceptions'),
render: function() {
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) {
$('<span class="filename" />').text(e.file + "#" + e.line).appendTo(li);
$('<span />').addClass(csscls('filename')).text(e.file + "#" + e.line).appendTo(li);
}
if (e.type) {
$('<span class="type" />').text(e.type).appendTo(li);
$('<span />').addClass(csscls('type')).text(e.type).appendTo(li);
}
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() {
if (file.is(':visible')) {
file.hide();
@ -364,7 +375,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.bindAttr('data', function(data) {
this.$list.set('data', data);
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({
className: 'phpdebugbar-widgets-sqlqueries',
className: csscls('sqlqueries'),
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) {
$('<span class="sql" />').text(stmt.sql).appendTo(li);
$('<span />').addClass(csscls('sql')).text(stmt.sql).appendTo(li);
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) {
$('<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) {
li.addClass('error');
li.append($('<span class="error" />').text("[" + stmt.error_code + "] " + stmt.error_message));
li.addClass(csscls('error'));
li.append($('<span />').addClass(csscls('error')).text("[" + stmt.error_code + "] " + stmt.error_message));
} 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) {
$('<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)) {
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) {
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() {
if (table.is(':visible')) {
table.hide();
@ -431,10 +441,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
t.append(", " + data.nb_failed_statements + " of which failed");
}
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) {
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({
className: 'phpdebugbar-widgets-templates',
className: csscls('templates'),
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) {
$('<span class="name" />').text(tpl.name).appendTo(li);
$('<span />').addClass(csscls('name')).text(tpl.name).appendTo(li);
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);
@ -468,7 +478,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$list.set('data', data.templates);
this.$status.empty().append($('<span />').text(data.templates.length + " templates were rendered"));
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({
className: 'phpdebugbar-widgets-mails',
className: csscls('mails'),
render: function() {
this.$list = new ListWidget({ itemRenderer: function(li, mail) {
$('<span class="subject" />').text(mail.subject).appendTo(li);
$('<span class="to" />').text(mail.to).appendTo(li);
$('<span />').addClass(csscls('subject')).text(mail.subject).appendTo(li);
$('<span />').addClass(csscls('to')).text(mail.to).appendTo(li);
if (mail.headers) {
var headers = $('<pre class="headers" />').appendTo(li);
var headers = $('<pre />').addClass(csscls('headers')).appendTo(li);
$('<code />').text(mail.headers).appendTo(headers);
li.click(function() {
if (headers.is(':visible')) {