fix: Phoenix sidebar resize broken and redundant space reservation in title bar in desktop apps

src/document/DocumentCommandHandlers.js

@@ -347,19 +347,24 @@ define(function (require, exports, module) {
             _$dirtydot.css("visibility", "hidden");
         }
 
-        // Set _$titleWrapper to a fixed width just large enough to accommodate _$title. This seems equivalent to what
-        // the browser would do automatically, but the CSS trick we use for layout requires _$titleWrapper to have a
-        // fixed width set on it (see the "#titlebar" CSS rule for details).
-        _$titleWrapper.css("width", "");
-        var newWidth = _$title.width();
-        _$titleWrapper.css("width", newWidth);
-
-        // Changing the width of the title may cause the toolbar layout to change height, which needs to resize the
-        // editor beneath it (toolbar changing height due to window resize is already caught by EditorManager).
-        var newToolbarHeight = _$titleContainerToolbar.height();
-        if (_lastToolbarHeight !== newToolbarHeight) {
-            _lastToolbarHeight = newToolbarHeight;
-            WorkspaceManager.recomputeLayout();
+        if (!Phoenix.isNativeApp) {
+            // In the native app the title-wrapper is display:none (the OS window titlebar
+            // shows the file name), so none of this layout work applies there.
+
+            // Set _$titleWrapper to a fixed width just large enough to accommodate _$title. This seems equivalent
+            // to what the browser would do automatically, but the CSS trick we use for layout requires
+            // _$titleWrapper to have a fixed width set on it (see the "#titlebar" CSS rule for details).
+            _$titleWrapper.css("width", "");
+            const newWidth = _$title.width();
+            _$titleWrapper.css("width", newWidth);
+
+            // Changing the width of the title may cause the toolbar layout to change height, which needs to resize
+            // the editor beneath it (toolbar changing height due to window resize is already caught by EditorManager).
+            const newToolbarHeight = _$titleContainerToolbar.height();
+            if (_lastToolbarHeight !== newToolbarHeight) {
+                _lastToolbarHeight = newToolbarHeight;
+                WorkspaceManager.recomputeLayout();
+            }
         }
 
 

src/extensionsIntegrated/Terminal/main.js

@@ -885,8 +885,15 @@ define(function (require, exports, module) {
                 id: "terminal-toolbar-button",
                 href: "#",
                 title: Strings.CMD_VIEW_TERMINAL
-            })
-            .insertBefore("#app-drawer-button");
+            });
+        // The profile button (added externally by phoenix-pro) must stay at the
+        // very bottom of the toolbar, and it may or may not exist yet at appReady.
+        const $profileBtn = $("#user-profile-button");
+        if ($profileBtn.length) {
+            $btn.insertBefore($profileBtn);
+        } else {
+            $btn.appendTo($("#main-toolbar .bottom-buttons"));
+        }
 
         $btn.on("click", function () {
             if (WorkspaceManager.isInDesignMode()) {

src/index.html

@@ -1045,7 +1045,11 @@
             <a id="update-notification" href="#" class="forced-hidden"></a>
         </div>
         <div class="bottom-buttons">
-            <a id="app-drawer-button" href="#"></a>
+            <!-- app drawer button hidden for now - need to decide a new icon as the current
+                 one can be confused with the styles bar layout button. if bringing this back,
+                 also uncomment its tests in MainViewManager-integ-test.js and
+                 CentralControlBar-integ-test.js (search for app-drawer-button) -->
+            <!-- <a id="app-drawer-button" href="#"></a> -->
         </div>
     </div>
 </div>

src/styles/brackets_patterns_override.less

@@ -190,8 +190,8 @@ a:focus {
     }
 
     body.tauri & {
-        .title, .dirty-dot {
-            // In tauri, the window title bar shows the file name fully. so this isn't required.
+        display: flow-root;
+        .title-wrapper {
             display: none;
         }
     }

src/utils/Resizer.js

@@ -597,7 +597,23 @@
                     $resizeShield.off("mousedown");
                     $resizeShield.remove();
                     animationRequest = null;
-                    toggle($element);
+
+                    // The shield covers the whole window, so only treat this press as
+                    // the second click of a double click if it landed on/near the
+                    // resizer; stray clicks elsewhere just dismiss the shield.
+                    const buffer = 8;
+                    const resizerOffset = $resizer.offset();
+                    let nearResizer;
+                    if (direction === DIRECTION_HORIZONTAL) {
+                        nearResizer = e.pageX >= resizerOffset.left - buffer &&
+                            e.pageX <= resizerOffset.left + $resizer.outerWidth() + buffer;
+                    } else {
+                        nearResizer = e.pageY >= resizerOffset.top - buffer &&
+                            e.pageY <= resizerOffset.top + $resizer.outerHeight() + buffer;
+                    }
+                    if (nearResizer) {
+                        toggle($element);
+                    }
                 });
             }
 
@@ -616,18 +632,25 @@
 
                     isResizing = false;
 
-                    if (resizeStarted) {
-                        $element.trigger(EVENT_PANEL_RESIZE_END, [elementSize]);
-                    }
-
-                    // We wait 300ms to remove the resizer container to capture a mousedown
-                    // on the container that would account for double click
-                    window.setTimeout(function () {
+                    function removeShield() {
                         $(window.document).off("mousemove", onMouseMove);
                         $resizeShield.off("mousedown");
                         $resizeShield.remove();
                         animationRequest = null;
-                    }, 300);
+                    }
+
+                    if (resizeStarted) {
+                        $element.trigger(EVENT_PANEL_RESIZE_END, [elementSize]);
+                        // A double click never includes a drag between its two presses,
+                        // so after a real resize the shield isn't needed to catch a
+                        // second click — remove it right away so it doesn't swallow
+                        // clicks elsewhere in the window.
+                        removeShield();
+                    } else {
+                        // We wait 300ms to remove the resizer container to capture a mousedown
+                        // on the container that would account for double click
+                        window.setTimeout(removeShield, 300);
+                    }
                 }
             }
 

