From 32669648722d8386330a8e14766ea7e8feba60e4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 13 Jul 2017 20:22:11 +0200 Subject: [PATCH] Added lightweight developer tools See #2331 --- .../templates/headIncludeJavaScript.tpl | 1 + .../install/files/acp/templates/header.tpl | 1 + .../files/js/WoltLabSuite/Core/Bootstrap.js | 9 +- .../files/js/WoltLabSuite/Core/Devtools.js | 116 ++++++++++++++++++ .../js/WoltLabSuite/Core/Event/Handler.js | 4 +- .../WoltLabSuite/Core/Ui/Redactor/Autosave.js | 14 ++- wcfsetup/install/files/js/require.config.js | 1 + 7 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 wcfsetup/install/files/js/WoltLabSuite/Core/Devtools.js diff --git a/com.woltlab.wcf/templates/headIncludeJavaScript.tpl b/com.woltlab.wcf/templates/headIncludeJavaScript.tpl index a46d896a67..bf76e257ed 100644 --- 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 78408f15b2..48af7fe86b 100644 --- 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 a665587cf1..8caf25c8bf 100644 --- 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 index 0000000000..9c57903da1 --- /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 + * @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 678f8fff68..2c21354137 100644 --- 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 * @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 8ddd4c4026..775b6816da 100644 --- 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 * @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 4c49637ef4..e9e544b71e 100644 --- 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', -- 2.20.1