Make Debug object explorable

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);
 
-
+    function buildMessageElement(obj) {
-
+        var i;
-    },false)
+        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;
+    }
 });

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;
+}

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">