Skip to content

Commit

Permalink
Add dataset tab instead of dropdown (#627)
Browse files Browse the repository at this point in the history 
* Add dataset tab

* Simplify

* TWeak mini

* Use table, render once

* Styling and clear button

* Add filtering/search

* Overflow uri

* Autoshow toggle

* Cleanup

* use SessionStorage to remember flag

* Sticky actions

* visualize active tab, show badges

* Add nb/suffix

* Use localstorage

* Sort requests

* Tweak width

* Track history

* Stay on panel

* Make configurable
  • Loading branch information
@barryvdh
barryvdh committed Mar 20, 2024
1 parent 9ffd072 commit 6cfc9ae
Show file tree
Hide file tree
Showing 4 changed files with 347 additions and 13 deletions.
30 changes: 30 additions & 0 deletions src/DebugBar/JavascriptRenderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,8 @@ class JavascriptRenderer

protected $ajaxHandlerAutoShow = true;

protected $ajaxHandlerEnableTab = false;

protected $openHandlerClass = 'PhpDebugBar.OpenHandler';

protected $openHandlerUrl;
Expand Down Expand Up @@ -179,6 +181,9 @@ public function setOptions(array $options)
if (array_key_exists('ajax_handler_auto_show', $options)) {
$this->setAjaxHandlerAutoShow($options['ajax_handler_auto_show']);
}
if (array_key_exists('ajax_handler_enable_tab', $options)) {
$this->setAjaxHandlerEnableTab($options['ajax_handler_enable_tab']);
}
if (array_key_exists('open_handler_classname', $options)) {
$this->setOpenHandlerClass($options['open_handler_classname']);
}
Expand Down Expand Up @@ -571,6 +576,28 @@ public function isAjaxHandlerAutoShow()
return $this->ajaxHandlerAutoShow;
}

/**
* Sets whether new ajax debug data will be shown in a separate tab instead of dropdown.
*
* @param boolean $enabled
*/
public function setAjaxHandlerEnableTab($enabled = true)
{
$this->ajaxHandlerEnableTab = $enabled;
return $this;
}

/**
* Check if the Ajax Handler History tab is enabled
*
* @return boolean
*/
public function isAjaxHandlerTabEnabled()
{
return $this->ajaxHandlerEnableTab;
}


/**
* Sets the class name of the js open handler
*
Expand Down Expand Up @@ -1167,6 +1194,9 @@ protected function getJsControlsDefinitionCode($varname)
// activate state restoration
$js .= sprintf("%s.restoreState();\n", $varname);

if ($this->ajaxHandlerEnableTab) {
$js .= sprintf("%s.enableAjaxHandlerTab();\n", $varname);
}
return $js;
}

Expand Down
59 changes: 59 additions & 0 deletions src/DebugBar/Resources/debugbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,3 +311,62 @@ div.phpdebugbar-mini-design a.phpdebugbar-tab {
div.phpdebugbar-mini-design a.phpdebugbar-tab i {
display:inline-block;
}

/* -------------------------------------- */

.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;
}
.phpdebugbar-widgets-dataset-history table th {
font-weight: bold;
}
.phpdebugbar-widgets-dataset-history table td, .phpdebugbar-widgets-dataset-history table th {
padding: 6px 3px;
border-bottom: 1px solid #ddd;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.phpdebugbar-widgets-dataset-history table td a{
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;
position: sticky;
top: 0;
background: #fff;
}
.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions a {
margin: 0 10px;
}
.phpdebugbar-widgets-dataset-history .phpdebugbar-widgets-dataset-actions input {
appearance: checkbox !important;
margin: 5px;
}
67 changes: 54 additions & 13 deletions src/DebugBar/Resources/debugbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
suffix = '';
}

var nb = getObjectSize(this.debugbar.datasets) + 1;
var nb = getObjectSize(this.debugbar.datasets) ;

if (typeof(data['__meta']) === 'undefined') {
return "#" + nb + suffix;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -455,7 +456,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
}

