/* * This file is part of the TYPO3 CMS project. * * It is free software; you can redistribute it and/or modify it under * the terms of the GNU General Public License, either version 2 * of the License, or any later version. * * For the full copyright and license information, please read the * LICENSE.txt file that was distributed with this source code. * * The TYPO3 project - inspiring people to share! */ import $ from 'jquery'; /** * Module: TYPO3/CMS/Backend/DebugConsole * The debug console shown at the bottom of the backend * @exports TYPO3/CMS/Backend/DebugConsole */ class DebugConsole { private $consoleDom: any; private settings: any = { autoscroll: true, }; /** * Increment the counter of unread messages in the given tab * * @param {JQuery} $tab */ private static incrementInactiveTabCounter($tab: JQuery): void { if (!$tab.hasClass('active')) { const $badge = $tab.find('.badge'); let value = parseInt($badge.text(), 10); if (isNaN(value)) { value = 0; } $badge.text(++value); } } constructor() { $((): void => { this.createDom(); }); } /** * Add the debug message to the console * * @param {String} message * @param {String} header * @param {String} [group=Debug] */ public add(message: string, header: string, group: string): void { this.attachToViewport(); const $line = $('
').html(message); if (typeof header !== 'undefined' && header.length > 0) { $line.prepend($('').text(header)); } if (typeof group === 'undefined' || group.length === 0) { group = 'Debug'; } const tabIdentifier = 'debugtab-' + group.toLowerCase().replace(/\W+/g, '-'); const $debugTabs = this.$consoleDom.find('.t3js-debuggroups'); const $tabContent = this.$consoleDom.find('.t3js-debugcontent'); let $tab = this.$consoleDom.find('.t3js-debuggroups li[data-identifier=' + tabIdentifier + ']'); // check if group tab exists if ($tab.length === 0) { // create new tab $tab = $('', {role: 'presentation', class: 'nav-item', 'data-identifier': tabIdentifier}).append( $('', { 'aria-controls': tabIdentifier, 'data-bs-toggle': 'tab', class: 'nav-link', href: '#' + tabIdentifier, role: 'tab', }).text(group + ' ').append( $('', {'class': 'badge'}), ), ).on('shown.bs.tab', (e: Event) => { $(e.currentTarget).find('.badge').text(''); }); $debugTabs.append($tab); $tabContent.append( $('', {role: 'tabpanel', 'class': 'tab-pane', id: tabIdentifier}).append( $('', {'class': 't3js-messages messages'}), ), ); } // activate the first tab if no one is active if ($debugTabs.find('.active').length === 0) { $debugTabs.find('a:first').tab('show'); } DebugConsole.incrementInactiveTabCounter($tab); this.incrementUnreadMessagesIfCollapsed(); const $messageBox = $('#' + tabIdentifier + ' .t3js-messages'); const isMessageBoxActive = $messageBox.parent().hasClass('active'); $messageBox.append($line); if (this.settings.autoscroll && isMessageBoxActive) { $messageBox.scrollTop($messageBox.prop('scrollHeight')); } } private createDom(): void { if (typeof this.$consoleDom !== 'undefined') { return; } this.$consoleDom = $('', {id: 'typo3-debug-console'}).append( $('', {'class': 't3js-topbar topbar'}).append( $('', {'class': 'pull-left'}).text(' TYPO3 Debug Console').prepend( $('', {'class': 'fa fa-terminal topbar-icon'}), ).append( $('', {'class': 'badge'}), ), $('', {'class': 't3js-buttons btn-group pull-right'}), ), $('').append( $('', {role: 'tabpanel'}).append( $('