Added lightweight developer tools

See #2331

diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
index a46d896a67ed0131f524b4069c9ccf2e6ad92a7c..bf76e257ed272fddbc3d170b1d6243ed9121f766 100644 (file)
--- a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
+++ b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl
@@ -13,6 +13,7 @@
        var LAST_UPDATE_TIME = {@LAST_UPDATE_TIME};
        var URL_LEGACY_MODE = false;
        var ENABLE_DEBUG_MODE = {if ENABLE_DEBUG_MODE}true{else}false{/if};
+       var ENABLE_DEVELOPER_TOOLS = {if ENABLE_DEVELOPER_TOOLS}true{else}false{/if};
        
        {if ENABLE_DEBUG_MODE}
                {* This constant is a compiler option, it does not exist in production. *}

diff --git a/wcfsetup/install/files/acp/templates/header.tpl b/wcfsetup/install/files/acp/templates/header.tpl
index 78408f15b27d2644982a491c6ff0abdf42eedd29..48af7fe86beb709c51538867119395ac2836c4e7 100644 (file)
--- a/wcfsetup/install/files/acp/templates/header.tpl
+++ b/wcfsetup/install/files/acp/templates/header.tpl
@@ -29,6 +29,7 @@
                var LAST_UPDATE_TIME = {@LAST_UPDATE_TIME};
                var URL_LEGACY_MODE = false;
                var ENABLE_DEBUG_MODE = {if ENABLE_DEBUG_MODE}true{else}false{/if};
+               var ENABLE_DEVELOPER_TOOLS = {if ENABLE_DEVELOPER_TOOLS}true{else}false{/if};
                
                {if ENABLE_DEBUG_MODE}
                        {* This constant is a compiler option, it does not exist in production. *}

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
index a665587cf1e9f78c1ad6dcfedae614c40e433e26..8caf25c8bfbda23f3d888e4617947b6ef15ad90d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Bootstrap.js
@@ -13,13 +13,15 @@ define(
                'favico',                  'enquire',                'perfect-scrollbar',      'WoltLabSuite/Core/Date/Time/Relative',
                'Ui/SimpleDropdown',       'WoltLabSuite/Core/Ui/Mobile',  'WoltLabSuite/Core/Ui/TabMenu', 'WoltLabSuite/Core/Ui/FlexibleMenu',
                'Ui/Dialog',               'WoltLabSuite/Core/Ui/Tooltip', 'WoltLabSuite/Core/Language',   'WoltLabSuite/Core/Environment',
-               'WoltLabSuite/Core/Date/Picker', 'EventHandler',           'Core',                   'WoltLabSuite/Core/Ui/Page/JumpToTop'
+               'WoltLabSuite/Core/Date/Picker', 'EventHandler',           'Core',                   'WoltLabSuite/Core/Ui/Page/JumpToTop',
+               'Devtools'
        ], 
        function(
                 favico,                   enquire,                  perfectScrollbar,         DateTimeRelative,
                 UiSimpleDropdown,         UiMobile,                 UiTabMenu,                UiFlexibleMenu,
                 UiDialog,                 UiTooltip,                Language,                 Environment,
-                DatePicker,               EventHandler,             Core,                     UiPageJumpToTop
+                DatePicker,               EventHandler,             Core,                     UiPageJumpToTop,
+                Devtools
        )
 {
        "use strict";
@@ -51,6 +53,9 @@ define(
                                enableMobileMenu: true
                        }, options);
                        
+                       //noinspection JSUnresolvedVariable
+                       if (window.ENABLE_DEVELOPER_TOOLS) Devtools._internal_.enable();
+                       
                        Environment.setup();
                        
                        DateTimeRelative.setup();

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Devtools.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Devtools.js
new file mode 100644 (file)
index 0000000..9c57903
--- /dev/null
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Devtools.js
@@ -0,0 +1,116 @@
+/**
+ * Developer tools for WoltLab Suite.
+ * 
+ * @author     Alexander Ebert
+ * @copyright  2001-2017 WoltLab GmbH
+ * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @module     WoltLabSuite/Core/Devtools
+ */
+define([], function() {
+       "use strict";
+       
+       if (!COMPILER_TARGET_DEFAULT) {
+               return {
+                       toggleEventLogging: function () {},
+                       _internal_: {
+                               eventLog: function() {}
+                       }
+               };
+       }
+       
+       var _settings = {
+               editorAutosave: true,
+               eventLogging: false
+       };
+       
+       var _updateConfig = function () {
+               if (window.sessionStorage) {
+                       window.sessionStorage.setItem("__wsc_devtools_config", JSON.stringify(_settings));
+               }
+       };
+       
+       var Devtools = {
+               /**
+                * Prints the list of available commands.
+                */
+               help: function () {
+                       window.console.log("");
+                       window.console.log("%cAvailable commands:", "text-decoration: underline");
+                       
+                       var cmds = [];
+                       for (var cmd in Devtools) {
+                               if (cmd !== '_internal_' && Devtools.hasOwnProperty(cmd)) {
+                                       cmds.push(cmd);
+                               }
+                       }
+                       cmds.sort().forEach(function(cmd) {
+                               window.console.log("\tDevtools." + cmd + "()");
+                       });
+                       
+                       window.console.log("");
+               },
+               
+               /**
+                * Disables/re-enables the editor autosave feature.
+                * 
+                * @param       {boolean}       forceDisable
+                */
+               toggleEditorAutosave: function(forceDisable) {
+                       _settings.editorAutosave = (forceDisable === true) ? false : !_settings.editorAutosave;
+                       _updateConfig();
+                       
+                       window.console.log("%c\tEditor autosave " + (_settings.editorAutosave ? "enabled" : "disabled"), "font-style: italic");
+               },
+               
+               /**
+                * Enables/disables logging for fired event listener events.
+                * 
+                * @param       {boolean}       forceEnable
+                */
+               toggleEventLogging: function(forceEnable) {
+                       _settings.eventLogging = (forceEnable === true) ? true : !_settings.eventLogging;
+                       _updateConfig();
+                       
+                       window.console.log("%c\tEvent logging " + (_settings.eventLogging ? "enabled" : "disabled"), "font-style: italic");
+               },
+               
+               /**
+                * Internal methods not meant to be called directly.
+                */
+               _internal_: {
+                       enable: function () {
+                               window.Devtools = Devtools;
+                               
+                               window.console.log("%cDevtools for WoltLab Suite loaded", "font-weight: bold");
+                               
+                               if (window.sessionStorage) {
+                                       var settings = window.sessionStorage.getItem("__wsc_devtools_config");
+                                       try {
+                                               if (settings !== null) {
+                                                       _settings = JSON.parse(settings);
+                                               }
+                                       }
+                                       catch (e) {}
+                                       
+                                       if (!_settings.editorAutosave) Devtools.toggleEditorAutosave(true);
+                                       if (_settings.eventLogging) Devtools.toggleEventLogging(true);
+                               }
+                               
+                               window.console.log("Settings are saved per browser session, enter `Devtools.help()` to learn more.");
+                               window.console.log("");
+                       },
+                       
+                       editorAutosave: function () {
+                               return _settings.editorAutosave;
+                       },
+                       
+                       eventLog: function(identifier, action) {
+                               if (_settings.eventLogging) {
+                                       window.console.log("[Devtools.EventLogging] Firing event: " + action + " @ " + identifier);
+                               }
+                       }
+               }
+       };
+       
+       return Devtools;
+});

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Event/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Event/Handler.js
index 678f8fff68135f8abdaffcc8234e6f983e4e78cc..2c213541374f3703dc08d2848efadd99fbee9212 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Event/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Event/Handler.js
@@ -6,7 +6,7 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Event/Handler
  */
