From ab31f34862d15525466f6715406d5759bcdb2e5b Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 20 Jun 2016 21:35:20 +0100
Subject: [PATCH] Initial debug pop-out window

---
 Gruntfile.js                        |  5 ++
 nodes/core/core/58-debug.html       | 74 +++++++----------------------
 nodes/core/core/58-debug.js         | 10 ++++
 nodes/core/core/lib/debug/debug.js  |  6 +++
 nodes/core/core/lib/debug/style.css | 51 ++++++++++++++++++++
 nodes/core/core/lib/debug/view.html |  8 ++++
 6 files changed, 98 insertions(+), 56 deletions(-)
 create mode 100644 nodes/core/core/lib/debug/debug.js
 create mode 100644 nodes/core/core/lib/debug/style.css
 create mode 100644 nodes/core/core/lib/debug/view.html

diff --git a/Gruntfile.js b/Gruntfile.js
index 2c5da4ab1..4c25cd822 100644
--- a/Gruntfile.js
+++ b/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",
                     ]
                 }
             }
diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html
index 845c0ed72..05d6c25d2 100644
--- a/nodes/core/core/58-debug.html
+++ b/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>
-    #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>
+<link rel="stylesheet" href="debug/view/style.css">
diff --git a/nodes/core/core/58-debug.js b/nodes/core/core/58-debug.js
index bf9b6610f..d080c38ee 100644
--- a/nodes/core/core/58-debug.js
+++ b/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);
+    });
 };
diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js
new file mode 100644
index 000000000..3b8f419f5
--- /dev/null
+++ b/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)
+});
diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css
new file mode 100644
index 000000000..acd8bac0f
--- /dev/null
+++ b/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;
+}
diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html
new file mode 100644
index 000000000..a18c7d584
--- /dev/null
+++ b/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>