perf: preserve sidebar layout across hide/show to make expand near-instant

The CCB sidebar-toggle routed through `$sidebar.hide()` → `display:none`,
which Chromium handles by destroying the element's layout tree. On
re-show, the browser has to rebuild layout + paint for the entire
sidebar subtree — for the AI chat panel with a large history
(>1k messages) that was ~750ms of synchronous work per toggle, and
scrollTop on the messages container was zeroed along the way.

Add an opt-in visibility-based hide mode to Resizer: when an element
has the `layout-preserve-hide` class, Resizer toggles a `layout-hidden`
class (which applies `visibility: hidden; pointer-events: none`) instead
of calling `$element.hide()` / `$element.show()`. The element's layout
object stays alive across the toggle, so descendants keep their scroll
positions and `content-visibility` caches, and re-show has no layout
rebuild to do.

`Resizer.isVisible` and the drag-path `:visible` checks were updated to
consult the new class so toggle() / drag-to-reopen still work correctly.
Four callers that read `$sidebar.is(":visible")` were switched to
`SidebarView.isVisible()` (which delegates to the updated Resizer path),
since jQuery's `:visible` can't distinguish a visibility-hidden element
from a shown one.

Measured with a 1098-message AI chat (~10k DOM nodes): expand time on
the sidebar toggle dropped from 752ms → 49.7ms (~15x), scrollTop drift
is 0. Existing suites (mainview:CentralControlBar 50/50, mainview:SidebarTabs
37/37, integration:Navigation 6/6) all green.

Author: abose

src/document/DocumentCommandHandlers.js

