fix

assets/loggerService/loggerService.css

@@ -8,7 +8,7 @@
     --logger-color-info: hsl(205, 100%, 61%);
     --logger-color-debug: #673ab7;
     --logger-color-success: #8bc34a;
-    --logger-depth: 1;
+    --logger-depth-gap: 2em;
 }
 .kit-logger, #kit-logger {
     margin: 0;
@@ -26,7 +26,24 @@
 .kit-logger--fixed {
     position: sticky;
     bottom: 0;
-    height: 30vh;
+    height: 50vh;
+}
+logger-additional {
+    opacity: 0.3;
+}
+logger-log {
+    display: block;
+    min-height: 1em;
+}
+logger-pair {
+     display: block;
+     min-height: 1em;
+}
+logger-log logger-pair > logger-context > logger-pair {
+    padding-left: var(--logger-depth-gap);
+}
+logger-log logger-item__key > logger-pair > logger-context > logger-pair {
+    padding-left: 0;
 }
 logger-item {
     margin: 0;
@@ -48,10 +65,10 @@ logger-item {
     -webkit-align-items: flex-start;
     -ms-flex-align: start;
     align-items: flex-start;
-    white-space: pre-line;
+    white-space: normal;
-    padding-left: calc((var(--logger-depth, 1) - 1) * 25px);
+    word-break: break-all;
-    font-size: 12px !important;
+    font-size: 1em !important;
-    line-height: 14px !important;
+    line-height: calc(1.1em) !important;
 }
 logger-item__value * {
     color: inherit;
@@ -59,23 +76,24 @@ logger-item__value * {
 logger-item__value .logger-toggler {
     cursor: pointer;
     color: #2698db !important;
+    opacity: 0.6;
 }
 logger-item__msg {
 
 }
 logger-item__key {
-    min-width: 25px;
+    min-width: 2em;
     padding-right: 5px;
-    white-space: nowrap;
-    color: var(--logger-color-key, #909090);
     background-color: var(--logger-color-content-key, transparent);
 }
+logger-item__key, logger-item__key > * {
+    color: var(--logger-color-key, #909090);
+}
 logger-item__key:empty {
     display: none;
 }
 logger-item__value {
     flex: 1 0 0;
-    white-space: pre-wrap;
     color: var(--logger-color-value, #c1c1c1);
     background-color: var(--logger-color-content-value, transparent);
 }
@@ -85,6 +103,9 @@ logger-item__value * {
     color: inherit !important;
     white-space: inherit !important;
 }
+logger-pair > input[type="checkbox"]:checked ~ logger-item > logger-item__value .logger-toggler {
+    opacity: 1;
+}
 
 
 .kit-logger-row--emergency {

assets/loggerService/loggerService.js

@@ -5,21 +5,38 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
     var Logger = require('Logger');
     var Collection = require('Collection');
 
-    function getRowNode(depth, key, value, level = ''){
+    function getRowNode(key, value, level = ''){
         key = String(key);
         value = String(value);
-        var result = '<logger-item style="--logger-depth:'+support.toNumber(depth, 1)+';" class="kit-logger-row--'+level+'"><logger-item__key>'+key+'</logger-item__key><logger-item__value>'+value+'</logger-item__value></logger-item>';
+        var result = '<logger-item class="kit-logger-row--'+level+'"><logger-item__key>'+key+'</logger-item__key><logger-item__value>'+value+'</logger-item__value></logger-item>';
 
         return support.makeNode(result);
     }
-    function getItemObjectNode(id = ''){
+
+    function getLoggerLogNode(id = ''){
+        var entity = '', css = '', style = '';
+        return support.makeNode('<logger-log></logger-log>');
+    }
+    function getLoggerPairNode(depth = 1){
+        return support.makeNode('<logger-pair style="--logger-depth:'+support.toNumber(depth, 1)+';"></logger-pair>');
+    }
+
+    function getLoggerAdditionalHtml(html = ''){
+        return '<logger-additional>'+html+'</logger-additional>';
+    }
+
+    function getLoggerToggerHtml(id, html = ''){
+        return '<label class="logger-toggler" for="'+id+'">'+html+'</label>';
+    }
+
+    function getContextNode(id = ''){
         var entity = '', css = '', style = '';
         if(id) {
             css = '<style>input#'+id+':checked ~ [data-entity-id="'+id+'"] {display: block !important;}</style>';
             entity = ' data-entity-id="'+id+'"';
             style = ' style="display: none"'
         }
-        return support.makeNode('<logger-item-object'+entity+style+'>'+css+'</logger-item-object>');
+        return support.makeNode('<logger-context'+entity+style+'>'+css+'</logger-context>');
     }
 
 
@@ -37,64 +54,95 @@ __PluginManager__.register('loggerService', function(module, exports, require, g
 
     support.extend(LoggerService.prototype, Logger.prototype);
 
-    LoggerService.prototype.setHtmlCollection = function (node) {
+    LoggerService.prototype.getHtmlCollection = function() {
-        /**
+        var node;
-         * @type {HTMLElement}
+        if (!this.__htmlCollection) {
-         */
+            /**
-        this.__htmlCollection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || support.makeNode(this.__htmlCollectionTemplater);
+             * @type {HTMLElement}
+             */
+            this.__htmlCollection = node || document.getElementById('kit-logger') || document.querySelector('.kit-logger') || support.makeNode(this.__htmlCollectionTemplater);
 
-        if((this.__htmlCollection instanceof HTMLElement) && !this.__htmlCollection.parentElement) {
+            if((this.__htmlCollection instanceof HTMLElement) && !this.__htmlCollection.parentElement) {
-            document.body.appendChild(this.__htmlCollection)
+                document.body.appendChild(this.__htmlCollection)
+            }
         }
+
+        return this.__htmlCollection;
     };
 
-    LoggerService.prototype.__row = function(message, depth = 0, logLevel = '') {
+    function getPairNode(depth, key, value, logLevel, maxDepth = 3, openDepth = 1, isRoot = true) {
-        if (!this.__htmlCollection) {
+        var pairNode = getLoggerPairNode(depth);
-            this.setHtmlCollection();
+        var contextNode,
-        }
+            isIterable = support.isIterable(value),
-        var log = this.__htmlCollection;
+            isEmptyValue = support.empty(value),
+            id = isIterable?support.uniqueId():'',
+            skipValue = value === window || value === document,
+            valueType = support.getType(value),
+            len = isIterable?Object.keys(value).length:0,
+            lenPrint = isIterable?' [' + Object.keys(value).length + ']':'',
+            val = value,inp, j;
 
-        function setObjectValue(log, depth, key, value, opClass, maxDepth = 3, openDepth = 1, isRoot = true) {
+        if(support.isIterable(value)){
-            var rowChildNode, isObj = support.isObject(value), id = isObj?support.uniqueId():'',
-                skipValue = value === window || value === document,
-                valueString = ((isObj && typeof value.toString !== 'function') || typeof value === 'symbol')?(typeof value):(Array.isArray(value)?'Array':value),
-                val = (isObj&&maxDepth&&!skipValue)?'<label class="logger-toggler" for="'+id+'">'+valueString+'</label>':valueString,
-                inp, j,
-                len = isObj?Object.keys(value).length:0;
 
-            if(!isRoot || (isRoot && !isObj)) {
+            if(value === window) {
-                log.appendChild(getRowNode(depth, key, '' + val + (isObj?(' ['+len+']'):''), opClass));
+                val = 'window ' + getLoggerAdditionalHtml(valueType);
-            }
+            } else if(value === document) {
-            if(skipValue) {
+                val = 'document ' + getLoggerAdditionalHtml(valueType);
-                return;
+            } else {
-            }
+                if(isRoot && support.empty(value)){
-            if(isObj&&maxDepth) {
+                    val = '';
-                !isRoot && ++depth;
+                } else
-                maxDepth = Math.max(0, maxDepth - 1);
+                if(len){
-                log.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
+                    if(maxDepth){
-                inp.checked = !!openDepth;
+                        val = getLoggerToggerHtml(id, valueType + lenPrint)
-                openDepth = Math.max(0, openDepth - 1);
+                    } else {
-                log.appendChild(rowChildNode = getItemObjectNode(id));
+                        val = getLoggerAdditionalHtml(valueType + lenPrint);
-                for(j in value) {
+                    }
-                    if(value.hasOwnProperty(j))
+                } else {
-                        setObjectValue(rowChildNode, depth, j, value[j], opClass, maxDepth, openDepth, false);
+                    val = getLoggerAdditionalHtml(valueType + ' empty');
                 }
             }
         }
+        if(isIterable&&maxDepth&&!skipValue) {
+            pairNode.appendChild(inp = support.makeNode('<input id="'+id+'" type="checkbox" style="display: none;">'));
+            inp.checked = !!openDepth;
+        }
 
-        setObjectValue(log, depth, '', message, logLevel, 6, 3);
+        if(support.isIterable(key)){
+            pairNode.appendChild(x = getRowNode('', '' + val, logLevel));
+            x.querySelector('logger-item__key').appendChild(getPairNode(depth, null, key, logLevel, 1, 1, isRoot));
+        } else {
+            if(!(isRoot&&support.isUndefined(key))) {
+                pairNode.appendChild(getRowNode(key, '' + val, logLevel));
+            }
+        }
 
-        log.scrollTop = log.scrollHeight;
+        if(isIterable&&maxDepth&&!skipValue) {
-    };
+            if(!(isRoot&&support.isUndefined(key))) {
+                ++depth;
+            }
+            maxDepth = Math.max(0, maxDepth - 1);
+            openDepth = Math.max(0, openDepth - 1);
+            pairNode.appendChild(contextNode = getContextNode(id));
+            for(j in value) {
+                if(value.hasOwnProperty(j)) {
+                    contextNode.appendChild(getPairNode(depth, j, value[j], logLevel, maxDepth, openDepth, false));
+                }
+            }
+        }
+        return pairNode;
+    }
 
     LoggerService.prototype.__logHandler = function(data = {
         level: '',
         message: '',
         context: [],
     }){
-        this.__row(data.message, 1, data.level);
+        var logCollectionNode = this.getHtmlCollection();
-        if(support.isObject(data.context))
+        var loggerLogNode = getLoggerLogNode();
-            this.__row(data.context, 2);
+        loggerLogNode.appendChild(getPairNode(1, data.message, data.context, data.level, 6, 3));
+        logCollectionNode.appendChild(loggerLogNode);
+        logCollectionNode.scrollTop = logCollectionNode.scrollHeight;
     };
 
     LoggerService.prototype.logList = function (logList) {

assets/support/support.js

@@ -113,7 +113,7 @@ __PluginManager__.register('support', function(module, exports, require, global)
             for(var i = 1; arguments.length - 1 >= i;i++) {
                 args.push(arguments[i]);
             }
-        if(typeof value === 'function') {
+        if(isFunction(value)) {
             return value.apply(this, args);
         }
         return value;
@@ -125,25 +125,45 @@ __PluginManager__.register('support', function(module, exports, require, global)
             Number.isNaN(val) === true ||
             val === '' ||
             val === 0 ||
-            val === false;
+            val === false ||
-    }
+            ((isObject(val) || isArray(val)) && (function () {
-    function emptyEx(val) {
+                for(var v in val) return false;
-        return empty(val) ||
-            (isObject(val) && (function () {
-                for(v in val) return false;
                 return true;
             })());
     }
-    function typeOf(value) {
+    function emptyEx(val) {
+        return empty(val) ||
+            ((isObject(val) || isArray(val)) && (function () {
+                for(var v in val) return false;
+                return true;
+            })());
+    }
+    function isUndefined(value) {
+        return value === undefined || Number.isNaN(value) || value === null || (typeof value === 'number' && !isFinite(value));
+    }
+    function getType(value) {
+        if(isUndefined(value)) {
+            return 'undefined';
+        } else if(isArray(value)) {
+            return 'array';
+        }
         return typeof value;
     }
+    function isFunction(value) {
+        return typeof value === 'function';
+    }
     function isObject(value) {
-        return typeOf(value)  === 'object' ? value !== null : typeof value === 'function';
+        return getType(value)  === 'object' ? value !== null : false;
+    }
+    function isIterable(value) {
+        return isObject(value) || isArray(value);
     }
     function isNumber(value) {
         return !Number.isNaN(value) && isFinite(value) && typeof value === 'number';
     }
-    function isArray(value) { return Array.isArray(value);}
+    function isArray(value) {
+        return Array.isArray(value);
+    }
     /**
      * @return {number}
      */
@@ -370,9 +390,12 @@ __PluginManager__.register('support', function(module, exports, require, global)
         uniqueId,
         valueEx,
         empty,
+        isUndefined,
         isNumber,
-        typeOf,
+        getType,
+        isIterable,
         isObject,
+        isArray,
         isInteger,
         isFloat,
         isString,

tests/loggerTest.php

@@ -34,6 +34,7 @@ $APPLICATION->ShowHead();
         logger.notice(null);
         logger.notice(NaN);
         logger.notice('bigData', {win: window, doc: document});
+        logger.notice('context array', [100, 200]);
 
         logger.notice(kit.date('Y-m-d H:i:s'), {
             test1: {
@@ -53,9 +54,29 @@ $APPLICATION->ShowHead();
             },
         });
 
+        logger.notice(kit.date('Y-m-d H:i:s'), {
+            test1: {
+                test2: {
+                    test3: {
+                        test4: {
+                            test5: {
+                                test6: {
+                                    test7: {
+                                        test1: kit.date('Y-m-d H:i:s'),
+                                        test2: kit.date('Y-m-d H:i:s'),
+                                        test3: kit.date('Y-m-d H:i:s'),
+                                    },
+                                },
+                            },
+                        },
+                    },
+                },
+            },
+        });
+
         kit.service.logger.logList(logger.collection);
 
-        unit.assertSame(14, kit.service.logger.collection.length, 'Проверка количества логов в логерСервисе после подгрузки логов из класса Logger через loggerService.logList');
+        unit.assertSame(16, kit.service.logger.collection.length, 'Проверка количества логов в логерСервисе после подгрузки логов из класса Logger через loggerService.logList');
 
     });
 </script>