From 0cd20768f406f410874980fffdd6a2306b3881f8 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 20 Jun 2016 23:08:37 +0100
Subject: [PATCH] Style the debug window to match the sidebar

---
 nodes/core/core/58-debug.html       |  2 +-
 nodes/core/core/58-debug.js         |  1 -
 nodes/core/core/lib/debug/debug.js  | 73 ++++++++++++++++++++++++++++-
 nodes/core/core/lib/debug/style.css |  5 ++
 nodes/core/core/lib/debug/view.html | 12 ++++-
 5 files changed, 89 insertions(+), 4 deletions(-)

diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html
index 05d6c25d2..69c59f52c 100644
--- a/nodes/core/core/58-debug.html
+++ b/nodes/core/core/58-debug.html
@@ -148,7 +148,7 @@
 
                 if (subWindow) {
                     try {
-                        subWindow.postMessage(JSON.stringify(o),"*")
+                        subWindow.postMessage(o,"*")
                     } catch(err) {
                         console.log(err);
                     }
diff --git a/nodes/core/core/58-debug.js b/nodes/core/core/58-debug.js
index d080c38ee..be780c7ba 100644
--- a/nodes/core/core/58-debug.js
+++ b/nodes/core/core/58-debug.js
@@ -160,7 +160,6 @@ module.exports = function(RED) {
             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
index 3b8f419f5..4529ada7f 100644
--- a/nodes/core/core/lib/debug/debug.js
+++ b/nodes/core/core/lib/debug/debug.js
@@ -1,6 +1,77 @@
 $(function() {
+    function getTimestamp() {
+        var d = new Date();
+        return d.toLocaleString();
+    }
+    function sanitize(m) {
+        return m.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
+    }
     window.addEventListener('message',function(evt) {
         console.log(evt.data);
-        $('<div>').text(evt.data).appendTo(document.body);
+        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 = '<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>';
+        }
+        msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
+        $("#debug-content").append(msg);
+
+
+
     },false)
 });
diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css
index acd8bac0f..47d62efad 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -1,3 +1,8 @@
+.debug-window {
+    padding:0;
+    margin:0;
+    background: #fff;
+}
 #debug-content {
     position: absolute;
     top: 43px;
diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html
index a18c7d584..e89ea96dc 100644
--- a/nodes/core/core/lib/debug/view.html
+++ b/nodes/core/core/lib/debug/view.html
@@ -1,8 +1,18 @@
 <html>
 <head>
+    <link rel="stylesheet" href="../../red/style.min.css">
     <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../../vendor/font-awesome/css/font-awesome.min.css">
 </head>
-<body></body>
+<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 id="debug-content"></div>
+</body>
 <script src="../../vendor/vendor-jquery.js"></script>
 <script src="debug.js"></script>
 </html>