[TASK] Refactor debugger console 50/38050/7
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Mon, 23 Mar 2015 17:14:55 +0000 (18:14 +0100)
committerXavier Perseguers <xavier@typo3.org>
Fri, 3 Apr 2015 13:52:46 +0000 (15:52 +0200)
In our crusade against ExtJS, this patch replaces the
Debugger Console with a brand new RequireJS module.

Resolves: #65956
Releases: master
Change-Id: Id3bde061231afb7b179f6287aa565b55cbebfa3a
Reviewed-on: http://review.typo3.org/38050
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Xavier Perseguers <xavier@typo3.org>
Tested-by: Xavier Perseguers <xavier@typo3.org>
14 files changed:
typo3/sysext/backend/Classes/Controller/BackendController.php
typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/extjs/debugPanel.js [deleted file]
typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewport.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/viewportConfiguration.js
typo3/sysext/core/Classes/Core/GlobalDebugFunctions.php
typo3/sysext/core/Classes/Page/PageRenderer.php
typo3/sysext/core/Classes/Utility/DebugUtility.php
typo3/sysext/core/Documentation/Changelog/master/Deprecation-65956-DebugUtilityDebugRows.rst [new file with mode: 0644]
typo3/sysext/core/Resources/Private/Language/debugger.xlf [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debug_panel.less [deleted file]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debugconsole.less [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/t3skin.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 658825a..6802eef 100644 (file)
@@ -119,7 +119,6 @@ class BackendController {
                        'tabclosemenu' => 'sysext/backend/Resources/Public/JavaScript/extjs/ux/ext.ux.tabclosemenu.js',
                        'notifications' => 'sysext/backend/Resources/Public/JavaScript/notifications.js',
                        'backend' => 'sysext/backend/Resources/Public/JavaScript/backend.js',
-                       'debugPanel' => 'sysext/backend/Resources/Public/JavaScript/extjs/debugPanel.js',
                        'viewport' => 'sysext/backend/Resources/Public/JavaScript/extjs/viewport.js',
                        'iframepanel' => 'sysext/backend/Resources/Public/JavaScript/iframepanel.js',
                        'backendcontentiframe' => 'sysext/backend/Resources/Public/JavaScript/extjs/backendcontentiframe.js',
@@ -147,6 +146,9 @@ class BackendController {
                        Storage.Persistent.load(' . json_encode($GLOBALS['BE_USER']->uc) . ');
                }');
 
+               // load debug console
+               $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DebugConsole');
+
                $this->pageRenderer->addInlineSetting('ShowItem', 'moduleUrl', BackendUtility::getModuleUrl('show_item'));
 
                $this->css = '';
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js b/typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js
new file mode 100644 (file)
index 0000000..e0b0e6c
--- /dev/null
@@ -0,0 +1,267 @@
+/*
+ * 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!
+ */
+
+/**
+ * The debug console shown at the bottom of the backend
+ */
+define('TYPO3/CMS/Backend/DebugConsole', ['jquery'], function ($) {
+       var DebugConsole = {
+               $consoleDom: null,
+               settings: {
+                       autoscroll: true
+               }
+       };
+
+       /**
+        * Initializes the console
+        */
+       DebugConsole.initialize = function() {
+               DebugConsole.createDOM();
+       };
+
+       /**
+        * Create the basic DOM of the Debugger Console
+        */
+       DebugConsole.createDOM = function() {
+               if (DebugConsole.$consoleDom !== null) {
+                       return DebugConsole.$consoleDom;
+               }
+
+               DebugConsole.$consoleDom =
+                       $('<div />', {id: 'typo3-debug-console'}).append(
+                               $('<div />', {class: 't3js-topbar topbar'}).append(
+                                       $('<p />', {class: 'pull-left'}).text(' TYPO3 Debug Console').prepend(
+                                               $('<span />', {class: 'fa fa-terminal topbar-icon'})
+                                       ).append(
+                                               $('<span />', {class: 'badge'})
+                                       ),
+                                       $('<div />', {class: 't3js-buttons btn-group pull-right'})
+                               ),
+                               $('<div />').append(
+                                       $('<div />', {role: 'tabpanel'}).append(
+                                               $('<ul />', {class: 'nav nav-tabs t3js-debuggroups', role: 'tablist'})
+                                       ),
+                                       $('<div />', {class: 'tab-content t3js-debugcontent'})
+                               )
+                       );
+
+               DebugConsole.addButton(
+                       $('<button />', {class: 'btn btn-default btn-sm ' + (DebugConsole.settings.autoscroll ? 'active' : ''), title: TYPO3.lang['debuggerconsole.autoscroll']}).append(
+                               $('<span />', {class: 't3-icon fa fa-magnet'})
+                       ), function() {
+                               $(this).button('toggle');
+                               DebugConsole.settings.autoscroll = !DebugConsole.settings.autoscroll;
+                       }
+               ).addButton(
+                       $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.toggle.collapse']}).append(
+                               $('<span />', {class: 't3-icon fa fa-chevron-down'})
+                       ), function() {
+                               var $button = $(this),
+                                       $icon = $button.find('.t3-icon'),
+                                       $innerContainer = DebugConsole.$consoleDom.find('.t3js-topbar').next();
+                               $innerContainer.toggle();
+                               if ($innerContainer.is(':visible')) {
+                                       $button.attr('title', TYPO3.lang['debuggerconsole.toggle.collapse']);
+                                       $icon.toggleClass('fa-chevron-down', true).toggleClass('fa-chevron-up', false);
+                                       DebugConsole.resetGlobalUnreadCounter();
+                               } else {
+                                       $button.attr('title', TYPO3.lang['debuggerconsole.toggle.expand']);
+                                       $icon.toggleClass('fa-chevron-down', false).toggleClass('fa-chevron-up', true);
+                               }
+                       }
+               ).addButton(
+                       $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.clear']}).append(
+                               $('<span />', {class: 't3-icon fa fa-undo'})
+                       ), function() {
+                               DebugConsole.flush();
+                       }
+               ).addButton(
+                       $('<button />', {class: 'btn btn-default btn-sm', title: TYPO3.lang['debuggerconsole.close']}).append(
+                               $('<span />', {class: 't3-icon fa fa-times'})
+                       ), function() {
+                               DebugConsole.$consoleDom.remove();
+                               DebugConsole.$consoleDom = null;
+                               DebugConsole.createDOM();
+                       }
+               );
+       };
+
+       /**
+        * Adds a button and it's callback to the console's toolbar
+        */
+       DebugConsole.addButton = function($button, callback) {
+               $button.on('click', callback);
+               DebugConsole.$consoleDom.find('.t3js-buttons').append($button);
+
+               return DebugConsole;
+       };
+
+       /**
+        * Attach the Debugger Console to the viewport
+        */
+       DebugConsole.attachToViewport = function() {
+               var $viewport = $('#typo3-contentContainer');
+               if (!$.contains(DebugConsole.$consoleDom, $viewport)) {
+                       $viewport.append(DebugConsole.$consoleDom);
+               }
+       };
+
+       /**
+        * Add the debug message to the console
+        */
+       DebugConsole.add = function(message, header, group) {
+               DebugConsole.attachToViewport();
+
+               var $line = $('<p />').html(message);
+               if (typeof header !== 'undefined' && header.length > 0) {
+                       $line.prepend($('<strong />').text(header));
+               }
+
+               if (typeof group === 'undefined') {
+                       group = 'Debug';
+               }
+
+               var tabIdentifier = 'debugtab-' + group.toLowerCase().replace(/\W+/g, '-'),
+                       $debugTabs = DebugConsole.$consoleDom.find('.t3js-debuggroups'),
+                       $tabContent = DebugConsole.$consoleDom.find('.t3js-debugcontent'),
+                       $tab = DebugConsole.$consoleDom.find('.t3js-debuggroups li[data-identifier=' + tabIdentifier + ']');
+
+               // check if group tab exists
+               if ($tab.length === 0) {
+                       // create new tab
+                       $tab =
+                               $('<li />', {role: 'presentation', 'data-identifier': tabIdentifier}).append(
+                                       $('<a />', {href: '#' + tabIdentifier, 'aria-controls': tabIdentifier, role: 'tab', 'data-toggle': 'tab'}).text(group + ' ').append(
+                                               $('<span />', {class: 'badge'})
+                                       )
+                               ).on('shown.bs.tab', function() {
+                                       $(this).find('.badge').text('');
+                               });
+                       $debugTabs.append($tab);
+                       $tabContent.append(
+                               $('<div />', {role: 'tabpanel', class: 'tab-pane', id: tabIdentifier}).append(
+                                       $('<div />', {class: 't3js-messages messages'})
+                               )
+                       );
+               }
+
+               DebugConsole.identifyTabLengthPresentationIcon($debugTabs);
+
+               // activate the first tab if no one is active
+               if ($debugTabs.find('.active').length === 0) {
+                       $debugTabs.find('a:first').tab('show');
+               }
+
+               DebugConsole.incrementInactiveTabCounter($tab);
+               DebugConsole.incrementUnreadMessagesIfCollapsed()
+
+               var $messageBox = $('#' + tabIdentifier + ' .t3js-messages');
+               $messageBox.append($line);
+
+               if (DebugConsole.settings.autoscroll) {
+
+                       var activeTabIdentifier = $debugTabs.find('.active').data('identifier'),
+                               $activeMessageBox = $('#' + activeTabIdentifier + ' .t3js-messages');
+                       $activeMessageBox.scrollTop($activeMessageBox[0].scrollHeight);
+               }
+       };
+
+       /**
+        * Gets a proper console icon depending on the amount of tabs
+        */
+       DebugConsole.identifyTabLengthPresentationIcon = function($tabs) {
+               var terminalIcon1 = true,
+                       terminalIcon2 = false;
+
+               if ($tabs.children().length >= 10) {
+                       // too many tabs
+                       // much debug
+                       // so wow
+                       terminalIcon1 = false;
+                       terminalIcon2 = true;
+               }
+               DebugConsole.$consoleDom.find('.topbar-icon').toggleClass('fa-meh-o', terminalIcon2).toggleClass('fa-terminal', terminalIcon1);
+       };
+
+       /**
+        * Increment the counter of unread messages in the given tab
+        */
+       DebugConsole.incrementInactiveTabCounter = function($tab) {
+               if (!$tab.hasClass('active')) {
+                       var $badge = $tab.find('.badge'),
+                               value = parseInt($badge.text());
+
+                       if (isNaN(value)) {
+                               value = 0;
+                       }
+                       $badge.text(++value);
+               }
+       };
+
+       /**
+        * Increment the counter of unread messages in the tabbar
+        */
+       DebugConsole.incrementUnreadMessagesIfCollapsed = function() {
+               var $topbar = DebugConsole.$consoleDom.find('.t3js-topbar'),
+                       $innerContainer = $topbar.next();
+
+               if ($innerContainer.is(':hidden')) {
+                       var $badge = $topbar.find('.badge'),
+                               value = parseInt($badge.text());
+
+                       if (isNaN(value)) {
+                               value = 0;
+                       }
+                       $badge.text(++value);
+               }
+       };
+
+       /**
+        * Reset global unread counter
+        */
+       DebugConsole.resetGlobalUnreadCounter = function() {
+               var $topbar = DebugConsole.$consoleDom.find('.t3js-topbar'),
+                       $badge = $topbar.find('.badge');
+
+               $badge.text('');
+       }
+
+       /**
+        * Reset the console to it's virginity
+        */
+       DebugConsole.flush = function() {
+               var $debugTabs = DebugConsole.$consoleDom.find('.t3js-debuggroups'),
+                       $tabContent = DebugConsole.$consoleDom.find('.t3js-debugcontent');
+
+               $debugTabs.children().remove();
+               $tabContent.children().remove();
+
+               DebugConsole.identifyTabLengthPresentationIcon($debugTabs);
+       };
+
+       /**
+        * Destroy everything of the console
+        */
+       DebugConsole.destroy = function() {
+               DebugConsole.$consoleDom.remove();
+               DebugConsole.$consoleDom = null;
+       };
+
+       return function () {
+               $(document).ready(function() {
+                       DebugConsole.initialize();
+               });
+               TYPO3.DebugConsole = DebugConsole;
+               return DebugConsole;
+       }();
+});
\ No newline at end of file
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/extjs/debugPanel.js b/typo3/sysext/backend/Resources/Public/JavaScript/extjs/debugPanel.js
deleted file mode 100644 (file)
index 2098eaf..0000000
+++ /dev/null
@@ -1,606 +0,0 @@
-/*
- * 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!
- */
-
-Ext.ns('TYPO3');
-
-/**
- * Debug panel based upon the widget tab panel
- *
- * If you want to add a new tab, you can use the addTab or addTabWidget methods. The first one
- * creates the widget itself. If you need the latter one, you must create the widget yourself.
- *
- * The drag&drop functionality introduced a new attribute for the widget that should be added
- * as a tab. It's called "draggableTab" and needs to be set to true, if you want activated
- * drag&drop for the new tab.
- *
- * Additional Features:
- * - Drag&Drop
- * - Close tabs with a simple wheel/middle click
- * - utilization of the tabCloseMenu context menu (several closing options)
- * - Grouping of tabs (Only one nested level allowed!)
- *
- * @author Stefan Galinski <stefan.galinski@gmail.com>
- */
-TYPO3.DebugPanel = Ext.extend(Ext.TabPanel, {
-       /**
-        * Tab Groups
-        *
-        * @var Ext.util.MixedCollection
-        */
-       tabGroups: new Ext.util.MixedCollection(),
-
-       /**
-        * Indicator if the debug panel is wrapped inside a debug panel
-        * @see addTabWidget()
-        *
-        * @var boolean
-        */
-       isTabChildren: false,
-
-       /**
-        * Initializes the widget and merges our defaults with the user-defined ones. The
-        * user-defined settings are preferred.
-        *
-        * @return void
-        */
-       initComponent: function(config) {
-               config = config || {};
-               Ext.apply(this, config, {
-                               // activate general tab navigation with mouse wheel support
-                       enableTabScroll: true,
-                       defaults: {
-                               autoScroll: true
-                       },
-
-                               // add the context menu actions
-                       plugins: new Ext.ux.TabCloseMenu({
-                               closeTabText: TYPO3.LLL.core.tabs_close,
-                               closeOtherTabsText: TYPO3.LLL.core.tabs_closeOther,
-                               closeAllTabsText: TYPO3.LLL.core.tabs_closeAll,
-                               customMenuEntries: [
-                                       '-',
-                                       {
-                                               itemId: 'openInBrowserWindow',
-                                               text: TYPO3.LLL.core.tabs_openInBrowserWindow,
-                                               scope: this,
-                                               handler: function() {
-                                                       var tab = this.plugins.active;
-                                                       var group = '', content = '';
-
-                                                       if (tab.ownerCt.ownerCt instanceof Ext.TabPanel) {
-                                                               group = tab.ownerCt.title;
-                                                               content = tab.body.dom.innerHTML;
-                                                       } else {
-                                                               group = tab.title;
-                                                               tab.items.each(function(item) {
-                                                                       content += item.body.dom.innerHTML;
-                                                               });
-                                                       }
-
-                                                       this.openBrowserWindow(
-                                                               tab.title,
-                                                               content,
-                                                               group
-                                                       );
-                                               }
-                                       }
-                               ]
-                       })
-               });
-
-
-               TYPO3.DebugPanel.superclass.initComponent.call(this);
-       },
-
-       /**
-        * Create a drop arrow indicator for the tab drag&drop feature while rendering
-        * the component
-        *
-        * @return void
-        */
-       onRender: function() {
-               this.arrow = Ext.DomHelper.append(
-                       Ext.getBody(),
-                       '<div class="typo3-debugPanel-dragDropArrowDown">&nbsp;</div>',
-                       true
-               );
-               this.arrow.hide();
-
-               TYPO3.DebugPanel.superclass.onRender.apply(this, arguments);
-       },
-
-       /**
-        * Collapse event
-        *
-        * @return void
-        */
-       onCollapse: function() {
-               TYPO3.DebugPanel.superclass.onCollapse.apply(this, arguments);
-       },
-
-       /**
-        * Expand event
-        *
-        * @return void
-        */
-       onExpand: function() {
-               TYPO3.DebugPanel.superclass.onExpand.apply(this, arguments);
-       },
-
-       /**
-        * Cleanup
-        *
-        * @return void
-        */
-       onDestroy: function() {
-               Ext.destroy(this.arrow);
-               TYPO3.DebugPanel.superclass.onDestroy.call(this);
-       },
-
-       /**
-        * Adds a new tab inside a new debug console tab or inside a new browser window if the
-        * debugInWindow configuration variable is set.
-        *
-        * If you need more possibilites, you should use the addTabWidget method.
-        *
-        * @see addTabWidget()
-        * @param tabContent String content of the new tab
-        * @param header String tab header
-        * @param group String tab group
-        * @param position Integer position of the new tab
-        * @return void
-        */
-       addTab: function(tabContent, header, group, position) {
-               if (TYPO3.configuration.debugInWindow) {
-                       this.openBrowserWindow(header, tabContent, group);
-               } else {
-                       var tabWidget = new Ext.Panel({
-                               title: header,
-                               html: tabContent,
-                               border: false,
-                               autoScroll: true,
-                               closable: true,
-                               draggableTab: true
-                       });
-
-                       this.addTabWidget(tabWidget, group, position);
-               }
-       },
-
-       /**
-        * Adds a new tab to the widget
-        *
-        * You can inject any Ext component, but you need to create it yourself. If you just
-        * want to add some text into a new tab, you should use the addTab function.
-        *
-        * @see addTab()
-        * @param tabWidget Component the component that should be added as a new tab
-        * @param group String tab group
-        * @param position Integer position of the new tab
-        * @return void
-        */
-       addTabWidget: function(tabWidget, group, position) {
-               if (this.hidden) {
-                       this.show();
-               } else if (this.collapsed) {
-                       this.expand();
-               }
-
-                       // Move the widget into a tab group?
-               var tabGroup = this;
-               if (typeof group !== 'undefined' && group !== '' && !this.isTabChildren) {
-                       if (this.tabGroups.indexOfKey(group) === -1) {
-                               tabGroup = new TYPO3.DebugPanel({
-                                       border: false,
-                                       title: group,
-                                       autoScroll: true,
-                                       closable: true,
-                                       isTabChildren: true,
-                                       tabParent: this,
-                                       draggableTab: true
-                               });
-                               this.addTabWidget(tabGroup);
-
-                               this.tabGroups.add(group, tabGroup);
-                       } else {
-                               tabGroup = this.tabGroups.key(group);
-                       }
-               }
-
-                       // recalculate position if necessary
-               if (typeof position === 'undefined') {
-                       position = tabGroup.items.getCount();
-               }
-
-                       // hide the debug panel if the last element is closed
-               tabWidget.on('destroy', function(element) {
-                       if (this.isTabChildren) {
-                               if (!this.items.getCount()) {
-                                       this.tabParent.remove(this.tabParent.tabGroups.key(this.title));
-                               }
-                       } else {
-                               if (!this.items.getCount()) {
-                                       this.hide();
-                                       this.ownerCt.doLayout();
-                               }
-                               this.tabGroups.removeKey(element.title);
-                       }
-               }, tabGroup);
-
-                       // add drag&drop and the wheel click functionality
-               tabWidget.on('afterlayout', function(element) {
-                       Ext.get(this.id + '__' + element.id).on('mousedown', function(event) {
-                               if (!Ext.isIE7) {
-                                       if ((Ext.isIE && event.button === 1) ||
-                                               (!Ext.isIE && event.browserEvent.button === 1)
-                                       ) {
-                                               event.stopEvent();
-                                               this.remove(tabWidget);
-                                               return false;
-                                       }
-                               }
-                               return true;
-                       }, this);
-
-                       if (tabWidget.draggableTab) {
-                               this.initDragAndDropForTab(tabWidget);
-                       }
-               }, tabGroup);
-
-                       // add the widget as a new tab
-               tabGroup.insert(position, tabWidget).show();
-               tabGroup.ownerCt.doLayout();
-       },
-
-       /**
-        * Extends the tab item with drag&drop functionality.
-        *
-        * @param item Component the tab widget
-        * @return void
-        */
-       initDragAndDropForTab: function(item) {
-               item.tabDragZone = new Ext.dd.DragZone(this.id + '__' + item.id, {
-                       ddGroup: this.id,
-
-                       /**
-                        * Reintroduces the simple click event on a tab element.
-                        *
-                        * @return void
-                        */
-                       b4MouseDown : function() {
-                               item.show();
-                               Ext.dd.DragZone.superclass.b4MouseDown.apply(this, arguments);
-                       },
-
-                       /**
-                        * On receipt of a mousedown event, see if it is within a draggable element.
-                        * Return a drag data object if so. The data object can contain arbitrary application
-                        * data, but it should also contain a DOM element in the ddel property to provide
-                        * a proxy to drag.
-                        *
-                        * @param event Ext.EventObject
-                        * @return drag data
-                        */
-                       getDragData: function(event) {
-                               var sourceElement = event.getTarget(item.itemSelector, 10);
-                               if (sourceElement) {
-                                       var dragComponent = sourceElement.cloneNode(true);
-                                       dragComponent.id = Ext.id();
-                                       item.dragData = {
-                                               ddel: dragComponent,
-                                               sourceEl: sourceElement,
-                                               repairXY: Ext.fly(sourceElement).getXY()
-                                       };
-                                       return item.dragData;
-                               }
-
-                               return false;
-                       },
-
-                       /**
-                        * Provide coordinates for the proxy to slide back to on failed drag.
-                        * This is the original XY coordinates of the draggable element.
-                        *
-                        * @return x,y coordinations of the original component position
-                        */
-                       getRepairXY: function() {
-                               return this.dragData.repairXY;
-                       }
-               });
-
-               item.tabDropZone = new Ext.dd.DropZone(this.id + '__' + item.id, {
-                       debugPanel: this,
-                       ddGroup: this.id,
-
-                       /**
-                        * If the mouse is over a tab element, return that node. This is
-                        * provided as the "target" parameter in all "onNodeXXXX" node event
-                        * handling functions
-                        *
-                        * @param event Ext.EventObject
-                        * @return the tab element or boolean false
-                        */
-                       getTargetFromEvent: function(event) {
-                               var tabElement = Ext.get(event.getTarget()).findParentNode('li');
-                               if (tabElement !== null) {
-                                       return tabElement;
-                               }
-
-                               return false;
-                       },
-
-                       /**
-                        * On entry into a target node, highlight that node.
-                        *
-                        * @param target string id of the target element
-                        * @return void
-                        */
-                       onNodeEnter : function(target) {
-                               Ext.get(target).addClass('typo3-debugPanel-dragDropOver');
-                       },
-
-                       /**
-                        * On exit from a target node, unhighlight that node.
-                        *
-                        * @param target string id of the target element
-                        * @return void
-                        */
-                       onNodeOut : function(target) {
-                               Ext.get(target).removeClass('typo3-debugPanel-dragDropOver');
-                               this.debugPanel.arrow.hide();
-                       },
-
-                       /**
-                        * While over a target node, return the default drop allowed class which
-                        * places a "tick" icon into the drag proxy. Also the arrow position is
-                        * recalculated.
-                        *
-                        * @param target string id of the target element
-                        * @param proxy Ext.dd.DDProxy proxy element
-                        * @param event Ext.EventObject
-                        * @return default dropAllowed class or a boolean false
-                        */
-                       onNodeOver : function(target, proxy, event) {
-                                       // set arrow position
-                               var element = Ext.get(target);
-                               var left = 0;
-                               var tabLeft = element.getX();
-                               var tabMiddle = tabLeft + element.dom.clientWidth / 2;
-                               var tabRight = tabLeft + element.dom.clientWidth;
-                               if (event.getPageX() <= tabMiddle) {
-                                       left = tabLeft;
-                               } else {
-                                       left = tabRight;
-                               }
-                               this.debugPanel.arrow.setTop(this.el.getY() - 8).setLeft(left - 9).show();
-
-                                       // drop allowed?
-                               if (proxy.handleElId !== target.id) {
-                                       return Ext.dd.DropZone.prototype.dropAllowed;
-                               }
-
-                               return false;
-                       },
-
-                       /**
-                        * On node drop we move the dragged tab element at the position of
-                        * the dropped element.
-                        *
-                        * @param target string id of the target element
-                        * @param proxy Ext.dd.DDProxy proxy element
-                        * @param event Ext.EventObject
-                        * @return true or false
-                        */
-                       onNodeDrop : function(target, proxy, event) {
-                               if (proxy.handleElId === target.id) {
-                                       return false;
-                               }
-
-                               var dropPanelId = target.id.substring(this.debugPanel.id.length + 2);
-                               var dragPanelId = proxy.handleElId.substring(this.debugPanel.id.length + 2);
-
-                               var dropPanelPosition = this.debugPanel.items.indexOfKey(dropPanelId);
-                               var dragPanelPosition = this.debugPanel.items.indexOfKey(dragPanelId);
-
-                               if (dropPanelPosition !== undefined &&
-                                       dropPanelPosition !== -1 &&
-                                       dropPanelPosition <= this.debugPanel.items.getCount()
-                               ) {
-                                               // calculate arrow position to decide if the elements needs
-                                               // to be inserted on the right or left
-                                       var element = Ext.get(target);
-                                       var tabMiddle = element.getX() + element.dom.clientWidth / 2;
-                                       if (dragPanelPosition > dropPanelPosition) {
-                                               if (event.getPageX() > tabMiddle) {
-                                                       dropPanelPosition += 1;
-                                               }
-                                       } else {
-                                               if (event.getPageX() <= tabMiddle) {
-                                                       dropPanelPosition -= 1;
-                                               }
-                                       }
-
-                                       var dropEl = this.debugPanel.remove(dragPanelId, false);
-                                       this.debugPanel.addTabWidget(dropEl, '', dropPanelPosition);
-                               }
-
-                               this.debugPanel.arrow.hide();
-                               return true;
-                       }
-               });
-       },
-
-       /**
-        * Opens debug output in a new browser window
-        *
-        * @param title string
-        * @param content string
-        * @param group string
-        * @return void
-        */
-       openBrowserWindow: function(title, content, group) {
-               var newWindow = window.open('', 'TYPO3DebugWindow_' + group,
-                       'width=600,height=400,menubar=0,toolbar=1,status=0,scrollbars=1,resizable=1'
-               );
-               if (newWindow.document.body.innerHTML) {
-                       Ext.DomHelper.insertHtml('beforeEnd', newWindow.document.body, '<hr>' + content);
-               } else {
-                       newWindow.document.writeln(
-                               '<html><head><title>Debug: ' + title + '(' + group + ')</title></head>'
-                               + '<body bgcolor=white onLoad="self.focus()">'
-                               + content
-                               + '</body></html>'
-                       );
-               }
-               newWindow.document.close()
-       },
-
-       /**
-        * Wrapper for console.log
-        *
-        * @return void
-        */
-       log: function() {
-               if (arguments.length) {
-                       for (var i = 0; i < arguments.length; i++) {
-                               this.debug(arguments[i], 'Log', 'Javascript Console');
-                       }
-               }
-       },
-
-       /**
-        * Wrapper for console.info
-        *
-        * @return void
-        */
-       info: function() {
-               if (arguments.length) {
-                       for (var i = 0; i < arguments.length; i++) {
-                               this.debug(arguments[i], 'Info', 'Javascript Console');
-                       }
-               }
-       },
-
-       /**
-        * Wrapper for console.warn
-        *
-        * @return void
-        */
-       warn: function() {
-               if (arguments.length) {
-                       for (var i = 0; i < arguments.length; i++) {
-                               this.debug(arguments[i], 'Warning', 'Javascript Console');
-                       }
-               }
-       },
-
-       /**
-        * Wrapper for console.error
-        *
-        * @return void
-        */
-       error: function() {
-               if (arguments.length) {
-                       for (var i = 0; i < arguments.length; i++) {
-                               this.debug(arguments[i], 'Error', 'Javascript Console');
-                       }
-               }
-       },
-
-       /**
-        * Debug output from javascript
-        *
-        * @param out mixed debug output
-        * @param header string
-        * @param group string
-        */
-       debug: function(out, header, group) {
-               var output = this.printObject(out);
-               this.addTab(output, header, group);
-       },
-
-       /**
-        * Converts any string/array/object to a string for printing purposes
-        *
-        * @param object object
-        * @param level integer recursion level counter (max. 3 levels)
-        * @param prefix string internal use!
-        * @return string
-        */
-       printObject: function(object, level, prefix) {
-               var result = '';
-
-               prefix = prefix || '';
-               level = level || 0;
-               if (level >= 3) {
-                       return result;
-               }
-
-               var levelPadding = '';
-               for(var j = 0; j < level + 1; ++j) {
-                       levelPadding += '    ';
-               }
-
-               if (typeof(object) === 'object') {
-                               // Array / Objects
-                       for (var item in object) {
-                               var value = object[item];
-
-                               if (typeof(value) === 'object') {
-                                       result += levelPadding + '"' + prefix + item + '" ...' + "\n";
-                                       result += this.printObject(value, level + 1, prefix + item + '.');
-                               } else {
-                                       result += levelPadding + '"' + prefix + item +
-                                               '" => "' + value + '"' + "\n";
-                               }
-                       }
-               } else {
-                               // Strings/Chars/Numbers etc.
-                       result = '[' + typeof(object) + '] ' + object;
-               }
-
-               return '<pre>' + result + '</pre>';
-       },
-
-       /**
-        * Debug attached events of a given element (e.g. an Ext.Panel component)
-        *
-        * Note: This functionality should be used with an activated debug console like firebug!
-        *
-        * @param element object to fetch events from
-        * @return void
-        */
-       debugEvents: function(element) {
-               if (element) {
-                               // debug events of element
-                       Ext.util.Observable.capture(element, function() {
-                               console.log(
-                                       'event "' + arguments[0] + '" was fired with the following arguments: '
-                               );
-
-                               for (var i = 1; i < arguments.length; ++i) {
-                                       console.log('        [' + i + '] ', arguments[i]);
-                               }
-                       });
-               } else {
-                               // debug all events
-                       Ext.util.Observable.prototype.fireEvent =
-                               Ext.util.Observable.prototype.fireEvent.createInterceptor(function() {
-                                       console.log(arguments);
-                                       return true;
-                               });
-               }
-       }
-});
-
-Ext.reg('typo3DebugPanel', TYPO3.DebugPanel);
index a86a501..3c6163c 100644 (file)
@@ -159,8 +159,6 @@ TYPO3.Viewport = Ext.extend(Ext.Viewport, {
                this.NavigationIframe = Ext.getCmp('typo3-navigationIframe');
                this.Topbar = Ext.getCmp('typo3-topbar');
                this.ModuleMenuContainer = Ext.getCmp('typo3-module-menu');
-               this.DebugConsole = Ext.getCmp('typo3-debug-console');
-
        }
 });
 
