From 8b54ab375085ea9f15392966330a2934ad535416 Mon Sep 17 00:00:00 2001 From: "Barry vd. Heuvel" Date: Tue, 19 Mar 2024 20:52:24 +0100 Subject: [PATCH] visualize active tab, show badges --- src/DebugBar/Resources/debugbar.css | 24 ++++++++++- src/DebugBar/Resources/debugbar.js | 23 ++++++---- src/DebugBar/Resources/widgets.js | 65 +++++++++++++++++++++++++---- 3 files changed, 94 insertions(+), 18 deletions(-) diff --git a/src/DebugBar/Resources/debugbar.css b/src/DebugBar/Resources/debugbar.css index daf64b8..37667c1 100644 --- a/src/DebugBar/Resources/debugbar.css +++ b/src/DebugBar/Resources/debugbar.css @@ -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; diff --git a/src/DebugBar/Resources/debugbar.js b/src/DebugBar/Resources/debugbar.js index eb64271..91d98b7 100644 --- a/src/DebugBar/Resources/debugbar.js +++ b/src/DebugBar/Resources/debugbar.js @@ -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 = $('
').addClass(csscls('header-left')).appendTo(this.$header); - this.$headerRight = $('
').addClass(csscls('header-right')).addClass(csscls('mini-design')).appendTo(this.$header); + this.$headerRight = $('
').addClass(csscls('header-right')).appendTo(this.$header); var $body = this.$body = $('
').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); }, /** diff --git a/src/DebugBar/Resources/widgets.js b/src/DebugBar/Resources/widgets.js index c9eba3e..20d47be 100644 --- a/src/DebugBar/Resources/widgets.js +++ b/src/DebugBar/Resources/widgets.js @@ -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 = $('') .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 = $(''); - $('
DateMethodURL
') + $('
DateMethodURLData
') .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 = $('').appendTo(widget.$table) + var $badges = $(''); + var tr = $('') + .appendTo(widget.$table) + .attr('data-id', meta['id']) .append('' + meta['datetime'] + '') .append('' + meta['method'] + '') .append($('').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 = $('').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)) {