mirror_php/php-debugbar
1
0
Fork 0
mirror of https://github.com/maximebf/php-debugbar.git synced 2025-07-24 10:12:54 +02:00
Code Issues Releases Wiki Activity

visualize active tab, show badges

Browse Source
This commit is contained in:
Barry vd. Heuvel
2024-03-19 20:52:24 +01:00
parent 7c8ca409d6
commit 8b54ab3750
3 changed files with 94 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -314,6 +314,13 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
/* -------------------------------------- */
.phpdebugbar-tab-history .phpdebugbar-text {
display: inline-flex;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phpdebugbar-widgets-dataset-history table {
width: 100%;
table-layout: fixed;
@@ -329,11 +336,26 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
white-space: nowrap;
}
.phpdebugbar-widgets-dataset-history table td a{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.phpdebugbar-widgets-dataset-history table tr.phpdebugbar-widgets-active {
background: #ccc;
color: #444;
}
.phpdebugbar-widgets-dataset-history span.phpdebugbar-badge {
margin: 0 5px 0 2px;
font-size: 11px;
line-height: 14px;
padding: 0 6px;
background: #ccc;
border-radius: 4px;
color: #555;
font-weight: normal;
text-shadow: none;
vertical-align: middle;
}
.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions {
text-align: center;
padding: 7px 0;

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

@@ -422,6 +422,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.datasets = {};
this.firstTabName = null;
this.activePanelName = null;
this.activeDatasetId = null;
this.datesetTitleFormater = new DatasetTitleFormater(this);
this.options.bodyMarginBottomHeight = parseInt($('body').css('margin-bottom'));
this.hasParent = window.parent && window.parent !== window.top
@@ -490,7 +491,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
self.close();
});
this.$headerLeft = $('<div />').addClass(csscls('header-left')).appendTo(this.$header);
this.$headerRight = $('<div />').addClass(csscls('header-right')).addClass(csscls('mini-design')).appendTo(this.$header);
this.$headerRight = $('<div />').addClass(csscls('header-right')).appendTo(this.$header);
var $body = this.$body = $('<div />').addClass(csscls('body')).appendTo(this.$el);
this.recomputeBottomOffset();
@@ -544,8 +545,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
});
});
this.datasetTab = new PhpDebugBar.DebugBar.Tab({"icon":"history", "title":"Request history", "widget": new PhpDebugBar.Widgets.DatasetWidget()});
this.datasetTab.initialize();
this.datasetTab = new PhpDebugBar.DebugBar.Tab({"icon":"history", "title":"Request history", "widget": new PhpDebugBar.Widgets.DatasetWidget({
'debugbar': this
})});
this.datasetTab.$tab.addClass(csscls('tab-history'));
this.datasetTab.$tab.appendTo( this.$headerRight).hide();
this.datasetTab.$tab.click(function() {
if (!self.isMinimized() && self.activePanelName == '__datasets') {
@@ -944,17 +947,17 @@ if (typeof(PhpDebugBar) == 'undefined') {
return;
}
var label = this.datesetTitleFormater.format(id, data, suffix);
id = id || (getObjectSize(this.datasets) + 1);
this.datasets[id] = data;
if (typeof(show) == 'undefined' || show) {
this.showDataSet(id, suffix);
}
this.datasetTab.set('data', this.datasets);
this.datasetTab.set('badge', getObjectSize(this.datasets));
this.datasetTab.$tab.show();
if (typeof(show) == 'undefined' || show) {
this.showDataSet(id);
}
return id;
},
@@ -993,8 +996,12 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
* @param {String} id
*/
showDataSet: function(id) {
showDataSet: function(id, suffix) {
this.dataChangeHandler(this.datasets[id]);
this.activeDatasetId = id;
var label = this.datesetTitleFormater.format(id, this.datasets[id], suffix);
this.datasetTab.set('title', label);
},
/**

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

@@ -105,6 +105,17 @@ if (typeof(PhpDebugBar) == 'undefined') {
return pre;
};
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]]) {
return default_value;
}
d = d[parts[i]];
}
return d;
}
// ------------------------------------------------------------------
// Generic widgets
// ------------------------------------------------------------------
@@ -669,8 +680,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$autoshow = $('<input type=checkbox>')
.on('click', function() {
if (window.phpdebugbar.ajaxHandler) {
window.phpdebugbar.ajaxHandler.setAutoShow($(this).is(':checked'));
if (self.get('debugbar').ajaxHandler) {
self.get('debugbar').ajaxHandler.setAutoShow($(this).is(':checked'));
}
});
@@ -704,7 +715,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.$table = $('<tbody />');
$('<table><thead><tr><th style="width: 175px;">Date</th><th style="width: 80px;">Method</th><th>URL</th></tr></thead></table>')
$('<table><thead><tr><th style="width: 175px;">Date</th><th style="width: 80px;">Method</th><th>URL</th><th width="40%">Data</th></tr></thead></table>')
.append(this.$table)
.appendTo(this.$el);
@@ -725,8 +736,8 @@ if (typeof(PhpDebugBar) == 'undefined') {
render: function() {
this.bindAttr(['data'], function() {
if (this.get('autoshow') === null && phpdebugbar.ajaxHandler) {
this.set('autoshow', phpdebugbar.ajaxHandler.autoShow);
if (this.get('autoshow') === null && this.get('debugbar').ajaxHandler) {
this.set('autoshow', this.get('debugbar').ajaxHandler.autoShow);
}
if (!this.has('data')) {
@@ -741,6 +752,10 @@ if (typeof(PhpDebugBar) == 'undefined') {
}
this.get('itemRenderer')(this, data);
// Switch active tab
this.$table.find('.' + csscls('active')).removeClass(csscls('active'));
this.$table.find('tr[data-id=' + this.get('debugbar').activeDatasetId+']').addClass(csscls('active'));
});
this.bindAttr(['itemRenderer', 'search', 'method'], function() {
this.renderDatasets();
@@ -756,19 +771,51 @@ if (typeof(PhpDebugBar) == 'undefined') {
*
* @param {Object} value An item from the data array
*/
itemRenderer: function(widget, value) {
var meta = value.__meta;
itemRenderer: function(widget, data) {
var meta = data.__meta;
var tr = $('<tr />').appendTo(widget.$table)
var $badges = $('<td />');
var tr = $('<tr />')
.appendTo(widget.$table)
.attr('data-id', meta['id'])
.append('<td>' + meta['datetime'] + '</td>')
.append('<td>' + meta['method'] + '</td>')
.append($('<td />').append(meta['uri']))
.css('cursor', 'pointer')
.on('click', function() {
window.phpdebugbar.showDataSet(meta['id']);
widget.get('debugbar').showDataSet(meta['id']);
widget.$table.find('.' + csscls('active')).removeClass(csscls('active'));
tr.addClass(csscls('active'));
})
.addClass(csscls('table-row'))
var debugbar = widget.get('debugbar');
$.each(debugbar.dataMap, function(key, def) {
var d = getDictValue(data, def[0], def[1]);
if (key.indexOf(':') != -1) {
key = key.split(':');
if (key[1] === 'badge' && d > 0) {
var control = debugbar.getControl(key[0]);
var $a = $('<a>').attr('title', control.get('title'));
if (control.$icon) {
$a.append(debugbar.getControl(key[0]).$icon.clone());
}
if (control.$badge) {
$a.append(debugbar.getControl(key[0]).$badge.clone().css('display', 'inline-block').text(d));
}
$a.appendTo($badges);
$a.click(function() {
debugbar.showTab(key[0]);
})
}
}
});
tr.append($badges);
if (debugbar.activeDatasetId === meta['id']) {
tr.addClass(csscls('active'));
}
var search = widget.get('search');
var method = widget.get('method');
if ((search && meta['uri'].indexOf(search) == -1) || (method && meta['method'] !== method)) {