index d150799..c2ee804 100644 (file)
@@ -163,23 +163,6 @@ TYPO3.Viewport.configuration = {
                                                        items: TYPO3.Viewport.ContentCards.cards
                                                }
                                        ]
-                               },
-                               {
-                                       region: 'south',
-                                       xtype: 'typo3DebugPanel',
-                                       collapsible: true,
-                                       collapseMode: 'mini',
-                                       collapsed: true,
-                                       hideCollapseTool: true,
-                                       animCollapse: false,
-                                       split: true,
-                                       useSplitTips: true,
-                                       collapsibleSplitTip: top.TYPO3.LLL.viewPort.tooltipDebugPanelSplitDrag,
-                                       autoScroll: true,
-                                       hidden: true,
-                                       height: 200,
-                                       id: 'typo3-debug-console',
-                                       border: false
                                }
                        ]
                }
index 67f9aec..4a97b7e 100644 (file)
@@ -1,18 +1,18 @@
 <?php
-               // Simple debug function which prints output immediately
+       // Simple debug function which prints output immediately
        function xdebug($var = '', $debugTitle = 'xdebug') {
-                       // If you wish to use the debug()-function, and it does not output something,
-                       // please edit the IP mask in TYPO3_CONF_VARS
+               // If you wish to use the debug()-function, and it does not output something,
+               // please edit the IP mask in TYPO3_CONF_VARS
                if (!\TYPO3\CMS\Core\Utility\GeneralUtility::cmpIP(\TYPO3\CMS\Core\Utility\GeneralUtility::getIndpEnv('REMOTE_ADDR'), $GLOBALS['TYPO3_CONF_VARS']['SYS']['devIPmask'])) {
                        return;
                }
                \TYPO3\CMS\Core\Utility\DebugUtility::debug($var, $debugTitle);
        }
 
