Add debug filter box

editor/js/ui/palette-editor.js

@@ -629,7 +629,7 @@ RED.palette.editor = (function() {
 
 
         $('<span>').html(RED._("palette.editor.sort")+' ').appendTo(toolBar);
-        var sortGroup = $('<span class="button-group"></span> ').appendTo(toolBar);
+        var sortGroup = $('<span class="button-group"></span>').appendTo(toolBar);
         var sortAZ = $('<a href="#" class="sidebar-header-button-toggle selected" data-i18n="palette.editor.sortAZ"></a>').appendTo(sortGroup);
         var sortRecent = $('<a href="#" class="sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
 

editor/js/ui/view.js

@@ -2423,14 +2423,15 @@ RED.view = (function() {
                         var flash = 22;
                         var flashFunc = function() {
                             flash--;
-                            node.highlighted = !node.highlighted;
                             node.dirty = true;
-                            RED.view.redraw();
                             if (flash >= 0) {
+                                node.highlighted = !node.highlighted;
                                 setTimeout(flashFunc,100);
                             } else {
+                                node.highlighted = false;
                                 delete node._flashing;
                             }
+                            RED.view.redraw();
                         }
                         flashFunc();
                     }

editor/sass/mixins.scss

@@ -70,7 +70,6 @@
     &.selected:not(.disabled) {
         color: $workspace-button-color-selected !important;
         background: $workspace-button-background-active;
-        cursor: default;
     }
     .button-group &:not(:first-child) {
         border-left: none;
@@ -86,6 +85,12 @@
         outline: 1px solid $workspace-button-color-focus-outline;
     }
 }
+
+.button-group:not(:last-child) {
+    margin-right: 10px;
+}
+
+
 @mixin workspace-button-toggle {
     @include workspace-button;
     color: $workspace-button-toggle-color !important;
@@ -97,6 +102,7 @@
         border-bottom-width: 2px;
         border-bottom-color: $form-input-border-selected-color;
         margin-bottom: 0;
+        cursor: default;
     }
     &.disabled {
         color: $workspace-button-toggle-color-disabled !important;
@@ -115,6 +121,12 @@
     height: 25px;
     line-height: 23px;
     padding: 0 10px;
+
+
+    .button-group:not(:last-child) {
+        margin-right: 5px;
+    }
+
 }
 
 @mixin component-footer-button {
@@ -128,6 +140,16 @@
         padding: 0 5px;
     }
 }
+@mixin component-footer-button-toggle {
+    @include workspace-button-toggle;
+    font-size: 11px;
+    line-height: 17px;
+    height: 18px;
+    &.text-button {
+        width: auto;
+        padding: 0 5px;
+    }
+}
 
 @mixin component-shadow {
     border: 1px solid $secondary-border-color;

editor/sass/palette-editor.scss

@@ -72,10 +72,6 @@
         padding: 8px 10px;
         border-bottom: 1px solid $primary-border-color;
         text-align: right;
-
-        .button-group {
-            margin-right: 10px;
-        }
     }
     .palette-module-button-group {
         position: absolute;

editor/sass/sidebar.scss

@@ -71,6 +71,7 @@
     padding: 8px 10px;
     background: #f3f3f3;
     border-bottom: 1px solid $secondary-border-color;
+    white-space: nowrap;
 }
 
 #sidebar-footer {
@@ -80,6 +81,9 @@
 .sidebar-footer-button {
     @include component-footer-button;
 }
+.sidebar-footer-button-toggle {
+    @include component-footer-button-toggle;
+}
 .sidebar-header-button {
     @include workspace-button;
     font-size: 13px;

nodes/core/core/58-debug.html

@@ -100,14 +100,31 @@
         onpaletteadd: function() {
             var content = $("<div>").css({"position":"relative","height":"100%"});
             var toolbar = $('<div class="sidebar-header">'+
+                '<span class="button-group"><a id="debug-tab-filter" class="sidebar-header-button" href="#"><i class="fa fa-filter"></i></a></span>'+
+                '<span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
+
+
+            var footerToolbar = $('<div>'+
+                '<span class="button-group">'+
+                    '<a class="sidebar-footer-button-toggle text-button selected" id="debug-tab-view-list" href="#"><span data-i18n="">list</span></a>'+
+                    '<a class="sidebar-footer-button-toggle text-button" id="debug-tab-view-table" href="#"><span data-i18n="">table</span></a> '+
+                '</span>'+
+                '<span class="button-group"><a id="debug-tab-open" title="open in new window" class="sidebar-footer-button" href="#"><i class="fa fa-desktop"></i></a></span> ' +
+                '</div>');
+
+            var messageList = $('<div class="debug-content debug-content-list"/>').appendTo(content);
+            var messageTable = $('<div class="debug-content  debug-content-table hide"/>').appendTo(content);
+
+            var filterDialog = $('<div class="debug-filter-box hide">'+
+                '<div class="debug-filter-row">'+
                 '<span class="button-group">'+
                     '<a class="sidebar-header-button-toggle selected" id="debug-tab-filter-all" href="#"><span data-i18n="node-red:debug.sidebar.filterAll"></span></a>'+
                     '<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
                 '</span>'+
-                '<span class="button-group"><a id="debug-tab-open" title="open in new window" class="sidebar-header-button" href="#"><i class="fa fa-desktop"></i></a></span> ' +
+                '</div>'+
-                '<span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>').appendTo(content);
+            '</div>').appendTo(content);
+
 
-            var messages = $('<div id="debug-content"/>').appendTo(content);
             content.i18n();
 
             RED.sidebar.addTab({
@@ -115,6 +132,7 @@
                 label: this._("debug.sidebar.label"),
                 name: this._("debug.sidebar.name"),
                 content: content,
+                toolbar: footerToolbar,
                 enableOnEdit: true
             });
 
@@ -123,9 +141,12 @@
                 return d.toLocaleString();
             }
 
-            var sbc = document.getElementById("debug-content");
+            var sbc = messageList[0];
             var filter = false;
-            var messageCount = 0;
+            var view = 'list';
+            var messages = [];
+            var messagesByNode = {};
+
             var that = this;
             RED._debug = function(msg) {
                 that.handleDebugMessage("",{
@@ -137,11 +158,46 @@
                 return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
             }
 
-            var refreshMessageList = function() {
+            function refreshMessageList() {
                 $(".debug-message").each(function() {
                     $(this).toggleClass('hide',filter&&!$(this).hasClass('debug-message-flow-'+RED.workspaces.active()));
                 });
             }
+            function refreshMessageTable() {
+
+            }
+
+            function showMessageList() {
+                view = 'list';
+                messageTable.hide();
+                messageTable.empty();
+
+                messages.forEach(function(m) {
+                    messageList.append(m.el);
+                })
+                messageList.show();
+            }
+            function showMessageTable() {
+                view = 'table';
+                messageList.hide();
+                messageList.empty();
+
+                Object.keys(messagesByNode).forEach(function(id) {
+                    var m = messagesByNode[id];
+                    var msg = m.el;
+                    var sourceNode = m.source;
+                    if (sourceNode) {
+                        var wrapper = $("<div>",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
+                        wrapper.append(msg);
+                    }
+                });
+                messageTable.show();
+            }
+
+
+            function showFilterDialog() {
+                filterDialog.slideDown();
+            }
 
             this.handleDebugMessage = function(t,o) {
 
@@ -223,17 +279,37 @@
                     }
                 }
                 var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
-                RED.debug.buildMessageElement(payload,true).appendTo(el);
+                RED.debug.buildMessageElement(payload,true,format).appendTo(el);
-                var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5;
+                var atBottom = (sbc.scrollHeight-messageList.height()-sbc.scrollTop) < 5;
-                messageCount++;
+                var m = {
-                messages.append(msg);
+                    el: msg
+                };
+                messages.push(m);
+                if (sourceNode) {
+                    m.source = sourceNode;
+                    messagesByNode[sourceNode.id] = m;
+                }
+                if (view == "list") {
+                    messageList.append(msg);
+                } else {
+                    if (sourceNode) {
+                        var wrapper = $("#debug-message-source-"+sourceNode.id.replace(/\./g,"_"));
+                        if (wrapper.length === 0 ) {
+                            wrapper = $("<div>",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable);
+                        }
+                        wrapper.empty();
+                        wrapper.append(msg);
+                    }
+                }
 
-                if (messageCount > 200) {
+                if (messages.length === 100) {
-                    $("#debug-content .debug-message:first").remove();
+                    var m = messages.shift();
-                    messageCount--;
+                    if (view === "list") {
+                        m.el.remove();
+                    }
                 }
                 if (atBottom) {
-                    $(sbc).scrollTop(sbc.scrollHeight);
+                    messageList.scrollTop(sbc.scrollHeight);
                 }
             };
             RED.comms.subscribe("debug",this.handleDebugMessage);
@@ -265,6 +341,37 @@
                     refreshMessageList();
                 }
             });
+            $('#debug-tab-view-list').on("click",function(e) {
+                e.preventDefault();
+                if (!$(this).hasClass('selected')) {
+                    $(this).addClass('selected');
+                    $('#debug-tab-view-table').removeClass('selected');
+                    showMessageList();
+                }
+            });
+            $('#debug-tab-view-table').on("click",function(e) {
+                e.preventDefault();
+                if (!$(this).hasClass('selected')) {
+                    $(this).addClass('selected');
+                    $('#debug-tab-view-list').removeClass('selected');
+                    showMessageTable();
+                }
+            });
+
+
+            $('#debug-tab-filter').on("click",function(e) {
+                e.preventDefault();
+                if ($(this).hasClass('selected')) {
+                    $(this).removeClass('selected');
+                    filterDialog.slideUp(200);
+                } else {
+                    $(this).addClass('selected');
+                    filterDialog.slideDown(200);
+                }
+            })
+
+
+
             RED.events.on("workspace:change", refreshMessageList);
             $("#debug-tab-open").click(function(e) {
                 e.preventDefault();

nodes/core/core/58-debug.js

@@ -80,7 +80,7 @@ module.exports = function(RED) {
             msg.format = "error";
             msg.msg = msg.msg.toString();
         } else if (msg.msg instanceof Buffer) {
-            msg.format = "buffer ["+msg.msg.length+"]";
+            msg.format = "buffer["+msg.msg.length+"]";
             msg.msg = msg.msg.toString('hex');
             if (msg.msg.length > debuglength) {
                 msg.msg = msg.msg.substring(0,debuglength);
@@ -94,7 +94,7 @@ module.exports = function(RED) {
             }
             var isArray = util.isArray(msg.msg);
             if (isArray) {
-                msg.format = "array ["+msg.msg.length+"]";
+                msg.format = "array["+msg.msg.length+"]";
             }
             if (isArray || (msg.format === "Object")) {
                 msg.msg = JSON.stringify(msg.msg, function(key, value) {

nodes/core/core/lib/debug/debug-utils.js

@@ -1,6 +1,6 @@
 
 RED.debug = (function() {
-    function buildMessageElement(obj,topLevel) {
+    function buildMessageElement(obj,topLevel,typeHint) {
         var i;
         var e;
         var entryObj;
@@ -11,7 +11,7 @@ RED.debug = (function() {
         if (Array.isArray(obj)) {
             var length = Math.min(obj.length,10);
             if (!topLevel) {
-                header = $('<span class="debug-message-type-meta"></span>').html('array['+obj.length+']').appendTo(element);
+                header = $('<span class="debug-message-type-meta"></span>').html(typeHint||('array['+obj.length+']')).appendTo(element);
             } else {
                 header = $('<span>').appendTo(element);
                 if (length > 0) {
@@ -22,7 +22,7 @@ RED.debug = (function() {
                         e.preventDefault();
                     });
                 }
-                $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('array['+obj.length+']').appendTo(header);
+                $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(typeHint||('array['+obj.length+']')).appendTo(header);
                 headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
                 $('<span>[ </span>').appendTo(headerHead);
             }
@@ -36,7 +36,11 @@ RED.debug = (function() {
                     } else if (value === null) {
                         $('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
                     } else if (typeof value === 'object') {
+                        if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) {
+                            $('<span class="debug-message-object-value debug-message-type-meta"></span>').html('buffer['+value.data.length+']').appendTo(headerHead);
+                        } else {
                             $('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
+                        }
                     } else if (typeof value === 'string') {
                         $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
                     } else {
@@ -76,6 +80,10 @@ RED.debug = (function() {
         } else if (obj === null || obj === undefined) {
             $('<span class="debug-message-object-value debug-message-type-null">'+obj+'</span>').appendTo(element);
         } else if (typeof obj === 'object') {
+            if (obj.hasOwnProperty('type') && obj.type === 'Buffer' && obj.hasOwnProperty('data')) {
+                buildMessageElement(obj.data,false,'buffer['+obj.data.length+']').appendTo(element);
+
+            } else {
                 var keys = Object.keys(obj);
                 if (topLevel) {
                     header = $('<span>').appendTo(element);
@@ -106,7 +114,11 @@ RED.debug = (function() {
                             } else if (value === null) {
                                 $('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
                             } else if (typeof value === 'object') {
+                                if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) {
+                                    $('<span class="debug-message-object-value debug-message-type-meta"></span>').html('buffer['+value.data.length+']').appendTo(headerHead);
+                                } else {
                                     $('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
+                                }
                             } else if (typeof value === 'string') {
                                 $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
                             } else {
@@ -144,6 +156,7 @@ RED.debug = (function() {
                     }
                     $('<span> }</span>').appendTo(headerHead);
                 }
+            }
         } else if (typeof obj === 'string') {
             $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
         } else {

nodes/core/core/lib/debug/debug.js

@@ -1,3 +1,4 @@
+var RED = {};
 $(function() {
 
     $("#debug-tab-clear").click(function() {
@@ -80,12 +81,21 @@ $(function() {
 
                             '</span>';
         }
-        if (format !== 'Object') {
+        if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
-            msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
+            payload = JSON.parse(payload);
-        } else {
+        } else if (format === 'null') {
-            var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
+            payload = null;
-            buildMessageElement(JSON.parse(payload),true).appendTo(el);
+        } else if (format === 'undefined') {
+            payload = undefined;
+        } else if (/^buffer/.test(format)) {
+            var buffer = payload;
+            payload = [];
+            for (var c = 0; c < buffer.length; c += 2) {
+                payload.push(parseInt(buffer.substr(c, 2), 16));
             }
+        }
+        var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
+        RED.debug.buildMessageElement(payload,true,format).appendTo(el);
         $("#debug-content").append(msg);
         $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
     },false);

nodes/core/core/lib/debug/style.css

@@ -2,11 +2,12 @@
     padding:0;
     margin:0;
     background: #fff;
+    line-height: 20px;
 }
 .debug-window .debug-message-payload {
     font-size: 14px;
 }
-#debug-content {
+.debug-content {
     position: absolute;
     top: 43px;
     bottom: 0px;
@@ -14,6 +15,20 @@
     right: 0px;
     overflow-y: scroll;
 }
+.debug-filter-box {
+    position:absolute;
+    top: 42px;
+    left: 0px;
+    right: 0px;
+    background: #fff;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+.debug-filter-row {
+    text-align: right;
+}
+
 .debug-message {
     border-bottom: 1px solid #eee;
     border-left: 8px solid #eee;

nodes/core/core/lib/debug/view.html

@@ -12,9 +12,9 @@
 </span>
 <span class="button-group"><a id="debug-tab-open" title="open in new window" class="sidebar-header-button" href="#"><i class="fa fa-desktop"></i></a></span>
 <span class="button-group"><a id="debug-tab-clear" title="clear log" class="sidebar-header-button" href="#"><i class="fa fa-trash"></i></a></span></div>
-<div id="debug-content"></div>
+<div class="debug-content"></div>
 </body>
 <script src="../../vendor/vendor-jquery.js"></script>
-<script src="debug-utils.js"></script>
 <script src="debug.js"></script>
+<script src="debug-utils.js"></script>
 </html>