From 74b6d9dff9b1f97e87a36852e594a8a6f9f2dedc Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Wed, 2 Nov 2016 16:08:13 +0000
Subject: [PATCH] Provide string view of buffers in debug messages

---
 nodes/core/core/lib/debug/debug-utils.js | 53 ++++++++++++++----------
 nodes/core/core/lib/debug/style.css      |  8 ++--
 2 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/nodes/core/core/lib/debug/debug-utils.js b/nodes/core/core/lib/debug/debug-utils.js
index 3bede1f43..04c81805c 100644
--- a/nodes/core/core/lib/debug/debug-utils.js
+++ b/nodes/core/core/lib/debug/debug-utils.js
@@ -287,39 +287,46 @@ RED.debug = (function() {
 
             if (originalLength > 0) {
                 $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').prependTo(header);
+                var arrayRows = $('<div class="debug-message-array-rows"></div>').appendTo(element);
                 makeExpandable(header,function() {
                     if (!key) {
-                        var headerHead = $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(header);
-                        if (type === 'buffer') {
-                            // var bufferOpts = $('<span class="debug-message-buffer-opts"></span>').appendTo(headerHead);
-                            // //dec hex string
-                            // $('<a href="#"></a>').addClass('selected').html('dec').appendTo(bufferOpts).click(function(e) {
-                            //     $(this).addClass('selected').siblings().removeClass('selected');
-                            //     e.preventDefault();
-                            //     e.stopPropagation();
-                            // })
-                            // $('<a href="#"></a>').html('hex').appendTo(bufferOpts).click(function(e) {
-                            //     $(this).addClass('selected').siblings().removeClass('selected');
-                            //     e.preventDefault();
-                            //     e.stopPropagation();
-                            // })
-                            // $('<a href="#"></a>').html('string').appendTo(bufferOpts).click(function(e) {
-                            //     $(this).addClass('selected').siblings().removeClass('selected');
-                            //     e.preventDefault();
-                            //     e.stopPropagation();
-                            // })
+                        headerHead = $('<span class="debug-message-type-meta debug-message-object-type-header"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(header);
+                    }
+                    if (type === 'buffer') {
+                        var stringRow = $('<div class="debug-message-object-entry collapsed"></div>').hide().appendTo(element);
+                        var sr = $('<div class="debug-message-array-rows"></div>').appendTo(stringRow);
+                        var stringEncoding = "";
+                        try {
+                            stringEncoding = String.fromCharCode.apply(null, new Uint16Array(data))
+                        } catch(err) {
+                            console.log(err);
                         }
+                        $('<pre class="debug-message-type-string"></pre>').html(stringEncoding).appendTo(sr);
+                        var bufferOpts = $('<span class="debug-message-buffer-opts"></span>').appendTo(headerHead);
+                        $('<a href="#"></a>').addClass('selected').html('raw').appendTo(bufferOpts).click(function(e) {
+                            if ($(this).text() === 'raw') {
+                                $(this).text('string');
+                                arrayRows.hide();
+                                stringRow.show();
+                            } else {
+                                $(this).text('raw');
+                                arrayRows.show();
+                                stringRow.hide();
+                            }
+                            e.preventDefault();
+                            e.stopPropagation();
+                        })
                     }
                     var row;
                     if (fullLength <= 10) {
                         for (i=0;i<fullLength;i++) {
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
                             buildMessageElement(data[i],""+i,false).appendTo(row);
                         }
                     } else {
                         for (i=0;i<fullLength;i+=10) {
                             var minRange = i;
-                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(element);
+                            row = $('<div class="debug-message-object-entry collapsed"></div>').appendTo(arrayRows);
                             header = $('<span></span>').appendTo(row);
                             $('<i class="fa fa-caret-right debug-message-object-handle"></i> ').appendTo(header);
                             makeExpandable(header, (function() {
@@ -336,13 +343,13 @@ RED.debug = (function() {
                             $('<span class="debug-message-object-key"></span>').html("["+minRange+" &hellip; "+Math.min(fullLength-1,(minRange+9))+"]").appendTo(header);
                         }
                         if (fullLength < originalLength) {
-                             $('<div class="debug-message-object-entry collapsed"><span class="debug-message-object-key">['+fullLength+' &hellip; '+originalLength+']</span></div>').appendTo(element);
+                             $('<div class="debug-message-object-entry collapsed"><span class="debug-message-object-key">['+fullLength+' &hellip; '+originalLength+']</span></div>').appendTo(arrayRows);
                         }
                     }
                 });
             }
             if (key) {
-                $('<span class="debug-message-type-meta"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
+                headerHead = $('<span class="debug-message-type-meta f"></span>').html(typeHint||(type+'['+originalLength+']')).appendTo(entryObj);
             } else {
                 headerHead = $('<span class="debug-message-object-header"></span>').appendTo(entryObj);
                 $('<span>[ </span>').appendTo(headerHead);
diff --git a/nodes/core/core/lib/debug/style.css b/nodes/core/core/lib/debug/style.css
index 1dca041b3..b2ac04eff 100644
--- a/nodes/core/core/lib/debug/style.css
+++ b/nodes/core/core/lib/debug/style.css
@@ -119,6 +119,9 @@
 .debug-message-element:not(.collapsed)>.debug-message-expandable>.debug-message-object-value>.debug-message-object-header {
     display:none;
 }
+.debug-message-element.collapsed .debug-message-buffer-opts {
+    display: none;
+}
 
 .debug-message-element.collapsed .debug-message-object-type-header {
     display:none;
@@ -154,11 +157,6 @@
     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;