-               // Debug function which calls $GLOBALS['error'] error handler if available
+       // Debug function which calls $GLOBALS['error'] error handler if available
        function debug($variable = '', $name = '*variable*', $line = '*line*', $file = '*file*', $recursiveDepth = 3, $debugLevel = E_DEBUG) {
-                       // If you wish to use the debug()-function, and it does not output something,
-                       // please edit the IP mask in TYPO3_CONF_VARS
+               // If you wish to use the debug()-function, and it does not output something,
+               // please edit the IP mask in TYPO3_CONF_VARS
                if (!\TYPO3\CMS\Core\Utility\GeneralUtility::cmpIP(\TYPO3\CMS\Core\Utility\GeneralUtility::getIndpEnv('REMOTE_ADDR'), $GLOBALS['TYPO3_CONF_VARS']['SYS']['devIPmask'])) {
                        return;
                }
index d47fdad..69087d0 100644 (file)
@@ -1367,10 +1367,14 @@ class PageRenderer implements \TYPO3\CMS\Core\SingletonInterface {
                                'extDirect_timeoutMessage' => $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_misc.xlf:extDirect_timeoutMessage')
                        ));
                }
+
                $token = ($api = '');
                if (TYPO3_MODE === 'BE') {
                        $formprotection = \TYPO3\CMS\Core\FormProtection\FormProtectionFactory::get();
                        $token = $formprotection->generateToken('extDirect');
+
+                       // Debugger Console strings
+                       $this->addInlineLanguageLabelFile('EXT:core/Resources/Private/Language/debugger.xlf');
                }
                /** @var $extDirect \TYPO3\CMS\Core\ExtDirect\ExtDirectApi */
                $extDirect = GeneralUtility::makeInstance(\TYPO3\CMS\Core\ExtDirect\ExtDirectApi::class);
