mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add debug filter box
This commit is contained in:
parent
7607c4c882
commit
2b558768f1
@ -629,7 +629,7 @@ RED.palette.editor = (function() {
|
|||||||
|
|
||||||
|
|
||||||
$('<span>').html(RED._("palette.editor.sort")+' ').appendTo(toolBar);
|
$('<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 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);
|
var sortRecent = $('<a href="#" class="sidebar-header-button-toggle" data-i18n="palette.editor.sortRecent"></a>').appendTo(sortGroup);
|
||||||
|
|
||||||
|
@ -2423,14 +2423,15 @@ RED.view = (function() {
|
|||||||
var flash = 22;
|
var flash = 22;
|
||||||
var flashFunc = function() {
|
var flashFunc = function() {
|
||||||
flash--;
|
flash--;
|
||||||
node.highlighted = !node.highlighted;
|
|
||||||
node.dirty = true;
|
node.dirty = true;
|
||||||
RED.view.redraw();
|
|
||||||
if (flash >= 0) {
|
if (flash >= 0) {
|
||||||
|
node.highlighted = !node.highlighted;
|
||||||
setTimeout(flashFunc,100);
|
setTimeout(flashFunc,100);
|
||||||
} else {
|
} else {
|
||||||
|
node.highlighted = false;
|
||||||
delete node._flashing;
|
delete node._flashing;
|
||||||
}
|
}
|
||||||
|
RED.view.redraw();
|
||||||
}
|
}
|
||||||
flashFunc();
|
flashFunc();
|
||||||
}
|
}
|
||||||
|
@ -70,7 +70,6 @@
|
|||||||
&.selected:not(.disabled) {
|
&.selected:not(.disabled) {
|
||||||
color: $workspace-button-color-selected !important;
|
color: $workspace-button-color-selected !important;
|
||||||
background: $workspace-button-background-active;
|
background: $workspace-button-background-active;
|
||||||
cursor: default;
|
|
||||||
}
|
}
|
||||||
.button-group &:not(:first-child) {
|
.button-group &:not(:first-child) {
|
||||||
border-left: none;
|
border-left: none;
|
||||||
@ -86,6 +85,12 @@
|
|||||||
outline: 1px solid $workspace-button-color-focus-outline;
|
outline: 1px solid $workspace-button-color-focus-outline;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button-group:not(:last-child) {
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@mixin workspace-button-toggle {
|
@mixin workspace-button-toggle {
|
||||||
@include workspace-button;
|
@include workspace-button;
|
||||||
color: $workspace-button-toggle-color !important;
|
color: $workspace-button-toggle-color !important;
|
||||||
@ -97,6 +102,7 @@
|
|||||||
border-bottom-width: 2px;
|
border-bottom-width: 2px;
|
||||||
border-bottom-color: $form-input-border-selected-color;
|
border-bottom-color: $form-input-border-selected-color;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
&.disabled {
|
&.disabled {
|
||||||
color: $workspace-button-toggle-color-disabled !important;
|
color: $workspace-button-toggle-color-disabled !important;
|
||||||
@ -115,6 +121,12 @@
|
|||||||
height: 25px;
|
height: 25px;
|
||||||
line-height: 23px;
|
line-height: 23px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
|
|
||||||
|
.button-group:not(:last-child) {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin component-footer-button {
|
@mixin component-footer-button {
|
||||||
@ -128,6 +140,16 @@
|
|||||||
padding: 0 5px;
|
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 {
|
@mixin component-shadow {
|
||||||
border: 1px solid $secondary-border-color;
|
border: 1px solid $secondary-border-color;
|
||||||
|
@ -72,10 +72,6 @@
|
|||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border-bottom: 1px solid $primary-border-color;
|
border-bottom: 1px solid $primary-border-color;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
|
||||||
.button-group {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.palette-module-button-group {
|
.palette-module-button-group {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -71,6 +71,7 @@
|
|||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
background: #f3f3f3;
|
background: #f3f3f3;
|
||||||
border-bottom: 1px solid $secondary-border-color;
|
border-bottom: 1px solid $secondary-border-color;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar-footer {
|
#sidebar-footer {
|
||||||
@ -80,6 +81,9 @@
|
|||||||
.sidebar-footer-button {
|
.sidebar-footer-button {
|
||||||
@include component-footer-button;
|
@include component-footer-button;
|
||||||
}
|
}
|
||||||
|
.sidebar-footer-button-toggle {
|
||||||
|
@include component-footer-button-toggle;
|
||||||
|
}
|
||||||
.sidebar-header-button {
|
.sidebar-header-button {
|
||||||
@include workspace-button;
|
@include workspace-button;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -100,14 +100,31 @@
|
|||||||
onpaletteadd: function() {
|
onpaletteadd: function() {
|
||||||
var content = $("<div>").css({"position":"relative","height":"100%"});
|
var content = $("<div>").css({"position":"relative","height":"100%"});
|
||||||
var toolbar = $('<div class="sidebar-header">'+
|
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">'+
|
'<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 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> '+
|
'<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
|
||||||
'</span>'+
|
'</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();
|
content.i18n();
|
||||||
|
|
||||||
RED.sidebar.addTab({
|
RED.sidebar.addTab({
|
||||||
@ -115,6 +132,7 @@
|
|||||||
label: this._("debug.sidebar.label"),
|
label: this._("debug.sidebar.label"),
|
||||||
name: this._("debug.sidebar.name"),
|
name: this._("debug.sidebar.name"),
|
||||||
content: content,
|
content: content,
|
||||||
|
toolbar: footerToolbar,
|
||||||
enableOnEdit: true
|
enableOnEdit: true
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -123,9 +141,12 @@
|
|||||||
return d.toLocaleString();
|
return d.toLocaleString();
|
||||||
}
|
}
|
||||||
|
|
||||||
var sbc = document.getElementById("debug-content");
|
var sbc = messageList[0];
|
||||||
var filter = false;
|
var filter = false;
|
||||||
var messageCount = 0;
|
var view = 'list';
|
||||||
|
var messages = [];
|
||||||
|
var messagesByNode = {};
|
||||||
|
|
||||||
var that = this;
|
var that = this;
|
||||||
RED._debug = function(msg) {
|
RED._debug = function(msg) {
|
||||||
that.handleDebugMessage("",{
|
that.handleDebugMessage("",{
|
||||||
@ -137,11 +158,46 @@
|
|||||||
return m.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
return m.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
|
||||||
}
|
}
|
||||||
|
|
||||||
var refreshMessageList = function() {
|
function refreshMessageList() {
|
||||||
$(".debug-message").each(function() {
|
$(".debug-message").each(function() {
|
||||||
$(this).toggleClass('hide',filter&&!$(this).hasClass('debug-message-flow-'+RED.workspaces.active()));
|
$(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) {
|
this.handleDebugMessage = function(t,o) {
|
||||||
|
|
||||||
@ -223,17 +279,37 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
|
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) {
|
if (atBottom) {
|
||||||
$(sbc).scrollTop(sbc.scrollHeight);
|
messageList.scrollTop(sbc.scrollHeight);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
RED.comms.subscribe("debug",this.handleDebugMessage);
|
RED.comms.subscribe("debug",this.handleDebugMessage);
|
||||||
@ -265,6 +341,37 @@
|
|||||||
refreshMessageList();
|
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);
|
RED.events.on("workspace:change", refreshMessageList);
|
||||||
$("#debug-tab-open").click(function(e) {
|
$("#debug-tab-open").click(function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -80,7 +80,7 @@ module.exports = function(RED) {
|
|||||||
msg.format = "error";
|
msg.format = "error";
|
||||||
msg.msg = msg.msg.toString();
|
msg.msg = msg.msg.toString();
|
||||||
} else if (msg.msg instanceof Buffer) {
|
} else if (msg.msg instanceof Buffer) {
|
||||||
msg.format = "buffer ["+msg.msg.length+"]";
|
msg.format = "buffer["+msg.msg.length+"]";
|
||||||
msg.msg = msg.msg.toString('hex');
|
msg.msg = msg.msg.toString('hex');
|
||||||
if (msg.msg.length > debuglength) {
|
if (msg.msg.length > debuglength) {
|
||||||
msg.msg = msg.msg.substring(0,debuglength);
|
msg.msg = msg.msg.substring(0,debuglength);
|
||||||
@ -94,7 +94,7 @@ module.exports = function(RED) {
|
|||||||
}
|
}
|
||||||
var isArray = util.isArray(msg.msg);
|
var isArray = util.isArray(msg.msg);
|
||||||
if (isArray) {
|
if (isArray) {
|
||||||
msg.format = "array ["+msg.msg.length+"]";
|
msg.format = "array["+msg.msg.length+"]";
|
||||||
}
|
}
|
||||||
if (isArray || (msg.format === "Object")) {
|
if (isArray || (msg.format === "Object")) {
|
||||||
msg.msg = JSON.stringify(msg.msg, function(key, value) {
|
msg.msg = JSON.stringify(msg.msg, function(key, value) {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
|
|
||||||
RED.debug = (function() {
|
RED.debug = (function() {
|
||||||
function buildMessageElement(obj,topLevel) {
|
function buildMessageElement(obj,topLevel,typeHint) {
|
||||||
var i;
|
var i;
|
||||||
var e;
|
var e;
|
||||||
var entryObj;
|
var entryObj;
|
||||||
@ -11,7 +11,7 @@ RED.debug = (function() {
|
|||||||
if (Array.isArray(obj)) {
|
if (Array.isArray(obj)) {
|
||||||
var length = Math.min(obj.length,10);
|
var length = Math.min(obj.length,10);
|
||||||
if (!topLevel) {
|
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 {
|
} else {
|
||||||
header = $('<span>').appendTo(element);
|
header = $('<span>').appendTo(element);
|
||||||
if (length > 0) {
|
if (length > 0) {
|
||||||
@ -22,7 +22,7 @@ RED.debug = (function() {
|
|||||||
e.preventDefault();
|
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);
|
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
|
||||||
$('<span>[ </span>').appendTo(headerHead);
|
$('<span>[ </span>').appendTo(headerHead);
|
||||||
}
|
}
|
||||||
@ -36,7 +36,11 @@ RED.debug = (function() {
|
|||||||
} else if (value === null) {
|
} else if (value === null) {
|
||||||
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
|
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
|
||||||
} else if (typeof value === 'object') {
|
} else if (typeof value === 'object') {
|
||||||
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
|
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') {
|
} else if (typeof value === 'string') {
|
||||||
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
|
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
|
||||||
} else {
|
} else {
|
||||||
@ -76,73 +80,82 @@ RED.debug = (function() {
|
|||||||
} else if (obj === null || obj === undefined) {
|
} else if (obj === null || obj === undefined) {
|
||||||
$('<span class="debug-message-object-value debug-message-type-null">'+obj+'</span>').appendTo(element);
|
$('<span class="debug-message-object-value debug-message-type-null">'+obj+'</span>').appendTo(element);
|
||||||
} else if (typeof obj === 'object') {
|
} else if (typeof obj === 'object') {
|
||||||
var keys = Object.keys(obj);
|
if (obj.hasOwnProperty('type') && obj.type === 'Buffer' && obj.hasOwnProperty('data')) {
|
||||||
if (topLevel) {
|
buildMessageElement(obj.data,false,'buffer['+obj.data.length+']').appendTo(element);
|
||||||
header = $('<span>').appendTo(element);
|
|
||||||
if (keys.length > 0) {
|
|
||||||
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
|
|
||||||
header.addClass("debug-message-expandable");
|
|
||||||
header.click(function(e) {
|
|
||||||
$(this).parent().toggleClass('collapsed');
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
header = $('<span class="debug-message-type-meta"></span>').html('object').appendTo(element);
|
var keys = Object.keys(obj);
|
||||||
}
|
|
||||||
if (topLevel) {
|
|
||||||
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('object').appendTo(header);
|
|
||||||
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
|
|
||||||
$('<span>{ </span>').appendTo(headerHead);
|
|
||||||
}
|
|
||||||
for (i=0;i<keys.length;i++) {
|
|
||||||
if (topLevel) {
|
if (topLevel) {
|
||||||
if (i < 5) {
|
header = $('<span>').appendTo(element);
|
||||||
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
|
if (keys.length > 0) {
|
||||||
$('<span>: </span>').appendTo(headerHead);
|
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
|
||||||
value = obj[keys[i]];
|
header.addClass("debug-message-expandable");
|
||||||
if (Array.isArray(value)) {
|
header.click(function(e) {
|
||||||
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
|
$(this).parent().toggleClass('collapsed');
|
||||||
} else if (value === null) {
|
e.preventDefault();
|
||||||
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
|
});
|
||||||
} else if (typeof value === 'object') {
|
}
|
||||||
$('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
|
} else {
|
||||||
} else if (typeof value === 'string') {
|
header = $('<span class="debug-message-type-meta"></span>').html('object').appendTo(element);
|
||||||
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
|
}
|
||||||
} else {
|
if (topLevel) {
|
||||||
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
|
$('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('object').appendTo(header);
|
||||||
|
headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
|
||||||
|
$('<span>{ </span>').appendTo(headerHead);
|
||||||
|
}
|
||||||
|
for (i=0;i<keys.length;i++) {
|
||||||
|
if (topLevel) {
|
||||||
|
if (i < 5) {
|
||||||
|
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
|
||||||
|
$('<span>: </span>').appendTo(headerHead);
|
||||||
|
value = obj[keys[i]];
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
$('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
|
||||||
|
} 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 {
|
||||||
|
$('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
|
||||||
|
}
|
||||||
|
if (i < keys.length -1) {
|
||||||
|
$('<span>, </span>').appendTo(headerHead);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (i < keys.length -1) {
|
if (i === 5) {
|
||||||
$('<span>, </span>').appendTo(headerHead);
|
$('<span> ...</span>').appendTo(headerHead);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (i === 5) {
|
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
||||||
$('<span> ...</span>').appendTo(headerHead);
|
var entryHeader = $('<span></span>').appendTo(entryObj);
|
||||||
|
if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
|
||||||
|
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(entryHeader);
|
||||||
|
entryHeader.addClass("debug-message-expandable");
|
||||||
|
entryHeader.click(function(e) {
|
||||||
|
$(this).parent().toggleClass('collapsed');
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryHeader);
|
||||||
|
$('<span>: </span>').appendTo(entryHeader);
|
||||||
|
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
|
||||||
|
buildMessageElement(obj[keys[i]],false).appendTo(e);
|
||||||
}
|
}
|
||||||
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
|
|
||||||
var entryHeader = $('<span></span>').appendTo(entryObj);
|
|
||||||
if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
|
|
||||||
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(entryHeader);
|
|
||||||
entryHeader.addClass("debug-message-expandable");
|
|
||||||
entryHeader.click(function(e) {
|
|
||||||
$(this).parent().toggleClass('collapsed');
|
|
||||||
e.preventDefault();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryHeader);
|
|
||||||
$('<span>: </span>').appendTo(entryHeader);
|
|
||||||
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
|
|
||||||
buildMessageElement(obj[keys[i]],false).appendTo(e);
|
|
||||||
}
|
|
||||||
if (keys.length === 0) {
|
|
||||||
$('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
|
|
||||||
}
|
|
||||||
if (topLevel) {
|
|
||||||
if (keys.length === 0) {
|
if (keys.length === 0) {
|
||||||
$('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
|
$('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
|
||||||
|
}
|
||||||
|
if (topLevel) {
|
||||||
|
if (keys.length === 0) {
|
||||||
|
$('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
|
||||||
|
}
|
||||||
|
$('<span> }</span>').appendTo(headerHead);
|
||||||
}
|
}
|
||||||
$('<span> }</span>').appendTo(headerHead);
|
|
||||||
}
|
}
|
||||||
} else if (typeof obj === 'string') {
|
} else if (typeof obj === 'string') {
|
||||||
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
|
$('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
var RED = {};
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
||||||
$("#debug-tab-clear").click(function() {
|
$("#debug-tab-clear").click(function() {
|
||||||
@ -80,12 +81,21 @@ $(function() {
|
|||||||
|
|
||||||
'</span>';
|
'</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").append(msg);
|
||||||
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
|
$("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
|
||||||
},false);
|
},false);
|
||||||
|
@ -2,11 +2,12 @@
|
|||||||
padding:0;
|
padding:0;
|
||||||
margin:0;
|
margin:0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
.debug-window .debug-message-payload {
|
.debug-window .debug-message-payload {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
#debug-content {
|
.debug-content {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 43px;
|
top: 43px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
@ -14,6 +15,20 @@
|
|||||||
right: 0px;
|
right: 0px;
|
||||||
overflow-y: scroll;
|
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 {
|
.debug-message {
|
||||||
border-bottom: 1px solid #eee;
|
border-bottom: 1px solid #eee;
|
||||||
border-left: 8px solid #eee;
|
border-left: 8px solid #eee;
|
||||||
|
@ -12,9 +12,9 @@
|
|||||||
</span>
|
</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-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>
|
<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>
|
</body>
|
||||||
<script src="../../vendor/vendor-jquery.js"></script>
|
<script src="../../vendor/vendor-jquery.js"></script>
|
||||||
<script src="debug-utils.js"></script>
|
|
||||||
<script src="debug.js"></script>
|
<script src="debug.js"></script>
|
||||||
|
<script src="debug-utils.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user