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() {
$("#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() {
var d = new Date();
return d.toLocaleString();
@ -72,50 +84,71 @@ $(function() {
msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
} else {
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").scrollTop($("#debug-content")[0].scrollHeight);
},false);
function buildMessageElement(obj) {
function buildMessageElement(obj,topLevel) {
var i;
var e;
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)) {
$('<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);
if (typeof obj[i] === 'object') {
$('<i class="fa fa-caret-right"></i> ').click(function(e) {
header = $('<span></span>').appendTo(entryObj);
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');
}).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);
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') {
$('<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);
for (i=0;i<keys.length;i++) {
entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
if (typeof obj[keys[i]] === 'object') {
$('<i class="fa fa-caret-right debug-message-object-handle"></i> ').click(function(e) {
header = $('<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(header);
header.addClass("debug-message-expandable");
header.click(function(e) {
$(this).parent().toggleClass('collapsed');
}).appendTo(entryObj);
});
}
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryObj);
$('<span>: </span>').appendTo(entryObj);
$('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(header);
$('<span>: </span>').appendTo(header);
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') {
$('<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 {
$('<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;
}

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

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