feat(design-mode): exit to pure-code mode when LP wasn't open at entry

src/extensionsIntegrated/Phoenix/phoenix-tour.js

@@ -123,6 +123,8 @@ define(function (require, exports, module) {
 
     function _setText(text) {
         if ($overlay) {
+            // `text` may include `\n` for multi-line steps; CSS uses
+            // `white-space: pre-line` to render those line breaks.
             $overlay.find(".phoenix-tour-text").text(text);
         }
     }

src/htmlContent/about-dialog.html

@@ -16,9 +16,10 @@ <h2>{{APP_NAME_ABOUT_BOX}}</h2>
                   {{/BUILD_TIMESTAMP}}
                 </p>
                 <p class="dialog-message">{{{Strings.ABOUT_RELEASE_CREDITS}}}
+                    <a href="https://github.com/abose" target="_blank" rel="noopener" >Arun Bose</a>,&nbsp;
+                    <a href="https://github.com/charlypa" target="_blank" rel="noopener" >Charly P Abraham</a>,&nbsp;
                     <a href="https://github.com/devvaannsh" target="_blank" rel="noopener" >Devansh Agarwal</a>,&nbsp;
-                    <a href="https://github.com/abose" target="_blank" rel="noopener" >Arun Bose</a><span>,&nbsp;
-                    <a href="https://github.com/charlypa" target="_blank" rel="noopener" >Charly P Abraham</a>
+                    <a href="https://github.com/Electrofist" target="_blank" rel="noopener" >Krrish Parmar</a>
                 </p>
 
                 <p class="dialog-message"><!-- $NON-NLS$ -->Copyright 2021 - present <a href="https://core.ai">Core.ai</a> and its licensors. All rights reserved.</p>

src/nls/root/strings.js

@@ -1670,7 +1670,7 @@ define({
     "GUIDED_LIVE_PREVIEW_POPOUT": "Click this button to popout live preview to a new tab. </br> <a href='#' style='float:right;'>ok</a>",
     // Phoenix onboarding tour (one-shot, app-lifetime)
     "PHOENIX_TOUR_DESIGN_MODE": "Click here to enter Design Mode. Go full-screen and edit your page visually.",
-    "PHOENIX_TOUR_AI_PANEL": "Click here to open the AI panel",
+    "PHOENIX_TOUR_AI_PANEL": "Design layouts, fix bugs, and build faster with AI. Click here to open the AI panel",
     "PHOENIX_TOUR_NEW_PROJECT": "Open or create a new project from here",
     "PHOENIX_TOUR_STEP_OF": "{0} of {1}",
     "PHOENIX_TOUR_NEXT_BTN": "Next",

src/styles/Extn-PhoenixTour.less

@@ -117,6 +117,7 @@
 
 .phoenix-tour-text {
     display: block;
+    white-space: pre-line;
 }
 
 .phoenix-tour-actions {

src/view/CentralControlBar.js

@@ -271,7 +271,25 @@
             }
             _applyCollapsedLayout();
         } else {
-            _restoreExpandedLayout(skipToolbarRestore);
+            // If live preview was NOT open before we entered design mode,
+            // 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. 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);
+            if (shouldCloseLivePreview) {
+                CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW);
+            }
         }
     }
 
@@ -324,6 +342,25 @@
         $("#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

@@ -570,11 +570,19 @@ define(function (require, exports, module) {
                     "sidebar to settle at baseline 200px", 2000);
             });
 
-            it("should leave Live Preview open after exit", async function () {
+            it("should leave Live Preview open after exit when LP was already open at entry", async function () {
+                // Mirror of the "LP was opened by the toggle" test below: when
+                // the user already had LP open, exiting design mode must keep
+                // LP visible and main-toolbar at a real LP-panel width (well
+                // above the icon-bar width).
                 await openLivePreview();
                 await enterDesignMode();
                 await exitDesignMode();
+
                 expect(livePanel().isVisible()).toBe(true);
+                const iconsW = _$("#plugin-icons-bar").outerWidth();
+                const toolbarW = _$("#main-toolbar").outerWidth();
+                expect(toolbarW).toBeGreaterThan(iconsW + 50);
             });
 
             it("should fit sidebar + CCB + toolbar + a reasonable editor area in the window after exit", async function () {
@@ -591,17 +599,20 @@ define(function (require, exports, module) {
                 expect(testWindow.innerWidth - total).toBeGreaterThan(100);
             });
 
-            it("should use the innerWidth/2.5 default for toolbar when LP was opened by the toggle itself", async function () {
-                // LP is closed on entry — the toggle opens it.
+            it("should close Live Preview and shrink toolbar to the icon-bar width when LP was opened by the toggle itself", async function () {
+                // LP is closed on entry — the toggle opens it. On exit we
+                // restore the original "pure code" layout: LP closes again
+                // and main-toolbar shrinks to the icon-bar width.
                 await enterDesignMode();
+                expect(livePanel().isVisible()).toBe(true);
                 await exitDesignMode();
 
-                expect(livePanel().isVisible()).toBe(true);
-                const expectedDefault = Math.floor(testWindow.innerWidth / 2.5);
-                // `_restoreExpandedLayout` may trim a bit to honour the MIN_EDITOR clamp
-                // on narrow viewports, so compare with a generous tolerance.
-                const toolbar = _$("#main-toolbar").outerWidth();
-                expect(Math.abs(toolbar - expectedDefault)).toBeLessThan(30);
+                await awaitsFor(function () { return !livePanel().isVisible(); },
+                    "live preview to close on exit", 5000);
+
+                const iconsW = _$("#plugin-icons-bar").outerWidth();
+                const toolbarW = _$("#main-toolbar").outerWidth();
+                expect(Math.abs(toolbarW - iconsW)).toBeLessThan(3);
             });
 
             it("should not let the sidebar snap wider than the rendered (capped) width after exit even if user dragged past the cap in design mode", async function () {
@@ -643,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);
             });
         });
 

tracking-repos.json

@@ -1,5 +1,5 @@
 {
   "phoenixPro": {
-    "commitID": "35a5652662376d7149a1a9b7cf6d4f5ad9cf3cd5"
+    "commitID": "335648a9525b6ba669b311af3f102b3a73de2664"
   }
 }