var currentSize = this.$header.width();
var cssClass = "phpdebugbar-mini-design";
var cssClass = csscls("mini-design");
var bool = this.$header.hasClass(cssClass);

if (currentSize <= contentSize && !bool) {
Expand Down Expand Up @@ -630,7 +631,7 @@ if (typeof(PhpDebugBar) == 'undefined') {
}

var self = this;
tab.$tab.appendTo(this.$headerLeft).click(function() {
tab.$tab.appendTo( this.$headerLeft).click(function() {
if (!self.isMinimized() && self.activePanelName == name) {
self.minimize();
} else {
Expand Down Expand Up @@ -939,18 +940,29 @@ if (typeof(PhpDebugBar) == 'undefined') {
return;
}

var label = this.datesetTitleFormater.format(id, data, suffix);
id = id || (getObjectSize(this.datasets) + 1);
var nb = getObjectSize(this.datasets) + 1;
id = id || nb;
data.__meta['nb'] = nb;
data.__meta['suffix'] = suffix;
this.datasets[id] = data;

this.$datasets.append($('<option value="' + id + '">' + label + '</option>'));
if (this.$datasets.children().length > 1) {
this.$datasets.show();
}
var label = this.datesetTitleFormater.format(id, this.datasets[id], suffix);

if (typeof(show) == 'undefined' || show) {
this.showDataSet(id);
this.showDataSet(id, label);
}

if (this.datasetTab) {
this.datasetTab.set('data', this.datasets);
this.datasetTab.set('badge', getObjectSize(this.datasets));
this.datasetTab.$tab.show();
} else {
this.$datasets.append($('<option value="' + id + '">' + label + '</option>'));
if (this.$datasets.children().length > 1) {
this.$datasets.show();
}
}

return id;
},

Expand Down Expand Up @@ -989,9 +1001,13 @@ if (typeof(PhpDebugBar) == 'undefined') {
* @this {DebugBar}
* @param {String} id
*/
showDataSet: function(id) {
showDataSet: function(id, label) {
this.dataChangeHandler(this.datasets[id]);
this.$datasets.val(id);
this.activeDatasetId = id;

if (this.datasetTab) {
this.datasetTab.set('title', label);
}
},

/**
Expand Down Expand Up @@ -1037,7 +1053,24 @@ if (typeof(PhpDebugBar) == 'undefined') {
*/
getOpenHandler: function() {
return this.openHandler;
}
},

enableAjaxHandlerTab: function() {
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.insertAfter(this.$openbtn).hide();
this.datasetTab.$tab.click(() => {
if (!this.isMinimized() && self.activePanelName == '__datasets') {
this.minimize();
} else {
this.showTab('__datasets');
}
});
this.datasetTab.$el.appendTo(this.$body);
this.controls['__datasets'] = this.datasetTab;
},

});

Expand All @@ -1057,6 +1090,9 @@ if (typeof(PhpDebugBar) == 'undefined') {
this.debugbar = debugbar;
this.headerName = headerName || 'phpdebugbar';
this.autoShow = typeof(autoShow) == 'undefined' ? true : autoShow;
if (localStorage.getItem('phpdebugbar-ajaxhandler-autoshow') !== null) {
this.autoShow = localStorage.getItem('phpdebugbar-ajaxhandler-autoshow') == '1';
}
};

$.extend(AjaxHandler.prototype, {
Expand Down Expand Up @@ -1097,6 +1133,11 @@ if (typeof(PhpDebugBar) == 'undefined') {
return Object.prototype.toString.call(response) == '[object XMLHttpRequest]'
},

setAutoShow: function(autoshow) {
this.autoShow = autoshow;
localStorage.setItem('phpdebugbar-ajaxhandler-autoshow', autoshow ? '1' : '0');
},

/**
* Checks if the HEADER-id exists and loads the dataset using the open handler
*
Expand Down

0 comments on commit 6cfc9ae

Please sign in to comment.