Add initial debugger panel to debug tab

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",

editor/js/debugger.js

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

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
 }

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,12 +1985,14 @@ 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) {
+                                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)+")";});

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;
+    }
+}

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;
+.port_breakpoint_inactive {
-    fill: #fff;
+    rect {
-    pointer-events:none;
+        fill: #ddd;
-    fill-opacity: 0.5;
+    }
+}
+.port_breakpoint_active {
+    rect {
+        fill: #5386de;
+    }
+}
+.port_breakpoint_triggered {
+    rect {
+        fill: #f77d7d;
+    }
 }
 
 .node_error {

editor/sass/mixins.scss

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

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;

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,30 +31,64 @@ 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" 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="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="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>'+
+                    '<button class="sidebar-header-button-toggle selected" id="debug-tab-filter-all"><span data-i18n="node-red:debug.sidebar.filterAll">all flows</span></button>'+
-                '<a class="sidebar-header-button-toggle" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent">current flow</span></a> '+
+                    '<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();