From e30da2168deab3f5f567a7cee991b8fe97cee0ad Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 21 Jun 2016 22:50:09 +0100
Subject: [PATCH] Make Debug object explorable

---
 nodes/core/core/lib/debug/debug.js  | 53 ++++++++++++++++++++++++++---
 nodes/core/core/lib/debug/style.css | 31 +++++++++++++++++
 nodes/core/core/lib/debug/view.html |  1 +
 3 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js
index 4529ada7f..839ddddbc 100644
--- a/nodes/core/core/lib/debug/debug.js
+++ b/nodes/core/core/lib/debug/debug.js
@@ -68,10 +68,55 @@ $(function() {
 
                             '</span>';
         }
-        msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
+        if (format !== 'Object') {
+            msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
+        } else {
+            var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
+            buildMessageElement(JSON.parse(payload)).appendTo(el);
+        }
         $("#debug-content").append(msg);
+        $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
+    },false);
 
-
-
-    },false)
+    function buildMessageElement(obj) {
+        var i;
+        var e;
+        var entryObj;
+        var element = $('<span class="debug-message-element"></span>');
+        if (Array.isArray(obj)) {
+            $('<span>').html('Array['+obj.length+']').appendTo(element);
+            for (i=0;i<obj.length;i++) {
+                entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                if (typeof obj[i] === 'object') {
+                    $('<i class="fa fa-caret-right"></i> ').click(function(e) {
+                        $(this).parent().toggleClass('collapsed');
+                    }).appendTo(entryObj);
+                }
+                $('<span class="debug-message-object-key"></span>').text(i).appendTo(entryObj);
+                $('<span>: </span>').appendTo(entryObj);
+                e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
+                buildMessageElement(obj[i]).appendTo(e);
+            }
+        } else if (typeof obj === 'object') {
+            $('<span>').html('Object').appendTo(element);
+            var keys = Object.keys(obj);
+            for (i=0;i<keys.length;i++) {
+                entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                if (typeof obj[keys[i]] === 'object') {
+                    $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').click(function(e) {
+                        $(this).parent().toggleClass('collapsed');
+                    }).appendTo(entryObj);
+                }
+                $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryObj);
+                $('<span>: </span>').appendTo(entryObj);
+                e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
+                buildMessageElement(obj[keys[i]]).appendTo(e);
+            }
+        } else if (typeof obj === 'string') {
+            $('<span class="debug-message-object-value"></span>').text('"'+obj+'"').appendTo(element);
+        } else {
+            $('<span class="debug-message-object-value"></span>').text(""+obj).appendTo(element);
+        }
+        return element;
+    }
 });
diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css
index 47d62efad..9a550afc7 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -3,6 +3,9 @@
     margin:0;
     background: #fff;
 }
+.debug-window .debug-message-payload {
+    font-size: 12px;
+}
 #debug-content {
     position: absolute;
     top: 43px;
@@ -54,3 +57,31 @@
     border-left-color: #f99;
     border-right-color: #f99;
 }
+.debug-message-object-entry {
+    padding-left: 15px;
+    padding-bottom: 3px;
+}
+
+.debug-message-object-key {
+    color: #a66;
+}
+.debug-message-object-value {
+
+}
+.debug-message-object-handle {
+    color: #999;
+    font-size: 0.8em;
+    width: 1em;
+    margin-left: -1em;
+    text-align: center;
+    transition: transform 0.2s ease-in-out;
+    transform: rotate(90deg);
+}
+
+.debug-message-object-entry.collapsed>.debug-message-object-handle {
+    transform: rotate(0deg);
+}
+
+.debug-message-object-entry.collapsed .debug-message-object-entry {
+    display:none;
+}
diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html
index e89ea96dc..bfbffac9c 100644
--- a/nodes/core/core/lib/debug/view.html
+++ b/nodes/core/core/lib/debug/view.html
@@ -3,6 +3,7 @@
     <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">
+    <title>Node-RED Debug Tools</title>
 </head>
 <body class="debug-window">
 <div class="sidebar-header">