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

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();
@@ -13308,6 +13309,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;
@@ -31072,10 +31080,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 +31149,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() + 2,
+                "right": 4,
                 zIndex: 1
             }).addClass('red-ui-navigator-container').appendTo("#red-ui-workspace").hide();
             navBox = d3.select(navContainer[0])
@@ -31149,6 +31159,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 +31201,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",
@@ -32695,7 +32706,8 @@ RED.sidebar = (function() {
             menuToggle: 'menu-item-sidebar',
             minimumWidth: 180,
             maximumWidth: 800,
-            defaultWidth: 300
+            defaultWidth: 300,
+            defaultTopHeight: 0.7
         },
         secondary: {
             id: 'secondary',
@@ -32704,29 +32716,37 @@ 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: 1
         }
     }
     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: [[], []]
         }
-        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 +32778,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 (true || typeof savedState.primary[0] === 'string' || typeof savedState.secondary[0] === 'string') {
+            // This is a beta.0 format. Reset it for beta.1
+            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[0]
+                targetSidebar = sidebars.secondary
+                targetSection = 'top'
+            } else if (savedState.secondary[1].includes(options.id)) {
                 options.target = 'secondary'
-                sidebarState = savedState.secondary
+                sidebarState = savedState.secondary[1]
                 targetSidebar = sidebars.secondary
-            } else if (savedState.primary.includes(options.id)) {
+                targetSection = 'bottom'
+            } else if (savedState.primary[0].includes(options.id)) {
                 options.target = 'primary'
-                sidebarState = savedState.primary
+                sidebarState = savedState.primary[0]
                 targetSidebar = sidebars.primary
+                targetSection = 'top'
+            } else if (savedState.primary[1].includes(options.id)) {
+                options.target = '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 +32816,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 +32831,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 +32851,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 +32872,17 @@ 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)) {
                 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 +32905,133 @@ 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.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.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.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: (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 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 +33042,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 * 1.5) {
+                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 +33216,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");
     }
@@ -33046,7 +33238,7 @@ RED.sidebar = (function() {
                 const sidebar = sidebars[sidebarKey];
                 let lastTabId = lastSessionSelectedTabs[sidebarKey];
                 if (!lastTabId) {
-                    lastTabId = sidebar.tabBar.children('button').first().attr('data-tab-id');
+                    lastTabId = sidebar.tabBars.top.container.children('button').first().attr('data-tab-id');
                 }
                 showSidebar(lastTabId, true)
             })
@@ -33056,8 +33248,9 @@ 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);
                 }
@@ -33066,9 +33259,10 @@ RED.sidebar = (function() {
                     $(tabOptions.toolbar).show();
                 }
                 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
+                // 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);
@@ -33082,13 +33276,88 @@ 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.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.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
+        sidebar.sectionsSeparator.draggable({
+            axis: "y",
+            containment: sidebar.container,
+            scroll: false,
+            start:function(event,ui) {
+                startPosition = 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 += delta
+                    return
+                }
+                sidebar.sections.top.container.outerHeight(startTopSectionHeight + delta)
+                sidebar.tabBars.top.container.outerHeight(startTopTabSectionHeight + delta)
+                ui.position.top -= delta
+                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 () {
@@ -33457,6 +33726,7 @@ RED.palette = (function() {
             var paletteWidth;
             var paletteTop;
             var dropEnabled;
+            let chartOffset;
             $(d).draggable({
                 helper: 'clone',
                 appendTo: '#red-ui-editor',
@@ -33473,6 +33743,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 +33761,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,7 +34024,7 @@ 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");
@@ -33959,10 +34231,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 +34246,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 +34255,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 +34268,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 +34287,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,
@@ -35204,9 +35471,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)
         },
@@ -46846,14 +47134,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) {
@@ -47015,8 +47303,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 +47329,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 {