-define(['Core', 'Dictionary'], function(Core, Dictionary) {
+define(['Core', 'Devtools', 'Dictionary'], function(Core, Devtools, Dictionary) {
        "use strict";
        
        var _listeners = new Dictionary();
@@ -54,6 +54,8 @@ define(['Core', 'Dictionary'], function(Core, Dictionary) {
                 * @param       {object=}       data            event data
                 */
                fire: function(identifier, action, data) {
+                       Devtools._internal_.eventLog(identifier, action);
+                       
                        data = data || {};
                        
                        var actions = _listeners.get(identifier);

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
index 8ddd4c40263ca91f1a8ca757c536f638ee4ba06f..775b6816da650333cc8f4bb864e160ab1aba0e3c 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Autosave.js
@@ -7,7 +7,7 @@
  * @license    GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @module     WoltLabSuite/Core/Ui/Redactor/Autosave
  */
-define(['Core', 'EventHandler', 'Language', 'Dom/Traverse', './Metacode'], function(Core, EventHandler, Language, DomTraverse, UiRedactorMetacode) {
+define(['Core', 'Devtools', 'EventHandler', 'Language', 'Dom/Traverse', './Metacode'], function(Core, Devtools, EventHandler, Language, DomTraverse, UiRedactorMetacode) {
        "use strict";
        
        if (!COMPILER_TARGET_DEFAULT) {
@@ -72,6 +72,12 @@ define(['Core', 'EventHandler', 'Language', 'Dom/Traverse', './Metacode'], funct
                 * @return      {string}        message content
                 */
                getInitialValue: function() {
+                       //noinspection JSUnresolvedVariable
+                       if (window.ENABLE_DEVELOPER_TOOLS && Devtools._internal_.editorAutosave() === false) {
+                               //noinspection JSUnresolvedVariable
+                               return this._element.value;
+                       }
+                       
                        var value = '';
                        try {
                                value = window.localStorage.getItem(this._key);
@@ -231,6 +237,12 @@ define(['Core', 'EventHandler', 'Language', 'Dom/Traverse', './Metacode'], funct
                 * @protected
                 */
                _saveToStorage: function() {
+                       //noinspection JSUnresolvedVariable
+                       if (window.ENABLE_DEVELOPER_TOOLS && Devtools._internal_.editorAutosave() === false) {
+                               //noinspection JSUnresolvedVariable
+                               return;
+                       }
+                       
                        var content = this._editor.code.get();
                        if (this._editor.utils.isEmpty(content)) {
                                content = '';

diff --git a/wcfsetup/install/files/js/require.config.js b/wcfsetup/install/files/js/require.config.js
index 4c49637ef4c66f5898fab3b2037a2254b59a700c..e9e544b71e14b50c0a80ea26ecb04f3d362f04bb 100644 (file)
--- a/wcfsetup/install/files/js/require.config.js
+++ b/wcfsetup/install/files/js/require.config.js
@@ -19,6 +19,7 @@ requirejs.config({
                        'ColorUtil': 'WoltLabSuite/Core/ColorUtil',
                        'Core': 'WoltLabSuite/Core/Core',
                        'DateUtil': 'WoltLabSuite/Core/Date/Util',
+                       'Devtools': 'WoltLabSuite/Core/Devtools',
                        'Dictionary': 'WoltLabSuite/Core/Dictionary',
                        'Dom/ChangeListener': 'WoltLabSuite/Core/Dom/Change/Listener',
                        'Dom/Traverse': 'WoltLabSuite/Core/Dom/Traverse',