feat(design-mode): toolbar-go-live in design mode exits to LP-visible

Clicking #toolbar-go-live while in design mode now exits design mode
and leaves Live Preview open, instead of hiding LP and dropping back to
pure code mode. Outside design mode the button still toggles LP as
before.

Implemented as a capture-phase click listener on #toolbar-go-live that
stops propagation when editorCollapsed is true and calls
_setEditorCollapsed(false, { keepLivePreviewOpen: true }), forcing the
exit path to keep LP regardless of the entry-state snapshot.

Section-6 tests now cover both branches: in design mode the click
exits with LP visible at LP width; outside design mode the click hides
LP normally. Uses native el.click() so the capture-phase listener
actually fires (jQuery's synthetic .trigger("click") would skip it).

Author: abose

src/view/CentralControlBar.js

@@ -275,10 +275,15 @@ define(function (require, exports, module) {
             // exit into pure-code mode by closing it again. Snapshot the
             // entry state before _restoreExpandedLayout resets it.
             // skipToolbarRestore is already the LP-just-closed path, so
-            // don't double-close in that case. _restoreExpandedLayout runs
-            // first so our !important geometry overrides are cleared before
-            // WorkspaceManager resizes #main-toolbar to the no-panel state.
+            // don't double-close in that case. opts.keepLivePreviewOpen
+            // is the "intercepted #toolbar-go-live click" path — caller
+            // wants LP to stay regardless of entry state. _restoreExpandedLayout
+            // runs first so our !important geometry overrides are cleared
+            // before WorkspaceManager resizes #main-toolbar to the no-panel
+            // state.
+            const keepLivePreviewOpen = !!(opts && opts.keepLivePreviewOpen);
             const shouldCloseLivePreview = !skipToolbarRestore &&
+                !keepLivePreviewOpen &&
                 !livePreviewWasOpen &&
                 _isLivePreviewOpen();
             _restoreExpandedLayout(shouldCloseLivePreview ? true : skipToolbarRestore);
@@ -337,6 +342,25 @@ define(function (require, exports, module) {
         $("#ccbUndoBtn").attr("title", Strings.CMD_UNDO);
         $("#ccbRedoBtn").attr("title", Strings.CMD_REDO);
         $("#ccbSaveBtn").attr("title", Strings.CMD_FILE_SAVE);
+
+        // Intercept clicks on #toolbar-go-live while in design mode: instead
+        // of letting the live-preview module hide LP (the default toggle
+        // behaviour), we exit design mode and keep LP visible. Outside
+        // design mode the button continues to toggle LP normally — we only
+        // act when `editorCollapsed` is true. Capture phase + stopImmediate-
+        // Propagation guarantees we run before the live-preview module's
+        // jQuery click handler.
+        const goLiveBtn = document.getElementById("toolbar-go-live");
+        if (goLiveBtn) {
+            goLiveBtn.addEventListener("click", function (e) {
+                if (!editorCollapsed) {
+                    return;
+                }
+                e.stopImmediatePropagation();
+                e.preventDefault();
+                _setEditorCollapsed(false, { keepLivePreviewOpen: true });
+            }, true /* useCapture */);
+        }
         _syncLeftPositions();
 
         // While the sidebar is being dragged we only reposition CCB / main-toolbar.

test/spec/CentralControlBar-integ-test.js

@@ -654,27 +654,41 @@ define(function (require, exports, module) {
             });
         });
 
-        describe("6. Exit triggered by hiding live preview", function () {
+        describe("6. #toolbar-go-live click in design mode", function () {
 
-            it("should exit design mode, hide LP, and shrink main-toolbar to the icon-bar width when #toolbar-go-live is clicked in design mode", async function () {
+            it("should exit design mode and keep Live Preview visible when #toolbar-go-live is clicked in design mode", async function () {
                 await openLivePreview();
                 await enterDesignMode();
                 expect(WorkspaceManager.isInDesignMode()).toBe(true);
                 expect(livePanel().isVisible()).toBe(true);
 
-                _$("#toolbar-go-live").trigger("click");
+                // Native click — CCB intercepts via a capture-phase listener,
+                // which jQuery's `.trigger("click")` would not exercise.
+                _$("#toolbar-go-live")[0].click();
 
-                // LP hides → visible to the user.
-                await awaitsFor(function () { return !livePanel().isVisible(); },
-                    "live preview to hide", 5000);
-                // And the editor chrome comes back — design mode ends.
+                // Design mode ends — editor chrome comes back.
                 await awaitsFor(function () { return !WorkspaceManager.isInDesignMode(); },
-                    "design mode to deactivate after LP close", 5000);
+                    "design mode to deactivate after toolbar-go-live click", 5000);
+                // LP should remain open — the click in design mode must NOT hide it.
+                expect(livePanel().isVisible()).toBe(true);
 
-                // Main-toolbar should end up at the icon-bar-only width (its no-panel state).
+                // Main-toolbar should be at a real LP-panel width (well above
+                // just the icon-bar width).
                 const iconsW = _$("#plugin-icons-bar").outerWidth();
                 const toolbarW = _$("#main-toolbar").outerWidth();
-                expect(Math.abs(toolbarW - iconsW)).toBeLessThan(3);
+                expect(toolbarW).toBeGreaterThan(iconsW + 50);
+            });
+
+            it("should toggle Live Preview off normally when #toolbar-go-live is clicked outside design mode", async function () {
+                await openLivePreview();
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+                expect(livePanel().isVisible()).toBe(true);
+
+                _$("#toolbar-go-live")[0].click();
+
+                await awaitsFor(function () { return !livePanel().isVisible(); },
+                    "live preview to hide on toolbar-go-live click", 5000);
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
             });
         });