Full event passing between debug window and main window

editor/sass/style.scss

@@ -119,3 +119,7 @@ pre code {
   background-color: transparent;
   border: 0;
 }
+
+.hide {
+    display: none;
+}

nodes/core/core/58-debug.html

@@ -102,8 +102,7 @@
         onpaletteadd: function() {
 
             var options = {
-                messageMouseOver: function(sourceId) {
+                messageMouseEnter: function(sourceId) {
-                    //msg.style.borderRightColor = "#999";
                     if (sourceId) {
                         var n = RED.nodes.node(sourceId);
                         if (n) {
@@ -113,8 +112,7 @@
                         RED.view.redraw();
                     }
                 },
-                messageMouseOut: function(sourceId) {
+                messageMouseLeave: function(sourceId) {
-                    //msg.style.borderRightColor = "";
                     if (sourceId) {
                         var n = RED.nodes.node(sourceId);
                         if (n) {
@@ -159,14 +157,25 @@
 
             this.refreshMessageList = function() {
                 RED.debug.refreshMessageList(RED.workspaces.active());
+                if (subWindow) {
+                    try {
+                        subWindow.postMessage({event:"workspaceChange",activeWorkspace:RED.workspaces.active()},"*")
+                    } catch(err) {
+                        console.log(err);
+                    }
+                }
             }
 
             this.handleDebugMessage = function(t,o) {
-                o.sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
+                var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
+                if (sourceNode) {
+                    o._source = {id:sourceNode.id,z:sourceNode.z};
+
+                }
                 RED.debug.handleDebugMessage(o);
                 if (subWindow) {
                     try {
-                        subWindow.postMessage(o,"*")
+                        subWindow.postMessage({event:"message",msg:o},"*")
                     } catch(err) {
                         console.log(err);
                     }
@@ -178,12 +187,32 @@
             $("#debug-tab-open").click(function(e) {
                 e.preventDefault();
                 subWindow = window.open(document.location.toString().replace(/#.*$/,"")+"debug/view/view.html","nodeREDDebugView","menubar=no,location=no,toolbar=no,chrome,height=500,width=600");
+                /*
+                * Message format:
+                *
+                *
+                */
             });
+
+            this.handleWindowMessage = function(evt) {
+                var msg = evt.data;
+                if (msg.event === "mouseEnter") {
+                    options.messageMouseEnter(msg.id);
+                } else if (msg.event === "mouseLeave") {
+                    options.messageMouseLeave(msg.id);
+                } else if (msg.event === "mouseClick") {
+                    options.messageSourceClick(msg.id);
+                } else if (msg.event === "clear") {
+                    options.clear();
+                }
+            }
+            window.addEventListener('message',this.handleWindowMessage);
         },
         onpaletteremove: function() {
             RED.comms.unsubscribe("debug",this.handleDebugMessage);
             RED.sidebar.removeTab("debug");
             RED.events.off("workspace:change", this.refreshMessageList);
+            window.removeEventListener("message",this.handleWindowMessage);
             delete RED._debug;
         },
         oneditprepare: function() {

nodes/core/core/lib/debug/debug-utils.js

@@ -1,4 +1,6 @@
-
+if (!RED) {
+    var RED = {}
+}
 RED.debug = (function() {
     var config;
     var messageList;
@@ -11,8 +13,8 @@ RED.debug = (function() {
     var activeWorkspace;
 
     /**
-     * messageMouseOver
+     * messageMouseEnter
-     * messageMouseOut
+     * messageMouseLeave
      * messageSourceClick
      * clear
      *
@@ -41,13 +43,17 @@ RED.debug = (function() {
         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"></span></a>'+
+                '<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"></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>'+
             '</div>'+
         '</div>').appendTo(content);
 
-        content.i18n();
+        try {
+            content.i18n();
+        } catch(err) {
+            console.log("TODO: i18n library support");
+        }
 
 
         filterDialog.find('#debug-tab-filter-all').on("click",function(e) {
@@ -337,18 +343,18 @@ RED.debug = (function() {
     function handleDebugMessage(o) {
         var msg = document.createElement("div");
 
-        var sourceNode = o.sourceNode;
+        var sourceNode = o._source;
 
-        msg.onmouseover = function() {
+        msg.onmouseenter = function() {
             msg.style.borderRightColor = "#999";
-            if (o.sourceNode) {
+            if (o._source) {
-                config.messageMouseOver(o.sourceNode.id);
+                config.messageMouseEnter(o._source.id);
             }
         };
-        msg.onmouseout = function() {
+        msg.onmouseleave = function() {
             msg.style.borderRightColor = "";
-            if (o.sourceNode) {
+            if (o._source) {
-                config.messageMouseOut(o.sourceNode.id);
+                config.messageMouseLeave(o._source.id);
             }
         };
         var name = sanitize(((o.name?o.name:o.id)||"").toString());

nodes/core/core/lib/debug/debug.js

@@ -1,102 +1,28 @@
-var RED = {};
 $(function() {
-
+    var options = {
-    $("#debug-tab-clear").click(function() {
+        messageMouseEnter: function(sourceId) {
-        $(".debug-message").remove();
+            window.opener.postMessage({event:"mouseEnter",id:sourceId},'*');
-        // messageCount = 0;
+        },
-        // RED.nodes.eachNode(function(node) {
+        messageMouseLeave: function(sourceId) {
-        //     node.highlighted = false;
+            window.opener.postMessage({event:"mouseLeave",id:sourceId},'*');
-        //     node.dirty = true;
+        },
-        // });
+        messageSourceClick: function(sourceId) {
-        // RED.view.redraw();
+            window.opener.postMessage({event:"mouseClick",id:sourceId},'*');
-    });
+        },
-
+        clear: function() {
-
+            window.opener.postMessage({event:"clear"},'*');
-    function getTimestamp() {
+        }
-        var d = new Date();
-        return d.toLocaleString();
-    }
-    function sanitize(m) {
-        return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
     }
+
+    var uiComponents = RED.debug.init(options);
+
+    $(".debug-window").append(uiComponents.content);
+
     window.addEventListener('message',function(evt) {
-        console.log(evt.data);
+        if (evt.data.event === "message") {
-        var o = evt.data;
+            RED.debug.handleDebugMessage(evt.data.msg);
-
+        } else if (evt.data.event === "workspaceChange") {
-        var msg = document.createElement("div");
+            RED.debug.refreshMessageList(evt.data.activeWorkspace);
-
-        //var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
-
-        // msg.onmouseover = function() {
-        //     msg.style.borderRightColor = "#999";
-        //     var n = RED.nodes.node(o.id) || RED.nodes.node(o.z);
-        //     if (n) {
-        //         n.highlighted = true;
-        //         n.dirty = true;
-        //     }
-        //     RED.view.redraw();
-        // };
-        // msg.onmouseout = function() {
-        //     msg.style.borderRightColor = "";
-        //     var n = RED.nodes.node(o.id) || RED.nodes.node(o.z);
-        //     if (n) {
-        //         n.highlighted = false;
-        //         n.dirty = true;
-        //     }
-        //     RED.view.redraw();
-        // };
-        // msg.onclick = function() {
-        //     var node = RED.nodes.node(o.id) || RED.nodes.node(o.z);
-        //     if (node) {
-        //         RED.workspaces.show(node.z);
-        //     }
-        //
-        // };
-        //console.log(o);
-        var name = sanitize(((o.name?o.name:o.id)||"").toString());
-        var topic = sanitize((o.topic||"").toString());
-        var property = sanitize(o.property?o.property:'');
-        var payload = sanitize((o.msg||"").toString());
-        var format = sanitize((o.format||"").toString());
-
-        msg.className = 'debug-message'+(o.level?(' debug-message-level-'+o.level):'');
-        msg.innerHTML = '<span class="debug-message-date">'+
-                        getTimestamp()+'</span>'+
-                        (name?'<span class="debug-message-name">'+name:'')+
-                        '</span>';
-        // NOTE: relying on function error to have a "type" that all other msgs don't
-        if (o.hasOwnProperty("type") && (o.type === "function")) {
-            var errorLvlType = 'error';
-            var errorLvl = 20;
-            if (o.hasOwnProperty("level") && o.level === 30) {
-                errorLvl = 30;
-                errorLvlType = 'warn';
-            }
-            msg.className = 'debug-message debug-message-level-' + errorLvl;
-            msg.innerHTML += '<span class="debug-message-topic">function : (' + errorLvlType + ')</span>';
-        } else {
-            msg.innerHTML += '<span class="debug-message-topic">'+
-                            (o.topic?topic+' : ':'')+
-                            (o.property?'msg.'+property:'msg')+" : "+format+
-
-                            '</span>';
         }
-        if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
-            payload = JSON.parse(payload);
-        } else if (format === 'null') {
-            payload = null;
-        } else if (format === 'undefined') {
-            payload = undefined;
-        } else if (/^buffer/.test(format)) {
-            var buffer = payload;
-            payload = [];
-            for (var c = 0; c < buffer.length; c += 2) {
-                payload.push(parseInt(buffer.substr(c, 2), 16));
-            }
-        }
-        var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
-        RED.debug.buildMessageElement(payload,true,format).appendTo(el);
-        $("#debug-content").append(msg);
-        $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
     },false);
 });

nodes/core/core/lib/debug/view.html

@@ -6,15 +6,8 @@
     <title>Node-RED Debug Tools</title>
 </head>
 <body class="debug-window">
-<div class="sidebar-header">
-<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"><a id="debug-tab-open" title="open in new window" class="sidebar-header-button" href="#"><i class="fa fa-desktop"></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>
-<div class="debug-content"></div>
 </body>
 <script src="../../vendor/vendor-jquery.js"></script>
-<script src="debug.js"></script>
 <script src="debug-utils.js"></script>
+<script src="debug.js"></script>
 </html>