fix: make the live preview expand button toggle design mode again

Author: devvaannsh

src/extensionsIntegrated/Phoenix-live-preview/live-preview.css

@@ -370,13 +370,13 @@
 }
 
 #reloadLivePreviewButton,
-#fullScreenLivePreviewButton {
+#designModeToggleLivePreviewButton {
     border: 1px solid transparent;
     border-radius: 3px;
 }
 
 #live-preview-plugin-toolbar #reloadLivePreviewButton:hover,
-#live-preview-plugin-toolbar #fullScreenLivePreviewButton:hover {
+#live-preview-plugin-toolbar #designModeToggleLivePreviewButton:hover {
     border-color: rgba(255, 255, 255, 0.1) !important;
     background: transparent !important;
     box-shadow: none !important;

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -194,7 +194,7 @@ define(function (require, exports, module) {
         $modeBtn,
         $modeBtnGroup,
         $previewBtn,
-        $fullScreenBtn;
+        $designModeBtn;
 
     let customLivePreviewBannerShown = false;
 
@@ -866,7 +866,7 @@ define(function (require, exports, module) {
             livePreview: Strings.LIVE_DEV_STATUS_TIP_OUT_OF_SYNC,
             clickToReload: Strings.LIVE_DEV_CLICK_TO_RELOAD_PAGE,
             clickToToggleEdit: Strings.LIVE_PREVIEW_MODE_TOGGLE_EDIT,
-            fullScreenLivePreview: Strings.LIVE_PREVIEW_FULL_SCREEN,
+            switchToDesignMode: Strings.CCB_SWITCH_TO_DESIGN_MODE,
             livePreviewSettings: Strings.LIVE_DEV_SETTINGS,
             livePreviewConfigureModes: Strings.LIVE_PREVIEW_CONFIGURE_MODES,
             clickToPopout: Strings.LIVE_DEV_CLICK_POPOUT,
@@ -899,7 +899,7 @@ define(function (require, exports, module) {
         $modeBtn = $panel.find("#livePreviewModeBtn");
         $modeBtnGroup = $panel.find("#lpModeBtnGroup");
         $previewBtn = $panel.find("#previewModeLivePreviewButton");
-        $fullScreenBtn = $panel.find("#fullScreenLivePreviewButton");
+        $designModeBtn = $panel.find("#designModeToggleLivePreviewButton");
 
         // Markdown theme toggle — persist user choice
         MarkdownSync.setThemeToggleHandler((theme) => {
@@ -982,25 +982,26 @@ define(function (require, exports, module) {
             Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "reloadBtn", "click");
         });
 
-        function _updateFullScreenButton() {
-            const on = WorkspaceManager.isInLPFullScreen && WorkspaceManager.isInLPFullScreen();
-            $fullScreenBtn.find("i")
+        // Mirrors the control bar's design mode toggle so the user can switch without leaving the preview.
+        function _updateDesignModeButton() {
+            const on = WorkspaceManager.isInDesignMode && WorkspaceManager.isInDesignMode();
+            $designModeBtn.find("i")
                 .removeClass("fa-expand fa-compress")
                 .addClass(on ? "fa-compress" : "fa-expand");
-            $fullScreenBtn.attr("title",
-                on ? Strings.LIVE_PREVIEW_EXIT_FULL_SCREEN : Strings.LIVE_PREVIEW_FULL_SCREEN);
+            $designModeBtn.attr("title",
+                on ? Strings.CCB_SWITCH_TO_CODE_EDITOR : Strings.CCB_SWITCH_TO_DESIGN_MODE);
+            if ($modeBtn) {
+                $modeBtn.toggle(!on && !_isMdviewrActive);
+            }
         }
-        $fullScreenBtn.click(()=>{
-            CommandManager.execute(Commands.VIEW_TOGGLE_LP_FULL_SCREEN);
-            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "fullScreenBtn", "click");
+        $designModeBtn.click(()=>{
+            CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+            Metrics.countEvent(Metrics.EVENT_TYPE.LIVE_PREVIEW, "designModeBtn", "click");
         });
         WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview");
         WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_DESIGN_MODE_CHANGE + ".livePreview",
-            _updateLPControlsForMdviewer);
-        WorkspaceManager.off(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview");
-        WorkspaceManager.on(WorkspaceManager.EVENT_WORKSPACE_LP_FULL_SCREEN_CHANGE + ".livePreview",
-            _updateFullScreenButton);
-        _updateFullScreenButton();
+            _updateDesignModeButton);
+        _updateDesignModeButton();
 
         // init the status overlay
         _initOverlay();

src/extensionsIntegrated/Phoenix-live-preview/panel.html

@@ -4,7 +4,7 @@
             <button id="reloadLivePreviewButton" title="{{clickToReload}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-arrow-rotate-right"></i>
 	        </button>
-	        <button id="fullScreenLivePreviewButton" title="{{fullScreenLivePreview}}" class="btn-alt-quiet toolbar-button">
+	        <button id="designModeToggleLivePreviewButton" title="{{switchToDesignMode}}" class="btn-alt-quiet toolbar-button">
 	            <i class="fa-solid fa-expand"></i>
 	        </button>
             <span id="lpModeBtnGroup" class="lp-mode-btn-group">

test/spec/CentralControlBar-integ-test.js

@@ -1492,15 +1492,16 @@ define(function (require, exports, module) {
                     expect(SidebarView.isVisible()).toBe(true);
                 });
 
-            it("should dispatch VIEW_TOGGLE_LP_FULL_SCREEN from the live preview expand button",
+            it("should dispatch VIEW_TOGGLE_DESIGN_MODE from the live preview expand button",
                 async function () {
                     await openLivePreview();
 
                     const executed = recordCommands(function () {
-                        _$("#fullScreenLivePreviewButton").trigger("click");
+                        _$("#designModeToggleLivePreviewButton").trigger("click");
                     });
 
-                    expect(executed).toContain(Commands.VIEW_TOGGLE_LP_FULL_SCREEN);
+                    expect(executed).toContain(Commands.VIEW_TOGGLE_DESIGN_MODE);
+                    expect(executed).not.toContain(Commands.VIEW_TOGGLE_LP_FULL_SCREEN);
                 });
         });
     });