test/spec/CentralControlBar-integ-test.js

@@ -1035,6 +1035,9 @@ define(function (require, exports, module) {
                 }
             });
 
+            // app-drawer-button is commented out in index.html for now,
+            // uncomment these two tests when it comes back
+            /*
             it("should exit design mode and open the tools bottom panel when #app-drawer-button is clicked in design mode", async function () {
                 await enterDesignMode();
                 expect(WorkspaceManager.isInDesignMode()).toBe(true);
@@ -1056,6 +1059,7 @@ define(function (require, exports, module) {
                     "tools bottom panel to become visible", 3000);
                 expect(WorkspaceManager.isInDesignMode()).toBe(false);
             });
+            */
 
             it("should exit design mode before mounting Find in Files bar", async function () {
                 await enterDesignMode();

test/spec/MainViewManager-integ-test.js

@@ -1153,6 +1153,9 @@ define(function (require, exports, module) {
                 WorkspaceManager.destroyBottomPanel("focusTestPanel");
             });
 
+            // app-drawer-button is commented out in index.html for now,
+            // uncomment this test when it comes back
+            /*
             it("should app-drawer-button toggle the default panel", async function () {
                 panel1.hide();
                 panel2.hide();
@@ -1170,6 +1173,7 @@ define(function (require, exports, module) {
                 _$("#app-drawer-button").click();
                 expect(defaultPanel.isVisible()).toBeFalse();
             });
+            */
 
             it("should escape collapse bottom panel regardless of canBeShown", async function () {
                 panel1.show();
@@ -1416,6 +1420,9 @@ define(function (require, exports, module) {
             });
         });
 
+        // app-drawer-button is commented out in index.html for now,
+        // uncomment this describe when it comes back
+        /*
         describe("Quick Access panel (app drawer button)", function () {
             const DEFAULT_PANEL_ID = "workspace.defaultPanel";
 
@@ -1485,5 +1492,6 @@ define(function (require, exports, module) {
                 await CommandManager.execute(Commands.VIEW_TOGGLE_PROBLEMS);
             });
         });
+        */
     });
 });