frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Improved type styling

This commit is contained in:
Nick O'Leary 2016-06-22 12:27:47 +01:00
parent e30da2168d
commit 0428e27039
2 changed files with 79 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
nodes/core/core/lib/debug/debug.js
View File

@ -1,4 +1,16 @@
$(function() { $(function() {
$("#debug-tab-clear").click(function() {
$(".debug-message").remove();
// messageCount = 0;
// RED.nodes.eachNode(function(node) {
// node.highlighted = false;
// node.dirty = true;
// });
// RED.view.redraw();
});
function getTimestamp() { function getTimestamp() {
var d = new Date(); var d = new Date();
return d.toLocaleString(); return d.toLocaleString();
@ -72,50 +84,71 @@ $(function() {
msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>'; msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
} else { } else {
var el = $('<span class="debug-message-payload"></span>').appendTo(msg); var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
buildMessageElement(JSON.parse(payload)).appendTo(el); buildMessageElement(JSON.parse(payload),true).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);
function buildMessageElement(obj) { function buildMessageElement(obj,topLevel) {
var i; var i;
var e; var e;
var entryObj; var entryObj;
var element = $('<span class="debug-message-element"></span>'); var header;
var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
if (Array.isArray(obj)) { if (Array.isArray(obj)) {
$('<span>').html('Array['+obj.length+']').appendTo(element); $('<span>').html('Array['+obj.length+']').appendTo(element);
for (i=0;i<obj.length;i++) { var length = Math.min(obj.length,10);
for (i=0;i<length;i++) {
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element); entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
if (typeof obj[i] === 'object') { header = $('<span></span>').appendTo(entryObj);
$('<i class="fa fa-caret-right"></i> ').click(function(e) { if (typeof obj[i] === 'object' && obj[i] !== null) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
header.addClass("debug-message-expandable");
header.click(function(e) {
$(this).parent().toggleClass('collapsed'); $(this).parent().toggleClass('collapsed');
}).appendTo(entryObj); });
} }
$('<span class="debug-message-object-key"></span>').text(i).appendTo(entryObj); $('<span class="debug-message-object-key"></span>').text(i).appendTo(header);
$('<span>: </span>').appendTo(entryObj); $('<span>: </span>').appendTo(entryObj);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj); e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[i]).appendTo(e); buildMessageElement(obj[i],false).appendTo(e);
} }
if (length < obj.length) {
$('<div class="debug-message-object-entry"><span class="debug-message-object-key">...</span></div>').appendTo(element);
}
} else if (obj === null) {
$('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(element);
} else if (typeof obj === 'object') { } else if (typeof obj === 'object') {
$('<span>').html('Object').appendTo(element);
header = $('<span>').html((topLevel?(JSON.stringify(obj,2).substring(0,200)):'Object')).appendTo(element);
if (topLevel) {
$('<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');
});
}
var keys = Object.keys(obj); var keys = Object.keys(obj);
for (i=0;i<keys.length;i++) { for (i=0;i<keys.length;i++) {
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element); entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
if (typeof obj[keys[i]] === 'object') { header = $('<span></span>').appendTo(entryObj);
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').click(function(e) { if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
header.addClass("debug-message-expandable");
header.click(function(e) {
$(this).parent().toggleClass('collapsed'); $(this).parent().toggleClass('collapsed');
}).appendTo(entryObj); });
} }
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryObj); $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(header);
$('<span>: </span>').appendTo(entryObj); $('<span>: </span>').appendTo(header);
e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj); e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
buildMessageElement(obj[keys[i]]).appendTo(e); buildMessageElement(obj[keys[i]],false).appendTo(e);
} }
} else if (typeof obj === 'string') { } else if (typeof obj === 'string') {
$('<span class="debug-message-object-value"></span>').text('"'+obj+'"').appendTo(element); $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
} else { } else {
$('<span class="debug-message-object-value"></span>').text(""+obj).appendTo(element); $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+obj).appendTo(element);
} }
return element; return element;
} }

38
nodes/core/core/lib/debug/style.css
View File

@ -4,7 +4,7 @@
background: #fff; background: #fff;
} }
.debug-window .debug-message-payload { .debug-window .debug-message-payload {
font-size: 12px; font-size: 14px;
} }
#debug-content { #debug-content {
position: absolute; position: absolute;
@ -15,7 +15,6 @@
overflow-y: scroll; overflow-y: scroll;
} }
.debug-message { .debug-message {
cursor: pointer;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
border-left: 8px solid #eee; border-left: 8px solid #eee;
border-right: 8px solid #eee; border-right: 8px solid #eee;
@ -60,28 +59,47 @@
.debug-message-object-entry { .debug-message-object-entry {
padding-left: 15px; padding-left: 15px;
padding-bottom: 3px; padding-bottom: 3px;
padding-top: 3px;
}
.debug-message-element {
color: #333;
} }
.debug-message-object-key { .debug-message-object-key {
color: #a66; color: #792e90;
} }
.debug-message-object-value { .debug-message-object-value {
} }
.debug-message-object-handle { .debug-message-object-handle {
color: #999; color: #666;
font-size: 0.8em; font-size: 1em;
width: 1em; width: 1em;
margin-left: -1em;
text-align: center; text-align: center;
transition: transform 0.2s ease-in-out; transition: transform 0.1s ease-in-out;
transform: rotate(90deg); transform: rotate(90deg);
} }
.debug-message-object-entry>span>.debug-message-object-handle {
.debug-message-object-entry.collapsed>.debug-message-object-handle { margin-left: -1em;
}
.debug-message-object-entry.collapsed>span>.debug-message-object-handle {
transform: rotate(0deg);
}
.debug-message-element.collapsed>span>.debug-message-object-handle {
transform: rotate(0deg); transform: rotate(0deg);
} }
.debug-message-object-entry.collapsed .debug-message-object-entry { .debug-message-object-entry.collapsed .debug-message-object-entry {
display:none; display:none;
} }
.debug-message-element.collapsed .debug-message-object-entry {
display:none;
}
.debug-message-type-other { color: #2033d6; }
.debug-message-type-string { color: #b72828; }
.debug-message-type-null { color: #666; font-style: italic;}
.debug-message-expandable {
cursor: pointer;
}