From 06ee9aa05ce8a548ffab5fd21f0eb33e9a809ba1 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Wed, 2 Nov 2016 15:12:30 +0000 Subject: [PATCH] Make strings expandable in debug --- nodes/core/core/58-debug.js | 2 +- nodes/core/core/lib/debug/debug-utils.js | 237 ++++------------------- nodes/core/core/lib/debug/style.css | 29 ++- test/nodes/core/core/58-debug_spec.js | 12 +- 4 files changed, 75 insertions(+), 205 deletions(-) diff --git a/nodes/core/core/58-debug.js b/nodes/core/core/58-debug.js index 5bc97da4a..e16f710b5 100644 --- a/nodes/core/core/58-debug.js +++ b/nodes/core/core/58-debug.js @@ -153,7 +153,7 @@ module.exports = function(RED) { msg.format = (msg.msg === null)?"null":"undefined"; msg.msg = "(undefined)"; } else { - msg.format = "string ["+msg.msg.length+"]"; + msg.format = "string["+msg.msg.length+"]"; if (msg.msg.length > debuglength) { msg.msg = msg.msg.substring(0,debuglength)+"..."; } diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js index 3604a1a4b..3bede1f43 100644 --- a/nodes/core/core/lib/debug/debug-utils.js +++ b/nodes/core/core/lib/debug/debug-utils.js @@ -185,8 +185,8 @@ RED.debug = (function() { } } else if (typeof value === 'string') { subvalue = value; - if (subvalue.length > 50) { - subvalue = subvalue.substring(0,50)+"…"; + if (subvalue.length > 30) { + subvalue = subvalue.substring(0,30)+"…"; } result = $('').html('"'+formatString(subvalue)+'"'); } else { @@ -241,7 +241,16 @@ RED.debug = (function() { if (obj === null || obj === undefined) { $(''+obj+'').appendTo(entryObj); } else if (typeof obj === 'string') { - $('').html('"'+formatString(obj)+'"').appendTo(entryObj); + element.addClass('collapsed'); + $(' ').prependTo(header); + $('').html('"'+formatString(obj)+'"').appendTo(entryObj); + makeExpandable(header, function() { + $('').html(typeHint||'string').appendTo(header); + var row = $('').appendTo(element); + $('
').html(obj).appendTo(row);
+            });
+
+
         } else if (typeof obj === 'number') {
             e = $('').text(""+obj).appendTo(entryObj);
             e.click(function(evt) {
@@ -271,6 +280,8 @@ RED.debug = (function() {
                     originalLength = data.length;
                 }
                 type = obj.type.toLowerCase();
+            } else if (/buffer/.test(typeHint)) {
+                type = 'buffer';
             }
             var fullLength = data.length;
 
@@ -278,7 +289,26 @@ RED.debug = (function() {
                 $(' ').prependTo(header);
                 makeExpandable(header,function() {
                     if (!key) {
-                        $('').html(typeHint||(type+'['+originalLength+']')).appendTo(header);
+                        var headerHead = $('').html(typeHint||(type+'['+originalLength+']')).appendTo(header);
+                        if (type === 'buffer') {
+                            // var bufferOpts = $('').appendTo(headerHead);
+                            // //dec hex string
+                            // $('').addClass('selected').html('dec').appendTo(bufferOpts).click(function(e) {
+                            //     $(this).addClass('selected').siblings().removeClass('selected');
+                            //     e.preventDefault();
+                            //     e.stopPropagation();
+                            // })
+                            // $('').html('hex').appendTo(bufferOpts).click(function(e) {
+                            //     $(this).addClass('selected').siblings().removeClass('selected');
+                            //     e.preventDefault();
+                            //     e.stopPropagation();
+                            // })
+                            // $('').html('string').appendTo(bufferOpts).click(function(e) {
+                            //     $(this).addClass('selected').siblings().removeClass('selected');
+                            //     e.preventDefault();
+                            //     e.stopPropagation();
+                            // })
+                        }
                     }
                     var row;
                     if (fullLength <= 10) {
@@ -305,6 +335,9 @@ RED.debug = (function() {
                             })());
                             $('').html("["+minRange+" … "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
                         }
+                        if (fullLength < originalLength) {
+                             $('').appendTo(element);
+                        }
                     }
                 });
             }
@@ -332,7 +365,7 @@ RED.debug = (function() {
         } else if (typeof obj === 'object') {
             element.addClass('collapsed');
             var keys = Object.keys(obj);
-            if (keys.length > 0) {
+            if (key || keys.length > 0) {
                 $(' ').prependTo(header);
                 makeExpandable(header, function() {
                     if (!key) {
@@ -342,6 +375,9 @@ RED.debug = (function() {
                         var row = $('').appendTo(element);
                         buildMessageElement(obj[keys[i]],keys[i],false).appendTo(row);
                     }
+                    if (keys.length === 0) {
+                        $('').text("empty").appendTo(element);
+                    }
                 });
             }
             if (key) {
@@ -365,36 +401,6 @@ RED.debug = (function() {
                     $('empty').appendTo(headerHead);
                 }
                 $(' }').appendTo(headerHead);
-
-
-                // $('').html('object').appendTo(header);
-                // headerHead = $('').appendTo(header);
-                // $('{ ').appendTo(headerHead);
-                // for (i=0;i').text(keys[i]).appendTo(headerHead);
-                //             $(': ').appendTo(headerHead);
-                //             buildMessageSummaryValue(obj[keys[i]]).appendTo(headerHead);
-                //             if (i < keys.length -1) {
-                //                 $(', ').appendTo(headerHead);
-                //             }
-                //         }
-                //         if (i === 5) {
-                //             $(' …').appendTo(headerHead);
-                //         }
-                //     }
-                //     entryObj = $('').appendTo(element);
-                //     var entryHeader = $('').appendTo(entryObj);
-                //     $('').text(keys[i]).appendTo(entryHeader);
-                //     $(': ').appendTo(entryHeader);
-                //     e = $('').appendTo(entryObj);
-                //     buildMessageElement(obj[keys[i]],keys[i]).appendTo(e);
-                // }
-                // $('
…
').appendTo(element);
-            }
-            if (keys.length === 0) {
-                $('').text("empty").appendTo(element);
             }
         } else {
             $('').text(""+obj).appendTo(entryObj);
@@ -402,167 +408,6 @@ RED.debug = (function() {
         return element;
     }
 
-
-
-    // function buildMessageElement(obj,topLevel,typeHint) {
-    //     var i;
-    //     var e;
-    //     var entryObj;
-    //     var header;
-    //     var headerHead;
-    //     var value,subvalue;
-    //     var element = $('').toggleClass('collapsed',topLevel);
-    //     if (Array.isArray(obj)) {
-    //         var originalLength = obj.length;
-    //         if (typeHint) {
-    //             var m = /\[(\d+)\]/.exec(typeHint);
-    //             if (m) {
-    //                 originalLength = parseInt(m[1]);
-    //             }
-    //         }
-    //         var fullLength = obj.length;
-    //         var length = Math.min(obj.length,10);
-    //         if (!topLevel) {
-    //             header = $('').html(typeHint||('array['+obj.length+']')).appendTo(element);
-    //         } else {
-    //             header = $('').appendTo(element);
-    //             if (length > 0) {
-    //                 $(' ').prependTo(header);
-    //                 makeExpandable(header);
-    //             }
-    //             $('').html(typeHint||('array['+obj.length+']')).appendTo(header);
-    //             headerHead = $('').appendTo(header);
-    //             $('[ ').appendTo(headerHead);
-    //         }
-    //         var row;
-    //         for (i=0;i, ').appendTo(headerHead);
-    //                     }
-    //                 }
-    //             }
-    //             if (fullLength < 10) {
-    //                 row = element;
-    //             } else if (fullLength > 10 && (i%10) === 0) {
-    //                 var minRange = 10*Math.floor(i/10);
-    //                 row = $('').appendTo(element);
-    //                 header = $('').appendTo(row);
-    //                 $(' ').appendTo(header);
-    //                 makeExpandable(header);
-    //                 $('').html("["+minRange+" … "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
-    //             }
-    //             entryObj = $('').appendTo(row);
-    //
-    //             header = $('').appendTo(entryObj);
-    //             if (typeof obj[i] === 'object' && obj[i] !== null) {
-    //                 $(' ').appendTo(header);
-    //                 makeExpandable(header);
-    //             }
-    //             $('').text(i).appendTo(header);
-    //
-    //             $(': ').appendTo(entryObj);
-    //             e = $('').appendTo(entryObj);
-    //             buildMessageElement(obj[i],false).appendTo(e);
-    //         }
-    //         if (length < obj.length) {
-    //             if (topLevel) {
-    //                 $(' …').appendTo(headerHead);
-    //             }
-    //             //$('
…
').appendTo(element);
-    //         }
-    //         if (fullLength < originalLength) {
-    //             row = $('').appendTo(element);
-    //             $(' …').appendTo(row);
-    //         }
-    //         if (topLevel) {
-    //             if (length === 0) {
-    //                 $('empty').appendTo(headerHead);
-    //             }
-    //             $(' ]').appendTo(headerHead);
-    //         }
-    //     } else if (obj === null || obj === undefined) {
-    //         $(''+obj+'').appendTo(element);
-    //     } else if (typeof obj === 'object') {
-    //         if (obj.hasOwnProperty('type') && obj.type === 'Buffer' && obj.hasOwnProperty('data')) {
-    //             buildMessageElement(obj.data,false,'buffer['+obj.data.length+']').appendTo(element);
-    //
-    //         } else {
-    //             var keys = Object.keys(obj);
-    //             if (topLevel) {
-    //                 header = $('').appendTo(element);
-    //                 if (keys.length > 0) {
-    //                     $(' ').prependTo(header);
-    //                     makeExpandable(header);
-    //                 }
-    //             } else {
-    //                 header = $('').html('object').appendTo(element);
-    //             }
-    //             if (topLevel) {
-    //                 $('').html('object').appendTo(header);
-    //                 headerHead = $('').appendTo(header);
-    //                 $('{ ').appendTo(headerHead);
-    //             }
-    //             for (i=0;i').text(keys[i]).appendTo(headerHead);
-    //                         $(': ').appendTo(headerHead);
-    //                         buildMessageSummaryValue(obj[keys[i]]).appendTo(headerHead);
-    //                         if (i < keys.length -1) {
-    //                             $(', ').appendTo(headerHead);
-    //                         }
-    //                     }
-    //                     if (i === 5) {
-    //                         $(' …').appendTo(headerHead);
-    //                     }
-    //                 }
-    //                 entryObj = $('').appendTo(element);
-    //                 var entryHeader = $('').appendTo(entryObj);
-    //                 $('').text(keys[i]).appendTo(entryHeader);
-    //                 $(': ').appendTo(entryHeader);
-    //                 e = $('').appendTo(entryObj);
-    //                 if (typeof obj[keys[i]] === 'object' && obj[keys[i]] !== null) {
-    //                     $(' ').prependTo(entryHeader);
-    //                     makeExpandable(entryHeader);
-    //                 }
-    //                 buildMessageElement(obj[keys[i]],false).appendTo(e);
-    //             }
-    //             if (keys.length === 0) {
-    //                 $('').text("empty").appendTo(element);
-    //             }
-    //             if (topLevel) {
-    //                 if (keys.length === 0) {
-    //                     $('empty').appendTo(headerHead);
-    //                 }
-    //                 $(' }').appendTo(headerHead);
-    //             }
-    //         }
-    //     } else if (typeof obj === 'string') {
-    //         $('').html('"'+formatString(obj)+'"').appendTo(element);
-    //     } else if (typeof obj === 'number') {
-    //         e = $('').text(""+obj).appendTo(element);
-    //         e.click(function(evt) {
-    //             var format = $(this).data('format');
-    //             if (format === 'hex') {
-    //                 $(this).text(""+obj).data('format','dec');
-    //             } else {
-    //                 $(this).text("0x"+(obj).toString(16)).data('format','hex');
-    //             }
-    //             evt.preventDefault();
-    //         });
-    //     } else {
-    //         $('').text(""+obj).appendTo(element);
-    //     }
-    //     return element;
-    // }
-
-    function buildMessageBody(obj,el) {
-
-    }
-
     function handleDebugMessage(o) {
         var msg = document.createElement("div");
 
diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css
index 668a49f6b..1dca041b3 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -116,14 +116,19 @@
 .debug-message-element.collapsed .debug-message-object-entry {
     display:none;
 }
-.debug-message-element:not(.collapsed) .debug-message-object-header {
+.debug-message-element:not(.collapsed)>.debug-message-expandable>.debug-message-object-value>.debug-message-object-header {
     display:none;
 }
 
 .debug-message-element.collapsed .debug-message-object-type-header {
     display:none;
 }
-
+.debug-message-object-entry pre {
+    font-family: Menlo, monospace;
+    font-size: 12px;
+    line-height: 1.4em;
+    margin: 0 0 0 -1em;
+}
 
 .debug-message-type-other { color: #2033d6; }
 .debug-message-type-string { color: #b72828; }
@@ -140,3 +145,23 @@
 .debug-message-expandable:hover .debug-message-object-handle {
     color: #b72828 !important;
 }
+
+.debug-message-buffer-opts a {
+    font-size: 9px;
+    color: #bbb;
+    border: 1px solid #bbb;
+    border-radius: 2px;
+    padding: 2px 5px;
+    margin-left: 5px;
+}
+.debug-message-buffer-opts a.selected {
+    background: #eee;
+    color: #999;
+    border: 1px solid #999;
+}
+.debug-message-buffer-opts a:hover {
+    text-decoration: none;
+    color: #999;
+    border: 1px solid #999;
+    background: #f3f3f3;
+}
diff --git a/test/nodes/core/core/58-debug_spec.js b/test/nodes/core/core/58-debug_spec.js
index a85cb2011..92fcef056 100644
--- a/test/nodes/core/core/58-debug_spec.js
+++ b/test/nodes/core/core/58-debug_spec.js
@@ -49,7 +49,7 @@ describe('debug node', function() {
             }, function(msg) {
                 JSON.parse(msg).should.eql({
                     topic:"debug",data:{id:"n1",name:"Debug",msg:"test",
-                    format:"string [4]",property:"payload"}
+                    format:"string[4]",property:"payload"}
                 });
             }, done);
         });
@@ -64,7 +64,7 @@ describe('debug node', function() {
                 n1.emit("input", {payload:"test"});
             }, function(msg) {
                 JSON.parse(msg).should.eql({
-                    topic:"debug",data:{id:"n1",msg:"test",property:"payload",format:"string [4]"}
+                    topic:"debug",data:{id:"n1",msg:"test",property:"payload",format:"string[4]"}
                 });
                 count++;
             }, function() {
@@ -108,7 +108,7 @@ describe('debug node', function() {
                 n1.emit("input", {payload:"test", foo:"bar"});
             }, function(msg) {
                 JSON.parse(msg).should.eql({
-                    topic:"debug",data:{id:"n1",msg:"bar",property:"foo",format:"string [3]"}
+                    topic:"debug",data:{id:"n1",msg:"bar",property:"foo",format:"string[3]"}
                 });
             }, done);
         });
@@ -122,7 +122,7 @@ describe('debug node', function() {
                 n1.emit("input", {payload:"test", foo: {bar: "bar"}});
             }, function(msg) {
                 JSON.parse(msg).should.eql({
-                    topic:"debug",data:{id:"n1",msg:"bar",property:"foo.bar",format:"string [3]"}
+                    topic:"debug",data:{id:"n1",msg:"bar",property:"foo.bar",format:"string[3]"}
                 });
             }, done);
         });
@@ -236,7 +236,7 @@ describe('debug node', function() {
                         id:"n1",
                         msg: Array(1001).join("X")+'...',
                         property:"payload",
-                        format:"string [1001]"
+                        format:"string[1001]"
                     }
                 });
             }, done);
@@ -277,7 +277,7 @@ describe('debug node', function() {
                     });
             }, function(msg) {
                 JSON.parse(msg).should.eql({
-                    topic:"debug",data:{id:"n1",msg:"message 2",property:"payload",format:"string [9]"}
+                    topic:"debug",data:{id:"n1",msg:"message 2",property:"payload",format:"string[9]"}
                 });
             }, done);
         });