frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Add initial debugger panel to debug tab

Browse Source
This commit is contained in:
Nick O'Leary 2016-11-18 12:53:05 +00:00
parent 416d5190bc
commit 629c63e0c9
9 changed files with 182 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -110,6 +110,7 @@ module.exports = function(grunt) {
"editor/js/nodes.js",
"editor/js/history.js",
"editor/js/validators.js",
"editor/js/debugger.js",
"editor/js/ui/common/editableList.js",
"editor/js/ui/common/menu.js",
"editor/js/ui/common/popover.js",

4
editor/js/debugger.js Normal file
View File

@ -0,0 +1,4 @@
RED.debugger = (function() {
})();

3
editor/js/ui/state.js
View File

@ -23,5 +23,6 @@ RED.state = {
EXPORT: 6,
IMPORT: 7,
IMPORT_DRAGGING: 8,
QUICK_JOINING: 9
QUICK_JOINING: 9,
EDIT_BREAKPOINT: 10
}

36
editor/js/ui/view.js
View File

@ -1570,6 +1570,29 @@ RED.view = (function() {
RED.touch.radialMenu.show(obj,pos,options);
resetMouseVars();
}
function createBreakpoint(port,type) {
var breakPointGroup = port.append("g").attr("class","port_breakpoint");
breakPointGroup.append("rect").attr("class","port_highlight").attr("x",0).attr("y",0).attr("rx",1).attr("ry",1).attr("width",3).attr("height",14);
breakPointGroup.append("rect").attr("class","port_highlight").attr("x",4).attr("y",0).attr("rx",1).attr("ry",1).attr("width",3).attr("height",14);
switch(Math.floor(Math.random()*3)) {
case 0: breakPointGroup.classed("port_breakpoint_active",true); break;
case 1: breakPointGroup.classed("port_breakpoint_inactive",true); break;
case 2: breakPointGroup.classed("port_breakpoint_triggered",true); break;
}
if (type === 0) {
breakPointGroup.attr("transform","translate(-9,-2)");
} else if (type === 1) {
breakPointGroup.attr("transform","translate(12,-2)");
}
}
function redraw() {
vis.attr("transform","scale("+scaleFactor+")");
outer.attr("width", space_width*scaleFactor).attr("height", space_height*scaleFactor);
@ -1931,6 +1954,7 @@ RED.view = (function() {
//thisNode.selectAll(".node_icon_shade_border_right").attr("d",function(d){return "M "+(d.w-30)+" 1 l 0 "+(d.h-2)});
var inputPorts = thisNode.selectAll(".port_input");
var breakPointGroup;
if (d.inputs === 0 && !inputPorts.empty()) {
inputPorts.remove();
//nodeLabel.attr("x",30);
@ -1943,6 +1967,8 @@ RED.view = (function() {
.on("touchend",function(d){portMouseUp(d,1,0);} )
.on("mouseover",function(d) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 1) ));})
.on("mouseout",function(d) { var port = d3.select(this); port.classed("port_hovered",false);})
createBreakpoint(inputGroup,0);
}
var numOutputs = d.outputs;
@ -1959,15 +1985,17 @@ RED.view = (function() {
.on("mouseover",function(d,i) { var port = d3.select(this); port.classed("port_hovered",(mouse_mode!=RED.state.JOINING || (drag_lines.length > 0 && drag_lines[0].portType !== 0) ));})
.on("mouseout",function(d,i) { var port = d3.select(this); port.classed("port_hovered",false);});
createBreakpoint(output_group,1);
d._ports.exit().remove();
if (d._ports) {
numOutputs = d.outputs || 1;
y = (d.h/2)-((numOutputs-1)/2)*13;
var x = d.w - 5;
d._ports.each(function(d,i) {
var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x);
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
d._ports.each(function(n,i) {
var port = d3.select(this);
//port.attr("y",(y+13*i)-5).attr("x",x);
port.attr("transform", function(d) { return "translate("+x+","+((y+13*i)-5)+")";});
});
}
thisNode.selectAll("text.node_label").text(function(d,i){

29
editor/sass/debug.scss
View File

@ -31,6 +31,15 @@
right: 0px;
overflow-y: scroll;
}
.debug-dbgr-content {
top: 0px;
}
.debug-dbgr-content-disabled {
padding-top: 40px;
text-align: center;
background: #f3f3f3;
color: #999;
}
.debug-filter-box {
position:absolute;
top: 42px;
@ -45,6 +54,18 @@
text-align: right;
}
.debug-debugger-box {
position:absolute;
top: 42px;
left: 0px;
right: 0px;
background: #f9f9f9;
padding: 10px;
border-bottom: 1px solid #ddd;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.debug-message {
border-bottom: 1px solid #eee;
border-left: 8px solid #eee;
@ -182,3 +203,11 @@
.debug-message-buffer-string > .debug-message-array-rows {
display: none;
}
.debug-dbgr-content {
.red-ui-editableList {
}
.red-ui-editableList-container {
border-radius: 3px;
}
}

27
editor/sass/flow.scss
View File

@ -120,13 +120,28 @@
fill: #ddd;
cursor: crosshair;
}
.port_breakpoint {
rect {
stroke: #fff;
stroke-width: 1;
fill: #666;
.port_highlight {
stroke: #6DA332;
stroke-width: 3;
fill: #fff;
pointer-events:none;
fill-opacity: 0.5;
}
}
.port_breakpoint_inactive {
rect {
fill: #ddd;
}
}
.port_breakpoint_active {
rect {
fill: #5386de;
}
}
.port_breakpoint_triggered {
rect {
fill: #f77d7d;
}
}
.node_error {

1
editor/sass/mixins.scss
View File

@ -47,6 +47,7 @@
margin:0;
text-decoration: none;
cursor:pointer;
padding: 0;
&.disabled {
cursor: default;

2
editor/sass/sidebar.scss
View File

@ -89,12 +89,14 @@
font-size: 13px;
line-height: 13px;
padding: 5px 8px;
min-width: 30px;
}
.sidebar-header-button-toggle {
@include workspace-button-toggle;
font-size: 13px;
line-height: 13px;
padding: 5px 8px;
min-width: 30px;
}
.sidebar-header-button:not(:first-child) {
border-left: none;

101
nodes/core/core/lib/debug/debug-utils.js
View File

@ -21,6 +21,7 @@ RED.debug = (function() {
var config;
var messageList;
var messageTable;
var debuggerView;
var filter = false;
var view = 'list';
var messages = [];
@ -30,31 +31,65 @@ RED.debug = (function() {
function init(_config) {
config = _config;
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);
'<span class="button-group" style="float: left"><button id="debug-tab-view-console" class="sidebar-header-button-toggle selected">console</button><button id="debug-tab-view-debugger" class="sidebar-header-button-toggle">debugger</button></span>'+
'<span class="debug-tab-view-console-buttons">'+
'<span class="button-group"><button id="debug-tab-filter" class="sidebar-header-button"><i class="fa fa-filter"></i></button></span>'+
'<span class="button-group"><button id="debug-tab-clear" title="clear log" class="sidebar-header-button"><i class="fa fa-trash"></i></button></span>'+
'</span>'+
'<span class="debug-tab-view-dbgr-buttons hide">'+
'<span class="button-group"><button id="debug-tab-dbgr-toggle" class="sidebar-header-button"><i class="fa fa-toggle-off"></i></button></span>'+
'</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> ' +
'<span class="button-group"><button id="debug-tab-open" title="open in new window" class="sidebar-footer-button"><i class="fa fa-desktop"></i></button></span> ' +
'</div>');
messageList = $('<div class="debug-content debug-content-list"/>').appendTo(content);
sbc = messageList[0];
messageTable = $('<div class="debug-content debug-content-table hide"/>').appendTo(content);
debuggerView = $('<div class="debug-content hide"/>').appendTo(content);
var dbgrDisabled = $('<div class="debug-content debug-dbgr-content debug-dbgr-content-disabled">Debugger is disabled</div>').appendTo(debuggerView);
var dbgrPanel = $('<div class="debug-content debug-dbgr-content"></div>').hide().appendTo(debuggerView);
var dbgrToolbar = $('<div class="sidebar-header" style="text-align:left">'+
'<span>'+
'<button id="" class="sidebar-header-button"><i class="fa fa-pause"></i></button>'+
'<button id="" class="sidebar-header-button"><i class="fa fa-play"></i></button>'+
'<button id="" class="sidebar-header-button"><i class="fa fa-step-forward"></i></button>'+
'</span>'+
'</div>').appendTo(dbgrPanel);
var dbgrContent = $('<div>',{style:"padding: 10px;"}).appendTo(dbgrPanel);
var breakpointPanel = $('<div>',{style:"position:relative;"}).appendTo(dbgrContent);
$("<label></label>").html("Breakpoints").appendTo(breakpointPanel);
var buttonGroup = $('<div>').css({position:"absolute", right: 0,top:0}).appendTo(breakpointPanel);
$('<button class="editor-button editor-button-small"><i class="fa fa-plus"></i> breakpoint</button>')
.click(function(evt) {
breakpointList.editableList('addItem',{});
})
.appendTo(buttonGroup);
var breakpointList = $("<ol>").css({height: "200px"}).appendTo(breakpointPanel).editableList({
addButton: false
});
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">all flows</span></a>'+
'<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></a> '+
'</span>'+
'<span class="button-group">'+
'<button class="sidebar-header-button-toggle selected" id="debug-tab-filter-all"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></button>'+
'<button class="sidebar-header-button-toggle" id="debug-tab-filter-current"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></button> '+
'</span>'+
'</div>'+
'</div>').appendTo(content);
@ -65,7 +100,7 @@ RED.debug = (function() {
}
filterDialog.find('#debug-tab-filter-all').on("click",function(e) {
toolbar.find('#debug-tab-filter-all').on("click",function(e) {
e.preventDefault();
if (filter) {
$(this).addClass('selected');
@ -74,7 +109,7 @@ RED.debug = (function() {
refreshMessageList();
}
});
filterDialog.find('#debug-tab-filter-current').on("click",function(e) {
toolbar.find('#debug-tab-filter-current').on("click",function(e) {
e.preventDefault();
if (!filter) {
$(this).addClass('selected');
@ -112,6 +147,50 @@ RED.debug = (function() {
}
})
toolbar.find('#debug-tab-view-debugger').on("click",function(e) {
if ($(messageList).is(":visible")) {
messageList.hide();
debuggerView.show();
toolbar.find(".debug-tab-view-console-buttons").hide();
toolbar.find(".debug-tab-view-dbgr-buttons").show();
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
}
});
toolbar.find('#debug-tab-view-console').on("click",function(e) {
if ($(debuggerView).is(":visible")) {
messageList.show();
debuggerView.hide();
toolbar.find(".debug-tab-view-console-buttons").show();
toolbar.find(".debug-tab-view-dbgr-buttons").hide();
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
}
});
toolbar.find('#debug-tab-dbgr-toggle').on("click",function(e) {
var i = $(this).find("i");
if (i.hasClass('fa-toggle-off')) {
i.addClass('fa-toggle-on');
i.removeClass('fa-toggle-off');
dbgrPanel.show();
dbgrDisabled.hide();
RED.view.state(RED.state.EDIT_BREAKPOINT);
} else {
i.addClass('fa-toggle-off');
i.removeClass('fa-toggle-on');
dbgrPanel.hide();
dbgrDisabled.show();
RED.view.state(RED.state.DEFAULT);
}
})
toolbar.find("#debug-tab-clear").click(function(e) {
e.preventDefault();
$(".debug-message").remove();