From 2b558768f1f53911e5f34d2c742c354cb38f782d Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Tue, 25 Oct 2016 21:15:06 +0100 Subject: [PATCH] Add debug filter box --- editor/js/ui/palette-editor.js | 2 +- editor/js/ui/view.js | 5 +- editor/sass/mixins.scss | 24 +++- editor/sass/palette-editor.scss | 4 - editor/sass/sidebar.scss | 4 + nodes/core/core/58-debug.html | 135 +++++++++++++++++++--- nodes/core/core/58-debug.js | 4 +- nodes/core/core/lib/debug/debug-utils.js | 137 +++++++++++++---------- nodes/core/core/lib/debug/debug.js | 20 +++- nodes/core/core/lib/debug/style.css | 17 ++- nodes/core/core/lib/debug/view.html | 4 +- 11 files changed, 262 insertions(+), 94 deletions(-) diff --git a/editor/js/ui/palette-editor.js b/editor/js/ui/palette-editor.js index d7523ed31..8513f67bd 100644 --- a/editor/js/ui/palette-editor.js +++ b/editor/js/ui/palette-editor.js @@ -629,7 +629,7 @@ RED.palette.editor = (function() { $('').html(RED._("palette.editor.sort")+' ').appendTo(toolBar); - var sortGroup = $(' ').appendTo(toolBar); + var sortGroup = $('').appendTo(toolBar); var sortAZ = $('').appendTo(sortGroup); var sortRecent = $('').appendTo(sortGroup); diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 46701e1fc..03d675c9c 100644 --- a/editor/js/ui/view.js +++ b/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(); } diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index 4042b111e..45cdd19a1 100644 --- a/editor/sass/mixins.scss +++ b/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; diff --git a/editor/sass/palette-editor.scss b/editor/sass/palette-editor.scss index 8565d91b3..be1c4348d 100644 --- a/editor/sass/palette-editor.scss +++ b/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; diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss index 0f782e773..08da74a24 100644 --- a/editor/sass/sidebar.scss +++ b/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; diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html index 241ab4029..7fbe27fc2 100644 --- a/nodes/core/core/58-debug.html +++ b/nodes/core/core/58-debug.html @@ -100,14 +100,31 @@ onpaletteadd: function() { var content = $("
").css({"position":"relative","height":"100%"}); var toolbar = $('
'+ + ''+ + '
').appendTo(content); + + + var footerToolbar = $('
'+ + ''+ + 'list'+ + 'table '+ + ''+ + ' ' + + '
'); + + var messageList = $('
').appendTo(content); + var messageTable = $('
').appendTo(content); + + var filterDialog = $('
'+ + '
'+ ''+ ''+ ' '+ ''+ - ' ' + - '
').appendTo(content); + '
'+ + '
').appendTo(content); + - var messages = $('
').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,"&").replace(//g,">"); } - 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 = $("
",{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 = $('').appendTo(msg); - RED.debug.buildMessageElement(payload,true).appendTo(el); - var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5; - messageCount++; - messages.append(msg); + RED.debug.buildMessageElement(payload,true,format).appendTo(el); + var atBottom = (sbc.scrollHeight-messageList.height()-sbc.scrollTop) < 5; + var m = { + 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 = $("
",{id:"debug-message-source-"+sourceNode.id.replace(/\./g,"_")}).appendTo(messageTable); + } + wrapper.empty(); + wrapper.append(msg); + } + } - if (messageCount > 200) { - $("#debug-content .debug-message:first").remove(); - messageCount--; + if (messages.length === 100) { + var m = messages.shift(); + 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(); diff --git a/nodes/core/core/58-debug.js b/nodes/core/core/58-debug.js index f321ad536..08a46246e 100644 --- a/nodes/core/core/58-debug.js +++ b/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) { diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js index 3db4b8c36..bf2574c47 100644 --- a/nodes/core/core/lib/debug/debug-utils.js +++ b/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 = $('').html('array['+obj.length+']').appendTo(element); + header = $('').html(typeHint||('array['+obj.length+']')).appendTo(element); } else { header = $('').appendTo(element); if (length > 0) { @@ -22,7 +22,7 @@ RED.debug = (function() { e.preventDefault(); }); } - $('').html('array['+obj.length+']').appendTo(header); + $('').html(typeHint||('array['+obj.length+']')).appendTo(header); headerHead = $('').appendTo(header); $('[ ').appendTo(headerHead); } @@ -36,7 +36,11 @@ RED.debug = (function() { } else if (value === null) { $('null').appendTo(headerHead); } else if (typeof value === 'object') { - $('object').appendTo(headerHead); + if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) { + $('').html('buffer['+value.data.length+']').appendTo(headerHead); + } else { + $('object').appendTo(headerHead); + } } else if (typeof value === 'string') { $('').text('"'+value+'"').appendTo(headerHead); } else { @@ -76,73 +80,82 @@ RED.debug = (function() { } else if (obj === null || obj === undefined) { $(''+obj+'').appendTo(element); } else if (typeof obj === 'object') { - var keys = Object.keys(obj); - if (topLevel) { - header = $('').appendTo(element); - if (keys.length > 0) { - $(' ').prependTo(header); - header.addClass("debug-message-expandable"); - header.click(function(e) { - $(this).parent().toggleClass('collapsed'); - e.preventDefault(); - }); - } + if (obj.hasOwnProperty('type') && obj.type === 'Buffer' && obj.hasOwnProperty('data')) { + buildMessageElement(obj.data,false,'buffer['+obj.data.length+']').appendTo(element); + } else { - header = $('').html('object').appendTo(element); - } - if (topLevel) { - $('').html('object').appendTo(header); - headerHead = $('').appendTo(header); - $('{ ').appendTo(headerHead); - } - for (i=0;i').text(keys[i]).appendTo(headerHead); - $(': ').appendTo(headerHead); - value = obj[keys[i]]; - if (Array.isArray(value)) { - $('').html('array['+value.length+']').appendTo(headerHead); - } else if (value === null) { - $('null').appendTo(headerHead); - } else if (typeof value === 'object') { - $('object').appendTo(headerHead); - } else if (typeof value === 'string') { - $('').text('"'+value+'"').appendTo(headerHead); - } else { - $('').text(""+value).appendTo(headerHead); + header = $('').appendTo(element); + if (keys.length > 0) { + $(' ').prependTo(header); + header.addClass("debug-message-expandable"); + header.click(function(e) { + $(this).parent().toggleClass('collapsed'); + e.preventDefault(); + }); + } + } else { + header = $('').html('object').appendTo(element); + } + if (topLevel) { + $('').html('object').appendTo(header); + headerHead = $('').appendTo(header); + $('{ ').appendTo(headerHead); + } + for (i=0;i').text(keys[i]).appendTo(headerHead); + $(': ').appendTo(headerHead); + value = obj[keys[i]]; + if (Array.isArray(value)) { + $('').html('array['+value.length+']').appendTo(headerHead); + } else if (value === null) { + $('null').appendTo(headerHead); + } else if (typeof value === 'object') { + if (value.hasOwnProperty('type') && value.type === 'Buffer' && value.hasOwnProperty('data')) { + $('').html('buffer['+value.data.length+']').appendTo(headerHead); + } else { + $('object').appendTo(headerHead); + } + } else if (typeof value === 'string') { + $('').text('"'+value+'"').appendTo(headerHead); + } else { + $('').text(""+value).appendTo(headerHead); + } + if (i < keys.length -1) { + $(', ').appendTo(headerHead); + } } - if (i < keys.length -1) { - $(', ').appendTo(headerHead); + if (i === 5) { + $(' ...').appendTo(headerHead); } } - if (i === 5) { - $(' ...').appendTo(headerHead); + entryObj = $('').appendTo(element); + var entryHeader = $('').appendTo(entryObj); + if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) { + $(' ').appendTo(entryHeader); + entryHeader.addClass("debug-message-expandable"); + entryHeader.click(function(e) { + $(this).parent().toggleClass('collapsed'); + e.preventDefault(); + }); } + $('').text(keys[i]).appendTo(entryHeader); + $(': ').appendTo(entryHeader); + e = $('').appendTo(entryObj); + buildMessageElement(obj[keys[i]],false).appendTo(e); } - entryObj = $('').appendTo(element); - var entryHeader = $('').appendTo(entryObj); - if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) { - $(' ').appendTo(entryHeader); - entryHeader.addClass("debug-message-expandable"); - entryHeader.click(function(e) { - $(this).parent().toggleClass('collapsed'); - e.preventDefault(); - }); - } - $('').text(keys[i]).appendTo(entryHeader); - $(': ').appendTo(entryHeader); - e = $('').appendTo(entryObj); - buildMessageElement(obj[keys[i]],false).appendTo(e); - } - if (keys.length === 0) { - $('').text("empty").appendTo(element); - } - if (topLevel) { if (keys.length === 0) { - $('empty').appendTo(headerHead); + $('').text("empty").appendTo(element); + } + if (topLevel) { + if (keys.length === 0) { + $('empty').appendTo(headerHead); + } + $(' }').appendTo(headerHead); } - $(' }').appendTo(headerHead); } } else if (typeof obj === 'string') { $('').text('"'+obj+'"').appendTo(element); diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js index 57311e859..ddf663c53 100644 --- a/nodes/core/core/lib/debug/debug.js +++ b/nodes/core/core/lib/debug/debug.js @@ -1,3 +1,4 @@ +var RED = {}; $(function() { $("#debug-tab-clear").click(function() { @@ -80,12 +81,21 @@ $(function() { ''; } - if (format !== 'Object') { - msg.innerHTML += ''+ payload+ ''; - } else { - var el = $('').appendTo(msg); - buildMessageElement(JSON.parse(payload),true).appendTo(el); + if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) { + payload = JSON.parse(payload); + } else if (format === 'null') { + payload = null; + } 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 = $('').appendTo(msg); + RED.debug.buildMessageElement(payload,true,format).appendTo(el); $("#debug-content").append(msg); $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight); },false); diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css index df782a561..a2289a5f0 100644 --- a/nodes/core/core/lib/debug/style.css +++ b/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; diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html index 9b351c9b6..3a0befea3 100644 --- a/nodes/core/core/lib/debug/view.html +++ b/nodes/core/core/lib/debug/view.html @@ -12,9 +12,9 @@
-
+
- +