Initial debug pop-out window

Gruntfile.js

@@ -150,6 +150,11 @@ module.exports = function(grunt) {
                     "public/vendor/vendor.css": [
                         // TODO: resolve relative resource paths in
                         //       bootstrap/FA/jquery
+                    ],
+                    "public/vendor/vendor-jquery.js": [
+                        "editor/vendor/jquery/js/jquery-1.11.3.min.js",
+                        "editor/vendor/jquery/js/jquery-ui-1.10.3.custom.min.js",
+                        "editor/vendor/jquery/js/jquery.ui.touch-punch.min.js",
                     ]
                 }
             }

nodes/core/core/58-debug.html

@@ -46,7 +46,8 @@
 </script>
 
 <script type="text/javascript">
-
+(function() {
+    var subWindow = null;
     RED.nodes.registerType('debug',{
         category: 'output',
         defaults: {
@@ -104,7 +105,8 @@
                     '<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" id="debug-tab-filter-current" href="#"><span data-i18n="node-red:debug.sidebar.filterCurrent"></span></a> '+
                 '</span>'+
-                '<span><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"><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>').appendTo(content);
 
             var messages = $('<div id="debug-content"/>').appendTo(content);
             content.i18n();
@@ -143,6 +145,14 @@
             }
 
             this.handleDebugMessage = function(t,o) {
+
+                if (subWindow) {
+                    try {
+                        subWindow.postMessage(JSON.stringify(o),"*")
+                    } catch(err) {
+                        console.log(err);
+                    }
+                }
                 var msg = document.createElement("div");
 
                 var sourceNode = RED.nodes.node(o.id) || RED.nodes.node(o.z);
@@ -245,7 +255,10 @@
                 }
             });
             RED.events.on("workspace:change", refreshMessageList);
-
+            $("#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");
+            });
         },
         onpaletteremove: function() {
             RED.comms.unsubscribe("debug",this.handleDebugMessage);
@@ -282,58 +295,7 @@
         }
 
     });
+})();
 </script>
 
-<style>
+<link rel="stylesheet" href="debug/view/style.css">
-    #debug-content {
-        position: absolute;
-        top: 43px;
-        bottom: 0px;
-        left:0px;
-        right: 0px;
-        overflow-y: scroll;
-    }
-    .debug-message {
-        cursor: pointer;
-        border-bottom: 1px solid #eee;
-        border-left: 8px solid #eee;
-        border-right: 8px solid #eee;
-        padding: 2px;
-    }
-    .debug-message-date {
-        background: #fff;
-        font-size: 9px;
-        color: #aaa;
-        padding: 1px 5px 1px 1px;
-    }
-    .debug-message-topic {
-        display: block;
-        background: #fff;
-        padding: 1px;
-        font-size: 10px;
-        color: #a66;
-    }
-    .debug-message-name {
-        background: #fff;
-        padding: 1px 5px;
-        font-size: 9px;
-        color: #aac;
-    }
-    .debug-message-payload {
-        display: block;
-        padding: 2px;
-        background: #fff;
-    }
-    .debug-message-level-log {
-        border-left-color: #eee;
-        border-right-color: #eee;
-    }
-    .debug-message-level-30 {
-        border-left-color: #ffdf9d;
-        border-right-color: #ffdf9d;
-    }
-    .debug-message-level-20 {
-        border-left-color: #f99;
-        border-right-color: #f99;
-    }
-</style>

nodes/core/core/58-debug.js

@@ -18,6 +18,7 @@ module.exports = function(RED) {
     "use strict";
     var util = require("util");
     var events = require("events");
+    var path = require("path");
     var debuglength = RED.settings.debugMaxLength||1000;
     var useColors = false;
     // util.inspect.styles.boolean = "red";
@@ -153,4 +154,13 @@ module.exports = function(RED) {
             res.sendStatus(404);
         }
     });
+
+    RED.httpAdmin.get("/debug/view/*",RED.auth.needsPermission("debug.read"),function(req,res) {
+        var options = {
+            root: __dirname + '/lib/debug/',
+            dotfiles: 'deny'
+        };
+        console.log("SERVING UP",req.params[0]);
+        res.sendFile(req.params[0], options);
+    });
 };

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

@@ -0,0 +1,6 @@
+$(function() {
+    window.addEventListener('message',function(evt) {
+        console.log(evt.data);
+        $('<div>').text(evt.data).appendTo(document.body);
+    },false)
+});

nodes/core/core/lib/debug/style.css

@@ -0,0 +1,51 @@
+#debug-content {
+    position: absolute;
+    top: 43px;
+    bottom: 0px;
+    left:0px;
+    right: 0px;
+    overflow-y: scroll;
+}
+.debug-message {
+    cursor: pointer;
+    border-bottom: 1px solid #eee;
+    border-left: 8px solid #eee;
+    border-right: 8px solid #eee;
+    padding: 2px;
+}
+.debug-message-date {
+    background: #fff;
+    font-size: 9px;
+    color: #aaa;
+    padding: 1px 5px 1px 1px;
+}
+.debug-message-topic {
+    display: block;
+    background: #fff;
+    padding: 1px;
+    font-size: 10px;
+    color: #a66;
+}
+.debug-message-name {
+    background: #fff;
+    padding: 1px 5px;
+    font-size: 9px;
+    color: #aac;
+}
+.debug-message-payload {
+    display: block;
+    padding: 2px;
+    background: #fff;
+}
+.debug-message-level-log {
+    border-left-color: #eee;
+    border-right-color: #eee;
+}
+.debug-message-level-30 {
+    border-left-color: #ffdf9d;
+    border-right-color: #ffdf9d;
+}
+.debug-message-level-20 {
+    border-left-color: #f99;
+    border-right-color: #f99;
+}

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

@@ -0,0 +1,8 @@
+<html>
+<head>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body></body>
+<script src="../../vendor/vendor-jquery.js"></script>
+<script src="debug.js"></script>
+</html>