From 629c63e0c9b45835de29a86e16f7a6637189f187 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Fri, 18 Nov 2016 12:53:05 +0000 Subject: [PATCH] Add initial debugger panel to debug tab --- Gruntfile.js | 1 + editor/js/debugger.js | 4 + editor/js/ui/state.js | 3 +- editor/js/ui/view.js | 36 +++++++- editor/sass/debug.scss | 29 +++++++ editor/sass/flow.scss | 27 ++++-- editor/sass/mixins.scss | 1 + editor/sass/sidebar.scss | 2 + nodes/core/core/lib/debug/debug-utils.js | 101 ++++++++++++++++++++--- 9 files changed, 182 insertions(+), 22 deletions(-) create mode 100644 editor/js/debugger.js diff --git a/Gruntfile.js b/Gruntfile.js index ffb1df3c3..a01b08fae 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -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", diff --git a/editor/js/debugger.js b/editor/js/debugger.js new file mode 100644 index 000000000..58ea149ee --- /dev/null +++ b/editor/js/debugger.js @@ -0,0 +1,4 @@ +RED.debugger = (function() { + + +})(); diff --git a/editor/js/ui/state.js b/editor/js/ui/state.js index 5ff9b47ad..51365d523 100644 --- a/editor/js/ui/state.js +++ b/editor/js/ui/state.js @@ -23,5 +23,6 @@ RED.state = { EXPORT: 6, IMPORT: 7, IMPORT_DRAGGING: 8, - QUICK_JOINING: 9 + QUICK_JOINING: 9, + EDIT_BREAKPOINT: 10 } diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js index 18e9f0471..c76f775e7 100644 --- a/editor/js/ui/view.js +++ b/editor/js/ui/view.js @@ -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){ diff --git a/editor/sass/debug.scss b/editor/sass/debug.scss index f56a8c7f3..76bce7f05 100644 --- a/editor/sass/debug.scss +++ b/editor/sass/debug.scss @@ -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; + } +} diff --git a/editor/sass/flow.scss b/editor/sass/flow.scss index 8bd3f7e6c..1eb58dedc 100644 --- a/editor/sass/flow.scss +++ b/editor/sass/flow.scss @@ -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 { diff --git a/editor/sass/mixins.scss b/editor/sass/mixins.scss index e4ad7660f..f3228249b 100644 --- a/editor/sass/mixins.scss +++ b/editor/sass/mixins.scss @@ -47,6 +47,7 @@ margin:0; text-decoration: none; cursor:pointer; + padding: 0; &.disabled { cursor: default; diff --git a/editor/sass/sidebar.scss b/editor/sass/sidebar.scss index 95d58e2c8..275ba5b32 100644 --- a/editor/sass/sidebar.scss +++ b/editor/sass/sidebar.scss @@ -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; diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js index 4767733a2..bc77f84f5 100644 --- a/nodes/core/core/lib/debug/debug-utils.js +++ b/nodes/core/core/lib/debug/debug-utils.js @@ -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 = $("
").css({"position":"relative","height":"100%"}); var toolbar = $('
'+ - ''+ - '
').appendTo(content); - + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + ''+ + '
').appendTo(content); var footerToolbar = $('
'+ // ''+ // 'list'+ // 'table '+ // ''+ - ' ' + + ' ' + '
'); messageList = $('
').appendTo(content); sbc = messageList[0]; messageTable = $('
').appendTo(content); + debuggerView = $('
').appendTo(content); + + var dbgrDisabled = $('
Debugger is disabled
').appendTo(debuggerView); + var dbgrPanel = $('
').hide().appendTo(debuggerView); + + var dbgrToolbar = $('
'+ + ''+ + ''+ + ''+ + ''+ + ''+ + '
').appendTo(dbgrPanel); + var dbgrContent = $('
',{style:"padding: 10px;"}).appendTo(dbgrPanel); + var breakpointPanel = $('
',{style:"position:relative;"}).appendTo(dbgrContent); + + $("").html("Breakpoints").appendTo(breakpointPanel); + var buttonGroup = $('
').css({position:"absolute", right: 0,top:0}).appendTo(breakpointPanel); + $('') + .click(function(evt) { + breakpointList.editableList('addItem',{}); + }) + .appendTo(buttonGroup); + + + + var breakpointList = $("
    ").css({height: "200px"}).appendTo(breakpointPanel).editableList({ + addButton: false + }); + var filterDialog = $('
    '+ '
    '+ - ''+ - 'all flows'+ - 'current flow '+ - ''+ + ''+ + ''+ + ' '+ + ''+ '
    '+ '
    ').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();