From 0428e27039364202be19ead825d9ea0afba38565 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 22 Jun 2016 12:27:47 +0100
Subject: [PATCH] Improved type styling

---
 nodes/core/core/lib/debug/debug.js  | 69 +++++++++++++++++++++--------
 nodes/core/core/lib/debug/style.css | 38 +++++++++++-----
 2 files changed, 79 insertions(+), 28 deletions(-)

diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js
index 839ddddbc..7c71621e6 100644
--- a/nodes/core/core/lib/debug/debug.js
+++ b/nodes/core/core/lib/debug/debug.js
@@ -1,4 +1,16 @@
 $(function() {
+
+    $("#debug-tab-clear").click(function() {
+        $(".debug-message").remove();
+        // messageCount = 0;
+        // RED.nodes.eachNode(function(node) {
+        //     node.highlighted = false;
+        //     node.dirty = true;
+        // });
+        // RED.view.redraw();
+    });
+
+
     function getTimestamp() {
         var d = new Date();
         return d.toLocaleString();
@@ -72,50 +84,71 @@ $(function() {
             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);
+            buildMessageElement(JSON.parse(payload),true).appendTo(el);
         }
         $("#debug-content").append(msg);
         $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
     },false);
 
-    function buildMessageElement(obj) {
+    function buildMessageElement(obj,topLevel) {
         var i;
         var e;
         var entryObj;
-        var element = $('<span class="debug-message-element"></span>');
+        var header;
+        var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
         if (Array.isArray(obj)) {
             $('<span>').html('Array['+obj.length+']').appendTo(element);
-            for (i=0;i<obj.length;i++) {
+            var length = Math.min(obj.length,10);
+            for (i=0;i<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) {
+                header = $('<span></span>').appendTo(entryObj);
+                if (typeof obj[i] === 'object' && obj[i] !== null) {
+                    $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
+                    header.addClass("debug-message-expandable");
+                    header.click(function(e) {
                         $(this).parent().toggleClass('collapsed');
-                    }).appendTo(entryObj);
+                    });
                 }
-                $('<span class="debug-message-object-key"></span>').text(i).appendTo(entryObj);
+                $('<span class="debug-message-object-key"></span>').text(i).appendTo(header);
                 $('<span>: </span>').appendTo(entryObj);
                 e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
-                buildMessageElement(obj[i]).appendTo(e);
+                buildMessageElement(obj[i],false).appendTo(e);
             }
+            if (length < obj.length) {
+                $('<div class="debug-message-object-entry"><span class="debug-message-object-key">...</span></div>').appendTo(element);
+            }
+        } else if (obj === null) {
+            $('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(element);
         } else if (typeof obj === 'object') {
-            $('<span>').html('Object').appendTo(element);
+
+            header = $('<span>').html((topLevel?(JSON.stringify(obj,2).substring(0,200)):'Object')).appendTo(element);
+            if (topLevel) {
+                $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
+                header.addClass("debug-message-expandable");
+                header.click(function(e) {
+                    $(this).parent().toggleClass('collapsed');
+                });
+            }
             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) {
+                header = $('<span></span>').appendTo(entryObj);
+                if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
+                    $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
+                    header.addClass("debug-message-expandable");
+                    header.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);
+                $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(header);
+                $('<span>: </span>').appendTo(header);
                 e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
-                buildMessageElement(obj[keys[i]]).appendTo(e);
+                buildMessageElement(obj[keys[i]],false).appendTo(e);
             }
         } else if (typeof obj === 'string') {
-            $('<span class="debug-message-object-value"></span>').text('"'+obj+'"').appendTo(element);
+            $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
         } else {
-            $('<span class="debug-message-object-value"></span>').text(""+obj).appendTo(element);
+            $('<span class="debug-message-object-value debug-message-type-other"></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 9a550afc7..76de6d870 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -4,7 +4,7 @@
     background: #fff;
 }
 .debug-window .debug-message-payload {
-    font-size: 12px;
+    font-size: 14px;
 }
 #debug-content {
     position: absolute;
@@ -15,7 +15,6 @@
     overflow-y: scroll;
 }
 .debug-message {
-    cursor: pointer;
     border-bottom: 1px solid #eee;
     border-left: 8px solid #eee;
     border-right: 8px solid #eee;
@@ -60,28 +59,47 @@
 .debug-message-object-entry {
     padding-left: 15px;
     padding-bottom: 3px;
+    padding-top: 3px;
+}
+.debug-message-element {
+    color: #333;
 }
-
 .debug-message-object-key {
-    color: #a66;
+    color: #792e90;
 }
 .debug-message-object-value {
 
 }
 .debug-message-object-handle {
-    color: #999;
-    font-size: 0.8em;
+    color: #666;
+    font-size: 1em;
     width: 1em;
-    margin-left: -1em;
     text-align: center;
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.1s ease-in-out;
     transform: rotate(90deg);
 }
-
-.debug-message-object-entry.collapsed>.debug-message-object-handle {
+.debug-message-object-entry>span>.debug-message-object-handle {
+    margin-left: -1em;
+}
+.debug-message-object-entry.collapsed>span>.debug-message-object-handle {
+    transform: rotate(0deg);
+}
+.debug-message-element.collapsed>span>.debug-message-object-handle {
     transform: rotate(0deg);
 }
 
 .debug-message-object-entry.collapsed .debug-message-object-entry {
     display:none;
 }
+
+.debug-message-element.collapsed .debug-message-object-entry {
+    display:none;
+}
+
+.debug-message-type-other { color: #2033d6; }
+.debug-message-type-string { color: #b72828; }
+.debug-message-type-null { color: #666; font-style: italic;}
+
+.debug-message-expandable {
+    cursor: pointer;
+}