From f460283fa1bdfba43b6633c8cd94c3397ab1126a Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 27 Oct 2016 08:48:32 +0100 Subject: [PATCH] Full event passing between debug window and main window --- editor/sass/style.scss | 4 + nodes/core/core/58-debug.html | 41 ++++++-- nodes/core/core/lib/debug/debug-utils.js | 32 +++--- nodes/core/core/lib/debug/debug.js | 118 +++++------------------ nodes/core/core/lib/debug/view.html | 9 +- 5 files changed, 81 insertions(+), 123 deletions(-) diff --git a/editor/sass/style.scss b/editor/sass/style.scss index c09db2817..7479744ee 100644 --- a/editor/sass/style.scss +++ b/editor/sass/style.scss @@ -119,3 +119,7 @@ pre code { background-color: transparent; border: 0; } + +.hide { + display: none; +} diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html index 37ec8a208..95eb71e3c 100644 --- a/nodes/core/core/58-debug.html +++ b/nodes/core/core/58-debug.html @@ -102,8 +102,7 @@ onpaletteadd: function() { var options = { - messageMouseOver: function(sourceId) { - //msg.style.borderRightColor = "#999"; + messageMouseEnter: function(sourceId) { if (sourceId) { var n = RED.nodes.node(sourceId); if (n) { @@ -113,8 +112,7 @@ RED.view.redraw(); } }, - messageMouseOut: function(sourceId) { - //msg.style.borderRightColor = ""; + messageMouseLeave: function(sourceId) { 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() { diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js index 2aab49e90..92c09a7c7 100644 --- a/nodes/core/core/lib/debug/debug-utils.js +++ b/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 - * messageMouseOut + * messageMouseEnter + * messageMouseLeave * messageSourceClick * clear * @@ -41,13 +43,17 @@ RED.debug = (function() { var filterDialog = $('
'+ '
'+ ''+ - ''+ - ' '+ + 'all flows'+ + 'current flow '+ ''+ '
'+ '
').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) { - config.messageMouseOver(o.sourceNode.id); + if (o._source) { + config.messageMouseEnter(o._source.id); } }; - msg.onmouseout = function() { + msg.onmouseleave = function() { msg.style.borderRightColor = ""; - if (o.sourceNode) { - config.messageMouseOut(o.sourceNode.id); + if (o._source) { + config.messageMouseLeave(o._source.id); } }; var name = sanitize(((o.name?o.name:o.id)||"").toString()); diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js index ddf663c53..ac02543e3 100644 --- a/nodes/core/core/lib/debug/debug.js +++ b/nodes/core/core/lib/debug/debug.js @@ -1,102 +1,28 @@ -var RED = {}; $(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(); - } - function sanitize(m) { - return m.replace(/&/g,"&").replace(//g,">"); + var options = { + messageMouseEnter: function(sourceId) { + window.opener.postMessage({event:"mouseEnter",id:sourceId},'*'); + }, + messageMouseLeave: function(sourceId) { + window.opener.postMessage({event:"mouseLeave",id:sourceId},'*'); + }, + messageSourceClick: function(sourceId) { + window.opener.postMessage({event:"mouseClick",id:sourceId},'*'); + }, + clear: function() { + window.opener.postMessage({event:"clear"},'*'); + } } + + var uiComponents = RED.debug.init(options); + + $(".debug-window").append(uiComponents.content); + window.addEventListener('message',function(evt) { - console.log(evt.data); - var o = evt.data; - - var msg = document.createElement("div"); - - //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 = ''+ - getTimestamp()+''+ - (name?''+name:'')+ - ''; - // 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 += 'function : (' + errorLvlType + ')'; - } else { - msg.innerHTML += ''+ - (o.topic?topic+' : ':'')+ - (o.property?'msg.'+property:'msg')+" : "+format+ - - ''; + if (evt.data.event === "message") { + RED.debug.handleDebugMessage(evt.data.msg); + } else if (evt.data.event === "workspaceChange") { + RED.debug.refreshMessageList(evt.data.activeWorkspace); } - 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 = $('').appendTo(msg); - RED.debug.buildMessageElement(payload,true,format).appendTo(el); - $("#debug-content").append(msg); - $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight); },false); }); diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html index 3a0befea3..e63be7aad 100644 --- a/nodes/core/core/lib/debug/view.html +++ b/nodes/core/core/lib/debug/view.html @@ -6,15 +6,8 @@ Node-RED Debug Tools -
- -all flowscurrent flow - - -
-
- +