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

package/public/red/red.js

@@ -910,6 +910,7 @@ var RED = (function() {
             // Register the core set of sidebar panels now the menu is ready to receive items
             RED.palette.init();
             RED.sidebar.info.init();
+            RED.sidebar.info.outliner.init();
             RED.sidebar.help.init();
             RED.sidebar.config.init();
             RED.sidebar.context.init();
@@ -944,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
@@ -954,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);
@@ -10062,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 !== '') {
@@ -10390,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);
                         }
@@ -11683,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() {
@@ -11832,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
@@ -11895,6 +11905,7 @@ RED.utils = (function() {
  *
  *
  */
+    const paddingPerDepth = 5;
 
     $.widget( "nodered.treeList", {
         _create: function() {
@@ -11992,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 = [];
@@ -12146,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
@@ -12279,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);
                     }
 
@@ -12331,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;
@@ -12369,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",
@@ -12431,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) {
@@ -12574,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) {
@@ -12683,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)
@@ -13308,6 +13328,13 @@ RED.panels = (function() {
         $(children[1]).addClass("red-ui-panel");
 
         var separator = $('<div class="red-ui-panels-separator"></div>').insertAfter(children[0]);
+        if (options.invisibleSeparator) {
+            if (!vertical) {
+                throw new Error("invisibleSeparator option is only valid for vertical panels");
+            }
+            separator.addClass("red-ui-panels-separator-invisible");
+            $('<div class="red-ui-panels-separator-handle"></div>').appendTo(separator)
+        }
         var startPosition;
         var panelSizes = [];
         var modifiedSizes = false;
@@ -14782,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"));
             }
@@ -17944,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);
@@ -23631,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>' +
@@ -24406,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 = {
@@ -30032,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
@@ -30457,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");
@@ -30479,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");
@@ -31072,10 +31107,12 @@ RED.view.navigator = (function() {
             scrollPos = [$("#red-ui-workspace-chart").scrollLeft(),$("#red-ui-workspace-chart").scrollTop()];
             // Convert scroll position (in scaled pixels) to workspace coordinates, then to minimap coordinates
             // scrollPos is in scaled canvas pixels, divide by scaleFactor to get workspace coords
-            navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale)
-                     .attr('y',scrollPos[1]/scaleFactor/nav_scale)
-                     .attr('width',chartSize[0]/nav_scale/scaleFactor)
-                     .attr('height',chartSize[1]/nav_scale/scaleFactor)
+            if (chartSize[0] > 0 && chartSize[1] > 0) { 
+                navBorder.attr('x',scrollPos[0]/scaleFactor/nav_scale)
+                        .attr('y',scrollPos[1]/scaleFactor/nav_scale)
+                        .attr('width',chartSize[0]/nav_scale/scaleFactor)
+                        .attr('height',chartSize[1]/nav_scale/scaleFactor)
+            }
         }
     }
     function show () {
@@ -31139,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(),
-                "right":0,
+                "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])
@@ -31149,6 +31186,8 @@ RED.view.navigator = (function() {
                 .attr("height", nav_height)
                 .attr("pointer-events", "all")
                 .attr("id","red-ui-navigator-canvas")
+            navVis = navBox.append("svg:g")
+
             navBox.append("rect").attr("x",0).attr("y",0).attr("width",nav_width).attr("height",nav_height).style({
                 fill:"none",
                 stroke:"none",
@@ -31189,7 +31228,6 @@ RED.view.navigator = (function() {
                 }
             })
             navBorder = navBox.append("rect").attr("class","red-ui-navigator-border")
-            navVis = navBox.append("svg:g")
             RED.statusBar.add({
                 id: "view-navigator",
                 align: "right",
@@ -32688,6 +32726,7 @@ RED.view.tools = (function() {
  * limitations under the License.
  **/
 RED.sidebar = (function() {
+    const sidebarLayoutVersion = 1
     const sidebars = {
         primary: {
             id: 'primary',
@@ -32695,7 +32734,8 @@ RED.sidebar = (function() {
             menuToggle: 'menu-item-sidebar',
             minimumWidth: 180,
             maximumWidth: 800,
-            defaultWidth: 300
+            defaultWidth: 300,
+            defaultTopHeight: 0.7
         },
         secondary: {
             id: 'secondary',
@@ -32704,29 +32744,38 @@ RED.sidebar = (function() {
             minimumWidth: 180,
             maximumWidth: 800,
             // Make LH side slightly narrower by default as its the palette that doesn't require a lot of width
-            defaultWidth: 210
+            defaultWidth: 210,
+            defaultTopHeight: 0.5
         }
     }
     const defaultSidebarConfiguration = {
-        primary: ['info','debug','help','config','context'],
-        secondary: ['palette']
+        primary: [ ['info','help','config','context'], ['debug'] ],
+        secondary: [ ['explorer'], ['palette'] ]
     }
 
     const knownTabs = {};
 
     function exportSidebarState () {
         const state = {
-            primary: [],
-            secondary: []
+            primary: [[], []],
+            secondary: [[], []],
+            v: sidebarLayoutVersion
         }
-        sidebars.primary.tabBar.children('button').each(function() {
-            const tabId = $(this).attr('data-tab-id');
-            state.primary.push(tabId);
-        })
-        sidebars.secondary.tabBar.children('button').each(function() {
-            const tabId = $(this).attr('data-tab-id');
-            state.secondary.push(tabId);
-        })
+        function getTabButtons(tabBar) {
+            const result = []
+            tabBar.children('button').each(function() {
+                const tabId = $(this).attr('data-tab-id');
+                if (tabId) {
+                    result.push(tabId);
+                }
+            })
+            return result
+        }
+        state.primary[0] = getTabButtons(sidebars.primary.tabBars.top.container);
+        state.primary[1] = getTabButtons(sidebars.primary.tabBars.bottom.container);
+        state.secondary[0] = getTabButtons(sidebars.secondary.tabBars.top.container);
+        state.secondary[1] = getTabButtons(sidebars.secondary.tabBars.bottom.container);
+
         RED.settings.set('editor.sidebar.state', state)
     }
 
@@ -32758,18 +32807,36 @@ RED.sidebar = (function() {
         let targetTabButtonIndex = -1 // Append to end by default
 
         // Check the saved sidebar state to see if this tab should be added to the primary or secondary sidebar
-        const savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
+        let savedState = RED.settings.get('editor.sidebar.state', defaultSidebarConfiguration)
+        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)
+        }
+        let targetSidebar = null
+        let targetSection = null
         if (savedState) {
-            let targetSidebar = null
             let sidebarState
-            if (savedState.secondary.includes(options.id)) {
+            if (savedState.secondary[0].includes(options.id)) {
                 options.target = 'secondary'
-                sidebarState = savedState.secondary
+                sidebarState = savedState.secondary[0]
                 targetSidebar = sidebars.secondary
-            } else if (savedState.primary.includes(options.id)) {
+                targetSection = 'top'
+            } else if (savedState.secondary[1].includes(options.id)) {
+                options.target = 'secondary'
+                sidebarState = savedState.secondary[1]
+                targetSidebar = sidebars.secondary
+                targetSection = 'bottom'
+            } else if (savedState.primary[0].includes(options.id)) {
+                options.target = 'primary'
+                sidebarState = savedState.primary[0]
+                targetSidebar = sidebars.primary
+                targetSection = 'top'
+            } else if (savedState.primary[1].includes(options.id)) {
                 options.target = 'primary'
-                sidebarState = savedState.primary
+                sidebarState = savedState.primary[1]
                 targetSidebar = sidebars.primary
+                targetSection = 'bottom'              
             }
             if (targetSidebar) {
                 // This tab was found in the saved sidebar state. Now find the target position for the tab button
@@ -32778,10 +32845,13 @@ RED.sidebar = (function() {
         }
 
 
-        const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
+        targetSidebar = targetSidebar || (options.target === 'secondary' ? sidebars.secondary : sidebars.primary);
+        targetSection = targetSection || 'top'
+        options.targetSection = targetSection;
+
         delete options.closeable;
 
-        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.content)
+        options.wrapper = $('<div>',{style:"height:100%"}).appendTo(targetSidebar.sections[targetSection].content)
         options.wrapper.append(options.content);
         options.wrapper.hide();
 
@@ -32790,7 +32860,7 @@ RED.sidebar = (function() {
         }
 
         if (options.toolbar) {
-            targetSidebar.footer.append(options.toolbar);
+            targetSidebar.sections[targetSection].footer.append(options.toolbar);
             $(options.toolbar).hide();
         }
         var id = options.id;
@@ -32810,12 +32880,12 @@ RED.sidebar = (function() {
         knownTabs[options.id] = options;
         options.tabButton = $('<button></button>')
         // Insert the tab button at the correct index
-        if (targetTabButtonIndex === -1 || targetTabButtonIndex >= targetSidebar.tabBar.children().length) {
+        if (targetTabButtonIndex === -1) {
             // Append to end
-            options.tabButton = $('<button></button>').appendTo(targetSidebar.tabBar);
+            targetSidebar.tabBars[targetSection].addButton(options.tabButton)
         } else {
             // Insert before the item at targetTabButtonIndex
-            options.tabButton = $('<button></button>').insertBefore(targetSidebar.tabBar.children().eq(targetTabButtonIndex));
+            targetSidebar.tabBars[targetSection].addButton(options.tabButton, targetTabButtonIndex)
         }
         options.tabButton.attr('data-tab-id', options.id)
 
@@ -32831,15 +32901,22 @@ RED.sidebar = (function() {
                 return
             }
             const targetSidebar = options.target === 'secondary' ? sidebars.secondary : sidebars.primary;
-            if (targetSidebar.activeTab === options.id && RED.menu.isSelected(targetSidebar.menuToggle)) {
+            // 
+            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)
             }
         })
-        if (targetSidebar.content.children().length === 1) {
+        if (targetSidebar.sections[targetSection].content.children().length === 1) {
             RED.sidebar.show(options.id)
         }
+        targetSidebar.resizeSidebarTabBar()
     }
 
     function removeTab(id) {
@@ -32862,47 +32939,148 @@ RED.sidebar = (function() {
         }
     }
 
-    function moveTab(id, srcSidebar, targetSidebar) {
+    function moveTab(id, srcSidebar, srcPosition, targetSidebar, targetPosition) {
         const options = knownTabs[id];
         options.target = targetSidebar.id;
-        $(options.wrapper).appendTo(targetSidebar.content);
+        options.targetSection = targetPosition;
+
+        $(options.wrapper).appendTo(targetSidebar.sections[targetPosition].content);
         if (options.toolbar) {
-            targetSidebar.footer.append(options.toolbar);
+            targetSidebar.sections[targetPosition].footer.append(options.toolbar);
         }
         // Reset the tooltip so its left/right direction is recalculated
         options.tabButtonTooltip.delete()
         options.tabButtonTooltip = RED.popover.tooltip(options.tabButton, options.name, options.action);
 
-        if (targetSidebar.content.children().length === 1) {
+        if (targetSidebar.sections[targetPosition].content.children().length === 1) {
             RED.sidebar.show(options.id)
         }
-        if (srcSidebar.content.children().length === 0) {
-            RED.menu.setSelected(srcSidebar.menuToggle, false);
+        if (srcSidebar.sections[srcPosition].content.children().length === 0 && srcPosition === 'bottom') {
+            srcSidebar.hideSection(srcPosition)
+        } else if (targetSidebar.sections[targetPosition].hidden) {
+            targetSidebar.showSection(targetPosition)
         }
     }
 
     let draggingTabButton = false
+
     function setupSidebarTabs(sidebar) {
         const tabBar = $('<div class="red-ui-sidebar-tab-bar"></div>').addClass('red-ui-sidebar-' + sidebar.direction);
-        tabBar.attr('id', sidebar.container.attr('id') + '-tab-bar')
-        tabBar.data('sidebar', sidebar.id)
         if (sidebar.direction === 'right') {
             tabBar.insertAfter(sidebar.container);
         } else if (sidebar.direction === 'left') {
             tabBar.insertBefore(sidebar.container);
         }
-        tabBar.sortable({
+
+        // TODO: make this an API object, not just a jQuery object
+        sidebar.tabBars = {
+            top: setupTabSection(sidebar, tabBar, 'top'),
+            bottom: setupTabSection(sidebar, tabBar, 'bottom')
+        }
+        sidebar.tabBar = sidebar.tabBars.top.container;
+        sidebar.resizeSidebarTabBar = function () {
+            sidebar.tabBars.top.resizeSidebarTabBar();
+            sidebar.tabBars.bottom.resizeSidebarTabBar();
+        }
+        sidebar.hideSection = function (position) {
+            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[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()
+        }
+    }
+
+    function setupTabSection(sidebar, tabBar, position) {
+        const tabBarButtonsContainer = $('<div class="red-ui-sidebar-tab-bar-buttons"></div>').appendTo(tabBar);
+        const tabOverflowButton = $('<button class="red-ui-sidebar-tab-bar-overflow-button"><i class="fa fa-ellipsis-h"></i></button>').appendTo(tabBarButtonsContainer);
+        tabOverflowButton.hide()
+        tabOverflowButton.on('click', function(evt) {
+            try {
+                const menuOptions = []
+                tabBarButtonsContainer.find('button:not(.red-ui-sidebar-tab-bar-overflow-button)').each(function () {
+                    if ($(this).is(':visible')) {
+                        return
+                    }
+                    const tabId = $(this).attr('data-tab-id')
+                    const tabOptions = knownTabs[tabId]
+                    menuOptions.push({
+                        label: tabOptions.name,
+                        onselect: function() {
+                            RED.sidebar.show(tabId)
+                        }
+                    })
+                })
+                if (menuOptions.length === 0) {
+                    return
+                }
+                const menu = RED.menu.init({ options: menuOptions });
+                menu.attr("id",sidebar.container.attr('id')+"-menu");
+                menu.css({
+                    position: "absolute"
+                })
+                menu.appendTo("body");
+                var elementPos = tabOverflowButton.offset();
+                menu.css({
+                    top: (elementPos.top+tabOverflowButton.height()- menu.height() - 10)+"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(() => {
+                    $(document).on("click.red-ui-sidebar-tabmenu", function(evt) {
+                        $(document).off("click.red-ui-sidebar-tabmenu");
+                        menu.remove();
+                    });
+                }, 0)
+                menu.show();
+            } catch (err) {
+                console.log(err)
+            }
+        })
+        tabBarButtonsContainer.data('sidebar', sidebar.id)
+        tabBarButtonsContainer.data('sidebar-position', position)
+        tabBarButtonsContainer.sortable({
             distance: 10,
             cancel: false,
+            items: "button:not(.red-ui-sidebar-tab-bar-overflow-button)",
             placeholder: "red-ui-sidebar-tab-bar-button-placeholder",
-            connectWith: ".red-ui-sidebar-tab-bar",
+            connectWith: ".red-ui-sidebar-tab-bar-buttons",
             start: function(event, ui) {
-                // Remove the tooltip so it doesn't display unexpectedly whilst dragging
                 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
                 tabBar.css('z-index','inherit')
+                $(".red-ui-sidebar-tab-bar").addClass("red-ui-sidebar-dragging-tab");
             },
             stop: function(event, ui) {
                 // Restore the tooltip
@@ -32913,33 +33091,89 @@ RED.sidebar = (function() {
                 // Save the sidebar state
                 exportSidebarState()
                 tabBar.css('z-index','')
+                $(".red-ui-sidebar-tab-bar").removeClass("red-ui-sidebar-dragging-tab");
             },
             receive: function(event, ui) {
                 // Tab has been moved from one sidebar to another
                 const src = sidebars[ui.sender.data('sidebar')]
                 const dest = sidebars[$(this).data('sidebar')]
+                const srcPosition = ui.sender.data('sidebar-position')
+                const destPosition = $(this).data('sidebar-position')
                 const tabId = ui.item.attr('data-tab-id');
-                moveTab(tabId, src, dest)
+                moveTab(tabId, src, srcPosition, dest, destPosition);
                 if (ui.item.hasClass('selected')) {
-                    const firstTab = src.tabBar.find('button').first().attr('data-tab-id');
+                    const firstTab = src.tabBars[srcPosition].container.find('button').first().attr('data-tab-id');
                     if (firstTab) {
                         RED.sidebar.show(firstTab);
                     }
                 }
+                src.resizeSidebarTabBar();
+                dest.resizeSidebarTabBar();
+
                 RED.sidebar.show(tabId)
             }
         })
-        // $(window).on("resize", function () {
-        //     const lastChild = tabBar.children().last();
-        //     if (lastChild.length > 0) {
-        //         const tabBarHeight = tabBar.height();
-        //         const lastChildBottom = lastChild.position().top + lastChild.outerHeight();
-        //         if (lastChildBottom > tabBarHeight) {
-        //             console.log('overflow')
-        //         }
-        //     }
-        // })
-        return tabBar
+
+        let hasHidden = false
+        const resizeSidebarTabBar  = function () {
+            let tabBarButtonsBottom = tabBarButtonsContainer.position().top + tabBarButtonsContainer.outerHeight();
+            const buttonHeight = tabOverflowButton.outerHeight()
+            // Find the last visible button
+            let bottomButton = tabBarButtonsContainer.children(":visible").last()
+            if (bottomButton.length === 0) {
+                // Nothing visible - bail out
+                return
+            }
+            if (tabBarButtonsBottom < bottomButton.position().top + buttonHeight) {
+                tabOverflowButton.show()
+                let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5;
+                while (tabBarButtonsBottom < tabOverflowButtonBottom) {
+                    const lastVisible = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):visible').last()
+                    if (lastVisible.length === 0) {
+                        // Nothing left to hide
+                        break
+                    }
+                    lastVisible.hide()
+                    tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 1.5;
+                }
+            } else {
+                const hiddenChildren = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden')
+                if (hiddenChildren.length > 0) {
+                    // We may be able to show some more buttons
+                    let tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2;
+                    let shownCount = 0
+                    while (tabBarButtonsBottom > tabOverflowButtonBottom + buttonHeight) {
+                        const firstHidden = tabBarButtonsContainer.children(':not(".red-ui-sidebar-tab-bar-overflow-button"):hidden').first()
+                        if (firstHidden.length === 0) {
+                            // Nothing left to show
+                            break
+                        }
+                        firstHidden.show()
+                        shownCount++
+                        tabOverflowButtonBottom = tabOverflowButton.position().top + buttonHeight * 2;
+                    }
+                    if (hiddenChildren.length - shownCount <= 0) {
+                        // We were able to show all of the hidden buttons
+                        // so hide the overflow button again
+                        tabOverflowButton.hide()
+                    }
+                }
+            }
+        }
+        return {
+            container: tabBarButtonsContainer,
+            addButton: function(button, position) {
+                if (position === undefined || position >= tabBarButtonsContainer.children().length) {
+                    button.insertBefore(tabOverflowButton);
+                } else {
+                    button.insertBefore(tabBarButtonsContainer.children().eq(position));
+                }
+            },
+            clearSelected: function() {
+                tabBarButtonsContainer.children('button').removeClass('selected')
+            },
+            resizeSidebarTabBar
+        }
     }
     function setupSidebarSeparator(sidebar) {
         const separator = $('<div class="red-ui-sidebar-separator"></div>');
@@ -33031,10 +33265,17 @@ RED.sidebar = (function() {
         if (!state) {
             sidebar.container.hide()
             sidebar.separator.hide()
-            sidebar.tabBar.find('button').removeClass('selected')
+            sidebar.tabBars.top.clearSelected()
+            sidebar.tabBars.bottom.clearSelected()
         } else {
             sidebar.container.show()
             sidebar.separator.show()
+            if (sidebar.tabBars.top.active) {
+                sidebar.tabBars.top.container.find('button[data-tab-id="'+sidebar.tabBars.top.active+'"]').addClass('selected')
+            }
+            if (sidebar.tabBars.bottom.active) {
+                sidebar.tabBars.bottom.container.find('button[data-tab-id="'+sidebar.tabBars.bottom.active+'"]').addClass('selected')
+            }
         }
         RED.events.emit("sidebar:resize");
     }
@@ -33044,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.tabBar.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
         }
@@ -33056,23 +33299,30 @@ RED.sidebar = (function() {
             const tabOptions = knownTabs[id];
             if (tabOptions) {
                 const targetSidebar = tabOptions.target === 'secondary' ? sidebars.secondary : sidebars.primary;
-                targetSidebar.content.children().hide();
-                targetSidebar.footer.children().hide();
+                const targetSection = tabOptions.targetSection || 'top'
+                targetSidebar.sections[targetSection].content.children().hide();
+                targetSidebar.sections[targetSection].footer.children().hide();
                 if (tabOptions.onchange) {
                     tabOptions.onchange.call(tabOptions);
                 }
                 $(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)
-                targetSidebar.tabBar.find('button').removeClass('selected')
-                targetSidebar.tabBar.find('button[data-tab-id="'+id+'"]').addClass('selected')
-                targetSidebar.activeTab = 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)
+                }
             }
         }
     }
@@ -33082,13 +33332,93 @@ RED.sidebar = (function() {
     }
 
     function setupSidebar(sidebar) {
+        // Get the appropriate height for the sidebar - as the sidebar will be hidden at this point in time, we need to use
+        // the main-container height as a decent proxy
+        const sidebarHeight = $("#red-ui-main-container").height();
         sidebar.container.addClass("red-ui-sidebar").addClass('red-ui-sidebar-' + sidebar.direction);
         sidebar.container.width(sidebar.defaultWidth);
+        if (sidebar.direction === 'right') {
+            $('<div>',{class:"red-ui-sidebar-shade hide"}).css("z-index", 0).appendTo(sidebar.container);
+        }
+        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);
+
+        let startPosition
+        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()
+            },
+            drag: function(event,ui) {
+                const delta = ui.position.top - startPosition
+                const newTopHeight = startTopSectionHeight + delta
+                const newBottomHeight = startSidebarHeight - newTopHeight
+                if (newTopHeight < 100 || newBottomHeight < 100) {
+                    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) {
+            }
+        });
+
+        // sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
+        
         sidebar.separator = setupSidebarSeparator(sidebar);
-        sidebar.tabBar = setupSidebarTabs(sidebar)
-        sidebar.content = $('<div class="red-ui-sidebar-content"></div>').appendTo(sidebar.container);
-        sidebar.footer =  $('<div class="red-ui-sidebar-footer"></div>').appendTo(sidebar.container);
-        sidebar.shade = $('<div class="red-ui-sidebar-shade hide"></div>').appendTo(sidebar.container);
+        setupSidebarTabs(sidebar)
+        sidebar.resizeSidebar = function () {
+            // Resize sidebar sections as needed
+            const topSectionHeight = sidebar.sections.top.container.outerHeight()
+            if (!sidebar.sections.bottom.hidden) {
+                const bottomSectionHeight = sidebar.sections.bottom.container.outerHeight()
+
+                // Shrink the top section if the bottom section is too small
+                if (bottomSectionHeight < 90 && topSectionHeight > 90) {
+                    sidebar.sections.top.container.outerHeight(topSectionHeight - (90 - bottomSectionHeight));
+                }
+                sidebar.tabBars.top.container.height(sidebar.sections.top.container.outerHeight())
+            // } else {
+            //     sidebar.tabBars.top.container.height(sidebar.sections.top.container.outerHeight() - 60)
+            }
+            // Trigger a resize of the tab bars to handle overflow
+            sidebar.resizeSidebarTabBar()
+            RED.events.emit("sidebar:resize");
+
+        }
+        $(window).on("resize", sidebar.resizeSidebar)
+        if (sidebar.defaultTopHeight > 0) {
+            if (sidebar.defaultTopHeight === 1) {
+                sidebar.hideSection('bottom')
+            } else {
+                sidebar.sections.top.container.outerHeight(sidebarHeight * sidebar.defaultTopHeight);
+            }
+        }
+        sidebar.resizeSidebar()
 
     }
     function init () {
@@ -33115,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');
         })
     }
 
@@ -33457,6 +33788,7 @@ RED.palette = (function() {
             var paletteWidth;
             var paletteTop;
             var dropEnabled;
+            let chartOffset;
             $(d).draggable({
                 helper: 'clone',
                 appendTo: '#red-ui-editor',
@@ -33473,6 +33805,7 @@ RED.palette = (function() {
                     if (activeGroup) {
                         document.getElementById("group_select_"+activeGroup.id).classList.add("red-ui-flow-group-active-hovered");
                     }
+                    chartOffset = chart.offset()
                     RED.view.focus();
                 },
                 stop: function() {
@@ -33490,12 +33823,13 @@ RED.palette = (function() {
                 },
                 drag: function(e,ui) {
                     var paletteNode = getPaletteNode(nt);
-                    console.log(ui.originalPosition.left, paletteNode.offset().left)
+                    // console.log(ui.originalPosition.left, paletteNode.offset().left)
                     // ui.originalPosition.left = paletteNode.offset().left;
                     // console.log(paletteNode.offset())
                     if (dropEnabled) {
-                        mouseX = ui.position.left - paletteWidth + (ui.helper.width()/2) + chart.scrollLeft();
-                        mouseY = ui.position.top - paletteTop + (ui.helper.height()/2) + chart.scrollTop() + 10;
+                        mouseX = ui.offset.left - chartOffset.left + (ui.helper.width()/2) + chart.scrollLeft();
+                        mouseY = ui.offset.top - chartOffset.top + (ui.helper.height()/2) + chart.scrollTop() + 10;
+                        // console.log(mouseX, mouseY)
                         if (!groupTimer) {
                             groupTimer = setTimeout(function() {
                                 var mx = mouseX / RED.view.scale();
@@ -33752,13 +34086,12 @@ RED.palette = (function() {
             content,
             toolbar,
             pinned: true,
-            enableOnEdit: true
+            enableOnEdit: false
         });
 
         $('<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();
 
@@ -33959,10 +34292,6 @@ RED.sidebar.info = (function() {
 
         var stackContainer = $("<div>",{class:"red-ui-sidebar-info-stack"}).appendTo(content);
 
-        var outlinerPanel = $("<div>").css({
-            "overflow": "hidden",
-            "height": "calc(70%)"
-        }).appendTo(stackContainer);
         var propertiesPanel = $("<div>").css({
             "overflow":"hidden",
             "height":"100%",
@@ -33978,7 +34307,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderCopyLink = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-link"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '32px'
         }).on("click", function(evt) {
             RED.actions.invoke('core:copy-item-url',selectedObject)
@@ -33987,7 +34316,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderHelp = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-book"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '56px'
         }).on("click", function(evt) {
             evt.preventDefault();
@@ -34000,7 +34329,7 @@ RED.sidebar.info = (function() {
 
         propertiesPanelHeaderReveal = $('<button type="button" class="red-ui-button red-ui-button-small"><i class="fa fa-search"></button>').css({
             position: 'absolute',
-            top: '12px',
+            top: '6px',
             right: '8px'
         }).on("click", function(evt) {
             evt.preventDefault();
@@ -34019,17 +34348,16 @@ RED.sidebar.info = (function() {
         }).appendTo(propertiesPanel);
 
 
-        panels = RED.panels.create({container: stackContainer})
-        panels.ratio(0.6);
-        RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
-
+        // panels = RED.panels.create({container: stackContainer})
+        // panels.ratio(0.6);
+        // RED.sidebar.info.outliner.build().appendTo(outlinerPanel);
 
         RED.sidebar.addTab({
             id: "info",
             // target: "secondary",
             label: RED._("sidebar.info.label"),
             name: RED._("sidebar.info.name"),
-            icon: "red/images/explorer.svg",
+            iconClass: "fa fa-info",
             action:"core:show-info-tab",
             content: content,
             pinned: true,
@@ -34537,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__")
                 ]
@@ -34550,6 +34880,7 @@ RED.sidebar.info = (function() {
                 id: "__global__",
                 flow: "__global__",
                 label: RED._("sidebar.info.globalConfig"),
+                expandOnLabel: true,
                 types: {},
                 children: [
                     getEmptyItem("__global__")
@@ -34561,7 +34892,6 @@ RED.sidebar.info = (function() {
         subflowList = flowData[1];
         globalConfigNodes = flowData[2];
         configNodeTypes = { __global__: globalConfigNodes};
-
         return flowData;
     }
 
@@ -34740,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) {
@@ -34756,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) {
@@ -34815,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") {
@@ -35104,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) {
@@ -35204,9 +35539,30 @@ RED.sidebar.info = (function() {
     function onSelectionChanged(selection) {
         // treeList.treeList('clearSelection');
     }
+    function show() {
+        RED.sidebar.show("explorer");
+    }
+    function init() {
+        const content = build()
+
+        RED.actions.add("core:show-explorer-tab",show);
+
+
+        RED.sidebar.addTab({
+            id: "explorer",
+            // target: "secondary",
+            label: 'Explorer', // RED._("sidebar.info.label"),
+            name: 'Explorer', //RED._("sidebar.info.name"),
+            icon: "red/images/explorer.svg",
+            action:"core:show-explorer-tab",
+            content: content,
+            pinned: true,
+            enableOnEdit: true
+        });
+    }
 
     return {
-        build: build,
+        init,
         search: function(val) {
             searchInput.searchBox('value',val)
         },
@@ -35371,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);
@@ -46846,14 +47203,14 @@ RED.eventLog = (function() {
     }
     function showTray(options) {
         var el = $('<div class="red-ui-tray"></div>');
-        // `editor-tray-header` is deprecated - use red-ui-tray-body instead
-        var header = $('<div class="red-ui-tray-header editor-tray-header"></div>').appendTo(el);
-        var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(el);
-        // `editor-tray-body` is deprecated - use red-ui-tray-body instead
-        var body = $('<div class="red-ui-tray-body editor-tray-body"></div>').appendTo(bodyWrapper);
-        // `editor-tray-footer` is deprecated - use red-ui-tray-footer instead
-        var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(el);
         var resizer = $('<div class="red-ui-tray-resize-handle"></div>').appendTo(el);
+        var wrapper = $('<div class="red-ui-tray-wrapper"></div>').appendTo(el);
+        
+        var header = $('<div class="red-ui-tray-header"></div>').appendTo(wrapper);
+        var bodyWrapper = $('<div class="red-ui-tray-body-wrapper"></div>').appendTo(wrapper);
+        var body = $('<div class="red-ui-tray-body"></div>').appendTo(bodyWrapper);
+        // `editor-tray-footer` is deprecated - use red-ui-tray-footer instead
+        var footer = $('<div class="red-ui-tray-footer"></div>').appendTo(wrapper);
         // var growButton = $('<a class="red-ui-tray-resize-button" style="cursor: w-resize;"><i class="fa fa-angle-left"></i></a>').appendTo(resizer);
         // var shrinkButton = $('<a class="red-ui-tray-resize-button" style="cursor: e-resize;"><i style="margin-left: 1px;" class="fa fa-angle-right"></i></a>').appendTo(resizer);
         if (options.title) {
@@ -46942,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) {
@@ -47015,8 +47371,8 @@ RED.eventLog = (function() {
     }
 
     function handleWindowResize() {
-        let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() + $("#red-ui-sidebar-separator").outerWidth() : 0;
-        $("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar-tab-bar").outerWidth() + 1);
+        let sidebarWidth = $("#red-ui-sidebar").is(":visible") ? $("#red-ui-sidebar").outerWidth() : 0;
+        $("#red-ui-editor-stack").css('right', sidebarWidth + $("#red-ui-sidebar + .red-ui-sidebar-tab-bar").outerWidth() + 4);
         if (stack.length > 0) {
             var tray = stack[stack.length-1];
             if (tray.options.maximized || tray.width > $("#red-ui-editor-stack").position().left-8) {
@@ -47041,11 +47397,11 @@ RED.eventLog = (function() {
     function raiseTrayZ() {
         setTimeout(function(){
             $('#red-ui-editor-stack').css("zIndex","13");
-        },300);
+        },100);
     }
     //lower tray z-index back to original place for correct slide animation (related to fix for editor context menu clipped by sidebar)
     function lowerTrayZ(){
-        $('#red-ui-editor-stack').css("zIndex","9");
+        $('#red-ui-editor-stack').css("zIndex","11");
     }
 
     return {
@@ -47062,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;
                 }
@@ -47099,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;
             }
@@ -47143,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();
@@ -48844,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;
@@ -49452,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++;
@@ -49733,7 +50086,8 @@ RED.notifications = (function() {
                     showPersistent();
                 })
         },
-        notify: notify
+        notify: notify,
+        shade: shade
     }
 })();
 ;/**
@@ -49787,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||"";
 
@@ -50005,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,
@@ -50259,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();
@@ -50283,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','');
@@ -50317,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();
@@ -50383,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();
@@ -50419,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;
@@ -50766,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() {
@@ -50874,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();
             }
@@ -50908,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','');
@@ -50938,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 {
@@ -54729,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");
@@ -55151,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");