Add debug message menu

editor/js/ui/common/menu.js

@@ -92,7 +92,8 @@ RED.menu = (function() {
             menuItems[opt.id] = opt;
 
             if (opt.onselect) {
-                link.click(function() {
+                link.click(function(e) {
+                    e.preventDefault();
                     if ($(this).parent().hasClass("disabled")) {
                         return;
                     }
@@ -150,15 +151,13 @@ RED.menu = (function() {
     }
     function createMenu(options) {
 
-        var button = $("#"+options.id);
+        var menuParent = $("#"+options.id);
 
-        //button.click(function(event) {
+        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"});
-        //    $("#"+options.id+"-submenu").show();
-        //    event.preventDefault();
-        //});
 
-
+        if (menuParent.length === 1) {
-        var topMenu = $("<ul/>",{id:options.id+"-submenu", class:"dropdown-menu pull-right"}).insertAfter(button);
+            topMenu.insertAfter(menuParent);
+        }
 
         var lastAddedSeparator = false;
         for (var i=0;i<options.options.length;i++) {
@@ -171,6 +170,8 @@ RED.menu = (function() {
                 }
             }
         }
+
+        return topMenu;
     }
 
     function triggerAction(id, args) {

editor/js/ui/utils.js

@@ -201,6 +201,9 @@ RED.utils = (function() {
              strippedKey = path.substring(rootPath.length+(path[rootPath.length]==="."?1:0));
         }
         var element = $('<span class="debug-message-element"></span>');
+        element.collapse = function() {
+            element.find(".debug-message-expandable").parent().addClass("collapsed");
+        }
         header = $('<span class="debug-message-row"></span>').appendTo(element);
         if (sourceId) {
             addMessageControls(header,sourceId,path,obj,rootPath,strippedKey);
@@ -224,6 +227,10 @@ RED.utils = (function() {
                     }
                     expandPaths.sort();
                 }
+                element.clearPinned = function() {
+                    element.find(".debug-message-row-pinned").removeClass("debug-message-row-pinned");
+                    pinnedPaths[sourceId] = {};
+                }
             }
         } else {
             if (!hideKey) {

nodes/core/core/lib/debug/debug-utils.js

@@ -178,6 +178,36 @@ RED.debug = (function() {
         return str.replace(/\n/g,"↵").replace(/\t/g,"→");
     }
 
+
+    var menuOptionMenu;
+    var activeMenuMessage;
+    function showMessageMenu(button,dbgMessage,sourceId) {
+        activeMenuMessage = dbgMessage;
+        if (!menuOptionMenu) {
+            menuOptionMenu = RED.menu.init({id:"debug-message-option-menu",
+                options: [
+                    {id:"debug-message-menu-item-collapse",label:RED._("node-red:debug.messageMenu.collapseAll"),onselect:function(){
+                        activeMenuMessage.collapse();
+                    }},
+                    {id:"debug-message-menu-item-clear-pins",label:RED._("node-red:debug.messageMenu.clearPinned"),onselect:function(){
+                        activeMenuMessage.clearPinned();
+                    }}
+                ]
+            });
+            menuOptionMenu.css({
+                position: "absolute"
+            })
+            menuOptionMenu.on('mouseleave', function(){ $(this).hide() });
+            menuOptionMenu.on('mouseup', function() { $(this).hide() });
+            menuOptionMenu.appendTo("body");
+        }
+        var elementPos = button.offset();
+        menuOptionMenu.css({
+            top: elementPos.top+"px",
+            left: (elementPos.left - menuOptionMenu.width() + 20)+"px"
+        })
+        menuOptionMenu.show();
+    }
     function handleDebugMessage(o) {
         var msg = document.createElement("div");
 
@@ -214,25 +244,7 @@ RED.debug = (function() {
         } else if (name) {
             $('<span class="debug-message-name">'+name+'</span>').appendTo(metaRow);
         }
-        // NOTE: relying on function error to have a "type" that all other msgs don't
-        if (o.hasOwnProperty("type") && (o.type === "function")) {
-            var errorLvlType = 'error';
-            var errorLvl = 20;
-            if (o.hasOwnProperty("level") && o.level === 30) {
-                errorLvl = 30;
-                errorLvlType = 'warn';
-            }
-            $(msg).addClass('debug-message-level-' + errorLvl);
-            $('<span class="debug-message-topic">function : (' + errorLvlType + ')</span>').appendTo(metaRow);
-        } else {
-            // var tools = $('<span class="debug-message-tools button-group"></span>').appendTo(metaRow);
-            // var filterMessage = $('<button class="editor-button editor-button-small"><i class="fa fa-filter"></i></button>').appendTo(tools);
 
-            $('<span class="debug-message-topic">'+
-                (o.topic?topic+' : ':'')+
-                (o.property?'msg.'+property:'msg')+" : "+format+
-                '</span>').appendTo(metaRow);
-        }
         if (format === 'Object' || /^array/.test(format) || format === 'boolean' || format === 'number' ) {
             payload = JSON.parse(payload);
         } else if (/error/i.test(format)) {
@@ -251,7 +263,33 @@ RED.debug = (function() {
         }
         var el = $('<span class="debug-message-payload"></span>').appendTo(msg);
         var path = o.property||'';
-        RED.utils.createObjectElement(payload,/*true*/null,format,false,path,sourceNode&&sourceNode.id,path).appendTo(el);
+        var debugMessage = RED.utils.createObjectElement(payload,/*true*/null,format,false,path,sourceNode&&sourceNode.id,path);
+        // Do this in a separate step so the element functions aren't stripped
+        debugMessage.appendTo(el);
+        // NOTE: relying on function error to have a "type" that all other msgs don't
+        if (o.hasOwnProperty("type") && (o.type === "function")) {
+            var errorLvlType = 'error';
+            var errorLvl = 20;
+            if (o.hasOwnProperty("level") && o.level === 30) {
+                errorLvl = 30;
+                errorLvlType = 'warn';
+            }
+            $(msg).addClass('debug-message-level-' + errorLvl);
+            $('<span class="debug-message-topic">function : (' + errorLvlType + ')</span>').appendTo(metaRow);
+        } else {
+            var tools = $('<span class="debug-message-tools button-group"></span>').appendTo(metaRow);
+            var filterMessage = $('<button class="editor-button editor-button-small"><i class="fa fa-ellipsis-h"></i></button>').appendTo(tools);
+            filterMessage.click(function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                showMessageMenu(filterMessage,debugMessage,sourceNode&&sourceNode.id);
+            });
+            $('<span class="debug-message-topic">'+
+                (o.topic?topic+' : ':'')+
+                (o.property?'msg.'+property:'msg')+" : "+format+
+                '</span>').appendTo(metaRow);
+        }
+
         var atBottom = (sbc.scrollHeight-messageList.height()-sbc.scrollTop) < 5;
         var m = {
             el: msg

nodes/core/locales/en-US/messages.json

@@ -114,6 +114,10 @@
             "name": "Debug messages",
             "filterAll": "all flows",
             "filterCurrent": "current flow"
+        },
+        "messageMenu": {
+            "collapseAll": "Collapse all paths",
+            "clearPinned": "Clear pinned paths"
         }
     },
     "link": {