index 814bc1d..49ea998 100644 (file)
@@ -13,6 +13,7 @@ namespace TYPO3\CMS\Core\Utility;
  *
  * The TYPO3 project - inspiring people to share!
  */
+use TYPO3\CMS\Extbase\Utility\DebuggerUtility;
 
 /**
  * Class to handle debug
@@ -22,24 +23,6 @@ namespace TYPO3\CMS\Core\Utility;
 class DebugUtility {
 
        /**
-        * Template for debug output
-        *
-        * @var string
-        */
-       const DEBUG_TABLE_TEMPLATE = '
-       <table class="typo3-debug" border="0" cellpadding="0" cellspacing="0" bgcolor="white" style="border:0px; margin-top:3px; margin-bottom:3px;">
-               <tr>
-                       <td style="background-color:#bbbbbb; font-family: verdana,arial; font-weight: bold; font-size: 10px;">%s</td>
-               </tr>
-               <tr>
-                       <td>
-                       %s
-                       </td>
-               </tr>
-       </table>
-       ';
-
-       /**
         * Debug
         *
         * @param string $var
@@ -53,41 +36,21 @@ class DebugUtility {
                        ob_start();
                }
                $debug = self::convertVariableToString($var);
-               if ($header) {
-                       $debug = sprintf(self::DEBUG_TABLE_TEMPLATE, htmlspecialchars((string)$header), $debug);
-               }
                if (TYPO3_MODE === 'BE' && !(TYPO3_REQUESTTYPE & TYPO3_REQUESTTYPE_CLI)) {
                        $tabHeader = $header ?: 'Debug';
                        $script = '
                                (function debug() {
-                                       var debugMessage = ' . GeneralUtility::quoteJSvalue($debug) . ';
-                                       var header = ' . GeneralUtility::quoteJSvalue($tabHeader) . ';
-                                       var group = ' . GeneralUtility::quoteJSvalue($group) . ';
-
-                                       if (typeof Ext !== "object" && (top && typeof top.Ext !== "object")) {
-                                               document.write(debugMessage);
-                                               return;
-                                       }
-
-                                       if (top && typeof Ext !== "object") {
-                                               Ext = top.Ext;
-                                       }
-
-                                       Ext.onReady(function() {
-                                               var TYPO3ViewportInstance = null;
-
-                                               if (top && top.TYPO3 && typeof top.TYPO3.Backend === "object") {
-                                                       TYPO3ViewportInstance = top.TYPO3.Backend;
-                                               } else if (typeof TYPO3 === "object" && typeof TYPO3.Backend === "object") {
-                                                       TYPO3ViewportInstance = TYPO3.Backend;
-                                               }
-
-                                               if (TYPO3ViewportInstance !== null) {
-                                                       TYPO3ViewportInstance.DebugConsole.addTab(debugMessage, header, group);
-                                               } else {
-                                                       document.write(debugMessage);
+                                       var message = ' . GeneralUtility::quoteJSvalue($debug) . ',
+                                               header = ' . GeneralUtility::quoteJSvalue($header) . ',
+                                               group = ' . GeneralUtility::quoteJSvalue($group) . ';
+                                       if (top.TYPO3.DebugConsole) {
+                                               top.TYPO3.DebugConsole.add(message, header, group);
+                                       } else {
+                                               var consoleMessage = [group, header, message].join(" | ");
+                                               if (typeof console === "object" && typeof console.log === "function") {
+                                                       console.log(consoleMessage);
                                                }
-                                       });
+                                       };
                                })();
                        ';
                        echo GeneralUtility::wrapJS($script);
@@ -106,13 +69,11 @@ class DebugUtility {
                if (is_array($variable)) {
                        $string = self::viewArray($variable);
                } elseif (is_object($variable)) {
-                       $string = '<strong>|Object:<pre>';
-                       $string .= print_r($variable, TRUE);
-                       $string .= '</pre>|</strong>';
+                       $string = json_encode($variable, TRUE);
                } elseif ((string)$variable !== '') {
-                       $string = '<strong>|' . htmlspecialchars((string)$variable) . '|</strong>';
+                       $string = htmlspecialchars((string)$variable);
                } else {
-                       $string = '<strong>| debug |</strong>';
+                       $string = '| debug |';
                }
                return $string;
        }
@@ -191,50 +152,14 @@ class DebugUtility {
         *
         * @param mixed $rows Array of arrays with similar keys
         * @param string $header Table header
-        * @param bool $returnHTML If TRUE, will return content instead of echo'ing out.
+        * @param bool $returnHTML If TRUE, will return content instead of echo'ing out. Deprecated since TYPO3 CMS 7, will be removed in TYPO3 CMS 8
         * @return void Outputs to browser.
         */
        static public function debugRows($rows, $header = '', $returnHTML = FALSE) {
-               if (is_array($rows)) {
-                       $firstEl = reset($rows);
-                       if (is_array($firstEl)) {
-                               $headerColumns = array_keys($firstEl);
-                               $tRows = array();
-                               // Header:
-                               $tRows[] = '<tr><td colspan="' . count($headerColumns) . '" style="background-color:#bbbbbb; font-family: verdana,arial; font-weight: bold; font-size: 10px;"><strong>' . htmlspecialchars($header) . '</strong></td></tr>';
-                               $tCells = array();
-                               foreach ($headerColumns as $key) {
-                                       $tCells[] = '
-                                                       <td><font face="Verdana,Arial" size="1"><strong>' . htmlspecialchars($key) . '</strong></font></td>';
-                               }
-                               $tRows[] = '
-                                               <tr>' . implode('', $tCells) . '
-                                               </tr>';
-                               // Rows:
-                               foreach ($rows as $singleRow) {
-                                       $tCells = array();
-                                       foreach ($headerColumns as $key) {
-                                               $tCells[] = '
-                                                       <td><font face="Verdana,Arial" size="1">' . (is_array($singleRow[$key]) ? self::debugRows($singleRow[$key], '', TRUE) : htmlspecialchars($singleRow[$key])) . '</font></td>';
-                                       }
-                                       $tRows[] = '
-                                               <tr>' . implode('', $tCells) . '
-                                               </tr>';
-                               }
-                               $table = '
-                                       <table border="1" cellpadding="1" cellspacing="0" bgcolor="white">' . implode('', $tRows) . '
-                                       </table>';
-                               if ($returnHTML) {
-                                       return $table;
-                               } else {
-                                       echo $table;
-                               }
-                       } else {
-                               debug('Empty array of rows', $header);
-                       }
-               } else {
-                       debug('No array of rows', $header);
+               if ($returnHTML !== FALSE) {
+                       GeneralUtility::deprecationLog('Setting the parameter $returnHTML is deprecated since TYPO3 CMS 7 and will be removed in TYPO3 CMS 8.');
                }
+               self::debug(DebuggerUtility::var_dump($rows, $header, 8, FALSE, TRUE, TRUE), $header);
        }
 
        /**
@@ -264,48 +189,7 @@ class DebugUtility {
         * @return string HTML output
         */
        static public function viewArray($array_in) {
-               if (is_array($array_in)) {
-                       $result = '
-                       <table border="1" cellpadding="1" cellspacing="0" bgcolor="white">';
-                       if (count($array_in) == 0) {
-                               $result .= '<tr><td><font face="Verdana,Arial" size="1"><strong>EMPTY!</strong></font></td></tr>';
-                       } else {
-                               foreach ($array_in as $key => $val) {
-                                       $result .= '<tr>
-                                               <td valign="top"><font face="Verdana,Arial" size="1">' . htmlspecialchars((string)$key) . '</font></td>
-                                               <td>';
-                                       if (is_array($val)) {
-                                               $result .= self::viewArray($val);
-                                       } elseif (is_object($val)) {
-                                               $string = '';
-                                               if (method_exists($val, '__toString')) {
-                                                       $string .= get_class($val) . ': ' . (string)$val;
-                                               } else {
-                                                       $string .= print_r($val, TRUE);
-                                               }
-                                               $result .= '<font face="Verdana,Arial" size="1" color="red">' . nl2br(htmlspecialchars($string)) . '<br /></font>';
-                                       } else {
-                                               if (gettype($val) == 'object') {
-                                                       $string = 'Unknown object';
-                                               } else {
-                                                       $string = (string)$val;
-                                               }
-                                               $result .= '<font face="Verdana,Arial" size="1" color="red">' . nl2br(htmlspecialchars($string)) . '<br /></font>';
-                                       }
-                                       $result .= '</td>
-                                       </tr>';
-                               }
-                       }
-                       $result .= '</table>';
-               } else {
-                       $result = '<table border="1" cellpadding="1" cellspacing="0" bgcolor="white">
-                               <tr>
-                                       <td><font face="Verdana,Arial" size="1" color="red">' . nl2br(htmlspecialchars((string)$array_in)) . '<br /></font></td>
-                               </tr>
-                       </table>';
-               }
-               // Output it as a string.
-               return $result;
+               return DebuggerUtility::var_dump($array_in, '', 8, FALSE, TRUE, TRUE);
        }
 
        /**
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Deprecation-65956-DebugUtilityDebugRows.rst b/typo3/sysext/core/Documentation/Changelog/master/Deprecation-65956-DebugUtilityDebugRows.rst
new file mode 100644 (file)
index 0000000..46c0efd
--- /dev/null
@@ -0,0 +1,27 @@
+========================================================================
+Deprecation: #65956 - $returnHTML parameter of DebugUtility::debugRows()
+========================================================================
+
+Description
+===========
+
+The parameter ``$returnHTML`` of the method ``\TYPO3\CMS\Core\Utility\DebugUtility::debugRows()`` is not used anymore and
+has been marked for deprecation.
+
+
+Impact
+======
+
+The parameter is not used anymore.
+
+
+Affected installations
+======================
+
+All method calls using this parameter are affected.
+
+
+Migration
+=========
+
+Remove the parameter in the method call.
\ No newline at end of file
diff --git a/typo3/sysext/core/Resources/Private/Language/debugger.xlf b/typo3/sysext/core/Resources/Private/Language/debugger.xlf
new file mode 100644 (file)
index 0000000..adbaa4e
--- /dev/null
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.0" xmlns:t3="http://typo3.org/schemas/xliff">
+       <file t3:id="1417684108" source-language="en" datatype="plaintext" original="messages" date="2014-12-04T09:12:34Z" product-name="core">
+               <header/>
+               <body>
+                       <trans-unit id="debuggerconsole.autoscroll" xml:space="preserve">
+                               <source>Scroll down automatically</source>
+                       </trans-unit>
+                       <trans-unit id="debuggerconsole.toggle.expand" xml:space="preserve">
+                               <source>Expand</source>
+                       </trans-unit>
+                       <trans-unit id="debuggerconsole.toggle.collapse" xml:space="preserve">
+                               <source>Collapse</source>
+                       </trans-unit>
+                       <trans-unit id="debuggerconsole.clear" xml:space="preserve">
+                               <source>Clear</source>
+                       </trans-unit>
+                       <trans-unit id="debuggerconsole.close" xml:space="preserve">
+                               <source>Close</source>
+                       </trans-unit>
+               </body>
+       </file>
+</xliff>
\ No newline at end of file
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debug_panel.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debug_panel.less
deleted file mode 100644 (file)
index cd4d066..0000000
+++ /dev/null
@@ -1,15 +0,0 @@
-//
-// TYPO3 debug panel
-//
-
-.typo3-debugPanel-dragDropArrowDown {
-       background-image: url('../../../../icons/gfx/arrowdown.png');
-       display: block;
-       visibility: visible;
-       z-index: 20000;
-       position: absolute;
-       width: 16px;
-       height: 16px;
-       top: 0;
-       left: 0;
-}
diff --git a/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debugconsole.less b/typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_debugconsole.less
new file mode 100644 (file)
index 0000000..8245c39
--- /dev/null
@@ -0,0 +1,39 @@
+@console-border-color: darken(@gray-light, 15%);
+#typo3-debug-console {
+       background-color: @gray-lighter;
+       width: 100%;
+       position: absolute;
+       bottom: 0;
+       z-index: 5000;
+       border: 1px solid @console-border-color;
+
+       .topbar {
+               .clearfix();
+               background-color: @gray-light;
+               padding: @padding-base-vertical @padding-base-horizontal;
+               border-bottom: 1px solid @console-border-color;
+
+               .badge {
+                       margin-left: @padding-base-vertical;
+               }
+       }
+
+       .messages {
+               padding: @padding-base-vertical @padding-base-horizontal;
+               font-family: @font-family-monospace;
+               height: 250px;
+               overflow: auto;
+
+               .table {
+                       width: auto;
+               }
+
+               p {
+                       margin: 0;
+
+                       strong {
+                               padding-right: @padding-small-horizontal;
+                       }
+               }
+       }
+}
\ No newline at end of file
index 1116108..a740e7b 100644 (file)
 
 @import "TYPO3/_main_type.less";
 
-@import "TYPO3/_debug_panel.less";
 @import "TYPO3/_element_animation.less";
 @import "TYPO3/_element_clipboard.less";
 @import "TYPO3/_element_csh.less";
 @import "TYPO3/_module_menu.less";
 @import "TYPO3/_module_web_page.less";
 @import "TYPO3/_topbar.less";
+@import "TYPO3/_debugconsole.less";
 
 @import "TYPO3/_module_web_list_sysnote.less";
 @import "TYPO3/_module_web_new_element.less";
index 4ed34c5..9a3a4a1 100644 (file)
@@ -7742,17 +7742,6 @@ a img {
     margin-left: 135px;
   }
 }
-.typo3-debugPanel-dragDropArrowDown {
-  background-image: url('../../../../icons/gfx/arrowdown.png');
-  display: block;
-  visibility: visible;
-  z-index: 20000;
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  top: 0;
-  left: 0;
-}
 .collapse-horizontal {
   height: auto;
   width: 0;
@@ -11529,6 +11518,53 @@ fieldset[disabled] .live-search-list .x-btn button.active {
   margin-top: 0.5em;
   margin-bottom: 0;
 }
+#typo3-debug-console {
+  background-color: #f5f5f5;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  z-index: 5000;
+  border: 1px solid #b1b1b1;
+}
+#typo3-debug-console .topbar {
+  background-color: #d7d7d7;
+  padding: 6px 6px;
+  border-bottom: 1px solid #b1b1b1;
+}
+#typo3-debug-console .topbar:before,
+#typo3-debug-console .topbar:after {
+  content: " ";
+  display: table;
+}
+#typo3-debug-console .topbar:after {
+  clear: both;
+}
+#typo3-debug-console .topbar:before,
+#typo3-debug-console .topbar:after {
+  content: " ";
+  display: table;
+}
+#typo3-debug-console .topbar:after {
+  clear: both;
+}
+#typo3-debug-console .topbar .badge {
+  margin-left: 6px;
+}
+#typo3-debug-console .messages {
+  padding: 6px 6px;
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  height: 250px;
+  overflow: auto;
+}
+#typo3-debug-console .messages .table {
+  width: auto;
+}
+#typo3-debug-console .messages p {
+  margin: 0;
+}
+#typo3-debug-console .messages p strong {
+  padding-right: 4px;
+}
 #typo3-dblist-sysnotes {
   margin-top: 15px;
 }