From 7607c4c88298683116a6d27adcc98dcb97a715c3 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Mon, 24 Oct 2016 16:53:09 +0100
Subject: [PATCH] Make inbuilt debug messages navigable

---
 editor/js/ui/view.js                     |  24 ++--
 nodes/core/core/58-debug.html            |  25 +++-
 nodes/core/core/58-debug.js              |  15 ++-
 nodes/core/core/lib/debug/debug-utils.js | 157 +++++++++++++++++++++++
 nodes/core/core/lib/debug/debug.js       |  63 ---------
 nodes/core/core/lib/debug/style.css      |  18 +++
 nodes/core/core/lib/debug/view.html      |   1 +
 7 files changed, 220 insertions(+), 83 deletions(-)
 create mode 100644 nodes/core/core/lib/debug/debug-utils.js

diff --git a/editor/js/ui/view.js b/editor/js/ui/view.js
index 04922d658..46701e1fc 100644
--- a/editor/js/ui/view.js
+++ b/editor/js/ui/view.js
@@ -2405,7 +2405,6 @@ RED.view = (function() {
                     node.highlighted = true;
                     node.dirty = true;
                     RED.workspaces.show(node.z);
-                    RED.view.redraw();
 
                     var screenSize = [$("#chart").width(),$("#chart").height()];
                     var scrollPos = [$("#chart").scrollLeft(),$("#chart").scrollTop()];
@@ -2419,17 +2418,22 @@ RED.view = (function() {
                         },200);
                     }
 
-                    var flash = 22;
-                    var flashFunc = function() {
-                        flash--;
-                        node.highlighted = !node.highlighted;
-                        node.dirty = true;
-                        RED.view.redraw();
-                        if (flash >= 0) {
-                            setTimeout(flashFunc,100);
+                    if (!node._flashing) {
+                        node._flashing = true;
+                        var flash = 22;
+                        var flashFunc = function() {
+                            flash--;
+                            node.highlighted = !node.highlighted;
+                            node.dirty = true;
+                            RED.view.redraw();
+                            if (flash >= 0) {
+                                setTimeout(flashFunc,100);
+                            } else {
+                                delete node._flashing;
+                            }
                         }
+                        flashFunc();
                     }
-                    flashFunc();
                 } else if (node._def.category === 'config') {
                     RED.sidebar.config.show(id);
                 }
diff --git a/nodes/core/core/58-debug.html b/nodes/core/core/58-debug.html
index 7fb3429d1..241ab4029 100644
--- a/nodes/core/core/58-debug.html
+++ b/nodes/core/core/58-debug.html
@@ -44,7 +44,6 @@
     <p>Optionally can show the complete <code>msg</code> object, and send messages to the console log.</p>
     <p>In addition any calls to node.warn or node.error will appear here.</p>
 </script>
-
 <script type="text/javascript">
 (function() {
     var subWindow = null;
@@ -175,14 +174,12 @@
                     }
                     RED.view.redraw();
                 };
-                msg.onclick = function() {
+                $(msg).click(function() {
                     var node = RED.nodes.node(o.id) || RED.nodes.node(o.z);
                     if (node) {
                         RED.view.reveal(node.id);
                     }
-
-                };
-                //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:'');
@@ -212,7 +209,21 @@
 
                                     '</span>';
                 }
-                msg.innerHTML += '<span class="debug-message-payload">'+ payload+ '</span>';
+                if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
+                    payload = JSON.parse(payload);
+                } else if (format === 'null') {
+                    payload = null;
+                } else if (format === 'undefined') {
+                    payload = undefined;
+                } else if (/^buffer/.test(format)) {
+                    var buffer = payload;
+                    payload = [];
+                    for (var c = 0; c < buffer.length; c += 2) {
+                        payload.push(parseInt(buffer.substr(c, 2), 16));
+                    }
+                }
+                var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
+                RED.debug.buildMessageElement(payload,true).appendTo(el);
                 var atBottom = (sbc.scrollHeight-messages.height()-sbc.scrollTop) < 5;
                 messageCount++;
                 messages.append(msg);
@@ -297,5 +308,5 @@
     });
 })();
 </script>
-
+<script src="debug/view/debug-utils.js"></script>
 <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 be780c7ba..f321ad536 100644