@@ -62,6 +62,7 @@ define(function (require, exports, module) {
         NodeUtils           = require("utils/NodeUtils"),
         ChangeHelper        = require("editor/EditorHelper/ChangeHelper"),
         SidebarTabs         = require("view/SidebarTabs"),
+        SidebarView         = require("project/SidebarView"),
         _                   = require("thirdparty/lodash");
 
     const KernalModeTrust = window.KernalModeTrust;
@@ -1954,7 +1955,7 @@ define(function (require, exports, module) {
     function handleShowInTree() {
         let activeFile = MainViewManager.getCurrentlyViewedFile(MainViewManager.ACTIVE_PANE);
         if(activeFile){
-            if (!$("#sidebar").is(":visible")) {
+            if (!SidebarView.isVisible()) {
                 CommandManager.execute(Commands.VIEW_HIDE_SIDEBAR);
             }
             SidebarTabs.setActiveTab(SidebarTabs.SIDEBAR_TAB_FILES);

src/index.html

@@ -905,7 +905,7 @@
 <div class="main-view forced-hidden">
     <div id="notificationUIDefaultAnchor" href="#">
     </div>
-    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
+    <div id="sidebar" class="sidebar panel quiet-scrollbars horz-resizable right-resizer collapsible layout-preserve-hide" data-minsize="0" data-maxsize="80%" data-forceleft=".content">
         <div id="mainNavBar">
             <div id="mainNavBarLeft">
                 <div id="newProject" class="new-project-btn btn-alt-quiet"></div>

src/project/SidebarView.js

@@ -251,7 +251,7 @@ define(function (require, exports, module) {
 
         // AppInit.htmlReady in utils/Resizer executes before, so it's possible that the sidebar
         // is collapsed before we add the event. Check here initially
-        if (!$sidebar.is(":visible")) {
+        if (!isVisible()) {
             $sidebar.trigger("panelCollapsed");
         }
 

src/styles/brackets.less

@@ -1382,6 +1382,15 @@ a, img {
     cursor: col-resize;
 }
 
+/* Resizer.js visibility-preserving hide: elements with .layout-preserve-hide
+   get this class toggled instead of `display: none`, so their descendants
+   keep their layout objects (and scrollTop / content-visibility caches)
+   across collapse/expand. */
+.layout-preserve-hide.layout-hidden {
+    visibility: hidden !important;
+    pointer-events: none !important;
+}
+
 .working-set-header-title{
     font-size: 15px;
 }

src/utils/Resizer.js

@@ -178,7 +178,7 @@ define(function (require, exports, module) {
      * @param {DOMNode} element Html element to toggle
      */
     function toggle(element) {
-        if ($(element).is(":visible")) {
+        if (isVisible(element)) {
             hide(element);
         } else {
             show(element);
@@ -217,7 +217,14 @@ define(function (require, exports, module) {
      * @return {boolean} true if element is visible, false if it is not visible
      */
     function isVisible(element) {
-        return $(element).is(":visible");
+        var $el = $(element);
+        if ($el.hasClass("layout-preserve-hide")) {
+            // Element opts out of `display: none` on hide (to keep layout alive
+            // so scrollTop / content-visibility cache survive the toggle). jQuery's
+            // `:visible` still returns true in that case, so consult our own flag.
+            return !$el.hasClass("layout-hidden");
+        }
+        return $el.is(":visible");
     }
 
     function _isPercentage(value) {
@@ -422,7 +429,13 @@ define(function (require, exports, module) {
             // the resizer, the size of the element should be 0, so we restore size in preferences
             resizeElement(elementSize, contentSize);
 
-            $element.show();
+            if ($element.hasClass("layout-preserve-hide")) {
+                // Keep display unchanged — just un-hide via class. The element's
+                // layout tree was preserved, so no reflow avalanche here.
+                $element.removeClass("layout-hidden");
+            } else {
+                $element.show();
+            }
             elementPrefs.visible = true;
 
             if (collapsible) {
@@ -451,7 +464,13 @@ define(function (require, exports, module) {
                 elementSize     = elementSizeFunction.apply($element),
                 resizerSize     = elementSizeFunction.apply($resizer);
 
-            $element.hide();
+            if ($element.hasClass("layout-preserve-hide")) {
+                // Visually hide but keep the layout object alive so descendants
+                // retain scrollTop and content-visibility caches across toggles.
+                $element.addClass("layout-hidden");
+            } else {
+                $element.hide();
+            }
             elementPrefs.visible = false;
             if (collapsible) {
                 $resizer.insertBefore($element);
@@ -472,7 +491,7 @@ define(function (require, exports, module) {
         $resizer.on("mousedown.resizer", function (e) {
             var $resizeShield   = $("<div class='resizing-container " + direction + "-resizing' />"),
                 startPosition   = e[directionProperty],
-                startSize       = $element.is(":visible") ? elementSizeFunction.apply($element) : 0,
+                startSize       = isVisible($element) ? elementSizeFunction.apply($element) : 0,
                 newSize         = startSize,
                 previousSize    = startSize,
                 baseSize        = 0,
@@ -502,7 +521,7 @@ define(function (require, exports, module) {
                 if (newSize !== previousSize) {
                     previousSize = newSize;
 
-                    if ($element.is(":visible")) {
+                    if (isVisible($element)) {
                         if (collapsible && newSize < 10) {
                             toggle($element);
                             elementSizeFunction.apply($element, [0]);
@@ -579,7 +598,7 @@ define(function (require, exports, module) {
                 if (isResizing) {
 
                     var elementSize	= elementSizeFunction.apply($element);
-                    if ($element.is(":visible")) {
+                    if (isVisible($element)) {
                         elementPrefs.size = elementSize;
                         if ($resizableElement.length) {
                             elementPrefs.contentSize = contentSizeFunction.apply($resizableElement);
@@ -651,7 +670,7 @@ define(function (require, exports, module) {
     }
 
     function onWindowResize(e) {
-        if ($sideBar.css("display") === "none") {
+        if (!isVisible($sideBar)) {
             return;
         }
 

src/view/CentralControlBar.js

@@ -25,6 +25,7 @@ define(function (require, exports, module) {
     const Commands          = require("command/Commands");
     const Strings           = require("strings");
     const WorkspaceManager  = require("view/WorkspaceManager");
+    const SidebarView       = require("project/SidebarView");
 
     const BAR_WIDTH = 30;
 
@@ -44,7 +45,7 @@ define(function (require, exports, module) {
         // and rendered width can diverge mid-drag, and outerWidth has returned the
         // uncapped style value in some frames which left CCB / main-toolbar stuck
         // at stale offsets.
-        if (!$sidebar || !$sidebar.is(":visible")) {
+        if (!$sidebar || !SidebarView.isVisible()) {
             return 0;
         }
         return $sidebar[0].offsetWidth || 0;
@@ -248,7 +249,7 @@ define(function (require, exports, module) {
         if (!$btn.length) {
             return;
         }
-        const isVisible = $("#sidebar").is(":visible");
+        const isVisible = SidebarView.isVisible();
         $btn.find("i").attr("class", isVisible ? "fa-solid fa-angles-left" : "fa-solid fa-angles-right");
     }