@node-red/editor-client 5.0.0-beta.1 → 5.0.0-beta.2

package/public/red/red.js

@@ -945,7 +945,6 @@ var RED = (function() {
             '<div id="red-ui-workspace"></div>'+
             '<div id="red-ui-sidebar"></div>'+
             '<div id="red-ui-editor-stack" tabindex="-1"></div>'+
-            // '<div id="red-ui-palette"></div>'+
         '</div>').appendTo(options.target);
     
         // Don't use the `hide` class on this container, as the show reverts it to block rather
@@ -955,6 +954,7 @@ var RED = (function() {
         $('<div id="red-ui-editor-plugin-configs"></div>').appendTo(options.target);
         $('<div id="red-ui-editor-node-configs"></div>').appendTo(options.target);
         $('<div id="red-ui-full-shade" class="hide"></div>').appendTo(options.target);
+        $('<div id="red-ui-global-dialog-container"></div>').appendTo(options.target);
 
         loader.init().appendTo("#red-ui-main-container");
         loader.start("...",0);
@@ -10063,7 +10063,13 @@ RED.utils = (function() {
         var copyPayload = $('<button class="red-ui-button red-ui-button-small"><i class="fa fa-clipboard"></i></button>').appendTo(copyTools).on("click", function(e) {
             e.preventDefault();
             e.stopPropagation();
-            RED.clipboard.copyText(msg,copyPayload,"clipboard.copyMessageValue");
+            var payloadToCopy;
+            if (typeof msg === "number") {
+                payloadToCopy = obj.find(".red-ui-debug-msg-type-number").first().text();
+            } else {
+                payloadToCopy = msg;
+            }
+            RED.clipboard.copyText(payloadToCopy, copyPayload, "clipboard.copyMessageValue");
         })
         RED.popover.tooltip(copyPayload,RED._("node-red:debug.sidebar.copyPayload"));
         if (enablePinning && strippedKey !== undefined && strippedKey !== '') {
@@ -10391,7 +10397,7 @@ RED.utils = (function() {
                         var sr = $('<div class="red-ui-debug-msg-object-entry collapsed"></div>').appendTo(stringRow);
                         var stringEncoding = "";
                         try {
-                            stringEncoding = String.fromCharCode.apply(null, new Uint16Array(data))
+                            stringEncoding = new TextDecoder().decode(new Uint8Array(data));
                         } catch(err) {
                             console.log(err);
                         }
@@ -11684,8 +11690,10 @@ RED.utils = (function() {
                 var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-remove red-ui-button red-ui-button-small"}).appendTo(li);
                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
                 li.addClass("red-ui-editableList-item-removable");
+                var removeTip = RED.popover.tooltip(deleteButton, RED._("common.label.delete"));
                 deleteButton.on("click", function(evt) {
                     evt.preventDefault();
+                    removeTip.close();
                     var data = row.data('data');
                     li.addClass("red-ui-editableList-item-deleting")
                     li.fadeOut(300, function() {
@@ -11833,6 +11841,7 @@ RED.utils = (function() {
  *   - autoSelect: boolean - default true - triggers item selection when navigating
  *                           list by keyboard. If the list has checkboxed items
  *                           you probably want to set this to false
+ *   - expandOnLabel: boolean - default true - items expand when their label is clicked
  *
  * methods:
  *   - data(items) - clears existing items and replaces with new data
@@ -11896,6 +11905,7 @@ RED.utils = (function() {
  *
  *
  */
+    const paddingPerDepth = 5;
 
     $.widget( "nodered.treeList", {
         _create: function() {
@@ -11993,7 +12003,10 @@ RED.utils = (function() {
                     } else {
                         that._topList.find(".focus").removeClass("focus")
                     }
-                    target.treeList.label.addClass('focus')
+                    if (target.treeList.label) {
+                        target.treeList.label.addClass('focus')
+                    }
+                    that.reveal(target);
                 }
             });
             this._data = [];
@@ -12147,11 +12160,11 @@ RED.utils = (function() {
             if (child.depth !== parent.depth+1) {
                 child.depth = parent.depth+1;
                 // var labelPaddingWidth = ((child.gutter ? child.gutter[0].offsetWidth + 2 : 0) + (child.depth * 20));
-                var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*20));
+                var labelPaddingWidth = (((child.gutter&&!child.gutter.hasClass("red-ui-treeList-gutter-float"))?child.gutter.width()+2:0)+(child.depth*paddingPerDepth));
                 child.treeList.labelPadding.width(labelPaddingWidth+'px');
                 if (child.element) {
                     $(child.element).css({
-                        width: "calc(100% - "+(labelPaddingWidth+20+(child.icon?20:0))+"px)"
+                        width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(child.icon?paddingPerDepth:0))+"px)"
                     })
                 }
                 // This corrects all child item depths
@@ -12280,7 +12293,7 @@ RED.utils = (function() {
                     if (!childrenAdded) {
                         startTime = Date.now();
                         spinner = $('<div class="red-ui-treeList-spinner">').css({
-                            "background-position": (35+depth*20)+'px 50%'
+                            "background-position": (35+depth*paddingPerDepth)+'px 50%'
                         }).appendTo(container);
                     }
 
@@ -12332,10 +12345,10 @@ RED.utils = (function() {
                         $(element).appendTo(item.treeList.label);
                         // using the JQuery Object, the gutter width will
                         // be wrong when the element is reattached the second time
-                        var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * 20);
+                        var labelPaddingWidth = (item.gutter ? item.gutter[0].offsetWidth + 2 : 0) + (item.depth * paddingPerDepth);
 
                         $(element).css({
-                            width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
+                            width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
                         })
                     }
                     item.element = element;
@@ -12370,7 +12383,7 @@ RED.utils = (function() {
 
             }
 
-            var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*20);
+            var labelPaddingWidth = ((item.gutter&&!item.gutter.hasClass("red-ui-treeList-gutter-float"))?item.gutter.width()+2:0)+(depth*paddingPerDepth);
 
             item.treeList.labelPadding = $('<span>').css({
                 display: "inline-block",
@@ -12432,12 +12445,14 @@ RED.utils = (function() {
                     });
                 // $('<span class="red-ui-treeList-icon"><i class="fa fa-folder-o" /></span>').appendTo(label);
                 label.on("click.red-ui-treeList-expand", function(e) {
-                    if (container.hasClass("expanded")) {
-                        if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
-                            item.treeList.collapse();
+                    if (that.options.expandOnLabel !== false || item.expandOnLabel === true) {
+                        if (container.hasClass("expanded")) {
+                            if (item.hasOwnProperty('selected') || label.hasClass("selected")) {
+                                item.treeList.collapse();
+                            }
+                        } else {
+                            item.treeList.expand();
                         }
-                    } else {
-                        item.treeList.expand();
                     }
                 })
                 if (!item.children) {
@@ -12575,7 +12590,7 @@ RED.utils = (function() {
             } else if (item.element) {
                 $(item.element).appendTo(label);
                 $(item.element).css({
-                    width: "calc(100% - "+(labelPaddingWidth+20+(item.icon?20:0))+"px)"
+                    width: "calc(100% - "+(labelPaddingWidth+paddingPerDepth+(item.icon?paddingPerDepth:0))+"px)"
                 })
             }
             if (item.children) {
@@ -12684,6 +12699,10 @@ RED.utils = (function() {
             }
 
             that._topList.find(".focus").removeClass("focus");
+            
+            if (item.treeList.label) {
+                item.treeList.label.addClass("focus");
+            }
 
             if (triggerEvent !== false) {
                 this._trigger("select",null,item)
@@ -14790,12 +14809,18 @@ RED.tabs = (function() {
         }
         function activatePreviousTab() {
             var previous = findPreviousVisibleTab();
+            if (previous.length === 0) {
+                previous = ul.find("li.red-ui-tab:not(.hide-tab)").last();
+            }
             if (previous.length > 0) {
                 activateTab(previous.find("a"));
             }
         }
         function activateNextTab() {
             var next = findNextVisibleTab();
+            if (next.length === 0) {
+                next = ul.find("li.red-ui-tab:not(.hide-tab)").first();
+            }
             if (next.length > 0) {
                 activateTab(next.find("a"));
             }
@@ -17952,16 +17977,10 @@ RED.deploy = (function() {
     }
 
     function shadeShow() {
-        $("#red-ui-header-shade").show();
-        $("#red-ui-editor-shade").show();
-        $("#red-ui-palette-shade").show();
-        $(".red-ui-sidebar-shade").show();
+        RED.notifications.shade.show();
     }
     function shadeHide() {
-        $("#red-ui-header-shade").hide();
-        $("#red-ui-editor-shade").hide();
-        $("#red-ui-palette-shade").hide();
-        $(".red-ui-sidebar-shade").hide();
+        RED.notifications.shade.hide();
     }
     function deployButtonSetBusy(){
         $(".red-ui-deploy-button-content").css('opacity',0);
@@ -23639,8 +23658,8 @@ RED.view = (function() {
             element: $('<span class="button-group">'+
                     '<button class="red-ui-footer-button" id="red-ui-view-searchtools-search"><i class="fa fa-search"></i></button>' +
                     '</span>' +
-                    '<span class="button-group search-counter">' +
-                    '<span class="red-ui-footer-button" id="red-ui-view-searchtools-counter">? of ?</span>' +
+                    '<span class="button-group red-ui-view-searchtools-counter">' +
+                    '<span class="red-ui-footer-button" id="red-ui-view-searchtools-counter-label">? of ?</span>' +
                     '</span>' +
                     '<span class="button-group">' +
                     '<button class="red-ui-footer-button" id="red-ui-view-searchtools-prev"><i class="fa fa-chevron-left"></i></button>' +
@@ -24414,6 +24433,13 @@ RED.view = (function() {
                 quickAddLink.virtualLink = true;
             }
             hideDragLines();
+        } else if (quickAddLink) {
+            // continuing an existing quick add - set the filter accordingly
+            if (quickAddLink.portType === PORT_TYPE_OUTPUT) {
+                filter = {input:true}
+            } else {
+                filter = {output:true}
+            }
         }
         if (linkToSplice || spliceMultipleLinks) {
             filter = {
@@ -30040,6 +30066,9 @@ RED.view = (function() {
                     suggestedNodes = [suggestedNodes]
                 }
                 suggestedNodes = suggestedNodes.filter(n => {
+                    if (n.type === 'junction') {                        
+                        return true
+                    }
                     const def = RED.nodes.getType(n.type)
                     if (def?.set && def.set.enabled === false) {
                         // Exclude disabled node set
@@ -30465,7 +30494,6 @@ RED.view = (function() {
         },
         selectNodes: function(options) {
             $("#red-ui-workspace-tabs-shade").show();
-            $("#red-ui-palette-shade").show();
             $(".red-ui-sidebar-shade").show();
             $("#red-ui-header-shade").show();
             $("#red-ui-workspace").addClass("red-ui-workspace-select-mode");
@@ -30487,7 +30515,6 @@ RED.view = (function() {
             var closeNotification = function() {
                 clearSelection();
                 $("#red-ui-workspace-tabs-shade").hide();
-                $("#red-ui-palette-shade").hide();
                 $(".red-ui-sidebar-shade").hide();
                 $("#red-ui-header-shade").hide();
                 $("#red-ui-workspace").removeClass("red-ui-workspace-select-mode");
@@ -31149,8 +31176,8 @@ RED.view.navigator = (function() {
             RED.actions.add("core:toggle-navigator",toggle);
             navContainer = $('<div>').css({
                 "position":"absolute",
-                "bottom":$("#red-ui-workspace-footer").height() + 2,
-                "right": 4,
+                "bottom":$("#red-ui-workspace-footer").height() + 12,
+                "right": 16,
                 zIndex: 1
             }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide();
             navBox = d3.select(navContainer[0])
@@ -32699,6 +32726,7 @@ RED.view.tools = (function() {
  * limitations under the License.
  **/
 RED.sidebar = (function() {
+    const sidebarLayoutVersion = 1
     const sidebars = {
         primary: {
             id: 'primary',
@@ -32717,12 +32745,12 @@ RED.sidebar = (function() {
             maximumWidth: 800,
             // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
             defaultWidth: 210,
-            defaultTopHeight: 1
+            defaultTopHeight: 0.5
         }
     }
     const defaultSidebarConfiguration = {
         primary: [ ['info','help','config','context'], ['debug'] ],
-        secondary: [ ['explorer','palette'], [] ]
+        secondary: [ ['explorer'], ['palette'] ]
     }
 
     const knownTabs = {};
@@ -32730,7 +32758,8 @@ RED.sidebar = (function() {
     function exportSidebarState () {
         const state = {
             primary: [[], []],
-            secondary: [[], []]
+            secondary: [[], []],
+            v: sidebarLayoutVersion
         }
         function getTabButtons(tabBar) {
             const result = []
@@ -32779,8 +32808,8 @@ RED.sidebar = (function() {
 
         // Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar
         let savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
-        if (true || typeof savedState.primary[0] === 'string' || typeof savedState.secondary[0] === 'string') {
-            // This is a beta.0 format. Reset it for beta.1
+        if (typeof savedState.primary[0] === 'string' || typeof savedState.secondary[0] === 'string' || savedState.v === undefined) {
+            // This is a beta.0/1 format. Reset it for beta.2
             savedState = defaultSidebarConfiguration
             RED.settings.set('editor.sidebar.state', savedState)
         }
@@ -32874,6 +32903,11 @@ RED.sidebar = (function() {
             const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
             // 
             if (targetSidebar.tabBars[options.targetSection].active === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
+                // if (!targetSidebar.sections[options.targetSection].hidden) {
+                //     targetSidebar.hideSection(options.targetSection)
+                // } else {
+                //     targetSidebar.showSection(options.targetSection)
+                // }
                 RED.menu.setSelected(targetSidebar.menuToggle, false);
             } else {
                 RED.sidebar.show(options.id)
@@ -32949,23 +32983,30 @@ RED.sidebar = (function() {
             sidebar.tabBars.bottom.resizeSidebarTabBar();
         }
         sidebar.hideSection = function (position) {
-            sidebar.sections.bottom.container.hide()
-            sidebar.sections.bottom.hidden = true
-            sidebar.sections.top.container.css('flex-grow', '1')
-            sidebar.tabBars.top.container.css('flex-grow', '1')
-            sidebar.tabBars.bottom.container.css('flex-grow', '0')
-            sidebar.tabBars.bottom.container.css('height', '60px')
+            sidebar.sections[position].container.hide()
+            sidebar.sections[position].hidden = true
+
+            const otherPosition = position === 'top' ? 'bottom' : 'top'
+            sidebar.sections[otherPosition].container.css('flex-grow', '1')
+
+            sidebar.tabBars[position].clearSelected()
+            // sidebar.tabBars.top.container.css('flex-grow', '1')
+            // sidebar.tabBars[position].container.css('flex-grow', '0')
+            // sidebar.tabBars[position].container.css('height', '60px')
             
             sidebar.resizeSidebar()
         }
         sidebar.showSection = function (position) {
-            sidebar.sections.bottom.container.show()
-            sidebar.sections.bottom.hidden = false
-            sidebar.sections.top.container.css('flex-grow', '0')
-            sidebar.sections.top.container.css('height', '70%')
-            sidebar.tabBars.top.container.css('flex-grow', '')
-            sidebar.tabBars.bottom.container.css('flex-grow', '')
-            sidebar.tabBars.bottom.container.css('height', '')
+            sidebar.sections[position].container.show()
+            sidebar.sections[position].hidden = false
+            const otherPosition = position === 'top' ? 'bottom' : 'top'
+            sidebar.sections[otherPosition].container.css('flex-grow', '0')
+            sidebar.sections[otherPosition].container.css('height', '70%')
+            // sidebar.tabBars.top.container.css('flex-grow', '')
+            // sidebar.tabBars[position].container.css('flex-grow', '')
+            // sidebar.tabBars[position].container.css('height', '')
+            // sidebar.tabBars[position].active
+            sidebar.tabBars[position].container.find('button[data-tab-id="'+sidebar.tabBars[position].active+'"]').addClass('selected')
 
             sidebar.resizeSidebar()
         }
@@ -33003,7 +33044,7 @@ RED.sidebar = (function() {
                 var elementPos = tabOverflowButton.offset();
                 menu.css({
                     top: (elementPos.top+tabOverflowButton.height()- menu.height() - 10)+"px",
-                    left: (elementPos.left - menu.width() - 3)+"px"
+                    left: sidebar.direction === 'left' ?  ((elementPos.left + tabOverflowButton.width() + 3)+"px") : ((elementPos.left - menu.width() - 3)+"px")
                 })
                 $(".red-ui-menu.red-ui-menu-dropdown").hide();
                 setTimeout(() => {
@@ -33027,6 +33068,14 @@ RED.sidebar = (function() {
             connectWith: ".red-ui-sidebar-tab-bar-buttons",
             start: function(event, ui) {
                 const tabId = ui.item.attr('data-tab-id');
+                const tabCount = tabBarButtonsContainer.children('button:not(.red-ui-sidebar-tab-bar-overflow-button):not(.red-ui-sidebar-tab-bar-button-placeholder)').length
+                if (position === 'top' && tabCount === 1) {
+                    // Call in a timeout to allow the stortable start event to complete
+                    // processing - otherwise errors are thrown
+                    setTimeout(function () {
+                        tabBarButtonsContainer.sortable('cancel');
+                    }, 0);
+                }
                 const options = knownTabs[tabId];
                 options.tabButtonTooltip.delete()
                 draggingTabButton = true
@@ -33075,7 +33124,7 @@ RED.sidebar = (function() {
                 // Nothing visible - bail out
                 return
             }
-            if (tabBarButtonsBottom < bottomButton.position().top + buttonHeight * 1.5) {
+            if (tabBarButtonsBottom < bottomButton.position().top + buttonHeight) {
                 tabOverflowButton.show()
                 let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5;
                 while (tabBarButtonsBottom < tabOverflowButtonBottom) {
@@ -33236,11 +33285,13 @@ RED.sidebar = (function() {
             // Show the last selected tab for each sidebar
             Object.keys(sidebars).forEach(function(sidebarKey) {
                 const sidebar = sidebars[sidebarKey];
-                let lastTabId = lastSessionSelectedTabs[sidebarKey];
-                if (!lastTabId) {
-                    lastTabId = sidebar.tabBars.top.container.children('button').first().attr('data-tab-id');
-                }
-                showSidebar(lastTabId, true)
+                ['top','bottom'].forEach(function(position) {
+                    let lastTabId = lastSessionSelectedTabs[sidebarKey + '-' + position];
+                    if (!lastTabId) {
+                        lastTabId = sidebar.tabBars[position].container.children('button').first().attr('data-tab-id');
+                    }
+                    showSidebar(lastTabId, true)
+                })
             })
             return
         }
@@ -33257,16 +33308,21 @@ RED.sidebar = (function() {
                 $(tabOptions.wrapper).show();
                 if (tabOptions.toolbar) {
                     $(tabOptions.toolbar).show();
+                    targetSidebar.sections[targetSection].footer.show();
+                } else {
+                    targetSidebar.sections[targetSection].footer.hide();
                 }
-                RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id, tabOptions.id)
+                RED.settings.setLocal("last-sidebar-tab-" + targetSidebar.id+'-'+targetSection, tabOptions.id)
                 // TODO: find which tabBar the button is in
                 targetSidebar.tabBars[targetSection].clearSelected()
                 targetSidebar.tabBars[targetSection].container.find('button[data-tab-id="'+id+'"]').addClass('selected')
                 targetSidebar.tabBars[targetSection].active = id
-
                 if (!skipShowSidebar && !RED.menu.isSelected(targetSidebar.menuToggle)) {
                     RED.menu.setSelected(targetSidebar.menuToggle,true);
                 }
+                if (targetSidebar.sections[targetSection].hidden) {
+                    targetSidebar.showSection(targetSection)
+                }
             }
         }
     }
@@ -33287,11 +33343,13 @@ RED.sidebar = (function() {
         sidebar.sections = {};
         sidebar.sections.top = {}
         sidebar.sections.top.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-top"></div>').appendTo(sidebar.container);
+        // sidebar.sections.top.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.top.container);
         sidebar.sections.top.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.top.container);
         sidebar.sections.top.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.top.container);
         sidebar.sectionsSeparator = $('<div class="red-ui-sidebar-tab-bar-separator"><div class="red-ui-sidebar-separator-handle"></div></div>').appendTo(sidebar.container);
         sidebar.sections.bottom = {}
         sidebar.sections.bottom.container = $('<div class="red-ui-sidebar-section red-ui-sidebar-section-bottom"></div>').appendTo(sidebar.container);
+        // sidebar.sections.bottom.banner = $('<div class="red-ui-sidebar-banner">Head</div>').appendTo(sidebar.sections.bottom.container);
         sidebar.sections.bottom.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.sections.bottom.container);
         sidebar.sections.bottom.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.sections.bottom.container);
 
@@ -33299,12 +33357,14 @@ RED.sidebar = (function() {
         let startTopSectionHeight
         let startTopTabSectionHeight
         let startSidebarHeight
+        let lastSeparatorPosition
         sidebar.sectionsSeparator.draggable({
             axis: "y",
             containment: sidebar.container,
             scroll: false,
             start:function(event,ui) {
                 startPosition = ui.position.top
+                lastSeparatorPosition = ui.position.top
                 startTopSectionHeight = sidebar.sections.top.container.outerHeight()
                 startTopTabSectionHeight = sidebar.tabBars.top.container.outerHeight()
                 startSidebarHeight = sidebar.container.height()
@@ -33314,12 +33374,13 @@ RED.sidebar = (function() {
                 const newTopHeight = startTopSectionHeight + delta
                 const newBottomHeight = startSidebarHeight - newTopHeight
                 if (newTopHeight < 100 || newBottomHeight < 100) {
-                    ui.position.top += delta
+                    ui.position.top = lastSeparatorPosition
                     return
                 }
                 sidebar.sections.top.container.outerHeight(startTopSectionHeight + delta)
                 sidebar.tabBars.top.container.outerHeight(startTopTabSectionHeight + delta)
                 ui.position.top -= delta
+                lastSeparatorPosition = ui.position.top
                 sidebar.resizeSidebar()
             },
             stop:function(event,ui) {
@@ -33384,7 +33445,8 @@ RED.sidebar = (function() {
         // Remember the last selected tab for each sidebar before
         // the tabs are readded causing the state to get updated
         Object.keys(sidebars).forEach(function(sidebarKey) {
-            lastSessionSelectedTabs[sidebarKey] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey)
+            lastSessionSelectedTabs[sidebarKey + '-top'] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey + '-top');
+            lastSessionSelectedTabs[sidebarKey + '-bottom'] = RED.settings.getLocal("last-sidebar-tab-" + sidebarKey + '-bottom');
         })
     }
 
@@ -34030,7 +34092,6 @@ RED.palette = (function() {
         $('<img src="red/images/spin.svg" class="red-ui-palette-spinner hide"/>').appendTo("#red-ui-palette");
         $('<div id="red-ui-palette-search" class="red-ui-palette-search hide"><input type="text" data-i18n="[placeholder]palette.filter"></input></div>').appendTo("#red-ui-palette");
         $('<div id="red-ui-palette-container" class="red-ui-palette-scroll hide"></div>').appendTo("#red-ui-palette");
-        // $('<div id="red-ui-palette-shade" class="hide"></div>').appendTo("#red-ui-palette");
 
         $("#red-ui-palette > .red-ui-palette-spinner").show();
 
@@ -34804,11 +34865,13 @@ RED.sidebar.info = (function() {
             {
                 label: RED._("menu.label.flows"),
                 expanded: true,
+                expandOnLabel: true,
                 children: []
             },
             {
                 id: "__subflow__",
                 label: RED._("menu.label.subflows"),
+                expandOnLabel: true,
                 children: [
                     getEmptyItem("__subflow__")
                 ]
@@ -34817,6 +34880,7 @@ RED.sidebar.info = (function() {
                 id: "__global__",
                 flow: "__global__",
                 label: RED._("sidebar.info.globalConfig"),
+                expandOnLabel: true,
                 types: {},
                 children: [
                     getEmptyItem("__global__")
@@ -34828,7 +34892,6 @@ RED.sidebar.info = (function() {
         subflowList = flowData[1];
         globalConfigNodes = flowData[2];
         configNodeTypes = { __global__: globalConfigNodes};
-
         return flowData;
     }
 
@@ -35007,8 +35070,6 @@ RED.sidebar.info = (function() {
                 }
                 return RED._("common.label."+(((n.type==='tab' && n.disabled) || (n.type!=='tab' && n.d))?"enable":"disable"));
             });
-        } else {
-            $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
         }
         if (n.type === 'tab') {
             var lockToggleButton = $('<button type="button" class="red-ui-info-outline-item-control-lock red-ui-button red-ui-button-small"><i class="fa fa-unlock-alt"></i><i class="fa fa-lock"></i></button>').appendTo(controls).on("click",function(evt) {
@@ -35023,7 +35084,7 @@ RED.sidebar.info = (function() {
             RED.popover.tooltip(lockToggleButton,function() {
                 return RED._("common.label."+(n.locked?"unlock":"lock"));
             });
-        } else {
+        } else if (n.type !== 'subflow') {
             $('<div class="red-ui-info-outline-item-control-spacer">').appendTo(controls)
         }
         controls.find("button").on("dblclick", function(evt) {
@@ -35082,12 +35143,18 @@ RED.sidebar.info = (function() {
         // <div class="red-ui-info-outline-item red-ui-info-outline-item-flow" style=";"><div class="red-ui-search-result-description red-ui-info-outline-item-label">Space Monkey</div><div class="red-ui-info-outline-item-controls"><button class="red-ui-button red-ui-button-small" style="position:absolute;right:5px;"><i class="fa fa-ellipsis-h"></i></button></div></div></div>').appendTo(container)
 
         treeList = $("<div>").css({width: "100%"}).appendTo(container).treeList({
-            data:getFlowData()
+            data:getFlowData(),
+            expandOnLabel: false
         })
         treeList.on('treelistselect', function(e,item) {
             var node = RED.nodes.node(item.id) || RED.nodes.group(item.id) || RED.nodes.workspace(item.id) || RED.nodes.subflow(item.id);
             if (node) {
-                RED.sidebar.info.refresh(node);
+                if (node.type === 'tab' || node.type === 'subflow') {
+                    RED.workspaces.show(node.id)
+                } else {
+                    RED.view.reveal(node.id);
+                }
+                // RED.sidebar.info.refresh(node);
                 // if (node.type === 'group' || node._def.category !== "config") {
                 //     // RED.view.select({nodes:[node]})
                 // } else if (node._def.category === "config") {
@@ -35371,14 +35438,15 @@ RED.sidebar.info = (function() {
         }
     }
     function getGutter(n) {
-        var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
-        var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-            RED.view.reveal(n.id);
-        })
-        RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
-        return span;
+        // var span = $("<span>",{class:"red-ui-info-outline-gutter red-ui-treeList-gutter-float"});
+        // var revealButton = $('<button type="button" class="red-ui-info-outline-item-control-reveal red-ui-button red-ui-button-small"><i class="fa fa-search"></i></button>').appendTo(span).on("click",function(evt) {
+        //     evt.preventDefault();
+        //     evt.stopPropagation();
+        //     RED.view.reveal(n.id);
+        // })
+        // RED.popover.tooltip(revealButton,RED._("sidebar.info.find"));
+        // return span;
+        return null;
     }
 
     function createFlowConfigNode(parent,type) {
@@ -35659,6 +35727,7 @@ RED.sidebar.help = (function() {
 
         $(window).on("resize", resizeStack);
         $(window).on("focus", resizeStack);
+        RED.events.on("sidebar:resize", resizeStack);
 
         RED.events.on('registry:node-type-added', queueRefresh);
         RED.events.on('registry:node-type-removed', queueRefresh);
@@ -47230,7 +47299,6 @@ RED.eventLog = (function() {
         function finishBuild() {
             $("#red-ui-header-shade").show();
             $("#red-ui-editor-shade").show();
-            $("#red-ui-palette-shade").show();
             $(".red-ui-sidebar-shade").show();
             tray.preferredWidth = Math.max(el.width(),500);
             if (!options.maximized) {
@@ -47350,7 +47418,6 @@ RED.eventLog = (function() {
                     tray.tray.css({right:0});
                     $("#red-ui-header-shade").show();
                     $("#red-ui-editor-shade").show();
-                    $("#red-ui-palette-shade").show();
                     $(".red-ui-sidebar-shade").show();
                     stackHidden = false;
                 }
@@ -47387,7 +47454,6 @@ RED.eventLog = (function() {
                 });
                 $("#red-ui-header-shade").hide();
                 $("#red-ui-editor-shade").hide();
-                $("#red-ui-palette-shade").hide();
                 $(".red-ui-sidebar-shade").hide();
                 stackHidden = true;
             }
@@ -47431,7 +47497,6 @@ RED.eventLog = (function() {
                     if (stack.length === 0) {
                         $("#red-ui-header-shade").hide();
                         $("#red-ui-editor-shade").hide();
-                        $("#red-ui-palette-shade").hide();
                         $(".red-ui-sidebar-shade").hide();
                         RED.events.emit("editor:close");
                         RED.view.focus();
@@ -49132,7 +49197,7 @@ RED.library = (function() {
                                 icon: 'fa fa-cube',
                                 label: options.type,
                                 path: "",
-                                expanded: false,
+                                expanded: true,
                                 children: function(done, item) {
                                     loadLibraryFolder(lib.id, options.url, "", function(children) {
                                         item.children = children;
@@ -49740,10 +49805,10 @@ RED.notifications = (function() {
     });
     */
 
-    var persistentNotifications = {};
+    const persistentNotifications = {};
 
-    var shade = (function() {
-        var shadeUsers = 0;
+    const shade = (function() {
+        let shadeUsers = 0;
         return {
             show: function() {
                 shadeUsers++;
@@ -50021,7 +50086,8 @@ RED.notifications = (function() {
                     showPersistent();
                 })
         },
-        notify: notify
+        notify: notify,
+        shade: shade
     }
 })();
 ;/**
@@ -50075,9 +50141,13 @@ RED.search = (function() {
     function indexNode(n) {
         var l = RED.utils.getNodeLabel(n);
         if (l) {
-            l = (""+l).toLowerCase();
-            index[l] = index[l] || {};
-            index[l][n.id] = {node:n,label:l}
+            const originalLabel = "" + l;
+            const indexLabel = originalLabel.toLowerCase();
+            index[indexLabel] = index[indexLabel] || {};
+            index[indexLabel][n.id] = {
+                node: n,
+                label: originalLabel
+            };
         }
         l = l||n.label||n.name||n.id||"";
 
@@ -50293,7 +50363,7 @@ RED.search = (function() {
 
     }
     function createDialog() {
-        dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-main-container");
+        dialog = $("<div>",{id:"red-ui-search",class:"red-ui-search"}).appendTo("#red-ui-global-dialog-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
         searchInput = $('<input type="text" data-i18n="[placeholder]menu.label.searchInput">').appendTo(searchDiv).searchBox({
             delay: 200,
@@ -50547,10 +50617,8 @@ RED.search = (function() {
         }
         if (!visible) {
             previousActiveElement = document.activeElement;
-            $("#red-ui-header-shade").show();
-            $("#red-ui-editor-shade").show();
-            $("#red-ui-palette-shade").show();
-            $(".red-ui-sidebar-shade").show();
+            RED.notifications.shade.show();
+            $("#red-ui-full-shade").one('mousedown.red-ui-actionList', hide)
 
             if (dialog === null) {
                 createDialog();
@@ -50571,10 +50639,8 @@ RED.search = (function() {
     function hide(el, keepSearchToolbar) {
         if (visible) {
             visible = false;
-            $("#red-ui-header-shade").hide();
-            $("#red-ui-editor-shade").hide();
-            $("#red-ui-palette-shade").hide();
-            $(".red-ui-sidebar-shade").hide();
+            RED.notifications.shade.hide();
+            $("#red-ui-full-shade").off('mousedown.red-ui-actionList')
             if (dialog !== null) {
                 dialog.slideUp(200,function() {
                     searchInput.searchBox('value','');
@@ -50605,7 +50671,7 @@ RED.search = (function() {
                 result: (currentIndex + 1),
                 count: activeResults.length
             }
-            $("#red-ui-view-searchtools-counter").text(RED._('actions.search-counter', i18nSearchCounterData));
+            $("#red-ui-view-searchtools-counter-label").text(RED._('actions.search-counter', i18nSearchCounterData));
             $("#view-search-tools > :not(:first-child)").show(); //show other tools
         } else {
             clearActiveSearch();
@@ -50671,11 +50737,6 @@ RED.search = (function() {
             updateSearchToolbar();
         });
 
-        $("#red-ui-header-shade").on('mousedown',hide);
-        $("#red-ui-editor-shade").on('mousedown',hide);
-        $("#red-ui-palette-shade").on('mousedown',hide);
-        $(".red-ui-sidebar-shade").on('mousedown',hide);
-
         $("#red-ui-view-searchtools-close").on("click", function close() {
             clearActiveSearch();
             updateSearchToolbar();
@@ -50707,10 +50768,20 @@ RED.search = (function() {
         show: show,
         hide: hide,
         search: search,
-        getSearchOptions: getSearchOptions
+        getSearchOptions: getSearchOptions,
+        // Expose internals for testing
+        _indexNode: indexNode,
+        get _index() { return index; },
+        set _index(val) { index = val; }
     };
 
 })();
+
+
+// Allow CommonJS import for testing
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = RED.search;
+}
 ;RED.contextMenu = (function () {
 
     let menu;
@@ -51054,7 +51125,7 @@ RED.actionList = (function() {
     }
 
     function createDialog() {
-        dialog = $("<div>",{id:"red-ui-actionList",class:"red-ui-search"}).appendTo("#red-ui-main-container");
+        dialog = $("<div>",{id:"red-ui-actionList",class:"red-ui-search"}).appendTo("#red-ui-global-dialog-container");
         var searchDiv = $("<div>",{class:"red-ui-search-container"}).appendTo(dialog);
         searchInput = $('<input type="text" data-i18n="[placeholder]keyboard.filterActions">').appendTo(searchDiv).searchBox({
             change: function() {
@@ -51162,10 +51233,8 @@ RED.actionList = (function() {
         }
         if (!visible) {
             previousActiveElement = document.activeElement;
-            $("#red-ui-header-shade").show();
-            $("#red-ui-editor-shade").show();
-            $("#red-ui-palette-shade").show();
-            $(".red-ui-sidebar-shade").show();
+            RED.notifications.shade.show();
+            $("#red-ui-full-shade").one('mousedown.red-ui-actionList', hide)
             if (dialog === null) {
                 createDialog();
             }
@@ -51196,10 +51265,9 @@ RED.actionList = (function() {
     function hide() {
         if (visible) {
             visible = false;
-            $("#red-ui-header-shade").hide();
-            $("#red-ui-editor-shade").hide();
-            $("#red-ui-palette-shade").hide();
-            $(".red-ui-sidebar-shade").hide();
+            RED.notifications.shade.hide();
+            $("#red-ui-full-shade").off('mousedown.red-ui-actionList')
+
             if (dialog !== null) {
                 dialog.slideUp(200,function() {
                     searchInput.searchBox('value','');
@@ -51226,12 +51294,6 @@ RED.actionList = (function() {
         RED.events.on("type-search:close",function() { disabled = false; });
 
         RED.keyboard.add("red-ui-actionList","escape",function(){hide()});
-
-
-        $("#red-ui-header-shade").on('mousedown',hide);
-        $("#red-ui-editor-shade").on('mousedown',hide);
-        $("#red-ui-palette-shade").on('mousedown',hide);
-        $(".red-ui-sidebar-shade").on('mousedown',hide);
     }
 
     return {
@@ -55017,7 +55079,7 @@ RED.projects = (function() {
                         var validateForm = function() {
                             var valid = true;
                             var flowFile = projectFlowFileInput.val();
-                            if (flowFile === "" || !/\.json$/.test(flowFile)) {
+                            if (flowFile === "" || !/^[a-zA-Z0-9\-_]+\.json$/.test(flowFile)) {
                                 valid = false;
                                 if (!projectFlowFileInput.hasClass("input-error")) {
                                     projectFlowFileInput.addClass("input-error");
@@ -55439,7 +55501,7 @@ RED.projects = (function() {
 
                             } else if (projectType === 'empty') {
                                 var flowFile = projectFlowFileInput.val();
-                                if (flowFile === "" || !/\.json$/.test(flowFile)) {
+                                if (flowFile === "" || !/^[a-zA-Z0-9\-_]+\.json$/.test(flowFile)) {
                                     valid = false;
                                     if (!projectFlowFileInput.hasClass("input-error")) {
                                         projectFlowFileInput.addClass("input-error");