--- a/nodes/core/core/58-debug.js
+++ b/nodes/core/core/58-debug.js
@@ -82,6 +82,9 @@ module.exports = function(RED) {
         } else if (msg.msg instanceof Buffer) {
             msg.format = "buffer ["+msg.msg.length+"]";
             msg.msg = msg.msg.toString('hex');
+            if (msg.msg.length > debuglength) {
+                msg.msg = msg.msg.substring(0,debuglength);
+            }
         } else if (msg.msg && typeof msg.msg === 'object') {
             var seen = [];
             try {
@@ -95,6 +98,12 @@ module.exports = function(RED) {
             }
             if (isArray || (msg.format === "Object")) {
                 msg.msg = JSON.stringify(msg.msg, function(key, value) {
+                    if (key[0] === '_' && key !== "_msgid") {
+                        return undefined;
+                    }
+                    if (key === '_req' || key === '_res') {
+                        return "[internal]"
+                    }
                     if (typeof value === 'object' && value !== null) {
                         if (seen.indexOf(value) !== -1) { return "[circular]"; }
                         seen.push(value);
@@ -123,9 +132,9 @@ module.exports = function(RED) {
             msg.msg = msg.msg;
         }
 
-        if (msg.msg.length > debuglength) {
-            msg.msg = msg.msg.substr(0,debuglength) +" ....";
-        }
+        // if (msg.msg.length > debuglength) {
+        //     msg.msg = msg.msg.substr(0,debuglength) +" ....";
+        // }
         RED.comms.publish("debug",msg);
     }
 
diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js
new file mode 100644
index 000000000..3db4b8c36
--- /dev/null
+++ b/nodes/core/core/lib/debug/debug-utils.js
@@ -0,0 +1,157 @@
+
+RED.debug = (function() {
+    function buildMessageElement(obj,topLevel) {
+        var i;
+        var e;
+        var entryObj;
+        var header;
+        var headerHead;
+        var value;
+        var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
+        if (Array.isArray(obj)) {
+            var length = Math.min(obj.length,10);
+            if (!topLevel) {
+                header = $('<span class="debug-message-type-meta"></span>').html('array['+obj.length+']').appendTo(element);
+            } else {
+                header = $('<span>').appendTo(element);
+                if (length > 0) {
+                    $('<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');
+                        e.preventDefault();
+                    });
+                }
+                $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('array['+obj.length+']').appendTo(header);
+                headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
+                $('<span>[ </span>').appendTo(headerHead);
+            }
+
+
+            for (i=0;i<length;i++) {
+                if (topLevel) {
+                    value = obj[i];
+                    if (Array.isArray(value)) {
+                        $('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
+                    } else if (value === null) {
+                        $('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
+                    } else if (typeof value === 'object') {
+                        $('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
+                    } else if (typeof value === 'string') {
+                        $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
+                    } else {
+                        $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
+                    }
+                    if (i < length -1) {
+                        $('<span>, </span>').appendTo(headerHead);
+                    }
+                }
+                entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                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');
+                        e.preventDefault();
+                    });
+                }
+                $('<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],false).appendTo(e);
+            }
+            if (length < obj.length) {
+                if (topLevel) {
+                    $('<span> ...</span>').appendTo(headerHead);
+                }
+                $('<div class="debug-message-object-entry"><span class="debug-message-object-key">...</span></div>').appendTo(element);
+            }
+            if (topLevel) {
+                if (length === 0) {
+                    $('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
+                }
+                $('<span> ]</span>').appendTo(headerHead);
+            }
+        } else if (obj === null || obj === undefined) {
+            $('<span class="debug-message-object-value debug-message-type-null">'+obj+'</span>').appendTo(element);
+        } else if (typeof obj === 'object') {
+            var keys = Object.keys(obj);
+            if (topLevel) {
+                header = $('<span>').appendTo(element);
+                if (keys.length > 0) {
+                    $('<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');
+                        e.preventDefault();
+                    });
+                }
+            } else {
+                header = $('<span class="debug-message-type-meta"></span>').html('object').appendTo(element);
+            }
+            if (topLevel) {
+                $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html('object').appendTo(header);
+                headerHead = $('<span class="debug-message-object-header"></span>').appendTo(header);
+                $('<span>{ </span>').appendTo(headerHead);
+            }
+            for (i=0;i<keys.length;i++) {
+                if (topLevel) {
+                    if (i < 5) {
+                        $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(headerHead);
+                        $('<span>: </span>').appendTo(headerHead);
+                        value = obj[keys[i]];
+                        if (Array.isArray(value)) {
+                            $('<span class="debug-message-object-value debug-message-type-meta"></span>').html('array['+value.length+']').appendTo(headerHead);
+                        } else if (value === null) {
+                            $('<span class="debug-message-object-value debug-message-type-null">null</span>').appendTo(headerHead);
+                        } else if (typeof value === 'object') {
+                            $('<span class="debug-message-object-value debug-message-type-meta">object</span>').appendTo(headerHead);
+                        } else if (typeof value === 'string') {
+                            $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+value+'"').appendTo(headerHead);
+                        } else {
+                            $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+value).appendTo(headerHead);
+                        }
+                        if (i < keys.length -1) {
+                            $('<span>, </span>').appendTo(headerHead);
+                        }
+                    }
+                    if (i === 5) {
+                        $('<span> ...</span>').appendTo(headerHead);
+                    }
+                }
+                entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                var entryHeader = $('<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(entryHeader);
+                    entryHeader.addClass("debug-message-expandable");
+                    entryHeader.click(function(e) {
+                        $(this).parent().toggleClass('collapsed');
+                        e.preventDefault();
+                    });
+                }
+                $('<span class="debug-message-object-key"></span>').text(keys[i]).appendTo(entryHeader);
+                $('<span>: </span>').appendTo(entryHeader);
+                e = $('<span class="debug-message-object-value"></span>').appendTo(entryObj);
+                buildMessageElement(obj[keys[i]],false).appendTo(e);
+            }
+            if (keys.length === 0) {
+                $('<div class="debug-message-object-entry debug-message-type-meta collapsed"></div>').text("empty").appendTo(element);
+            }
+            if (topLevel) {
+                if (keys.length === 0) {
+                    $('<span class="debug-message-type-meta">empty</span>').appendTo(headerHead);
+                }
+                $('<span> }</span>').appendTo(headerHead);
+            }
+        } else if (typeof obj === 'string') {
+            $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
+        } else {
+            $('<span class="debug-message-object-value debug-message-type-other"></span>').text(""+obj).appendTo(element);
+        }
+        return element;
+    }
+    return {
+        buildMessageElement: buildMessageElement
+    }
+})();
diff --git a/nodes/core/core/lib/debug/debug.js b/nodes/core/core/lib/debug/debug.js
index 7c71621e6..57311e859 100644
--- a/nodes/core/core/lib/debug/debug.js
+++ b/nodes/core/core/lib/debug/debug.js
@@ -89,67 +89,4 @@ $(function() {
         $("#debug-content").append(msg);
         $("#debug-content").scrollTop($("#debug-content")[0].scrollHeight);
     },false);
-
-    function buildMessageElement(obj,topLevel) {
-        var i;
-        var e;
-        var entryObj;
-        var header;
-        var element = $('<span class="debug-message-element"></span>').toggleClass('collapsed',topLevel);
-        if (Array.isArray(obj)) {
-            $('<span>').html('Array['+obj.length+']').appendTo(element);
-            var length = Math.min(obj.length,10);
-            for (i=0;i<length;i++) {
-                entryObj = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
-                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');
-                    });
-                }
-                $('<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],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') {
-
-            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);
-                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');
-                    });
-                }
-                $('<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]],false).appendTo(e);
-            }
-        } else if (typeof obj === 'string') {
-            $('<span class="debug-message-object-value debug-message-type-string"></span>').text('"'+obj+'"').appendTo(element);
-        } else {
-            $('<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 76de6d870..df782a561 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -63,6 +63,9 @@
 }
 .debug-message-element {
     color: #333;
+    font-family: Menlo, monospace;
+    font-size: 12px !important;
+    line-height: 1.3em;
 }
 .debug-message-object-key {
     color: #792e90;
@@ -95,11 +98,26 @@
 .debug-message-element.collapsed .debug-message-object-entry {
     display:none;
 }
+.debug-message-element:not(.collapsed) .debug-message-object-header {
+    display:none;
+}
+
+.debug-message-element.collapsed .debug-message-object-type-header {
+    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-type-meta { color: #666; font-style: italic;}
 
 .debug-message-expandable {
     cursor: pointer;
 }
+.debug-message-expandable:hover {
+    background: #fefefe;
+}
+.debug-message-expandable:hover .debug-message-object-handle {
+    color: #b72828 !important;
+}
diff --git a/nodes/core/core/lib/debug/view.html b/nodes/core/core/lib/debug/view.html
index bfbffac9c..9b351c9b6 100644
--- a/nodes/core/core/lib/debug/view.html
+++ b/nodes/core/core/lib/debug/view.html
@@ -15,5 +15,6 @@
 <div id="debug-content"></div>
 </body>
 <script src="../../vendor/vendor-jquery.js"></script>
+<script src="debug-utils.js"></script>
 <script src="debug.js"></script>
 </html>