[TASK] Migrate DebugConsole to TypeScript 64/55264/2
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 4 Jan 2018 11:52:25 +0000 (12:52 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 4 Jan 2018 12:46:02 +0000 (13:46 +0100)
The DebugConsole used to render debug messages at the bottom of the TYPO3
backend is migrated to TypeScript.

A feature sneaked in as an easter egg where the icon of the debug panel
changes to a ":|" face on too many message groups has been dropped.

Resolves: #82583
Releases: master
Change-Id: Ied7a3e8f5563fb05029324db87c914ea1ef22953
Reviewed-on: https://review.typo3.org/55264
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de>
Reviewed-by: Reiner Teubner <rteubner@me.com>
Tested-by: Reiner Teubner <rteubner@me.com>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/types/TYPO3/index.d.ts
typo3/sysext/backend/Resources/Private/TypeScript/DebugConsole.ts [new file with mode: 0644]
typo3/sysext/backend/Resources/Public/JavaScript/DebugConsole.js

index 3c0d00e..49368c4 100644 (file)
@@ -5,6 +5,7 @@
  * Add types as you use them
  */
 declare namespace TYPO3 {
+  export let DebugConsole: any;
   export let Popover: any;
   export let Storage: any;
   export let Utility: any;
diff --git a/typo3/sysext/backend/Resources/Private/TypeScript/DebugConsole.ts b/typo3/sysext/backend/Resources/Private/TypeScript/DebugConsole.ts
new file mode 100644 (file)
index 0000000..fe6d085
--- /dev/null
@@ -0,0 +1,257 @@
+/*
+ * 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 * as $ 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 = $('<p />').html(message);
+    if (typeof header !== 'undefined' && header.length > 0) {
+      $line.prepend($('<strong />').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 =
+        $('<li />', {role: 'presentation', 'data-identifier': tabIdentifier}).append(
+          $('<a />', {
+            'aria-controls': tabIdentifier,
+            'data-toggle': 'tab',
+            href: '#' + tabIdentifier,
+            role: 'tab'
+          }).text(group + ' ').append(
+            $('<span />', {'class': 'badge'})
+          )
+        ).on('shown.bs.tab', (e: Event) => {
+          $(e.currentTarget).find('.badge').text('');
+        });
+      $debugTabs.append($tab);
+      $tabContent.append(
+        $('<div />', {role: 'tabpanel', 'class': 'tab-pane', id: tabIdentifier}).append(
+          $('<div />', {'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 =
+      $('<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'})
+        )
+      );
+
+    this.addButton(
+      $('<button />', {
+        'class': 'btn btn-default btn-sm ' + (this.settings.autoscroll ? 'active' : ''),
+        title: TYPO3.lang['debuggerconsole.autoscroll']
+      }).append($('<span />', {'class': 't3-icon fa fa-magnet'})),
+      (): void => {
+        $(this).button('toggle');
+        this.settings.autoscroll = !this.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'})),
+      (e: Event): void => {
+        let $button = $(e.currentTarget);
+        let $icon = $button.find('.t3-icon');
+        let $innerContainer = this.$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);
+          this.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'})),
+      (): void => {
+        this.flush();
+      }
+    ).addButton(
+      $('<button />', {
+        'class': 'btn btn-default btn-sm',
+        title: TYPO3.lang['debuggerconsole.close']}).append($('<span />', {'class': 't3-icon fa fa-times'})),
+      (): void => {
+        this.destroy();
+        this.createDom();
+      }
+    );
+  }
+
+  /**
+   * Adds a button and it's callback to the console's toolbar
+   *
+   * @param {JQuery} $button
+   * @param callback
+   * @returns {DebugConsole}
+   */
+  private addButton($button: JQuery, callback: any): this {
+    $button.on('click', callback);
+    this.$consoleDom.find('.t3js-buttons').append($button);
+
+    return this;
+  }
+
+  /**
+   * Attach the Debugger Console to the viewport
+   */
+  private attachToViewport(): void {
+    const $viewport = $('.t3js-scaffold-content');
+    if ($viewport.has(this.$consoleDom).length === 0) {
+      $viewport.append(this.$consoleDom);
+    }
+  }
+
+  /**
+   * Increment the counter of unread messages in the tabbar
+   */
+  private incrementUnreadMessagesIfCollapsed(): void {
+    const $topbar = this.$consoleDom.find('.t3js-topbar');
+    const $innerContainer = $topbar.next();
+
+    if ($innerContainer.is(':hidden')) {
+      const $badge = $topbar.find('.badge');
+      let value = parseInt($badge.text(), 10);
+
+      if (isNaN(value)) {
+        value = 0;
+      }
+      $badge.text(++value);
+    }
+  }
+
+  /**
+   * Reset global unread counter
+   */
+  private resetGlobalUnreadCounter(): void {
+    this.$consoleDom.find('.t3js-topbar').find('.badge').text('');
+  }
+
+  /**
+   * Reset the console
+   */
+  private flush(): void {
+    const $debugTabs = this.$consoleDom.find('.t3js-debuggroups');
+    const $tabContent = this.$consoleDom.find('.t3js-debugcontent');
+
+    $debugTabs.children().remove();
+    $tabContent.children().remove();
+  }
+
+  /**
+   * Destroy everything of the console
+   */
+  private destroy(): void {
+    this.$consoleDom.remove();
+    this.$consoleDom = undefined;
+  }
+}
+
+const debugConsole = new DebugConsole();
+
+// expose as global object
+TYPO3.DebugConsole = debugConsole;
+export = debugConsole;
index 7ef7c11..c5ddfc1 100644 (file)
  *
  * The TYPO3 project - inspiring people to share!
  */
-
-/**
- * Module: TYPO3/CMS/Backend/DebugConsole
- * The debug console shown at the bottom of the backend
- */
-define(['jquery'], function ($) {
-       'use strict';
-
-       /**
-        *
-        * @type {{$consoleDom: null, settings: {autoscroll: boolean}}}
-        * @exports TYPO3/CMS/Backend/DebugConsole
-        */
-       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
-        *
-        * @param {Object} $button
-        * @param {function} callback
-        * @returns {{$consoleDom: null, settings: {autoscroll: boolean}}}
-        */
-       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 = $('.t3js-scaffold-content');
-               if ($viewport.has(DebugConsole.$consoleDom).length === 0) {
-                       $viewport.append(DebugConsole.$consoleDom);
-               }
-       };
-
-       /**
-        * Add the debug message to the console
-        *
-        * @param {String} message
-        * @param {String} header
-        * @param {String} [group=Debug]
-        */
-       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.length === 0) {
-                       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'),
-                       isMessageBoxActive = $messageBox.parent().hasClass('active');
-
-               $messageBox.append($line);
-               if (DebugConsole.settings.autoscroll && isMessageBoxActive) {
-                       $messageBox.scrollTop($messageBox.prop('scrollHeight'));
-               }
-       };
-
-       /**
-        * Gets a proper console icon depending on the amount of tabs
-        *
-        * @param {Object} $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
-        *
-        * @param {Object} $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;
-       };
-
-       $(DebugConsole.initialize);
-
-       // expose as global object
-       TYPO3.DebugConsole = DebugConsole;
-
-       return DebugConsole;
-
+define(["require", "exports", "jquery"], function (require, exports, $) {
+    "use strict";
+    /**
+     * Module: TYPO3/CMS/Backend/DebugConsole
+     * The debug console shown at the bottom of the backend
+     * @exports TYPO3/CMS/Backend/DebugConsole
+     */
+    var DebugConsole = (function () {
+        function DebugConsole() {
+            var _this = this;
+            this.settings = {
+                autoscroll: true,
+            };
+            $(function () {
+                _this.createDom();
+            });
+        }
+        /**
+         * Increment the counter of unread messages in the given tab
+         *
+         * @param {JQuery} $tab
+         */
+        DebugConsole.incrementInactiveTabCounter = function ($tab) {
+            if (!$tab.hasClass('active')) {
+                var $badge = $tab.find('.badge');
+                var value = parseInt($badge.text(), 10);
+                if (isNaN(value)) {
+                    value = 0;
+                }
+                $badge.text(++value);
+            }
+        };
+        /**
+         * Add the debug message to the console
+         *
+         * @param {String} message
+         * @param {String} header
+         * @param {String} [group=Debug]
+         */
+        DebugConsole.prototype.add = function (message, header, group) {
+            this.attachToViewport();
+            var $line = $('<p />').html(message);
+            if (typeof header !== 'undefined' && header.length > 0) {
+                $line.prepend($('<strong />').text(header));
+            }
+            if (typeof group === 'undefined' || group.length === 0) {
+                group = 'Debug';
+            }
+            var tabIdentifier = 'debugtab-' + group.toLowerCase().replace(/\W+/g, '-');
+            var $debugTabs = this.$consoleDom.find('.t3js-debuggroups');
+            var $tabContent = this.$consoleDom.find('.t3js-debugcontent');
+            var $tab = this.$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 />', {
+                        'aria-controls': tabIdentifier,
+                        'data-toggle': 'tab',
+                        href: '#' + tabIdentifier,
+                        role: 'tab'
+                    }).text(group + ' ').append($('<span />', { 'class': 'badge' }))).on('shown.bs.tab', function (e) {
+                        $(e.currentTarget).find('.badge').text('');
+                    });
+                $debugTabs.append($tab);
+                $tabContent.append($('<div />', { role: 'tabpanel', 'class': 'tab-pane', id: tabIdentifier }).append($('<div />', { '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();
+            var $messageBox = $('#' + tabIdentifier + ' .t3js-messages');
+            var isMessageBoxActive = $messageBox.parent().hasClass('active');
+            $messageBox.append($line);
+            if (this.settings.autoscroll && isMessageBoxActive) {
+                $messageBox.scrollTop($messageBox.prop('scrollHeight'));
+            }
+        };
+        DebugConsole.prototype.createDom = function () {
+            var _this = this;
+            if (typeof this.$consoleDom !== 'undefined') {
+                return;
+            }
+            this.$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' })));
+            this.addButton($('<button />', {
+                'class': 'btn btn-default btn-sm ' + (this.settings.autoscroll ? 'active' : ''),
+                title: TYPO3.lang['debuggerconsole.autoscroll']
+            }).append($('<span />', { 'class': 't3-icon fa fa-magnet' })), function () {
+                $(_this).button('toggle');
+                _this.settings.autoscroll = !_this.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 (e) {
+                var $button = $(e.currentTarget);
+                var $icon = $button.find('.t3-icon');
+                var $innerContainer = _this.$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);
+                    _this.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 () {
+                _this.flush();
+            }).addButton($('<button />', {
+                'class': 'btn btn-default btn-sm',
+                title: TYPO3.lang['debuggerconsole.close']
+            }).append($('<span />', { 'class': 't3-icon fa fa-times' })), function () {
+                _this.destroy();
+                _this.createDom();
+            });
+        };
+        /**
+         * Adds a button and it's callback to the console's toolbar
+         *
+         * @param {JQuery} $button
+         * @param callback
+         * @returns {DebugConsole}
+         */
+        DebugConsole.prototype.addButton = function ($button, callback) {
+            $button.on('click', callback);
+            this.$consoleDom.find('.t3js-buttons').append($button);
+            return this;
+        };
+        /**
+         * Attach the Debugger Console to the viewport
+         */
+        DebugConsole.prototype.attachToViewport = function () {
+            var $viewport = $('.t3js-scaffold-content');
+            if ($viewport.has(this.$consoleDom).length === 0) {
+                $viewport.append(this.$consoleDom);
+            }
+        };
+        /**
+         * Increment the counter of unread messages in the tabbar
+         */
+        DebugConsole.prototype.incrementUnreadMessagesIfCollapsed = function () {
+            var $topbar = this.$consoleDom.find('.t3js-topbar');
+            var $innerContainer = $topbar.next();
+            if ($innerContainer.is(':hidden')) {
+                var $badge = $topbar.find('.badge');
+                var value = parseInt($badge.text(), 10);
+                if (isNaN(value)) {
+                    value = 0;
+                }
+                $badge.text(++value);
+            }
+        };
+        /**
+         * Reset global unread counter
+         */
+        DebugConsole.prototype.resetGlobalUnreadCounter = function () {
+            this.$consoleDom.find('.t3js-topbar').find('.badge').text('');
+        };
+        /**
+         * Reset the console
+         */
+        DebugConsole.prototype.flush = function () {
+            var $debugTabs = this.$consoleDom.find('.t3js-debuggroups');
+            var $tabContent = this.$consoleDom.find('.t3js-debugcontent');
+            $debugTabs.children().remove();
+            $tabContent.children().remove();
+        };
+        /**
+         * Destroy everything of the console
+         */
+        DebugConsole.prototype.destroy = function () {
+            this.$consoleDom.remove();
+            this.$consoleDom = undefined;
+        };
+        return DebugConsole;
+    }());
+    var debugConsole = new DebugConsole();
+    // expose as global object
+    TYPO3.DebugConsole = debugConsole;
+    return debugConsole;
 });